/* ═══════════════════════════════════════════════════════════════
   PARA! Manila Jeepney Rush — interface
   Jeepney chrome + hand-painted signage + arcade cabinet glow
   ═══════════════════════════════════════════════════════════════ */

:root{
  --ink:#0a0b14;
  --steel:#dfe5ec;
  --chrome:linear-gradient(180deg,#ffffff 0%,#cfd8e2 38%,#8e9aa8 52%,#e8eef5 66%,#ffffff 100%);
  --gold:#ffd23f;
  --gold-deep:#f0891e;
  --red:#e03127;
  --red-deep:#8e1710;
  --blue:#1f6fd0;
  --blue-deep:#0d3a75;
  --green:#31c25a;
  --green-deep:#0f6b2c;
  --pink:#ff3f8e;
  --cyan:#33e6ff;
  --panel:rgba(8,10,22,.86);
  --panel-line:rgba(255,210,63,.34);
  --font-blk:'Arial Black','Arial Bold',Impact,'Haettenschweiler','Franklin Gothic Heavy','Helvetica Neue',sans-serif;
  --font-ui:'Trebuchet MS','Segoe UI',Roboto,-apple-system,'Helvetica Neue',sans-serif;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --hud:1;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#05060d;color:#fff;
  font-family:var(--font-ui);overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none}
#app{position:fixed;inset:0;overflow:hidden}
canvas#scene{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}

/* ── shared arcade type ───────────────────────────────────── */
.arc{font-family:var(--font-blk);letter-spacing:.02em;text-transform:uppercase}
.outlined{
  text-shadow:
    -2px 0 var(--ink),2px 0 var(--ink),0 -2px var(--ink),0 2px var(--ink),
    -2px -2px var(--ink),2px -2px var(--ink),-2px 2px var(--ink),2px 2px var(--ink),
    0 5px 0 rgba(0,0,0,.55);
}

/* ═══ BOOT ═══ */
#boot{background:radial-gradient(ellipse at 50% 42%,#1a2140 0%,#080a15 62%,#04050b 100%)}
.boot-inner{text-align:center;padding:0 6vw;max-width:560px}
.boot-mark{font-family:var(--font-blk);font-size:clamp(48px,12vw,110px);line-height:.9;
  letter-spacing:-.02em;transform:skewX(-8deg);margin-bottom:.35em}
.boot-mark-a{background:linear-gradient(180deg,#fff7cf 0%,#ffd23f 46%,#f0891e 74%,#c0430f 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 #6a1d05) drop-shadow(0 8px 22px rgba(255,150,40,.4))}
.boot-bar{height:12px;border-radius:9px;background:#141a2f;
  border:2px solid #2c3550;overflow:hidden;box-shadow:inset 0 2px 6px rgba(0,0,0,.6)}
.boot-bar i{display:block;height:100%;width:0%;border-radius:7px;
  background:linear-gradient(90deg,#f0891e,#ffd23f 60%,#fff6cd);transition:width .18s ease-out;
  box-shadow:0 0 14px rgba(255,190,60,.7)}
.boot-label{margin-top:14px;font-family:var(--font-blk);font-size:clamp(13px,3.4vw,18px);
  letter-spacing:.08em;color:#ffd98a;text-transform:uppercase}
.boot-hint{margin-top:4px;font-size:12px;letter-spacing:.22em;color:#6d7a99;text-transform:uppercase}

/* ═══ SCREENS ═══ */
.screen{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  z-index:40;padding:calc(14px + var(--safe-t)) calc(14px + var(--safe-r)) calc(14px + var(--safe-b)) calc(14px + var(--safe-l));
  background:rgba(4,5,12,.72);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  animation:screenIn .22s ease-out}
.screen.is-on{display:flex}
@keyframes screenIn{from{opacity:0}to{opacity:1}}

.panel{width:min(1080px,100%);max-height:100%;overflow-y:auto;overscroll-behavior:contain;
  background:var(--panel);border:2px solid var(--panel-line);border-radius:16px;
  padding:clamp(16px,3vw,30px);box-shadow:0 26px 70px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.09)}
.panel-h{font-family:var(--font-blk);font-size:clamp(24px,5.4vw,44px);margin:0 0 .35em;
  letter-spacing:.01em;transform:skewX(-7deg);
  background:linear-gradient(180deg,#fff6cd,#ffd23f 52%,#e07a12);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 #6a1d05)}

/* ═══ TITLE ═══ */
/* Lighter than the other screens: the attract shot behind it is part of the
   title, not a distraction to be hidden. */
#screen-title{backdrop-filter:blur(2.5px);-webkit-backdrop-filter:blur(2.5px);
  background:
  radial-gradient(ellipse at 50% 118%,rgba(255,140,40,.26),transparent 56%),
  linear-gradient(180deg,rgba(4,6,16,.30) 0%,rgba(4,6,16,.62) 62%,rgba(4,6,16,.88) 100%)}
.title-wrap{width:min(880px,100%);text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:clamp(8px,1.6vh,18px);max-height:100%;overflow-y:auto;padding:4px}
.title-plate{position:relative;padding:clamp(8px,2vw,18px) clamp(14px,4vw,40px);
  border-radius:14px;background:linear-gradient(180deg,rgba(20,26,50,.86),rgba(8,10,22,.9));
  border:3px solid rgba(255,210,63,.5);
  box-shadow:0 0 0 3px rgba(0,0,0,.5),0 18px 50px rgba(0,0,0,.65),inset 0 2px 0 rgba(255,255,255,.13)}
.title-sub{font-family:var(--font-blk);font-size:clamp(9px,2.1vw,13px);letter-spacing:.42em;
  color:#8fa4c8;text-transform:uppercase;margin-bottom:.4em}
.title-main{margin:0;line-height:.82;font-family:var(--font-blk);
  font-size:clamp(56px,17vw,150px);letter-spacing:-.03em;transform:skewX(-9deg)}
.tm-para{background:linear-gradient(180deg,#fffdf2 0%,#ffe27a 30%,#ffb52e 55%,#e8541a 78%,#a8210b 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 0 #5c1704) drop-shadow(0 12px 30px rgba(255,140,40,.55))}
.title-strip{margin-top:.45em;font-family:var(--font-blk);font-size:clamp(13px,3.6vw,29px);
  letter-spacing:.1em;padding:.22em .8em;display:inline-block;transform:skewX(-9deg);
  background:linear-gradient(180deg,#e8362a,#8e1710);color:#fff8e0;border-radius:4px;
  border:2px solid rgba(255,225,150,.55);box-shadow:0 5px 0 rgba(0,0,0,.45)}
.title-route{margin-top:.7em;font-family:var(--font-blk);font-size:clamp(8px,2vw,12px);
  letter-spacing:.24em;color:#7f8fb5}
.title-best{font-family:var(--font-blk);font-size:clamp(11px,2.6vw,16px);letter-spacing:.14em;
  color:#ffd98a}
.title-grade{color:#8fa4c8}
.title-actions{display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.4vh,12px);width:100%}
.title-modes{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.modebtn{font-family:var(--font-blk);font-size:clamp(10px,2.3vw,14px);letter-spacing:.1em;
  padding:.5em .9em;border-radius:9px;border:2px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);color:#c8d4e8;cursor:pointer;display:flex;flex-direction:column;
  gap:2px;line-height:1.1;transition:transform .12s,border-color .12s,background .12s}
.modebtn em{font-style:normal;font-size:.72em;letter-spacing:.06em;opacity:.62;font-family:var(--font-ui)}
.modebtn:hover{transform:translateY(-2px);border-color:rgba(255,210,63,.5)}
.modebtn.is-sel{background:linear-gradient(180deg,#2a58a8,#12306a);border-color:#67a8ff;color:#fff}
.title-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.title-foot{font-size:clamp(9px,2vw,11px);color:#5d6b8c;letter-spacing:.06em}

.bigbtn{font-family:var(--font-blk);cursor:pointer;border:none;border-radius:12px;
  padding:.5em 1.5em;display:flex;flex-direction:column;align-items:center;line-height:1;
  background:linear-gradient(180deg,#4a556b,#212838);color:#fff;
  box-shadow:0 6px 0 #0b0e18,0 12px 26px rgba(0,0,0,.5);
  transition:transform .1s,box-shadow .1s;font-size:clamp(18px,4.4vw,32px);letter-spacing:.04em}
.bigbtn em{font-style:normal;font-family:var(--font-ui);font-size:.36em;letter-spacing:.22em;
  opacity:.72;margin-top:.5em}
.bigbtn:active{transform:translateY(5px);box-shadow:0 1px 0 #0b0e18,0 6px 14px rgba(0,0,0,.5)}
.bigbtn-go{background:linear-gradient(180deg,#ffd93f,#f07a17 62%,#c9490a);color:#3a1200;
  box-shadow:0 6px 0 #7a2b04,0 14px 32px rgba(255,140,30,.35);animation:goPulse 1.9s ease-in-out infinite}
.bigbtn-go:active{box-shadow:0 1px 0 #7a2b04}
@keyframes goPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.13)}}
.minibtn{font-family:var(--font-blk);font-size:clamp(9px,2.1vw,12px);letter-spacing:.13em;
  padding:.62em 1em;border-radius:8px;border:2px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);color:#b9c6dd;cursor:pointer;transition:.12s}
.minibtn:hover{border-color:rgba(255,210,63,.5);color:#fff}

/* ═══ HOW TO ═══ */
.how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(12px,2.4vw,26px);
  text-align:left;margin-bottom:18px}
.how-col h3{font-family:var(--font-blk);font-size:13px;letter-spacing:.2em;color:var(--gold);
  margin:0 0 .7em;padding-bottom:.4em;border-bottom:2px solid rgba(255,210,63,.24)}
.how-col h3.mt{margin-top:1.4em}
.keylist,.bonuslist,.how-loop{list-style:none;margin:0;padding:0;font-size:clamp(11px,2.3vw,13px)}
.how-loop{list-style:decimal;padding-left:1.2em;color:#c6d2e6;line-height:1.65}
.how-loop b{color:var(--gold)}
.keylist li{display:flex;gap:10px;align-items:baseline;padding:.32em 0;
  border-bottom:1px solid rgba(255,255,255,.06);color:#c6d2e6}
.keylist b{font-family:var(--font-blk);background:rgba(255,255,255,.09);border-radius:5px;
  padding:.2em .5em;min-width:64px;text-align:center;color:#fff;font-size:.92em;
  border:1px solid rgba(255,255,255,.15);flex:0 0 auto}
.bonuslist li{padding:.42em .6em;margin-bottom:5px;border-radius:7px;
  background:rgba(255,255,255,.05);border-left:4px solid var(--gold);color:#c6d2e6;line-height:1.35}
.bonuslist b{font-family:var(--font-blk);display:block;letter-spacing:.06em;font-size:1.06em}
.how-note{font-size:11px;color:#8b99b8;line-height:1.6;margin-top:12px}
.panel-how,.panel-credits{text-align:center}
.panel-credits p{text-align:left;font-size:clamp(12px,2.4vw,14px);line-height:1.72;color:#c2cee3;
  max-width:64ch;margin:0 auto 1em}
.panel-credits b{color:var(--gold)}
.cred-small{font-size:11px !important;color:#7b88a6 !important}

/* ═══ PAUSE ═══ */
.panel-pause{max-width:520px;text-align:center}
.pause-sub{font-family:var(--font-blk);letter-spacing:.4em;font-size:12px;color:#8fa4c8;margin-bottom:1.2em}
.pause-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px;text-align:left}
.pause-stats div{background:rgba(255,255,255,.05);border-radius:8px;padding:.6em .8em;
  display:flex;justify-content:space-between;font-size:12px;color:#a9b7d0}
.pause-stats b{font-family:var(--font-blk);color:#fff}
.pause-actions{display:flex;flex-direction:column;align-items:center;gap:9px}
.pause-actions .minibtn{width:min(280px,100%)}

/* ═══ RESULTS ═══ */
.panel-results{max-width:760px;text-align:center}
.res-timeup{font-family:var(--font-blk);letter-spacing:.3em;font-size:11px;color:#ff8f6b}
.res-total{margin:.4em 0 1.1em}
.res-total-label{font-family:var(--font-blk);letter-spacing:.34em;font-size:11px;color:#8fa4c8}
.res-total-value{font-family:var(--font-blk);font-size:clamp(42px,11vw,86px);line-height:1;
  transform:skewX(-8deg);background:linear-gradient(180deg,#fffbe8,#ffd23f 48%,#e8721a);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 #6a1d05)}
.res-best{font-family:var(--font-blk);font-size:12px;letter-spacing:.14em;color:#7fe0a0;min-height:1.2em}
.res-grade{display:flex;align-items:center;gap:clamp(12px,3vw,26px);justify-content:center;
  background:rgba(255,255,255,.05);border-radius:14px;padding:clamp(10px,2.4vw,18px);
  margin-bottom:16px;border:1px solid rgba(255,255,255,.1)}
.res-grade-badge{flex:0 0 auto;width:clamp(72px,17vw,112px);height:clamp(72px,17vw,112px);
  border-radius:50%;display:grid;place-items:center;font-family:var(--font-blk);
  font-size:clamp(38px,9vw,60px);color:#2a1000;
  background:radial-gradient(circle at 34% 28%,#fff9d8,#ffd23f 46%,#e07a12 78%,#8e3d05);
  box-shadow:0 0 0 5px rgba(0,0,0,.4),0 0 34px rgba(255,180,60,.55),inset 0 -5px 12px rgba(120,50,0,.4)}
.res-grade-text{text-align:left;min-width:0}
.res-grade-label{font-family:var(--font-blk);font-size:clamp(17px,4.4vw,32px);line-height:1.05;color:#fff}
.res-grade-sub{font-family:var(--font-blk);font-size:clamp(9px,2.1vw,12px);letter-spacing:.2em;color:var(--gold);margin:.3em 0 .5em}
.res-grade-blurb{font-size:clamp(11px,2.4vw,13px);color:#b3c0d8;line-height:1.55}
.res-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:7px;margin-bottom:18px}
.res-stats div{background:rgba(255,255,255,.05);border-radius:8px;padding:.55em .7em;text-align:left;
  border-left:3px solid rgba(255,210,63,.4)}
.res-stats span{display:block;font-size:9.5px;letter-spacing:.16em;color:#8fa4c8;
  font-family:var(--font-blk);text-transform:uppercase}
.res-stats b{font-family:var(--font-blk);font-size:clamp(15px,3.4vw,21px);color:#fff}
.res-stats i{display:block;font-style:normal;font-size:10px;color:#7b88a6;margin-top:2px}
.res-actions{display:flex;flex-direction:column;align-items:center;gap:9px}

/* ═══════════════ HUD ═══════════════ */
.hud{position:absolute;inset:0;pointer-events:none;z-index:20;display:none;
  opacity:var(--hud);
  padding:calc(8px + var(--safe-t)) calc(10px + var(--safe-r)) calc(8px + var(--safe-b)) calc(10px + var(--safe-l))}
.hud.is-on{display:block}
.hud-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}

/* clock */
.hud-time{text-align:left;flex:0 0 auto}
.hud-time-label{font-family:var(--font-blk);font-size:clamp(8px,1.7vw,11px);letter-spacing:.34em;color:#9db0d4;
  text-shadow:0 2px 4px #000}
.hud-time-value{font-family:var(--font-blk);font-size:clamp(38px,8.4vw,74px);line-height:.86;
  color:#fff;letter-spacing:-.02em;transform:skewX(-7deg);
  text-shadow:-2px 0 #06070f,2px 0 #06070f,0 -2px #06070f,0 2px #06070f,0 6px 0 rgba(0,0,0,.5),0 0 26px rgba(120,190,255,.4)}
.hud-time-bar{width:clamp(88px,18vw,150px);height:7px;margin-top:5px;border-radius:5px;
  background:rgba(6,8,18,.72);border:1.5px solid rgba(255,255,255,.2);overflow:hidden}
.hud-time-bar i{display:block;height:100%;width:100%;border-radius:4px;
  background:linear-gradient(90deg,#31c25a,#9ff06a);transition:width .16s linear}
.hud-time.is-warn .hud-time-value{color:#ffd23f;animation:warnPulse .62s steps(2) infinite}
.hud-time.is-warn .hud-time-bar i{background:linear-gradient(90deg,#f0a020,#ffd23f)}
.hud-time.is-crit .hud-time-value{color:#ff4a3a;animation:critPulse .3s steps(2) infinite;
  text-shadow:-2px 0 #200,2px 0 #200,0 -2px #200,0 2px #200,0 0 32px rgba(255,60,40,.9)}
.hud-time.is-crit .hud-time-bar i{background:linear-gradient(90deg,#c01808,#ff4a3a)}
@keyframes warnPulse{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes critPulse{0%,100%{opacity:1;transform:skewX(-7deg) scale(1)}50%{opacity:.5;transform:skewX(-7deg) scale(1.09)}}

/* destination */
.hud-dest{display:flex;align-items:center;gap:clamp(5px,1.4vw,12px);flex:1 1 auto;justify-content:center;
  min-width:0;padding-top:2px;opacity:0;transition:opacity .25s}
.hud-dest.is-on{opacity:1}
.hud-dest-arrowwrap{width:clamp(44px,9vw,78px);height:clamp(44px,9vw,78px);flex:0 0 auto;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}
.hud-dest-arrow{width:100%;height:100%;transform-origin:50% 50%;transition:transform .07s linear}
.hud-dest-text{min-width:0;text-align:left}
.hud-dest-name{font-family:var(--font-blk);font-size:clamp(12px,3vw,25px);line-height:1;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(46vw,420px);
  text-shadow:-2px 0 #06070f,2px 0 #06070f,0 -2px #06070f,0 2px #06070f,0 4px 0 rgba(0,0,0,.5)}
.hud-dest-dist{font-family:var(--font-blk);font-size:clamp(15px,3.6vw,30px);line-height:1.1;color:var(--gold);
  text-shadow:-2px 0 #200a00,2px 0 #200a00,0 -2px #200a00,0 2px #200a00}
.hud-dest-dist em{font-style:normal;font-size:.5em;opacity:.8;margin-left:.15em}
.hud-dest.is-close .hud-dest-dist{color:#7dff9c;animation:warnPulse .5s ease-in-out infinite}

/* money */
.hud-money{text-align:right;flex:0 0 auto}
.hud-money-label{font-family:var(--font-blk);font-size:clamp(8px,1.7vw,11px);letter-spacing:.34em;color:#9db0d4;
  text-shadow:0 2px 4px #000}
.hud-money-value{font-family:var(--font-blk);font-size:clamp(22px,5.2vw,44px);line-height:.95;transform:skewX(-7deg);
  background:linear-gradient(180deg,#fffbe8,#ffd23f 52%,#e8901a);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 #4a1500) drop-shadow(0 3px 7px rgba(0,0,0,.7))}
.hud-money-best{font-family:var(--font-blk);font-size:clamp(7px,1.5vw,10px);letter-spacing:.16em;color:#7f8fb5}
.hud-money.is-pop .hud-money-value{animation:moneyPop .42s cubic-bezier(.2,1.7,.4,1)}
@keyframes moneyPop{0%{transform:skewX(-7deg) scale(1)}35%{transform:skewX(-7deg) scale(1.28)}100%{transform:skewX(-7deg) scale(1)}}

/* tip meter */
.hud-tip{position:absolute;left:calc(10px + var(--safe-l));top:clamp(94px,20vw,150px);
  display:none;align-items:center;gap:6px}
.hud-tip.is-on{display:flex}
.hud-tip-label{font-family:var(--font-blk);font-size:9px;letter-spacing:.2em;color:#9db0d4}
.hud-tip-bar{width:clamp(60px,13vw,110px);height:9px;border-radius:5px;background:rgba(6,8,18,.72);
  border:1.5px solid rgba(255,255,255,.2);overflow:hidden}
.hud-tip-bar i{display:block;height:100%;width:100%;
  background:linear-gradient(90deg,#f07a17,#ffd23f);transition:width .2s linear}
.hud-tip-value{font-family:var(--font-blk);font-size:clamp(11px,2.4vw,15px);color:var(--gold);
  text-shadow:0 2px 3px #000}

/* combo */
.hud-combo{position:absolute;right:calc(10px + var(--safe-r));top:clamp(74px,16vw,124px);
  text-align:right;opacity:0;transform:translateX(14px);transition:opacity .16s,transform .16s;pointer-events:none}
.hud-combo.is-on{opacity:1;transform:none}
.hud-combo-x{font-family:var(--font-blk);font-size:clamp(28px,7vw,56px);line-height:.9;
  color:#fff;transform:skewX(-9deg);
  text-shadow:-2px 0 #2a0030,2px 0 #2a0030,0 -2px #2a0030,0 2px #2a0030,0 0 26px var(--pink)}
.hud-combo-x em{font-style:normal;font-size:.5em;color:var(--pink)}
.hud-combo-word{font-family:var(--font-blk);font-size:clamp(9px,2.1vw,14px);letter-spacing:.14em;
  color:var(--pink);text-shadow:0 2px 4px #000}
.hud-combo-bar{width:clamp(56px,12vw,100px);height:5px;margin-left:auto;margin-top:4px;border-radius:4px;
  background:rgba(6,8,18,.7);border:1px solid rgba(255,255,255,.2);overflow:hidden}
.hud-combo-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff3f8e,#ffd23f)}
.hud-combo.is-hot .hud-combo-x{animation:comboHot .3s ease-out}
@keyframes comboHot{0%{transform:skewX(-9deg) scale(1.5)}100%{transform:skewX(-9deg) scale(1)}}

/* bonus feed */
.hud-bonus{position:absolute;right:calc(10px + var(--safe-r));top:clamp(150px,32vw,240px);
  display:flex;flex-direction:column;align-items:flex-end;gap:4px;pointer-events:none}
.bpop{font-family:var(--font-blk);padding:.24em .68em;border-radius:6px;line-height:1.1;
  transform:skewX(-9deg) translateX(60px);opacity:0;text-align:right;
  animation:bpopIn .3s cubic-bezier(.15,1.6,.4,1) forwards;
  box-shadow:0 5px 0 rgba(0,0,0,.42),0 8px 22px rgba(0,0,0,.5);border:2px solid rgba(255,255,255,.34)}
.bpop b{display:block;font-size:clamp(12px,2.9vw,21px);letter-spacing:.02em}
.bpop i{display:block;font-style:normal;font-size:clamp(8px,1.8vw,11px);letter-spacing:.12em;opacity:.85}
.bpop.is-out{animation:bpopOut .28s ease-in forwards}
@keyframes bpopIn{0%{transform:skewX(-9deg) translateX(70px) scale(.6);opacity:0}
  60%{transform:skewX(-9deg) translateX(-6px) scale(1.1);opacity:1}
  100%{transform:skewX(-9deg) translateX(0) scale(1);opacity:1}}
@keyframes bpopOut{to{transform:skewX(-9deg) translateX(50px) scale(.85);opacity:0}}

/* passenger */
.hud-pax{position:absolute;left:calc(10px + var(--safe-l));bottom:calc(10px + var(--safe-b));
  display:none;align-items:flex-end;gap:8px;max-width:min(70vw,540px)}
.hud-pax.is-on{display:flex}
.hud-pax-face{width:clamp(46px,11vw,84px);height:clamp(46px,11vw,84px);flex:0 0 auto;border-radius:10px;
  border:2.5px solid rgba(255,210,63,.62);background:#131a2e;
  box-shadow:0 5px 16px rgba(0,0,0,.6);image-rendering:auto}
.hud-pax-info{padding-bottom:3px;min-width:0}
.hud-pax-name{font-family:var(--font-blk);font-size:clamp(10px,2.4vw,16px);color:#fff;line-height:1;
  white-space:nowrap;text-shadow:-1.5px 0 #06070f,1.5px 0 #06070f,0 -1.5px #06070f,0 1.5px #06070f}
.hud-pax-role{font-family:var(--font-blk);font-size:clamp(7px,1.6vw,10px);letter-spacing:.13em;color:var(--gold);
  white-space:nowrap;text-shadow:0 1px 3px #000}
.hud-pax-bubble{position:absolute;left:0;bottom:calc(100% + 8px);max-width:min(66vw,420px);
  background:#fffdf4;color:#1a1206;border-radius:12px;padding:.44em .74em;
  font-size:clamp(10px,2.3vw,14px);font-weight:700;line-height:1.32;
  box-shadow:0 6px 18px rgba(0,0,0,.55);opacity:0;transform:translateY(8px) scale(.9);
  transform-origin:12% 100%;transition:opacity .16s,transform .16s;border:2px solid #1a1206}
.hud-pax-bubble::after{content:'';position:absolute;left:16px;top:100%;width:0;height:0;
  border:9px solid transparent;border-top-color:#1a1206;border-bottom:0}
.hud-pax-bubble.is-on{opacity:1;transform:none}
.hud-pax-bubble.is-shout{background:#ffe14a;transform:rotate(-1.4deg);font-size:clamp(11px,2.7vw,16px)}

/* speedo */
.hud-speedo{position:absolute;right:calc(10px + var(--safe-r));bottom:calc(10px + var(--safe-b));
  width:clamp(84px,17vw,142px);text-align:center;opacity:.94}
.speedo-svg{width:100%;display:block;filter:drop-shadow(0 3px 7px rgba(0,0,0,.6))}
.speedo-num{margin-top:-32%;font-family:var(--font-blk);font-size:clamp(19px,4.4vw,34px);line-height:1;color:#fff;
  text-shadow:-2px 0 #06070f,2px 0 #06070f,0 -2px #06070f,0 2px #06070f}
.speedo-num em{display:block;font-style:normal;font-size:.31em;letter-spacing:.2em;color:#9db0d4;margin-top:.3em}
.speedo-gear{font-family:var(--font-blk);font-size:clamp(10px,2.2vw,14px);color:var(--gold);
  text-shadow:0 2px 3px #000;margin-top:2px}

/* centre call-to-action */
.hud-cta{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);text-align:center;
  font-family:var(--font-blk);pointer-events:none;opacity:0;transition:opacity .2s}
.hud-cta.is-on{opacity:1}
.hud-cta b{display:block;font-size:clamp(19px,5.4vw,44px);color:#fff;letter-spacing:.02em;
  transform:skewX(-8deg);
  text-shadow:-3px 0 #06070f,3px 0 #06070f,0 -3px #06070f,0 3px #06070f,0 7px 0 rgba(0,0,0,.5)}
.hud-cta i{display:block;font-style:normal;font-size:clamp(9px,2.1vw,14px);letter-spacing:.28em;
  color:var(--gold);margin-top:.5em;text-shadow:0 2px 4px #000}
.hud-cta.is-big b{animation:ctaPop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes ctaPop{0%{transform:skewX(-8deg) scale(2.1);opacity:0}100%{transform:skewX(-8deg) scale(1);opacity:1}}

.hud-pausebtn{position:absolute;right:calc(10px + var(--safe-r));top:calc(8px + var(--safe-t));
  width:34px;height:34px;border-radius:9px;border:2px solid rgba(255,255,255,.22);
  background:rgba(8,10,22,.62);color:#fff;font-size:12px;cursor:pointer;pointer-events:auto;
  display:none;letter-spacing:1px}
body.is-touch .hud-pausebtn{display:block}
body.is-touch .hud-money{margin-right:42px}

/* ═══ TOUCH CONTROLS ═══ */
.touch{position:absolute;inset:0;z-index:25;display:none;pointer-events:none}
.touch.is-on{display:block}
.touch-steer{position:absolute;left:0;bottom:0;width:46%;height:52%;pointer-events:auto;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  padding:0 0 calc(14px + var(--safe-b)) calc(10px + var(--safe-l))}
.touch-steer-track{position:relative;width:min(80%,300px);height:clamp(46px,11vh,68px);border-radius:40px;
  background:rgba(8,10,22,.5);border:2.5px solid rgba(255,255,255,.2);
  box-shadow:inset 0 3px 12px rgba(0,0,0,.55)}
.touch-steer-track::before{content:'';position:absolute;left:50%;top:14%;bottom:14%;width:2px;
  background:rgba(255,255,255,.16);transform:translateX(-1px)}
.touch-steer-track i{position:absolute;top:50%;left:50%;width:clamp(42px,10vh,62px);height:clamp(42px,10vh,62px);
  margin-top:calc(clamp(42px,10vh,62px) / -2);margin-left:calc(clamp(42px,10vh,62px) / -2);
  border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#c9d4e2 42%,#7d8b9e 74%,#eef3f8);
  box-shadow:0 5px 14px rgba(0,0,0,.6),inset 0 -3px 8px rgba(0,0,0,.24);
  transition:transform .05s linear}
.touch-steer-hint{font-family:var(--font-blk);font-size:9px;letter-spacing:.34em;color:rgba(255,255,255,.34);
  margin-top:6px}
.touch-right{position:absolute;right:calc(8px + var(--safe-r));bottom:calc(8px + var(--safe-b));
  display:grid;grid-template-columns:auto auto;gap:8px;align-items:end;pointer-events:none}
.tbtn{pointer-events:auto;font-family:var(--font-blk);border:2.5px solid rgba(255,255,255,.26);
  border-radius:50%;color:#fff;cursor:pointer;letter-spacing:.05em;
  display:grid;place-items:center;user-select:none;
  box-shadow:0 5px 0 rgba(0,0,0,.4),0 8px 18px rgba(0,0,0,.5);transition:transform .07s,filter .07s}
.tbtn:active,.tbtn.is-held{transform:translateY(4px) scale(.96);filter:brightness(1.35);
  box-shadow:0 1px 0 rgba(0,0,0,.4)}
.tbtn-gas{grid-column:2;grid-row:1 / span 2;width:clamp(76px,20vh,116px);height:clamp(76px,20vh,116px);
  font-size:clamp(14px,3.4vh,22px);background:radial-gradient(circle at 36% 30%,#8ff07a,#31c25a 46%,#0f6b2c)}
.tbtn-brake{grid-column:1;grid-row:2;width:clamp(56px,14vh,84px);height:clamp(56px,14vh,84px);
  font-size:clamp(9px,2.2vh,13px);background:radial-gradient(circle at 36% 30%,#ff9a86,#e03127 46%,#8e1710)}
.tbtn-hand{grid-column:1;grid-row:1;width:clamp(52px,13vh,76px);height:clamp(52px,13vh,76px);
  font-size:clamp(8px,2vh,12px);background:radial-gradient(circle at 36% 30%,#7fd3ff,#1f6fd0 46%,#0d3a75)}
.tbtn-horn{grid-column:2;grid-row:3;width:clamp(48px,12vh,68px);height:clamp(48px,12vh,68px);
  font-size:clamp(8px,1.9vh,11px);background:radial-gradient(circle at 36% 30%,#ffe98a,#f0a71e 46%,#8e5a05);
  color:#341f00;justify-self:end;margin-top:8px}

/* ═══ FX LAYERS ═══ */
.fx-flash{position:absolute;inset:0;z-index:30;pointer-events:none;opacity:0;background:#fff;
  mix-blend-mode:screen}
.fx-vignette{position:absolute;inset:0;z-index:22;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(ellipse at 50% 50%,transparent 38%,rgba(120,0,0,.55) 100%)}
.fx-vignette.is-on{opacity:1;animation:vigPulse .68s ease-in-out infinite}
@keyframes vigPulse{0%,100%{opacity:.55}50%{opacity:1}}
.fx-rain{position:absolute;inset:0;z-index:21;pointer-events:none;opacity:0;transition:opacity 1.4s;
  background-image:repeating-linear-gradient(102deg,rgba(190,215,255,.16) 0 1px,transparent 1px 4px);
  background-size:auto}
.fx-rain.is-on{opacity:1;animation:rainSlide .42s linear infinite}
@keyframes rainSlide{to{background-position:-46px 200px}}

/* ═══ ROTATE HINT ═══
   A suggestion, never a wall: portrait is playable, landscape is better. */
.rotate-hint{position:absolute;left:50%;top:calc(50% - 10px);transform:translate(-50%,-50%);
  z-index:60;display:none;pointer-events:none;
  background:rgba(6,8,18,.9);border:2px solid rgba(255,210,63,.5);border-radius:14px;
  padding:14px 20px;text-align:center;box-shadow:0 14px 40px rgba(0,0,0,.6);
  animation:hintIn .3s ease-out}
.rotate-hint.is-on{display:block}
@keyframes hintIn{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
.rotate-hint b{display:block;font-size:38px;color:var(--gold);animation:rotSpin 2.1s ease-in-out infinite}
.rotate-hint span{display:block;margin-top:8px;font-family:var(--font-blk);font-size:11px;
  letter-spacing:.1em;color:#c6d2e6;line-height:1.6;max-width:15em}
@keyframes rotSpin{0%,100%{transform:rotate(0)}50%{transform:rotate(90deg)}}

/* ═══ TOUCH LAYOUT ═══
   The thumbs own the bottom corners, so everything the player reads moves out
   of the way: the passenger panel goes up the left edge, the speedometer sits
   in the dead space between the wheel and the pedals. */
body.is-touch .hud-pax{
  bottom:auto;top:calc(100px + var(--safe-t));align-items:flex-start;max-width:56vw}
body.is-touch .hud-pax-face{width:clamp(38px,8vw,58px);height:clamp(38px,8vw,58px)}
body.is-touch .hud-pax-info{padding-bottom:0;padding-top:2px;max-width:30vw;overflow:hidden}
body.is-touch .hud-pax-name,body.is-touch .hud-pax-role{overflow:hidden;text-overflow:ellipsis}
body.is-touch .hud-pax-bubble{
  position:static;margin-left:6px;max-width:40vw;transform-origin:0 50%;
  align-self:center;order:3}
body.is-touch .hud-pax-bubble::after{
  left:-9px;top:50%;transform:translateY(-50%);
  border:8px solid transparent;border-right-color:#1a1206;border-left:0}
body.is-touch .hud-tip{top:calc(70px + var(--safe-t))}
body.is-touch .hud-speedo{
  left:50%;right:auto;transform:translateX(-50%);
  width:clamp(64px,11vw,92px);bottom:calc(4px + var(--safe-b));opacity:.9}
body.is-touch .hud-combo{top:calc(58px + var(--safe-t))}
body.is-touch .hud-bonus{top:calc(132px + var(--safe-t));max-width:44vw}
body.is-touch .hud-cta{top:44%}
body.is-touch .touch-steer-hint{margin-top:3px;font-size:8px}
body.is-touch .touch-steer{height:46%;padding-bottom:calc(10px + var(--safe-b))}

/* Portrait: the buttons must be sized from the WIDTH, or a tall phone renders
   pedals big enough to hide the road. Controls drop to the bottom band and the
   playfield keeps the upper two thirds. */
@media (orientation:portrait){
  body.is-touch .hud-pax{max-width:80vw}
  body.is-touch .hud-pax-bubble{max-width:52vw}
  body.is-touch .hud-bonus{max-width:60vw}
  body.is-touch .hud-dest-name{max-width:48vw}
  body.is-touch .hud-speedo{
    left:auto;right:calc(8px + var(--safe-r));transform:none;
    bottom:calc(178px + var(--safe-b));width:clamp(58px,16vw,78px)}
  body.is-touch .touch-steer{width:100%;height:22%;align-items:center;padding-left:0}
  body.is-touch .touch-steer-track{width:min(86%,340px)}
  body.is-touch .touch-right{bottom:calc(104px + var(--safe-b));gap:7px}
  body.is-touch .tbtn-gas{width:clamp(62px,21vw,94px);height:clamp(62px,21vw,94px);font-size:clamp(12px,3.6vw,17px)}
  body.is-touch .tbtn-brake{width:clamp(48px,15vw,68px);height:clamp(48px,15vw,68px);font-size:clamp(8px,2.6vw,11px)}
  body.is-touch .tbtn-hand{width:clamp(44px,13.5vw,62px);height:clamp(44px,13.5vw,62px);font-size:clamp(7px,2.4vw,10px)}
  body.is-touch .tbtn-horn{width:clamp(40px,12vw,56px);height:clamp(40px,12vw,56px);font-size:clamp(7px,2.2vw,10px);margin-top:5px}
}

/* ═══ RESPONSIVE ═══ */
@media (max-width:760px){
  .hud-dest-name{max-width:38vw}
  .pause-stats{grid-template-columns:1fr}
}
@media (max-height:460px){
  .hud-time-value{font-size:clamp(28px,7vw,44px)}
  .hud-pax-face{width:52px;height:52px}
  .title-wrap{gap:5px}
  .title-main{font-size:clamp(40px,12vw,88px)}
  .panel{padding:12px 16px}
}
@media (orientation:portrait) and (max-width:900px) and (pointer:coarse){
  .touch-steer{width:100%;height:34%}
  .touch-steer-track{width:min(88%,340px)}
  .touch-right{bottom:calc(90px + var(--safe-b))}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important}
}