:root{--bg-deep: #18110d;--bg-base: #241b16;--bg-panel: #2f231b;--cyan: #5fd3d0;--green: #c7ff4a;--indigo: #4361ee;--pink: #ff4f7d;--text: #fff8df;--text-muted: #c6b99b;--surface: #32251c;--surface-solid: #2a211a;--border: rgba(20, 17, 15, .86);--border-strong: #14110f;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.5rem;--space-6: 2rem;--radius-md: 4px;--radius-lg: 6px;--radius-full: 9999px;--glow-cyan: var(--shadow-sticker, 2px 2px 0 #14110f);--glow-green: var(--shadow-sticker, 2px 2px 0 #14110f);--glow-pink: var(--shadow-sticker, 2px 2px 0 #14110f);--transition: .2s ease;--race: #c7ff4a;--derby: #ff4f33;--danger: #ff3344;--phone-cardboard: #3a2b20;--phone-tape: #d5b05f;--phone-ink: #14110f;--phone-shadow: 3px 3px 0 var(--phone-ink);--phone-scuffed-edge: repeating-linear-gradient( 90deg, rgba(255, 248, 223, .08) 0 2px, transparent 2px 8px )}*{margin:0;padding:0;box-sizing:border-box;font-family:var(--font-sans);touch-action:manipulation;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}html{height:100%;width:100%}body{background:radial-gradient(circle at 18% 14%,rgba(95,211,208,.12),transparent 28%),linear-gradient(135deg,#18110d,#241b16 58%,#111816);color:var(--text);overflow:hidden;position:fixed;width:100%;height:100%;min-height:-webkit-fill-available}body:before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.12;background-image:linear-gradient(rgba(255,248,223,.08) 1px,transparent 1px),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");background-size:100% 4px,120px 120px}:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:4px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}.container{position:relative;z-index:2;width:100%;height:100%;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding:20px;overflow-y:auto;-webkit-overflow-scrolling:touch}#game-screen{width:100%;height:100%;position:fixed;top:0;left:0;display:flex;flex-direction:column;background:linear-gradient(90deg,rgba(95,211,208,.08),transparent 28%,transparent 72%,rgba(255,79,51,.1)),var(--bg-base)}.portrait-message{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--surface-solid);color:var(--text);padding:15px 25px;border:var(--border-ink, 2px solid var(--phone-ink));border-radius:var(--radius-md);text-align:center;pointer-events:none;z-index:2000;transition:opacity .3s;box-shadow:var(--phone-shadow)}.portrait-message:before{content:"📱";display:block;font-size:2em;margin-bottom:10px;animation:rotate 2s infinite}@keyframes rotate{0%{transform:rotate(0)}25%{transform:rotate(-90deg)}75%{transform:rotate(-90deg)}to{transform:rotate(0)}}@media screen and (orientation: portrait){body.game-active .portrait-message{display:block}#game-stats{top:max(12px,env(safe-area-inset-top));right:70px;bottom:auto;transform:none}}@media screen and (orientation: landscape){#game-screen,#game-stats{transform:none}}#controls-container{position:absolute;bottom:0;left:0;width:100%;height:100%;display:flex;justify-content:space-between;padding:0;z-index:100;background:linear-gradient(90deg,#14110f47 0 50%,#fff8df09 50% 100%),var(--phone-scuffed-edge)}.control-area{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#steering-area{width:50%;background-color:#3a2b20ad;position:relative;border-right:3px dashed rgba(255,248,223,.22)}#steering-area:after{content:"STEER";position:absolute;left:max(16px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));color:#fff8dfb8;font-family:var(--font-display, var(--font-sans));font-size:clamp(1.1rem,5vw,2rem);font-weight:900;letter-spacing:.08em;text-shadow:2px 2px 0 var(--phone-ink);pointer-events:none}#pedals-area{width:50%;display:flex;flex-direction:column;justify-content:space-between;padding:0}#steering-indicator{width:60px;height:60px;border-radius:50%;background-color:#5fd3d047;border:3px solid var(--phone-ink);position:absolute;transform:translate(-50%,-50%);opacity:0;transition:opacity .1s;pointer-events:none;box-shadow:inset 0 0 0 4px var(--cyan),var(--phone-shadow)}#steering-indicator.active{opacity:1}#accelerate-btn,#brake-btn{width:100%;height:50%;border-radius:0;box-shadow:none;background-image:none;display:flex;justify-content:center;align-items:center;min-height:50%;border:0;border-left:3px solid var(--phone-ink);font-family:var(--font-display, var(--font-sans));font-size:clamp(2.2rem,12vw,4.5rem);font-weight:900;letter-spacing:0;margin:0;padding:0;transition:background-color .08s,filter .08s;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#accelerate-btn{background:linear-gradient(#fff8df29,#fff8df00),var(--race);color:var(--phone-ink);border-bottom:3px solid var(--phone-ink)}#brake-btn{background:linear-gradient(#fff8df1f,#fff8df00),var(--derby);color:var(--text);text-shadow:2px 2px 0 var(--phone-ink)}#accelerate-btn:hover,#brake-btn:hover{transform:none}#accelerate-btn:active,#brake-btn:active{filter:brightness(.8)}#game-stats{position:fixed;top:20px;right:20px;padding:10px 20px;background-color:var(--surface-solid);border:var(--border-ink, 2px solid var(--phone-ink));border-radius:var(--radius-md);z-index:100;transform:rotate(-90deg);box-shadow:var(--phone-shadow)}@media (orientation: landscape){#game-stats{transform:none}}@media screen and (orientation: portrait){#game-stats{top:max(12px,env(safe-area-inset-top));right:70px;bottom:auto;transform:none}}.screen:not(#game-screen){width:100%;max-width:500px;text-align:center;margin:auto 0;flex-shrink:0}.hidden{display:none!important}h1{font-family:var(--font-display, var(--font-sans));font-size:2rem;margin-bottom:20px;color:var(--text);letter-spacing:.03em;text-shadow:3px 3px 0 var(--phone-ink)}h2{font-family:var(--font-display, var(--font-sans));font-size:1.5rem;margin-bottom:20px;color:var(--phone-tape);text-shadow:2px 2px 0 var(--phone-ink)}.join-subtitle{margin:-6px 0 18px;color:var(--text-muted);font-size:1rem;letter-spacing:.02em}.join-form{display:flex;flex-direction:column;gap:15px;margin-bottom:20px}#room-code{text-transform:uppercase;letter-spacing:.4em;font-weight:700}#join-btn.joining{opacity:.75;cursor:progress}input{padding:15px;min-height:52px;border:var(--border-ink, 2px solid var(--phone-ink));border-radius:var(--radius-md);font-size:1.2rem;background-color:var(--surface-solid);color:var(--text);text-align:center;box-shadow:var(--phone-shadow);transition:border-color var(--transition),box-shadow var(--transition);-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}input:focus{border-color:var(--border-strong);box-shadow:var(--glow-cyan);outline:none}input::placeholder{color:var(--text-muted)}button{background:var(--race);color:var(--phone-ink);padding:15px;min-height:52px;border:var(--border-ink, 2px solid var(--phone-ink));border-radius:var(--radius-md);font-size:1.2rem;font-weight:900;cursor:pointer;box-shadow:var(--phone-shadow);transition:transform 80ms ease,filter 80ms ease}button:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--phone-ink)}button:active{transform:translateY(0)}.error{color:var(--danger);margin-top:10px;padding:10px;background-color:#ff334424;border:var(--border-ink, 2px solid var(--phone-ink));border-radius:var(--radius-md)}.join-actions{display:flex;flex-direction:column;gap:10px}.join-secondary{background:var(--surface-solid);color:var(--text);border:var(--border-ink, 2px solid var(--phone-ink));box-shadow:var(--phone-shadow)}.join-secondary:hover{border-color:var(--cyan);box-shadow:var(--glow-cyan)}.control-remap-summary{font-size:.85rem;line-height:1.4;color:var(--text-muted);border-top:1px solid var(--border);padding-top:12px}.control-remap-summary-menu{margin:-2px 0 4px}.player-info{margin:20px 0;padding:20px;background:var(--surface);border:var(--border-ink, 2px solid var(--phone-ink));border-radius:var(--radius-lg);box-shadow:var(--phone-shadow)}.mode-display{display:flex;align-items:center;justify-content:center;gap:10px;margin:15px 0;padding:12px 20px;background:#0000004d;border-radius:8px;border:2px solid var(--mode-color, var(--race));box-shadow:2px 2px 0 var(--mode-color, var(--race));transition:all .3s ease}.mode-display[data-mode=race]{--mode-color: var(--race)}.mode-display[data-mode=derby]{--mode-color: var(--derby)}.mode-icon{font-size:1.5rem}.mode-name{font-size:1.2rem;font-weight:700;letter-spacing:2px;color:var(--mode-color, var(--race))}.car-preview-container{width:100%;height:150px;margin:20px 0;position:relative}#car-preview{width:100%;height:100%}.waiting-text{font-style:italic;color:var(--text-muted);margin-top:20px}.message-display{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.8);background-color:#000c;color:#fff;padding:15px 25px;border-radius:8px;font-size:1.2rem;opacity:0;transition:opacity .3s,transform .3s;z-index:1000;pointer-events:none}.message-display.visible{opacity:1;transform:translate(-50%,-50%) scale(1)}.join-timer{margin-top:10px;padding:8px 12px;background-color:#0000004d;border-radius:4px;font-size:.9rem;cursor:pointer;transition:background-color .2s}.join-timer:hover{background-color:#00000080}.name-change-container{margin-top:20px;border-top:1px solid var(--border);padding-top:15px}.name-change-input{display:flex;gap:10px;margin-top:10px}.name-change-input input{flex:1}.name-change-input button{padding:10px 15px;font-size:.9rem;background:transparent;color:var(--cyan);border:2px solid var(--border-strong);box-shadow:none}.name-change-input button:hover{border-color:var(--cyan);box-shadow:var(--glow-cyan)}.auto-join-message{background:var(--surface);border:1px solid var(--border);margin-bottom:20px;padding:15px;border-radius:var(--radius-md);text-align:center}#player-menu-btn{position:fixed;top:10px;left:10px;z-index:300;width:44px;height:44px;padding:0;background:var(--surface-solid);color:var(--text);border:var(--border-ink, 2px solid var(--phone-ink));border-radius:var(--radius-md);font-size:1.3rem;box-shadow:var(--phone-shadow);opacity:.92}#player-menu{position:fixed;top:0;left:0;width:100%;height:100%;background:#14110fc7;display:flex;justify-content:center;align-items:center;z-index:2000}.player-menu-content{background:var(--surface-solid);border:var(--border-ink, 2px solid var(--phone-ink));border-radius:var(--radius-lg);padding:20px;width:90%;max-width:320px;max-height:90%;overflow-y:auto;display:flex;flex-direction:column;gap:10px;box-shadow:var(--phone-shadow),inset 0 0 0 3px #fff8df0d}.player-menu-title{font-family:var(--font-display, var(--font-sans));font-size:1.3rem;font-weight:700;color:var(--phone-tape);text-align:center;text-shadow:2px 2px 0 var(--phone-ink)}.player-menu-content button{padding:12px;font-size:1rem}#player-menu-close{background:var(--surface);color:var(--text-muted);border:var(--border-ink, 2px solid var(--phone-ink));box-shadow:var(--phone-shadow)}#player-menu-close:hover{border-color:var(--border-strong);color:var(--text)}.control-remap-content button,.control-remap-content select{font-size:.98rem}.player-menu-help{font-size:.85rem;color:var(--text-muted);text-align:left;display:flex;flex-direction:column;gap:5px;border-top:1px solid var(--border);padding-top:10px}.player-menu-help-title{font-weight:700;color:var(--text-muted)}#control-remap-modal{position:fixed;inset:0;z-index:2400;background:#14110fc7;display:flex;justify-content:center;align-items:center;padding:20px 14px;backdrop-filter:none}.control-remap-content{width:min(560px,100%);max-height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:18px;padding:18px;border-radius:var(--radius-lg);background:linear-gradient(#fff8df0a,#fff8df00),var(--surface-solid);border:var(--border-ink, 2px solid var(--phone-ink));box-shadow:var(--phone-shadow)}.control-remap-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.control-remap-kicker{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--phone-tape);margin-bottom:4px}.control-remap-title{font-family:var(--font-display, var(--font-sans));font-size:1.35rem;font-weight:800;color:var(--text)}.control-remap-status,.control-remap-note,.control-remap-section-copy{font-size:.86rem;line-height:1.45;color:var(--text-muted)}.control-remap-status[data-state=error]{color:#ff9aa9}.control-remap-status[data-state=ok]{color:var(--text-muted)}.control-remap-note[data-state=warn]{color:#ffd06b}.control-remap-note[data-state=ok]{color:var(--green)}.control-remap-section{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--border);padding-top:14px}.control-remap-section-head{display:flex;flex-direction:column;gap:4px}.control-remap-section-title{font-size:1rem;font-weight:800;color:var(--phone-tape)}.control-remap-chip-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.control-remap-chip{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:92px;padding:14px;border-radius:var(--radius-md);border:var(--border-ink, 2px solid var(--phone-ink));background:var(--phone-cardboard);color:var(--text);box-shadow:var(--phone-shadow);transform:none}.control-remap-chip:hover{transform:none;border-color:var(--border-strong);box-shadow:4px 4px 0 var(--phone-ink)}.control-remap-chip.active{background:var(--race);color:var(--phone-ink);box-shadow:var(--phone-shadow)}.control-remap-chip-title{font-size:.98rem;font-weight:800}.control-remap-chip-meta{font-size:.8rem;line-height:1.35;color:var(--text-muted)}.control-remap-stack{display:flex;flex-direction:column;gap:10px}.control-remap-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(140px,220px);gap:12px;align-items:center;padding:12px;border-radius:var(--radius-md);background:var(--phone-cardboard);border:var(--border-ink, 2px solid var(--phone-ink))}.control-remap-row-label{font-size:.92rem;font-weight:700;color:var(--text)}.control-remap-bind-btn,.control-remap-select{width:100%;min-height:44px;padding:10px 12px;border-radius:var(--radius-md);border:var(--border-ink, 2px solid var(--phone-ink));background:var(--surface-solid);color:var(--text);box-shadow:var(--phone-shadow)}.control-remap-bind-btn:hover{transform:none;box-shadow:var(--glow-cyan)}.control-remap-bind-btn.capturing{border-color:var(--green);box-shadow:var(--glow-green);color:var(--green)}.control-remap-select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--cyan) 50%),linear-gradient(135deg,var(--cyan) 50%,transparent 50%);background-position:calc(100% - 18px) calc(50% - 3px),calc(100% - 12px) calc(50% - 3px);background-size:6px 6px;background-repeat:no-repeat}.control-remap-footer{display:flex;justify-content:flex-end}#control-remap-close,#control-remap-reset{background:var(--surface);color:var(--text-muted);border:var(--border-ink, 2px solid var(--phone-ink));box-shadow:var(--phone-shadow)}#control-remap-close:hover,#control-remap-reset:hover{border-color:var(--border-strong);color:var(--text)}@media (max-width: 520px){.control-remap-row{grid-template-columns:1fr}.control-remap-header{flex-direction:column}.control-remap-footer{justify-content:stretch}}.weapon-area{position:fixed;bottom:20px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;z-index:200;pointer-events:auto}.weapon-indicator{background:var(--surface-solid);border:var(--border-ink, 2px solid var(--phone-ink));border-radius:var(--radius-md);padding:8px 16px;font-size:.9rem;color:var(--text-muted);display:flex;align-items:center;gap:8px;min-width:120px;justify-content:center}.weapon-indicator.has-weapon{border-color:var(--derby);color:var(--text);box-shadow:2px 2px #f446}.weapon-indicator.has-weapon span{font-weight:700}.fire-btn{width:100px;height:80px;background:var(--derby);clip-path:polygon(50% 0%,100% 100%,0% 100%);display:flex;justify-content:center;align-items:flex-end;padding-bottom:15px;font-size:1.2rem;font-weight:700;color:var(--text);text-shadow:2px 2px 0 var(--phone-ink);transition:transform .08s,opacity .08s,box-shadow .08s;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.fire-btn.enabled{box-shadow:var(--phone-shadow)}.fire-btn.pressed{transform:scale(.9)}.fire-btn:not(.enabled){background:#6b6253}@font-face{font-family:SkipBinDisplay;src:url(/assets/skip-bin-display-COrpUPVr.woff2) format("woff2"),local("Oswald"),local("Bebas Neue"),local("Anton"),local("Arial Narrow Bold"),local("Impact");font-weight:700;font-display:swap}@font-face{font-family:SkipBinBody;src:url(/assets/skip-bin-body-v_b6oLD1.woff2) format("woff2"),local("Inter"),local("Helvetica Neue"),local("Segoe UI"),local("Roboto");font-weight:400;font-display:swap}:root{--font-display: "SkipBinDisplay", "Arial Narrow", "Segoe UI", sans-serif;--font-body: "SkipBinBody", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: ui-monospace, "SF Mono", "Roboto Mono", "Consolas", monospace;--font-body-min-size: 14px;--ink: #14110f;--sticker-surface: #16213e;--sticker-surface-2: #1f2b4d;--border-ink: 2px solid var(--ink);--radius-sticker: 4px;--shadow-sticker: 2px 2px 0 var(--ink);--glow-soft: none;--sb-grain-opacity: .06}.sb-grain-overlay{position:fixed;inset:0;pointer-events:none;z-index:40;opacity:var(--sb-grain-opacity, .06);mix-blend-mode:overlay;background-repeat:repeat;background-size:180px 180px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");animation:sb-grain-shift .5s steps(1) infinite}@keyframes sb-grain-shift{0%{background-position:0 0}25%{background-position:-40px 30px}50%{background-position:60px -20px}75%{background-position:-30px -50px}to{background-position:20px 40px}}@media (prefers-reduced-motion: reduce){.sb-grain-overlay{animation:none}}.sb-grain-overlay[data-enabled=false],.reduce-effects .sb-grain-overlay{display:none}:root{--font-sans: var(--font-body)}