/* Chroma keeps its actual colors; depth and result marks use only neutral light. */
body.play-page #board .tile {
  overflow: hidden;
  transform-origin: center;
  box-shadow: 0 1px 2px #00000030, inset 0 1px 1px #ffffff0b;
  transition: transform 90ms cubic-bezier(.2,.8,.2,1), box-shadow 100ms ease;
}
body.play-page #board .tile:enabled:hover,
body.play-page #board .tile:enabled:active { transform: none; }
body.play-page #board .tile[data-chroma-input='mouse']:enabled:active,
body.play-page #board .tile[data-chroma-input='keyboard']:enabled:active,
body.play-page #board .tile[data-touch-pressed='true']:enabled {
  transform: scale(.96);
  box-shadow: inset 0 2px 5px #00000038, inset 0 0 0 1px #ffffff80;
}
body.play-page #board .tile:focus-visible {
  outline: 1.5px solid #bdbdbd;
  outline-offset: 3px;
}
body.play-page #board .tile[data-chroma-result] {
  z-index: 2;
  box-shadow: inset 0 0 0 1px #ffffffa6, 0 2px 5px #00000024;
}
body.play-page #board .tile.wrong::after { content: none; }
body.play-page #board .chroma-answer-mark,
body.play-page #board .chroma-tap-ring {
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
}
body.play-page #board .chroma-answer-mark {
  left: 50%; top: 50%; z-index: 2;
  width: 36%; min-width: 20px; max-width: 34px; aspect-ratio: 1;
  display: grid; place-items: center;
  transform: translate(-50%,-50%);
  border: 1px solid #ffffff66;
  border-radius: 50%;
  background: #00000020;
  color: #ffffff;
}
body.play-page #board .chroma-answer-mark svg {
  width: 82%; height: 82%; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 2.3;
  stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}
body.play-page #board .chroma-tap-ring {
  left: var(--tap-x,50%); top: var(--tap-y,50%); z-index: 1;
  width: 34%; min-width: 18px; max-width: 42px; aspect-ratio: 1;
  border: 1px solid #ffffff;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%,-50%);
}
body.play-page .chroma-celebration {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  border-radius: 5px;
  pointer-events: none !important;
  contain: strict;
}
body.play-page .chroma-celebration * { pointer-events: none !important; }
body.play-page .chroma-celebration-shimmer {
  position: absolute;
  inset: -25%;
  background: linear-gradient(120deg,transparent 35%,#ffffff05 44%,#ffffff24 50%,#ffffff05 56%,transparent 65%);
  opacity: 0;
  will-change: transform,opacity;
}
body.play-page .chroma-celebration-particle {
  position: absolute;
  border-radius: 1px;
  background: #ffffff;
  opacity: 0;
  will-change: transform,opacity;
}
@media (prefers-reduced-motion: reduce) {
  body.play-page #board .tile,
  body.play-page #board .tile:enabled:active,
  body.play-page #board .tile[data-touch-pressed='true']:enabled {
    transform: none !important;
    transition: none !important;
  }
  body.play-page #board .chroma-tap-ring,
  body.play-page .chroma-celebration { display: none; }
}