/* Local, asset-free street-art theme. Simulation and model controls are unchanged. */
:root{--ink:#1c1926;--paper:#fff9ed;--pink:#ff58ad;--acid:#d8ff3e;--purple:#a28bfb;--cyan:#6ae0e7;--bg:#1c1926;--panel:#fff9ed;--line:#ded5e4;--mint:#d8ff3e;--text:#241f32;--muted:#6b6177;--red:#e93979;--yellow:#ba4b00;--blue:#1a7484;color-scheme:light}
body{font:14px/1.45 'Avenir Next','PingFang SC',system-ui,sans-serif;color:var(--ink);background:var(--ink)}button,select,input{font:inherit}button,select{color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:11px;font-weight:800;box-shadow:0 3px 0 var(--ink);transition:transform .12s,box-shadow .12s,background .12s}button:hover:not(:disabled){background:#f5e8fa;transform:translateY(-1px)}button:active:not(:disabled){transform:translateY(3px);box-shadow:0 0 0 var(--ink)}button.primary{color:var(--ink);border-color:var(--ink);background:var(--acid)}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #8862db;outline-offset:4px}button:disabled{opacity:.45;box-shadow:0 1px 0 var(--ink)}[hidden]{display:none!important}
/* Scene branding is a pair of pasted paper labels. */
.scene-head{left:24px;top:24px;color:var(--ink);max-width:calc(100% - 240px);filter:drop-shadow(2px 4px 0 #1c19266b)}.scene-head small{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--acid);border:2px solid var(--ink);padding:3px 9px;font:900 10px/1.4 'Avenir Next',system-ui;letter-spacing:.09em;transform:rotate(-3deg)}.scene-head h2{width:max-content;max-width:100%;font:1000 italic 25px/1.4 'Avenir Next','PingFang SC',system-ui;margin:4px 0 8px;padding:1px 9px;color:var(--paper);background:var(--ink);transform:rotate(-1deg);letter-spacing:-.04em;text-shadow:2px 2px 0 #be3779}.scene-head p{display:inline-block;font:600 11px/1.4 system-ui;background:var(--paper);color:var(--ink);padding:4px 8px;border:2px solid var(--ink);border-radius:5px;opacity:1}
/* Raised arcade controls: the last gear remains the settings toggle. */
.camera-tools{left:20px;bottom:22px;right:auto;max-width:calc(100% - 205px);width:max-content;gap:8px;padding:8px 10px 11px;background:#272132ec;border:2px solid #fff9edd9;border-radius:20px;box-shadow:0 5px 0 var(--ink),4px 8px 0 #ff58ad80;backdrop-filter:blur(8px)}.camera-tools button{display:inline-flex;align-items:center;justify-content:center;gap:5px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:11px;font:900 12px/1.2 system-ui;padding:11px 13px;min-height:39px;box-shadow:0 4px 0 #9e90b4,0 6px 0 var(--ink),inset 0 2px 0 #fff;white-space:nowrap}.camera-tools button:hover:not(:disabled){background:#fff;transform:translateY(-2px);box-shadow:0 6px 0 #9e90b4,0 8px 0 var(--ink)}.camera-tools button:active:not(:disabled){transform:translateY(4px);box-shadow:0 0 0 #9e90b4,0 2px 0 var(--ink)}.camera-tools button.primary{background:var(--acid);color:var(--ink);border-color:var(--ink);box-shadow:0 4px 0 #89a923,0 6px 0 var(--ink),inset 0 2px 0 #f4ffa9}.camera-tools #manualToggle.primary{background:var(--pink);box-shadow:0 4px 0 #b93475,0 6px 0 var(--ink),inset 0 2px 0 #ffb7d8}.camera-tools #settingsToggle{background:var(--purple);box-shadow:0 4px 0 #6851b0,0 6px 0 var(--ink),inset 0 2px 0 #d2c4ff}.camera-tools #settingsToggle[aria-expanded=true]{background:var(--cyan);box-shadow:0 4px 0 #328b99,0 6px 0 var(--ink)}.camera-tools #overview:before{content:'▦';font-size:17px}.camera-tools #follow:before{content:'◎';font-size:17px}.camera-tools #cameraReset:before{content:'↻';font-size:19px}.camera-tools #manualToggle:before{content:'✚';font-size:14px}.camera-tools #settingsToggle span{font-size:18px}.camera-tools .kart-toggle{width:48px;height:48px;padding:3px;min-height:0;border:3px solid var(--ink);border-radius:50%;background:#ff69b4;box-shadow:0 4px 0 #af3475,0 6px 0 var(--ink),inset 0 2px 0 #ffd0e6}.camera-tools .kart-toggle[aria-expanded=true]{background:#ff69b4;box-shadow:0 0 0 2px var(--acid),0 5px 0 var(--ink)}.camera-tools .kart-toggle:hover{background:#ff8fc7}.kart-toggle img{filter:drop-shadow(1px 2px 0 #58334a55)}
/* The counter keeps its actual Three.js gold coin. */
.coin-score{top:24px;right:22px;min-width:168px;height:70px;padding:7px 16px 7px 70px;border:3px solid var(--ink);border-radius:15px;background:var(--acid);box-shadow:0 5px 0 #86a524,0 8px 0 var(--ink),4px 11px 0 #ff58ad9c;isolation:isolate}.coin-score:before{inset:4px;border:1px solid #ffffe6a3;border-radius:8px}.coin-score:after{top:auto;bottom:5px;right:7px;left:auto;width:23px;height:12px;border-radius:0;background:repeating-conic-gradient(var(--ink) 0 25%,transparent 0 50%) 0/6px 6px;opacity:.8}.coin-score small{color:#3f4327;font:900 10px/1.3 system-ui;letter-spacing:1px;text-shadow:none}.coin-score b{font:1000 italic 34px/1 system-ui;color:var(--ink);letter-spacing:-1px;text-shadow:1px 2px 0 #faffc9}.coin-score .coin-icon{left:-12px;top:-9px}.score-readout{gap:2px}
.dashboard{filter:drop-shadow(0 4px 0 var(--ink)) drop-shadow(3px 6px 0 #ff58ad9c)}.dashboard .needle{filter:drop-shadow(0 0 3px #ff58ad99)}.dashboard text{font-family:'Avenir Next',system-ui,sans-serif;font-weight:800}
/* First visit: a sticker frame, neon plaque and raised portrait tiles. */
.kart-welcome-shade{background:radial-gradient(ellipse at 50% 42%,#18132825,#161024b8);backdrop-filter:blur(4px)}.kart-picker.welcome{border:4px solid var(--ink);border-radius:24px;background:var(--paper);box-shadow:0 7px 0 var(--purple),0 11px 0 var(--ink),8px 17px 0 #1610246b;isolation:isolate}.kart-picker.welcome:before{content:'';position:absolute;pointer-events:none;left:-15px;top:39px;width:39px;height:61px;z-index:-1;transform:rotate(-15deg);background:var(--pink);clip-path:polygon(12% 0,100% 8%,66% 39%,95% 43%,3% 100%,28% 53%,0 49%)}.kart-picker.welcome:after{content:'';position:absolute;pointer-events:none;right:18px;bottom:-9px;width:83px;height:19px;border:2px solid var(--ink);background:repeating-conic-gradient(var(--ink) 0 25%,var(--paper) 0 50%) 0/12px 12px;transform:rotate(-5deg);box-shadow:2px 2px 0 var(--ink)}.welcome .kart-picker-body{padding:57px 24px 25px;background:radial-gradient(circle,#c1aedf80 1px,transparent 1.5px) right bottom/9px 9px;border-radius:19px}.welcome .kart-welcome-title{top:-4px;max-width:calc(100% - 22px);height:74px;border:3px solid var(--ink);border-radius:15px;background:var(--acid);color:var(--ink);box-shadow:0 5px 0 #8da72a,0 9px 0 var(--ink),5px 13px 0 #1c19263d;transform:translate(-50%,-50%) rotate(-2deg);font:1000 italic 29px/1.1 'Avenir Next','PingFang SC',system-ui;letter-spacing:-.04em;padding:0 31px}.welcome .kart-welcome-title:before{inset:4px;border:1px solid #fbffd8;border-radius:8px}.welcome .kart-welcome-title:after{top:-9px;right:-13px;left:auto;width:27px;height:27px;clip-path:polygon(50% 0,60% 35%,100% 50%,65% 61%,50% 100%,37% 65%,0 50%,35% 37%);border-radius:0;background:var(--pink);transform:rotate(12deg)}.kart-welcome-title span{text-shadow:1px 2px 0 #fcffda}.welcome .kart-picker-heading{margin-bottom:17px}.welcome .kart-picker-heading span{color:var(--ink);font-weight:750;font-size:12px;background:var(--paper);padding:3px 10px;transform:rotate(.5deg);border-bottom:3px solid var(--pink);text-shadow:none}.welcome .kart-portraits{gap:15px 11px;padding:13px 10px 17px;border:2px solid var(--ink);border-radius:16px;background:#e7dcf5;box-shadow:inset 0 4px 0 #ccbddc}.welcome .kart-portrait{padding:6px;border:2px solid var(--ink);border-radius:14px;background:var(--paper);box-shadow:0 4px 0 #9e8fae,0 6px 0 var(--ink),inset 0 2px 0 #fff;transition:transform .12s,box-shadow .12s,background .12s}.welcome .kart-portrait:nth-child(3n+2){background:#e4f8fa}.welcome .kart-portrait:nth-child(3n){background:#f7eed2}.welcome .kart-portrait:hover:not(:disabled){background:#ffb9dd;transform:translateY(-3px) rotate(-3deg);box-shadow:0 7px 0 #b76491,0 9px 0 var(--ink)}.welcome .kart-portrait:active:not(:disabled){transform:translateY(4px);box-shadow:0 0 0 var(--ink),0 2px 0 var(--ink)}.welcome .kart-portrait[aria-pressed=true]{background:#ff69b4;border-color:var(--ink);box-shadow:0 4px 0 #ac3975,0 6px 0 var(--ink),inset 0 0 0 3px #ffcfeb}.welcome .kart-portrait:focus-visible{outline:3px solid #f52e95;outline-offset:3px}.welcome .kart-portrait img{filter:drop-shadow(1px 3px 0 #33243c50)}
/* Compact in-game selection tray. */
.kart-picker:not(.welcome){background:var(--paper);border:3px solid var(--ink);border-radius:16px;box-shadow:0 5px 0 var(--purple),0 8px 0 var(--ink);padding:12px;bottom:115px}.kart-picker:not(.welcome) .kart-picker-heading{color:var(--ink);font-weight:900}.kart-picker:not(.welcome) .kart-picker-heading span{color:var(--muted)}.kart-picker:not(.welcome) .kart-portrait{border:2px solid var(--ink);background:#e7dcf5;box-shadow:0 3px 0 #9786ab}.kart-picker:not(.welcome) .kart-portrait[aria-pressed=true]{background:#ff69b4}.kart-portraits{scrollbar-color:#8d73b2 #e7dcf5}
/* On-screen driving pad. */
.manual-pad{padding:13px;bottom:calc(100% + 17px);background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:17px;box-shadow:0 5px 0 var(--purple),0 8px 0 var(--ink)}.manual-pad p{color:var(--ink);font-weight:800;border-left:4px solid var(--pink);padding-left:6px;font-size:11px}.camera-tools .drive-key{border:2px solid var(--ink);border-radius:11px;font-size:19px;line-height:1;min-height:0;gap:0;padding:4px;background:var(--paper);box-shadow:0 4px 0 #9b8fac,0 6px 0 var(--ink)}.camera-tools .drive-key[data-drive-key=j]{background:var(--pink);color:var(--ink);box-shadow:0 4px 0 #a93977,0 6px 0 var(--ink)}.camera-tools .drive-key.is-held{background:var(--acid);color:var(--ink);border-color:var(--ink);transform:translateY(4px);box-shadow:0 1px 0 #829b26,0 2px 0 var(--ink)}.drive-key small{font-weight:700}.drive-command{color:#58416d;background:#ede3f6;border:1px dashed #9f86b8;border-radius:6px;margin-top:13px;padding:5px 6px;font-size:11px;font-weight:700}
/* Settings read like a well-organized setup sheet, with playful controls. */
#settingsPanel{border-left:4px solid var(--ink);padding:19px 17px;background:var(--paper);color:var(--ink);scrollbar-width:thin;scrollbar-color:#ad8ac6 #f0e5f6}.settings-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:3px solid var(--ink);padding-bottom:14px;margin-bottom:15px}.settings-heading .tag{display:inline-block;color:var(--ink);background:var(--acid);padding:2px 7px;letter-spacing:.08em;transform:rotate(-2deg);font-size:9px;font-weight:900}.settings-heading h1{font-size:24px;line-height:1.2;font-weight:950;letter-spacing:-1px;margin:8px 0 0}.settings-heading #settingsClose{padding:0;width:32px;height:32px;flex-shrink:0;background:var(--pink);font:900 23px/1 system-ui;box-shadow:0 3px 0 var(--ink)}#settingsPanel a{color:#743898!important;text-decoration-thickness:1.5px;text-underline-offset:3px;font-weight:650}#localStatus{font-size:11px;font-weight:700;background:#e9def4;border:1px dashed #9981ae;border-radius:8px;padding:8px;margin:0 0 10px}#ckpt{font:10px/1.6 ui-monospace,monospace;color:#756780}#settingsPanel .buttons{gap:11px 9px;margin:17px 0 22px}#settingsPanel .buttons button{font-size:12px;padding:10px 6px}#settingsPanel button[role=switch][aria-checked=true]{background:var(--pink)}#settingsPanel .manual{background:#fffdf8;border:2px solid var(--ink);border-radius:13px;padding:13px;margin:18px 0;box-shadow:3px 4px 0 #d8c8e6}#settingsPanel .manual>b{display:inline-block;font-size:14px;font-weight:950;border-bottom:4px solid var(--acid);padding-bottom:1px;margin-bottom:4px}#settingsPanel .manual label{color:#594b66;font-size:12px;font-weight:650;margin-top:13px}#settingsPanel .manual label b{color:var(--ink);font:800 12px ui-monospace,monospace}.rate-control{background:#ede4fa;border:2px solid var(--ink);border-radius:11px;padding:10px}.rate-control label{color:var(--ink);font-size:12px;font-weight:800}.rate-control output{color:#743898;background:#fff9ed;border:1px solid #b39dc9;border-radius:5px;padding:0 5px}.muted{color:var(--muted);line-height:1.65;font-size:12px}.manual .muted{font-size:11px!important}.credits{font-size:10px;line-height:1.8;padding-top:10px;border-top:2px dashed #d1bfdf}.legend{font-size:11px;gap:9px;padding:11px 0}.event{background:#fff2c5;color:#654014;font-size:12px;border:2px solid var(--ink);border-radius:10px;box-shadow:0 3px 0 #d5b06a}.metric{gap:12px;padding:10px 0;border-bottom:1px dashed #ded3e5;font-size:11px}.metric span{color:#796983}.metric b{font:750 11px/1.5 ui-monospace,monospace;color:var(--ink)}.grip-detail{color:#776183;font-size:10px}.grip-track{background:#e9ddf0;border:1px solid var(--ink);height:9px;box-shadow:0 2px 0 #d8c6e5}.grip-track i{background:var(--acid)}
input[type=range]{appearance:none;-webkit-appearance:none;height:8px;background:#dacfdf;border:1.5px solid var(--ink);border-radius:6px;accent-color:var(--pink);margin:8px 0 12px;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:20px;background:var(--pink);border:2px solid var(--ink);border-radius:6px;box-shadow:0 2px 0 var(--ink);cursor:grab}input[type=range]::-moz-range-thumb{width:17px;height:17px;background:var(--pink);border:2px solid var(--ink);border-radius:5px;box-shadow:0 2px 0 var(--ink)}input[type=range]:active::-webkit-slider-thumb{cursor:grabbing;background:var(--acid)}input[type=checkbox]{accent-color:#8a43b8;width:16px;height:16px}select{max-width:100%;padding:9px;font-size:12px;background:#eee3f8}#replayInfo{font-size:11px}.quick button{box-shadow:0 2px 0 var(--ink)}
@media(max-width:850px){.scene-head{left:13px;top:16px;max-width:calc(100% - 180px)}.scene-head small{font-size:8px;padding:2px 5px}.scene-head h2{font-size:18px;margin-top:4px;padding:2px 5px;max-width:100%}.scene-head p{font-size:9px;max-width:175px;padding:3px 5px}.coin-score{top:17px;right:13px;min-width:135px;height:59px;padding:6px 12px 6px 57px;border-radius:12px}.coin-score small{font-size:9px}.coin-score b{font-size:29px}.coin-score .coin-icon{width:73px;height:73px;top:-9px;left:-14px}.camera-tools{bottom:14px;left:10px;max-width:calc(100% - 127px);padding:7px 7px 10px;gap:8px 6px;border-radius:17px}.camera-tools button{padding:8px 8px;font-size:11px;min-height:33px;gap:3px;border-radius:9px}.camera-tools #overview:before,.camera-tools #follow:before{font-size:14px}.camera-tools #cameraReset:before{font-size:16px}.camera-tools #settingsToggle span{font-size:16px}.camera-tools .kart-toggle{width:40px;height:40px;padding:3px}.dashboard{right:11px;bottom:16px}.manual-pad{padding:10px;bottom:calc(100% + 16px)}.drive-keys{grid-template-columns:repeat(3,40px) 47px;grid-template-rows:repeat(2,44px);gap:7px}.camera-tools .drive-key{padding:3px;font-size:18px}.kart-picker:not(.welcome){bottom:174px;width:calc(100% - 24px)}#settingsPanel{border:3px solid var(--ink);border-radius:16px 0 0 16px;box-shadow:-5px 0 0 #a28bfb55;bottom:163px;padding:16px 14px}.settings-heading{margin-bottom:12px}#settingsPanel .manual{margin:16px 0}}
@media(max-width:600px){.welcome .kart-picker-body{padding:46px 12px 18px}.welcome .kart-welcome-title{height:64px;padding:0 19px;font-size:22px;border-radius:12px}.welcome .kart-picker-heading{margin-bottom:12px}.welcome .kart-picker-heading span{font-size:10px;padding:2px 4px}.welcome .kart-portraits{gap:13px 8px;padding:10px 8px 14px}.welcome .kart-portrait{padding:5px;border-radius:11px}.kart-picker.welcome:after{width:60px;right:12px}.kart-picker.welcome:before{left:-10px;width:29px;height:48px}.welcome .kart-portrait:focus-visible{outline-offset:2px}}
@media(max-width:360px){.camera-tools{max-width:calc(100% - 127px);gap:8px 5px}.camera-tools button{font-size:10px;padding:8px 6px}.scene-head h2{font-size:16px}.coin-score{min-width:123px;padding-left:53px}.scene-head{max-width:calc(100% - 160px)}}
@media(max-height:550px){.welcome .kart-picker-body{padding-top:44px}.welcome .kart-welcome-title{height:62px;font-size:23px}.camera-tools{bottom:10px}.scene-head p{display:none}}
@media(prefers-reduced-motion:reduce){button,.welcome .kart-portrait{transition:none}}
#settingsPanel #boundaryReset:disabled{opacity:1;color:#6d527b;background:#efdfed;box-shadow:none;border-style:dashed}

/* One sliding selection plate shared by the three camera types. */
.camera-modes{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:222px;height:44px;flex-shrink:0;padding:3px;border:2px solid var(--ink);border-radius:12px;background:#dcd2e7;box-shadow:0 4px 0 #857296,0 6px 0 var(--ink),inset 0 2px 3px #71608040;isolation:isolate}.camera-slider{position:absolute;z-index:0;top:3px;bottom:3px;left:3px;width:calc((100% - 6px)/3);transform:translateX(calc(var(--camera-index)*100%));transition:transform .26s cubic-bezier(.2,.8,.2,1);background:var(--acid);border:1px solid var(--ink);border-radius:8px;box-shadow:0 2px 0 #849d22,inset 0 1px 0 #f7ffc9;pointer-events:none}.camera-tools .camera-modes button,.camera-tools .camera-modes button.primary{z-index:1;min-width:0;min-height:0;padding:6px 2px;border:0;border-radius:8px;background:transparent;color:var(--ink);box-shadow:none;font:900 12px system-ui;white-space:nowrap;gap:3px;transform:none}.camera-tools .camera-modes button:hover:not(:disabled),.camera-tools .camera-modes button:active:not(:disabled){background:#fff4;box-shadow:none;transform:none}.camera-tools .camera-modes button[aria-checked=true]{color:#17200a}.camera-tools .camera-modes #target:before{content:'⊙';font-size:18px}.camera-tools .camera-modes #follow:before,.camera-tools .camera-modes #overview:before{font-size:16px}.camera-modes button:focus-visible{outline:2px solid #a13781;outline-offset:0}
@media(max-width:850px){.camera-modes{width:190px;height:39px}.camera-tools .camera-modes button{font-size:11px}.camera-tools .camera-modes #target:before,.camera-tools .camera-modes #follow:before,.camera-tools .camera-modes #overview:before{font-size:14px}}
@media(max-width:400px){.camera-modes{width:157px;height:39px}.camera-tools .camera-modes button{font-size:10px;gap:2px}.camera-tools .camera-modes #target:before,.camera-tools .camera-modes #follow:before,.camera-tools .camera-modes #overview:before{font-size:12px}}
@media(prefers-reduced-motion:reduce){.camera-slider{transition:none}}

/* Desktop dial = previous 146 2/3 px × 1.5; keep the mobile dial unchanged. */
@media(min-width:851px){.dashboard{width:220px;height:220px}.camera-tools{max-width:calc(100% - 285px)}.camera-modes{max-width:100%;flex-shrink:1}}
@media(max-width:850px){.dashboard{width:calc(140px * 2 / 3);height:calc(140px * 2 / 3);top:100px;right:13px;bottom:auto}}

/* Screen-edge task guidance for the velocity-aligned manual camera. */
.task-edge-arrow{position:absolute;top:44%;width:56px;height:56px;z-index:12;pointer-events:none;filter:drop-shadow(0 4px 3px #0005)}
.task-edge-arrow[hidden]{display:none}
.task-edge-arrow[data-side="left"]{left:10px;transform:scaleX(-1)}
.task-edge-arrow[data-side="right"]{right:10px}
.task-edge-arrow svg{display:block;width:100%;height:100%}
.camera-modes button:disabled{cursor:not-allowed;opacity:.45}
@media(max-width:850px){.task-edge-arrow{width:43px;height:43px}.task-edge-arrow[data-side="left"]{left:5px}.task-edge-arrow[data-side="right"]{right:5px}}

.camera-modes[hidden]{display:none}
.manual-camera-modes{grid-template-columns:repeat(2,minmax(0,1fr))}
.manual-camera-modes .camera-slider{width:calc((100% - 6px)/2)}