/* Keep the game itself visible through its start and end states. */
body:is([data-game='snake'],[data-game='2048']) .board-container { isolation: isolate; }
body:is([data-game='snake'],[data-game='2048']) .board-container::after {
  content: attr(data-flow-hint); position: absolute; z-index: 7; bottom: 7%; left: 16px; right: 16px;
  color: #b5b5b5; text-align: center; font-size: 12px; font-weight: 400; letter-spacing: .015em;
  pointer-events: none; opacity: 0; transform: translateY(3px); transition: opacity 180ms, transform 180ms;
}
body:is([data-game='snake'],[data-game='2048']) .board-container[data-flow='ready']::after { opacity: .85; transform: none; }
body:is([data-game='snake'],[data-game='2048']) .board-container[data-flow='result'] .game-overlay {
  justify-content: flex-end; align-items: center; padding: 28px 20px; gap: 0;
  background: linear-gradient(0deg,#171717f2,#171717b8 30%,#17171700 64%); backdrop-filter: none;
  pointer-events: none; animation: classic-result-in 560ms cubic-bezier(.2,.65,.3,1) both;
}
body:is([data-game='snake'],[data-game='2048']) .board-container[data-flow='result'] .game-overlay h2 { margin: 0 0 6px; font-size: clamp(22px,4vw,30px); font-weight: 400; letter-spacing: -.025em; }
body:is([data-game='snake'],[data-game='2048']) .board-container[data-flow='result'] .game-overlay p { margin: 0; color: #c6c6c6; font-size: 13px; line-height: 1.8; white-space: pre-line; }
body:is([data-game='snake'],[data-game='2048']) .board-container[data-flow='result'] .game-overlay button { pointer-events: auto; }
body[data-game='2048'] .board-container[data-flow='start'] .merge-slots { animation: classic-grid-wake 400ms cubic-bezier(.2,.7,.3,1); }
body[data-game='2048'] .board-container[data-flow='ending'] .merge-cell:not([data-value='0']) {
  transform-origin: 50% 90%; animation: classic-tile-collapse 1000ms linear both; animation-delay: var(--end-delay,0ms);
}
body[data-game='2048'] .board-container[data-flow='winning'] .merge-cell:not([data-value='0']) {
  animation: classic-tile-win 460ms cubic-bezier(.2,.7,.3,1) both; animation-delay: var(--end-delay,0ms);
}
@keyframes classic-grid-wake { 0% { opacity: .5; filter: brightness(.7); } 35% { opacity: 1; filter: brightness(1.45); } 100% { opacity: 1; filter: none; } }
@keyframes classic-tile-collapse {
  0%,12% { transform: translate(0,0) rotate(0) scale(1); filter: brightness(1); }
  27% { transform: translate(0,2%) rotate(0) scale(1.012,.97); filter: brightness(.96); animation-timing-function: cubic-bezier(.55,.05,.85,.5); }
  66% { transform: translate(var(--collapse-x),var(--collapse-hit-y)) rotate(var(--collapse-turn)) scale(1.015,.935); filter: brightness(.84); animation-timing-function: cubic-bezier(.15,.65,.25,1); }
  82% { transform: translate(var(--collapse-x),calc(var(--collapse-y) - 3%)) rotate(var(--collapse-turn)) scale(.985,.98); filter: brightness(.81); }
  100% { transform: translate(var(--collapse-x),var(--collapse-y)) rotate(var(--collapse-turn)) scale(.985,.97); filter: brightness(.78); }
}
@keyframes classic-tile-win { 0% { filter: brightness(1); } 35% { filter: brightness(1.55); } 100% { filter: brightness(1); } }
@keyframes classic-result-in { 0% { opacity: 0; transform: translateY(12px); } 25% { opacity: 0; } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  body:is([data-game='snake'],[data-game='2048']) .board-container::after { transition: none; }
  body:is([data-game='snake'],[data-game='2048']) .board-container :is(.game-overlay,.merge-slots,.merge-cell) { animation: none !important; }
}

body[data-game='2048'] .board-container[data-flow='result'][data-outcome='over'] .merge-cell:not([data-value='0']) { transform: translate(var(--collapse-x),var(--collapse-y)) rotate(var(--collapse-turn)) scale(.985,.97); filter: brightness(.78); }