/* SNAKE cartoon interface. Presentation only; gameplay and input hooks stay intact. */
@font-face{font-family:Snake Display;src:url('ui/lilita-one-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Snake UI;src:url('ui/nunito-latin-700-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
:root{--bg:#142218;--panel:#1c2d1b;--lime:#c6f66b;--text:#fffde5;--muted:#b2bf98;--ink:#080e08;--rim:#7da43e;--display:'Snake Display','Arial Rounded MT Bold',sans-serif;--ui:'Snake UI','Trebuchet MS',sans-serif;--panel-fill:radial-gradient(ellipse at 4% 2%,#719c3547 0,transparent 24%),linear-gradient(145deg,#213520,#172717 75%);--button-fill:radial-gradient(circle at 9px 8px,#f3ffc87a 0 3px,transparent 4px),linear-gradient(175deg,#d1ff65,#b4ec44)}
html,body{font-family:var(--ui);color:var(--text);background:var(--bg)}
button,input,select{font-family:var(--ui)}
button{transition:background-color .12s,box-shadow .12s,filter .12s;touch-action:manipulation}
button:disabled{cursor:default;filter:saturate(.35);opacity:.45}
button:not(:disabled):hover{filter:brightness(1.09)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #efffc9;outline-offset:3px}
label,legend{font:700 16px var(--ui);letter-spacing:0;color:var(--text)}
button:active:not(:disabled){filter:brightness(.94)}
/* The illustrated menu is a small local vector; it never covers the game canvas. */
#menuScene{background:#18261a url('ui/menu-garden.svg') center/cover no-repeat}
body:not(.playing) .vignette{background:radial-gradient(ellipse at 50% 45%,transparent 25%,#06130740 100%)}
#welcome{top:calc(var(--safe-top) + var(--usable-height)*.47);width:min(700px,58vw);padding:0;overflow:visible}
#welcome .arena-logo{position:relative;font:400 clamp(80px,9vw,144px)/1 var(--display);letter-spacing:1px;color:#fffde6;margin:0 0 32px;paint-order:stroke fill;-webkit-text-stroke:8px var(--ink);text-shadow:0 8px 0 #080e08,0 13px 0 #080e0840;transform:rotate(-2deg)}
#welcome .arena-logo::before,#welcome .arena-logo::after{content:'';position:absolute;top:45%;width:12px;height:32px;border:3px solid #111e0e;border-radius:12px;background:#b0df56;transform:rotate(-45deg);box-shadow:0 3px 0 #081007}
#welcome .arena-logo::before{left:calc(50% - 230px)}#welcome .arena-logo::after{right:calc(50% - 230px);transform:rotate(45deg)}
.snake-launch{height:106px}
#playButton{width:70px;height:70px;border:5px solid #081007;background:#22351de8;color:#faffde;box-shadow:inset 0 0 0 3px #789d44,0 5px 0 #07100666}
#playButton svg{width:24px;height:28px;filter:drop-shadow(0 2px #081007)}
#joinMessage:empty{display:none}#joinMessage{font:700 14px var(--ui);color:var(--lime);margin:10px 0}
.mode-options{margin-top:16px}
.mode-options #arenaMode{height:auto;min-height:62px;flex:0 1 250px;gap:15px;border:4px solid var(--ink);border-radius:19px;background:var(--panel-fill);box-shadow:inset 0 0 0 2px #728b42,0 4px 0 #07100655;color:var(--text);font:400 22px var(--display)}
.mode-options #arenaMode small{font:700 13px var(--ui);color:var(--muted)}
.mode-options #arenaMode svg{stroke-width:3;color:var(--lime)}
.theme-picker{gap:12px;margin-top:20px}
.theme-picker button{min-width:112px;min-height:122px;padding:11px 16px 10px;gap:8px;font:400 20px var(--display);color:#d2dabb;border:4px solid var(--ink);border-radius:21px;background:var(--panel-fill);box-shadow:inset 0 0 0 2px #526c37,0 4px 0 #07100666}
.theme-picker button img{width:65px;height:65px;border:3px solid #101c0d;box-shadow:0 2px 0 #8caf3a66;object-fit:cover}
.theme-picker button[aria-pressed=true]{color:#e0ff88;background:#30491e;border-color:#0b1708;box-shadow:inset 0 0 0 3px #b7ed54,0 4px 0 #07100666}
#menuSettings,#openRankings,#openFriends,#openAppearance{border:4px solid var(--ink);border-radius:19px;background:var(--panel-fill);box-shadow:inset 0 0 0 2px #67853b,0 5px 0 #08100766;color:#dcfa9e;font:400 21px var(--display)}
#menuSettings{width:60px;height:60px;top:calc(var(--safe-top) + 22px);left:calc(var(--safe-left) + 24px)}#menuSettings svg{width:27px;height:27px;stroke-width:2.4}
#openRankings{padding:12px 18px;min-height:56px;gap:10px}#openRankings svg{width:24px;height:24px;stroke-width:2.2}
#openFriends{padding:16px;top:48%;right:calc(var(--safe-right) + 30px);min-height:62px}#openFriends svg{width:30px;height:30px;stroke-width:2.3}
#openAppearance{bottom:calc(var(--safe-bottom) + 27px);min-height:56px;min-width:184px;gap:14px}
/* One shared moss frame for every dialog. */
#settingsPanel,#appearancePanel,#friendsPanel,#rankingsPanel,#modal{background:#0910089c;backdrop-filter:blur(5px)}
.settings-card,.appearance-card,.friend-card,.rankings-card,.modal-card,#friendFinish,.country-picker-panel,#emotePicker{border:5px solid var(--ink);border-radius:30px;background:var(--panel-fill);box-shadow:inset 0 0 0 5px var(--rim),inset 0 8px 0 5px #bbec69,0 10px 0 #07100666,0 20px 50px #0004;color:var(--text);padding:28px;scrollbar-width:thin;scrollbar-color:#8fb445 #1b2b18}
.settings-card,.appearance-card,.friend-card,.rankings-card,.modal-card{background-image:radial-gradient(circle at 21px 21px,#c9f5759c 0 5px,transparent 6px),radial-gradient(circle at calc(100% - 21px) calc(100% - 22px),#96c84f99 0 5px,transparent 6px),var(--panel-fill)}
.settings-heading,.appearance-heading,.friend-heading,.rankings-heading{height:auto;min-height:48px;gap:14px;margin-bottom:22px;flex:none}
#settingsTitle,.appearance-heading h2,.friend-heading h2,.rankings-heading h2,.modal-card h2,#friendFinishTitle{font:400 36px/1.15 var(--display);letter-spacing:.1px;color:var(--text);paint-order:stroke fill;-webkit-text-stroke:2px var(--ink);text-shadow:0 3px var(--ink);margin:0}
.settings-page h3,.skin-toolbar h3,.lootbox-heading h3,.friend-toolbar h3{font:400 25px/1.2 var(--display);color:var(--text);paint-order:stroke fill;-webkit-text-stroke:1.5px var(--ink);text-shadow:0 2px var(--ink)}
.friend-heading small,.eyebrow,#friendFinish>small{font:900 12px var(--ui);letter-spacing:2px;color:var(--lime);-webkit-text-stroke:0;text-shadow:0 2px #080e08;margin-bottom:8px}
#closeSettings,#closeAppearance,#closeFriends,#closeRankings,#friendBack,#closeEmotes{flex:none;width:48px;height:48px;min-height:48px;padding:0;display:grid;place-items:center;font:400 34px/1 var(--display);color:#fffde6;border:4px solid var(--ink);border-radius:16px;background:#26351e;box-shadow:inset 0 0 0 2px #829f4c,0 4px 0 #07100688;text-shadow:0 2px #080e08}
/* Inputs are inset; primary actions are raised lime buttons. */
.friend-card input:not([type=checkbox]),.friend-card select,.setting-row select,#settingsPanel .profile-name input,#settingsPanel .country-toggle,.country-picker-panel input{min-height:48px;padding:10px 13px;border:3px solid var(--ink);border-radius:14px;background:#132315;color:var(--text);box-shadow:inset 0 0 0 2px #5d704c;font:700 16px var(--ui)}
.friend-card button,#friendHud button,#friendInviteActions button,#watchReplay,#closeReplay,#refreshRankings{min-height:46px;border:3px solid var(--ink);border-radius:14px;padding:10px 15px;background:#283b21;color:var(--text);box-shadow:inset 0 0 0 2px #779847,0 3px 0 #08100766;font:700 16px var(--ui)}
#settingsDone,.friend-card button.friend-primary,#friendFinish button,.modal-card .play-btn,#serverGate button{min-height:54px;border:4px solid var(--ink);border-radius:18px;background:var(--button-fill);color:#16230c;box-shadow:inset 0 0 0 3px #e8ff91,0 4px 0 #08100788;font:400 26px var(--display);padding:10px 23px;text-align:center;justify-content:center;letter-spacing:0}
#settingsDone{min-width:145px}.modal-card .play-btn>span{display:none}
/* Profile, graphics and sound share the same sidebar and scrolling content. */
.settings-card{width:880px;height:560px;max-height:calc(var(--usable-height) - 30px)}
.settings-body{grid-template-columns:195px minmax(0,1fr);gap:26px}
.settings-tabs{gap:12px;padding-right:20px;border-right:2px solid #647f3c}
.settings-tabs button{font:400 26px var(--display);min-height:62px;padding:11px 16px;border:3px solid transparent;border-radius:18px;color:var(--text);text-shadow:0 2px #0a1508}
.settings-tabs button[aria-selected=true]{background:linear-gradient(160deg,#a9d544,#6f9b34);color:#f1ffc7;border-color:#101c09;box-shadow:inset 0 0 0 3px #cfef75,0 4px 0 #08100788}
.settings-content{padding:0 10px 4px 0;scrollbar-color:#9cc747 #1b2b18}
.settings-page h3{margin:4px 0 20px}
#settingsPanel .player-profile{gap:18px}#settingsPanel .player-avatar{flex:none;width:68px;height:68px;margin-top:24px;border:4px solid #090f08;background:#304523;box-shadow:inset 0 0 0 2px #8baa48;font:400 32px var(--display)}
#settingsPanel .profile-name{gap:8px}#settingsPanel .profile-name label{font:800 13px var(--ui);color:var(--muted);letter-spacing:.7px}
#settingsPanel .profile-name input{height:50px;font-size:18px}#settingsPanel .country-toggle{font-size:16px;min-height:50px}#settingsPanel .profile-country-label{margin-top:12px}
.settings-footer{border-top:2px solid #53682f;margin-top:16px;padding-top:14px}
.setting-row{min-height:60px;border-bottom:1px solid #72904735;font:800 17px var(--ui);color:var(--text);gap:18px}
.setting-row label{font:inherit}.setting-row select{width:145px;min-height:46px;font-size:15px}.resolution-row select{width:245px;max-width:100%}
.setting-switch{min-width:78px;min-height:44px;border:3px solid #0a1408;border-radius:24px;background:#36442b;color:#c4cfb4;font:900 16px var(--ui);box-shadow:inset 0 0 0 2px #71854b}
.setting-switch[aria-checked=true]{background:var(--button-fill);border-color:#0a1408;color:#1c2e10;box-shadow:inset 0 0 0 2px #e5ff9c}
.volume-setting{margin-bottom:18px;font:800 18px var(--ui)}.volume-setting label{font:inherit}.volume-setting output{font:400 23px var(--display)}
.volume-setting input[type=range]{appearance:none;-webkit-appearance:none;height:30px;background:transparent;margin-top:8px;box-shadow:none;border:0}
.volume-setting input[type=range]::-webkit-slider-runnable-track{height:15px;background:#bdef60;border:3px solid #081007;border-radius:12px;box-shadow:inset 0 2px #e4ff9c}
.volume-setting input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:28px;height:28px;border:3px solid #101d0c;border-radius:50%;background:#c9fa68;margin-top:-9px;box-shadow:inset 0 2px #eaffb9,0 2px #080e0866}
.volume-setting input[type=range]::-moz-range-track{height:10px;background:#bdef60;border:3px solid #081007;border-radius:12px}
.volume-setting input[type=range]::-moz-range-thumb{width:24px;height:24px;border:3px solid #101d0c;border-radius:50%;background:#c9fa68}
.volume-scale{font:800 13px var(--ui);color:#8f9e79}
/* Colors, collected skins and the empty lootbox shelf. */
.appearance-card{width:670px;max-height:calc(var(--usable-height) - 26px)}.appearance-body{padding:0 5px 5px;scrollbar-color:#9cc747 #1b2b18}
.appearance-heading{margin-bottom:12px}.appearance-preview-label{font:700 13px var(--ui);color:#b7c99e}
#appearancePreview{height:102px;background:#142614;border:3px solid #0b1709;border-radius:20px;margin:0 0 22px;box-shadow:inset 0 0 0 2px #506c30}
.appearance-colors,.skin-browser,.lootbox-browser{border:0;border-radius:0;background:transparent;padding:0 0 20px;margin:0 0 18px;border-bottom:2px solid #4f6631}
.appearance-colors legend{font:400 25px var(--display);padding:0;margin-bottom:14px;color:var(--text)}
.appearance-palette{justify-content:flex-start;gap:18px}.appearance-color{width:48px;height:48px;border:3px solid #0a1407;background:#213018;box-shadow:0 3px 0 #07100677}.appearance-color::before{width:34px;height:34px;border:2px solid #ffffff5c;box-shadow:inset 0 -4px #0002}
.appearance-color[aria-pressed=true]{border:3px solid #e9ffb4;background:#59802b;box-shadow:0 0 0 2px #101c09,0 4px #07100666}
.skin-toolbar{flex-wrap:wrap;gap:14px}.skin-toolbar h3{flex-basis:100%;margin:0}.skin-filters{justify-content:flex-start;gap:6px;overflow:visible;flex-wrap:wrap}
.skin-filter{border:3px solid #0d190a;border-radius:12px;min-height:44px;padding:7px 13px;font:800 14px var(--ui);color:#d0dbba;background:#314323;box-shadow:inset 0 0 0 1px #698440}
.skin-filter[aria-selected=true]{background:#c3f268;color:#1a2b0d;border-color:#0e1a09;box-shadow:inset 0 0 0 2px #e8ffaa}
.skin-collection{min-height:108px}.skin-empty,.lootbox-empty{color:#7c9b58}.skin-empty p,.lootbox-empty p{font:700 16px var(--ui);color:#aabd90}.lootbox-count{font:700 13px var(--ui);color:#c4d3ac;background:#3d5029;padding:5px 10px}.lootbox-browser{border:0;margin:0;padding-bottom:0}.lootbox-empty{min-height:80px}
.owned-skin{border:3px solid #101c0c;border-radius:17px;background:#26381c;font-family:var(--ui)}
/* Private rooms and ranking tables keep their existing actions. */
.friend-card{width:min(880px,100%);max-height:calc(var(--usable-height) - 28px);font:700 16px/1.45 var(--ui)}
.friend-heading h2{font-size:35px}.friend-toolbar{margin:8px 0 18px}.friend-toolbar h3{margin:0}#friendEmpty{padding:25px 0;color:var(--muted)}
.friend-room{padding:10px;margin:12px 0;gap:8px;border:3px solid #0c170a;border-radius:20px;box-shadow:inset 0 0 0 2px #536b37;background:#21321c}
.friend-room .friend-code{padding:8px 4px;color:var(--text);font:900 21px var(--ui);letter-spacing:.6px}.friend-room small{font:700 13px var(--ui);color:var(--muted)}
.friend-room .friend-icon{width:48px;min-width:48px;min-height:48px;padding:8px;border-radius:15px}.friend-icon svg{stroke-width:2.2}
#friendJoinForm{margin-top:20px;gap:10px}#friendCodeInput{height:54px}.friend-maps{gap:14px}.friend-maps label{border:4px solid #0b1508;border-radius:21px;background:#24371d;box-shadow:inset 0 0 0 2px #597438;padding:16px;gap:10px;font:400 23px var(--display)}
.friend-maps label:has(input:checked){border-color:#0b1708;background:#365024;box-shadow:inset 0 0 0 3px #c6f46b}
.friend-maps img{width:100px;height:100px;border:3px solid #0b1708}.friend-maps input,.friend-all input{width:22px;height:22px;accent-color:#b8ee54}
.friend-all{font:800 17px var(--ui);gap:10px}.friend-muted{font:700 13px var(--ui);color:var(--muted)}
.friend-options{gap:16px}.friend-options label{font:800 15px var(--ui)}#friendCreateMatch{font:400 25px var(--display)}#friendStatus{color:#d5eca6;font:700 14px var(--ui)}#friendStatus:empty{display:none}
.friend-table-wrap{border:2px solid #4d6532;border-radius:13px}#friendFinish th,.friend-card th,.league-table-wrap th{background:#20341b;color:#c5d4ae;font:800 12px var(--ui)}.friend-card td,.friend-card th,#friendFinish td,#friendFinish th{padding:12px 10px;border-color:#526c324f}.friend-card td,#friendFinish td,.league-table-wrap td{font:700 14px var(--ui)}
#friendFinish{padding:30px;max-height:calc(var(--usable-height) - 30px)}#friendFinish button{min-width:180px}
.rankings-card{width:min(780px,100%)}.league-tabs button{font:800 17px var(--ui);border:3px solid #0b1708;border-radius:14px;background:#2a3d20;color:#c7d4b4;min-height:48px}.league-tabs button[aria-selected=true]{background:#b8e85b;color:#182b0b;box-shadow:inset 0 0 0 2px #e4fa96}.league-footer{font-family:var(--ui);color:var(--muted)}
/* HUDs use compact versions of the same frame, away from the steering surface. */
#hud,#leaderboard,#performanceHud,#friendTimer,#friendHud,#replayControls{background:linear-gradient(150deg,#1f341bed,#142713f0);border:3px solid #071106;border-radius:17px;box-shadow:inset 0 0 0 2px #7b9f40,0 4px 0 #08100755;backdrop-filter:none;color:var(--text);font-family:var(--ui)}
body.playing #hud{top:calc(var(--safe-top) + 16px);left:calc(var(--safe-left) + 18px);gap:23px;padding:12px 17px}#hud span{font:900 10px var(--ui);color:#c0d49e;letter-spacing:1px}#hud strong{font:400 33px/1.1 var(--display)}
#leaderboard{width:260px;padding:7px 11px}#leaderboard .panel-heading{font:900 10px var(--ui);letter-spacing:.5px}#leaderboard .leader-row{font:700 13px var(--ui);padding:5px 0;color:#d1dfbc}#leaderboard .leader-row.mine{color:var(--lime);border-color:#72994777}#leaderboard .position{color:#97af7c}#leaderboard .points{font:900 12px var(--ui)}#leaderboard .dot{width:8px;height:8px}
#leaderboard #exitArena{border:2px solid #0b1508;border-radius:12px;background:#314622;box-shadow:inset 0 0 0 1px #7fa443;color:#e5f6c3}
#performanceHud{padding:7px 12px;gap:10px;font-size:10px;color:#a5bc87}#performanceHud strong{font:900 12px var(--ui);color:#f0fadb}#friendTimer{top:calc(var(--safe-top) + 59px);padding:6px 14px}#friendTime{font:400 22px var(--display);font-variant-numeric:tabular-nums}
#emoteToggle,.boost,.slow{border:4px solid #091407;background:#22371cf0;box-shadow:inset 0 0 0 2px #8caf4e,0 4px 0 #07100666;color:#dcf4b7}
.boost.active,.slow.active{background:#bce86a;color:#1b2c10}#emoteToggle{width:52px;height:52px;border-radius:17px}#emotePicker{padding:16px;border-radius:23px;width:430px}#emotePicker .emote-heading h3{font:400 24px var(--display);color:var(--text)}#emoteGrid{gap:6px}.emote-choice{background:#334c2680;border:2px solid #688b3c;border-radius:13px}.emote-choice:hover{background:#4a6b2d;border-color:#cbf684}#emoteCountdown{font:400 76px var(--display);color:var(--text);text-shadow:0 4px #081007}
/* Exit and run results. */
.modal-card{max-width:490px;padding:32px;max-height:calc(var(--usable-height) - 30px);overflow:auto}.modal-card h2{font-size:38px;margin:13px 0}.modal-card p{font:700 16px/1.5 var(--ui);color:#bfccb2}.modal-card .text-btn{font:900 17px var(--ui);color:#d2ddc2;min-height:44px;padding:13px 0 0}
#result{margin:24px 0;gap:18px}#result strong{font:400 38px/1.1 var(--display);color:#c7fa68;-webkit-text-stroke:1.4px #111e09;paint-order:stroke fill;text-shadow:0 3px #0b1708}#result span{font:800 14px var(--ui);color:#c1cdb1}#watchReplay{font:400 21px var(--display);color:#d4f793;min-height:48px}
.country-picker-panel{padding:14px;border-radius:20px;font-family:var(--ui)}.country-option{font:700 14px var(--ui);color:var(--text)}.country-option:hover{background:#385225}.country-option[aria-pressed=true]{background:#567c30;color:#f3ffd0}
#rotateOverlay,#serverGate{background:#142218 url('ui/menu-garden.svg') center/cover no-repeat;font-family:var(--ui)}.rotate-brand{font:400 42px var(--display);letter-spacing:2px}.rotate-art{color:#c6f66b}#rotateOverlay h2{font-family:var(--display);font-weight:400}#serverGate .gate-brand{font:400 45px var(--display);color:#f4ffdd;letter-spacing:1px}#serverGate h1{font:400 34px/1.2 var(--display);color:var(--text)}#serverGate p{color:#c2d4ad;font-family:var(--ui)}
/* Short landscape screens retain real 44px touch targets and scrolling panels. */
@media(max-height:700px){
 #welcome .arena-logo{font-size:78px;margin-bottom:18px}.snake-launch{height:80px}.theme-picker button{min-height:96px;min-width:96px;padding:8px;font-size:18px}.theme-picker button img{width:48px;height:48px}.theme-picker{margin-top:12px}.mode-options{margin-top:9px}.mode-options #arenaMode{min-height:52px}.settings-card{height:500px}
}
@media(orientation:landscape) and (max-height:600px){
 #welcome{width:min(440px,54vw);top:calc(var(--safe-top) + (var(--usable-height) - 40px)/2)}#welcome .arena-logo{font-size:58px;margin:0 0 9px;-webkit-text-stroke:4px;text-shadow:0 4px #080e08}#welcome .arena-logo::before,#welcome .arena-logo::after{width:8px;height:18px;border-width:2px}#welcome .arena-logo::before{left:calc(50% - 118px)}#welcome .arena-logo::after{right:calc(50% - 118px)}
 .snake-launch{height:60px}#playButton{width:48px;height:48px;border-width:3px}#playButton svg{width:17px;height:21px}.mode-options{margin-top:5px}.mode-options #arenaMode{min-height:44px;font-size:17px;padding:4px 14px;flex-basis:192px;border-width:3px;border-radius:15px}.mode-options #arenaMode small{font-size:10px}.theme-picker{gap:8px;margin-top:8px}.theme-picker button{min-width:80px;min-height:72px;font-size:15px;gap:3px;padding:5px 10px;border-width:3px;border-radius:16px}.theme-picker button img{width:37px;height:37px;border-width:2px}
 #menuSettings{width:48px;height:48px;top:calc(var(--safe-top) + 12px);left:calc(var(--safe-left) + 14px);border-width:3px;border-radius:15px}#menuSettings svg{width:23px;height:23px}#openRankings{top:calc(var(--safe-top) + 12px);right:calc(var(--safe-right) + 14px);font-size:16px;min-height:46px;padding:8px 13px;border-width:3px}#openFriends{right:calc(var(--safe-right) + 14px);max-width:150px;min-height:54px;font-size:16px;padding:9px;gap:7px;border-width:3px}#openFriends svg{width:25px;flex:none}#openAppearance{min-height:44px;bottom:calc(var(--safe-bottom) + 9px);min-width:143px;padding:6px 17px;border-width:3px;font-size:18px;border-radius:15px}
 .settings-card,.appearance-card,.friend-card,.rankings-card,.modal-card,#friendFinish{padding:18px 21px;border-width:4px;border-radius:24px;max-height:calc(var(--usable-height) - 16px);box-shadow:inset 0 0 0 3px var(--rim),inset 0 5px 0 3px #bbec69,0 6px 0 #07100666}
 .settings-heading,.appearance-heading,.friend-heading,.rankings-heading{min-height:44px;margin-bottom:12px;gap:10px}#settingsTitle,.appearance-heading h2,.friend-heading h2,.rankings-heading h2{font-size:27px}.friend-heading small{font-size:9px;margin-bottom:3px}#closeSettings,#closeAppearance,#closeFriends,#closeRankings,#friendBack,#closeEmotes{width:44px;height:44px;min-height:44px;border-width:3px;border-radius:14px;font-size:29px}
 .settings-card{width:760px;height:calc(var(--usable-height) - 16px)}.settings-body{grid-template-columns:145px minmax(0,1fr);gap:18px}.settings-tabs{padding-right:13px;gap:8px}.settings-tabs button{min-height:49px;font-size:21px;padding:8px 12px;border-radius:14px}.settings-page h3,.skin-toolbar h3,.lootbox-heading h3,.friend-toolbar h3{font-size:21px;margin:0 0 10px}.settings-content{padding-right:8px}.settings-footer{margin-top:10px;padding-top:8px}#settingsDone{min-height:44px;min-width:115px;padding:6px 18px;font-size:21px;border-width:3px}
 .setting-row{min-height:50px;font-size:15px}.setting-row label{font:inherit}.setting-row select{min-height:44px;padding:6px 9px;font-size:13px}.setting-switch{font-size:14px;min-width:70px}.resolution-row select{width:220px}.settings-page h3{margin-bottom:10px}#settingsPanel .player-avatar{width:52px;height:52px;font-size:27px}#settingsPanel .profile-name input,#settingsPanel .country-toggle{min-height:44px;height:44px;font-size:15px}#settingsPanel .profile-country-label{margin-top:5px}.volume-setting{font-size:15px;margin-bottom:11px}.volume-setting output{font-size:20px}.volume-setting input[type=range]{margin-top:3px}.volume-scale{font-size:11px}
 .appearance-card{width:640px}.appearance-heading{margin-bottom:9px}#appearancePreview{height:68px;margin-bottom:14px}.appearance-colors{margin-bottom:12px;padding-bottom:13px}.appearance-colors legend{font-size:21px;margin-bottom:8px}.appearance-palette{gap:16px}.appearance-color{width:44px;height:44px}.appearance-color::before{width:30px;height:30px}.skin-toolbar{gap:8px}.skin-filter{font-size:13px;padding:7px 12px}.skin-collection{min-height:78px}.skin-empty{flex-direction:row}.lootbox-empty{min-height:66px}
 .friend-card{width:800px;font-size:14px}.friend-toolbar{margin:5px 0 10px}.friend-toolbar h3{margin:0}.friend-card button.friend-primary{min-height:44px;font-size:20px;padding:7px 15px;border-width:3px}.friend-card button{font-size:14px;padding:8px 11px;min-height:44px}.friend-room{margin:8px 0;padding:8px}.friend-room .friend-icon{width:44px;min-width:44px;min-height:44px;padding:8px}.friend-room .friend-code{font-size:18px}.friend-room small{font-size:12px}#friendEmpty{padding:12px 0}#friendJoinForm{margin-top:12px}.friend-card input:not([type=checkbox]),.friend-card select{min-height:44px;padding:7px 11px;font-size:14px}#friendCodeInput{height:46px}.friend-maps{gap:10px}.friend-maps label{flex-direction:row;padding:8px;font-size:18px;gap:9px;border-width:3px;border-radius:17px}.friend-maps img{width:46px;height:46px;border-width:2px}.friend-maps input,.friend-all input{width:20px;height:20px}.friend-all{font-size:14px;min-height:34px}.friend-muted{font-size:11px}.friend-options{gap:12px;margin-bottom:13px}.friend-options label{font-size:13px;gap:5px}.friend-card fieldset{margin-bottom:12px}#friendCreateMatch{font-size:21px}#friendStatus{font-size:12px;margin-top:9px}.friend-table-wrap{margin:10px 0}.friend-card td,.friend-card th,#friendFinish td,#friendFinish th{padding:8px}
 body.playing #hud{top:calc(var(--safe-top) + 10px);left:calc(var(--safe-left) + 12px);padding:8px 12px;gap:19px}#hud span{font-size:8px}#hud strong{font-size:26px}#leaderboard{width:225px;padding:5px 8px;top:calc(var(--safe-top) + 10px);right:calc(var(--safe-right) + 12px)}#leaderboard .panel-heading{font-size:8px}#leaderboard .leader-row{font-size:11px;padding:3px 0}#leaderboard .points{font-size:10px}#performanceHud{padding:5px 10px;border-radius:13px;top:calc(var(--safe-top) + 10px)}#friendTimer{top:calc(var(--safe-top) + 55px)}#friendTime{font-size:20px}#emoteToggle{width:48px;height:48px;border-width:3px}#emotePicker{padding:12px;width:390px;max-height:calc(var(--usable-height) - 100px)}
 .modal-card{max-width:455px;padding:21px 26px}.modal-card h2{font-size:29px;margin:8px 0}.modal-card p{font-size:13px;margin:8px 0}.modal-card .eyebrow{font-size:10px}#result{margin:13px 0}#result strong{font-size:28px}#result span{font-size:12px}#watchReplay{font-size:18px;padding:7px 13px;min-height:44px;margin-bottom:10px}.modal-card .play-btn{font-size:23px;min-height:48px;padding:7px 16px;border-width:3px}.modal-card .text-btn{font-size:15px;padding:10px 0 0;min-height:40px}#friendInviteActions{margin-top:8px}#friendInviteActions button{font-size:12px;padding:8px;min-height:44px}
}
@media(max-width:650px){.settings-body{grid-template-columns:115px minmax(0,1fr);gap:12px}.settings-tabs{padding-right:8px}.settings-tabs button{font-size:18px;padding:8px}.appearance-palette{gap:10px}.friend-room{flex-wrap:wrap}.friend-room .friend-code{flex-basis:100%}.friend-room .friend-icon{flex:0 0 44px}#openFriends{max-width:125px;font-size:14px}.friend-maps label{font-size:14px;gap:5px}.friend-maps img{width:34px;height:34px}.resolution-row select{width:100%}#leaderboard{width:210px}}
@media(orientation:landscape) and (max-height:350px){#welcome .arena-logo{font-size:45px;margin-bottom:6px}.snake-launch{height:49px}.theme-picker button{min-height:60px;font-size:13px}.theme-picker button img{width:28px;height:28px}.theme-picker{margin-top:6px}#welcome{top:calc(var(--safe-top) + (var(--usable-height) - 42px)/2)}}
@media(prefers-reduced-motion:reduce){button{transition:none}}
/* October 8: stable safe-area layout and one vertical scroller per panel. */
#friendsPanel,#settingsPanel,#appearancePanel,#rankingsPanel,#modal{padding:calc(var(--safe-top) + 12px) calc(var(--safe-right) + 16px) calc(var(--safe-bottom) + 12px) calc(var(--safe-left) + 16px);min-height:0;overflow:hidden;touch-action:pan-y;overscroll-behavior:none}
.settings-card,.appearance-card,.friend-card,.rankings-card,.modal-card{max-height:calc(var(--usable-height) - 24px);max-width:100%;min-width:0}
.friend-card{display:flex;flex-direction:column;overflow:hidden}
.friend-body{min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 4px 9px;overscroll-behavior:none;touch-action:pan-y;scrollbar-width:thin}
.friend-heading{padding:0 4px;min-width:0}.friend-heading h2{min-width:0}
.settings-body{min-width:0;overflow:hidden}.settings-tabs{overflow-x:hidden}.settings-tabs button{flex-shrink:0}
.settings-content{overflow-x:hidden;overflow-y:auto;overscroll-behavior:none;min-height:0;contain:inline-size}
.settings-page{width:100%;min-width:0}.setting-row{min-width:0}.setting-row>span,.setting-row label{min-width:0;overflow-wrap:anywhere}.setting-row select{flex-shrink:1;min-width:0;max-width:65%}
.settings-footer{flex:none}.settings-content input[type=range]{touch-action:pan-y}
.volume-setting input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,#bdef60 0 var(--range-fill,30%),#687564 var(--range-fill,30%) 100%);box-shadow:none}
.volume-setting input[type=range]::-moz-range-track{background:#687564}.volume-setting input[type=range]::-moz-range-progress{height:10px;background:#bdef60;border-radius:12px}
.rankings-card{overflow:hidden;min-height:0}.rankings-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:none;touch-action:pan-y;scrollbar-width:thin}
#leagueStandings{display:block}.league-table-wrap{overflow:visible;min-height:0;flex:none;margin-bottom:5px}.league-footer{flex:none}
.run-actions{display:flex;gap:10px;align-items:stretch;margin-top:10px}.modal-card .run-actions .play-btn{width:auto;flex:1}.modal-card .run-actions .text-btn{width:auto;flex:0 0 100px;padding:8px 12px;border:3px solid #0a1609;border-radius:15px;background:#2d4025;box-shadow:inset 0 0 0 2px #738b4c;min-height:48px}
.modal-card{overscroll-behavior:none;scrollbar-width:thin}.modal-card .eyebrow{margin-bottom:0}
/* Chat now has its own place below the right-hand leaderboard. */
#leaderboard{max-height:calc(var(--usable-height) - 160px);display:flex;flex-direction:column;overflow:hidden}body.playing #leaderboard{display:flex}
#leaderboardRows{min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin}#leaderboard .panel-heading{flex:none}
#emoteToggle{top:var(--chat-top,calc(var(--safe-top) + 80px));bottom:auto;right:calc(var(--safe-right) + 14px);width:var(--control-size,58.4px);height:var(--control-size,58.4px);opacity:var(--control-opacity,1)}
#emotePicker{top:calc(var(--safe-top) + 80px);bottom:auto;right:calc(var(--safe-right) + var(--control-size,58.4px) + 26px);max-height:calc(var(--usable-height) - 94px);max-width:calc(100% - var(--safe-left) - var(--safe-right) - var(--control-size,58.4px) - 42px)}
body.mobile-device.playing #boost,body.mobile-device.playing #slow{width:var(--control-size,58.4px);height:var(--control-size,58.4px);bottom:calc(var(--safe-bottom) + 14px);opacity:var(--control-opacity,1);touch-action:none}
body.mobile-device.playing #boost{right:calc(var(--safe-right) + 14px)}body.mobile-device.playing #slow{right:calc(var(--safe-right) + var(--control-size,58.4px) + 28px)}
#slow.active{--speed-detail:#bce86a}.speed-icon{width:55%;height:55%}
#touchPad{transform:scale(var(--control-scale,1));opacity:var(--control-opacity,1)}
/* Black/gray control editor: draft preview, explicit save/reset/exit. */
#openControls{padding:12px 18px;border:3px solid #080e08;border-radius:14px;background:#c6f66b;color:#1c2b11;min-height:48px;font:400 22px var(--display)}
#settingsControls p{color:#bbc6ae;line-height:1.6;margin-bottom:20px}
#controlsPanel[hidden]{display:none!important}#controlsPanel{position:fixed;inset:0;z-index:18000;display:grid;place-items:center;background:#0b0d10f5;padding:calc(var(--safe-top) + 12px) calc(var(--safe-right) + 16px) calc(var(--safe-bottom) + 12px) calc(var(--safe-left) + 16px);touch-action:pan-y}
.controls-card{width:1040px;max-width:100%;height:min(660px,calc(var(--usable-height) - 24px));min-height:0;display:flex;flex-direction:column;background:#1b1e23;border:3px solid #08090b;border-radius:26px;padding:26px;color:#ecedf0;box-shadow:inset 0 0 0 2px #50565f,0 12px 50px #0009}
.controls-heading{position:static;pointer-events:auto;height:auto;display:flex;align-items:center;justify-content:space-between;margin:0 0 22px;padding:0;flex:none}
.controls-heading h2{font:400 36px var(--display);margin:0;letter-spacing:.4px}.controls-actions{display:flex;gap:10px}
.controls-actions button{display:grid;place-items:center;width:48px;height:48px;background:#30353d;border:2px solid #5f6772;border-radius:14px;color:#eceef1;padding:11px}.controls-actions #controlSave{background:#d7dde4;color:#20242b;border-color:#f4f6f9}
.controls-card svg{width:100%;height:100%;pointer-events:none}.controls-body{flex:1;min-height:0;display:grid;grid-template-columns:300px minmax(0,1fr);gap:26px}
.control-options{overflow-y:auto;overflow-x:hidden;overscroll-behavior:none;padding:0 10px 3px 0;scrollbar-width:thin;scrollbar-color:#67717d #1b1e23;touch-action:pan-y}
.device-tabs{display:flex;gap:8px;margin-bottom:24px}.device-tabs button{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;min-height:44px;padding:10px;background:#252a31;color:#aab2bd;border:2px solid #444c57;border-radius:12px;font:800 15px var(--ui)}.device-tabs svg{width:20px;height:20px}.device-tabs button[aria-selected=true]{background:#d4dae2;color:#21262e;border-color:#f2f4f7}
.control-range{display:grid;grid-template-columns:1fr auto;margin-bottom:22px;gap:7px}.control-range label{font:800 15px var(--ui);color:#e1e5eb}.control-range output{font:900 15px var(--ui);color:#f6f7fa;font-variant-numeric:tabular-nums}
.control-range input{grid-column:1/-1;width:100%;margin:0;height:34px;appearance:none;-webkit-appearance:none;background:transparent;touch-action:pan-y}
.control-range input::-webkit-slider-runnable-track{height:9px;border-radius:9px;background:linear-gradient(to right,#dde3eb var(--range-fill),#454d58 var(--range-fill))}
.control-range input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:24px;height:24px;margin-top:-7.5px;background:#e5eaf0;border:3px solid #7b8695;border-radius:50%}
.control-range input::-moz-range-track{height:9px;background:#454d58;border-radius:9px}.control-range input::-moz-range-progress{height:9px;background:#dde3eb}.control-range input::-moz-range-thumb{width:20px;height:20px;background:#e5eaf0;border:3px solid #7b8695;border-radius:50%}
.control-scale{grid-column:1/-1;display:flex;justify-content:space-between;color:#8f98a6;font-size:11px}.control-note{color:#9ea8b5;font:12px/1.6 var(--ui);margin:0}
.control-preview{position:relative;min-height:0;overflow:hidden;border-radius:20px;border:2px solid #444c57;background:radial-gradient(ellipse,#30363e,#15181d);touch-action:none;user-select:none}
.preview-caption{position:absolute;left:18px;top:18px;font:900 10px var(--ui);letter-spacing:2px;color:#a0aab7;pointer-events:none}
.control-sample{display:grid;place-items:center;width:var(--preview-size);height:var(--preview-size);border:3px solid #697582;border-radius:50%;background:#252b32;color:#e3e8ef;opacity:var(--preview-opacity);padding:13px;pointer-events:none}.preview-chat{position:absolute;right:18px;top:18px;border-radius:14px}.preview-speed{position:absolute;display:flex;gap:12px;right:18px;bottom:50px;pointer-events:none}
#previewPointer{position:absolute;left:30%;top:55%;width:32px;height:32px;color:#b5bfcd;pointer-events:none;transform:translate(-50%,-50%)}#previewHeading{position:absolute;left:50%;top:44%;width:70px;height:28px;border:3px solid #090d10;background:#bfc9d5;border-radius:25px;transform:translate(-50%,-50%);pointer-events:none}#previewHeading:after{content:'';position:absolute;right:7px;top:7px;border-left:8px solid #27333f;border-top:4px solid transparent;border-bottom:4px solid transparent}#previewHelp{position:absolute;left:15px;right:15px;bottom:8px;text-align:center;font:12px/1.4 var(--ui);color:#a7b2c0;margin:0;pointer-events:none}#controlStatus{margin:8px 0 0;font:12px var(--ui);color:#d3dce8;min-height:17px;flex:none}
#openFriends:before,#openFriends:after{content:'';position:absolute;left:-19px;top:4px;width:8px;height:17px;background:#b3dd64;border:2px solid #111b0f;border-radius:9px;transform:rotate(-48deg)}#openFriends:after{left:-25px;top:29px;width:6px;height:10px;transform:rotate(-75deg)}
@media(orientation:landscape) and (max-height:600px){
 .settings-card{height:calc(var(--usable-height) - 24px)}.settings-card,.friend-card,.rankings-card{padding:13px 18px}
 .settings-heading,.friend-heading,.rankings-heading{margin-bottom:8px;min-height:44px}.settings-tabs{gap:4px}.settings-tabs button{min-height:44px;padding:6px 10px;font-size:20px}.settings-footer{margin-top:7px;padding-top:6px}
 .rankings-heading h2{font-size:25px}.league-tabs{margin:3px 0 7px}.league-tabs button{font-size:14px;min-height:44px;padding:7px}.league-footer{margin-top:7px;font-size:10px;line-height:1.35}.league-footer br{display:none}#refreshRankings{min-height:44px;padding:7px 10px;font-size:13px}#yourLeague{min-height:27px;font-size:12px}.league-table-wrap th{padding:5px 4px;font-size:10px}.league-table-wrap td{padding:8px 4px;font-size:12px}
 .modal-card{padding:17px 24px;max-width:485px}.modal-card h2{font-size:26px;margin:6px 0}.modal-card p{font-size:12px;margin:6px 0}#result{margin:10px 0}#result strong{font-size:27px}#result span{font-size:11px}#watchReplay{margin-bottom:7px;min-height:44px}.modal-card .run-actions .text-btn{min-height:44px}.run-actions{margin-top:5px}.modal-card .run-actions .play-btn{min-height:44px;font-size:22px}
 .controls-card{padding:14px 20px;border-radius:22px}.controls-heading{margin-bottom:10px}.controls-heading h2{font-size:27px}.controls-actions button{width:44px;height:44px;padding:10px}.controls-body{grid-template-columns:260px minmax(0,1fr);gap:18px}.device-tabs{margin-bottom:14px}.control-range{margin-bottom:12px;gap:2px}.preview-speed{bottom:48px;gap:8px}.preview-caption{font-size:9px}.control-sample{padding:11px}#previewHelp{font-size:10px}#controlStatus{margin-top:4px;min-height:14px}
}
@media(max-width:700px){.controls-body{grid-template-columns:215px minmax(0,1fr);gap:10px}.controls-card{padding:12px}.preview-chat{right:10px;top:10px}.preview-speed{right:10px;gap:5px}.preview-caption{display:none}.control-range label{font-size:13px}}
/* Constrain grid tracks before percentage-sized dialog content is measured. */
#controlsPanel,#friendsPanel,#rankingsPanel,#appearancePanel,#modal{grid-template-columns:minmax(0,1fr)}
.controls-card{width:min(1040px,100%);min-width:0}.modal-card{width:min(490px,100%)}
@media(orientation:landscape) and (max-height:600px){.modal-card{width:min(485px,100%)}}
#leaderboard{max-height:max(60px,calc(var(--usable-height) - var(--control-size,58.4px) * 2 - 64px))}
@media(orientation:landscape) and (max-height:600px){
 .device-tabs{margin-bottom:4px}.control-range{gap:0;margin-bottom:6px}.control-range label,.control-range output{font-size:13px}.control-range input{height:28px}.control-scale{display:none}.control-note{font-size:10px;margin-top:5px}
}

#languageSelect{display:block;margin:18px 0;min-height:48px;width:min(100%,320px);padding:10px 14px;border:2px solid #a9d544;border-radius:14px;background:#142315;color:#f4ffdd;font:700 18px Arial,sans-serif}
html[lang="ru"]{--display:Arial,sans-serif;--ui:Arial,sans-serif}
html[lang="ru"] .settings-tabs button{font-size:19px;font-weight:700}
html[lang="ru"] .login-provider button{white-space:normal;min-height:44px;height:auto}
html[lang="ru"] #openFriends{font-size:17px}

/* The SNAKE wordmark is the same brand in every language. */
.arena-logo,.startup-logo,.rotate-brand,.gate-brand,.brand{--display:"Snake Display",Impact,sans-serif;font-family:"Snake Display",Impact,sans-serif}

/* Four arena choices, including NOT, fit the existing menu width. */
.theme-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;max-width:484px}
.theme-picker button{min-width:0;padding-left:6px;padding-right:6px}
.friend-maps{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:650px){.friend-maps{grid-template-columns:repeat(2,minmax(0,1fr))}}