.snake-page{max-width:960px;color:var(--foreground);margin-inline:auto;padding:28px 16px 56px}.snake-page h1{margin:20px 0 12px;font-size:clamp(2rem,7vw,3.5rem);line-height:1.1}.snake-page .snake-intro{color:var(--muted-foreground);max-width:60ch}.snake-arcade{--snake-ground:oklch(96.5% .015 160);--snake-grid:oklch(88% .025 160);--snake-body:oklch(49% .12 158);--snake-head:oklch(33% .08 165);--snake-food:oklch(54% .19 32);--snake-stone:oklch(62% .02 250);max-width:520px;margin:28px auto}.dark .snake-arcade{--snake-ground:oklch(20% .028 165);--snake-grid:oklch(29% .032 165);--snake-body:oklch(72% .14 158);--snake-head:oklch(90% .12 150);--snake-food:oklch(75% .16 40);--snake-stone:oklch(45% .02 250)}.snake-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px;display:grid}.snake-stats>div{border:1px solid var(--border);background:var(--card);border-radius:8px;padding:12px 8px}.snake-stats span{color:var(--muted-foreground);font-size:.75rem;display:block}.snake-stats strong{font-variant-numeric:tabular-nums;font-size:clamp(1.2rem,4vw,1.7rem)}.snake-stats small{font-size:.65rem;font-weight:400}.snake-board{aspect-ratio:1;background:radial-gradient(circle at 50% 40%, color-mix(in oklab, var(--snake-ground) 92%, var(--background)), var(--snake-ground));width:100%;box-shadow:inset 0 0 40px color-mix(in oklab, var(--snake-grid) 60%, transparent), var(--shadow-lg,0 10px 30px -12px #0000004d);touch-action:none;border:2px solid var(--border);border-radius:12px;position:relative;overflow:hidden}.snake-board:focus-visible{outline:3px solid var(--ring);outline-offset:4px}.snake-field{width:100%;height:100%;display:block}.snake-tile-a{fill:var(--snake-grid);opacity:.45}.snake-body{fill:var(--snake-body)}.snake-body-alt{fill:color-mix(in oklab, var(--snake-body) 82%, var(--snake-head))}.snake-head{fill:var(--snake-head);filter:drop-shadow(0 1px 2px color-mix(in oklab, var(--snake-head) 50%, transparent))}.snake-eyes circle{fill:var(--snake-ground)}.snake-eyes .snake-pupil{fill:var(--snake-head)}.snake-wall rect{fill:var(--snake-stone);stroke:color-mix(in oklab, var(--snake-stone) 70%, var(--foreground));stroke-width:1px}.snake-wall path{stroke:color-mix(in oklab, var(--snake-stone) 65%, var(--snake-ground));stroke-width:1.4px;stroke-linecap:round}.snake-apple{fill:var(--snake-food)}.snake-stem{fill:none;stroke:var(--snake-body);stroke-width:2px;stroke-linecap:round}.snake-shine{fill:var(--snake-ground);opacity:.8}.snake-food-stop{stop-color:var(--snake-food)}.snake-food-halo{transform-box:fill-box;transform-origin:50%;animation:1.4s ease-in-out infinite snake-pulse}@keyframes snake-pulse{50%{opacity:.6;transform:scale(.75)}}.snake-burst circle{fill:var(--snake-food);transform-box:view-box;animation:.55s ease-out forwards snake-spark}.snake-burst circle:not(.snake-ring){transform-origin:inherit}.snake-burst .snake-ring{fill:none;stroke:var(--snake-food);stroke-width:2px;transform-box:fill-box;transform-origin:50%;animation:.5s ease-out forwards snake-ring}@keyframes snake-ring{0%{opacity:1;transform:scale(.6)}to{opacity:0;transform:scale(2.4)}}@keyframes snake-spark{0%{opacity:1}to{opacity:0;translate:calc(cos(var(--a)) * 22px) calc(sin(var(--a)) * 22px)}}.snake-pop{animation:.3s ease-out snake-score;display:inline-block}@keyframes snake-score{0%{color:var(--snake-food);transform:scale(1.35)}}.snake-board[data-state=lost]{border-color:var(--snake-food);animation:.35s ease-in-out snake-shake}@keyframes snake-shake{25%{translate:-5px}75%{translate:5px}}.snake-overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);text-align:center;background:color-mix(in oklab, var(--background) 72%, transparent);flex-direction:column;justify-content:center;align-items:center;padding:16px;display:flex;position:absolute;inset:0}.snake-overlay>strong{font-size:clamp(1.5rem,6vw,2.3rem)}.snake-overlay p{color:var(--muted-foreground);margin:8px 0 20px}.snake-status,.snake-note{text-align:center;color:var(--muted-foreground);font-size:.85rem}.snake-actions{justify-content:center;gap:12px;display:flex}.snake-dpad{grid-template-rows:repeat(2,48px);grid-template-columns:repeat(3,52px);justify-content:center;gap:8px;margin-top:20px;display:grid}.snake-dpad button{touch-action:manipulation;min-height:48px;padding:0;font-size:1.5rem}.snake-dir-up{grid-column:2}.snake-dir-left{grid-area:2/1}.snake-dir-down{grid-area:2/2}.snake-dir-right{grid-area:2/3}.snake-instructions{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px}.snake-instructions h2{margin-top:0}.snake-instructions ul{padding-left:20px}.snake-links{flex-wrap:wrap;gap:8px 16px;margin-top:20px;display:flex}.snake-links a,.snake-back{min-height:44px;color:var(--primary);text-underline-offset:4px;align-items:center;text-decoration:underline;display:inline-flex}@media (prefers-reduced-motion:reduce){.snake-arcade *,.snake-arcade :before,.snake-arcade :after{transition:none!important;animation:none!important}}.snake-spine{fill:none;stroke:var(--snake-body);stroke-width:14px;stroke-linecap:round;stroke-linejoin:round}