*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:#0b1020;font-family:'Segoe UI',system-ui,sans-serif;color:#fff;user-select:none}
#scene{position:fixed;inset:0;display:block;touch-action:none;-webkit-user-select:none;user-select:none}
html,body{overscroll-behavior:none}
#vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(5,8,20,.45) 100%)}
.hidden{display:none!important}

/* ---------- menu ---------- */
/* The world keeps driving past behind the menu: two glass columns either side of your
   ride, which turns slowly in the middle. */
#menu{position:fixed;inset:0;z-index:50;overflow:auto;overscroll-behavior:contain;
  background:linear-gradient(90deg,rgba(8,12,28,.82) 0%,rgba(8,12,28,.35) 36%,rgba(8,12,28,0) 50%,rgba(8,12,28,.35) 64%,rgba(8,12,28,.82) 100%),
    linear-gradient(180deg,rgba(8,12,28,.55) 0%,rgba(8,12,28,0) 22%,rgba(8,12,28,0) 78%,rgba(8,12,28,.6) 100%)}
.mwrap{min-height:100%;display:grid;grid-template-columns:minmax(300px,440px) minmax(220px,1fr) minmax(300px,420px);grid-template-rows:auto 1fr;
  gap:14px 22px;padding:22px 26px 18px;max-width:1500px;margin:0 auto}
.mhead{grid-column:1 / -1;text-align:center;animation:fadeUp .6s ease}
.mhead h1{font-size:46px;letter-spacing:12px;font-weight:200;line-height:1.05;background:linear-gradient(90deg,#ffd98a,#ff9d6f 40%,#ff7eb3 70%,#c49aff);
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 24px rgba(255,150,110,.25))}
.mhead .sub{opacity:.8;letter-spacing:3px;font-size:12.5px;margin-top:6px}
.mcol{align-self:start;display:flex;flex-direction:column;gap:10px;padding:16px 18px;border-radius:22px;background:rgba(12,16,34,.62);
  border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 60px rgba(0,0,0,.35);backdrop-filter:blur(14px);animation:fadeUp .5s ease}
.mleft{grid-column:1}.mright{grid-column:3}
.mcol h4{font-weight:500;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;opacity:.6;margin:4px 2px 0}
.daily{display:flex;align-items:center;gap:12px;text-align:left;padding:12px 14px;border-radius:16px;color:#fff;cursor:pointer;
  background:linear-gradient(120deg,rgba(255,179,92,.28),rgba(255,126,179,.2) 60%,rgba(196,154,255,.2));border:1px solid rgba(255,217,138,.45)}
.daily:hover{filter:brightness(1.12)}
.daily.on{box-shadow:0 0 0 2px #ffd98a,0 8px 30px rgba(255,179,92,.3)}
.daily .dIcon{font-size:28px}
.daily .dText{flex:1;display:flex;flex-direction:column;gap:2px}
.daily .dText b{font-size:15px;letter-spacing:.5px}
.daily .dText i{font-style:normal;font-size:11.5px;opacity:.8}
.streak{font-size:12px;padding:4px 9px;border-radius:12px;background:rgba(0,0,0,.25);white-space:nowrap}
.modes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mode{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px 9px;border-radius:14px;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);transition:transform .15s ease,background .15s ease}
.mode:hover{transform:translateY(-2px);background:rgba(255,255,255,.1)}
.mode span{font-size:24px;line-height:1}
.mode b{font-size:11px;font-weight:600;letter-spacing:.3px;text-align:center}
.mode.on{background:linear-gradient(160deg,rgba(255,179,92,.3),rgba(255,126,95,.18));border-color:#ffd98a;box-shadow:0 6px 20px rgba(255,150,90,.2)}
.blurb{font-size:12.5px;line-height:1.45;opacity:.85;min-height:36px;margin:0 2px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:12px;padding:5px 11px;font-size:12px;cursor:pointer}
.chip:hover{background:rgba(255,255,255,.1)}
.chip.on{border-color:#ffd98a;color:#ffd98a;background:rgba(255,179,92,.16)}
.trips .chip{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:6px 10px;text-align:left}
.trips .chip i{font-style:normal;font-size:10.5px;opacity:.65}
.garage{display:flex;align-items:center;gap:10px}
.gArrow{width:38px;height:38px;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.07);color:#fff;font-size:22px;line-height:1}
.gArrow:hover{background:rgba(255,179,92,.25)}
.vInfo{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;min-height:74px;justify-content:center}
.vInfo b{font-size:19px;font-weight:600;letter-spacing:.5px}
.vInfo small{font-size:12px;opacity:.78;line-height:1.35}
.vInfo em{font-style:normal;font-size:10.5px;letter-spacing:1.5px;opacity:.55;text-transform:uppercase}
.swatches{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.swatches button{width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,.25);padding:0;cursor:pointer}
.swatches button.on{border-color:#ffd98a;box-shadow:0 0 0 3px rgba(255,217,138,.3)}
.extras{border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:6px 10px;background:rgba(255,255,255,.03)}
.extras summary{cursor:pointer;font-size:12.5px;opacity:.9;padding:3px 0;list-style:none}
.extras summary::-webkit-details-marker{display:none}
.extras[open] summary{margin-bottom:6px}
.xrow{display:flex;gap:8px;align-items:flex-start;margin:6px 0}
.xrow>span{width:70px;flex:none;font-size:11.5px;opacity:.65;padding-top:5px}
.twin{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}
.seasons .chip{font-size:15px;padding:4px 8px}
#startSel{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:10px;padding:6px 8px;font-size:12.5px;max-width:160px}
#startSel option{background:#141a33}
.go{display:flex;gap:8px;align-items:center}
.go input{flex:1;min-width:0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:12px;padding:10px 12px;font-size:15px;outline:none;letter-spacing:.5px}
.go input:focus{border-color:#ffd98a}
.go .big{padding:11px 26px;font-size:16px;border-radius:12px;box-shadow:0 8px 26px rgba(255,126,95,.35)}
.go .ghost{padding:9px 14px;white-space:nowrap}
#codeIn{text-transform:uppercase;letter-spacing:3px;text-align:center}
.mfoot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mfoot .fine{margin:0;flex:1;font-size:10.5px}
@media (max-width:980px){
  .mwrap{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
  .mleft{grid-column:1}.mright{grid-column:2}
}
@media (max-width:640px){
  .mwrap{grid-template-columns:1fr;padding:14px}
  .mleft,.mright{grid-column:1}
  .mhead h1{font-size:32px;letter-spacing:7px}
  .modes{grid-template-columns:repeat(4,1fr)}
}
/* a phone held sideways: the two columns side by side, each scrolling on its own */
@media (max-height:520px) and (orientation:landscape){
  #menu{overflow:hidden}
  .mwrap{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;height:100%;padding:8px 12px;gap:6px 12px}
  .mhead h1{font-size:22px;letter-spacing:7px}
  .mhead .sub{display:none}
  .mcol{max-height:calc(100vh - 50px);overflow:auto;padding:10px 12px;gap:7px}
  .mleft{grid-column:1}.mright{grid-column:2}
  .mode{padding:6px 2px}.mode span{font-size:19px}.mode b{font-size:10px}
  .daily{padding:8px 10px}.daily .dIcon{font-size:22px}
  .blurb{min-height:0;font-size:11.5px}
  .vInfo{min-height:0}.vInfo b{font-size:16px}
}
button{cursor:pointer;font-family:inherit}
.big{background:linear-gradient(135deg,#ffb35c,#ff7e5f);border:none;color:#241203;font-weight:700;border-radius:10px;padding:11px 22px;font-size:15px;letter-spacing:1px}
.big:hover{filter:brightness(1.1)}
.ghost{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:10px;padding:9px 22px;font-size:14px}
.ghost:hover{background:rgba(255,255,255,.1)}
.msg{min-height:20px;font-size:13px;color:#ffd98a;margin-top:12px}
.fine{font-size:12px;opacity:.55;margin-top:10px;line-height:1.6}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:20}
#speedBox{position:absolute;right:26px;bottom:24px;text-align:right;text-shadow:0 2px 12px rgba(0,0,0,.6)}
#speedBox #speed{font-size:64px;font-weight:200;font-variant-numeric:tabular-nums}
#speedBox small{font-size:14px;opacity:.7;margin-left:6px;letter-spacing:2px}
#topbar{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;background:rgba(8,12,26,.55);border:1px solid rgba(255,255,255,.12);padding:8px 18px;border-radius:30px;font-size:14px;backdrop-filter:blur(6px);pointer-events:auto}
.dot{width:10px;height:10px;border-radius:50%;background:#8b93a7}
.dot.solo{background:#8b93a7}.dot.wait{background:#ffcf5c;animation:pulse 1.2s infinite}.dot.live{background:#5dff8f;box-shadow:0 0 10px #5dff8f}
@keyframes pulse{50%{opacity:.35}}
#clock{opacity:.85;font-variant-numeric:tabular-nums}
#seatBadge{position:absolute;left:26px;bottom:24px;font-size:12px;letter-spacing:3px;opacity:.85;background:rgba(8,12,26,.55);border:1px solid rgba(255,255,255,.12);padding:8px 16px;border-radius:20px}
#zone{position:absolute;left:50%;top:58px;transform:translateX(-50%);font-size:13px;letter-spacing:2px;opacity:.9;background:rgba(8,12,26,.5);border:1px solid rgba(255,255,255,.12);padding:7px 15px;border-radius:20px;backdrop-filter:blur(6px);white-space:nowrap}
#talkTag{position:absolute;top:100px;left:50%;transform:translateX(-50%);font-size:13px;color:#5dff8f;letter-spacing:1px;text-shadow:0 0 12px rgba(93,255,143,.7)}

/* ---------- chat ---------- */
#chat{position:fixed;left:26px;bottom:70px;width:300px;max-width:70vw;z-index:21;display:flex;flex-direction:column;gap:8px}
#msgs{display:flex;flex-direction:column;gap:6px;max-height:30vh;overflow:hidden;justify-content:flex-end}
.bubble{background:rgba(8,12,26,.66);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:7px 12px;font-size:14px;backdrop-filter:blur(6px);animation:fadeUp .3s ease;max-width:100%;overflow-wrap:break-word}
.bubble b{font-size:11px;letter-spacing:1px;opacity:.7;display:block}
.bubble.me{border-color:rgba(255,217,138,.4);align-self:flex-end}
.bubble.sys{opacity:.65;font-style:italic;text-align:center;font-size:12px}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}}
#chatRow{display:flex;gap:6px}
#chatIn{flex:1;background:rgba(8,12,26,.7);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:12px;padding:9px 12px;font-size:14px;outline:none}
#chatSend{background:rgba(255,179,92,.85);border:none;border-radius:12px;padding:0 14px;font-size:16px;color:#241203}

#invite{position:fixed;right:26px;top:14px;z-index:21;background:rgba(8,12,26,.6);border:1px solid rgba(255,217,138,.4);padding:8px 14px;border-radius:20px;font-size:14px;letter-spacing:1px}
#invite b{color:#ffd98a;letter-spacing:3px}
#invite button{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:10px;padding:2px 10px;font-size:12px;margin-left:8px}

#toast{position:fixed;top:70px;left:50%;transform:translateX(-50%);background:rgba(8,12,26,.8);border:1px solid rgba(255,255,255,.2);padding:10px 22px;border-radius:24px;font-size:14px;z-index:40;animation:fadeUp .3s ease}

#help{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(8,12,26,.92);border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:24px 30px;font-size:14px;line-height:1.9;z-index:45;text-align:center}
#help button{margin-top:10px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:10px;padding:6px 20px}

/* ---------- touch ---------- */
#touch{position:fixed;inset:0;z-index:22;pointer-events:none}
.tbtn{position:absolute;bottom:110px;width:70px;height:70px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;font-size:24px;pointer-events:auto;touch-action:none}
#tLeft{left:20px}#tRight{left:110px}
#tGas{right:20px;border-color:rgba(93,255,143,.5)}
#tBrake{right:110px;border-color:rgba(255,120,120,.5)}

@media (max-width:640px){
  #speedBox #speed{font-size:44px}
  .bar{max-width:60vw}
  #chat{left:12px;bottom:150px;width:230px}
}

/* ---------- radio ---------- */
#radio{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:21;display:flex;align-items:center;gap:6px;
  width:min(440px,70vw);padding:7px 8px 7px 10px;border-radius:18px;
  background:linear-gradient(180deg,rgba(18,22,40,.78),rgba(8,12,26,.72));border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px);box-shadow:0 10px 36px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06)}
#radio.flash{animation:rflash .9s ease}
@keyframes rflash{0%{box-shadow:0 0 0 rgba(255,190,110,0),0 10px 36px rgba(0,0,0,.35)}30%{box-shadow:0 0 24px rgba(255,190,110,.45),0 10px 36px rgba(0,0,0,.35)}100%{box-shadow:0 0 0 rgba(255,190,110,0),0 10px 36px rgba(0,0,0,.35)}}
#rBody{flex:1;min-width:0}
#rTop{display:flex;align-items:baseline;gap:9px}
#rFreq{font-family:'Consolas','SFMono-Regular',monospace;font-size:17px;color:#ffc36e;text-shadow:0 0 10px rgba(255,170,80,.55);letter-spacing:1px;font-variant-numeric:tabular-nums}
#rName{font-size:11px;letter-spacing:3px;text-transform:uppercase;opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#rEq{margin-left:auto;display:flex;align-items:flex-end;gap:2px;height:14px}
#rEq i{display:block;width:3px;height:14px;border-radius:2px;background:linear-gradient(0deg,#ff9d6f,#ffd98a);transform-origin:bottom;transform:scaleY(.12);transition:transform .08s linear}
#rSong{margin-top:2px;overflow:hidden;white-space:nowrap;font-size:12.5px;opacity:.78;mask-image:linear-gradient(90deg,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
#rSong #rTitle{display:inline-block}
#rSong.scroll #rTitle{animation:marquee 14s linear infinite;padding-right:40px}
@keyframes marquee{0%,12%{transform:translateX(0)}88%,100%{transform:translateX(calc(-100% + 180px))}}
.rbtn{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#fff;border-radius:12px;width:34px;height:34px;font-size:10px;letter-spacing:-2px;flex:none}
.rbtn:hover{background:rgba(255,255,255,.16)}
.rpow{font-size:15px;letter-spacing:0;color:#ffc36e}
#radio.off #rFreq{color:#6d7285;text-shadow:none}
#radio.off #rSong,#radio.off #rName{opacity:.4}
#radio.off .rpow{color:#8b93a7}
.bar button.off,#radio .rpow.off{opacity:.6}
@media (max-width:640px){
  #radio{width:94vw;bottom:10px}
  #speedBox{bottom:74px}
  #seatBadge{bottom:74px}
}

.rmode{font-size:14px;letter-spacing:0}

/* ---------- driving assists ---------- */
#assist{position:absolute;right:26px;bottom:104px;font-size:12px;letter-spacing:3px;font-weight:600;color:#9fe7ff;
  background:rgba(8,12,26,.6);border:1px solid rgba(120,210,255,.45);padding:6px 12px;border-radius:14px;
  text-shadow:0 0 10px rgba(120,210,255,.6);font-variant-numeric:tabular-nums}
.bar button.on{background:rgba(90,190,255,.28);border-color:rgba(120,210,255,.7)}
@media (max-width:640px){ #assist{bottom:150px} }

/* ---------- volume panel ---------- */
.rvolbtn{font-size:14px;letter-spacing:0}
#volPanel{position:fixed;left:50%;bottom:74px;transform:translateX(-50%);z-index:30;width:min(320px,90vw);
  background:rgba(8,12,26,.9);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:12px 16px;
  backdrop-filter:blur(10px);box-shadow:0 12px 40px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:10px;animation:fadeUp .2s ease}
#volPanel label{display:flex;align-items:center;gap:10px;font-size:13px}
#volPanel span{width:74px;opacity:.85;white-space:nowrap}
#volPanel b{width:40px;text-align:right;font-weight:500;font-variant-numeric:tabular-nums;opacity:.8}
#volPanel input[type=range]{flex:1;accent-color:#ffb35c;cursor:pointer}

/* =========================================================
   UI skin: glass panels in the title screen's sunset palette
   ========================================================= */
:root{
  --glass:rgba(12,16,34,.56);--glass-hi:rgba(18,24,48,.86);--line:rgba(255,255,255,.12);--line-hi:rgba(255,217,138,.42);
  --txt:#f5f1e8;--dim:rgba(245,241,232,.6);--gold:#ffd98a;--coral:#ff9d6f;--lilac:#c49aff;--sky:#9fe7ff;
  --warm:linear-gradient(135deg,rgba(255,179,92,.3),rgba(196,154,255,.22));
  --shadow:0 10px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06)
}

/* left rail of tools */
.bar{position:absolute;left:16px;top:14px;display:flex;flex-direction:column;gap:3px;padding:6px;border-radius:18px;
  background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:var(--shadow);pointer-events:auto;max-width:none}
.bar button{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid transparent;border-radius:12px;color:var(--txt);padding:0;
  transition:background .18s,color .18s,border-color .18s,box-shadow .18s,transform .18s}
.bar button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s,opacity .18s}
.bar button:hover{background:rgba(255,255,255,.08);color:var(--gold)}
.bar button:hover svg{transform:translateY(-1px) scale(1.06)}
.bar button:active{transform:scale(.94)}
.bar button.on{background:var(--warm);color:var(--gold);border-color:var(--line-hi);box-shadow:0 0 16px rgba(255,160,90,.22)}
.bar button.off{color:var(--dim)}
.bar button.off svg{opacity:.55}
.bar button.off::before{content:'';position:absolute;width:24px;height:2px;border-radius:2px;background:var(--coral);transform:rotate(-40deg);opacity:.85}
.bar .sep{display:block;height:1px;margin:4px 8px;background:var(--line)}
/* tooltip to the right of each tool */
.bar button::after{content:attr(data-tip);position:absolute;left:calc(100% + 12px);top:50%;transform:translate(-6px,-50%);
  white-space:nowrap;font-size:12.5px;letter-spacing:.3px;color:var(--txt);background:var(--glass-hi);border:1px solid var(--line);
  padding:6px 11px;border-radius:9px;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.bar button:hover::after,.bar button:focus-visible::after{opacity:1;transform:translate(0,-50%)}
.bar button:focus-visible{outline:none;border-color:var(--line-hi)}

/* status pill, zone, seat */
#topbar{background:var(--glass);border-color:var(--line);box-shadow:var(--shadow);backdrop-filter:blur(10px);font-size:13.5px;letter-spacing:.3px}
#zone{background:linear-gradient(135deg,rgba(196,154,255,.16),rgba(12,16,34,.55));border-color:rgba(196,154,255,.3);box-shadow:var(--shadow)}
#seatBadge{background:var(--glass);border-color:var(--line);color:var(--gold);box-shadow:var(--shadow);font-weight:600}
#speedBox #speed{font-weight:200;text-shadow:0 2px 18px rgba(0,0,0,.5),0 0 30px rgba(255,190,120,.18)}
#speedBox small{color:var(--gold);opacity:.8}

/* radio, volume, assist badge share the panel look */
#radio{background:linear-gradient(180deg,rgba(22,26,50,.8),rgba(10,14,30,.76));border-color:var(--line);box-shadow:var(--shadow),0 0 0 1px rgba(255,217,138,.05)}
.rbtn{background:rgba(255,255,255,.06);border-color:var(--line);transition:background .18s,color .18s,border-color .18s}
.rbtn:hover{background:rgba(255,255,255,.14);color:var(--gold);border-color:var(--line-hi)}
#volPanel{background:var(--glass-hi);border-color:var(--line);box-shadow:var(--shadow)}
#volPanel input[type=range]{accent-color:var(--coral)}
#assist{box-shadow:var(--shadow)}

/* chat + toast */
.bubble{background:var(--glass);border-color:var(--line);box-shadow:0 6px 18px rgba(0,0,0,.22)}
.bubble.me{border-color:var(--line-hi)}
#chatIn{background:var(--glass);border-color:var(--line);transition:border-color .18s}
#chatIn:focus{border-color:var(--line-hi)}
#chatSend{background:linear-gradient(135deg,#ffb35c,#ff7e5f)}
#toast{background:var(--glass-hi);border-color:var(--line-hi);box-shadow:var(--shadow);letter-spacing:.2px}
#invite{background:var(--glass);box-shadow:var(--shadow)}

/* controls card */
#help{background:var(--glass-hi);border-color:var(--line);box-shadow:0 24px 70px rgba(0,0,0,.5);backdrop-filter:blur(14px);
  text-align:left;padding:24px 28px;width:min(520px,92vw);line-height:1.5}
#help h3{margin:0 0 14px;font-size:20px;font-weight:300;letter-spacing:4px;text-transform:uppercase;
  background:linear-gradient(90deg,var(--gold),var(--coral),var(--lilac));-webkit-background-clip:text;background-clip:text;color:transparent}
#help .keys{display:grid;grid-template-columns:1fr;gap:8px}
#help .keys>div{display:grid;grid-template-columns:118px 1fr;align-items:center;gap:12px;font-size:13.5px;color:var(--dim)}
#help .k{display:flex;gap:4px;flex-wrap:wrap}
#help kbd{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 7px;border-radius:7px;
  font:600 12px/1 inherit;color:var(--txt);background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.2);border-bottom-width:3px;box-shadow:0 2px 6px rgba(0,0,0,.25)}
#help kbd.wide{min-width:58px}
#help .keys span kbd{height:20px;min-width:20px;font-size:11px;border-bottom-width:2px;margin:0 1px}
#help .hint{margin:16px 0 0;font-size:12.5px;color:var(--dim)}
#help button{display:block;margin:16px 0 0 auto;background:linear-gradient(135deg,#ffb35c,#ff7e5f);border:none;color:#241203;font-weight:700;
  border-radius:10px;padding:9px 20px;letter-spacing:.5px}
#help button:hover{filter:brightness(1.08)}

@media (max-width:640px){
  .bar{left:10px;top:auto;bottom:210px;flex-direction:row;flex-wrap:wrap;max-width:calc(100vw - 20px);border-radius:14px}
  .bar .sep{width:1px;height:auto;margin:6px 2px}
  .bar button{width:36px;height:36px}
  .bar button::after{display:none}
  #help .keys>div{grid-template-columns:92px 1fr}
}

/* full screen button: expand icon, collapse icon while full screen */
#bFull .fs-close{display:none}
#bFull.on .fs-open{display:none}
#bFull.on .fs-close{display:inline}

/* ---------- phones: nothing overlaps, the middle of the view stays clear ----------
   toolbar = a slim column down the right edge · speed + seat top-left · chat above the
   driving buttons · driving buttons just above the radio bar */
@media (max-width:640px){
  .bar{left:auto;right:8px;top:98px;bottom:auto;flex-direction:column;flex-wrap:nowrap;max-width:none;
    max-height:calc(100vh - 290px);overflow-y:auto;overscroll-behavior:contain;gap:2px;padding:4px;border-radius:14px;scrollbar-width:none}
  .bar::-webkit-scrollbar{display:none}
  .bar button{width:34px;height:34px;flex:0 0 34px}
  .bar button svg{width:18px;height:18px}
  .bar .sep{width:auto;height:1px;margin:3px 6px}
  #speedBox{left:14px;right:auto;top:96px;bottom:auto;text-align:left}
  #speedBox #speed{font-size:38px}
  #seatBadge{left:14px;top:164px;bottom:auto;padding:5px 11px;font-size:10px;letter-spacing:2px}
  #assist{left:14px;right:auto;top:198px;bottom:auto}
  #chat{left:12px;bottom:166px;width:calc(100vw - 72px);max-width:none}
  #msgs{max-height:22vh}
  .tbtn{bottom:78px;width:62px;height:62px;font-size:21px}
  #tLeft{left:12px}#tRight{left:86px}
  #tGas{right:12px}#tBrake{right:86px}
  #radio{bottom:8px}
  #invite{right:auto;left:50%;transform:translateX(-50%);top:100px;font-size:12px}
}

/* ---------- phone, held sideways: the way to play on a phone ----------
   a glass strip of buttons along the top · trip + place pills in the top corners ·
   steering bottom-left, pedals bottom-right with the speed above them · radio centred
   along the bottom · chat tucked in on the left. The middle of the view stays open. */
@media (max-height:520px) and (orientation:landscape){
  .bar{left:50%;right:auto;top:8px;bottom:auto;transform:translateX(-50%);flex-direction:row;flex-wrap:nowrap;
    max-width:calc(100vw - 330px);max-height:none;overflow-x:auto;overflow-y:hidden;gap:2px;padding:4px 6px;border-radius:16px;scrollbar-width:none}
  .bar::-webkit-scrollbar{display:none}
  .bar button{width:32px;height:32px;flex:0 0 32px}
  .bar button svg{width:17px;height:17px}
  .bar button::after{display:none}
  .bar .sep{width:1px;height:auto;margin:5px 3px}
  #topbar{left:10px;top:8px;transform:none;padding:5px 12px;font-size:12px}
  #zone{left:auto;right:10px;top:8px;transform:none;padding:5px 11px;font-size:11px;letter-spacing:1px}
  #talkTag{top:50px}
  #seatBadge{left:10px;top:44px;bottom:auto;padding:4px 10px;font-size:9px;letter-spacing:2px}
  #assist{left:auto;right:12px;top:44px;bottom:auto}
  #invite{left:50%;right:auto;top:50px;transform:translateX(-50%);font-size:12px;padding:5px 12px}
  #speedBox{left:auto;right:18px;top:auto;bottom:128px;text-align:right}
  #speedBox #speed{font-size:34px}
  #speedBox small{font-size:11px}
  #chat{left:12px;bottom:128px;width:min(34vw,280px)}
  #msgs{max-height:30vh}
  #chatIn{padding:7px 10px;font-size:13px}
  .tbtn{bottom:16px;width:62px;height:62px;font-size:22px;backdrop-filter:blur(6px);background:rgba(20,24,44,.35)}
  #tLeft{left:14px}#tRight{left:88px}
  #tGas{right:14px}#tBrake{right:88px}
  #radio{bottom:10px;width:auto;max-width:calc(100vw - 360px);min-width:300px;padding:5px 8px}
}

/* ---------- phone held upright: ask to turn it (you can still play upright) ---------- */
#rotate{display:none;position:fixed;inset:0;z-index:60;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  padding:30px;text-align:center;color:#f3ecff;background:radial-gradient(ellipse at 50% 35%,rgba(58,40,96,.92),rgba(8,10,24,.97) 70%);
  backdrop-filter:blur(8px)}
#rotate .phone{width:74px;height:124px;border:3px solid #ffd98a;border-radius:16px;position:relative;box-shadow:0 0 34px rgba(255,190,110,.35);
  animation:turnPhone 2.6s ease-in-out infinite}
#rotate .phone::after{content:'';position:absolute;left:50%;bottom:8px;width:18px;height:3px;margin-left:-9px;border-radius:3px;background:#ffd98a;opacity:.7}
#rotate h2{margin:6px 0 0;font-weight:300;letter-spacing:4px;font-size:20px;color:#ffd98a}
#rotate p{margin:0;opacity:.8;font-size:14px;line-height:1.5;max-width:280px}
#rotate button{margin-top:8px;background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:20px;padding:8px 18px;font-size:13px;letter-spacing:1px}
@keyframes turnPhone{0%,20%{transform:rotate(0)}45%,75%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
@media (orientation:portrait) and (pointer:coarse){ body.ingame:not(.upright-ok) #rotate{display:flex} }

/* trip meter under the speed */
#trip{font-size:11px;letter-spacing:1.5px;opacity:.72;margin-top:-4px;color:var(--gold,#ffd98a);font-variant-numeric:tabular-nums}
/* photo mode: nothing but the view */
body.photo #hud,body.photo #chat,body.photo #radio,body.photo #touch,body.photo #zone,body.photo #invite,body.photo #toast,body.photo .bar,body.photo #vignette{visibility:hidden!important}
/* credits in the help card */
#help .credits{font-size:11.5px;line-height:1.55;opacity:.7;margin:14px 0 6px;text-align:center}
#help .credits a{color:var(--gold,#ffd98a)}

/* graphics choice in the sound panel */
#gfx{display:flex;align-items:center;gap:10px;font-size:13px;margin-top:4px}
#gfx span{width:74px;opacity:.85;white-space:nowrap}
#gfx .seg{flex:1;display:flex;border:1px solid var(--line,rgba(255,255,255,.15));border-radius:10px;overflow:hidden}
#gfx .seg button{flex:1;background:transparent;border:none;color:inherit;font-size:11.5px;padding:6px 0;opacity:.7}
#gfx .seg button+button{border-left:1px solid var(--line,rgba(255,255,255,.12))}
#gfx .seg button.on{background:rgba(255,179,92,.22);color:var(--gold,#ffd98a);opacity:1}

/* ---------- two bars: the car on the left, the world and settings on the right ---------- */
#btns2{left:auto;right:16px;top:64px}
#btns2 button::after{left:auto;right:calc(100% + 12px);transform:translate(6px,-50%)}
#btns2 button:hover::after,#btns2 button:focus-visible::after{transform:translate(0,-50%)}
@media (max-width:640px){
  #btns{top:98px;max-height:calc(50vh - 118px)}
  #btns2{left:auto;right:8px;top:calc(50vh - 12px);max-height:calc(50vh - 262px)}
}
@media (max-height:520px) and (orientation:landscape){
  #btns{left:50%;right:auto;transform:translateX(calc(-100% - 4px));max-width:calc(50vw - 170px)}
  #btns2{left:50%;right:auto;top:8px;transform:translateX(4px);max-width:calc(50vw - 170px)}
}

/* ---------- your look: the character card ---------- */
#mePanel{position:fixed;right:78px;top:64px;z-index:31;width:min(300px,86vw);padding:14px 16px;border-radius:18px;
  background:var(--glass-hi,rgba(16,20,40,.9));border:1px solid var(--line,rgba(255,255,255,.14));box-shadow:var(--shadow,0 10px 30px rgba(0,0,0,.4));
  backdrop-filter:blur(12px);font-size:13px}
#mePanel h3{margin:0 0 10px;font-weight:400;letter-spacing:3px;font-size:13px;color:var(--gold,#ffd98a)}
#mePanel .row{display:flex;align-items:center;gap:8px;margin:8px 0}
#mePanel .row>span{width:66px;opacity:.8;flex:none}
#mePanel .opts{display:flex;flex-wrap:wrap;gap:6px}
#mePanel .sw{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.18);padding:0;cursor:pointer}
#mePanel .sw.on{border-color:var(--gold,#ffd98a);box-shadow:0 0 0 2px rgba(255,217,138,.25)}
#mePanel .chip{background:transparent;border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:10px;padding:3px 9px;font-size:12px;cursor:pointer}
#mePanel .chip.on{border-color:var(--gold,#ffd98a);color:var(--gold,#ffd98a);background:rgba(255,179,92,.14)}
#mePanel .foot{display:flex;justify-content:space-between;margin-top:12px}
@media (max-width:640px){ #mePanel{right:auto;left:50%;transform:translateX(-50%);top:96px} }
@media (max-height:520px) and (orientation:landscape){ #mePanel{right:auto;left:50%;transform:translateX(-50%);top:48px;max-height:calc(100vh - 60px);overflow:auto} }

/* ---------- phones: world + settings in a drawer ----------
   The car bar stays out as a strip; everything else opens from ☰ as a labelled grid of
   big, easy-to-hit buttons, and closes again after a pick or a tap elsewhere. */
#bMore{display:none}
@media (max-width:640px), (max-height:520px) and (orientation:landscape){
  #bMore{display:flex;position:fixed;z-index:24;width:40px;height:40px;align-items:center;justify-content:center;border-radius:14px;
    background:var(--glass,rgba(10,14,30,.6));border:1px solid var(--line,rgba(255,255,255,.14));color:#fff;box-shadow:var(--shadow,0 8px 24px rgba(0,0,0,.35));backdrop-filter:blur(10px);pointer-events:auto}
  #bMore svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  body.more-open #bMore{background:rgba(255,179,92,.25);border-color:rgba(255,217,138,.6);color:#ffd98a}
  #btns2{display:none!important}
  body.more-open #btns2{display:grid!important;position:fixed;left:50%!important;right:auto!important;top:50%!important;bottom:auto!important;
    transform:translate(-50%,-50%)!important;grid-template-columns:repeat(4,76px);gap:6px;padding:12px;max-height:none!important;max-width:none!important;
    overflow:visible!important;border-radius:20px;z-index:40}
  body.more-open #btns2 .sep{display:none}
  body.more-open #btns2 button{width:76px!important;height:62px!important;flex:none!important;flex-direction:column;gap:5px;border-radius:14px}
  body.more-open #btns2 button svg{width:22px!important;height:22px!important}
  body.more-open #btns2 button::after{display:block!important;content:attr(data-label);position:static;transform:none!important;opacity:.85;
    background:none;border:none;box-shadow:none;padding:0;font-size:9.5px;letter-spacing:.3px;white-space:nowrap;max-width:70px;overflow:hidden;text-overflow:ellipsis;color:inherit}
}
@media (max-width:640px){
  #bMore{right:8px;top:58px}
  #btns{max-height:calc(100vh - 380px)}
}
@media (max-height:520px) and (orientation:landscape){
  #bMore{right:10px;top:44px;width:36px;height:36px}
  #btns{left:50%!important;transform:translateX(-50%)!important;max-width:calc(100vw - 330px)}
  body.more-open #btns2{grid-template-columns:repeat(6,76px)}
}

/* ---------- settings card (same look as the character card) ---------- */
#setPanel{position:fixed;right:78px;top:64px;z-index:31;width:min(340px,90vw);padding:14px 16px;border-radius:18px;
  background:var(--glass-hi,rgba(16,20,40,.9));border:1px solid var(--line,rgba(255,255,255,.14));box-shadow:var(--shadow,0 10px 30px rgba(0,0,0,.4));
  backdrop-filter:blur(12px);font-size:13px}
#setPanel h3{margin:0 0 10px;font-weight:400;letter-spacing:3px;font-size:13px;color:var(--gold,#ffd98a)}
#setPanel .row{display:flex;align-items:center;gap:10px;margin:9px 0}
#setPanel .row>span{width:84px;opacity:.8;flex:none}
#setPanel .seg{flex:1;display:flex;border:1px solid var(--line,rgba(255,255,255,.15));border-radius:10px;overflow:hidden}
#setPanel .seg button{flex:1;background:transparent;border:none;color:inherit;font-size:12px;padding:7px 0;opacity:.7}
#setPanel .seg button+button{border-left:1px solid var(--line,rgba(255,255,255,.12))}
#setPanel .seg button.on{background:rgba(255,179,92,.22);color:var(--gold,#ffd98a);opacity:1}
#setPanel .hint{margin:8px 0 0;font-size:11px;opacity:.6;font-variant-numeric:tabular-nums}
#setPanel .foot{display:flex;justify-content:space-between;margin-top:10px}
#setPanel .chip{background:transparent;border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:10px;padding:3px 12px;font-size:12px}
#fpsMeter{position:fixed;left:50%;top:92px;transform:translateX(-50%);z-index:21;font-size:11px;letter-spacing:1px;padding:3px 9px;border-radius:10px;
  background:rgba(8,12,26,.55);border:1px solid rgba(255,255,255,.12);font-variant-numeric:tabular-nums;pointer-events:none}
@media (max-width:640px){ #setPanel{right:auto;left:50%;transform:translateX(-50%);top:96px} #fpsMeter{top:130px} }
@media (max-height:520px) and (orientation:landscape){
  #setPanel{right:auto;left:50%;transform:translateX(-50%);top:50%;margin-top:-140px;max-height:calc(100vh - 20px);overflow:auto}
  #fpsMeter{top:50px}
}

/* the drawer sits above chat and everything else, on a solid card */
body.more-open #hud{z-index:45}
@media (max-width:640px), (max-height:520px) and (orientation:landscape){ body.more-open #btns2{background:rgba(12,16,34,.94)!important;border:1px solid rgba(255,255,255,.14)} }

/* ---------- radio: the station list ---------- */
#stPanel{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:32;width:min(380px,92vw);max-height:min(62vh,520px);display:flex;flex-direction:column;
  padding:12px 12px 8px;border-radius:18px;background:var(--glass-hi,rgba(16,20,40,.93));border:1px solid var(--line,rgba(255,255,255,.14));
  box-shadow:var(--shadow,0 10px 30px rgba(0,0,0,.4));backdrop-filter:blur(12px)}
#stPanel h3{margin:2px 6px 8px;font-weight:400;letter-spacing:3px;font-size:13px;color:var(--gold,#ffd98a)}
#stList{overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:2px;padding-right:2px}
#stList .grp{font-size:10.5px;letter-spacing:2px;text-transform:uppercase;opacity:.55;margin:8px 6px 3px}
#stList .st{display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto;column-gap:10px;text-align:left;background:transparent;border:1px solid transparent;
  color:#fff;border-radius:12px;padding:7px 10px;cursor:pointer}
#stList .st:hover{background:rgba(255,255,255,.06)}
#stList .st.on{background:rgba(255,179,92,.16);border-color:rgba(255,217,138,.45)}
#stList .st b{grid-row:1 / span 2;align-self:center;font-weight:500;font-size:13px;color:var(--gold,#ffd98a);font-variant-numeric:tabular-nums}
#stList .st span{font-size:13.5px}
#stList .st i{font-style:normal;font-size:11px;opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#stPanel .fine{font-size:10px;opacity:.5;margin:8px 6px 2px;line-height:1.4}
@media (max-height:520px) and (orientation:landscape){ #stPanel{bottom:64px;max-height:calc(100vh - 80px)} }

/* ---------- seats: a top-down map of the car ---------- */
#seatPanel{position:fixed;left:78px;top:64px;z-index:31;width:min(320px,90vw);padding:14px 16px;border-radius:18px;
  background:var(--glass-hi,rgba(16,20,40,.93));border:1px solid var(--line,rgba(255,255,255,.14));box-shadow:var(--shadow,0 10px 30px rgba(0,0,0,.4));backdrop-filter:blur(12px);font-size:13px}
#seatPanel h3{margin:0 0 10px;font-weight:400;letter-spacing:3px;font-size:13px;color:var(--gold,#ffd98a)}
#seatPanel .carmap{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px;border-radius:26px 26px 16px 16px;border:1px solid rgba(255,255,255,.14);background:rgba(184,53,38,.12)}
#seatPanel .nose{grid-column:1 / -1;text-align:center;font-size:10px;letter-spacing:2px;opacity:.55;text-transform:uppercase}
#seatPanel .seat{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border-radius:14px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.05);color:#fff;cursor:pointer;min-height:74px}
#seatPanel .seat small{font-size:10px;letter-spacing:1px;opacity:.6;text-transform:uppercase}
#seatPanel .seat b{font-size:14px;font-weight:600}
#seatPanel .seat i{font-style:normal;font-size:10.5px;opacity:.6}
#seatPanel .seat.empty b{opacity:.45;font-weight:400}
#seatPanel .seat.me{border-color:var(--gold,#ffd98a);background:rgba(255,179,92,.18)}
#seatPanel .seat.me b{color:var(--gold,#ffd98a)}
#seatPanel .seat.pending{border-style:dashed;animation:seatPulse 1.2s ease-in-out infinite}
@keyframes seatPulse{50%{background:rgba(255,179,92,.14)}}
#seatPanel .seat:not(.me):hover{background:rgba(255,255,255,.1)}
#seatPanel .hint{font-size:11px;opacity:.6;line-height:1.45;margin:10px 2px 0}
#seatPanel .foot{display:flex;justify-content:space-between;margin-top:8px}
#seatPanel .chip{background:transparent;border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:10px;padding:3px 12px;font-size:12px}
#seatAsk{position:fixed;left:50%;top:18%;transform:translateX(-50%);z-index:55;width:min(340px,90vw);text-align:center;padding:16px 18px;border-radius:18px;
  background:var(--glass-hi,rgba(16,20,40,.95));border:1px solid rgba(255,217,138,.45);box-shadow:0 14px 40px rgba(0,0,0,.5);backdrop-filter:blur(12px)}
#seatAsk p{margin:0 0 12px;font-size:14px;line-height:1.45}
#seatAsk div{display:flex;gap:10px;justify-content:center}
@media (max-width:640px), (max-height:520px) and (orientation:landscape){
  #seatPanel{left:50%;transform:translateX(-50%);top:50%;margin-top:-150px;max-height:calc(100vh - 20px);overflow:auto}
}

/* ---------- the journal ---------- */
#jPanel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:60;width:min(640px,94vw);max-height:min(82vh,640px);display:flex;flex-direction:column;
  padding:14px 16px;border-radius:20px;background:rgba(14,18,38,.95);border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 70px rgba(0,0,0,.55);backdrop-filter:blur(14px)}
#jPanel h3{margin:0 0 10px;font-weight:400;letter-spacing:3px;font-size:13px;color:#ffd98a}
#jTabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
#jTabs button{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:12px;padding:5px 12px;font-size:12px}
#jTabs button.on{border-color:#ffd98a;color:#ffd98a;background:rgba(255,179,92,.16)}
#jBody{overflow:auto;overscroll-behavior:contain;flex:1;min-height:120px}
#jBody .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
#jBody .ent{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);text-align:center}
#jBody .ent span{font-size:26px}
#jBody .ent b{font-size:11.5px;font-weight:500}
#jBody .ent i{font-style:normal;font-size:10px;opacity:.55}
#jBody .ent.lock{opacity:.35;filter:grayscale(1)}
#jBody .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
#jBody .pc{border-radius:10px;overflow:hidden;background:#fff;color:#222;padding:6px 6px 4px;box-shadow:0 6px 18px rgba(0,0,0,.4);transform:rotate(-1deg)}
#jBody .pc:nth-child(2n){transform:rotate(1.2deg)}
#jBody .pc img{width:100%;display:block;border-radius:4px}
#jBody .pc p{font-family:Georgia,serif;font-size:12px;margin:5px 2px 0;display:flex;justify-content:space-between}
#jBody .list{display:flex;flex-direction:column;gap:5px}
#jBody .list div{display:flex;justify-content:space-between;gap:10px;padding:7px 10px;border-radius:10px;background:rgba(255,255,255,.05);font-size:13px}
#jBody .list div i{font-style:normal;opacity:.55;font-size:11.5px;white-space:nowrap}
#jBody .empty{opacity:.6;font-size:13px;text-align:center;padding:26px 10px;line-height:1.6}
#jBody .stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
#jBody .stats div{padding:12px;border-radius:12px;background:rgba(255,255,255,.05);text-align:center}
#jBody .stats b{display:block;font-size:24px;font-weight:300;color:#ffd98a}
#jBody .stats i{font-style:normal;font-size:11px;opacity:.65}
#jPanel .foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:12px;opacity:.9}

/* ---------- the drive's own bar: mode, trip progress, hunt list ---------- */
#modeBar{position:absolute;left:50%;top:96px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
#modeBar .mtag{font-size:11.5px;letter-spacing:1.5px;padding:4px 12px;border-radius:14px;background:rgba(8,12,26,.5);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(6px)}
#tripBar{width:min(360px,60vw);display:flex;align-items:center;gap:8px;font-size:12px;padding:6px 12px;border-radius:16px;background:rgba(8,12,26,.55);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(6px)}
#tripBar .track{flex:1;height:6px;border-radius:4px;background:rgba(255,255,255,.14);overflow:hidden}
#tripBar .fill{height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,#ffd98a,#ff7e5f)}
#huntBar{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:70vw}
#huntBar span{font-size:11.5px;padding:4px 10px;border-radius:14px;background:rgba(8,12,26,.55);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px)}
#huntBar span.got{border-color:#5dff8f;color:#5dff8f;background:rgba(40,120,70,.35)}
body.zen #hud,body.zen #radio,body.zen #chat,body.zen #invite,body.zen #touch,body.zen #zone{opacity:0;pointer-events:none!important;transition:opacity .6s}
body.zen.zen-peek #hud,body.zen.zen-peek #radio,body.zen.zen-peek #chat,body.zen.zen-peek #touch,body.zen.zen-peek #zone{opacity:1;pointer-events:auto!important}
body.zen.zen-peek #hud{pointer-events:none!important}
body.zen #hud button,body.zen #radio button{pointer-events:none}
body.zen.zen-peek #hud button,body.zen.zen-peek #radio button{pointer-events:auto}
#discover{position:fixed;left:50%;top:132px;transform:translateX(-50%);z-index:41;display:flex;align-items:center;gap:10px;padding:8px 16px 8px 10px;border-radius:22px;
  background:linear-gradient(120deg,rgba(40,90,60,.9),rgba(20,40,60,.9));border:1px solid rgba(93,255,143,.45);box-shadow:0 10px 30px rgba(0,0,0,.4);animation:fadeUp .4s ease;font-size:13px}
#discover span{font-size:26px}
#discover i{font-style:normal;font-size:10.5px;letter-spacing:1.5px;opacity:.7;display:block;text-transform:uppercase}
@media (max-height:520px) and (orientation:landscape){ #modeBar{top:70px} #discover{top:96px} }

/* ---------- pulling over: the offer card, the bar while you're out, emotes, the walking stick ---------- */
#stopCard{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);z-index:42;display:flex;align-items:center;gap:12px;padding:10px 12px 10px 14px;border-radius:20px;
  background:linear-gradient(120deg,rgba(40,28,14,.92),rgba(20,24,44,.92));border:1px solid rgba(255,217,138,.5);box-shadow:0 12px 36px rgba(0,0,0,.45);animation:fadeUp .35s ease;max-width:94vw}
#stopCard>span{font-size:30px}
#stopCard div{display:flex;flex-direction:column;gap:2px;min-width:0}
#stopCard b{font-size:14px}
#stopCard i{font-style:normal;font-size:11.5px;opacity:.75}
#stopCard .big{padding:9px 18px}
#stopCard .ghost{padding:8px 11px}
#actBar{position:fixed;left:50%;bottom:86px;transform:translateX(-50%);z-index:42;display:flex;flex-direction:column;align-items:center;gap:7px;padding:9px 12px;border-radius:18px;
  background:rgba(10,14,30,.8);border:1px solid rgba(255,255,255,.16);box-shadow:0 10px 30px rgba(0,0,0,.4);backdrop-filter:blur(10px);max-width:94vw}
#actText{font-size:12.5px;letter-spacing:.5px;opacity:.9}
#actBtns{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
#emoteBar{position:fixed;left:78px;top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:16px;
  background:rgba(10,14,30,.7);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px)}
#emoteBar button{width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);font-size:22px;cursor:pointer}
#emoteBar button:hover,#emoteBar button.on{background:rgba(255,179,92,.25);border-color:#ffd98a}
#walkPad{position:fixed;left:28px;bottom:120px;z-index:43}
#walkStick{width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;touch-action:none}
#walkStick i{width:48px;height:48px;border-radius:50%;background:rgba(255,217,138,.55);border:1px solid rgba(255,255,255,.5);pointer-events:none}
@media (max-width:640px), (max-height:520px) and (orientation:landscape){
  #emoteBar{left:50%;top:auto;bottom:74px;transform:translateX(-50%);flex-direction:row}
  #stopCard,#actBar{bottom:70px}
  #walkPad{left:16px;bottom:70px}
}

/* ---------- car games ---------- */
#gPanel{position:fixed;right:78px;top:64px;z-index:33;width:min(380px,92vw);max-height:calc(100vh - 170px);overflow:auto;padding:12px 14px 14px;border-radius:18px;
  background:rgba(14,18,38,.94);border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 40px rgba(0,0,0,.45);backdrop-filter:blur(12px);font-size:13px}
#gPanel .ghead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
#gPanel h3{font-weight:400;letter-spacing:3px;font-size:13px;color:#ffd98a}
.gcard{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:10px;width:100%;text-align:left;margin:0 0 7px;padding:9px 11px;border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:#fff;cursor:pointer}
.gcard:hover{background:rgba(255,179,92,.14);border-color:rgba(255,217,138,.5)}
.gcard span{grid-row:1 / span 2;font-size:26px;align-self:center}
.gcard b{font-size:14px}.gcard i{font-style:normal;font-size:11.5px;opacity:.65}
.gq{font-size:15px;line-height:1.45;margin:4px 0 10px}
.gopts{display:grid;gap:6px}
.gopt{text-align:left;padding:9px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:#fff;font-size:13.5px;cursor:pointer}
.gopt:hover{background:rgba(255,255,255,.1)}
.gopt.picked{border-color:#ffd98a}.gopt.right{border-color:#5dff8f;background:rgba(40,140,80,.35)}.gopt.wrong{border-color:#ff7a7a;background:rgba(160,40,40,.3)}
.gscores{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.gscores span{font-size:11.5px;padding:3px 9px;border-radius:10px;background:rgba(255,255,255,.08)}
.gfoot{display:flex;gap:6px;justify-content:flex-end;align-items:center;margin-top:8px;flex-wrap:wrap}
.gtimer{margin-right:auto;font-variant-numeric:tabular-nums;opacity:.8}
.grow{display:flex;gap:6px;margin:6px 0}
.ginput{flex:1;min-width:0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:10px;padding:8px 10px;font-size:14px;outline:none}
.ginput:focus{border-color:#ffd98a}
.ghint{font-size:12px;opacity:.75;margin:6px 0}
.gspot{width:100%;padding:14px;font-size:18px;margin:4px 0}
.gletter{font-size:64px;font-weight:200;text-align:center;color:#ffd98a;line-height:1;margin:4px 0}
.glist{display:flex;flex-direction:column;gap:3px;margin:6px 0;font-size:12px;opacity:.85}
.gstory{max-height:220px;overflow:auto;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.04);font-family:Georgia,serif;font-size:13.5px;line-height:1.55}
.gstory p{margin:0 0 6px}
@media (max-width:640px), (max-height:520px) and (orientation:landscape){ #gPanel{right:auto;left:50%;transform:translateX(-50%);top:50%;margin-top:0;transform:translate(-50%,-50%);max-height:calc(100vh - 20px)} }

/* radio: save a song, local stations, My Music */
.rbtn.rlove{font-size:15px;color:#ffb3c1}
.rbtn.rlove.on{color:#ff6f91}
#stList .st.local span{color:#b8f5c8}
#stList .mine{display:flex;flex-direction:column;gap:2px;margin:2px 0 6px 62px}
#stList .mine .mt{display:flex;align-items:center;gap:4px;border-radius:8px}
#stList .mine .mt.on{background:rgba(255,179,92,.12)}
#stList .mine .mp{flex:1;min-width:0;text-align:left;background:none;border:0;color:inherit;font:inherit;font-size:12.5px;padding:5px 6px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:8px}
#stList .mine .mp:hover{background:rgba(255,255,255,.06)}
#stList .mine .mx{background:none;border:0;color:inherit;opacity:.45;cursor:pointer;padding:4px 7px;font-size:11px}
#stList .mine .mx:hover{opacity:1}
#stList .mine .macts{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
#stList .mine .macts .chip{cursor:pointer;font-size:12px}
#stList .mine .fine{font-size:10.5px;opacity:.5;margin:4px 2px 0}
#localTip{position:fixed;left:50%;top:116px;transform:translateX(-50%);z-index:31;display:flex;align-items:center;gap:8px;max-width:min(560px,94vw);
  padding:8px 10px 8px 14px;border-radius:14px;background:rgba(18,20,28,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(184,245,200,.35);color:#eef;font-size:13px;box-shadow:0 8px 28px rgba(0,0,0,.35);animation:tipIn .35s ease}
#localTip b{font-weight:500;color:#b8f5c8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#localTip button{background:rgba(184,245,200,.16);border:1px solid rgba(184,245,200,.4);color:#dfffe7;border-radius:10px;padding:5px 10px;font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
#localTip button.x{background:none;border:0;opacity:.55;padding:4px 6px}
#localTip.hidden{display:none}
@keyframes tipIn{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}

/* roadside garage */
#gaPanel{position:fixed;right:78px;top:64px;z-index:31;width:min(400px,92vw);max-height:min(78vh,620px);overflow-y:auto;padding:14px 16px;border-radius:18px;
  background:var(--glass-hi,rgba(16,20,40,.9));border:1px solid var(--line,rgba(255,255,255,.14));box-shadow:var(--shadow,0 10px 30px rgba(0,0,0,.4));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:13px}
#gaPanel h3{margin:0 0 10px;font-weight:400;letter-spacing:3px;font-size:13px;color:var(--gold,#ffd98a)}
#gaList{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px}
#gaList .ga{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 4px 8px;border-radius:12px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);color:inherit;cursor:pointer;font:inherit}
#gaList .ga:hover{background:rgba(255,255,255,.1)}
#gaList .ga span{font-size:24px;line-height:1.1}
#gaList .ga b{font-weight:500;font-size:12.5px}
#gaList .ga i{font-style:normal;font-size:10.5px;opacity:.55}
#gaList .ga.on{background:rgba(255,179,92,.18);border-color:rgba(255,217,138,.5)}
#gaList .ga.no{opacity:.35}
#gaPanel .gp{display:flex;align-items:center;gap:10px;margin:12px 0 4px}
#gaPanel .gp>span{opacity:.8;width:44px;flex:none}
#gaPaint{display:flex;flex-wrap:wrap;gap:6px}
#gaPaint button{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.25);cursor:pointer;padding:0}
#gaPaint button.on{border-color:#fff;box-shadow:0 0 0 2px rgba(255,217,138,.7)}
#gaPanel .hint{opacity:.6;font-size:11.5px;margin:8px 0 4px}
#gaPanel .foot{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
#gaPanel.hidden{display:none}
#convoyBar{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:80vw;margin-top:4px}
#convoyBar span{font-size:12px;padding:4px 10px;border-radius:12px;background:rgba(18,20,28,.6);border:1px solid rgba(255,255,255,.14);white-space:nowrap}
#convoyBar span.far{opacity:.6}
#convoyBar.hidden{display:none}
#localTip .lt{white-space:nowrap;opacity:.75}
@media (max-height:500px){#localTip{top:50px;font-size:12px;padding:6px 8px 6px 12px}}
@media (max-height:500px){
  #gaPanel{top:48px;width:min(600px,82vw);max-height:calc(100vh - 60px);padding:10px 12px}
  #gaList{grid-template-columns:repeat(5,1fr);gap:5px}
  #gaList .ga{padding:5px 2px}
  #gaList .ga span{font-size:19px}
}

/* convoy: how you ride */
.chips.ride{margin-top:8px}
#rideList{display:flex;flex-direction:column;gap:6px;margin:4px 0 8px}
#rideList .ride{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:inherit;font:inherit;cursor:pointer}
#rideList .ride:hover{background:rgba(255,255,255,.1)}
#rideList .ride b{font-weight:500;font-size:13.5px}
#rideList .ride i{font-style:normal;font-size:11.5px;opacity:.6}
#rideList .ride.on{background:rgba(255,179,92,.16);border-color:rgba(255,217,138,.5)}
#rideList .ride.dis{opacity:.4;cursor:default}
#rideList .fine{font-size:11px;opacity:.55;margin:4px 2px 0}
#rideList.hidden,.carmap.hidden{display:none}