@font-face{font-family:VSCDisplay;src:url('bangers.ttf') format('truetype');font-display:swap}
:root{--vsc-ink:#081320;--vsc-panel:#132b3b;--vsc-cream:#ffebc9;--vsc-mint:#64f7c7;--vsc-coral:#ff5268;--vsc-gold:#ffbb5c}
/* Navigation stays outside Unity's touch targets. */
body{padding-bottom:calc(env(safe-area-inset-bottom) + 72px)}
#game-shell{width:min(100%,calc((100vh - 72px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * .5625));width:min(100%,calc((100dvh - 72px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * .5625))}
#portal-bar{position:fixed;left:50%;bottom:max(8px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:12;display:flex;gap:5px;justify-content:center;width:min(96vw,530px)}
#portal-bar button{flex:1;width:auto;min-height:56px;padding:6px 3px;border:1px solid #406173;border-bottom:4px solid #030b12;border-radius:10px 3px 10px 3px;background:linear-gradient(#203d4f,#112330);color:var(--vsc-cream);font:700 10px/1.2 system-ui;letter-spacing:.02em;box-shadow:inset 0 1px #72929c4d;display:grid;justify-items:center;align-content:center;gap:5px}
#portal-bar button[data-action=ranked]{border-top-color:var(--vsc-gold);color:var(--vsc-gold)}
.nav-icon{display:block;width:19px;height:19px;background:currentColor;clip-path:polygon(30% 0,70% 0,80% 35%,65% 55%,90% 65%,100% 100%,0 100%,10% 65%,35% 55%,20% 35%)}
[data-action=ranked] .nav-icon{clip-path:polygon(10% 0,80% 0,100% 30%,55% 70%,55% 100%,40% 100%,40% 70%,0 30%)}
[data-action=friends] .nav-icon{clip-path:polygon(12% 5%,38% 5%,45% 35%,30% 50%,48% 70%,48% 100%,0 100%,0 70%,18% 50%,5% 35%,12% 5%,60% 5%,86% 5%,95% 35%,80% 50%,100% 70%,100% 100%,55% 100%,55% 70%,68% 50%,53% 35%,60% 5%)}
[data-action=leaderboard] .nav-icon{clip-path:polygon(0 35%,25% 35%,25% 100%,35% 100%,35% 0,65% 0,65% 100%,75% 100%,75% 55%,100% 55%,100% 100%,0 100%)}
[data-action=settings] .nav-icon{clip-path:polygon(0 15%,25% 15%,25% 0,45% 0,45% 15%,100% 15%,100% 30%,45% 30%,45% 45%,25% 45%,25% 30%,0 30%,0 65%,60% 65%,60% 50%,80% 50%,80% 65%,100% 65%,100% 80%,80% 80%,80% 100%,60% 100%,60% 80%,0 80%)}
#portal-bar[data-playing=true] button:not([data-action=settings]){display:none}
#portal-bar[data-playing=true]{width:110px}
#portal{position:fixed;inset:0;z-index:30;background:linear-gradient(#06101bbf,#06101bf2),url('night-beach.png') center/cover;display:grid;place-items:center;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));overflow:auto;font:16px/1.45 system-ui;color:var(--vsc-cream)}
#portal[hidden],#portal-bar[hidden]{display:none}
.portal-panel{position:relative;width:min(100%,510px);max-height:94dvh;overflow:auto;background:linear-gradient(160deg,#1c3547f7,#091723fc);padding:26px;border:2px solid #466578;border-top:4px solid var(--vsc-mint);border-radius:22px 5px 22px 5px;box-shadow:0 10px 0 #030911,0 24px 70px #000a,inset 0 1px #9ac9c52b;scrollbar-color:#436273 #0b1b29}
#portal h2{font:30px/1.15 VSCDisplay,Impact,sans-serif;text-transform:uppercase;letter-spacing:1px;margin:12px 0 20px;text-shadow:2px 3px #030b16}
#portal p{margin:10px 0}.portal-kicker{color:var(--vsc-mint);font-size:11px;letter-spacing:2px;font-weight:800;padding-top:5px}
#portal label{display:grid;gap:7px;font-size:13px;font-weight:700;margin:15px 0;letter-spacing:.02em}
#portal input,#portal select{box-sizing:border-box;width:100%;min-height:48px;padding:12px;background:#061320;border:1px solid #426176;border-bottom:2px solid #5b8190;border-radius:8px 3px 8px 3px;color:#fff6e6;font:16px system-ui;box-shadow:inset 0 2px 4px #0007}
#portal input:focus,#portal select:focus{outline:2px solid var(--vsc-mint);outline-offset:2px;border-color:transparent}
#portal input[type=checkbox]{width:20px;min-height:20px;accent-color:var(--vsc-mint)}#portal input[type=range]{accent-color:var(--vsc-mint);padding:4px}
#portal .check{display:flex;align-items:center;gap:10px;font-weight:400}
#portal button{width:auto;font:18px/1.2 VSCDisplay,Impact,sans-serif;letter-spacing:.7px;min-height:48px;padding:11px 16px;border:2px solid #91ffe0;border-bottom:5px solid #1c8b7b;border-radius:10px 3px 10px 3px;background:linear-gradient(#83ffdc,#4ce6ba);color:#08202c;cursor:pointer;box-shadow:0 3px #030c15,inset 0 1px #fff7;transition:filter .12s,transform .12s}
#portal button:hover{filter:brightness(1.12)}#portal button:active{transform:translateY(2px)}
#portal button:focus-visible,#portal-bar button:focus-visible{outline:3px solid var(--vsc-gold);outline-offset:3px}
#portal button.secondary{background:linear-gradient(#2e4c60,#1b3042);color:var(--vsc-cream);border-color:#537385;border-bottom-color:#0b1726}
#portal button.danger{background:linear-gradient(#ae3d56,#7a263e);color:#fff0dd;border-color:#e16b7d;border-bottom-color:#431126}
#portal button:disabled,#portal-bar button:disabled{opacity:.42;filter:saturate(.4);cursor:default;transform:none}
.portal-actions{display:flex;gap:10px;flex-wrap:wrap;margin:17px 0}.portal-actions>button{flex:1}#portal form>button{width:100%;margin-top:8px}
.portal-row{border:1px solid #355363;border-left:3px solid var(--vsc-mint);padding:14px;margin:10px 0;border-radius:4px 12px 4px 12px;background:#07152266}.portal-row strong{color:#fff5df}.portal-row small{display:block;color:#bdcbd1;margin-top:4px}
#portal-status{min-height:0;color:#ffbea9;white-space:pre-wrap;font-size:14px}#portal-status:empty{display:none}#portal .muted{color:#adbdc9;font-size:13px}
#portal .close{float:right;background:#223b4d;color:var(--vsc-cream);border-color:#526c7b;border-bottom-color:#06111d;min-width:44px;width:44px;min-height:44px;padding:5px;margin-left:12px;font:26px system-ui}
#portal .friend-code{font:700 22px ui-monospace,monospace;letter-spacing:3px;color:var(--vsc-mint);background:#071621;padding:14px;text-align:center;border:1px dashed #598e94}
#portal table{width:100%;border-collapse:collapse}#portal caption{color:var(--vsc-mint);padding:12px;font-size:12px;text-transform:uppercase;letter-spacing:2px}
#portal td,#portal th{text-align:left;padding:13px 6px;border-bottom:1px solid #355363;font-size:14px}#portal td:last-child{font-weight:800;white-space:nowrap;color:var(--vsc-gold)}#portal tbody tr:nth-child(even){background:#ffffff05}#portal a{color:var(--vsc-mint)}
@media(max-width:380px){.portal-panel{padding:18px}#portal h2{font-size:26px}#portal button{font-size:16px;padding-inline:10px}.portal-actions{gap:7px}}
@media(max-height:600px){.portal-panel{max-height:90dvh;padding:16px}#portal h2{font-size:26px}}
@media(prefers-reduced-motion:reduce){#portal button{transition:none}#portal button:active{transform:none}}