:root{
  --ink:#101B24;
  --haze:#E8EEF1;
  --sky:#BFD2DA;
  --brick:#A8492F;
  --ochre:#E3B23C;
  --marsh:#3E6B5A;
  --asphalt:#7E8B93;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--ink);color:var(--haze)}
body{
  font-family:'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  -webkit-user-select:none;user-select:none;
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
#app{position:fixed;inset:0}
#app canvas{display:block;width:100%;height:100%}
#grade{
  position:fixed;inset:0;z-index:4;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(255,246,222,0.10) 0%, rgba(255,246,222,0.02) 42%, rgba(16,27,36,0.0) 62%),
    radial-gradient(100% 100% at 50% 50%, rgba(16,27,36,0) 55%, rgba(16,27,36,0.22) 100%);
  mix-blend-mode:normal;
}
#hud{position:fixed;inset:0;z-index:10;pointer-events:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.mission-cluster{
  position:absolute;top:calc(14px + var(--safe-t));left:calc(16px + var(--safe-l));
  display:flex;flex-direction:column;gap:7px;align-items:flex-start;
  max-width:min(38vw,340px);
}
.mission-plate{
  display:flex;align-items:center;gap:10px;
  padding:9px 16px 9px 11px;
  background:linear-gradient(180deg,rgba(21,33,42,.94),rgba(16,27,36,.90));
  border:2px solid var(--ochre);
  clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%);
  box-shadow:0 6px 18px rgba(16,27,36,.28);
  opacity:0;transform:translateY(-6px);
  transition:opacity .45s ease, transform .45s ease;
}
.mission-plate.on{opacity:1;transform:none}
.mission-diamond{
  width:13px;height:13px;background:var(--ochre);flex:none;
  transform:rotate(45deg);box-shadow:0 0 0 2px rgba(16,27,36,.55);
}
.mission-copy{display:flex;flex-direction:column;line-height:1}
.mission-kicker{
  font-size:10px;letter-spacing:.22em;font-weight:700;color:var(--ochre);
  margin-bottom:3px;
}
#objective{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-style:italic;
  font-size:19px;letter-spacing:.045em;text-transform:uppercase;
  color:var(--haze);text-shadow:0 2px 0 rgba(16,27,36,.6);
  white-space:nowrap;
}
.mission-sub{
  font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--haze);opacity:0;text-shadow:0 2px 4px rgba(16,27,36,.8);
  transition:opacity .4s ease;padding-left:4px;
}
.mission-sub.on{opacity:.92}
.help-btn{
  pointer-events:auto;margin-top:2px;padding:4px 9px;
  font-size:10px;font-weight:700;letter-spacing:.18em;
  color:var(--ochre);background:rgba(16,27,36,.62);
  border:1px solid rgba(227,178,60,.55);border-radius:2px;
}
.help-btn:hover{background:rgba(227,178,60,.16)}
.pause-btn{
  pointer-events:auto;display:none;margin-top:2px;padding:4px 10px;
  font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:800;
  font-size:12px;letter-spacing:.2em;color:var(--ochre);
  background:rgba(16,27,36,.62);border:1px solid rgba(227,178,60,.55);border-radius:2px;
}
body.touch .pause-btn{display:block}

.top-right{
  position:absolute;top:calc(12px + var(--safe-t));right:calc(16px + var(--safe-r));
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
}
.wanted{width:clamp(112px,13vw,168px);height:auto;filter:drop-shadow(0 4px 8px rgba(16,27,36,.32))}
.cash-plate{
  display:flex;align-items:baseline;gap:4px;
  min-width:clamp(106px,12vw,150px);justify-content:flex-end;
  padding:5px 13px 6px 16px;
  background:linear-gradient(180deg,rgba(21,33,42,.94),rgba(16,27,36,.90));
  border:2px solid var(--ochre);
  clip-path:polygon(12px 0,100% 0,100% 100%,0 100%);
  box-shadow:0 6px 16px rgba(16,27,36,.30);
}
.cash-currency{
  font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:700;
  font-size:clamp(15px,1.7vw,20px);color:var(--ochre);
  text-shadow:0 2px 0 rgba(0,0,0,.45);
}
#cash{
  font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:700;
  font-size:clamp(24px,3vw,34px);line-height:.86;letter-spacing:.03em;
  color:var(--haze);text-shadow:0 2px 0 rgba(0,0,0,.45);
}

.radar-wrap{
  position:absolute;left:calc(14px + var(--safe-l));bottom:calc(14px + var(--safe-b));
  width:clamp(104px,14.5vh,150px);aspect-ratio:1/1;
  filter:drop-shadow(0 8px 18px rgba(16,27,36,.38));
}
.radar-ring{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
#radar{
  position:absolute;left:6%;top:6%;width:88%;height:88%;border-radius:50%;
  background:transparent;
}

.speedo{
  position:absolute;right:calc(18px + var(--safe-r));bottom:calc(18px + var(--safe-b));
  width:clamp(112px,13vw,148px);height:clamp(68px,8vw,92px);
  display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;
  pointer-events:none;
}
.speed-arc{
  position:absolute;inset:0 0 0 8%;
  border-top:2px solid rgba(227,178,60,.55);
  border-left:2px solid rgba(227,178,60,.20);
  border-radius:50% 50% 0 0/100% 100% 0 0;
  opacity:.9;
}
.speed-value{
  position:relative;display:flex;align-items:baseline;gap:5px;
  font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:800;
  color:var(--haze);text-shadow:0 2px 0 rgba(16,27,36,.7),0 0 12px rgba(16,27,36,.35);
  line-height:.82;
}
#speed{font-size:clamp(40px,5vw,60px);letter-spacing:.02em}
.speed-unit{font-size:10px;letter-spacing:.14em;color:var(--ochre)}
.speed-gear{
  position:relative;margin-top:2px;margin-right:6px;
  font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:700;
  font-size:11px;letter-spacing:.16em;color:var(--ochre);
}

.radio-plate{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(16px + var(--safe-b));
  width:clamp(210px,24vw,300px);height:auto;
  filter:drop-shadow(0 6px 14px rgba(16,27,36,.32));opacity:.96;
  pointer-events:auto;cursor:pointer;
}
.radio-plate.off{filter:grayscale(1) brightness(.65) drop-shadow(0 6px 14px rgba(16,27,36,.32));opacity:.55}
.radio-plate img{display:block;width:100%;height:auto}
.area-code{
  position:absolute;right:8%;bottom:17%;
  font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:700;
  font-size:clamp(12px,1.2vw,15px);letter-spacing:.1em;
  color:var(--ochre);text-shadow:0 1px 0 rgba(0,0,0,.5);
}

.prompt{
  position:absolute;left:50%;bottom:clamp(120px,17vh,170px);
  transform:translate(-50%,8px);
  padding:7px 15px;
  background:rgba(16,27,36,.88);
  border:1px solid rgba(227,178,60,.7);
  font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:700;
  font-size:16px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--haze);white-space:nowrap;
  opacity:0;transition:opacity .35s ease,transform .35s ease;
  box-shadow:0 4px 16px rgba(16,27,36,.3);
}
.prompt.on{opacity:1;transform:translate(-50%,0)}

.toast{
  position:absolute;left:50%;top:15%;transform:translate(-50%,6px);
  padding:6px 15px 7px;
  font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:700;
  font-size:clamp(16px,1.7vw,21px);letter-spacing:.11em;text-transform:uppercase;
  color:var(--haze);text-shadow:0 2px 8px rgba(12,21,28,.95);
  background:linear-gradient(180deg,rgba(19,32,41,.84),rgba(14,24,32,.84));
  border:1px solid rgba(227,178,60,.55);
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  opacity:0;transition:opacity .5s ease,transform .5s ease;white-space:nowrap;
  pointer-events:none;text-align:center;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

.controls-card{
  position:absolute;left:auto;right:calc(18px + var(--safe-r));bottom:calc(112px + var(--safe-b));transform:translateY(10px);
  width:min(400px,36vw);
  background:linear-gradient(180deg,rgba(18,30,39,.96),rgba(13,23,31,.96));
  border:2px solid var(--ochre);
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
  padding:12px 15px 11px;
  opacity:0;visibility:hidden;transition:opacity .35s ease,transform .35s ease;
  pointer-events:auto;
  box-shadow:0 14px 34px rgba(16,27,36,.4);
  z-index:14;
}
.controls-card.show{opacity:1;visibility:visible;transform:none}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.card-head span{
  font-family:'Alfa Slab One',serif;font-size:15px;letter-spacing:.06em;color:var(--ochre);
}
#cardClose{
  font-size:10px;font-weight:700;letter-spacing:.2em;color:var(--haze);opacity:.75;
  padding:2px 6px;border:1px solid rgba(232,238,241,.25);
}
.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px 10px}
.card-item{display:flex;align-items:center;gap:8px;min-width:0}
.card-item img{width:26px;height:28px;object-fit:contain;flex:none;filter:drop-shadow(0 1px 0 rgba(0,0,0,.4))}
.card-item div{display:flex;flex-direction:column;line-height:1;min-width:0}
.card-item b{
  font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:800;
  font-size:14px;color:var(--ochre);letter-spacing:.05em;
}
.card-item span{font-size:9px;letter-spacing:.11em;color:var(--haze);opacity:.82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.card-foot{margin-top:10px;padding-top:8px;border-top:1px solid rgba(227,178,60,.22);font-size:9px;letter-spacing:.16em;color:var(--sky);opacity:.8;text-align:center}

#touch{display:none;position:fixed;inset:auto 0 0 0;height:210px;z-index:12;pointer-events:none}
body.touch #touch{display:block}
body.touch .help-btn{display:none}
body.touch .radio-plate{display:none}
body.touch .controls-card{bottom:calc(118px + var(--safe-b))}
body.touch .speedo{bottom:calc(190px + var(--safe-b));right:calc(14px + var(--safe-r));transform:scale(.86);transform-origin:bottom right}
body.touch .radar-wrap{bottom:calc(152px + var(--safe-b));width:clamp(92px,12.5vh,118px)}
body.touch .prompt{bottom:calc(196px + var(--safe-b))}

.touch-cluster{position:absolute;pointer-events:none}
.touch-steer{left:calc(14px + var(--safe-l));bottom:calc(16px + var(--safe-b));display:flex;gap:8px}
.touch-pedals{right:calc(14px + var(--safe-r));bottom:calc(14px + var(--safe-b));width:190px;height:176px}
.tbtn{
  pointer-events:auto;
  display:flex;align-items:center;justify-content:center;
  width:62px;height:62px;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,rgba(38,55,66,.95),rgba(15,25,33,.93));
  border:2px solid rgba(227,178,60,.66);
  box-shadow:0 4px 12px rgba(16,27,36,.35), inset 0 0 20px rgba(0,0,0,.35);
  transition:transform .08s ease,background .12s ease,border-color .12s ease;
}
.tbtn img{width:58%;height:58%;object-fit:contain;filter:drop-shadow(0 1px 0 rgba(0,0,0,.5))}
.tbtn.active{background:radial-gradient(circle at 36% 30%,rgba(227,178,60,.48),rgba(30,41,48,.96));border-color:var(--ochre);transform:scale(.95)}
.touch-pedals .tbtn{position:absolute}
.tbtn-gas{width:76px;height:76px;right:0;bottom:0}
.tbtn-brake{width:60px;height:60px;right:82px;bottom:2px}
.tbtn-hand{width:54px;height:54px;right:8px;bottom:84px}
.tbtn-enter{width:52px;height:52px;right:86px;bottom:78px}
.tbtn-small{width:40px;height:40px;border-width:1px}
.tbtn-small img{width:60%;height:60%}
.touch-pedals .tbtn-small:nth-of-type(5){right:142px;bottom:34px}
.touch-pedals .tbtn-small:nth-of-type(6){right:142px;bottom:84px}

body.touch.landscape .tbtn-gas{width:70px;height:70px}
body.touch.landscape #touch{height:170px}
body.touch.landscape .radar-wrap{bottom:calc(120px + var(--safe-b))}
body.touch.landscape .speedo{bottom:calc(150px + var(--safe-b))}

.poster{
  position:fixed;inset:0;z-index:60;
  background:#0c151c;
  overflow:hidden;
  transition:opacity .7s ease,visibility .7s ease;
  opacity:1;visibility:visible;
}
.poster.hidden{opacity:0;visibility:hidden;pointer-events:none}
.poster-bg{position:absolute;inset:0}
.poster-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 52%;transform:scale(1.03);filter:saturate(.9) brightness(1.03)}
.poster-haze{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(232,238,241,.28) 0%,rgba(232,238,241,0) 30%,rgba(232,238,241,0) 56%,rgba(16,27,36,.20) 100%);
}
.poster-vignette{
  position:absolute;inset:0;
  background:radial-gradient(95% 85% at 50% 48%,rgba(16,27,36,0) 45%,rgba(16,27,36,.45) 100%);
}
.poster-figures{position:absolute;inset:0;pointer-events:none;z-index:5}
.poster-floor{
  position:absolute;left:0;right:0;bottom:0;height:48%;
  background:linear-gradient(180deg,rgba(12,21,28,0) 0%,rgba(12,21,28,0.18) 42%,rgba(12,21,28,0.56) 100%);
  z-index:6;pointer-events:none;
}
.poster-driver{
  position:absolute;left:16%;bottom:-5%;
  height:min(63vh,585px);width:auto;
  filter:drop-shadow(0 18px 22px rgba(16,27,36,.38));
  z-index:4;
}
.poster-car{
  position:absolute;right:0;bottom:3%;
  width:min(42vw,700px);height:auto;
  filter:drop-shadow(0 18px 24px rgba(16,27,36,.40));
  z-index:3;
}
.poster-wordmark{
  position:absolute;left:50%;top:41%;transform:translate(-50%,-50%) rotate(-2deg);
  width:min(54vw,650px);height:auto;z-index:4;
  filter:drop-shadow(0 10px 22px rgba(16,27,36,.35));
}
.pause-wordmark{
  top:calc(18px + var(--safe-t));left:calc(20px + var(--safe-l));
  transform:rotate(-2deg);width:min(26vw,260px);display:none;z-index:7;
}
.poster-start-copy{
  position:absolute;left:50%;bottom:calc(5vh + var(--safe-b));transform:translateX(-50%);
  z-index:7;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;
  width:min(90vw,640px);
}
.poster-kicker{
  font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:700;
  font-size:12px;letter-spacing:.34em;color:#F6C85A;
  text-shadow:0 2px 8px rgba(12,21,28,.95),0 0 3px rgba(12,21,28,.95),0 0 12px rgba(12,21,28,.55);
}
.poster-kicker span{
  display:inline-block;margin-left:8px;padding:1px 7px;border:1px solid rgba(227,178,60,.7);
  transform:skewX(-8deg);
}
.poster-tag{
  margin:0;font-size:clamp(13px,1.3vw,16px);letter-spacing:.09em;
  color:var(--haze);text-shadow:0 2px 8px rgba(12,21,28,.98),0 0 4px rgba(12,21,28,.95);
  font-weight:600;
}
.start-btn{
  pointer-events:auto;margin-top:4px;
  padding:12px 30px 11px;
  font-family:'Alfa Slab One',serif;font-size:clamp(14px,1.4vw,18px);
  letter-spacing:.09em;color:var(--ink);
  background:linear-gradient(180deg,#EFC457,var(--ochre));
  border:3px solid var(--ink);
  box-shadow:0 6px 0 rgba(16,27,36,.55),0 0 0 2px rgba(227,178,60,.35);
  transform:skewX(-4deg);
  transition:transform .12s ease,box-shadow .12s ease,filter .2s ease;
}
.start-btn:hover:not(:disabled){transform:skewX(-4deg) translateY(-2px);box-shadow:0 8px 0 rgba(16,27,36,.55),0 0 0 2px rgba(227,178,60,.45)}
.start-btn:active:not(:disabled){transform:skewX(-4deg) translateY(2px);box-shadow:0 3px 0 rgba(16,27,36,.55),0 0 0 2px rgba(227,178,60,.4)}
.start-btn:disabled{filter:saturate(.35) brightness(.85);cursor:default}
.poster-foot{
  margin:2px 0 0;font-size:10px;letter-spacing:.16em;color:var(--haze);
  opacity:.92;text-shadow:0 2px 7px rgba(12,21,28,.98),0 0 3px rgba(12,21,28,.9);
}
.poster-pause-copy{
  position:absolute;inset:0;z-index:8;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;text-align:center;
  background:rgba(12,21,28,.48);
  backdrop-filter:blur(2px);
}
.pause-kicker{
  font-size:11px;letter-spacing:.32em;font-weight:700;color:var(--ochre);
}
.poster-pause-copy h2{
  margin:0;font-family:'Alfa Slab One',serif;font-size:clamp(42px,7vw,84px);
  letter-spacing:.06em;color:var(--haze);
  text-shadow:0 4px 0 rgba(16,27,36,.55),0 0 0 3px rgba(16,27,36,.25);
}
.poster.mode-pause .poster-start-copy{display:none}
.poster.mode-pause .poster-pause-copy{display:flex}
.poster.mode-pause .start-wordmark{display:none}
.poster.mode-pause .pause-wordmark{display:block}
.poster.mode-pause .poster-driver,.poster.mode-pause .poster-car{opacity:.62;filter:blur(1px) drop-shadow(0 18px 24px rgba(16,27,36,.4))}
.poster.mode-pause .poster-vignette{background:radial-gradient(95% 85% at 50% 48%,rgba(16,27,36,.18) 35%,rgba(16,27,36,.72) 100%)}

@media (max-width:760px){
  .mission-cluster{max-width:52vw}
  #objective{font-size:16px}
  .mission-plate{padding:7px 12px 7px 9px}
  .top-right{gap:5px}
  .radar-wrap{width:clamp(96px,14vh,126px)}
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .controls-card{width:min(430px,92vw);right:4vw}
  .speedo{width:104px;height:66px}
  #speed{font-size:44px}
}
@media (orientation:portrait){
  .poster-driver{left:3%;height:37vh;bottom:2%}
  .poster-car{width:66vw;right:-9%;bottom:5%}
  .poster-wordmark{width:92vw;top:25%}
  .poster-start-copy{top:41%;bottom:auto;width:94vw}
  .poster-tag{max-width:88vw}
  .poster-foot{font-size:9px;letter-spacing:.10em;max-width:88vw}
  .poster-figures{opacity:.95}
  .pause-wordmark{width:52vw;top:calc(14px + var(--safe-t))}
  .controls-card{bottom:calc(112px + var(--safe-b))}
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .mission-sub{font-size:11px}
  .radio-plate{width:220px}
}
@media (max-height:440px) and (orientation:landscape){
  .poster-start-copy{bottom:3vh}
  .poster-tag{display:none}
  .poster-foot{display:none}
  .poster-wordmark{width:min(46vw,470px);top:40%}
  .poster-driver{height:72vh;left:27%}
  .poster-car{width:42vw}
  .poster-pause-copy h2{font-size:52px}
  .mission-cluster{top:8px}
  .radar-wrap{width:96px;bottom:8px}
  .top-right{top:8px}
}


.dialogue{
  position:absolute;left:50%;bottom:calc(96px + var(--safe-b));transform:translate(-50%,10px);
  width:min(540px,86vw);
  padding:10px 14px 11px;
  background:linear-gradient(180deg,rgba(19,32,41,.95),rgba(14,24,32,.95));
  border:2px solid rgba(227,178,60,.78);
  clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,13px 100%,0 calc(100% - 13px));
  opacity:0;visibility:hidden;transition:opacity .3s ease,transform .3s ease,visibility .3s;
  z-index:11;pointer-events:none;
  box-shadow:0 10px 26px rgba(16,27,36,.42);
}
.dialogue.on{opacity:1;visibility:visible;transform:translate(-50%,0)}
.d-head{display:flex;align-items:baseline;gap:9px;margin-bottom:4px}
.d-name{
  font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:800;
  font-size:16px;letter-spacing:.08em;color:var(--ochre);text-transform:uppercase;
  text-shadow:0 1px 0 rgba(0,0,0,.5);
}
.d-role{font-size:9px;letter-spacing:.2em;color:var(--sky);opacity:.85;text-transform:uppercase}
.d-line{display:block;font-size:14px;line-height:1.3;color:var(--haze);font-weight:500;letter-spacing:.015em}
body.touch .dialogue{bottom:calc(206px + var(--safe-b));width:min(520px,92vw)}
.npc-tags{position:absolute;inset:0;overflow:hidden}
.npc-tag{
  position:absolute;left:0;top:0;transform:translate(-50%,-100%);
  padding:3px 8px 4px;
  background:rgba(16,27,36,.78);
  border:1px solid rgba(227,178,60,.52);
  white-space:nowrap;opacity:0;
  transition:opacity .22s ease;
  font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--haze);
  text-shadow:0 1px 3px rgba(0,0,0,.9);
}
.npc-tag.on{opacity:1}
.npc-tag b{
  font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:800;
  font-size:11px;letter-spacing:.07em;color:var(--ochre);margin-right:5px;
}
.npc-tag i{font-style:normal;opacity:.82}