:root{--ink:#243a33;--paper:#fffaf0;--accent:#2a9d8f;--pink:#e86f8a;--gold:#ffc94d;--font:"Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#0d2230;font-family:var(--font);color:#fff;-webkit-user-select:none;user-select:none;touch-action:none}
#stage{position:fixed;inset:0}
#stage canvas{display:block;width:100%;height:100%}
#speedlines{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .25s}
[hidden]{display:none!important}
.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;gap:28px;padding:24px}
.screen.dim{background:rgba(8,24,30,.55);backdrop-filter:blur(3px)}
#loading{flex-direction:column;background:radial-gradient(circle at 50% 35%,#2e8fa3,#0e3344 70%)}
.logo{display:flex;flex-direction:column;align-items:center;line-height:1;text-shadow:0 4px 0 rgba(0,0,0,.18)}
.logo-top{font-size:26px;font-weight:800;letter-spacing:.3em;color:#ffe9a8}
.logo-main{font-size:64px;font-weight:900;letter-spacing:.06em;margin:.14em 0;background:linear-gradient(180deg,#fff 30%,#bff3e8);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #1b6f73)}
.logo-sub{font-size:15px;font-weight:800;letter-spacing:.5em;color:#8fe3d4}
.bar{width:min(420px,70vw);height:12px;border-radius:8px;background:rgba(255,255,255,.18);margin:32px 0 12px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffe07a,#7ee0c3);border-radius:8px;transition:width .2s}
#load-text{opacity:.85;font-size:14px}
#title{align-items:stretch;justify-content:center;background:linear-gradient(90deg,rgba(8,30,40,.55),rgba(8,30,40,0) 60%)}
.title-card{align-self:center;width:min(560px,94vw);background:rgba(255,250,240,.93);color:var(--ink);border-radius:26px;padding:26px 30px;box-shadow:0 18px 50px rgba(0,0,0,.28)}
.title-card .logo-main{font-size:52px;filter:drop-shadow(0 3px 0 #1b6f73);background:linear-gradient(180deg,#2a9d8f 20%,#1b6f73);-webkit-background-clip:text;background-clip:text}
.title-card .logo-top{color:#e86f5a}.title-card .logo-sub{color:#6aa89c}
.course-info{margin:16px 0 10px;font-size:13px}
#course-meta{font-weight:800;color:#3f6f62;margin-bottom:6px}
#course-list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
#course-list li{display:flex;align-items:center;gap:6px;font-weight:700}
#course-list li i{width:10px;height:10px;border-radius:50%;flex:none}
#course-list li small{margin-left:auto;font-weight:600;color:#7a8a80;font-variant-numeric:tabular-nums}
.options{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.opt{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.opt-label{width:64px;font-weight:800;font-size:14px;color:#3f6f62}
.opt-note{font-size:12px;color:#6d7d74;width:100%;padding-left:76px}
.swatches{display:flex;gap:8px}
.swatches button{width:30px;height:30px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px #cfd8d2;cursor:pointer;padding:0}
.swatches button[aria-pressed=true]{box-shadow:0 0 0 3px var(--accent)}
.seg{display:flex;background:#e7ede8;border-radius:12px;padding:3px}
.seg button{border:0;background:transparent;padding:7px 14px;border-radius:9px;font:inherit;font-weight:800;color:#56766b;cursor:pointer}
.seg button[aria-pressed=true]{background:#fff;color:var(--accent);box-shadow:0 2px 6px rgba(0,0,0,.12)}
.best-line{font-size:15px;margin:6px 0 12px;color:#3f6f62}.best-line b{font-size:22px;color:#e86f5a;font-variant-numeric:tabular-nums;margin-left:8px}
.big-btn{display:block;width:100%;border:0;border-radius:18px;padding:16px;font:inherit;font-size:24px;font-weight:900;letter-spacing:.2em;color:#fff;background:linear-gradient(180deg,#39c0a9,#23877a);box-shadow:0 6px 0 #16655b;cursor:pointer;transition:transform .08s}
.big-btn:active{transform:translateY(4px);box-shadow:0 2px 0 #16655b}
.hint{text-align:center;font-size:12px;color:#7a8a80;margin:10px 0 0}
.controls-card{align-self:center;width:min(300px,90vw);background:rgba(10,32,40,.72);border-radius:22px;padding:20px 22px;font-size:14px;backdrop-filter:blur(4px)}
.controls-card h3{margin:0 0 10px;color:#ffe9a8}
.controls-card dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0}
.controls-card dt{font-weight:800;color:#8fe3d4;white-space:nowrap}.controls-card dd{margin:0}
.tip{margin:14px 0 0;line-height:1.6;font-size:13px}.tip b{color:#ff9fc0}.tip.small{font-size:11px;opacity:.75}
@media (max-width:900px){.controls-card{display:none}}
/* ---------- HUD */
#hud{position:fixed;inset:0;pointer-events:none;font-variant-numeric:tabular-nums}
.panel{background:rgba(10,30,38,.5);border-radius:18px;padding:12px 16px;backdrop-filter:blur(3px)}
#timer{position:absolute;left:18px;top:16px;min-width:230px;text-shadow:0 2px 4px rgba(0,0,0,.35)}
.t-label{font-size:12px;font-weight:800;letter-spacing:.3em;color:#8fe3d4}
.t-main{font-size:42px;font-weight:900;line-height:1.05}
.t-row{display:flex;justify-content:space-between;font-size:13px;margin-top:2px;color:#cfe}
.t-row b{color:#ffe07a}
#t-sectors{list-style:none;margin:8px 0 0;padding:0;font-size:13px}
#t-sectors li{display:flex;gap:8px;align-items:center;padding:2px 0;opacity:.55}
#t-sectors li.done{opacity:1}#t-sectors li.now{opacity:1;font-weight:800}
#t-sectors li i{width:8px;height:8px;border-radius:50%}
#t-sectors li span{flex:1;white-space:nowrap}
#t-sectors li em{font-style:normal;font-weight:800}
.faster{color:#6dffa9}.slower{color:#ff8c8c}.purple{color:#e0a3ff}
#minimap{position:absolute;right:16px;top:14px;width:240px;height:200px;background:rgba(10,30,38,.42);border-radius:18px}
.meisho{position:absolute;left:50%;top:19%;transform:translate(-50%,-12px);text-align:center;opacity:0;transition:opacity .5s,transform .5s;text-shadow:0 3px 10px rgba(0,0,0,.45)}
.meisho.show{opacity:1;transform:translate(-50%,0)}
.m-sector{font-size:14px;font-weight:900;letter-spacing:.4em;color:#ffe07a}
.m-name{font-size:48px;font-weight:900;letter-spacing:.08em;padding:2px 26px;border-bottom:4px solid currentColor}
.m-sub{font-size:16px;font-weight:700;margin-top:6px;color:#e6fff6}
.split{position:absolute;left:50%;top:30%;transform:translateX(-50%);font-size:34px;font-weight:900;padding:8px 22px;border-radius:14px;background:rgba(10,30,38,.55);opacity:0;transition:opacity .3s}
.split.show{opacity:1}
.split small{display:block;font-size:13px;text-align:center;color:#cfe;letter-spacing:.2em}
#center-msg{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);font-size:120px;font-weight:900;text-shadow:0 6px 0 rgba(0,0,0,.25),0 0 30px rgba(255,255,255,.4)}
#center-msg.pop{animation:pop .8s ease-out forwards}
@keyframes pop{0%{transform:translate(-50%,-50%) scale(1.8);opacity:0}25%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-50%) scale(.92);opacity:.0}}
#center-msg.go{color:#ffe07a}
#warn{position:absolute;left:50%;top:60%;transform:translateX(-50%);font-size:26px;font-weight:900;color:#ffd0d0;text-shadow:0 2px 8px rgba(0,0,0,.6)}
#speedo{position:absolute;right:14px;bottom:10px;width:220px;height:220px}
#speedo canvas{width:100%;height:100%}
#view-label{position:absolute;right:240px;bottom:24px;font-size:13px;opacity:0;transition:opacity .4s;background:rgba(10,30,38,.5);padding:6px 12px;border-radius:10px}
#view-label.show{opacity:1}
#flash{position:fixed;inset:0;pointer-events:none;background:#fff;opacity:0}
#flash.on{animation:flash .5s ease-out}
@keyframes flash{0%{opacity:.55}100%{opacity:0}}
/* ---------- menus */
.menu-card{width:min(380px,92vw);background:rgba(255,250,240,.95);color:var(--ink);border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:10px;box-shadow:0 18px 50px rgba(0,0,0,.3)}
.menu-card.wide{width:min(540px,94vw)}
.menu-card h2{margin:0 0 6px;text-align:center;letter-spacing:.3em}
.menu-card button:not(.big-btn){border:0;border-radius:14px;padding:12px;font:inherit;font-weight:800;font-size:16px;background:#e7ede8;color:#3f6f62;cursor:pointer}
.slider{display:flex;align-items:center;gap:10px;font-weight:800;color:#3f6f62}.slider input{flex:1;accent-color:var(--accent)}
.record{text-align:center;font-size:26px;font-weight:900;color:#e86f5a;letter-spacing:.15em;animation:glow 1s infinite alternate}
@keyframes glow{from{transform:scale(1)}to{transform:scale(1.06)}}
.res-time{text-align:center;font-size:58px;font-weight:900;font-variant-numeric:tabular-nums}
.res-diff{text-align:center;font-weight:800;font-size:18px;margin-top:-6px}
#res-table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
#res-table td{padding:5px 6px;border-bottom:1px solid #e3e8e4}#res-table td:nth-child(n+2){text-align:right}
#res-table i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;box-shadow:0 0 0 1.5px #9aa8a0}
.res-buttons{display:flex;gap:10px;margin-top:8px}.res-buttons>*{flex:1}
/* ---------- touch */
#touch{position:absolute;inset:0;pointer-events:none}
#touch button{pointer-events:auto;border:0;border-radius:50%;background:rgba(255,255,255,.22);color:#fff;font:inherit;font-weight:900;backdrop-filter:blur(2px)}
#touch button.on{background:rgba(255,255,255,.5)}
.t-left{position:absolute;left:18px;bottom:24px;display:flex;gap:14px}.t-left button{width:84px;height:84px;font-size:30px}
.t-right{position:absolute;right:250px;bottom:24px;display:flex;gap:12px;align-items:flex-end}
.t-gas{width:92px;height:92px;background:rgba(80,220,170,.35)!important}.t-brake{width:74px;height:74px}.t-drift{width:70px;height:70px;font-size:12px}
.t-pause{position:absolute;left:50%;top:10px;transform:translateX(-50%);width:44px;height:44px}
@media (max-width:760px){#timer{transform:scale(.8);transform-origin:left top}#minimap{width:150px;height:125px}#speedo{width:150px;height:150px}.t-right{right:160px}.m-name{font-size:32px}#center-msg{font-size:80px}}
.callout{position:absolute;left:50%;bottom:120px;transform:translate(-50%,10px);display:flex;align-items:baseline;gap:10px;padding:10px 20px;border-radius:14px;background:rgba(255,250,240,.9);color:var(--ink);opacity:0;transition:opacity .5s,transform .5s;box-shadow:0 6px 20px rgba(0,0,0,.2);white-space:nowrap}
.callout.show{opacity:1;transform:translate(-50%,0)}
.c-side{font-size:13px;font-weight:900;color:#fff;background:#2a9d8f;border-radius:8px;padding:2px 8px}
.c-name{font-size:22px}.c-note{font-size:13px;color:#5b6f66}
/* ---------- 4台レース */
.pos{position:absolute;left:18px;top:334px;display:flex;align-items:baseline;gap:4px;padding:8px 18px;text-shadow:0 2px 6px rgba(0,0,0,.4)}
.pos small{font-size:12px;font-weight:900;letter-spacing:.2em;color:#8fe3d4;margin-right:6px}
.pos .p-now{font-size:64px;font-weight:900;line-height:1}.pos .p-all{font-size:24px;font-weight:800;opacity:.8}
.pos.first .p-now{color:#ffe07a}
.standings{position:absolute;right:16px;top:224px;width:240px;list-style:none;margin:0;padding:8px 12px;font-size:14px}
.standings li{display:flex;align-items:center;gap:8px;padding:3px 0}
.standings li b{width:18px;text-align:right}.standings li i{width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,.8);flex:none}
.standings li span{flex:1;white-space:nowrap}.standings li em{font-style:normal;font-weight:800;color:#cfe}
.standings li.me{font-weight:900;color:#ffe07a}.standings li.me em{color:#ffe07a}
.pos-msg{position:absolute;left:50%;top:36%;transform:translate(-50%,0);font-size:40px;font-weight:900;color:#6dffa9;text-shadow:0 3px 10px rgba(0,0,0,.5);opacity:0;pointer-events:none}
.pos-msg.down{color:#ffb3b3}
.pos-msg.pop{animation:posPop 1.4s ease-out forwards}
@keyframes posPop{0%{opacity:0;transform:translate(-50%,10px) scale(1.3)}15%{opacity:1;transform:translate(-50%,0) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-8px)}}
.res-place{text-align:center;font-size:44px;font-weight:900;color:#2a9d8f;letter-spacing:.1em}
.res-place.win{color:#e8a200;animation:glow 1s infinite alternate}
#res-table tr.me td{font-weight:900;color:#e86f5a}
@media (max-width:760px){.standings{top:140px;width:170px;font-size:12px}.pos .p-now{font-size:44px}}
.pwa-toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:rgba(10,30,38,.88);color:#fff;padding:10px 18px;border-radius:14px;font-size:14px;font-weight:700;z-index:30;box-shadow:0 6px 20px rgba(0,0,0,.3)}
#app-version{opacity:.7;margin-left:8px}