/* ============ HIGHLINE HAULER — UI ============ */
:root{
  --amber:#ffb454; --amber-hi:#ffd28a; --amber-dim:#c77f2e;
  --ink:#17110b; --panel:rgba(20,13,8,.82); --panel-line:rgba(255,180,84,.28);
  --cream:#f4e6cf; --red:#e2543e; --green:#7dd069; --lcd:#9dff6e;
  --font-disp:"Arial Narrow","Helvetica Neue",Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:#0a0705}
body{font-family:var(--font-disp);color:var(--cream);-webkit-user-select:none;user-select:none}
#app{position:fixed;inset:0}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hidden{display:none!important}

/* ---------- HUD generic ---------- */
#hud{position:absolute;inset:0;pointer-events:none;z-index:5}
.hud-panel{background:var(--panel);border:1px solid var(--panel-line);border-radius:8px;
  box-shadow:0 2px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,214,150,.08);backdrop-filter:blur(3px)}

/* ---------- compass ---------- */
#compass{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:min(360px,52vw);height:40px;overflow:hidden}
#compassTape{position:absolute;inset:6px 8px 14px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
#compassTicks{position:absolute;top:0;height:100%;white-space:nowrap;will-change:transform}
#compassTicks .ct{position:absolute;top:0;font-size:11px;letter-spacing:.5px;color:var(--amber);transform:translateX(-50%);text-align:center}
#compassTicks .ct i{display:block;width:1px;height:5px;background:var(--amber-dim);margin:2px auto 0}
#compassTicks .ct.card{font-size:13px;font-weight:700;color:var(--amber-hi)}
.compass-wp{position:absolute;top:2px;font-size:12px;color:var(--green);text-shadow:0 0 6px rgba(125,208,105,.8);transform:translateX(-50%);transition:opacity .3s}
#compassHeading{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:700;color:var(--amber-hi);letter-spacing:1px}
#compass::after{content:"";position:absolute;top:4px;left:50%;width:2px;height:10px;background:var(--cream);transform:translateX(-50%);border-radius:1px}

/* ---------- haul card / logbook ---------- */
#haulCard{position:absolute;top:12px;left:12px;min-width:210px;max-width:290px;padding:10px 12px}
.haul-head{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--amber-hi);letter-spacing:.6px}
.haul-tag{background:var(--amber-dim);color:#1c1108;font-size:10px;font-weight:800;padding:1px 6px;border-radius:3px;letter-spacing:1px}
.haul-route{font-size:12px;color:var(--cream);opacity:.85;margin:4px 0 6px}
.haul-stats{display:flex;gap:12px;font-size:13px;color:var(--amber);font-weight:700}
.haul-cargo{font-size:11px;margin-top:6px;color:#cdb694;letter-spacing:.4px}
.haul-cargo b{color:var(--green)}
.haul-cargo b.hurt{color:var(--red)}

/* ---------- mini speed ---------- */
#speedMini{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;align-items:baseline;gap:6px;padding:6px 16px}
#speedMiniVal{font-size:26px;font-weight:800;color:var(--amber-hi);min-width:52px;text-align:right;font-variant-numeric:tabular-nums}
#speedMiniUnit{font-size:12px;color:var(--amber)}
#speedMiniGear{font-size:15px;font-weight:800;color:var(--green);border:1px solid rgba(125,208,105,.5);border-radius:4px;padding:0 6px;margin-left:8px}
#speedMiniWarn{font-size:10px;color:var(--red);font-weight:700;margin-left:6px;letter-spacing:.5px}

/* ---------- CB radio ---------- */
#cbUnit{position:absolute;right:12px;bottom:12px;width:210px;padding:8px 10px 6px}
.cb-face{background:linear-gradient(180deg,#2a2018,#181009);border:1px solid #3d2c1b;border-radius:6px;padding:7px 8px;box-shadow:inset 0 1px 3px rgba(0,0,0,.7)}
.cb-top{display:flex;align-items:center;gap:8px}
.cb-lcd{background:#0d1208;border:1px solid #2c3a1a;border-radius:3px;padding:2px 7px;display:flex;align-items:baseline;gap:5px;font-family:"Courier New",monospace}
.cb-ch-label{font-size:8px;color:#6f8f4a}
#cbChannel{font-size:19px;font-weight:700;color:var(--lcd);text-shadow:0 0 6px rgba(157,255,110,.5)}
#cbMode{font-size:9px;color:#6f8f4a}
#cbMode.tx{color:#ff7a5c}
.cb-meter{display:flex;gap:2px;align-items:flex-end;height:14px}
.cb-meter i{width:5px;height:4px;background:#26301a;border-radius:1px;transition:background .12s}
.cb-meter i.on{background:var(--lcd)}
.cb-meter i.on.hot{background:#ff7a5c}
.cb-knob{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#5a452c,#241a10 70%);border:1px solid #4a3823;position:relative}
.cb-knob::after{content:"";position:absolute;top:2px;left:50%;width:2px;height:6px;background:var(--amber);transform:translateX(-50%)}
.cb-speaker{margin-top:7px;display:flex;gap:3px}
.cb-speaker i{flex:1;height:3px;background:#0a0705;border-radius:1px}
#cbTranscript{margin-top:6px;min-height:32px;font-size:11.5px;line-height:1.35;color:#e8d9bd}
#cbTranscript .who{color:var(--amber);font-weight:700}
#cbTranscript .squ{color:#8a7a5e;font-style:italic}

/* ---------- toasts/prompts ---------- */
#toast{position:absolute;bottom:120px;left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--panel-line);border-radius:6px;padding:8px 18px;font-size:14px;font-weight:700;color:var(--amber-hi);letter-spacing:.5px;animation:toastIn .25s ease-out}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
#centerPrompt{position:absolute;top:58%;left:50%;transform:translate(-50%,0);text-align:center;font-size:17px;color:var(--cream);text-shadow:0 2px 10px #000;letter-spacing:.6px}
#centerPrompt .key{display:inline-block;border:1px solid var(--amber-dim);border-radius:4px;padding:1px 8px;margin:0 4px;color:var(--amber-hi);background:rgba(0,0,0,.5);font-weight:700}
#viewToast{position:absolute;top:64px;left:50%;transform:translateX(-50%);font-size:13px;font-weight:800;letter-spacing:3px;color:var(--amber-hi);text-shadow:0 2px 8px #000;background:rgba(20,13,8,.65);padding:4px 16px;border-radius:4px;border:1px solid var(--panel-line)}
#banner{position:absolute;top:33%;left:0;right:0;text-align:center;pointer-events:none}
#banner .b1{font-size:44px;font-weight:900;letter-spacing:6px;color:var(--amber-hi);text-shadow:0 4px 24px rgba(0,0,0,.8),0 0 40px rgba(255,180,84,.35)}
#banner .b2{font-size:16px;letter-spacing:3px;color:var(--cream);text-shadow:0 2px 10px #000;margin-top:6px}
#subtitle{position:absolute;bottom:88px;left:50%;transform:translateX(-50%);max-width:70vw;text-align:center;font-size:14px;color:#ffe9c4;text-shadow:0 2px 8px #000;background:rgba(0,0,0,.35);padding:3px 14px;border-radius:4px}

/* ---------- overlays ---------- */
#vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 58%,rgba(10,5,2,.42) 100%)}
#damageFlash{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 40%,rgba(220,60,30,.45) 100%);opacity:0;transition:opacity .15s}
#rainGlass{position:absolute;inset:0;pointer-events:none;opacity:0;background-repeat:repeat;transition:opacity 1.2s}

/* ---------- touch ---------- */
#touchUI{position:absolute;inset:0;z-index:6;pointer-events:none}
#touchSteer{position:absolute;left:0;bottom:0;width:44%;height:52%;pointer-events:auto}
#touchSteer span{position:absolute;bottom:12px;left:18px;font-size:11px;letter-spacing:2px;color:rgba(255,220,160,.55)}
#touchWheel{position:absolute;bottom:44px;left:50%;transform:translateX(-50%);width:120px;height:120px;border-radius:50%;border:3px solid rgba(255,180,84,.4);background:radial-gradient(circle,rgba(30,20,12,.5) 55%,rgba(255,180,84,.12));opacity:.85}
#touchWheel::after{content:"";position:absolute;inset:38px;border-radius:50%;border:2px solid rgba(255,180,84,.35)}
.tright{position:absolute;right:0;bottom:0;width:30%;height:56%;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;gap:14px;padding:0 18px 30px}
.tpedal{pointer-events:auto;width:86px;height:86px;border-radius:14px;background:rgba(20,13,8,.6);border:2px solid rgba(255,180,84,.45);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;letter-spacing:1.5px;color:var(--amber-hi)}
.tpedal.on{background:rgba(255,180,84,.3)}
.tbtns{position:absolute;top:64px;right:12px;display:flex;flex-direction:column;gap:8px}
.tbtn{pointer-events:auto;width:58px;height:40px;border-radius:8px;background:rgba(20,13,8,.6);border:1px solid rgba(255,180,84,.45);color:var(--amber-hi);font-family:var(--font-disp);font-size:11px;font-weight:800;letter-spacing:1px}

/* ---------- screens ---------- */
#screenRoot{position:absolute;inset:0;z-index:10;pointer-events:none}
.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:auto;background:radial-gradient(ellipse at 50% 40%,rgba(24,13,6,.55),rgba(6,3,1,.88));backdrop-filter:blur(2px)}
.screen.clear{background:transparent;backdrop-filter:none}
.title-card{text-align:center;margin-bottom:26px}
.title-kicker{font-size:13px;letter-spacing:6px;color:var(--amber);margin-bottom:10px}
.title-logo{font-size:min(84px,11vw);font-weight:900;letter-spacing:4px;line-height:.95;color:var(--amber-hi);text-shadow:0 6px 40px rgba(0,0,0,.9),0 0 60px rgba(255,150,50,.25)}
.title-logo span{display:block;font-size:.42em;letter-spacing:14px;color:var(--cream);margin-top:4px}
.title-sub{margin-top:14px;font-size:14px;letter-spacing:2px;color:#d8c4a0}
.menu{display:flex;flex-direction:column;gap:10px;min-width:min(320px,80vw)}
.mbtn{pointer-events:auto;background:linear-gradient(180deg,rgba(46,30,16,.92),rgba(28,17,9,.92));border:1px solid var(--panel-line);border-radius:8px;color:var(--cream);font-family:var(--font-disp);font-size:16px;font-weight:700;letter-spacing:1.5px;padding:12px 22px;cursor:pointer;text-align:center;transition:all .12s}
.mbtn:hover,.mbtn.sel{border-color:var(--amber);color:var(--amber-hi);background:linear-gradient(180deg,rgba(80,50,22,.95),rgba(40,24,12,.95));transform:translateY(-1px)}
.mbtn.primary{border-color:var(--amber);color:#1c1108;background:linear-gradient(180deg,var(--amber-hi),var(--amber));text-shadow:none}
.mbtn.primary:hover{background:linear-gradient(180deg,#ffe0aa,var(--amber-hi))}
.mbtn:disabled{opacity:.4;cursor:default}
.menu-foot{margin-top:22px;font-size:12px;color:#a89070;letter-spacing:1px;text-align:center;line-height:1.7}
.panel-card{background:var(--panel);border:1px solid var(--panel-line);border-radius:10px;padding:22px 26px;max-width:min(680px,92vw);max-height:82vh;overflow:auto}
.panel-card h2{font-size:22px;letter-spacing:3px;color:var(--amber-hi);margin-bottom:14px;text-align:center}
.ctrl-grid{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:14px}
.ctrl-grid .key{font-weight:800;color:var(--amber-hi);white-space:nowrap;letter-spacing:.5px}
.ctrl-grid .what{color:#e2d2b4}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:9px 0;border-bottom:1px solid rgba(255,180,84,.12);font-size:15px}
.set-row:last-child{border-bottom:none}
.set-row input[type=range]{width:170px;accent-color:var(--amber)}
.set-row .seg{display:flex;gap:6px}
.seg button{background:rgba(0,0,0,.4);border:1px solid var(--panel-line);color:var(--cream);border-radius:5px;padding:4px 12px;font-family:var(--font-disp);font-size:13px;font-weight:700;cursor:pointer}
.seg button.on{background:var(--amber-dim);color:#1c1108;border-color:var(--amber)}
.haul-list{display:flex;flex-direction:column;gap:9px}
.haul-item{display:flex;justify-content:space-between;align-items:center;gap:14px;background:rgba(0,0,0,.3);border:1px solid rgba(255,180,84,.16);border-radius:8px;padding:10px 14px;cursor:pointer;transition:border-color .12s}
.haul-item:hover{border-color:var(--amber)}
.haul-item.done{opacity:.55}
.haul-item .hname{font-size:15px;font-weight:800;color:var(--amber-hi);letter-spacing:.5px}
.haul-item .hdesc{font-size:12px;color:#cbb692;margin-top:2px}
.haul-item .hmeta{text-align:right;font-size:12px;color:var(--amber);white-space:nowrap}
.haul-item .hmeta b{display:block;font-size:15px;color:var(--green)}
.res-grid{display:grid;grid-template-columns:auto auto;gap:8px 26px;font-size:16px;margin:12px 0 18px}
.res-grid .rk{color:#c8b394;letter-spacing:.5px}
.res-grid .rv{color:var(--amber-hi);font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.res-grade{font-size:64px;font-weight:900;color:var(--amber-hi);text-align:center;text-shadow:0 0 30px rgba(255,180,84,.5);line-height:1}
.statline{font-size:13px;color:#b39d7c;letter-spacing:1px;margin-top:8px;text-align:center}

/* ---------- loading ---------- */
#loading{position:absolute;inset:0;z-index:40;background:radial-gradient(ellipse at 50% 45%,#241407,#0a0603 75%);display:flex;align-items:center;justify-content:center;transition:opacity .6s}
#loading.out{opacity:0;pointer-events:none}
.load-inner{text-align:center}
.load-logo{font-size:52px;font-weight:900;letter-spacing:5px;color:var(--amber-hi);text-shadow:0 0 40px rgba(255,150,50,.3)}
.load-logo span{display:block;font-size:20px;letter-spacing:16px;color:var(--cream);margin-top:2px}
.load-bar{width:min(340px,70vw);height:6px;background:rgba(255,180,84,.15);border-radius:3px;margin:26px auto 12px;overflow:hidden}
#loadFill{height:100%;width:0%;background:linear-gradient(90deg,var(--amber-dim),var(--amber-hi));border-radius:3px;transition:width .2s}
#loadMsg{font-size:13px;color:#b39d7c;letter-spacing:1.5px}

@media (max-width:720px){
  #cbUnit{width:158px;padding:6px}
  #cbTranscript{min-height:26px;font-size:10px}
  #haulCard{min-width:160px;max-width:200px;padding:8px 10px;font-size:12px}
  #compass{width:44vw;top:8px}
  #speedMini{bottom:auto;top:8px;right:8px;left:auto;transform:none}
  #speedMiniVal{font-size:20px}
  .title-logo{font-size:13vw}
  #banner .b1{font-size:30px}
}