/* Quiet Nokia-era inspired Snake presentation; no brand assets or sounds. */
.game-icon-snake { display: grid; width: 52px; height: 52px; flex: 0 0 52px; place-items: center; overflow: hidden; border: 1px solid #394432; border-radius: 13px; background: linear-gradient(145deg, #59645b, #2f3733); box-shadow: inset 0 1px 0 #ffffff5c, 0 3px 7px #1420192b; }
.game-icon-snake svg { width: 45px; height: 45px; }
.snake-icon-screen { fill: #b8c991; stroke: #212b24; stroke-width: 2; }
.snake-icon-pixels, .snake-icon-head, .snake-icon-food { fill: #1d2b20; }
.snake-icon-eye { fill: #b8c991; }
.snake-arcade { display: grid; justify-items: center; gap: 13px; width: min(470px, 100%); }
.snake-arcade .waiting-game-rules { max-width: 540px; margin: 0; color: #405048; font-size: .9rem; line-height: 1.55; text-align: center; }
.snake-phone { position: relative; display: grid; justify-items: center; gap: 13px; width: min(430px, 100%); padding: 18px 21px 20px; box-sizing: border-box; border: 2px solid #2d3632; border-radius: 35px 35px 54px 54px; background: linear-gradient(90deg, transparent 0 9%, #ffffff14 10%, transparent 12% 88%, #0a110c1f 91%, transparent 93%), linear-gradient(155deg, #66716b 0%, #414b46 48%, #26302c 100%); box-shadow: 0 18px 34px -15px #17251f7a, inset 0 2px 0 #ffffff4f, inset 0 -3px 0 #111a1645; }
.snake-speaker { width: 58px; height: 5px; border-radius: 5px; background: #1e2823; box-shadow: inset 0 1px 1px #0008, 0 1px 0 #ffffff26; }
.snake-screen-shell { width: 100%; overflow: hidden; border: 7px solid #202923; border-radius: 13px; background: #b8c991; box-shadow: 0 0 0 2px #788279, 0 4px 0 #121a16, inset 0 0 18px #2c3c2538; }
.snake-lcd-hud { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; min-height: 28px; padding: 2px 8px 0; border-bottom: 2px solid #263528; color: #1d2b20; font: 700 .65rem/1 "Courier New", monospace; letter-spacing: .05em; }
.snake-lcd-hud span:last-child { text-align: right; }
.snake-lcd-hud strong { font-size: .8rem; }
.snake-lcd-title { padding: 3px 7px; border: 1px solid #263528; font-weight: 900; letter-spacing: .12em; }
.snake-canvas-wrap { position: relative; aspect-ratio: 1; width: 100%; overflow: hidden; background: #b8c991; }
.snake-canvas { display: block; width: 100%; height: 100%; outline: 0; image-rendering: pixelated; touch-action: none; }
.snake-canvas:focus-visible { box-shadow: inset 0 0 0 4px #eef2d5; }
.snake-canvas-wrap::after { position: absolute; inset: 0; z-index: 2; background: repeating-linear-gradient(0deg, #25352508 0 1px, transparent 1px 3px); content: ""; pointer-events: none; }
.snake-overlay { position: absolute; z-index: 3; inset: 50% auto auto 50%; display: grid; gap: 6px; width: min(78%, 270px); padding: 15px 16px; transform: translate(-50%, -50%); border: 3px double #1d2b20; background: #b8c991e8; color: #1d2b20; font-family: "Courier New", monospace; text-align: center; box-shadow: 4px 4px 0 #26352855; pointer-events: none; }
.snake-overlay[hidden] { display: none; }
.snake-overlay strong { font-size: 1.25rem; letter-spacing: .14em; }
.snake-overlay span { font-size: .69rem; line-height: 1.45; }
.snake-keypad { display: grid; grid-template: repeat(3, 44px) / repeat(3, 58px); gap: 5px; }
.snake-key { display: grid; min-width: 0; min-height: 0; padding: 0; place-items: center; border: 1px solid #1b2520; border-radius: 9px; background: linear-gradient(#58635d, #303a35); color: #f1f4eb; font: 800 .95rem/1 system-ui, sans-serif; box-shadow: inset 0 1px 0 #ffffff45, 0 3px 0 #18211d; touch-action: manipulation; }
.snake-key:hover { background: linear-gradient(#65716a, #39453f); }
.snake-key:active { transform: translateY(2px); box-shadow: inset 0 1px 0 #ffffff30, 0 1px 0 #18211d; }
.snake-key-up { grid-area: 1 / 2; }
.snake-key-left { grid-area: 2 / 1; }
.snake-key-center { grid-area: 2 / 2; border-radius: 50%; background: linear-gradient(#b5beb6, #77837b); color: #1e2923; font-size: .58rem; letter-spacing: .04em; }
.snake-key-right { grid-area: 2 / 3; }
.snake-key-down { grid-area: 3 / 2; }
.snake-actions { display: flex; gap: 10px; width: min(430px, 100%); }
.snake-actions button { flex: 1; min-height: 42px; border-radius: 10px; }
.snake-actions button:not(.secondary) { border-color: #303a35; background: #414d47; box-shadow: 0 2px 0 #242d29; }
.snake-actions button.secondary { border-color: #aeb9af; background: #f4f6f1; color: #46544b; }
.snake-status { min-height: 1.5em; margin: 0; color: #4b5a50; font-size: .82rem; font-weight: 700; text-align: center; }
.snake-status.is-correct { color: #237142; }
.snake-status.is-wrong { color: #a33a34; }
.snake-control-hint { margin: -5px 0 0; color: #727e76; font-size: .7rem; line-height: 1.5; text-align: center; }
@media (max-width: 480px) {
  .snake-arcade { gap: 10px; }
  .snake-arcade .waiting-game-rules { font-size: .8rem; }
  .snake-phone { padding: 14px 13px 17px; gap: 10px; border-radius: 27px 27px 40px 40px; }
  .snake-screen-shell { border-width: 6px; border-radius: 10px; }
  .snake-lcd-hud { min-height: 25px; padding-inline: 6px; font-size: .57rem; }
  .snake-lcd-hud strong { font-size: .68rem; }
  .snake-lcd-title { padding: 2px 5px; }
  .snake-keypad { grid-template: repeat(3, 39px) / repeat(3, 53px); gap: 4px; }
  .snake-key { border-radius: 8px; }
  .snake-actions button { min-width: 0; padding: 10px 8px; font-size: .78rem; }
  .snake-control-hint { font-size: .64rem; }
}
@media (prefers-reduced-motion: reduce) { .snake-key { transition: none; } }