*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#2f3f2a;--bg-2:#36482f;--bg-3:#2a3825;--surface:#f0e4c80a;--surface-hover:#f0e4c812;--surface-strong:#f0e4c81a;--border:#f0e4c81a;--border-subtle:#f0e4c80d;--text-bright:#f0e4c8;--text:#c9bb95;--text-dim:#8a7e5e;--leaf:#a3c97b;--leaf-soft:#a3c97b1f;--berry:#d6776a;--berry-soft:#d6776a1f;--gold:#d4b06a;--gold-soft:#d4b06a24;--bluebird:#7fb3d6;--bronze:#b8853d;--silver:#a0a8b3;--rank-gold:#d4b06a;--platinum:#88b897;--diamond:#6fb6c2;--champion:#c084ad;--grand-champion:#d09a66;--top-rank:#f0e4c8;--font-display:"Fredoka", "Nunito", system-ui, -apple-system, sans-serif;--font-sans:"Nunito", "Inter", system-ui, -apple-system, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, "Cascadia Code", monospace;--radius:6px;--radius-sm:4px;--radius-pill:999px}:root[data-theme=night]{--bg:#151817;--bg-2:#202520;--bg-3:#101211;--surface:#ebe7d80b;--surface-hover:#ebe7d813;--surface-strong:#ebe7d81c;--border:#ebe7d81f;--border-subtle:#ebe7d80f;--text-bright:#ebe7d8;--text:#bbb6a3;--text-dim:#7f7a69;--leaf:#8dbb6a;--leaf-soft:#8dbb6a21;--berry:#d07468;--berry-soft:#d074681f;--gold:#cda65a;--gold-soft:#cda65a24;--bluebird:#74a7ca;--bronze:#b27f38;--silver:#9aa2ad;--rank-gold:#cda65a;--platinum:#77ad87;--diamond:#69aebb;--champion:#bd7fa7;--grand-champion:#c88e5b;--top-rank:#ebe7d8}html{font-size:15px}[hidden]{display:none!important}body{font-family:var(--font-sans);color:var(--text);-webkit-font-smoothing:antialiased;background:var(--bg);background-image:radial-gradient(ellipse 90% 60% at 50% -10%, var(--bg-2) 0%, transparent 60%), radial-gradient(ellipse 120% 70% at 50% 110%, var(--bg-3) 0%, transparent 60%);background-attachment:fixed;min-height:100vh;font-weight:500;overflow-x:hidden}#snake-bg{z-index:0;pointer-events:none;opacity:.32;filter:blur(6px);width:100vw;height:100vh;position:fixed;inset:0}body.in-match #snake-bg{display:none}#app{z-index:1;width:100%;max-width:1080px;margin:0 auto;padding:0 24px 64px;position:relative}.nav{border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;margin-bottom:36px;padding:22px 0 18px;display:flex}.logo{font-family:var(--font-display);color:var(--text-bright);letter-spacing:-.3px;font-size:1.15rem;font-weight:600;text-decoration:none}.logo-dot{color:var(--gold)}.nav-right{align-items:center;gap:22px;display:flex}.theme-toggle{border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface);width:32px;height:32px;color:var(--text);cursor:pointer;justify-content:center;align-items:center;padding:0;transition:background .15s,border-color .15s,color .15s;display:inline-flex}.theme-toggle:hover{background:var(--surface-hover);border-color:var(--text-dim);color:var(--text-bright)}.theme-icon{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:16px;height:16px}.auth-slot{justify-content:flex-end;min-width:32px;display:flex}.user-button{justify-content:center;align-items:center;min-width:32px;min-height:32px;display:flex}.nav-link{font-family:var(--font-display);color:var(--text-dim);font-size:.88rem;font-weight:500;text-decoration:none;transition:color .15s}.nav-link:hover{color:var(--text)}.nav-link.active{color:var(--text-bright)}.nav-link.disabled{opacity:.35;pointer-events:none}.btn{font-family:var(--font-display);border-radius:var(--radius);cursor:pointer;white-space:nowrap;border:1px solid #0000;align-items:center;gap:8px;font-size:.88rem;font-weight:500;transition:background .15s,color .15s,border-color .15s;display:inline-flex}.btn-ghost{color:var(--text);border-color:var(--border);background:0 0;padding:8px 16px}.btn-ghost:hover:not(:disabled){color:var(--text-bright);border-color:var(--text-dim);background:var(--surface)}.btn-ghost:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--leaf);color:#1f2c1c;border-color:var(--leaf);padding:10px 22px;font-size:.9rem;font-weight:600}.btn-primary:hover:not(:disabled){background:#b3d489;border-color:#b3d489}.btn-primary:disabled{opacity:.55;cursor:not-allowed}.btn-hero{letter-spacing:.3px;justify-content:center;width:100%;margin-top:24px;padding:16px 28px;font-size:1rem;display:flex}.btn-play-icon{font-size:.72rem}.btn-play{justify-content:center;align-self:center;min-width:160px;min-height:48px;padding:10px 22px;font-size:.9rem}.profile-detail{border-top:1px solid var(--border);padding-top:18px}.profile-back{margin-bottom:14px}.profile-card{border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:26px;padding:28px 0}.profile-header{align-items:flex-start;gap:22px;margin-bottom:24px;display:flex}.avatar{flex-shrink:0;position:relative}.avatar-inner{background:var(--surface);border:1px solid var(--border);width:60px;height:60px;font-family:var(--font-display);color:var(--text-bright);background-position:50%;background-size:cover;border-radius:50%;justify-content:center;align-items:center;font-size:1.05rem;font-weight:600;display:flex}.avatar-inner.has-image{color:#0000}.rank-badge{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font-mono);color:var(--text);padding:1px 6px;font-size:.65rem;font-weight:600;position:absolute;bottom:-4px;right:-4px}.profile-info{flex:1;min-width:0}.username{font-family:var(--font-display);color:var(--text-bright);letter-spacing:-.3px;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:4px;font-size:1.4rem;font-weight:600;line-height:1.15;display:flex}.admin-badge{border-radius:var(--radius-sm);background:var(--leaf-soft);color:var(--leaf);font-family:var(--font-display);text-transform:uppercase;letter-spacing:.7px;border:1px solid #a3c97b80;padding:2px 7px;font-size:.64rem;font-weight:600;line-height:1}.player-tags{flex-wrap:wrap;gap:6px;display:flex}.player-tag-line{flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;display:flex}.player-tag{border:1px solid color-mix(in srgb, var(--tag-color) 55%, transparent);border-radius:var(--radius-sm);background:color-mix(in srgb, var(--tag-color) 12%, transparent);color:var(--tag-color);font-family:var(--font-display);text-transform:uppercase;letter-spacing:.6px;padding:3px 7px;font-size:.64rem;font-weight:700;line-height:1}.player-tag.compact{letter-spacing:.45px;padding:2px 5px;font-size:.56rem}.empty-tag{border-color:var(--border);color:var(--text-dim);background:0 0}.tag-edit-button{min-height:26px;padding:0 9px;font-size:.72rem}.profile-bio,.bio-editor,.admin-tag-panel{flex-direction:column;gap:8px;max-width:520px;margin:10px 0 0 82px;display:flex}.profile-bio{flex-direction:row;justify-content:flex-start;align-items:center;gap:10px}.bio-text{max-width:min(100%,420px);color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere;margin:0;font-size:.92rem;line-height:1.45}.bio-empty{color:var(--text-dim);font-style:italic}.bio-edit-button{min-height:30px;padding:0 11px}.bio-label{font-family:var(--font-display);color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;font-size:.68rem;font-weight:700}.bio-input{resize:vertical;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);width:100%;color:var(--text-bright);font-family:var(--font-sans);padding:10px 12px;font-size:.86rem;line-height:1.35}.bio-input:focus{border-color:var(--leaf);outline:none}.bio-actions{justify-content:flex-end;align-items:center;gap:10px;display:flex}.bio-counter{color:var(--text-dim);font-family:var(--font-mono);margin-right:auto;font-size:.72rem;font-weight:600}.bio-counter.near-limit{color:var(--gold)}.bio-save-status{min-height:1em;color:var(--text-dim);font-family:var(--font-display);font-size:.74rem;font-weight:600}.public-bio{max-width:560px;color:var(--text);white-space:pre-wrap;margin-top:10px;font-size:.9rem;line-height:1.45}.admin-tag-panel{align-items:flex-start}.profile-tag-equip{flex-direction:column;gap:8px;max-width:520px;margin-top:10px;display:flex}.tag-editor{border:1px solid var(--border-subtle);border-radius:var(--radius);background:var(--surface);flex-direction:column;gap:10px;width:min(100%,520px);padding:12px;display:flex}.tag-toggle-row,.tag-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.tag-actions{justify-content:flex-end}.tag-toggle{border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:var(--font-display);cursor:pointer;background:0 0;align-items:center;gap:7px;min-height:32px;padding:0 11px;font-size:.8rem;font-weight:600;display:inline-flex}.tag-toggle:hover,.tag-toggle.selected{border-color:color-mix(in srgb, var(--leaf) 58%, transparent);background:var(--leaf-soft);color:var(--leaf)}.tag-swatch{background:var(--tag-color);width:9px;height:9px;box-shadow:0 0 0 2px color-mix(in srgb, var(--tag-color) 18%, transparent);border-radius:50%;flex-shrink:0}.rank-title{font-family:var(--font-display);color:var(--text);align-items:center;gap:6px;margin-bottom:3px;font-size:.88rem;font-weight:500;display:flex}.rank-icon{background:var(--text-dim);clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);width:10px;height:10px;display:inline-block}.rank-icon-bronze{background:var(--bronze)}.rank-icon-silver{background:var(--silver)}.rank-icon-gold{background:var(--rank-gold)}.rank-icon-platinum{background:var(--platinum)}.rank-icon-diamond{background:var(--diamond)}.rank-icon-champion{background:var(--champion)}.rank-icon-grand-champion{background:var(--grand-champion)}.rank-icon-top{background:var(--top-rank)}.rank-text-unranked{color:var(--text-dim)}.rank-text-bronze{color:var(--bronze)}.rank-text-silver{color:var(--silver)}.rank-text-gold{color:var(--rank-gold)}.rank-text-platinum{color:var(--platinum)}.rank-text-diamond{color:var(--diamond)}.rank-text-champion{color:var(--champion)}.rank-text-grand-champion{color:var(--grand-champion)}.rank-text-top{color:var(--top-rank)}.rank-tier-bronze .avatar-inner{border-color:var(--bronze)}.rank-tier-silver .avatar-inner{border-color:var(--silver)}.rank-tier-gold .avatar-inner{border-color:var(--rank-gold)}.rank-tier-platinum .avatar-inner{border-color:var(--platinum)}.rank-tier-diamond .avatar-inner{border-color:var(--diamond)}.rank-tier-champion .avatar-inner{border-color:var(--champion)}.rank-tier-grand-champion .avatar-inner{border-color:var(--grand-champion)}.rank-tier-top .avatar-inner{border-color:var(--top-rank)}.elo{font-family:var(--font-mono);color:var(--text-dim);font-size:.78rem;font-weight:500}.stats-row{border-top:1px solid var(--border-subtle);align-items:center;gap:16px;padding-top:22px;display:flex}.stat{flex-direction:column;flex:1;align-items:center;gap:6px;display:flex}.stat-value{font-family:var(--font-display);color:var(--text-bright);font-size:1.55rem;font-weight:600;line-height:1}.stat-value.win{color:var(--leaf)}.stat-value.loss{color:var(--berry)}.stat-value.streak{color:var(--gold)}.stat-label{font-family:var(--font-display);text-transform:uppercase;letter-spacing:1.2px;color:var(--text-dim);font-size:.68rem;font-weight:500}.stat-divider{display:none}.card,.panel-section,.table-section{border-top:1px solid var(--border);padding:22px 0}.card-header{justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;display:flex}.card-title{font-family:var(--font-display);color:var(--text-bright);letter-spacing:-.1px;font-size:.95rem;font-weight:600}.card-link{font-family:var(--font-display);color:var(--text-dim);font-size:.78rem;font-weight:500;text-decoration:none;transition:color .15s}.card-link:hover{color:var(--leaf)}.card-subtitle{font-family:var(--font-display);color:var(--text-dim);font-size:.74rem;font-weight:500}.grid-2col{grid-template-columns:minmax(0,1fr) minmax(360px,.85fr);gap:36px;margin-bottom:24px;display:grid}.right-col{flex-direction:column;gap:24px;display:flex}.match-list{flex-direction:column;gap:2px;display:flex}.match{border-radius:var(--radius-sm);align-items:center;gap:12px;padding:10px 12px;transition:background .15s;display:flex}.match:hover{background:var(--surface)}.match-result{font-family:var(--font-display);border-radius:var(--radius-sm);flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:.78rem;font-weight:600;display:flex}.match.win .match-result{background:var(--leaf-soft);color:var(--leaf)}.match.loss .match-result{background:var(--berry-soft);color:var(--berry)}.match-info{flex-direction:column;flex:1;gap:1px;min-width:0;display:flex}.match-opponent{font-family:var(--font-display);color:var(--text-bright);text-align:left;cursor:pointer;background:0 0;border:0;padding:0;font-size:.86rem;font-weight:600}.match-opponent:hover,.lb-name:hover,.table-player:hover,.race-player-name:hover{color:var(--leaf)}.match-meta{font-family:var(--font-sans);color:var(--text-dim);font-size:.72rem;font-weight:500}.match-score{font-family:var(--font-mono);color:var(--text-dim);font-size:.78rem;font-weight:500}.match-sr{font-family:var(--font-mono);text-align:right;width:50px;font-size:.82rem;font-weight:600}.match-sr.positive{color:var(--leaf)}.match-sr.negative{color:var(--berry)}.empty-state{border-top:1px dashed var(--border-subtle);border-bottom:1px dashed var(--border-subtle);font-family:var(--font-display);color:var(--text-dim);text-align:center;padding:22px 12px;font-size:.84rem;font-weight:500}.sr-graph{position:relative}#sr-chart,#public-sr-chart{width:100%;height:100px}.sr-graph-labels{font-family:var(--font-mono);color:var(--text-dim);justify-content:space-between;margin-top:8px;font-size:.7rem;font-weight:500;display:flex}.leaderboard{flex-direction:column;gap:0;display:flex}.lb-row{border-bottom:1px solid var(--border-subtle);grid-template-columns:42px minmax(0,1fr) 96px 76px;align-items:center;column-gap:2px;padding:10px 0;transition:background .15s;display:grid}.lb-row:hover{background:var(--surface)}.lb-row.self{background:var(--leaf-soft)}.lb-rank{font-family:var(--font-display);width:42px;font-size:.82rem;font-weight:600}.lb-name{font-family:var(--font-display);color:var(--text-bright);text-align:left;cursor:pointer;background:0 0;border:0;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;padding:0 8px 0 2px;font-size:.86rem;font-weight:500;display:flex}.lb-name-main{align-items:center;gap:0;min-width:0;display:inline-flex}.leaderboard-tags{flex-wrap:wrap;align-items:center;gap:4px;max-width:100%;display:flex}.lb-tier{width:96px;font-family:var(--font-display);font-size:.74rem;font-weight:600}.lb-you{font-family:var(--font-display);color:var(--leaf);text-transform:uppercase;letter-spacing:.6px;margin-left:6px;font-size:.62rem;font-weight:600}.lb-sr{font-family:var(--font-mono);color:var(--text);text-align:right;padding-right:8px;font-size:.82rem;font-weight:600}.page-header{justify-content:space-between;align-items:end;gap:24px;margin-bottom:22px;display:flex}.page-title{font-family:var(--font-display);color:var(--text-bright);letter-spacing:-.3px;font-size:1.55rem;font-weight:600;line-height:1.1}.page-copy{max-width:360px;color:var(--text-dim);text-align:right;font-size:.86rem;font-weight:500}.rank-scale{border:1px solid var(--border);border-radius:var(--radius-sm);grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;margin-bottom:22px;display:grid;overflow:hidden}.rank-scale-item{background:var(--surface);font-family:var(--font-display);text-align:center;white-space:nowrap;padding:10px 8px;font-size:.7rem;font-weight:600}.leaderboard-table{border-top:1px solid var(--border)}.table-row{border-bottom:1px solid var(--border-subtle);min-height:50px;font-family:var(--font-display);grid-template-columns:58px minmax(150px,1fr) 112px 72px 72px 72px;align-items:center;gap:12px;padding:0 12px;font-size:.84rem;font-weight:500;display:grid}.table-row-admin{grid-template-columns:58px minmax(150px,1fr) 112px 72px 72px 72px 120px}.admin-grid{grid-template-columns:minmax(260px,.9fr) minmax(420px,1.4fr);align-items:start;gap:28px;display:grid}.admin-tag-form{gap:10px;display:grid}.field-label{font-family:var(--font-display);color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;font-size:.68rem;font-weight:700}.admin-text-input{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);width:100%;min-height:36px;color:var(--text-bright);font-family:var(--font-sans);padding:0 10px;font-size:.88rem}.admin-text-input:focus{border-color:var(--leaf);outline:none}.admin-color-row{grid-template-columns:44px 1fr;gap:10px;display:grid}.admin-color-input{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer;width:44px;height:36px;padding:4px}.admin-form-actions{justify-content:flex-end;align-items:center;gap:10px;display:flex}.admin-tag-list,.admin-player-tag-list{flex-direction:column;gap:10px;margin-top:16px;display:flex}.admin-tag-preview{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);width:fit-content;color:var(--text-bright);font-family:var(--font-display);align-items:center;gap:8px;padding:7px 9px;font-size:.82rem;font-weight:600;display:inline-flex}.admin-system-tag,.admin-tag-remove{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-dim);font-family:var(--font-display);text-transform:uppercase;letter-spacing:.6px;background:0 0;padding:3px 6px;font-size:.62rem;font-weight:700}.admin-tag-remove{cursor:pointer}.admin-tag-remove:hover{border-color:color-mix(in srgb, var(--berry) 55%, transparent);color:var(--berry)}.admin-player-row{border-bottom:1px solid var(--border-subtle);gap:10px;padding:12px 0;display:grid}.admin-player-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.admin-player-status{color:var(--text-dim);font-family:var(--font-display);text-align:right;min-width:44px;font-size:.74rem;font-weight:600}.table-row-head{min-height:38px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.7px;font-size:.7rem;font-weight:600}.table-row.self{background:var(--leaf-soft)}.table-rank{font-family:var(--font-display);font-weight:600}.rank-pill{border-radius:var(--radius-sm);text-align:center;width:34px;height:22px;color:var(--text-bright);line-height:1;font-family:var(--font-display);justify-content:center;align-items:center;font-size:.74rem;font-weight:600;display:inline-flex}.placement-gold{background:var(--gold);color:#2a2017}.placement-silver{background:var(--silver);color:#1f2528}.placement-bronze{background:var(--bronze);color:#2a1a0c}.placement-default{background:var(--surface-strong);color:var(--text)}.table-player{min-width:0;color:var(--text-bright);text-align:left;cursor:pointer;background:0 0;border:0;align-items:center;gap:10px;padding:0;display:inline-flex}.table-player-copy{flex-direction:column;gap:4px;min-width:0;display:flex}.table-avatar{background:var(--surface);width:26px;height:26px;color:var(--text);font-family:var(--font-display);border:1px solid var(--border);background-position:50%;background-size:cover;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:.66rem;font-weight:600;display:inline-flex}.admin-elo-control{align-items:center;gap:6px;display:inline-flex}.admin-elo-input{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);width:62px;height:30px;color:var(--text-bright);font-family:var(--font-mono);padding:0 7px;font-size:.74rem;font-weight:600}.admin-elo-save{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-strong);height:30px;color:var(--text);font-family:var(--font-display);cursor:pointer;padding:0 8px;font-size:.68rem;font-weight:600}.admin-elo-save:disabled{opacity:.6;cursor:wait}.play-section{border-top:1px solid var(--border);padding:22px 0}.play-runtime-status{display:none}.play-header{align-items:center}.play-copy{text-align:left;margin-top:6px}.connection-pill{border:1px solid var(--border);border-radius:var(--radius-pill);min-width:110px;height:30px;font-family:var(--font-display);color:var(--text);background:var(--surface);justify-content:center;align-items:center;padding:0 12px;font-size:.72rem;font-weight:500;display:inline-flex}.freeplay-topbar{justify-content:flex-start;margin-bottom:10px;display:flex}.play-result{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:14px;width:min(100%,520px);margin:18px auto 0;padding:10px 0 0;display:flex}.play-result strong{font-family:var(--font-display);color:var(--text-bright);font-size:clamp(2rem,7vw,3.1rem);font-weight:600;line-height:.95;display:block}.play-result.win strong{color:var(--leaf)}.play-result.loss strong{color:var(--berry)}.play-result-label,.play-label,.play-progress-text,.play-status{font-family:var(--font-display);color:var(--text-dim);font-size:.72rem;font-weight:500}.race-board{grid-template-columns:minmax(190px,.78fr) minmax(260px,1fr) minmax(190px,.78fr);align-items:center;gap:18px;padding:14px 0 10px;display:grid}.freeplay-mode .race-board{grid-template-columns:minmax(0,1fr) auto;width:min(100%,520px);margin:0 auto;padding-top:4px}.freeplay-mode .race-player.local,.freeplay-mode .race-avatar,.freeplay-mode .race-player-copy,.freeplay-mode .race-meter,.freeplay-mode #play-opponent-progress-text,.freeplay-mode #play-opponent-avatar{display:none}.freeplay-mode .race-player.local{justify-content:flex-start}.freeplay-mode .race-player.opponent{justify-content:flex-end}.freeplay-return{margin-left:auto}.race-board.local-winner{color:var(--bluebird)}.race-board.opponent-winner{color:var(--berry)}.race-player{align-items:center;gap:12px;min-width:0;display:flex}.race-player.death-pulse .race-player-name,.race-player.death-pulse .play-status{animation:.82s ease-out both death-name-flash}.race-player.opponent{text-align:right;justify-content:flex-end}.race-player-copy{flex-direction:column;gap:2px;min-width:0;display:flex}.race-player-name{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-family:var(--font-display);color:var(--text-bright);text-align:inherit;cursor:pointer;background:0 0;border:0;padding:0;font-size:.95rem;font-weight:600;transition:color .18s,opacity .18s;overflow:hidden}.race-player-name:disabled{cursor:default;color:var(--text-bright)}.play-rankline{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--text);font-size:.76rem;font-weight:700;overflow:hidden}.race-avatar{background:var(--surface);width:34px;height:34px;color:var(--text);font-family:var(--font-display);border:1px solid var(--bluebird);background-position:50%;background-size:cover;border-radius:50%;flex:0 0 34px;justify-content:center;align-items:center;font-size:.7rem;font-weight:600;transition:opacity .18s,filter .18s,border-color .18s,box-shadow .18s;display:inline-flex}.race-avatar.opponent{border-color:var(--berry)}.race-avatar.has-image{color:#0000}.race-player.disconnected{opacity:.4}.race-player.disconnected .race-avatar{filter:grayscale()}.race-player.disconnected .play-status{color:var(--berry)}.race-player.winner .race-player-name,.race-player.winner .play-status{color:var(--leaf)}.race-player.winner .race-avatar{border-color:var(--leaf);box-shadow:0 0 0 2px var(--leaf-soft)}.race-player.loser .race-player-name,.race-player.loser .play-status{color:var(--berry)}.race-player.loser .race-avatar{border-color:var(--berry);filter:grayscale(.6)}.play-label{text-transform:uppercase;letter-spacing:.8px}.race-center{min-width:0}.play-progress-text{text-align:center;min-width:54px;font-family:var(--font-mono);color:var(--text);font-weight:600}.race-meter{border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface-strong);height:14px;position:relative;overflow:hidden}.race-timer{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-bright);text-align:center;margin-bottom:8px;font-size:.92rem;font-weight:600}.freeplay-length{font-family:var(--font-display);color:var(--text);text-align:center;font-size:.82rem;font-weight:700}.race-fill{width:0%;transition:width .12s linear;position:absolute;top:0;bottom:0}.race-fill.local{background:var(--bluebird);left:0}.race-fill.opponent{background:var(--berry);right:0}.race-midline{background:var(--text-bright);opacity:.25;width:1px;position:absolute;top:0;bottom:0;left:50%}.race-target{z-index:1;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);min-width:28px;height:18px;color:var(--text-bright);font-family:var(--font-display);justify-content:center;align-items:center;font-size:.68rem;font-weight:600;display:inline-flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.game-frame{background:0 0;width:min(100%,720px);margin:18px auto 0}.freeplay-actions{justify-content:center;margin:18px auto 0;display:flex}.snake-game-canvas{aspect-ratio:17/15;border-radius:var(--radius);touch-action:none;width:100%;display:block}.mobile-dpad{display:none}.status-bar{font-family:var(--font-display);color:var(--text-dim);justify-content:center;align-items:center;gap:10px;padding:16px;font-size:.74rem;font-weight:500;display:flex}.status-dot{background:var(--leaf);border-radius:50%;width:6px;height:6px;animation:2s ease-in-out infinite pulse-dot}@keyframes pulse-dot{0%,to{opacity:1;box-shadow:0 0 0 0 var(--leaf-soft)}50%{opacity:.7;box-shadow:0 0 0 4px #0000}}.status-sep{color:var(--border)}@media (width<=768px){#app{padding:0 16px 48px}.nav{margin-bottom:24px;padding:16px 0}.nav-right{gap:14px}.nav-link{display:none}.profile-header{flex-wrap:wrap;gap:16px}.btn-play{order:3;justify-content:center;width:100%}.profile-bio,.bio-editor,.admin-tag-panel{margin-left:0}.profile-bio{flex-wrap:wrap;align-items:flex-start}.stats-row{flex-wrap:wrap;gap:16px}.stat-divider{display:none}.stat{flex:0 0 calc(33.33% - 12px)}.grid-2col,.admin-grid{grid-template-columns:1fr}.page-header{display:block}.page-copy{text-align:left;margin-top:8px}.rank-scale{grid-template-columns:1fr}.play-header{display:block}.connection-pill{margin-top:12px}.play-result .btn{justify-content:center;width:100%}.race-board{grid-template-columns:1fr;gap:12px}.race-player.opponent{text-align:left;justify-content:flex-start}.race-player.opponent .play-progress-text{order:3}.game-frame{margin-top:14px}.mobile-dpad{touch-action:none;-webkit-user-select:none;user-select:none;grid-template-rows:repeat(3,54px);grid-template-columns:repeat(3,64px);justify-content:center;align-items:center;gap:8px;width:min(100%,220px);margin:16px auto 0;display:grid}.dpad-button,.dpad-center{border-radius:var(--radius);width:64px;height:54px}.dpad-button{border:1px solid var(--border);background:var(--surface-strong);color:var(--text-bright);font-family:var(--font-display);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;justify-content:center;align-items:center;font-size:1.35rem;font-weight:700;line-height:1;transition:background .12s,border-color .12s,color .12s,transform 80ms;display:inline-flex}.dpad-button:active{border-color:var(--leaf);background:var(--leaf-soft);color:var(--leaf);transform:translateY(1px)}.dpad-up{grid-area:1/2}.dpad-left{grid-area:2/1}.dpad-center{background:var(--surface);border:1px solid var(--border-subtle);grid-area:2/2}.dpad-right{grid-area:2/3}.dpad-down{grid-area:3/2}.leaderboard-table{overflow-x:auto}.table-row{grid-template-columns:52px 170px 110px 72px 72px 72px;min-width:600px}.table-row-admin{grid-template-columns:52px 170px 110px 72px 72px 72px 120px;min-width:730px}.match-score{display:none}}@keyframes fade-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes death-name-flash{0%{color:var(--berry);text-shadow:0 0 #d6776a00}18%,62%{color:var(--berry);text-shadow:0 0 14px color-mix(in srgb, var(--berry) 58%, transparent)}to{color:var(--text-bright);text-shadow:none}}.profile-card{animation:.35s ease-out fade-up}.grid-2col>:first-child{animation:.5s ease-out .1s both fade-up}.right-col>:first-child{animation:.5s ease-out .2s both fade-up}.right-col>:last-child{animation:.5s ease-out .3s both fade-up}.status-bar{animation:.5s ease-out .4s both fade-up}