:root {
  --red: #e5202e;
  --blue: #3aa8ff;
  --ink: #f4f4f2;
  --dim: rgba(244, 244, 242, 0.55);
  --bg: #07090d;
  /* resolution unit: 1px at 1920x1080, scales with the smaller viewport axis (2px at 4K, ~0.67px at 720p) */
  --u: clamp(0.6px, min(100vw / 1920, 100vh / 1080), 4px);
  --serif: 'Noto Serif TC', serif;
  --sans: 'Noto Sans TC', sans-serif;
  --num: 'Oswald', 'Noto Sans TC', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden; font-family: var(--sans); user-select: none; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }

/* ---------- screens ---------- */
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; background: radial-gradient(ellipse at 50% 120%, rgba(229, 32, 46, 0.18), transparent 60%), rgba(4, 6, 10, 0.82); backdrop-filter: blur(3px); }
.title-block { text-align: center; }
.title-sub { font-family: var(--num); letter-spacing: 0.6em; font-size: 14px; color: var(--dim); margin-bottom: 8px; }
h1 { font-family: var(--serif); font-weight: 900; font-size: clamp(48px, 9vw, 120px); margin: 0; letter-spacing: 0.04em; font-style: italic; transform: skewX(-6deg); text-shadow: 0 6px 30px rgba(0, 0, 0, 0.6); }
h1 .d { color: var(--red); font-family: var(--num); font-weight: 700; margin-left: 0.08em; }
.title-line { height: 3px; width: 70%; margin: 14px auto 0; background: linear-gradient(90deg, transparent, var(--red) 30%, var(--red) 70%, transparent); }
h2 { font-family: var(--num); letter-spacing: 0.4em; font-weight: 500; margin: 0; }

.menu-list { display: flex; flex-direction: column; gap: 10px; align-items: stretch; min-width: 260px; }
.menu-list.small { flex-direction: row; min-width: 0; }
.menu-list button { background: transparent; border: none; color: var(--dim); font-family: var(--num); font-size: 26px; letter-spacing: 0.3em; padding: 8px 24px; cursor: pointer; text-align: center; transition: color 0.12s, transform 0.12s; position: relative; }
.menu-list.small button { font-size: 18px; }
.menu-list button.sel, .menu-list button:hover { color: var(--ink); transform: translateX(6px); }
.menu-list button.sel::before { content: ''; position: absolute; left: -6px; top: 50%; width: 14px; height: 3px; background: var(--red); }
.menu-hint { font-size: 13px; color: var(--dim); letter-spacing: 0.15em; }

.set-row { display: grid; grid-template-columns: 160px 220px; align-items: center; gap: 16px; font-size: 16px; }
.set-row label { color: var(--dim); text-align: right; }
.set-row select, .set-row button { background: rgba(255, 255, 255, 0.06); color: var(--ink); border: 1px solid rgba(255, 255, 255, 0.2); padding: 6px 10px; font-family: var(--num); font-size: 15px; }
.set-row input[type=range] { accent-color: var(--red); }

/* ---------- intro / standoff (P5-style) ---------- */
#intro { display: block; background: #0a0a0c; overflow: hidden; gap: 0; backdrop-filter: none; }
#intro.hidden { display: none; }
.vs-bg { position: absolute; inset: 0; }
.vs-bg.left { background: radial-gradient(circle, rgba(0, 0, 0, .28) 1.4px, transparent 1.6px) 0 0 / 9px 9px, linear-gradient(160deg, #ff2a36, #b80f1c); clip-path: polygon(0 0, 62% 0, 38% 100%, 0 100%); animation: bgL .45s cubic-bezier(.2, .9, .2, 1) both; }
.vs-bg.right { background: radial-gradient(circle, rgba(255, 255, 255, .07) 1.4px, transparent 1.6px) 0 0 / 9px 9px, linear-gradient(200deg, #16161c, #050507); clip-path: polygon(62% 0, 100% 0, 100% 100%, 38% 100%); animation: bgR .45s cubic-bezier(.2, .9, .2, 1) both; }
.vs-slash { position: absolute; left: 50%; top: -10%; width: 1.4vw; height: 120%; background: #fff; transform: translateX(-50%) rotate(13.5deg); box-shadow: 0 0 0 .5vw #000; animation: slash .35s ease-out .3s both; }
.vs-portrait { position: absolute; bottom: -2vh; -webkit-mask-image: linear-gradient(to top, transparent 0, #000 12%); mask-image: linear-gradient(to top, transparent 0, #000 12%); height: 92vh; max-width: 56vw; object-fit: contain; filter: drop-shadow(calc(5 * var(--u)) 0 0 #fff) drop-shadow(calc(-5 * var(--u)) 0 0 #fff) drop-shadow(0 calc(5 * var(--u)) 0 #fff) drop-shadow(0 calc(-5 * var(--u)) 0 #fff) drop-shadow(calc(14 * var(--u)) calc(14 * var(--u)) 0 #000); }
.vs-portrait.left { left: -3vw; transform-origin: bottom left; animation: portL .6s cubic-bezier(.15, .9, .2, 1.15) .2s both; }
.vs-portrait.right { right: -3vw; transform-origin: bottom right; animation: portR .6s cubic-bezier(.15, .9, .2, 1.15) .35s both; }
.vs-banner { position: absolute; top: 5vh; left: -2vw; padding: 1.2vh 5vw 1.4vh 4vw; background: #000; color: #fff; transform: rotate(-4deg); box-shadow: calc(8 * var(--u)) calc(8 * var(--u)) 0 #e5202e; animation: bannerIn .45s cubic-bezier(.2, .9, .2, 1) .5s both; }
#intro-stage { font-family: var(--num); font-size: max(12px, min(1.6vw, calc(22 * var(--u)))); letter-spacing: .5em; color: #e5202e; }
#intro-song { font-family: var(--serif); font-weight: 900; font-style: italic; font-size: max(20px, min(3.2vw, calc(46 * var(--u)))); }
.vs-mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg); font-family: var(--num); font-weight: 700; font-style: italic; font-size: max(80px, min(17vw, calc(260 * var(--u)))); line-height: 1; display: flex; animation: vsSlam .5s cubic-bezier(.3, 1.6, .4, 1) .75s both; }
.vs-mark span { color: #fff; -webkit-text-stroke: calc(6 * var(--u)) #000; paint-order: stroke fill; text-shadow: calc(10 * var(--u)) calc(10 * var(--u)) 0 #e5202e, calc(18 * var(--u)) calc(18 * var(--u)) 0 #000; }
.vs-mark span:last-child { color: #e5202e; text-shadow: calc(10 * var(--u)) calc(10 * var(--u)) 0 #fff, calc(18 * var(--u)) calc(18 * var(--u)) 0 #000; transform: translateY(6%); }
.vs-plate { position: absolute; bottom: 9vh; display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.vs-plate.left { left: 4vw; align-items: flex-start; animation: plateL .4s cubic-bezier(.2, .9, .2, 1) .9s both; }
.vs-plate.right { right: 4vw; align-items: flex-end; animation: plateR .4s cubic-bezier(.2, .9, .2, 1) 1s both; }
.ransom { display: flex; gap: calc(4 * var(--u)); }
.ransom span { display: inline-block; font-family: var(--serif); font-weight: 900; font-size: max(28px, min(4.6vw, calc(72 * var(--u)))); line-height: 1; padding: .08em .14em; }
.ransom span:nth-child(odd) { background: #000; color: #fff; transform: rotate(-6deg); }
.ransom span:nth-child(even) { background: #fff; color: #000; transform: rotate(5deg) translateY(.1em); }
.ransom span:nth-child(3n) { background: #e5202e; color: #fff; }
.vs-car { font-family: var(--num); letter-spacing: .3em; font-size: max(10px, calc(15 * var(--u))); background: #000; color: #fff; padding: calc(4 * var(--u)) calc(12 * var(--u)); transform: skewX(-15deg); }
#intro-route { position: absolute; top: 6vh; right: 3vw; font-family: var(--num); letter-spacing: .3em; font-size: max(10px, calc(14 * var(--u))); color: rgba(244, 244, 242, .8); border: calc(2 * var(--u)) solid #fff; padding: calc(6 * var(--u)) calc(12 * var(--u)); background: rgba(0, 0, 0, .45); transform: rotate(3deg); animation: fadeUp .4s ease-out .9s both; }
.vs-press { position: absolute; bottom: 2.5vh; left: 50%; transform: translateX(-50%) skewX(-12deg); font-family: var(--num); letter-spacing: .4em; font-size: max(11px, calc(15 * var(--u))); color: #000; background: #fff; padding: calc(6 * var(--u)) calc(18 * var(--u)); animation: fadeUp .3s ease-out 1.3s both, blink 1s steps(2) 1.6s infinite; }
@keyframes bgL { from { transform: translateX(-100%); } }
@keyframes bgR { from { transform: translateX(100%); } }
@keyframes slash { from { height: 0; } }
@keyframes portL { from { transform: translateX(-40vw) scale(1.25) rotate(-6deg); opacity: 0; } }
@keyframes portR { from { transform: translateX(40vw) scale(1.25) rotate(6deg); opacity: 0; } }
@keyframes bannerIn { from { transform: translateX(-110%) rotate(-4deg); } }
@keyframes vsSlam { 0% { transform: translate(-50%, -50%) rotate(-30deg) scale(4); opacity: 0; } 100% { transform: translate(-50%, -50%) rotate(-8deg) scale(1); opacity: 1; } }
@keyframes plateL { from { transform: translateX(-60vw); } }
@keyframes plateR { from { transform: translateX(60vw); } }

/* ---------- results ---------- */
#result-title { font-family: var(--serif); font-size: max(44px, min(8vw, calc(110 * var(--u)))); font-style: italic; font-weight: 900; transform: skewX(-6deg); }
#result-title.win { color: var(--ink); text-shadow: 0 0 calc(40 * var(--u)) rgba(229, 32, 46, 0.7); }
#result-title.lose { color: var(--dim); }
#result-detail { font-family: var(--num); letter-spacing: 0.2em; color: rgba(244, 244, 242, .72); text-align: center; line-height: 1.8; font-size: max(13px, calc(17 * var(--u))); }
#result { gap: calc(28 * var(--u)); }
#result-rival { position: absolute; right: 6vw; bottom: 8vh; height: 24vh; opacity: .85; filter: grayscale(.25) drop-shadow(0 0 calc(2 * var(--u)) #fff); }
#result-img { height: 38vh; filter: drop-shadow(0 0 calc(2 * var(--u)) #fff) drop-shadow(0 calc(18 * var(--u)) calc(30 * var(--u)) rgba(0,0,0,.7)); }
#result .menu-list.small button { font-size: max(15px, calc(18 * var(--u))); padding: calc(8 * var(--u)) calc(24 * var(--u)); }
#result .menu-list.small button.sel::before { width: calc(14 * var(--u)); height: calc(3 * var(--u)); left: calc(-6 * var(--u)); }

#loading { gap: 16px; }
.spinner { width: 42px; height: 42px; border: 3px solid rgba(255, 255, 255, 0.15); border-top-color: var(--red); border-radius: 50%; animation: spin 0.8s linear infinite; }
#loading-text { font-family: var(--num); letter-spacing: 0.5em; color: var(--dim); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- HUD ----------
   Every size is N * var(--u): 1u = 1px at 1920x1080, 2px at 4K, 0.667px at 1280x720.
   Text that could get too small on tiny windows is floored with max(). */
#hud { position: fixed; inset: 0; pointer-events: none; font-family: var(--num); --chip: rgba(6, 8, 14, .66); --stroke: 0 0 calc(1.5 * var(--u)) #000, 0 calc(2 * var(--u)) 0 #000, 0 0 calc(8 * var(--u)) rgba(0, 0, 0, .8); }
/* soft top scrim so the timer / gap / bars read over a bright sky */
#hud::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(150 * var(--u)); background: linear-gradient(to bottom, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0)); pointer-events: none; }
#hud-top { position: absolute; top: calc(16 * var(--u)); left: calc(24 * var(--u)); right: calc(24 * var(--u)); display: flex; justify-content: space-between; align-items: center; }
#stage-tag { letter-spacing: 0.4em; font-size: max(10px, calc(14 * var(--u))); color: rgba(244, 244, 242, .82); text-shadow: var(--stroke); }
#timer { font-size: max(16px, calc(28 * var(--u))); letter-spacing: 0.05em; font-variant-numeric: tabular-nums; background: var(--chip); padding: calc(2 * var(--u)) calc(14 * var(--u)) calc(2 * var(--u)) calc(16 * var(--u)); transform: skewX(-12deg); border-right: calc(3 * var(--u)) solid var(--red); text-shadow: 0 calc(2 * var(--u)) 0 #000; }
#gap { font-size: max(20px, calc(38 * var(--u))); font-style: italic; font-weight: 700; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; background: var(--chip); padding: calc(1 * var(--u)) calc(14 * var(--u)); transform: skewX(-12deg); text-shadow: 0 calc(2 * var(--u)) 0 #000; }
#gap:empty { display: none; }
#gap.ahead { color: var(--ink); }
#gap.behind { color: #ff4a55; box-shadow: inset 0 calc(-2 * var(--u)) 0 var(--red); }
#progress { position: absolute; top: calc(62 * var(--u)); left: calc(24 * var(--u)); width: calc(220 * var(--u)); height: max(2px, calc(3 * var(--u))); background: rgba(255, 255, 255, 0.28); box-shadow: 0 0 0 calc(1.5 * var(--u)) rgba(0, 0, 0, .55); }
#progress-me, #progress-rival { position: absolute; top: calc(-4 * var(--u)); width: calc(4 * var(--u)); height: calc(11 * var(--u)); margin-left: calc(-2 * var(--u)); box-shadow: 0 0 0 calc(1 * var(--u)) rgba(0, 0, 0, .8); }
#progress-me { background: var(--ink); }
#progress-rival { background: var(--red); }
#hp-bar { position: absolute; top: calc(80 * var(--u)); left: calc(24 * var(--u)); display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: max(9px, calc(12 * var(--u))); letter-spacing: 0.3em; color: rgba(244, 244, 242, .8); text-shadow: var(--stroke); }
#hp-track { width: calc(160 * var(--u)); height: max(4px, calc(6 * var(--u))); background: rgba(255, 255, 255, .2); transform: skewX(-20deg); box-shadow: 0 0 0 calc(1.5 * var(--u)) rgba(0, 0, 0, .6); }
#hp-fill { height: 100%; width: 100%; background: var(--ink); transition: width .25s; }
#hp-fill.low { background: var(--red); }
/* damage: the bar jumps out and grows, shakes, flashes red, then settles back */
#hp-bar { transform-origin: 0 50%; }
#hp-bar.flash { animation: hpHit .9s cubic-bezier(.2, .8, .3, 1); }
#hp-bar.flash #hp-track { animation: hpflash .9s ease-out; }
#hp-bar.flash #hp-fill { animation: hpfill .9s ease-out; }
#hp-bar.flash span { animation: hplabel .9s ease-out; }
@keyframes hpHit {
  0% { transform: none; }
  10% { transform: translate(calc(14 * var(--u)), calc(10 * var(--u))) scale(1.7); }
  16% { transform: translate(calc(20 * var(--u)), calc(7 * var(--u))) scale(1.7); }
  22% { transform: translate(calc(9 * var(--u)), calc(13 * var(--u))) scale(1.68); }
  28% { transform: translate(calc(18 * var(--u)), calc(9 * var(--u))) scale(1.66); }
  34% { transform: translate(calc(12 * var(--u)), calc(11 * var(--u))) scale(1.62); }
  55% { transform: translate(calc(14 * var(--u)), calc(10 * var(--u))) scale(1.55); }
  100% { transform: none; } }
@keyframes hpflash { 0%, 30% { background: rgba(229, 32, 46, .55); box-shadow: 0 0 0 calc(1.5 * var(--u)) #000, 0 0 calc(18 * var(--u)) var(--red); } }
@keyframes hpfill { 0%, 25% { background: #ff2a36; } 100% { background: var(--ink); } }
@keyframes hplabel { 0%, 30% { color: #ff4a50; } }
#boost-tag { position: absolute; z-index: 2; /* above the speedo fire */ left: calc(30 * var(--u)); bottom: calc(246 * var(--u)); font-size: max(13px, calc(20 * var(--u))); letter-spacing: 0.4em; font-style: italic; text-shadow: 0 calc(2 * var(--u)) 0 #000; transition: color 0.3s, opacity 0.3s; }
#boost-tag.red, #boost-tag.blue { background: rgba(6, 8, 14, .74); padding: calc(3 * var(--u)) calc(12 * var(--u)) calc(3 * var(--u)) calc(10 * var(--u)); transform: skewX(-12deg); }
#boost-tag.red { color: #ff3a46; border-left: calc(4 * var(--u)) solid var(--red); text-shadow: 0 0 calc(18 * var(--u)) rgba(229, 32, 46, 0.8), 0 calc(2 * var(--u)) 0 #000; }
#boost-tag.blue { color: #6cc0ff; border-left: calc(4 * var(--u)) solid var(--blue); text-shadow: 0 0 calc(14 * var(--u)) rgba(58, 168, 255, 0.7), 0 calc(2 * var(--u)) 0 #000; }

/* speedometer: the SVG is vector, so it stays crisp at any --u */
#speedo { position: absolute; left: calc(22 * var(--u)); bottom: calc(18 * var(--u)); width: calc(210 * var(--u)); height: calc(210 * var(--u)); }
/* dark backing disc keeps the gauge readable over bright scenery */
#speedo::before { content: ''; position: absolute; inset: calc(4 * var(--u)); border-radius: 50%; background: radial-gradient(circle, rgba(6,8,14,.84) 0 58%, rgba(6,8,14,.62) 72%, rgba(6,8,14,0) 100%); box-shadow: 0 0 0 calc(1 * var(--u)) rgba(255,255,255,.08); }
#speedo svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(135deg); overflow: visible; filter: drop-shadow(0 0 calc(2 * var(--u)) rgba(0,0,0,.9)); shape-rendering: geometricPrecision; }
#speedo .g-track { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 7; stroke-dasharray: 405 541; }
#speedo .g-track.thin { stroke-width: 4; stroke-dasharray: 339 453; }
#speedo .g-rpm { fill: none; stroke: var(--ink); stroke-width: 7; stroke-dasharray: 0 541; transition: stroke .2s; }
#speedo .g-rpm.red { stroke: var(--red); }
#speedo .g-throttle { fill: none; stroke: var(--red); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0 453; filter: drop-shadow(0 0 4px rgba(229,32,46,.9)); }
#hud[data-tier="2"] #speedo .g-throttle { stroke: var(--blue); filter: drop-shadow(0 0 5px rgba(58,168,255,1)); }
#speedo .tick { stroke: rgba(255,255,255,.5); stroke-width: 2; }
#speedo .tick.major { stroke: rgba(255,255,255,.85); stroke-width: 3; }
#speed { position: absolute; left: 0; right: 0; top: calc(66 * var(--u)); text-align: center; font-size: calc(62 * var(--u)); line-height: 1; font-weight: 700; font-style: italic; font-variant-numeric: tabular-nums; text-shadow: 0 calc(2 * var(--u)) 0 #000, 0 0 calc(10 * var(--u)) rgba(0,0,0,.8); }
#speed-unit { position: absolute; left: 0; right: 0; top: calc(132 * var(--u)); text-align: center; font-size: max(9px, calc(12 * var(--u))); color: rgba(244,244,242,.78); letter-spacing: .25em; text-shadow: 0 0 calc(3 * var(--u)) #000; }
#gear { position: absolute; right: calc(18 * var(--u)); bottom: calc(22 * var(--u)); font-size: calc(30 * var(--u)); color: var(--red); font-style: italic; text-shadow: 0 calc(2 * var(--u)) 0 #000, 0 0 calc(8 * var(--u)) rgba(0,0,0,.9); }

#countdown { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(238 * var(--u)); font-weight: 700; font-style: italic; -webkit-text-stroke: calc(5 * var(--u)) #000; paint-order: stroke fill; text-shadow: calc(8 * var(--u)) calc(8 * var(--u)) 0 rgba(0, 0, 0, .55), 0 0 calc(40 * var(--u)) rgba(0, 0, 0, 0.6); }
#countdown.go { color: var(--red); text-shadow: calc(8 * var(--u)) calc(8 * var(--u)) 0 #fff, calc(14 * var(--u)) calc(14 * var(--u)) 0 #000; }
#countdown:not(:empty) { animation: countPop .6s ease-out; }
@keyframes countPop { from { transform: scale(1.6); opacity: 0; } 30% { opacity: 1; } }

#warn { position: absolute; top: 22vh; left: 50%; transform: translateX(-50%) skewX(-10deg); font-size: max(18px, calc(30 * var(--u))); letter-spacing: .3em; color: #ff3a46; background: rgba(6, 8, 14, .7); padding: calc(4 * var(--u)) calc(10 * var(--u)) calc(4 * var(--u)) calc(20 * var(--u)); border-top: calc(3 * var(--u)) solid var(--red); border-bottom: calc(3 * var(--u)) solid var(--red); text-shadow: 0 0 calc(20 * var(--u)) var(--red); animation: blink .18s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* Vertical italic lyrics, right side, J-drama style */
#lyrics { position: absolute; right: 3.2vw; top: 12vh; height: 76vh; font-family: var(--serif); font-weight: 700; font-size: max(14px, calc(28 * var(--u))); }
#lyrics .line { position: absolute; top: 0; right: 0; writing-mode: vertical-rl; text-orientation: mixed; transform: skewY(-12deg); transform-origin: top right; letter-spacing: 0.14em; color: #fff; -webkit-text-stroke: calc(0.6 * var(--u)) rgba(0, 0, 0, .7); paint-order: stroke fill; text-shadow: 0 0 calc(2 * var(--u)) #000, 0 0 calc(8 * var(--u)) rgba(0, 0, 0, 0.9), 0 calc(2 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, 0.75); white-space: nowrap;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .5s ease, color .5s ease; }
#lyrics .line.enter { opacity: 0; transform: skewY(-12deg) translateY(calc(-14 * var(--u))); transition: none; }
#lyrics .line.prev { opacity: 0.45; color: #c8c8cc; transform: skewY(-12deg) translateX(-1.7em) scale(0.82); }
#lyrics .line.gone { opacity: 0; transform: skewY(-12deg) translateX(-4em) scale(0.7); transition: transform .28s ease-in, opacity .28s ease-in; }
#lyrics .line.hot { color: #ffdede; text-shadow: 0 0 calc(2 * var(--u)) #000, 0 0 calc(14 * var(--u)) rgba(229, 32, 46, 0.95), 0 calc(2 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, 0.75); }
#lyrics .line.hot.blue { color: #deefff; text-shadow: 0 0 calc(2 * var(--u)) #000, 0 0 calc(14 * var(--u)) rgba(58, 168, 255, 0.95), 0 calc(2 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, 0.75); }

/* ---------- driver cut-in: manga panel ----------
   #cutin > .cutin-panel (ink outline via stacked drop-shadows)
            > .cutin-band (jagged clip-path, halftone) > .cutin-lines (focus lines)
          > .cutin-face (clips the bust at the panel's bottom edge, lets the head break the frame)
            > #cutin-img
          > #cutin-text (slanted caption balloon)
   Player ('qy') docks left, rivals dock right (panel + face mirrored). Never wider than 38vw. */
@property --cl { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
#cutin { position: absolute; top: calc(200 * var(--u)); width: min(38vw, calc(660 * var(--u))); height: calc(270 * var(--u)); --a1: #ff2d3a; --a2: #a50d1a; --a3: #4a0008; --ac: var(--red); }
#cutin.blue { --a1: #3aa8ff; --a2: #0f4fc0; --a3: #021a4a; --ac: var(--blue); }
#cutin.left { left: calc(10 * var(--u)); transform-origin: 0% 60%; animation: cutPunchL .42s cubic-bezier(.2, .9, .3, 1) both; }
#cutin.right { right: calc(10 * var(--u)); transform-origin: 100% 60%; animation: cutPunchR .42s cubic-bezier(.2, .9, .3, 1) both; }
#cutin.out { animation: cutOut .16s ease-in forwards; }

#cutin .cutin-panel { position: absolute; inset: 0;
  --k: calc(5 * var(--u)); --w: calc(3.5 * var(--u));
  filter: drop-shadow(var(--k) 0 0 #000) drop-shadow(calc(-1 * var(--k)) 0 0 #000) drop-shadow(0 var(--k) 0 #000) drop-shadow(0 calc(-1 * var(--k)) 0 #000)
          drop-shadow(var(--w) 0 0 #fff) drop-shadow(calc(-1 * var(--w)) 0 0 #fff) drop-shadow(0 var(--w) 0 #fff) drop-shadow(0 calc(-1 * var(--w)) 0 #fff)
          drop-shadow(calc(9 * var(--u)) calc(9 * var(--u)) 0 rgba(0, 0, 0, .85)); }
#cutin.right .cutin-panel, #cutin.right .cutin-face { transform: scaleX(-1); }
/* hand-drawn panel: slightly wobbly edges, slanted outer side */
#cutin .cutin-band { position: absolute; inset: 0; overflow: hidden;
  clip-path: polygon(0% 5%, 31% 2.4%, 63% 4.2%, 100% 0%, 93.5% 47%, 86% 100%, 52% 97.2%, 21% 99%, 0% 100%);
  background:
    radial-gradient(circle, rgba(0, 0, 0, .3) calc(1.3 * var(--u)), transparent calc(1.5 * var(--u))) 0 0 / calc(7 * var(--u)) calc(7 * var(--u)),
    radial-gradient(ellipse at 22% 62%, var(--a1) 0 30%, var(--a2) 70%, var(--a3) 115%); }
/* white flash on entry */
#cutin .cutin-band::after { content: ''; position: absolute; inset: 0; background: #fff; opacity: 0; animation: cutFlash .22s ease-out; }
/* focus / speed lines radiating from behind the portrait (two uneven layers = hand-drawn) */
#cutin .cutin-lines { position: absolute; inset: -10%;
  background:
    repeating-conic-gradient(from var(--cl) at 25% 60%, rgba(255, 255, 255, .85) 0 .7deg, transparent .7deg 6.3deg),
    repeating-conic-gradient(from calc(var(--cl) + 2.1deg) at 25% 60%, rgba(0, 0, 0, .55) 0 .9deg, transparent .9deg 4.6deg),
    repeating-conic-gradient(from calc(var(--cl) * -1 + 1deg) at 25% 60%, rgba(255, 255, 255, .4) 0 .35deg, transparent .35deg 2.9deg);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 25% 60%, transparent 20%, rgba(0, 0, 0, .55) 38%, #000 70%);
  mask-image: radial-gradient(ellipse 70% 80% at 25% 60%, transparent 20%, rgba(0, 0, 0, .55) 38%, #000 70%);
  animation: cutLines .24s steps(3) infinite; }

/* the bust is cut flush with the panel's bottom edge; the head pops out over the top border */
#cutin .cutin-face { position: absolute; left: 0; bottom: 0; width: 100%; height: 150%; pointer-events: none;
  clip-path: polygon(0% 0%, 100% 0%, 100% 64%, 86% 100%, 52% 98.1%, 21% 99.3%, 0% 100%); }
#cutin img { position: absolute; left: 3%; bottom: calc(-6 * var(--u)); height: 88%; max-width: 50%; object-fit: contain; object-position: 0% 100%;
  filter: drop-shadow(calc(3 * var(--u)) 0 0 #fff) drop-shadow(calc(-3 * var(--u)) 0 0 #fff) drop-shadow(0 calc(-3 * var(--u)) 0 #fff)
          drop-shadow(calc(2.5 * var(--u)) 0 0 #000) drop-shadow(calc(-2.5 * var(--u)) 0 0 #000) drop-shadow(0 calc(-2.5 * var(--u)) 0 #000)
          drop-shadow(calc(8 * var(--u)) calc(4 * var(--u)) 0 rgba(0, 0, 0, .6));
  animation: cutFace .42s cubic-bezier(.2, 1.3, .4, 1) both; }

/* slanted shout caption with black ink stroke and a hard accent shadow */
#cutin-text { position: absolute; top: 46%; z-index: 2; max-width: 64%; padding: calc(8 * var(--u)) calc(20 * var(--u)) calc(10 * var(--u));
  font-family: var(--serif); font-weight: 900; font-style: italic; font-size: max(15px, calc(38 * var(--u))); line-height: 1.1; color: #0a0a0a; white-space: nowrap;
  background: #fff; border: calc(4.5 * var(--u)) solid #000;
  box-shadow: calc(7 * var(--u)) calc(7 * var(--u)) 0 var(--ac), calc(11 * var(--u)) calc(11 * var(--u)) 0 #000;
  transform: rotate(-5deg) skewX(-10deg); animation: cutText .36s cubic-bezier(.3, 1.7, .5, 1) .08s both; }
#cutin-text:empty { display: none; }
#cutin-text.long { font-size: max(13px, calc(30 * var(--u))); padding: calc(7 * var(--u)) calc(16 * var(--u)) calc(9 * var(--u)); max-width: 72%; }
/* balloon tail pointing back at the driver */
#cutin-text::before, #cutin-text::after { content: ''; position: absolute; top: 58%; width: 0; height: 0; border-style: solid; }
#cutin.left #cutin-text { left: 38%; }
#cutin.left #cutin-text::before { left: calc(-30 * var(--u)); border-width: calc(13 * var(--u)) calc(30 * var(--u)) calc(13 * var(--u)) 0; border-color: transparent #000 transparent transparent; transform: translateY(-50%) rotate(14deg); }
#cutin.left #cutin-text::after { left: calc(-20 * var(--u)); border-width: calc(7 * var(--u)) calc(17 * var(--u)) calc(7 * var(--u)) 0; border-color: transparent #fff transparent transparent; transform: translateY(-50%) rotate(14deg); }
#cutin.right #cutin-text { right: 38%; transform: rotate(5deg) skewX(10deg); box-shadow: calc(-7 * var(--u)) calc(7 * var(--u)) 0 var(--ac), calc(-11 * var(--u)) calc(11 * var(--u)) 0 #000; }
#cutin.right #cutin-text::before { right: calc(-30 * var(--u)); border-width: calc(13 * var(--u)) 0 calc(13 * var(--u)) calc(30 * var(--u)); border-color: transparent transparent transparent #000; transform: translateY(-50%) rotate(-14deg); }
#cutin.right #cutin-text::after { right: calc(-20 * var(--u)); border-width: calc(7 * var(--u)) 0 calc(7 * var(--u)) calc(17 * var(--u)); border-color: transparent transparent transparent #fff; transform: translateY(-50%) rotate(-14deg); }

@keyframes cutPunchL { 0% { transform: translateX(-70%) scale(.5) rotate(-6deg); opacity: 0; } 55% { transform: translateX(2%) scale(1.12) rotate(1.5deg); opacity: 1; } 78% { transform: scale(.96) rotate(-.5deg); } 100% { transform: none; } }
@keyframes cutPunchR { 0% { transform: translateX(70%) scale(.5) rotate(6deg); opacity: 0; } 55% { transform: translateX(-2%) scale(1.12) rotate(-1.5deg); opacity: 1; } 78% { transform: scale(.96) rotate(.5deg); } 100% { transform: none; } }
@keyframes cutOut { to { transform: scale(.85) translateY(calc(-20 * var(--u))); opacity: 0; } }
@keyframes cutFlash { 0% { opacity: .9; } 100% { opacity: 0; } }
@keyframes cutLines { to { --cl: 4deg; } }
@keyframes cutFace { 0% { transform: translateY(18%) scale(.9); } 100% { transform: none; } }
@keyframes cutText { 0% { opacity: 0; scale: 2.2; } 100% { opacity: 1; scale: 1; } }
/* small screen shake when a cut-in slams in (class toggled on <body> by hud.cutin) */
body.cutin-shake #view, body.cutin-shake #hud { animation: hudShake .3s linear; }
@keyframes hudShake {
  0% { transform: translate(0, 0) scale(1.012); } 15% { transform: translate(calc(-7 * var(--u)), calc(4 * var(--u))) scale(1.012); }
  30% { transform: translate(calc(6 * var(--u)), calc(-5 * var(--u))) scale(1.012); } 45% { transform: translate(calc(-4 * var(--u)), calc(-3 * var(--u))) scale(1.012); }
  60% { transform: translate(calc(3 * var(--u)), calc(3 * var(--u))) scale(1.012); } 80% { transform: translate(calc(-1 * var(--u)), calc(1 * var(--u))) scale(1.006); } 100% { transform: none; }
}

/* 希銘's thumbs-up: slides in from the bottom-right corner, holds, slides back out */
#jam { position: absolute; z-index: 3; /* over the minimap */ right: 0; bottom: 0; width: 46vw; height: 72vh; pointer-events: none; overflow: hidden; }
#jam img { position: absolute; right: -2vw; bottom: -4vh; height: 100%; transform: translate(70%, 60%) rotate(18deg); transform-origin: bottom right; transition: transform .55s cubic-bezier(.2, .9, .25, 1); filter: drop-shadow(0 0 calc(24 * var(--u)) rgba(0, 0, 0, .6)); }
#jam.in img { transform: translate(0, 0) rotate(-4deg); }
#jam.out img { transform: translate(70%, 60%) rotate(18deg); transition-duration: .45s; transition-timing-function: cubic-bezier(.6, 0, .8, .4); }
/* screen-edge glow per boost tier */
#hud[data-tier="1"]::after, #hud[data-tier="2"]::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
#hud[data-tier="1"]::after { box-shadow: inset 0 0 calc(120 * var(--u)) rgba(229,32,46,.35); }
#hud[data-tier="2"]::after { box-shadow: inset 0 0 calc(160 * var(--u)) rgba(58,168,255,.5); animation: pulse .45s ease-in-out infinite alternate; }
@keyframes pulse { to { box-shadow: inset 0 0 calc(220 * var(--u)) rgba(58,168,255,.7); } }

/* ---------- title intro sequence (first load only) ---------- */
#whiteout { position: fixed; inset: 0; background: #fff; z-index: 50; pointer-events: none; opacity: 0; }
#whiteout.go { animation: whiteFade 1.6s ease-out forwards; }
@keyframes whiteFade { from { opacity: 1; } to { opacity: 0; } }
#splash { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: #000; z-index: 40; cursor: pointer; }
#splash.hidden { display: none; }
.splash-title { font-family: var(--serif); font-weight: 900; font-style: italic; font-size: 28px; letter-spacing: .1em; color: rgba(255,255,255,.35); }
.splash-title span { color: rgba(229,32,46,.6); font-family: var(--num); margin-left: 4px; }
.splash-press { font-family: var(--num); letter-spacing: .6em; font-size: 14px; color: var(--dim); animation: blink 1.4s steps(2) infinite; }
/* the title floats over the live garage scene */
#menu.screen { background: linear-gradient(100deg, rgba(4,6,10,.72) 0 30%, rgba(4,6,10,0) 62%); backdrop-filter: none; align-items: flex-start; padding-left: 7vw; }
#menu .title-block { text-align: left; }
#menu .title-line { margin-left: 0; }
#menu .menu-list { align-items: flex-start; }
#menu .menu-list button { text-align: left; padding-left: 0; }
h1 .t, h1 .d { display: inline-block; }
.title-block { position: relative; }
#menu.intro .title-sub { animation: fadeUp .6s ease-out 2.7s both; }
#menu.intro h1 .t { animation: titleDrive 1.15s cubic-bezier(.12, .88, .18, 1) 1.1s both; }
/* the D lands on the spoken 「D.」 (--d-at is set by main.js from when the title voice starts),
   lit like a tail lamp, then cools back to the painted red */
#menu.intro h1 .d { animation: dSlam .5s cubic-bezier(.3, 1.7, .45, 1) var(--d-at, 3.92s) both, dFlash 3.2s ease-out var(--d-at, 3.92s) both; }
/* the small D in CITY ON DRIFT D lands and lights with the big one */
.d-small { color: var(--red); display: inline-block; }
#menu.intro .d-small { animation: dSlam .5s cubic-bezier(.3, 1.7, .45, 1) var(--d-at, 3.92s) both, dFlash 3.2s ease-out var(--d-at, 3.92s) both; }
#menu.intro .title-line { animation: lineSweep .5s cubic-bezier(.6, 0, .2, 1) 2.05s both; transform-origin: left center; }
#menu.intro .title-block::before { content: ''; position: absolute; left: -20vw; right: -20vw; top: 48%; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent); animation: streak .7s ease-out 1.15s both; }
#menu.intro .menu-list button { animation: itemDrive .55s cubic-bezier(.15, .85, .25, 1) both; }
#menu.intro .menu-list button:nth-child(1) { animation-delay: 3.0s; }
#menu.intro .menu-list button:nth-child(2) { animation-delay: 3.14s; }
#menu.intro .menu-list button:nth-child(3) { animation-delay: 3.28s; }
#menu.intro .menu-hint { animation: fadeUp .6s ease-out 3.75s both; }
@keyframes titleDrive {
  0% { transform: translate(70vw, -6vh) scale(3.2) skewX(-30deg); filter: blur(14px); opacity: 0; }
  55% { transform: translate(-3vw, 0) scale(.94) skewX(-4deg); filter: blur(0); opacity: 1; }
  78% { transform: translate(.8vw, 0) scale(1.02) skewX(-9deg); }
  100% { transform: none; }
}
@keyframes dSlam {
  0% { transform: scale(5) rotate(-24deg); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes dFlash {
  0%, 12% { color: #ff7a72; filter: brightness(1.3);
    text-shadow: 0 0 .03em #fff, 0 0 .1em #ffd0c8, 0 0 .22em #ff3a2a, 0 0 .5em #ff1010, 0 0 1em rgba(255, 0, 0, .85), 0 0 2em rgba(210, 0, 0, .6); }
  45% { color: #ff4a42; filter: brightness(1.12);
    text-shadow: 0 0 .02em #ffd8d0, 0 0 .18em #ff2a20, 0 0 .4em rgba(255, 16, 16, .8), 0 0 .9em rgba(230, 0, 0, .55), 0 0 1.6em rgba(190, 0, 0, .35); }
  100% { color: var(--red); filter: none;
    text-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent, 0 6px 30px rgba(0, 0, 0, .6), 0 0 0 transparent; }
}
@keyframes lineSweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes streak { 0% { transform: translateX(60vw) scaleX(.2); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateX(-40vw) scaleX(1.4); opacity: 0; } }
@keyframes itemDrive { from { transform: translateX(-45vw) skewX(-25deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fadeUp { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

.credits-list { font-size: 14px; line-height: 2; color: var(--dim); text-align: center; max-width: 80vw; }
.credits-list b { color: var(--ink); font-family: var(--num); letter-spacing: .2em; font-weight: 500; }
#menu.intro .menu-list button:nth-child(4) { animation-delay: 3.42s; }
#menu.intro .menu-list button:nth-child(5) { animation-delay: 3.56s; }

.splash-pad { font-size: 13px; color: rgba(244,244,242,.7); letter-spacing: .1em; border: 1px solid rgba(255,255,255,.25); padding: 6px 14px; }
.splash-pad.hidden { display: none; }