:root{--bg-night:#090b10;--bg-glow:#152235;--text-main:#d7e1f2;--text-muted:#7e93b2;--shell-top:#2f3846;--shell-bottom:#161c26;--shell-edge:#4d5a70;--shell-shadow:#00000073;--screen-bezel:#111820;--screen-frame:#24313f;--screen-bg:#8ea67a;--screen-shadow:#53644a;--screen-ink:#182413;--screen-grid:#1824131f;--snake-body:#26351f;--snake-highlight:#415537;--food-core:#14200f;--control-face:#273140;--control-face-alt:#1d2632;--control-edge:#5d6b81;--control-label:#f2f6ff;--gold:#e7c96a;--silver:#c9d0db;--bronze:#b98a57}*{box-sizing:border-box}html{min-height:100%}body{min-height:100vh;color:var(--text-main);background:radial-gradient(circle at top, #2d528247, transparent 28%), radial-gradient(circle at bottom, #0f1e3457, transparent 35%), linear-gradient(180deg, #06080d 0%, var(--bg-night) 45%, #040507 100%);margin:0;font-family:Trebuchet MS,Verdana,sans-serif;overflow-x:hidden}button,input{font:inherit}.page-shell{align-content:start;justify-items:center;gap:1.4rem;min-height:100vh;padding:2rem 1rem 3rem;display:grid}.hero-copy{text-align:center;width:min(700px,100%)}.eyebrow{letter-spacing:.28em;text-transform:uppercase;color:#8ea1bf;margin:0 0 .65rem;font-size:.7rem}.hero-copy h1{color:#f3f7ff;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 8px 24px #00000073;margin:0;font-size:clamp(2.2rem,6vw,4.3rem)}.intro{max-width:50ch;color:var(--text-muted);margin:.9rem auto 0;font-size:.96rem;line-height:1.6}.nokia-stage{grid-template-columns:minmax(0,1fr);justify-content:center;justify-items:center;width:min(390px,100vw - 1rem);margin-inline:auto;display:grid}.phone-frame{background:linear-gradient(180deg, #ffffff0d, transparent 18%), linear-gradient(180deg, var(--shell-top) 0%, var(--shell-bottom) 100%);border:3px solid var(--shell-edge);width:100%;max-width:390px;box-shadow:0 24px 48px var(--shell-shadow), inset 0 1px 0 #ffffff14, inset 0 -10px 16px #00000059;border-radius:1.7rem;justify-self:center;padding:1.05rem .85rem}.speaker-slot{background:linear-gradient(#0c1118,#1f2b38);border-radius:999px;width:94px;height:8px;margin:0 auto .9rem;box-shadow:inset 0 1px 2px #ffffff0d}.screen-wrap{background:linear-gradient(180deg, #2d3949 0%, var(--screen-frame) 100%);border:2px solid #475567;border-radius:.95rem;padding:.72rem;box-shadow:inset 0 1px #ffffff14,inset 0 -8px 10px #00000038}.screen-topbar,.screen-bottom{color:#d4deef;text-transform:uppercase;letter-spacing:.14em;justify-content:space-between;gap:.75rem;font-size:.68rem;display:flex}.screen-topbar{margin-bottom:.55rem}.screen-bottom{margin-top:.55rem}.game-screen{grid-template-columns:repeat(var(--grid-columns), 1fr);grid-template-rows:repeat(var(--grid-rows), 1fr);aspect-ratio:3/4;border:4px solid var(--screen-bezel);background:linear-gradient(var(--screen-grid) 1px, transparent 1px), linear-gradient(90deg, var(--screen-grid) 1px, transparent 1px), linear-gradient(180deg, #a2b98b 0%, var(--screen-bg) 100%);background-size:100% 4.16667%,5.55556% 100%,100% 100%;border-radius:.35rem;outline:none;gap:1px;padding:.34rem;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 0 0 2px #ffffff0f,inset 0 -10px 22px #53644a47}.game-cell{background:#18241305;position:relative}.game-cell.is-potato:after{content:"";background:linear-gradient(180deg, var(--snake-highlight) 0%, var(--snake-body) 100%);border-radius:2px;position:absolute;inset:7%;box-shadow:inset 0 1px #c5e0b133,inset -1px -1px #0b110a73}.game-cell.is-head:after{background:linear-gradient(#4f6542 0%,#2f4227 100%);box-shadow:inset 0 1px #dcffc93d,inset -1px -1px #0a0e088c,0 0 0 1px #1824131f}.game-cell.is-head:before{content:"";z-index:2;background:#cfe2be;width:12%;height:12%;position:absolute;top:34%;left:24%;box-shadow:8px 0 #cfe2be}.game-cell.is-food:after{content:"";background:radial-gradient(circle at 34% 32%,#fff4cd52 0,#0000 30%),radial-gradient(circle at 70% 68%,#381f0b38 0,#0000 18%),linear-gradient(#8f6b3d 0%,#6f4f2a 48%,#4d3518 100%);border-radius:28% 32% 26% 30%;animation:.9s steps(2,jump-none) infinite pulseDot;position:absolute;inset:16%;box-shadow:inset 0 1px #fff1d433,inset -1px -1px #160c046b}.screen-overlay,.display-overlay,.name-overlay{place-items:center;padding:1rem;display:grid;position:absolute;inset:0}.screen-overlay{text-align:center;color:var(--screen-ink);text-transform:uppercase;background:#95ab80e0}.screen-overlay p{letter-spacing:.16em;margin:0;font-size:.94rem}.screen-overlay span{letter-spacing:.08em;max-width:24ch;margin-top:.65rem;font-size:.7rem;line-height:1.45}.display-overlay,.name-overlay{z-index:4;background:#11181433}.display-card,.name-card{width:min(248px,100%);color:var(--screen-ink);background:#96ab80f7;border:1px solid #1824132e;border-radius:.95rem;gap:.72rem;padding:.95rem;display:grid;box-shadow:0 10px 24px #18241329,inset 0 1px #f4ffea47}.display-card{align-content:start;width:100%;height:100%}.display-card-top{justify-content:space-between;align-items:start;gap:.65rem;display:flex}.name-card{text-align:center}.name-card-kicker{letter-spacing:.18em;text-transform:uppercase;color:#182413b3;margin:0;font-size:.64rem}.display-card h3,.name-card h3{letter-spacing:.14em;text-transform:uppercase;margin:0;font-size:.95rem}.name-card .name-input{color:#f3f7ff;background:#0c1118eb}.name-card-actions{gap:.55rem;display:grid}.controls-panel{gap:.8rem;margin-top:.95rem;display:grid}.menu-copy,.menu-empty{color:#182413c7;margin:0;font-size:.82rem;line-height:1.5}.control-actions{gap:.7rem;display:grid}.control-actions.two-wide{grid-template-columns:repeat(2,minmax(0,1fr))}.name-input{color:#f3f7ff;background:#0a0e14e0;border:1px solid #6f81a173;border-radius:.8rem;outline:none;min-width:0;padding:.78rem .85rem}.name-input::placeholder{color:#687c99}.name-input:focus{border-color:#8ea67a;box-shadow:0 0 0 2px #8ea67a2e}.action-button,.dpad-button{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border:1px solid var(--control-edge);color:var(--control-label);background:linear-gradient(180deg, #ffffff0f, transparent 16%), linear-gradient(180deg, var(--control-face) 0%, var(--control-face-alt) 100%);box-shadow:inset 0 1px #ffffff14,inset 0 -3px #00000057,0 8px 16px #00000038}.action-button{text-transform:uppercase;letter-spacing:.14em;cursor:pointer;text-shadow:0 1px #00000052;border-radius:999px;padding:.78rem .95rem;font-size:.82rem;font-weight:700}.action-button.secondary{background:linear-gradient(#ffffff14,#0000 16%),linear-gradient(#263245 0%,#182130 100%)}.action-button.mini{padding:.55rem .8rem;font-size:.68rem}.action-button:disabled{opacity:.45;cursor:not-allowed}.dpad{grid-template-rows:repeat(3,56px);grid-template-columns:repeat(3,1fr);grid-template-areas:".up.""left.right"".down.";gap:.45rem;width:min(220px,100%);margin:0 auto;display:grid}.dpad-button{cursor:pointer;color:#f6f8ff;border-radius:.88rem;place-items:center;font-size:1.08rem;font-weight:700;display:grid}.dpad-button.up{grid-area:up}.dpad-button.left{grid-area:left}.dpad-button.right{grid-area:right}.dpad-button.down{grid-area:down}.action-button:active,.dpad-button:active{transform:translateY(1px)}.leaderboard-shell{margin-top:.1rem}.leaderboard-shell.in-display{gap:.7rem;min-height:0;display:grid}.leaderboard-list{gap:.42rem;margin:0;padding:0;list-style:none;display:grid;overflow:auto}.leaderboard-list.in-display{max-height:100%}.leaderboard-item{background:#11182133;border:1px solid #1824131f;border-radius:.85rem;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:.7rem;padding:.66rem .78rem;display:grid}.leaderboard-item.top-1{background:#8d702138}.leaderboard-item.top-2{background:#434c5833}.leaderboard-item.top-3{background:#61422933}.leaderboard-rank{align-items:center;gap:.4rem;display:flex}.rank-number,.rank-tag{letter-spacing:.12em;text-transform:uppercase;font-size:.72rem}.rank-number{color:#182413ad}.rank-tag{background:#18241314;border-radius:999px;padding:.22rem .42rem}.rank-tag.rank-1{color:#866500}.rank-tag.rank-2{color:#56606d}.rank-tag.rank-3{color:#7f4d1d}.crown-icon{width:22px;height:16px}.crown-icon.rank-1{color:var(--gold)}.crown-icon.rank-2{color:var(--silver)}.crown-icon.rank-3{color:var(--bronze)}.leaderboard-name{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:.88rem;overflow:hidden}.leaderboard-score{color:var(--screen-ink);font-size:.88rem;font-weight:700}@keyframes pulseDot{0%,to{opacity:.55;transform:scale(.88)}50%{opacity:1;transform:scale(1)}}@media (max-width:640px){.page-shell{place-content:center;justify-items:center;gap:.35rem;min-height:100dvh;padding:.45rem .25rem .6rem}.hero-copy{justify-self:center;width:min(100%,320px)}.eyebrow{letter-spacing:.16em;margin-bottom:.22rem;font-size:.5rem}.hero-copy h1{letter-spacing:.05em;font-size:clamp(1.2rem,7vw,1.8rem)}.intro{display:none}.nokia-stage{justify-self:center;width:min(100vw - .25rem,57dvh - 1.197rem)}.phone-frame{border-width:2px;border-radius:1rem;padding:.55rem .42rem}.speaker-slot{width:62px;height:5px;margin-bottom:.45rem}.screen-wrap{border-radius:.72rem;padding:.38rem}.screen-topbar,.screen-bottom{letter-spacing:.06em;font-size:.5rem}.screen-topbar{margin-bottom:.28rem}.screen-bottom{margin-top:.28rem}.game-screen{border-width:3px;padding:.18rem}.controls-panel{gap:.4rem;margin-top:.42rem}.control-actions,.control-actions.two-wide{grid-template-columns:repeat(2,minmax(0,1fr));gap:.38rem}.action-button{letter-spacing:.09em;min-height:40px;padding:.5rem .42rem;font-size:.6rem}.action-button.mini{min-height:30px;font-size:.55rem}.display-card,.name-card{gap:.48rem;width:100%;padding:.62rem}.display-card-top{gap:.4rem}.display-card h3,.name-card h3{font-size:.75rem}.name-input{padding:.54rem .62rem;font-size:.8rem}.leaderboard-item{grid-template-columns:48px minmax(0,1fr) auto;gap:.35rem;padding:.4rem .44rem}.leaderboard-name,.leaderboard-score{font-size:.7rem}.rank-number,.rank-tag{font-size:.58rem}.crown-icon{width:16px;height:12px}.dpad{grid-template-rows:repeat(3,54px);gap:.36rem;width:min(232px,100%)}.dpad-button{border-radius:.9rem;font-size:1.16rem}}@media (max-width:420px){.page-shell{align-content:center;gap:.22rem;padding-top:.25rem}.hero-copy{justify-self:center;width:min(100%,280px)}.eyebrow{margin-bottom:.1rem;font-size:.44rem}.hero-copy h1{font-size:clamp(1rem,6vw,1.45rem)}.nokia-stage{justify-self:center;width:min(100vw - .2rem,58.5dvh - .78975rem)}.phone-frame{border-radius:.92rem;padding:.45rem .34rem}.screen-wrap{padding:.32rem}.screen-topbar,.screen-bottom{font-size:.46rem}.controls-panel{gap:.34rem;margin-top:.36rem}.action-button{min-height:38px;padding:.46rem .36rem;font-size:.58rem}.dpad{grid-template-rows:repeat(3,56px);gap:.34rem;width:min(236px,100%)}.dpad-button{font-size:1.2rem}.display-overlay,.name-overlay{padding:.46rem}.display-card,.name-card{padding:.54rem}}