*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:none}
html,body{margin:0;height:100%;background:#05060d;color:#eaf2ff;font-family:system-ui,-apple-system,"Segoe UI","Hiragino Sans","Yu Gothic UI",sans-serif;overflow:hidden}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block}
#flash{position:fixed;inset:0;pointer-events:none;opacity:0;background:#fff;transition:opacity .5s ease-out}
#hud{position:fixed;inset:0;pointer-events:none;font-variant-numeric:tabular-nums;text-shadow:0 0 12px #0008}
.hud-top{display:flex;justify-content:space-between;padding:calc(10px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left))}
.hud-top .center{text-align:center}.hud-top .right{text-align:right}
.lbl{display:block;font-size:11px;letter-spacing:.2em;color:#8fb4ff}
.hud-top b{font-size:clamp(22px,4.2vw,40px);font-weight:700}
#life{color:#ff5b7a;letter-spacing:.1em}
.combo{position:absolute;left:50%;top:18%;transform:translateX(-50%);font-size:clamp(20px,4vw,38px);font-weight:800;color:#ffd24a;opacity:0;transition:opacity .15s}
.combo.on{opacity:1}
.pop{position:absolute;left:50%;top:30%;transform:translateX(-50%) scale(1);font-size:clamp(26px,5.5vw,56px);font-weight:900;color:#7dfcff;opacity:0;white-space:nowrap}
.pop.show{animation:pop .75s ease-out}
.pop.crash{color:#ff4d5e}
@keyframes pop{0%{opacity:0;transform:translateX(-50%) scale(.6)}15%{opacity:1;transform:translateX(-50%) scale(1.15)}100%{opacity:0;transform:translateX(-50%) translateY(-40px) scale(1)}}
.hud-bottom{position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:baseline;gap:6px}
.hud-bottom b{font-size:clamp(34px,7vw,64px);font-style:italic}.hud-bottom span{color:#8fb4ff}
#fps{position:absolute;left:8px;bottom:8px;font:12px monospace;color:#8f8}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(ellipse at center,#0b1230cc,#02030acc);text-align:center;padding:16px}
.screen[hidden],#hud[hidden],#touch[hidden],#rotate[hidden]{display:none}
h1{margin:0;font-size:clamp(36px,9vw,92px);letter-spacing:.12em;font-style:italic;background:linear-gradient(90deg,#7dfcff,#ff4fd8);-webkit-background-clip:text;background-clip:text;color:transparent}
h2{margin:0;font-size:clamp(24px,5vw,44px);letter-spacing:.2em}
.sub{margin:0;font-size:clamp(14px,2.4vw,22px);color:#c9d6ff}
.how{list-style:none;margin:0;padding:0;font-size:clamp(12px,1.9vw,16px);color:#aab8e8;line-height:1.8}
.muted{margin:0;font-size:12px;color:#7d8ab8}
.primary{pointer-events:auto;font:inherit;font-weight:800;font-size:clamp(18px,3vw,26px);letter-spacing:.2em;padding:12px 44px;border:2px solid #7dfcff;border-radius:999px;background:#7dfcff22;color:#eaffff;cursor:pointer;box-shadow:0 0 24px #7dfcff55}
.primary:active{background:#7dfcff55}
dl{display:grid;grid-template-columns:auto auto;gap:6px 28px;margin:0;font-size:clamp(14px,2.4vw,20px)}
dt{color:#8fb4ff;text-align:right}dd{margin:0;text-align:left;font-weight:700}
.touch-only{display:none}
body.is-touch .touch-only{display:list-item}body.is-touch .kb{display:none}
#touch{position:fixed;inset:0;pointer-events:none}
.pad{position:absolute;bottom:calc(2px + env(safe-area-inset-bottom));display:flex;gap:4px}
.pad.left{left:calc(6px + env(safe-area-inset-left))}.pad.right{right:calc(6px + env(safe-area-inset-right));gap:2px}
/* Cockpit buttons (steer / BRAKE / ACCEL share one language): the <button> is a transparent TOUCH AREA (--pw/--pa x --ph); the visible
   panel is a smaller polygon drawn inside it (::before = neon outline, ::after = dark glass), so the face is compact while the finger
   target is not, and neighbouring faces never touch. Pressed = tinted fill + brighter glow + a small push in. */
.pad button{--c:#35d6ff;--g:#35d6ff99;--fx:7px;--fy:5px;--poly:polygon(14% 0,86% 0,100% 50%,86% 100%,14% 100%,0 50%);
  position:relative;pointer-events:auto;touch-action:none;font:inherit;font-weight:900;color:#eaffff;padding:0;border:0;background:transparent;
  display:flex;align-items:center;justify-content:center;width:var(--pw);height:var(--ph);font-size:clamp(13px,3.7vh,18px);letter-spacing:.06em;
  filter:drop-shadow(0 0 3px var(--g));transition:transform .07s,filter .07s;-webkit-tap-highlight-color:transparent}
.pad button::before,.pad button::after{content:"";position:absolute;clip-path:var(--poly);transition:background .07s}
.pad button::before{inset:var(--fy) var(--fx);background:var(--c)}
.pad button::after{inset:calc(var(--fy) + 1.5px) calc(var(--fx) + 1.5px);background:linear-gradient(180deg,#1a2a52e0 0%,#0a1230f0 60%,#060a1cf5 100%)}
.pad button>*{position:relative;z-index:2}
.pad button.down{transform:translateY(2px) scale(.96);filter:drop-shadow(0 0 7px var(--c))}
.pad button.down::after{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 55%,#0a1230),color-mix(in srgb,var(--c) 22%,#0a1230))}
.pad button.down svg{stroke:#fff}
.pad button svg{width:clamp(22px,4.6vw,34px);height:auto;fill:none;stroke:var(--c);stroke-width:6;stroke-linecap:square;stroke-linejoin:miter;filter:drop-shadow(0 0 3px var(--g));transition:stroke .07s}
.pad button .lab{display:block;padding-bottom:7px;position:relative}
.pad button .lab::after{content:"";position:absolute;left:8%;right:8%;bottom:0;height:2px;background:var(--c);box-shadow:0 0 5px var(--g)}
#t-left{--poly:polygon(20% 0,92% 0,100% 18%,100% 82%,92% 100%,20% 100%,0 50%)}
#t-right{--poly:polygon(80% 0,8% 0,0 18%,0 82%,8% 100%,80% 100%,100% 50%)}
#t-brake{--c:#ff4d6a;--g:#ff4d6a99}
#t-accel{--c:#3d9bff;--g:#3d9bff99;width:var(--pa)}
#rotate{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#02030aee;font-size:20px;z-index:10}

.tilt-opts{display:none}body.tilt-mode .tilt-opts{display:flex}
.ctl-row{display:flex;gap:10px;align-items:center;justify-content:center}
.ctl-label{font-size:12px;letter-spacing:.12em;color:#8fa0d0;white-space:nowrap}
.seg{display:inline-flex;border:1px solid #7dfcff88;border-radius:999px;overflow:hidden;background:#0b1a3a99}
.seg-btn{pointer-events:auto;font:inherit;font-weight:700;font-size:13px;padding:8px 18px;color:#9fb4dd;background:transparent;border:0;touch-action:manipulation;white-space:nowrap}
.seg-btn small{font-size:10px;margin-left:6px;opacity:.75;font-weight:600}
.seg-btn[aria-checked="true"]{background:#7dfcff33;color:#fff;box-shadow:inset 0 0 0 1px #7dfcffaa}
#tilt-status:empty{display:none}
body.is-touch:not(.tilt-mode) .tilt-help,body.tilt-mode .btn-help{display:none}
.touch-only-block{display:none}
body.is-touch .touch-only-block{display:block}
.row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.chip{pointer-events:auto;font:inherit;font-weight:700;font-size:13px;padding:8px 14px;border-radius:999px;border:1px solid #7dfcff88;background:#0b1a3a99;color:#eaffff}
.recenter{position:absolute;top:calc(56px + env(safe-area-inset-top));right:calc(14px + env(safe-area-inset-right));display:none}
body.tilt-on .recenter{display:block}
body.tilt-on .pad.left{display:none}
@media (max-height:460px){
  .screen{gap:6px;padding:6px}
  h1{font-size:clamp(28px,11vh,56px)}
  .sub{font-size:13px}.how{font-size:11px;line-height:1.5}
  .primary{padding:8px 34px;font-size:18px}
  .muted{font-size:10px}
  dl{font-size:13px;gap:3px 20px}
}
.recenter{top:calc(84px + env(safe-area-inset-top))}
/* ---- iPhone landscape: Safari bars can leave only ~250px of height. Keep controls compact and the view clear. */
html,body{position:fixed;inset:0;width:100%;height:100%;overscroll-behavior:none}
#safari-hint{position:fixed;left:50%;transform:translateX(-50%);top:calc(4px + env(safe-area-inset-top));z-index:5;display:flex;align-items:flex-start;gap:8px;
  width:min(94vw,640px);padding:5px 8px;border-radius:10px;background:#0b1a3ae6;border:1px solid #7dfcff55;font-size:11px;line-height:1.35;color:#cfe0ff}
#safari-hint small{display:block;margin-top:2px;color:#8fa4d0;font-size:10px}
#safari-hint i{font-style:normal;border:1px solid #7dfcff66;border-radius:4px;padding:0 3px}
#safari-hint .chip{padding:0 9px;font-size:14px;line-height:22px;flex:none}
#safari-hint[hidden]{display:none}
@media (max-height:320px){
  .hud-top b{font-size:20px}.lbl{font-size:9px}
  .hud-bottom b{font-size:30px}
  .recenter{top:calc(64px + env(safe-area-inset-top))}
  .pop{top:22%;font-size:24px}.combo{top:14%;font-size:18px}
}
.pop.double{color:#ffd24a;font-size:clamp(30px,6.5vw,66px);text-shadow:0 0 22px #ffb300aa}

/* very short landscape viewports (Safari with bars): free room for the hint and keep START visible */
@media (max-height:320px){ body:has(#safari-hint:not([hidden])) #title{padding-top:46px} body:has(#safari-hint:not([hidden])) #title .sub, body:has(#safari-hint:not([hidden])) #title > .muted:last-child{display:none} }

/* ---- black-comedy driver: subtitle bubble. Bottom centre, under the player's car: where the eyes already are while driving.
   It lives in the free strip BETWEEN the touch pads (their widths are shared as variables), so it never covers a control.
   The road ahead (centre/upper) stays free; the speed readout moved up under SCORE to make room. */
:root{--pw:clamp(84px,12vw,120px);--pa:clamp(96px,14vw,136px);--ph:clamp(64px,13vh,84px)}
#quipwrap{position:absolute;bottom:calc(12px + env(safe-area-inset-bottom));left:calc(14px + env(safe-area-inset-left));right:calc(14px + env(safe-area-inset-right));display:flex;justify-content:center;pointer-events:none}
body.is-touch #quipwrap{--inset:max(2 * var(--pw), var(--pw) + var(--pa));left:calc(24px + env(safe-area-inset-left) + var(--inset));right:calc(24px + env(safe-area-inset-right) + var(--inset))}   /* symmetric: centred on the screen, clear of both pad groups */
.quip{width:max-content;max-width:100%;text-align:center;padding:6px 16px 8px;border-radius:16px;background:#070b1cd9;border:2px solid #ff4fd8;box-shadow:0 0 18px #ff4fd855;color:#fff;font-weight:900;font-size:clamp(17px,3vw,32px);line-height:1.25;opacity:0;transform:translateY(6px);transition:opacity .15s,transform .15s;text-shadow:0 2px 0 #000a}
.quip::before{content:"俺";display:inline-block;margin-right:8px;padding:0 6px;border-radius:6px;background:#ff4fd8;color:#190522;font-size:.62em;font-weight:900;vertical-align:.12em}
.quip.show{opacity:1;transform:none}
.quip.loud{border-color:#ff4d5e;background:#3a0a14e6;box-shadow:0 0 18px #ff4d5e66}
/* speed readout: top-left under SCORE (was bottom centre, where the subtitle now is) */
.hud-bottom{left:calc(16px + env(safe-area-inset-left));bottom:auto;top:calc(10px + env(safe-area-inset-top) + 17px + 1.25 * clamp(22px,4.2vw,40px));transform:none}   /* = just below the SCORE number */
.hud-bottom b{font-size:clamp(20px,3.6vw,34px)}
@media (max-height:460px){
  :root{--pw:clamp(72px,10.5vw,92px);--pa:clamp(82px,12vw,104px);--ph:clamp(50px,16vh,62px)}
  .quip{font-size:clamp(16px,5.2vh,24px);padding:4px 12px 6px}
  .hud-bottom b{font-size:22px}
}
@media (max-height:320px){ .hud-bottom{top:calc(8px + env(safe-area-inset-top) + 36px)} .hud-bottom b{font-size:18px} }

#diag{position:fixed;left:0;right:0;top:0;z-index:20;background:#000c;font:10px monospace;color:#8f8}
#diag .bar{display:flex;gap:6px;padding:4px}
#diag textarea{width:100%;height:30vh;background:transparent;color:#8f8;border:0;font:10px monospace;user-select:text;-webkit-user-select:text;touch-action:auto}
#diag.fold textarea{display:none}

/* ---- result: two tiers, laid out after the reference mock-up.
   Top = 称号 as the hero (centred; Lv chip + end tag small above, quip small below).
   Bottom = ONE floating band: スコア(largest) | ニアミス | 最大コンボ | 衝突 | 走行距離 | もう一度 (right). Never back to left/right columns. */
#result{display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:0;padding:0;overflow:hidden;text-align:center}
#result[hidden]{display:none}
.res-main{container-type:inline-size;flex:1 1 0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(8px,3vh,36px) max(clamp(18px,5vw,72px),env(safe-area-inset-right)) clamp(4px,1vh,12px) max(clamp(18px,5vw,72px),env(safe-area-inset-left))}
.res-tags{display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.4vw,18px)}
.lvchip{font-weight:900;font-style:italic;font-size:clamp(12px,1.7vw,22px);letter-spacing:.06em;padding:0 .8em .08em;border-radius:999px;border:2px solid #ffd24a;color:#ffd24a;text-shadow:0 0 12px #ffd24a88;box-shadow:0 0 14px #ffd24a33,inset 0 0 10px #ffd24a22}
.lvchip{white-space:nowrap}
.lvchip[data-grade="0"],.lvchip[data-grade="1"]{color:#a9b8e0;border-color:#a9b8e0;text-shadow:0 0 10px #a9b8e066;box-shadow:0 0 12px #a9b8e022,inset 0 0 10px #a9b8e018}
.lvchip[data-grade="2"],.lvchip[data-grade="3"]{color:#5ff2d0;border-color:#5ff2d0;text-shadow:0 0 12px #5ff2d088;box-shadow:0 0 14px #5ff2d033,inset 0 0 10px #5ff2d022}
.lvchip[data-grade="6"],.lvchip[data-grade="7"]{color:#ff7ad9;border-color:#ff7ad9;text-shadow:0 0 14px #ff7ad9aa;box-shadow:0 0 18px #ff7ad955,inset 0 0 10px #ff7ad933}
.endtag{font-size:clamp(11px,1.4vw,18px);font-weight:600;letter-spacing:.28em;color:#7d8ab8}
.endtag.crash{color:#ff6a7a}
.lv-title{margin-top:clamp(4px,1.6vh,16px);max-width:100%;font-size:clamp(30px,min(13cqw,19vh),150px);line-height:1.1;font-weight:900;font-style:italic;letter-spacing:.02em;overflow-wrap:anywhere;text-wrap:balance;padding:0 .14em .06em 0;
  background:linear-gradient(90deg,#7dfcff,#b79cff 50%,#ff4fd8);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 26px #ff4fd866) drop-shadow(0 4px 10px #000a)}
.res-quip{margin:clamp(6px,2vh,20px) 0 0;max-width:100%;font-size:clamp(12px,min(1.8vw,3.6vh),21px);font-weight:700;color:#d2d9f4;line-height:1.4;text-shadow:0 2px 8px #000c}
.res-quip::before{content:"俺「"}.res-quip::after{content:"」"}
/* the band */
.res-side{--gut:max(clamp(10px,2.4vw,36px),env(safe-area-inset-left));flex:none;display:flex;align-items:center;justify-content:space-between;gap:clamp(10px,2vw,32px);
  margin:0 max(clamp(10px,2.4vw,36px),env(safe-area-inset-right)) max(clamp(8px,2.4vh,26px),env(safe-area-inset-bottom)) var(--gut);
  padding:clamp(10px,3.4vh,34px) clamp(10px,1.8vw,26px) clamp(10px,3.4vh,34px) clamp(8px,1.4vw,22px);
  background:linear-gradient(180deg,#070d1fd9,#03060fe6);border:1px solid #7dfcff2e;border-radius:clamp(12px,1.6vw,20px);box-shadow:0 8px 30px #000a,inset 0 1px 0 #ffffff12;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.res-side dl{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:0;margin:0;font-size:clamp(11px,min(1.45vw,3.4vh),17px)}
.res-side .st{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:.35em;white-space:nowrap;padding:.3em .6em}
.res-side .st+.st{border-left:1px solid #ffffff38}
.res-side .st.score{flex:1.9 1 0}
.res-side dt{color:#8fa0d0;font-size:.95em;font-weight:600}
.res-side dd{margin:0;font-weight:800;font-size:1.5em;line-height:1.1;color:#eaf1ff}
.res-side dd.big{font-size:3.2em;line-height:1;color:#fff;text-shadow:0 0 18px #7dfcff55}
.res-side .primary{flex:none;min-width:clamp(120px,22vw,300px);padding:clamp(9px,2.2vh,20px) clamp(18px,2.6vw,44px);font-size:clamp(15px,min(2vw,4.6vh),26px);letter-spacing:.18em;border-width:clamp(2px,.25vw,3px);
  background:#061423b3;box-shadow:0 0 22px #7dfcff66,inset 0 0 16px #7dfcff22;touch-action:manipulation;white-space:nowrap}
.res-side .primary:active{background:#7dfcff44}
@media (max-width:640px){ /* narrow windows: stats wrap above a full-width button */
  .res-side{flex-wrap:wrap;gap:10px}.res-side dl{flex:1 1 100%;flex-wrap:wrap;justify-content:center;gap:8px 0}.res-side .st{flex:0 1 auto;padding:.15em .9em}.res-side .st.score{flex:1 1 100%;border-left:0}.res-side .st.score+.st{border-left:0}.res-side .primary{width:100%}
  .lv-title{font-size:clamp(30px,min(13cqw,13vw),84px)}
}
@media (max-height:340px){ /* iPhone landscape with Safari toolbars: keep the band slim, button >=44px tall */
  .res-main{padding-top:6px}.lv-title{font-size:clamp(28px,min(11cqw,17vh),64px);margin-top:2px}.res-quip{margin-top:4px;font-size:12px}
  .res-side{margin-bottom:max(6px,env(safe-area-inset-bottom));padding-top:8px;padding-bottom:8px}.res-side dl{font-size:11px}.res-side dd.big{font-size:2.6em}
  .res-side .primary{padding:8px 20px;min-height:44px;min-width:clamp(120px,22vw,190px)}
}