:root{
 --safe-top:max(env(safe-area-inset-top,0px),var(--snake-safe-top,0px));
 --safe-right:max(env(safe-area-inset-right,0px),var(--snake-safe-right,0px));
 --safe-bottom:max(env(safe-area-inset-bottom,0px),var(--snake-safe-bottom,0px));
 --safe-left:max(env(safe-area-inset-left,0px),var(--snake-safe-left,0px));
 --usable-height:calc(100dvh - var(--safe-top) - var(--safe-bottom));
}
#gameSurface{position:fixed;inset:0}
.player-profile{top:calc(var(--safe-top) + 20px);left:calc(var(--safe-left) + 24px)}
.player-avatar{flex:none}
.welcome{top:calc(var(--safe-top) + var(--usable-height)/2)}
.color-picker{top:calc(var(--safe-top) + var(--usable-height)/2);right:calc(var(--safe-right) + 5%)}
.version-label{right:calc(var(--safe-right) + 20px);bottom:calc(var(--safe-bottom) + 16px)}
header{top:var(--safe-top);left:var(--safe-left);right:var(--safe-right);margin:0;height:80px;padding:16px 24px}
body.playing .hud{top:calc(var(--safe-top) + 20px);left:calc(var(--safe-left) + 24px);margin:0}
.leaderboard{top:calc(var(--safe-top) + 16px);right:calc(var(--safe-right) + 24px)}
.boost{right:calc(var(--safe-right) + 24px);bottom:calc(var(--safe-bottom) + 28px)}
.modal,#serverGate{padding:calc(var(--safe-top) + 16px) calc(var(--safe-right) + 16px) calc(var(--safe-bottom) + 16px) calc(var(--safe-left) + 16px)}
.modal-card{max-height:calc(var(--usable-height) - 32px);overflow-y:auto;touch-action:pan-y}
.country-picker-panel,.country-results,#serverGate{touch-action:pan-y}
.country-toggle .country-option-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arena-play .play-triangle{padding:0}
.play-triangle svg{width:23px;height:26px;margin-left:4px;fill:currentColor}
#rotateOverlay{position:fixed;inset:0;z-index:100000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;background:radial-gradient(ellipse at center,#182014 0%,#050505 65%);color:#edf4e8;text-align:center;padding:calc(var(--safe-top) + 24px) calc(var(--safe-right) + 24px) calc(var(--safe-bottom) + 24px) calc(var(--safe-left) + 24px);outline:none}
#rotateOverlay[hidden]{display:none}
#rotateOverlay .rotate-brand{font:700 11px Arial,sans-serif;letter-spacing:4px;color:#89977f}
#rotateOverlay h2{font:600 clamp(21px,6vw,28px)/1.35 'DM Sans',Arial,sans-serif;max-width:290px;margin:0;letter-spacing:-.5px}
.rotate-art{width:180px;height:180px;color:#c6f66b;overflow:visible}
.rotate-phone{transform-origin:90px 90px;animation:rotate-phone 3.2s cubic-bezier(.45,0,.25,1) infinite}
.rotate-arrow{stroke:#a2b78d;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
@keyframes rotate-phone{0%,15%{transform:rotate(0deg)}50%,80%{transform:rotate(90deg)}100%{transform:rotate(0deg)}}
@media(prefers-reduced-motion:reduce){.rotate-phone{animation:none;transform:rotate(90deg)}}
@media(orientation:landscape) and (max-height:600px){
 .player-profile{top:calc(var(--safe-top) + 12px);left:calc(var(--safe-left) + 16px);width:164px;gap:8px;align-items:flex-start}
 .player-avatar{width:34px;height:34px;font-size:16px;margin-top:17px}
 .profile-name{width:122px;gap:4px}
 .profile-name label{font-size:8px;letter-spacing:.7px}
 .profile-name input{width:122px;max-width:100%;height:32px;padding:0 7px}
 .profile-country-label{margin-top:8px}
 .country-toggle{width:122px;min-height:34px;padding:6px;gap:5px;font-size:11px}
 .country-toggle small{display:none}
 .welcome{left:calc(var(--safe-left) + 188px);right:calc(var(--safe-right) + 66px);width:auto;transform:translateY(-50%);bottom:auto}
 .welcome h1{font-size:clamp(42px,10vh,64px);margin-bottom:12px}
 .arena-play{height:clamp(54px,18vh,78px)}
 .arena-play .play-triangle{width:46px;height:46px}
 .mode-options{margin-top:10px;gap:10px}
 .mode-options button{min-width:80px;height:34px;font-size:12px}
 .color-picker{right:calc(var(--safe-right) + 15px);bottom:auto;transform:translateY(-50%)}
 .color-picker .swatches{flex-direction:column;gap:0}
 .color-picker .swatch{width:32px;height:32px;border-width:7px}
 .color-picker legend{display:none}
 .version-label{font-size:10px;bottom:calc(var(--safe-bottom) + 6px)}
 body.playing .hud{top:calc(var(--safe-top) + 12px);left:calc(var(--safe-left) + 16px);gap:16px}
 .hud strong{font-size:26px}.hud span{font-size:8px}.hud .best{display:none}
 header{height:60px;padding:8px 16px}#pauseBtn{margin:0}
 .leaderboard{top:calc(var(--safe-top) + 68px);right:calc(var(--safe-right) + 16px);width:155px;padding:10px;max-height:calc(var(--usable-height) - 155px);overflow:hidden;pointer-events:none}
 .leader-row{padding:3px 0;font-size:11px}.panel-heading{font-size:9px;margin-bottom:6px}.board-footer{display:none}
 .boost{width:58px;height:58px;right:calc(var(--safe-right) + 16px);bottom:calc(var(--safe-bottom) + 12px)}
 .boost span{font-size:28px;line-height:30px}.boost small{font-size:8px}
 .modal-card{padding:18px;max-width:380px}.modal-card h2{font-size:28px;margin:8px 0}.modal-card p{font-size:13px;margin:8px 0}.result{margin:12px 0}.result strong{font-size:24px}.play-btn{padding:10px 16px}.text-btn{padding-top:12px}
 #serverGate .gate-card{display:grid;grid-template-columns:130px minmax(0,1fr);column-gap:22px;max-width:650px;padding:0;text-align:left}
 #serverGate .gate-brand{grid-column:2;margin-bottom:8px;font-size:9px}
 #serverGate #gateMascot{grid-column:1;grid-row:1/8;align-self:center;width:130px;max-width:100%;margin:0}
 #serverGate h1,#serverGate p,#serverGate .gate-clock,#serverGate .gate-foot,#serverGate button,#serverGate .gate-id{grid-column:2}
 #serverGate h1{font-size:23px;margin-bottom:6px}#serverGate p{font-size:13px;line-height:1.4}#serverGate .gate-clock{margin:8px 0}#serverGate button{justify-self:start;margin-top:10px;padding:9px 16px}#serverGate .gate-id{margin-top:8px}
}

/* Compact leaderboard toolbar and one profile/settings dialog. */
.compact-icon{display:grid;place-items:center;flex:none;width:32px;height:32px;border:1px solid #ffffff16;border-radius:9px;background:#1b1d18;color:#dce4d5;padding:0;touch-action:manipulation}
.compact-icon:hover,.compact-icon:focus-visible{color:#c6f66b;border-color:#839969;outline-offset:2px}
.menu-settings{position:absolute;right:calc(var(--safe-right) + 20px);bottom:calc(var(--safe-bottom) + 16px)}
body.playing .menu-settings{display:none}
body.playing #leaderboard{display:block}
#leaderboard{top:calc(var(--safe-top) + 12px);right:calc(var(--safe-right) + 16px);width:232px;max-height:calc(var(--usable-height) - 90px);padding:6px 8px;border-radius:12px;overflow:hidden;pointer-events:auto}
#leaderboard .panel-heading{display:flex;align-items:center;gap:6px;margin:0;font-size:9px;letter-spacing:.7px;white-space:nowrap}
#leaderboard .panel-heading>span{flex:1}
#leaderboard .compact-icon{width:28px;height:30px;background:transparent;border-color:transparent}
#leaderboardRows{padding:4px 2px 3px}
#leaderboardRows[hidden]{display:none}
#leaderboard .leader-row{font-size:11px;padding:4px 0;gap:7px}
#leaderboard .leader-row.mine{margin-top:3px;padding-top:6px}
#leaderboard .points{font-size:11px}
#leaderboard .position{font-size:10px;width:14px}
.board-toggle svg{transition:transform .15s}
.board-toggle[aria-expanded=false] svg{transform:rotate(180deg)}
.welcome{left:calc(var(--safe-left) + (100% - var(--safe-left) - var(--safe-right))/2);right:auto;width:min(660px,65vw);transform:translate(-50%,-50%)}
#settingsPanel{position:fixed;inset:0;z-index:9500;display:grid;place-items:center;grid-template-columns:minmax(0,1fr);padding:calc(var(--safe-top) + 10px) calc(var(--safe-right) + 12px) calc(var(--safe-bottom) + 10px) calc(var(--safe-left) + 12px);background:#0009;backdrop-filter:blur(5px)}
#settingsPanel[hidden]{display:none}
.settings-card{width:290px;max-width:100%;max-height:calc(var(--usable-height) - 20px);overflow:auto;touch-action:pan-y;padding:14px;background:#141611;border:1px solid #ffffff26;border-radius:16px;box-shadow:0 12px 60px #0008}
.settings-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
#settingsTitle{font:600 16px/1.2 'DM Sans',Arial,sans-serif;margin:0;color:#edf4e8}
#closeSettings{font-size:23px;width:28px;height:28px}
#settingsPanel .player-profile{position:static;display:flex;width:100%;gap:12px;align-items:flex-start;transform:none}
#settingsPanel .player-avatar{width:44px;height:44px;margin-top:17px}
#settingsPanel .profile-name{width:100%;min-width:0;gap:5px}
#settingsPanel .profile-name label{font-size:9px;letter-spacing:1px}
#settingsPanel .profile-name input{height:34px;width:100%;max-width:none;padding:0 9px;font-size:16px}
#settingsPanel .profile-country-label{margin-top:7px}
#settingsPanel .country-toggle{width:100%;min-height:34px;gap:7px;font-size:12px;padding:6px 8px}
#settingsPanel .country-toggle small{display:none}
.settings-footer{display:flex;align-items:center;justify-content:flex-end;margin-top:14px;border-top:1px solid #ffffff12;padding-top:10px}
#settingsDone{background:#c6f66b;color:#17200e;border:0;border-radius:9px;padding:8px 18px;font-size:12px;font-weight:700}
.country-picker-panel{z-index:9600}
@media(orientation:landscape) and (max-height:600px){
 .welcome{width:min(660px,66vw)}
 #leaderboard{width:220px}
 #leaderboard .panel-heading{font-size:8px;gap:4px}
 #leaderboard .leader-row{padding:3px 0}
 .settings-card{padding:12px}
 .settings-heading{margin-bottom:10px}
 .settings-footer{margin-top:10px;padding-top:8px}
}

/* Shared arena: selection-free game UI and a circular Play hit target. */
html,body,button,canvas,img,label,h1,h2,p,span,div{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input:not([readonly]),textarea,[contenteditable=true]{-webkit-user-select:text;user-select:text;touch-action:manipulation}
input[readonly]{pointer-events:none;caret-color:transparent}
::selection{background:transparent;color:inherit}
input:not([readonly])::selection,textarea::selection{background:#506638;color:white}
.menu-settings{left:calc(var(--safe-left) + 20px);top:calc(var(--safe-top) + 16px);right:auto;bottom:auto}
.welcome{width:min(350px,60vw)}
.welcome .arena-logo{font-size:clamp(58px,7vw,96px);margin-bottom:26px;line-height:.9;letter-spacing:-2px}
.arena-logo small{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px;font:600 16px/1 Arial,sans-serif;letter-spacing:5px;color:#c6f66b}
.snake-launch{position:relative;width:100%;height:90px;display:grid;place-items:center}
.snake-launch #snakePreview{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.round-play{position:relative;width:58px;height:58px;display:grid;place-items:center;padding:0 0 0 4px;border-radius:50%;border:1px solid #ffffff45;background:#0c160deb;color:#f4f7ed;cursor:pointer;touch-action:manipulation}
.round-play:hover,.round-play:focus-visible{color:#c6f66b;background:#121e0e;outline:2px solid #c6f66b;outline-offset:4px}
.round-play:disabled{opacity:.6;cursor:wait}
#joinMessage{font-size:12px;line-height:1.4;color:#ffc889;margin:8px 0 0}
#joinMessage:empty{display:none}
.rotate-note{color:#8c9b80;font-size:12px;margin:0}
@media(orientation:landscape) and (max-height:600px){
 .welcome{width:min(350px,48vw)}
 .welcome .arena-logo{font-size:clamp(42px,11vh,64px);margin-bottom:14px}
 .arena-logo small{font-size:12px;letter-spacing:4px;margin-top:6px}
 .snake-launch{height:68px}.round-play{width:44px;height:44px}.round-play svg{width:18px;height:22px}
 .mode-options{margin-top:8px}
}

/* A medium-size arrow with a full, stable touch target. */
#leaderboard .panel-heading{gap:2px}
#leaderboard .board-toggle{width:auto;min-width:0;height:44px;flex:1;display:flex;align-items:center;justify-content:flex-start;gap:5px;padding:0 2px;font:inherit;letter-spacing:inherit;touch-action:none}
#leaderboard .board-toggle svg{width:22px;height:22px;flex:none}
#leaderboard .board-toggle span{pointer-events:none}
#leaderboard #exitArena{width:44px;height:44px}
.mode-options{gap:10px}
.mode-options button{display:flex;align-items:center;justify-content:center;gap:7px;min-width:150px;height:62px;padding:8px 12px;border-radius:16px;text-align:left;font-size:12px;line-height:1.3}
.mode-options button svg{flex:none}
.mode-options button small{display:block;margin-top:3px;font-size:10px;font-weight:400;opacity:.8}
@media (orientation:landscape) and (max-height:600px){
 .mode-options button{min-width:132px;height:52px;padding:5px 8px;font-size:11px}
 .mode-options button svg{width:26px;height:26px}
}


/* The second phone control sits alongside Boost without covering the steering pad. */
.slow{display:none;position:absolute;right:calc(var(--safe-right) + 100px);bottom:calc(var(--safe-bottom) + 28px);width:68px;height:68px;align-items:center;justify-content:center;flex-direction:column;border-radius:50%;border:1px solid #9aacb080;background:#172023df;color:#e0f3e8;touch-action:none;user-select:none;z-index:5}
.slow span{font-size:30px;line-height:28px}.slow small{font-size:9px;letter-spacing:1px}
body.mobile-device.playing .slow{display:flex}
.slow.active{background:#e0f3e8;color:#172023;box-shadow:0 0 12px #a2bfaa66}
@media(orientation:landscape) and (max-height:600px){
 .slow{right:calc(var(--safe-right) + 88px);bottom:calc(var(--safe-bottom) + 12px);width:58px;height:58px}
 .slow span{font-size:26px;line-height:25px}.slow small{font-size:8px}
}

/* Speed buttons belong to touch devices only. PC uses left mouse and Shift. */
body:not(.mobile-device) #boost,body:not(.mobile-device) #slow{display:none!important}
body.mobile-device.playing #boost{display:flex;z-index:5}
body.mobile-device.playing #slow{right:calc(var(--safe-right) + 120px)}
@media(orientation:landscape) and (max-height:600px){body.mobile-device.playing #slow{right:calc(var(--safe-right) + 88px)}}

/* Measured latency and frame rate stay centered above the arena. */
#performanceHud{display:none;position:absolute;top:calc(var(--safe-top) + 12px);left:50%;transform:translateX(-50%);z-index:6;align-items:center;gap:12px;padding:7px 12px;border:1px solid #ffffff18;border-radius:10px;background:#101510d9;color:#91a18d;font:10px/16px Arial,sans-serif;white-space:nowrap;pointer-events:none}
body.playing #performanceHud{display:flex}
#performanceHud>span{display:flex;align-items:baseline;gap:5px}
#performanceHud strong{min-width:3ch;color:#e4efdd;font-size:12px;font-variant-numeric:tabular-nums;text-align:right}
#performanceHud small{font-size:9px}
#performanceHud .metric-divider{width:1px;height:12px;background:#ffffff20}
@media(orientation:landscape) and (max-height:600px){#performanceHud{top:calc(var(--safe-top) + 10px);padding:5px 9px;gap:9px}}
@media(orientation:landscape) and (max-width:720px){body.playing #leaderboard{width:min(220px,calc(50vw - 110px - var(--safe-right)))}}

/* Profile / Graphics / Sound share a left-hand navigation and scrollable content. */
.settings-card{width:620px;height:430px;max-height:calc(var(--usable-height) - 20px);display:flex;flex-direction:column;overflow:hidden;padding:18px}
.settings-heading,.settings-footer{flex:none}
.settings-body{display:grid;grid-template-columns:126px minmax(0,1fr);flex:1;min-height:0;gap:20px}
.settings-tabs{display:flex;flex-direction:column;gap:6px;min-height:0;overflow-y:auto;touch-action:pan-y;padding-right:12px;border-right:1px solid #ffffff14}
.settings-tabs button{min-height:44px;border:1px solid transparent;border-radius:10px;padding:10px 12px;background:transparent;color:#a8b29f;font:600 13px Arial,sans-serif;text-align:left;touch-action:manipulation;cursor:pointer}
.settings-tabs button[aria-selected=true]{background:#c6f66b15;border-color:#c6f66b32;color:#c6f66b}
.settings-tabs button:hover{background:#ffffff0a}
.settings-card button:focus-visible,.settings-card input:focus-visible,.settings-card select:focus-visible{outline:2px solid #c6f66b;outline-offset:2px}
.settings-content{min-width:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding:0 5px 5px 0;scrollbar-width:thin;scrollbar-color:#536545 #141611}
.settings-page[hidden]{display:none}
.settings-page h3{margin:3px 0 12px;color:#e5eddf;font:600 14px/1.3 Arial,sans-serif}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;border-bottom:1px solid #ffffff0c;color:#cbd4c4;font:13px Arial,sans-serif}
.setting-row label,.setting-row>span{flex:1}
.setting-row select{width:128px;min-height:36px;border-radius:8px;border:1px solid #ffffff24;background:#0d100c;color:#e9f1e1;padding:5px 9px;font:13px Arial,sans-serif;cursor:pointer}
.resolution-row{flex-wrap:wrap;padding:6px 0}
.resolution-row select{width:268px;max-width:100%;min-width:0}
.setting-switch{min-width:66px;min-height:36px;border-radius:18px;border:1px solid #ffffff26;background:#20251d;color:#a8b29f;font:600 12px Arial,sans-serif;cursor:pointer;touch-action:manipulation}
.setting-switch[aria-checked=true]{background:#c6f66b;color:#18220f;border-color:#c6f66b}
#normalGlowToggle{min-height:44px}
.volume-setting{margin:0 0 16px;color:#cbd4c4;font:13px Arial,sans-serif}
.volume-setting>div{display:flex;justify-content:space-between;align-items:center}
.volume-setting output{color:#c6f66b;font-variant-numeric:tabular-nums}
.volume-setting input[type=range]{display:block;width:100%;height:30px;margin:6px 0 0;padding:0;accent-color:#c6f66b;touch-action:pan-y;cursor:pointer}
.volume-scale{font-size:10px;color:#76846d}
#performanceHud[hidden],#performanceHud>span[hidden]{display:none!important}
@media(orientation:landscape) and (max-height:600px){.settings-card{padding:12px;height:380px}.settings-heading{margin-bottom:10px}.settings-body{gap:14px}.settings-page h3{margin-top:0;margin-bottom:8px}.setting-row{min-height:44px}.settings-tabs button{min-height:44px}.settings-footer{margin-top:10px}}
@media(max-width:600px){.settings-body{grid-template-columns:96px minmax(0,1fr);gap:12px}.settings-tabs{padding-right:8px}.settings-tabs button{padding:8px;font-size:12px}.setting-row{gap:6px;font-size:12px}.setting-row select{width:105px;font-size:12px}.settings-card{padding:12px}}
@media(max-width:600px){.resolution-row{align-items:stretch;flex-direction:column;gap:6px;padding:8px 0}.resolution-row select{width:100%}}

/* Icon-only speed controls retain their existing touch areas and hold logic. */
.boost .speed-icon,.slow .speed-icon{display:block;width:32px;height:32px;flex:none;pointer-events:none}
.boost .speed-icon{color:var(--lime)}
.boost.active .speed-icon{color:#152519}
@media(orientation:landscape) and (max-height:600px){.boost .speed-icon,.slow .speed-icon{width:30px;height:30px}}


#runTimer{display:none;position:absolute;top:calc(var(--safe-top) + 50px);left:50%;transform:translateX(-50%);z-index:6;align-items:center;justify-content:center;min-width:88px;padding:5px 12px;border:1px solid #ffffff18;border-radius:10px;background:#101510d9;color:#e4efdd;font:700 18px/1 Arial,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none} 
body.playing #runTimer{display:flex} 
#runTimer.hidden{display:none!important} 
@media(orientation:landscape) and (max-height:600px){#runTimer{top:calc(var(--safe-top) + 41px);padding:4px 10px;font-size:16px}}