:root{color-scheme:dark;--ink:#f5f7f8;--muted:#a7b0b6;--accent:#d9fb37;--cyan:#8ce7f0;--panel:rgba(9,17,23,.78);font-family:'Arial Narrow',Impact,'Yu Gothic UI',sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#8ec7e9}body{overscroll-behavior:none;touch-action:none}button{font:inherit;color:inherit}#game,#scene{position:fixed;inset:0;width:100%;height:100%;overflow:hidden}#scene canvas{display:block;width:100%;height:100%}.is-hidden{display:none!important}
.overlay{position:absolute;inset:0;z-index:5}.title-screen{display:flex;align-items:center;padding:clamp(24px,5vw,74px);background-image:linear-gradient(90deg,rgba(8,16,21,.76) 0%,rgba(8,16,21,.49) 38%,rgba(8,16,21,.02) 83%),linear-gradient(0deg,rgba(8,16,21,.48),transparent 60%),url('../assets/tokyo_day_reference.png');background-size:cover;background-position:center}.title-scrim{position:absolute;inset:0;background:linear-gradient(115deg,rgba(11,21,28,.22),transparent 60%);pointer-events:none}.title-content{position:relative;z-index:1;width:min(590px,65vw)}.kicker,.eyebrow{font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--accent)}.kicker{display:flex;align-items:center;gap:9px}.kicker i,.hud-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px rgba(217,251,55,.8)}h1{margin:14px 0 2px;font-size:clamp(82px,12vw,150px);line-height:.76;letter-spacing:-.035em;font-weight:900;color:#fff;text-shadow:0 4px 28px rgba(0,0,0,.18)}h1 span{color:var(--accent)}.title-jp{margin:22px 0 35px;font-family:'Zen Kaku Gothic New',sans-serif;font-size:clamp(15px,2vw,19px);font-weight:500;letter-spacing:.11em}.title-bottom{display:flex;align-items:flex-end;gap:22px}.mode-picker{min-width:142px}.mode-picker .eyebrow{display:block;margin:0 0 8px;color:#d9e1e4;font-size:9px}.mode-picker>div{display:flex;gap:5px}.mode-btn{padding:9px 13px;border:1px solid rgba(255,255,255,.32);background:rgba(7,16,22,.38);font-size:11px;font-weight:800;letter-spacing:.12em;cursor:pointer}.mode-btn.is-selected{background:var(--accent);border-color:var(--accent);color:#172026}.start-btn{display:flex;align-items:center;justify-content:space-between;gap:34px;min-width:200px;padding:13px 15px 13px 20px;border:0;background:var(--accent);color:#132027;font-size:14px;font-weight:900;letter-spacing:.12em;cursor:pointer;box-shadow:0 8px 30px rgba(0,0,0,.18);transition:transform .16s,filter .16s}.start-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}.start-btn b{font-size:23px;line-height:.7}.controls-hint{margin-top:26px;color:rgba(255,255,255,.78);font-size:10px;letter-spacing:.04em}.controls-hint span{color:var(--accent);font-weight:900;margin-right:8px}.title-stamp{position:absolute;right:clamp(22px,4vw,60px);bottom:clamp(20px,4vw,50px);font-size:42px;font-weight:900;line-height:.7;text-align:right;color:rgba(255,255,255,.87)}.title-stamp small{font-size:9px;letter-spacing:.18em;color:var(--accent)}
.hud{position:absolute;z-index:3;left:0;right:0;top:0;padding:calc(14px + env(safe-area-inset-top)) clamp(14px,3vw,36px) 0;color:#fff;pointer-events:none}.hud-brand{font-size:12px;font-weight:900;letter-spacing:.12em}.hud-dot{display:inline-block;width:6px;height:6px;margin:0 6px 1px 0}.hud-sub{margin-left:8px;color:rgba(255,255,255,.66);font-size:9px;letter-spacing:.18em}.hud-row{display:flex;align-items:flex-end;gap:11px;margin-top:10px}.time-card,.speed-card,.gear-card{background:var(--panel);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.13);box-shadow:0 7px 24px rgba(0,0,0,.14)}.time-card{min-width:152px;padding:8px 12px 7px}.eyebrow{display:block;font-size:8px;letter-spacing:.19em;color:#b7c2c8}.time-card strong{display:block;margin-top:1px;font-size:30px;line-height:1;font-weight:700;letter-spacing:.04em;font-variant-numeric:tabular-nums}.time-card small{display:block;margin-top:5px;color:var(--accent);font-size:9px;letter-spacing:.15em}.speed-card{display:flex;align-items:baseline;gap:4px;padding:4px 12px 2px}.speed-card strong{font-size:50px;line-height:1;font-weight:800;min-width:74px;text-align:right;font-variant-numeric:tabular-nums}.speed-card span{font-size:10px;color:#d9e2e6;letter-spacing:.12em}.gear-card{width:90px;padding:6px 9px}.gear-card small{display:block;color:#a7b0b6;font-size:8px;letter-spacing:.16em}.gear-card strong{font-size:22px;line-height:1.1}.rpm-track{height:3px;background:rgba(255,255,255,.17);margin-top:4px}.rpm-track i{display:block;width:0;height:100%;background:var(--accent);box-shadow:0 0 9px var(--accent)}.progress-track{position:relative;height:3px;max-width:360px;margin-top:9px;background:rgba(255,255,255,.28)}.progress-track i{display:block;height:100%;width:0;background:var(--accent)}.progress-marker{position:absolute;right:0;top:-3px;width:1px;height:9px;background:#fff}.pause-btn{position:absolute;pointer-events:auto;right:clamp(14px,3vw,36px);top:calc(15px + env(safe-area-inset-top));width:38px;height:38px;border:1px solid rgba(255,255,255,.35);background:rgba(9,17,23,.5);font-size:16px;cursor:pointer}.grip-readout{position:absolute;z-index:3;top:calc(94px + env(safe-area-inset-top));right:clamp(14px,3vw,36px);display:flex;align-items:center;gap:8px;padding:7px 10px;background:rgba(9,17,23,.55);font-size:9px;letter-spacing:.1em}.grip-readout>span{color:#c4cdd1}.grip-readout>i{display:block;width:56px;height:3px;background:rgba(255,255,255,.22)}.grip-readout b{display:block;width:100%;height:100%;background:var(--accent);transform-origin:left}.grip-readout strong{min-width:33px;text-align:right;font-variant-numeric:tabular-nums;color:#fff}
.compact-overlay{display:grid;place-items:center;background:rgba(6,12,17,.48);backdrop-filter:blur(6px)}.modal-card{width:min(400px,calc(100vw - 36px));padding:30px;background:rgba(12,22,29,.92);border:1px solid rgba(255,255,255,.15);box-shadow:0 20px 80px rgba(0,0,0,.35)}.modal-card h2{margin:10px 0 0;font-size:56px;line-height:.9;font-weight:900;letter-spacing:-.02em}.modal-card p{margin:12px 0 24px;color:#b9c3c8;font-family:'Zen Kaku Gothic New',sans-serif;font-size:13px}.modal-card .start-btn{width:100%;margin-top:22px}.text-btn{display:block;margin:13px auto 0;background:transparent;border:0;color:#b8c4c9;font-size:10px;font-weight:800;letter-spacing:.16em;cursor:pointer}.result-time-label{margin:25px 0 2px!important;color:var(--accent)!important;font-size:9px!important;letter-spacing:.18em}.result-time{display:block;font-size:48px;font-variant-numeric:tabular-nums;line-height:1}.best-line{margin-top:10px;color:#b7c2c8;font-size:10px;letter-spacing:.14em}.toast{position:absolute;z-index:4;left:50%;top:27%;transform:translate(-50%,-8px);padding:9px 15px;background:var(--accent);color:#111b20;font-size:12px;font-weight:900;letter-spacing:.12em;transition:opacity .25s,transform .25s}.loading{position:absolute;z-index:8;inset:0;display:grid;place-items:center;background:#111b22;color:#d8e1e5;font-size:11px;font-weight:800;letter-spacing:.22em;transition:opacity .5s}.loading span{position:absolute;width:22px;height:22px;border:2px solid rgba(255,255,255,.2);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;transform:translateY(-28px)}@keyframes spin{to{rotate:360deg}}
.touch-controls{position:absolute;z-index:4;left:0;right:0;bottom:calc(12px + env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:flex-end;padding:0 clamp(12px,3vw,30px);pointer-events:none}.steer-cluster,.pedal-cluster{display:flex;align-items:flex-end;gap:9px;pointer-events:auto}.touch-btn{display:grid;place-items:center;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;background:rgba(13,24,31,.52);backdrop-filter:blur(8px);box-shadow:0 5px 18px rgba(0,0,0,.22)}.touch-btn:active,.touch-btn.is-pressed{background:rgba(217,251,55,.82);color:#142027;transform:scale(.97)}.steer-btn{width:clamp(58px,10vw,82px);height:clamp(58px,10vw,82px);font-family:Arial,sans-serif;font-size:40px;line-height:1;border-radius:50%}.brake-btn,.gas-btn{width:clamp(66px,11vw,92px);height:clamp(68px,12vw,98px);border-radius:10px}.brake-btn{background:rgba(30,37,42,.68)}.gas-btn{background:rgba(217,251,55,.86);color:#152027;border-color:rgba(217,251,55,.9)}.touch-btn span{align-self:end;font-size:8px;font-weight:900;letter-spacing:.11em}.touch-btn b{align-self:start;font-size:17px;line-height:1.15}.toast.is-hidden{opacity:0;transform:translate(-50%,0)}
@media(max-width:680px){.title-screen{align-items:flex-start;padding:calc(35px + env(safe-area-inset-top)) 22px 24px;background-position:58% center}.title-content{width:100%;max-width:430px;margin-top:auto;margin-bottom:clamp(65px,14vh,120px)}h1{font-size:clamp(76px,19vw,115px)}.title-jp{margin:17px 0 26px}.title-bottom{gap:12px;align-items:flex-end}.mode-picker{min-width:114px}.mode-btn{padding:8px 10px}.start-btn{min-width:0;flex:1;gap:12px;padding:13px 12px 13px 15px;font-size:12px}.controls-hint{font-size:8px;line-height:1.6;margin-top:17px;max-width:300px}.title-stamp{font-size:34px}.title-stamp small{font-size:8px}.hud{padding-top:calc(9px + env(safe-area-inset-top))}.hud-brand{font-size:10px}.hud-row{gap:6px;margin-top:6px}.time-card{min-width:123px;padding:6px 8px}.time-card strong{font-size:25px}.speed-card{padding:4px 7px 2px}.speed-card strong{font-size:40px;min-width:57px}.gear-card{width:65px;padding:5px 7px}.gear-card strong{font-size:19px}.progress-track{max-width:250px;margin-top:7px}.pause-btn{top:calc(10px + env(safe-area-inset-top));width:34px;height:34px}.grip-readout{top:calc(80px + env(safe-area-inset-top));right:14px;gap:6px;padding:6px 7px}.grip-readout>i{width:36px}.touch-controls{padding:0 12px;bottom:calc(10px + env(safe-area-inset-bottom))}.steer-cluster,.pedal-cluster{gap:7px}.steer-btn{width:clamp(56px,15vw,74px);height:clamp(56px,15vw,74px)}.brake-btn,.gas-btn{width:clamp(62px,17vw,82px);height:clamp(65px,18vw,88px)}}
@media(max-height:460px) and (orientation:landscape){.title-screen{padding:18px 34px}.title-content{margin:0;width:56vw}.title-screen h1{font-size:72px}.title-jp{margin:10px 0 16px}.controls-hint{margin-top:11px}.title-stamp{right:28px;bottom:18px}.hud-row{margin-top:4px}.touch-controls{bottom:8px}.steer-btn{height:56px;width:56px}.brake-btn,.gas-btn{height:60px;width:62px}.grip-readout{top:83px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.sound-btn{position:absolute;z-index:1;pointer-events:auto;right:calc(clamp(14px,3vw,36px) + 48px);top:calc(15px + env(safe-area-inset-top));height:38px;padding:0 10px;border:1px solid rgba(255,255,255,.35);background:rgba(9,17,23,.5);font-size:9px;font-weight:800;letter-spacing:.1em;cursor:pointer}
@media(max-height:460px) and (orientation:landscape){.sound-btn{top:calc(8px + env(safe-area-inset-top));height:32px}}
@media(max-width:680px){.sound-btn{top:calc(4px + env(safe-area-inset-top));height:24px;font-size:8px;padding:0 7px}.hud .pause-btn{top:calc(4px + env(safe-area-inset-top));height:24px;width:28px;right:clamp(14px,3vw,36px);font-size:12px}.grip-readout{top:calc(108px + env(safe-area-inset-top))}}

.modal-card h2{font-size:48px;white-space:nowrap}
.handbrake-btn{width:clamp(52px,10vw,72px);height:clamp(62px,11vw,86px);border-radius:10px;background:rgba(190,72,47,.78);border-color:rgba(255,190,160,.42)}@media(max-width:680px){.handbrake-btn{width:clamp(48px,13vw,58px);height:clamp(58px,16vw,76px)}}@media(max-height:460px) and (orientation:landscape){.handbrake-btn{height:56px;width:52px}}