:root{--purple:#5a217f;--purple2:#7c43a0;--ink:#101b24;--panel:#15242e;--gold:#f8b72b;--lime:#82d12e}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#0a141b;color:#fff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;overscroll-behavior:none}body{display:flex;justify-content:center}.game-shell{width:100%;min-height:100vh;background:#0e1921;display:flex;flex-direction:column}.topbar{height:66px;padding:8px 18px;background:linear-gradient(#fff,#f2f4f5);color:var(--ink);border-bottom:5px solid var(--purple);display:flex;align-items:center;justify-content:space-between;box-shadow:0 3px 0 rgba(0,0,0,.28);z-index:5}.brand{display:flex;align-items:center;gap:14px}.brand img{width:min(250px,42vw);height:38px}.brand div{display:flex;flex-direction:column;letter-spacing:.09em}.brand div strong{font-size:16px}.brand span{font-size:11px;color:#68747c}.icon-btn{width:48px;height:48px;border:3px solid #0b151c;border-radius:12px;background:linear-gradient(#243743,#111d25);color:#fff;font-size:20px;font-weight:900;cursor:pointer;box-shadow:inset 0 0 0 2px #536774,0 3px 0 #061015}.hud{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;padding:9px 10px;margin:-8px 12px 18px;background:linear-gradient(#11212b,#0b171f);border:3px solid #263b48;border-radius:16px;box-shadow:0 -4px 12px rgba(0,0,0,.28),0 7px 18px rgba(0,0,0,.28);position:relative;z-index:4}.hud-card{min-height:66px;padding:8px 12px;border:3px solid #0b151c;border-radius:14px;background:linear-gradient(#213743,#13242e);box-shadow:inset 0 0 0 2px #3e5663,0 3px 0 #050b0f;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon label" "icon value" "bar bar";column-gap:8px;align-items:center}.hud-card:before{grid-area:icon;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:linear-gradient(#334c5a,#172832);font-size:20px;box-shadow:inset 0 0 0 2px #607783}.hud-card:nth-child(1):before{content:'⚡'}.hud-card:nth-child(2):before{content:'⚙'}.hud-card:nth-child(3):before{content:'🔧'}.hud-card:nth-child(4):before{content:'📦'}.hud-card:nth-child(5):before{content:'✓'}.hud-card:nth-child(6):before{content:'€'}.hud-card:nth-child(7):before{content:'★';color:var(--gold)}.hud-card span{grid-area:label;font-size:10px;letter-spacing:.09em;color:#d2dbe0;font-weight:800}.hud-card strong{grid-area:value;font-size:19px;text-shadow:0 2px 0 #000}.bar,.progress{grid-area:bar;height:8px;margin-top:7px;border-radius:99px;background:#283b46;overflow:hidden;box-shadow:inset 0 1px 2px #061015}.bar i,.progress i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#ed5a34,#f4b72d,#9ee13c);transition:width .2s}.bar.cargo i{background:linear-gradient(90deg,#d64b3d,#f0b438,#74cf44)}.canvas-wrap{position:relative;flex:0 0 auto;min-height:0;overflow:hidden;background:#8ed5f0}canvas{display:block;width:100%;height:auto;aspect-ratio:32/15;touch-action:none}.zone-badge{position:absolute;left:15px;top:15px;padding:9px 14px;border:3px solid #0e1a22;border-left:7px solid var(--purple);border-radius:12px;background:linear-gradient(#fff,#e9eef1);color:#18262f;font-size:13px;font-weight:950;letter-spacing:.05em;box-shadow:0 3px 0 rgba(0,0,0,.3)}.work-order{position:absolute;right:15px;top:15px;width:258px;padding:14px;border:3px solid #0b151c;border-left:7px solid var(--purple);border-radius:14px;background:linear-gradient(155deg,rgba(34,54,65,.97),rgba(13,25,33,.97));box-shadow:inset 0 0 0 2px #425966,0 4px 0 rgba(0,0,0,.34);pointer-events:none}.work-order>span{font-size:10px;letter-spacing:.14em;color:#c6d0d6}.work-order ol{margin:10px 0 0;padding-left:20px;font-size:11px;line-height:1.55;color:#d7e0e4}.work-order li.done{color:#7edb78;text-decoration:line-through;text-decoration-thickness:2px}.message{position:absolute;left:50%;top:14%;transform:translate(-50%,-8px);max-width:82%;padding:13px 20px;border:3px solid #fff;border-radius:14px;background:linear-gradient(#203743,#111f28);font-weight:900;text-align:center;opacity:0;transition:.18s;pointer-events:none;box-shadow:0 6px 0 rgba(0,0,0,.35)}.message.show{opacity:1;transform:translate(-50%,0)}.overlay{position:absolute;inset:0;padding:20px;background:rgba(5,12,17,.76);display:none;align-items:center;justify-content:center}.overlay.visible{display:flex}.panel{width:min(560px,94%);padding:29px;border-radius:20px;border:4px solid #111d25;border-top:10px solid var(--purple);background:linear-gradient(#fff,#edf1f3);color:var(--ink);text-align:center;box-shadow:0 20px 0 rgba(0,0,0,.25),0 28px 70px rgba(0,0,0,.4)}.panel img{width:min(330px,80%)}.panel p{line-height:1.5;color:#4b5a63}.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:19px 0}.keys span{padding:11px 5px;border:2px solid #aab5bb;border-radius:11px;background:linear-gradient(#f9fbfc,#dce4e8);font-size:13px;box-shadow:0 3px 0 #9aa7ad}.primary{padding:14px 25px;border:3px solid #321147;border-radius:12px;background:linear-gradient(#7c42a1,#56217a);color:#fff;font-size:17px;font-weight:950;cursor:pointer;box-shadow:inset 0 0 0 2px #9f6cbd,0 4px 0 #321147}.mobile-controls{display:none;grid-template-columns:1fr 1fr;gap:18px;padding:14px 18px;background:#0c171f}.pedal{height:82px;border:4px solid #111a20;border-radius:18px;background:linear-gradient(#e4e8ea,#9caab1);color:#17242c;font-size:18px;font-weight:950;touch-action:none;box-shadow:inset 0 0 0 3px #f5f7f8,0 5px 0 #050b0f}.pedal.gas{background:linear-gradient(#8553a6,#57217e);color:#fff}.pedal.active{transform:translateY(4px)}footer{padding:0 9px 8px;text-align:center;color:#83949e;font-size:12px}@media(max-width:1100px){.hud{grid-template-columns:repeat(4,1fr);margin:-6px 10px 14px}}@media(max-width:850px){.hud{grid-template-columns:repeat(3,1fr);margin:0 8px 10px}.work-order{width:215px}}@media(max-width:650px){.topbar{height:61px;padding:8px 11px}.brand img{height:30px}.brand div{display:none}.hud{grid-template-columns:1fr 1fr;padding:6px;margin:0 6px 8px}.hud-card{min-height:54px;padding:6px 9px}.hud-card strong{font-size:16px}.hud-card:before{width:29px;height:29px;font-size:16px}.work-order{right:7px;top:7px;width:185px;padding:8px 10px}.work-order ol{display:block;margin-top:6px;font-size:8px;line-height:1.35}.zone-badge{left:7px;top:7px;font-size:10px}.mobile-controls{display:grid}.keys{display:none}footer{display:none}}

#gearText.shifting{transform:scale(1.08);opacity:.72}.hud-card strong{transition:transform .15s ease,opacity .15s ease}

.score-panel{max-height:94%;overflow:auto}.score-breakdown{font-size:13px}.competition-form{display:grid;gap:11px;margin:17px auto 8px;max-width:460px;text-align:left}.competition-form>label:first-child{font-weight:900}.competition-form input[type=email]{width:100%;padding:13px 14px;border:2px solid #9aa8af;border-radius:10px;background:#fff;color:var(--ink);font:700 16px system-ui}.competition-form input[type=email]:focus{outline:3px solid rgba(124,67,160,.25);border-color:var(--purple)}.consent-row{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:13px;line-height:1.4}.consent-row input{width:19px;height:19px;margin:1px 0 0;accent-color:var(--purple)}.privacy-note{margin:0;font-size:12px}.privacy-note a{color:var(--purple);font-weight:800}.competition-form .primary{width:100%}.competition-form .primary:disabled{cursor:not-allowed;filter:grayscale(.6);opacity:.65}.competition-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.submission-status{min-height:1.4em;margin:8px 0;color:#4b5a63;font-weight:700}.rank-result{margin:8px 0 16px!important;padding:12px;border-radius:10px;background:#e8f4df;color:#28561c!important;font-size:17px;font-weight:950}.rank-result:empty{display:none}.secondary{margin-top:4px;background:linear-gradient(#536772,#344650);border-color:#23343d;box-shadow:inset 0 0 0 2px #778b95,0 4px 0 #23343d}

.top-actions{display:flex;align-items:center;gap:9px}.top-actions #fullscreenBtn{color:#f8b72b}.top-actions #soundBtn[aria-pressed="true"]{color:#a7b3ba;filter:saturate(.2);opacity:.72}


/* 5.6.8: keep the action buttons geometrically centred in the game header. */
.topbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  justify-content:normal;
  position:relative;
}
.brand{grid-column:1;justify-self:start;min-width:0}
.top-actions{grid-column:2;justify-self:center;align-self:center}
@media(max-width:650px){
  .brand img{width:min(180px,34vw)}
  .top-actions{gap:5px}
  .top-actions .icon-btn{width:42px;height:42px;border-width:2px;font-size:18px}
}

/* 5.6.27: analogue speed/RPM instruments and a live five-speed H pattern. */
.hud{grid-template-columns:repeat(8,minmax(0,1fr));align-items:stretch}
.analog-card,.h-gear-card{min-height:132px;padding:7px 5px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:1px;overflow:hidden}
.analog-card:before,.h-gear-card:before{display:none}
.analog-card>span,.h-gear-card>span{grid-area:auto;color:#dce6eb;font-size:9px;line-height:1.1;text-align:center;letter-spacing:.11em}
.analog-gauge{position:relative;width:108px;height:108px;flex:0 0 108px}
.analog-gauge svg{display:block;width:108px;height:108px;filter:drop-shadow(0 3px 2px rgba(0,0,0,.45))}
.gauge-face{fill:#091218;stroke:#607783;stroke-width:4}
.gauge-arc{fill:none;stroke:#d8e1e5;stroke-width:2.5;stroke-linecap:round}
.gauge-ticks{fill:none;stroke:#eef3f5;stroke-width:2.5;stroke-linecap:round}
.gauge-labels{fill:#cbd6db;font:700 8px ui-monospace,monospace;text-anchor:middle}
.gauge-labels{stroke:#091218;stroke-width:2.4px;paint-order:stroke fill;stroke-linejoin:round}
.gauge-needle{fill:#ef543b;filter:drop-shadow(0 1px 1px #000);transition:transform .08s linear}
.gauge-hub{fill:#d9e1e4;stroke:#263944;stroke-width:3}
.tach-redline{fill:none;stroke:#e44c38;stroke-width:5;stroke-linecap:round}
.gauge-readout{position:absolute;left:50%;bottom:11px;transform:translateX(-50%);min-width:72px;padding:2px 5px;border:1px solid #536671;border-radius:4px;background:#101d24;color:#fff;font:800 10px ui-monospace,monospace!important;line-height:1.1;text-align:center;text-shadow:0 1px #000;white-space:nowrap}
.h-gear-card{gap:4px}
.h-pattern{position:relative;width:104px;height:82px;margin-top:1px;border:2px solid #536874;border-radius:10px;background:linear-gradient(#0d1a21,#081116);box-shadow:inset 0 0 0 2px #172a34,inset 0 5px 12px rgba(0,0,0,.45)}
.h-line{position:absolute;display:block;background:#81929a;border-radius:5px;box-shadow:0 1px #000}
.h-horizontal{left:20px;right:20px;top:39px;height:4px}.h-left,.h-middle,.h-right{top:14px;width:4px;height:54px}.h-left{left:25px}.h-middle{left:50px}.h-right{right:25px}
.h-pattern b{position:absolute;z-index:2;display:grid;place-items:center;width:24px;height:24px;border:2px solid #60737d;border-radius:50%;background:#172832;color:#d7e0e4;font:900 12px system-ui;box-shadow:0 2px 0 #05090b;transition:.12s}
.h-pattern b[data-gear="1"]{left:14px;top:2px}.h-pattern b[data-gear="3"]{left:39px;top:2px}.h-pattern b[data-gear="5"]{right:14px;top:2px}.h-pattern b[data-gear="2"]{left:14px;bottom:2px}.h-pattern b[data-gear="4"]{left:39px;bottom:2px}.h-pattern b[data-gear="R"]{right:14px;bottom:2px}
.h-pattern b.active{border-color:#fff;background:linear-gradient(#9c63bd,#5a217f);color:#fff;transform:scale(1.18);box-shadow:0 0 0 3px rgba(172,111,207,.25),0 2px 0 #200b2e}
.h-pattern.between:after{content:'';position:absolute;z-index:3;left:43px;top:31px;width:14px;height:14px;border:2px solid #fff;border-radius:50%;background:#6c2c92;box-shadow:0 0 0 3px rgba(172,111,207,.25)}
.h-pattern.shifting b.active{animation:gear-clutch-pulse .22s ease-in-out infinite alternate}
.gear-readout{grid-area:auto!important;font-size:13px!important;line-height:1.1;text-align:center}
@keyframes gear-clutch-pulse{to{opacity:.42;transform:scale(.94)}}
.hud-card:nth-child(4):before{content:'🔧'}.hud-card:nth-child(5):before{content:'📦'}.hud-card:nth-child(6):before{content:'✓'}.hud-card:nth-child(7):before{content:'€'}.hud-card:nth-child(8):before{content:'★';color:var(--gold)}
@media(max-width:1100px){.hud{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:850px){.hud{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){.hud{grid-template-columns:1fr 1fr}.analog-card,.h-gear-card{min-height:126px}.analog-gauge,.analog-gauge svg{width:102px;height:102px}.analog-gauge{flex-basis:102px}}

/* 5.6.28: fit the entire game into the iframe/fullscreen viewport without an internal scrollbar. */
html,body{width:100%;height:100%;min-height:0;overflow:hidden}
body{display:block}
.game-shell{height:100dvh;min-height:0;overflow:hidden}
.topbar,.hud,.mobile-controls,footer{flex:0 0 auto}
.canvas-wrap{display:grid;place-items:center;flex:1 1 0;min-height:100px;width:100%}
canvas{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;aspect-ratio:auto;contain:paint}
.hud{margin:-4px 8px 7px;padding:7px 8px;gap:7px}
footer{padding:0 7px 4px}
.is-fullscreen .game-shell{height:100dvh}
.is-fullscreen .topbar{padding-top:max(8px,env(safe-area-inset-top))}
@media(max-height:760px){
  .topbar{height:54px;padding:5px 14px}.brand img{height:31px}.icon-btn{width:40px;height:40px;border-width:2px;font-size:17px}
  .analog-card,.h-gear-card{min-height:106px}.analog-gauge,.analog-gauge svg{width:84px;height:84px}.analog-gauge{flex-basis:84px}.gauge-readout{bottom:6px;font-size:8px!important;min-width:61px}
  .h-pattern{transform:scale(.78);transform-origin:top center;margin-bottom:-18px}.gear-readout{font-size:11px!important}
  .hud-card{min-height:54px;padding:5px 7px}.hud{margin:-3px 7px 4px;padding:5px 6px;gap:5px}footer{display:none}
}
@media(max-width:650px){
  .topbar{height:52px;padding:5px 8px}.top-actions{gap:3px}.top-actions .icon-btn{width:36px;height:36px;font-size:15px}.brand img{height:27px}
  .hud{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:-2px 4px 4px;padding:4px}
  .analog-card,.h-gear-card{min-height:100px;padding:3px 1px}.analog-card>span,.h-gear-card>span{font-size:7px;letter-spacing:.05em}
  .analog-gauge,.analog-gauge svg{width:72px;height:72px}.analog-gauge{flex-basis:72px}.gauge-readout{bottom:3px;min-width:52px;padding:1px 3px;font-size:7px!important}
  .h-pattern{transform:scale(.68);transform-origin:top center;margin-top:0;margin-bottom:-25px}.gear-readout{font-size:9px!important}
  .hud-card{min-height:48px;padding:4px 3px;column-gap:3px}.hud-card:before{width:25px;height:25px;font-size:13px}.hud-card span{font-size:7px;letter-spacing:.04em}.hud-card strong{font-size:13px}
  .mobile-controls{gap:8px;padding:5px 8px}.pedal{height:54px;border-width:3px;border-radius:12px;font-size:13px}
  .canvas-wrap{min-height:80px}.work-order{width:165px;padding:6px 8px}.zone-badge{padding:6px 9px}.overlay{padding:8px}.panel{padding:17px;border-top-width:7px}
}
@media(max-width:380px){
  .analog-gauge,.analog-gauge svg{width:66px;height:66px}.analog-gauge{flex-basis:66px}.analog-card,.h-gear-card{min-height:93px}.h-pattern{transform:scale(.61);margin-bottom:-31px}
}

/* 5.6.31: the work order is a neutral checklist; only completed stops change state. */
.bar,.progress{margin-top:4px}

.start-version{margin:6px 0 0;font-size:14px;font-weight:800;letter-spacing:.04em;color:var(--purple)!important}
.start-version span{color:var(--ink)}



/* 5.6.71: fully transparent HUD — no boxes or borders around gauges */
.hud{
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  margin:0 8px 6px!important;
  padding:4px 4px 2px!important;
  gap:8px!important;
}
.hud-card{
  background:transparent!important;
  border:none!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.hud-card:before{display:none!important}
.analog-card,.h-gear-card{
  background:transparent!important;
  border:none!important;
}
.analog-card>span,.h-gear-card>span{
  color:rgba(220,230,236,.85);
  font-size:9px;
  letter-spacing:.12em;
  margin-bottom:2px;
}
.gauge-face{stroke:none}
.gauge-arc{stroke-width:5.5}
.gauge-needle{filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
.gauge-hub{stroke-width:2.5}
.gauge-readout{
  background:transparent!important;
  border:none!important;
  border-radius:0!important;
  padding:2px 7px!important;
  font-size:10px!important;
  bottom:10px;
}
.h-pattern{
  background:transparent!important;
  border-color:rgba(160,180,195,.35)!important;
  box-shadow:none!important;
}

/* Horizontal icon + value alignment for stat cards */
.stat-card{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:stretch!important;
  gap:5px!important;
  min-height:66px;
  padding:8px 10px!important;
  grid-template-columns:none!important;
  grid-template-areas:none!important;
}
.stat-row{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  min-height:34px;
}
.stat-icon{
  flex:0 0 34px;
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:9px;
  background:transparent!important;
  border:none!important;
  font-style:normal;
  font-size:17px;
  line-height:1;
}
.stat-icon.star{color:var(--gold)}
.stat-body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:1px;
  min-width:0;
  flex:1 1 auto;
}
.stat-body span{
  display:block;
  font-size:9px;
  letter-spacing:.1em;
  color:rgba(210,220,226,.88);
  font-weight:800;
  line-height:1.1;
  grid-area:auto!important;
}
.stat-body strong{
  display:block;
  font-size:18px;
  line-height:1.15;
  text-shadow:0 1px 0 rgba(0,0,0,.5);
  grid-area:auto!important;
  margin:0;
}
.stat-card .bar,.stat-card .progress{
  margin-top:0!important;
  height:7px;
  background:rgba(20,35,42,.65);
}
.message{
  background:rgba(12,20,28,.82)!important;
  border:1px solid rgba(255,255,255,.35)!important;
  border-radius:12px!important;
  box-shadow:0 8px 24px rgba(0,0,0,.35)!important;
  backdrop-filter:blur(8px);
  font-size:15px;
  letter-spacing:.02em;
}

/* 5.9.26: large, bottom-centred driving instruments and visible speeding fines. */
.hud{
  display:grid!important;
  grid-template-columns:minmax(190px,1fr) auto minmax(190px,1fr)!important;
  align-items:end!important;
  column-gap:clamp(8px,1.25vw,20px)!important;
  padding:2px 10px 5px!important;
}
.driver-cluster{
  grid-column:2;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:clamp(8px,1.1vw,18px);
  min-width:0;
}
.driver-cluster .analog-card{
  width:clamp(132px,10.5vw,168px);
  min-height:clamp(150px,12vw,188px);
  flex:0 0 auto;
}
.driver-cluster .analog-gauge,
.driver-cluster .analog-gauge svg{
  width:clamp(132px,10.5vw,168px);
  height:clamp(132px,10.5vw,168px);
}
.driver-cluster .analog-gauge{flex-basis:clamp(132px,10.5vw,168px)}
.driver-cluster .gauge-readout{
  bottom:clamp(7px,.7vw,12px);
  min-width:82px;
  padding:3px 7px!important;
  font-size:clamp(9px,.75vw,12px)!important;
}
.driver-cluster .h-gear-card{
  width:132px;
  min-height:154px;
  padding-top:9px!important;
  justify-content:flex-start;
  overflow:visible;
}
.driver-cluster .h-pattern{
  transform:scale(1.12);
  transform-origin:top center;
  margin:7px 7px 13px;
}
.driver-cluster .gear-readout{font-size:14px!important}
.driver-cluster .analog-card>span,
.driver-cluster .h-gear-card>span{font-size:10px;letter-spacing:.12em}
.hud-side{
  display:grid;
  align-items:end;
  gap:clamp(5px,.65vw,10px);
  min-width:0;
  padding-bottom:7px;
}
.hud-side-left{grid-column:1;grid-template-columns:repeat(2,minmax(88px,1fr))}
.hud-side-right{grid-column:3;grid-template-columns:repeat(3,minmax(82px,1fr))}
.hud-side .stat-card{min-width:0;padding:6px!important}
.hud-side .stat-row{gap:5px}
.hud-side .stat-icon{flex-basis:25px;width:25px;height:25px;font-size:14px}
.hud-side .stat-body strong{font-size:clamp(14px,1.15vw,18px)}

.message.fine,
.message.redlight{
  top:10%;
  z-index:50!important;
  min-width:min(440px,86%);
  padding:16px 24px!important;
  font-size:clamp(16px,1.45vw,23px)!important;
  letter-spacing:.055em;
  text-shadow:0 2px 0 rgba(0,0,0,.4);
  visibility:visible;
  opacity:1!important;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.message.fine{
  color:#fff7e8;
  background:linear-gradient(135deg,rgba(177,36,29,.97),rgba(112,16,21,.97))!important;
  border:3px solid #ffd268!important;
  box-shadow:0 0 0 4px rgba(103,9,15,.55),0 10px 28px rgba(0,0,0,.5)!important;
  animation:fine-alert-pulse .42s ease-out 2 alternate;
}
.message.redlight{
  color:#fff;
  background:linear-gradient(135deg,rgba(226,26,29,.98),rgba(83,4,10,.98))!important;
  border:3px solid #fff!important;
  box-shadow:0 0 0 5px rgba(239,45,49,.52),0 10px 30px rgba(0,0,0,.56)!important;
  animation:redlight-alert-pulse .36s ease-out 3 alternate;
}

/* 5.9.32: the instruments share the scene instead of creating letterbox bands. */
.canvas-wrap{
  place-items:stretch;
  background:#1b2329;
}
.canvas-wrap>canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.canvas-wrap>.hud{
  position:absolute!important;
  left:0;
  right:0;
  bottom:0;
  z-index:4;
  margin:0!important;
  padding:4px 12px 7px!important;
  background:linear-gradient(180deg,rgba(12,23,31,0),rgba(9,18,24,.76) 25%,rgba(9,18,24,.92))!important;
  pointer-events:none;
}
.canvas-wrap .overlay{z-index:10}
.canvas-wrap .message{z-index:11}
@keyframes fine-alert-pulse{from{filter:brightness(1);transform:translate(-50%,0) scale(1)}to{filter:brightness(1.16);transform:translate(-50%,0) scale(1.035)}}
@keyframes redlight-alert-pulse{from{filter:brightness(1);transform:translate(-50%,0) scale(1)}to{filter:brightness(1.24);transform:translate(-50%,0) scale(1.045)}}

@media(max-width:1250px), (max-height:800px){
  .driver-cluster .analog-card{width:124px;min-height:141px}
  .driver-cluster .analog-gauge,.driver-cluster .analog-gauge svg{width:124px;height:124px}
  .driver-cluster .analog-gauge{flex-basis:124px}
  .driver-cluster .h-gear-card{width:112px;min-height:137px}
  .driver-cluster .h-pattern{transform:scale(.94);margin:4px 0 1px}
  .driver-cluster .gear-readout{font-size:12px!important}
  .hud-side .stat-icon{display:none}
}
@media(max-width:1000px){
  .hud{
    grid-template-columns:1fr 1fr!important;
    grid-template-rows:auto auto;
    row-gap:2px!important;
  }
  .hud-side{grid-row:1;padding-bottom:0}
  .hud-side-left{grid-column:1}
  .hud-side-right{grid-column:2}
  .driver-cluster{grid-column:1/-1;grid-row:2}
  .hud-side .stat-card{min-height:35px!important;padding:2px 5px!important}
  .hud-side .stat-row{min-height:27px}
  .hud-side .bar{height:5px}
}
@media(max-width:650px){
  .hud{padding:1px 4px 3px!important}
  .hud-side-left{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hud-side-right{grid-template-columns:repeat(3,minmax(0,1fr))}
  .driver-cluster{gap:2px}
  .driver-cluster .analog-card{width:90px;min-height:103px!important;padding:2px 0!important}
  .driver-cluster .analog-gauge,.driver-cluster .analog-gauge svg{width:90px;height:90px}
  .driver-cluster .analog-gauge{flex-basis:90px}
  .driver-cluster .gauge-readout{bottom:3px;min-width:57px;padding:1px 3px!important;font-size:8px!important}
  .driver-cluster .h-gear-card{width:78px;min-height:99px!important;padding:2px 0!important}
  .driver-cluster .h-pattern{transform:scale(.65);margin:1px 0 -27px}
  .driver-cluster .gear-readout{font-size:9px!important}
  .driver-cluster .analog-card>span,.driver-cluster .h-gear-card>span{font-size:7px;letter-spacing:.04em}
  .hud-side .stat-body span{font-size:6px;letter-spacing:.025em}
  .hud-side .stat-body strong{font-size:11px}
  .message.fine,.message.redlight{top:7%;padding:11px 13px!important;font-size:14px!important}
}

/* 5.9.47: touch-first mobile layout with Safari safe-area protection. */
:root{
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
}
.game-shell{height:var(--app-height,100dvh)}
.topbar{
  padding-left:max(18px,var(--safe-left));
  padding-right:max(18px,var(--safe-right));
}
.mobile-controls{
  padding-left:max(18px,var(--safe-left));
  padding-right:max(18px,var(--safe-right));
  padding-bottom:max(10px,var(--safe-bottom));
}
.touch-ui body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}
.touch-ui .game-shell{height:var(--app-height,100dvh);min-height:0}
.touch-ui .mobile-controls{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding-top:6px;
  padding-left:max(9px,var(--safe-left));
  padding-right:max(9px,var(--safe-right));
  padding-bottom:max(9px,var(--safe-bottom));
  background:linear-gradient(#101e27,#071117);
  position:relative;
  z-index:20;
}
.touch-ui .pedal{
  height:clamp(52px,8dvh,68px);
  min-height:48px;
  touch-action:none;
}
.touch-ui footer{display:none}
.touch-ui .topbar{
  height:auto;
  min-height:50px;
  padding-top:max(5px,var(--safe-top));
  padding-bottom:5px;
  padding-left:max(8px,var(--safe-left));
  padding-right:max(8px,var(--safe-right));
}
.touch-ui .keys{display:none}

@media(orientation:portrait){
  .touch-ui .brand img{width:min(100px,27vw);height:auto}
  .touch-ui .top-actions{gap:3px}
  .touch-ui .work-order{display:none}
  .touch-ui .zone-badge{top:7px;left:max(7px,var(--safe-left))}
  .touch-ui .canvas-wrap>.hud{padding-bottom:4px!important}
  .touch-ui .driver-cluster .analog-card{width:82px;min-height:94px!important}
  .touch-ui .driver-cluster .analog-gauge,
  .touch-ui .driver-cluster .analog-gauge svg{width:82px;height:82px}
  .touch-ui .driver-cluster .analog-gauge{flex-basis:82px}
  .touch-ui .driver-cluster .h-gear-card{width:72px;min-height:91px!important}
  .touch-ui .driver-cluster .h-pattern{transform:scale(.59);margin:0 0 -32px}
  .touch-ui .driver-cluster .gear-readout{font-size:8px!important}
  .touch-ui .driver-cluster .analog-card>span,
  .touch-ui .driver-cluster .h-gear-card>span{font-size:6px}
}

@media(orientation:landscape){
  .touch-ui .topbar{min-height:42px;padding-top:max(3px,var(--safe-top));padding-bottom:3px}
  .touch-ui .brand img{width:min(155px,24vw);height:25px}
  .touch-ui .brand div{display:none}
  .touch-ui .top-actions{gap:4px}
  .touch-ui .top-actions .icon-btn{width:34px;height:34px;border-width:2px;border-radius:9px;font-size:14px}
  .touch-ui .mobile-controls{gap:8px;padding-top:3px;padding-bottom:max(5px,var(--safe-bottom))}
  .touch-ui .pedal{height:46px;min-height:42px;border-width:3px;border-radius:11px;font-size:12px}
  .touch-ui .work-order{display:none}
  .touch-ui .zone-badge{left:max(6px,var(--safe-left));top:6px;padding:5px 8px;font-size:8px}
  .touch-ui .canvas-wrap>.hud{
    grid-template-columns:minmax(155px,1fr) auto minmax(195px,1fr)!important;
    grid-template-rows:1fr!important;
    align-items:end!important;
    column-gap:4px!important;
    padding:1px max(5px,var(--safe-right)) 3px max(5px,var(--safe-left))!important;
  }
  .touch-ui .hud-side{grid-row:1!important;padding-bottom:2px!important;gap:2px}
  .touch-ui .hud-side-left{grid-column:1!important;grid-template-columns:repeat(2,minmax(70px,1fr))}
  .touch-ui .hud-side-right{grid-column:3!important;grid-template-columns:repeat(3,minmax(58px,1fr))}
  .touch-ui .driver-cluster{grid-column:2!important;grid-row:1!important;gap:1px}
  .touch-ui .driver-cluster .analog-card{width:70px;min-height:78px!important;padding:0!important}
  .touch-ui .driver-cluster .analog-gauge,
  .touch-ui .driver-cluster .analog-gauge svg{width:70px;height:70px}
  .touch-ui .driver-cluster .analog-gauge{flex-basis:70px}
  .touch-ui .driver-cluster .gauge-readout{bottom:2px;min-width:46px;font-size:6px!important}
  .touch-ui .driver-cluster .h-gear-card{width:59px;min-height:76px!important;padding:0!important}
  .touch-ui .driver-cluster .h-pattern{transform:scale(.48);margin:0 0 -42px}
  .touch-ui .driver-cluster .gear-readout{font-size:7px!important}
  .touch-ui .driver-cluster .analog-card>span,
  .touch-ui .driver-cluster .h-gear-card>span{font-size:5px;letter-spacing:.02em}
  .touch-ui .hud-side .stat-card{min-height:30px!important;padding:1px 3px!important;gap:1px!important}
  .touch-ui .hud-side .stat-row{min-height:21px;gap:2px}
  .touch-ui .hud-side .stat-body span{font-size:5px;letter-spacing:0}
  .touch-ui .hud-side .stat-body strong{font-size:9px}
  .touch-ui .hud-side .bar{height:4px}
  .touch-ui .overlay{padding:max(5px,var(--safe-top)) max(7px,var(--safe-right)) max(5px,var(--safe-bottom)) max(7px,var(--safe-left))}
  .touch-ui .panel{width:min(530px,88%);max-height:96%;padding:12px;border-top-width:6px;overflow:auto}
  .touch-ui .panel img{max-height:38px;width:auto}
  .touch-ui .panel h1,.touch-ui .panel h2{margin:5px 0;font-size:19px}
  .touch-ui .panel p{margin:5px 0;font-size:11px;line-height:1.3}
  .touch-ui .primary{padding:9px 18px;font-size:13px}
  .touch-ui .message.fine,.touch-ui .message.redlight{top:5%;font-size:12px!important;padding:8px 11px!important}
}

/* 5.9.48: borderless floating game actions and Safari-toolbar clearance. */
:root{--mobile-browser-clearance:0px}
.game-shell{position:relative}
.topbar{
  position:absolute;
  inset:0 0 auto 0;
  z-index:40;
  height:auto;
  min-height:0;
  padding-top:max(8px,var(--safe-top));
  padding-bottom:0;
  padding-left:max(10px,var(--safe-left));
  padding-right:max(10px,var(--safe-right));
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  background:transparent;
  border:0;
  box-shadow:none;
  pointer-events:none;
}
.brand,.top-actions{grid-column:auto;pointer-events:auto}
.brand div{display:none}
.brand img{
  width:min(142px,24vw);
  height:auto;
  max-height:31px;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.95)) drop-shadow(0 2px 4px rgba(0,0,0,.35));
}
.top-actions{justify-self:auto;gap:7px}
.top-actions .icon-btn{
  width:42px;
  height:42px;
  border-width:2px;
  border-radius:50%;
  font-size:17px;
  box-shadow:inset 0 0 0 2px #536774,0 4px 10px rgba(0,0,0,.42);
}
.zone-badge{top:58px}
.work-order{top:60px}

html.touch-ui:not(.is-fullscreen){--mobile-browser-clearance:clamp(58px,9svh,78px)}
.touch-ui .mobile-controls{
  padding-bottom:calc(max(12px,var(--safe-bottom)) + var(--mobile-browser-clearance));
}
.touch-ui .topbar{
  position:absolute;
  min-height:0;
  padding-top:max(6px,var(--safe-top));
  padding-bottom:0;
}
.touch-ui .brand img{width:min(92px,25vw);max-height:24px}
.touch-ui .top-actions{gap:4px}
.touch-ui .top-actions .icon-btn{width:35px;height:35px;border-radius:50%;font-size:14px}
.touch-ui .zone-badge{display:none}

@media(display-mode:standalone){html.touch-ui:not(.is-fullscreen){--mobile-browser-clearance:0px}}

@media(orientation:landscape){
  html.touch-ui:not(.is-fullscreen){--mobile-browser-clearance:clamp(38px,11svh,52px)}
  .touch-ui .topbar{min-height:0;padding-top:max(4px,var(--safe-top));padding-bottom:0}
  .touch-ui .brand img{width:min(104px,18vw);height:auto;max-height:22px}
  .touch-ui .top-actions .icon-btn{width:32px;height:32px;font-size:13px}
  .touch-ui .mobile-controls{padding-bottom:calc(max(8px,var(--safe-bottom)) + var(--mobile-browser-clearance))}
  .touch-ui .zone-badge{top:39px}
}

/* 5.9.49: compact right-side status rail and portrait-phone guidance. */
.canvas-wrap>.hud{
  inset:0!important;
  display:block!important;
  padding:0!important;
  background:transparent!important;
}
.canvas-wrap>.hud .driver-cluster{
  position:absolute;
  left:50%;
  bottom:5px;
  transform:translateX(-50%);
  grid-column:auto;
  grid-row:auto;
}
.status-rail{
  position:absolute;
  z-index:6;
  right:max(10px,var(--safe-right));
  top:calc(max(8px,var(--safe-top)) + 50px);
  transform:none;
  width:clamp(148px,11.5vw,176px);
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:7px;
  border:1px solid rgba(181,204,216,.34);
  border-right:4px solid var(--purple);
  border-radius:13px;
  background:linear-gradient(145deg,rgba(18,34,44,.88),rgba(7,17,24,.82));
  box-shadow:0 7px 20px rgba(0,0,0,.35);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.status-rail .stat-card{
  min-height:38px!important;
  padding:3px 5px!important;
  gap:2px!important;
  border:0!important;
  border-radius:7px!important;
  background:rgba(255,255,255,.035)!important;
}
.status-rail .stat-row{min-height:27px;gap:5px}
.status-rail .stat-icon{flex-basis:22px;width:22px;height:22px;font-size:13px}
.status-rail .stat-body span{font-size:7px;letter-spacing:.055em}
.status-rail .stat-body strong{font-size:14px}
.status-rail .bar{height:4px;margin-top:1px!important}
.work-order{right:calc(max(10px,var(--safe-right)) + clamp(158px,12vw,186px))}

.rotate-device{
  position:absolute;
  inset:0;
  z-index:100;
  display:none;
  align-items:center;
  justify-content:center;
  padding:max(20px,var(--safe-top)) max(20px,var(--safe-right)) max(20px,var(--safe-bottom)) max(20px,var(--safe-left));
  background:radial-gradient(circle at 50% 35%,rgba(43,75,91,.97),rgba(6,15,22,.99) 70%);
  color:#fff;
  text-align:center;
  pointer-events:auto;
}
.rotate-card{max-width:310px;display:flex;flex-direction:column;align-items:center;gap:13px}
.rotate-card strong{font-size:21px;line-height:1.2}
.rotate-card p{margin:0;color:#cbd8df;font-size:14px;line-height:1.45}
.rotate-phone{
  position:relative;
  display:block;
  width:45px;
  height:72px;
  border:4px solid #fff;
  border-radius:9px;
  box-shadow:0 0 0 5px rgba(124,67,160,.42),0 10px 24px rgba(0,0,0,.35);
  animation:rotate-device-hint 1.8s ease-in-out infinite;
}
.rotate-phone:after{content:'';position:absolute;left:50%;bottom:5px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#fff}
@keyframes rotate-device-hint{0%,18%{transform:rotate(0)}55%,82%{transform:rotate(90deg)}100%{transform:rotate(0)}}

@media(max-width:700px) and (orientation:portrait){
  .touch-ui .rotate-device{display:flex}
}

@media(orientation:landscape){
  .touch-ui .status-rail{
    right:max(6px,var(--safe-right));
    top:calc(max(4px,var(--safe-top)) + 38px);
    width:112px;
    gap:2px;
    padding:4px;
    border-radius:9px;
  }
  .touch-ui .status-rail .stat-card{min-height:22px!important;padding:1px 3px!important;gap:1px!important}
  .touch-ui .status-rail .stat-row{min-height:18px;gap:2px}
  .touch-ui .status-rail .stat-icon{flex-basis:15px;width:15px;height:15px;font-size:9px}
  .touch-ui .status-rail .stat-body span{font-size:5px;letter-spacing:0}
  .touch-ui .status-rail .stat-body strong{font-size:9px}
  .touch-ui .status-rail .bar{height:3px}
  .touch-ui .canvas-wrap>.hud .driver-cluster{bottom:3px}
}

/* 5.9.52: a dedicated mobile driving dock below the scene. The dock is tall
   enough for the gauges even though the pedals themselves are shorter, so no
   control can ever cover the road surface or the vehicle. */
@media(orientation:landscape){
  .touch-ui .canvas-wrap{
    overflow:visible;
  }
  .touch-ui .mobile-controls{
    position:relative;
    z-index:20;
    flex:0 0 auto;
    display:grid;
    grid-template-columns:minmax(118px,1fr) clamp(205px,32vw,230px) minmax(118px,1fr);
    gap:0;
    padding-top:46px;
    padding-left:max(9px,var(--safe-left));
    padding-right:max(9px,var(--safe-right));
    padding-bottom:calc(max(8px,var(--safe-bottom)) + var(--mobile-browser-clearance));
    background:linear-gradient(180deg,#101e27,#071117 30%);
    pointer-events:none;
  }
  .touch-ui .mobile-controls .pedal{
    width:clamp(112px,22vw,170px);
    max-width:100%;
    pointer-events:auto;
  }
  .touch-ui .mobile-controls #brakeBtn{
    grid-column:1;
    justify-self:start;
  }
  .touch-ui .mobile-controls #gasBtn{
    grid-column:3;
    justify-self:end;
  }
  .touch-ui .canvas-wrap>.hud .driver-cluster{
    position:fixed;
    z-index:21;
    bottom:calc(max(8px,var(--safe-bottom)) + var(--mobile-browser-clearance));
  }
}

/* 5.9.52: the route itself carries the context; duplicate page chrome is not
   needed around the game. */
.work-order,.zone-badge{display:none!important}
.brand img{width:min(112px,19vw);max-height:25px}
.panel>img{width:min(245px,68%)}
@media(orientation:landscape){
  .touch-ui .brand img{width:min(82px,14vw);max-height:18px}
  .touch-ui .panel>img{max-height:31px;width:auto}
}

/* The instrument cluster is moved into this shared dock at startup. Desktop
   keeps the familiar overlaid instruments; touch landscape turns the same
   element into a real layout row below the canvas. */
.driving-dock{
  position:absolute;
  z-index:21;
  left:50%;
  bottom:5px;
  transform:translateX(-50%);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  pointer-events:none;
}
.driving-dock>.pedal{display:none}
.driving-dock>.driver-cluster{position:relative;left:auto;bottom:auto;transform:none}
@media(orientation:landscape){
  .touch-ui .driving-dock{
    position:relative;
    z-index:21;
    left:auto;
    bottom:auto;
    transform:none;
    flex:0 0 auto;
    width:100%;
    display:grid;
    grid-template-columns:minmax(118px,1fr) clamp(205px,32vw,230px) minmax(118px,1fr);
    align-items:end;
    gap:0;
    padding:8px max(9px,var(--safe-right)) calc(max(8px,var(--safe-bottom)) + var(--mobile-browser-clearance)) max(9px,var(--safe-left));
    background:linear-gradient(180deg,#101e27,#071117 30%);
  }
  .touch-ui .driving-dock>.pedal{
    display:block;
    width:clamp(112px,22vw,170px);
    max-width:100%;
    height:46px;
    min-height:42px;
    border-width:3px;
    border-radius:11px;
    font-size:12px;
    pointer-events:auto;
  }
  .touch-ui .driving-dock>#brakeBtn{grid-column:1;justify-self:start}
  .touch-ui .driving-dock>.driver-cluster{grid-column:2;grid-row:1;justify-self:center}
  .touch-ui .driving-dock>#gasBtn{grid-column:3;justify-self:end}
}

/* 5.9.53: compact landscape dock. Keep Safari clearance intact while giving
   the road, destinations and their guidance signs more vertical space. */
@media(orientation:landscape){
  .touch-ui .driving-dock{
    grid-template-columns:minmax(104px,1fr) clamp(166px,28vw,185px) minmax(104px,1fr);
    padding-top:3px;
    padding-bottom:calc(max(5px,var(--safe-bottom)) + var(--mobile-browser-clearance));
  }
  .touch-ui .driving-dock>.driver-cluster{gap:1px}
  .touch-ui .driving-dock .analog-card{
    width:54px;
    min-height:60px!important;
    padding:0!important;
  }
  .touch-ui .driving-dock .analog-gauge,
  .touch-ui .driving-dock .analog-gauge svg{
    width:54px;
    height:54px;
  }
  .touch-ui .driving-dock .analog-gauge{flex-basis:54px}
  .touch-ui .driving-dock .gauge-readout{
    bottom:1px;
    min-width:39px;
    padding:0 2px!important;
    font-size:5.5px!important;
  }
  .touch-ui .driving-dock .analog-card>span,
  .touch-ui .driving-dock .h-gear-card>span{
    margin:0;
    font-size:4.5px;
    letter-spacing:.015em;
  }
  .touch-ui .driving-dock .h-gear-card{
    width:47px;
    min-height:58px!important;
    padding:0!important;
  }
  .touch-ui .driving-dock .h-pattern{
    transform:scale(.4);
    transform-origin:top center;
    margin:0 0 -49px;
  }
  .touch-ui .driving-dock .gear-readout{font-size:6px!important}
  .touch-ui .driving-dock>.pedal{
    width:clamp(104px,20vw,154px);
    height:40px;
    min-height:36px;
    font-size:11px;
  }
}