/* Game screens share the menu's type, glass and CRT treatment. */
.game-dialog {
  --game-ease: cubic-bezier(.22, 1, .36, 1);
  --game-radius: 28px;
  width: min(920px, calc(100% - 48px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateY(16px) scale(.985);
  transition: opacity 300ms ease, transform 420ms var(--game-ease);
}
.game-dialog[data-game=snake] { width: min(550px, calc(100% - 40px)); }
.game-dialog.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.game-dialog.is-closing { opacity: 0; transform: translateY(10px) scale(.99); pointer-events: none; transition-duration: 220ms; }
.performance-lite .game-dialog { transition: opacity 160ms ease, transform 200ms var(--game-ease); }
.game-dialog::backdrop { background: #03101a00; backdrop-filter: blur(0); transition: background 300ms ease, backdrop-filter 360ms ease; }
.game-dialog.is-visible::backdrop { background: #03101a8c; backdrop-filter: blur(3px); }
.game-dialog.is-closing::backdrop { background: #03101a00; backdrop-filter: blur(0); transition-duration: 220ms; }
#console { transition: opacity 280ms ease, filter 360ms ease; }
body.game-open #console { opacity: 0; filter: blur(3px); pointer-events: none; }
.game-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.game-header h2 { margin: 0; font: 400 clamp(24px, 2.5vw, 30px)/1.4 var(--font); text-shadow: var(--chromatic); }
.game-header-actions { display: flex; align-items: center; gap: 16px; }
.game-sound { display: grid; place-items: center; width: 34px; height: 34px; padding: 6px; border: 1px solid transparent; border-radius: 11px; background: none; color: #dde8efb3; transition: color 160ms, background-color 160ms; }
.game-sound:hover { color: #fff; background: #d3e8f012; }
.game-sound .sound-muted, .game-sound[aria-pressed=false] .sound-waves { display: none; }
.game-sound[aria-pressed=false] .sound-muted { display: block; }
.game-back { display: flex; align-items: center; gap: 10px; padding: 8px 0 8px 8px; border: 0; border-radius: 11px; background: none; color: #dde8efb3; font: 12px var(--font); transition: color 160ms, text-shadow 160ms; }
.game-back:hover { color: #fff; text-shadow: var(--focus-glow); }
.game-dialog kbd { font: inherit; }
.game-back kbd { padding: 1px 5px 2px; border: 1px solid #d5e8f14d; border-radius: 6px; font-size: 10px; }
.game-scores { display: flex; justify-content: space-between; gap: 24px; margin: 0 2px 12px; color: #d3e0e6a8; font: 12px var(--font); text-shadow: 0 1px 3px #000; }
.game-scores b { margin-left: 10px; color: #f1f6f5; font: 400 16px 'Courier New', monospace; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.game-stage { position: relative; overflow: hidden; line-height: 0; background: #06141dc7; border: 1px solid #c6e2e333; border-radius: var(--game-radius); box-shadow: 0 12px 45px #0003, inset 0 0 55px #0003; }
/* Keep every snake cell visible inside the rounded frame. */
.snake-stage { padding: 12px; }
.game-stage::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: repeating-linear-gradient(transparent 0 2px, #0003 2px 3px); opacity: .6; }
.crt-off .game-stage::after { display: none; }
.game-dialog canvas { display: block; width: 100%; height: auto; border: 0; border-radius: 0; background: transparent; outline: none; image-rendering: pixelated; touch-action: none; transition: opacity 200ms ease; }
#snakeCanvas { aspect-ratio: 4/3; }
#dinoCanvas { aspect-ratio: 40/13; }
.game-dialog:not([data-phase=running]) canvas { opacity: .42; }
.game-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; text-align: center; line-height: 1.5; pointer-events: none; background: radial-gradient(ellipse at center, #0715216b, transparent 72%); opacity: 1; transform: translateY(0); transition: opacity 180ms ease, transform 240ms var(--game-ease); }
.game-overlay.is-hidden { opacity: 0; transform: translateY(5px); }
.game-overlay strong { font: 400 clamp(18px, 2.2vw, 24px)/1.4 var(--font); text-shadow: var(--chromatic); }
.game-overlay span { font: 12px var(--font); color: #c9dbe3c9; }
.game-overlay span:empty { display: none; }
.game-controls { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 12px; }
.game-toggle { position: relative; display: grid; place-items: center; flex: none; width: 48px; height: 44px; padding: 0; border: 0; border-radius: 15px; background: transparent; color: #dfebf0cc; cursor: pointer; touch-action: manipulation; transition: color 160ms ease, background-color 160ms ease, transform 160ms ease; }
.game-toggle:hover { color: #fff; background: #d3e8f010; }
.game-toggle:active { transform: scale(.94); }
.game-toggle svg { position: absolute; pointer-events: none; filter: drop-shadow(0 1px 3px #0007); transition: opacity 150ms ease, transform 180ms var(--game-ease); }
.game-toggle .toggle-play { opacity: 1; transform: scale(1); }
.game-toggle .toggle-pause { opacity: 0; transform: scale(.8); }
.game-toggle.is-running .toggle-play { opacity: 0; transform: scale(.8); }
.game-toggle.is-running .toggle-pause { opacity: 1; transform: scale(1); }
.snake-touch button, .dino-touch button { min-height: 36px; padding: 7px 14px; border: 1px solid #b5d9e338; border-radius: 13px; background: #d3e8f00a; color: #dfebf0; font: 12px var(--font); text-shadow: 0 1px 3px #0007; transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease; touch-action: manipulation; }
.snake-touch button:hover, .dino-touch button:hover { background: #d3e8f026; border-color: #d3e8f0b3; color: #fff; }
.snake-touch button:active, .dino-touch button:active { transform: translateY(1px); background: #d3e8f036; }
.game-dialog button:focus-visible { outline: none; }
.game-dialog.is-tab-navigation button:focus-visible { border-color: #d3e8f0b3; background-color: #d3e8f026; color: #fff; text-shadow: var(--focus-glow); }
.game-dialog .game-help { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 0; color: #d5e1e8a6; font: 11px/1.7 var(--font); text-shadow: 0 1px 3px #000; }
.game-help > span { white-space: nowrap; }
.game-help kbd { margin-right: 3px; }
.game-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.snake-touch, .dino-touch { display: none; }
.snake-touch { grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(3, 40px); justify-content: center; gap: 5px; margin: 20px auto 0; }
.snake-touch button { padding: 0; font-size: 20px; touch-action: none; }
.snake-touch [data-snake-dir=up] { grid-column: 2; grid-row: 1; }
.snake-touch [data-snake-dir=left] { grid-column: 1; grid-row: 2; }
.snake-touch [data-snake-dir=right] { grid-column: 3; grid-row: 2; }
.snake-touch [data-snake-dir=down] { grid-column: 2; grid-row: 3; }
.dino-touch { justify-content: center; gap: 12px; margin-top: 20px; }
.dino-touch button { flex: 1; max-width: 200px; min-height: 44px; touch-action: none; }
@media (any-pointer: coarse) { .snake-touch { display: grid; } .dino-touch { display: flex; } }
@media (max-width: 600px) {
  .game-dialog { --game-radius: 22px; }
  .game-dialog, .game-dialog[data-game=snake] { width: calc(100% - 24px); padding: 12px 6px; }
  .game-header { margin-bottom: 22px; }
  .game-header h2 { font-size: 24px; }
  .game-scores { font-size: 11px; }
  .game-controls { gap: 8px; }
  .game-dialog .game-help { font-size: 10px; gap: 5px 12px; }
  .game-key-alternative { display: none; }
  .snake-touch { display: grid; }
  .dino-touch { display: flex; }
  .dino-stage .game-overlay strong { font-size: 18px; }
  .dino-stage .game-overlay span { font-size: 10px; }
}
@media (max-height: 720px) and (min-width: 601px) { .game-dialog[data-game=snake] { width: min(500px, calc(100% - 40px)); } }
@media (max-height: 520px) and (min-width: 601px) { .game-dialog { padding-block: 10px; } .game-dialog[data-game=snake] { width: 390px; } .game-header { margin-bottom: 12px; } .game-controls { margin-top: 12px; } .game-header h2 { font-size: 22px; } .game-dialog .game-help { font-size: 9px; gap: 4px 8px; } }
.motion-off .game-dialog, .motion-off .game-dialog::backdrop, .motion-off #console, .motion-off .game-overlay, .motion-off .game-dialog canvas, .motion-off .game-toggle, .motion-off .game-toggle svg { transition: none; }
@media (prefers-reduced-motion: reduce) { .game-dialog, .game-dialog::backdrop, #console, .game-overlay, .game-dialog canvas { transition: none; } }