/* ============================================================
   DRIFT DAĞ — css/ui.css
   Design system: "midnight touge"
   Deep night blues + amber accent, condensed racing type,
   glass panels, subtle grain. All menu surfaces live here.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --bg:#0b0e14;
  --bg-2:#0e1220;
  --panel:#131a2a;
  --panel-2:#182136;
  --ink:#f4f6fb;
  --dim:#93a0b8;
  --faint:#5c687f;
  --amber:#ffb454;
  --amber-soft:#ffcf8f;
  --cyan:#5ad1ff;
  --red:#ff5d5d;
  --green:#5dff9d;
  --violet:#b98cff;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.16);
  --glass:rgba(19,26,42,.72);
  --radius:18px;
  --shadow:0 24px 60px -24px rgba(0,0,0,.75);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);
  font-family:'Rajdhani',sans-serif;
  -webkit-user-select:none;user-select:none;touch-action:none;overscroll-behavior:none;position:fixed;inset:0;}
@supports (height:100dvh){ html,body{height:100dvh;} }
canvas{display:block !important;width:100% !important;height:100% !important;}
#app{position:fixed;inset:0;overflow:hidden;}
#app canvas{position:absolute;top:0;left:0;}
.hidden{display:none !important;}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer;}

/* film grain over every UI surface */
.grain::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");}

/* ---------- MENU ---------- */
#menu{position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:20px;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(90,209,255,.10) 0%, transparent 55%),
    radial-gradient(120% 80% at 50% 115%, rgba(255,180,84,.09) 0%, transparent 60%),
    linear-gradient(180deg, rgba(11,14,20,.86) 0%, rgba(11,14,20,.45) 38%, rgba(11,14,20,.9) 100%);
}
#menu::after{content:'';position:absolute;left:0;right:0;top:0;height:3px;z-index:41;
  background:linear-gradient(90deg,transparent,var(--amber) 30%,var(--cyan) 70%,transparent);opacity:.7;}

.menu-topbar{position:absolute;top:max(16px,env(safe-area-inset-top));left:max(20px,env(safe-area-inset-left));
  right:max(20px,env(safe-area-inset-right));display:flex;align-items:center;gap:10px;}
.pill{display:inline-flex;align-items:center;gap:7px;background:rgba(19,26,42,.66);
  border:1px solid var(--line);border-radius:99px;padding:7px 13px;font-weight:800;font-size:13px;
  letter-spacing:.06em;color:var(--dim);backdrop-filter:blur(10px);}
.pill svg{width:15px;height:15px;color:var(--amber);}
.pill b{font-family:'Saira Condensed';font-size:15px;font-weight:800;color:var(--green);
  letter-spacing:.04em;}
.topbar-spacer{flex:1;}

.brand-wrap{text-align:center;animation:rise .55s cubic-bezier(.22,.9,.3,1) both;}
.brand{font-family:'Saira Condensed';font-weight:900;line-height:.92;text-align:center;
  font-size:clamp(52px,10vw,104px);letter-spacing:.03em;
  text-shadow:0 6px 40px rgba(0,0,0,.65);}
.brand em{font-style:normal;
  background:linear-gradient(180deg,#ffd9a0 0%,var(--amber) 55%,#e08b2d 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 22px rgba(255,180,84,.28));}
.sub{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px;
  color:var(--dim);font-weight:700;font-size:clamp(11px,2.2vw,14px);letter-spacing:.42em;text-transform:uppercase;}
.sub::before,.sub::after{content:'';height:1px;width:min(56px,9vw);
  background:linear-gradient(90deg,transparent,var(--line-strong));}
.sub::after{background:linear-gradient(90deg,var(--line-strong),transparent);}

/* lobby layout: modes left · live car showcase right */
.menu-hero{display:flex;flex-direction:column;align-items:center;width:min(1060px,94vw);
  animation:rise .55s .04s cubic-bezier(.22,.9,.3,1) both;}
.hero-right{display:none;}
@media(min-width:1020px) and (min-height:640px){
  .menu-hero{flex-direction:row;align-items:center;gap:clamp(24px,4vw,64px);}
  .hero-left{flex:0 0 auto;width:min(460px,44vw);}
  .hero-right{display:block;flex:0 0 auto;width:min(480px,42vw);}
}

/* live car showcase on the main menu */
#menuCar{position:relative;height:clamp(230px,34vh,320px);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;touch-action:none;cursor:grab;
  background:radial-gradient(ellipse at 50% 116%, rgba(90,209,255,.14) 0%, #141b2e 52%, #0c101b 100%);
  box-shadow:var(--shadow);}
#menuCar:active{cursor:grabbing;}
#menuCar canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.showcase-cap{display:flex;align-items:center;gap:12px;margin-top:10px;padding:10px 16px;
  border:1px solid var(--line);border-radius:13px;background:rgba(19,26,42,.55);backdrop-filter:blur(8px);}
.cap-kicker{color:var(--faint);font-size:10px;font-weight:800;letter-spacing:.18em;}
.showcase-cap b{font-family:'Saira Condensed';font-weight:800;font-size:20px;letter-spacing:.04em;}
.cap-link{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;
  border:1px solid rgba(255,180,84,.45);border-radius:10px;color:var(--amber);
  font-weight:800;font-size:12px;letter-spacing:.08em;background:rgba(255,180,84,.07);
  transition:background .15s,color .15s;}
.cap-link svg{width:13px;height:13px;}
.cap-link:hover{background:rgba(255,180,84,.16);color:#ffd9a0;}

.modes{display:flex;flex-direction:column;gap:12px;margin-top:36px;width:min(460px,88vw);
  animation:rise .55s .08s cubic-bezier(.22,.9,.3,1) both;}
.mode-btn{position:relative;display:flex;align-items:center;gap:15px;width:100%;padding:15px 17px;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-align:left;
  background:linear-gradient(160deg, rgba(24,33,54,.82), rgba(15,20,34,.78));
  backdrop-filter:blur(12px);box-shadow:var(--shadow);
  transition:transform .1s ease,border-color .18s ease,background .18s ease;}
.mode-btn::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--accent,#888);opacity:.85;transition:opacity .18s;}
.mode-btn:hover{transform:translateY(-2px);border-color:var(--line-strong);
  background:linear-gradient(160deg, rgba(30,41,64,.9), rgba(17,23,38,.85));}
.mode-btn:active{transform:scale(.985);}
.mode-btn:hover::before{box-shadow:0 0 18px var(--accent,#888);}

.mode-icon{flex:0 0 auto;width:46px;height:46px;display:grid;place-items:center;border-radius:13px;}
.mode-icon svg{width:24px;height:24px;}
.mode-uphill{--accent:var(--amber);}
.mode-uphill .mode-icon{background:rgba(255,180,84,.13);color:var(--amber);}
.mode-downhill{--accent:var(--cyan);}
.mode-downhill .mode-icon{background:rgba(90,209,255,.12);color:var(--cyan);}
.mode-free{--accent:var(--violet);}
.mode-free .mode-icon{background:rgba(185,140,255,.12);color:var(--violet);}
.mode-name{font-family:'Saira Condensed';font-weight:800;font-size:21px;letter-spacing:.06em;}
.mode-desc{color:var(--dim);font-size:13px;font-weight:600;margin-top:1px;}
.mode-best{margin-left:auto;text-align:right;color:var(--faint);font-size:10.5px;font-weight:800;
  line-height:1.3;white-space:nowrap;letter-spacing:.16em;}
.mode-best b{display:block;color:var(--ink);font-family:'Saira Condensed';font-size:19px;
  font-weight:800;letter-spacing:.04em;margin-top:1px;}
.mode-arrow{flex:0 0 auto;width:18px;height:18px;color:var(--faint);transition:transform .15s,color .15s;}
.mode-btn:hover .mode-arrow{transform:translateX(3px);color:var(--ink);}

.menu-foot{margin-top:26px;display:flex;gap:10px;align-items:stretch;
  animation:rise .55s .16s cubic-bezier(.22,.9,.3,1) both;}
/* big GARAGE call-to-action */
.garage-cta{position:relative;display:flex;align-items:center;gap:13px;text-align:left;
  padding:13px 18px;border-radius:15px;overflow:hidden;color:#1a1206;
  background:linear-gradient(160deg,#ffc678,var(--amber));border:1px solid #ffd9a0;
  box-shadow:0 14px 36px -14px rgba(255,180,84,.65), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .12s ease,filter .15s ease;flex:1;min-width:0;}
.garage-cta:hover{filter:brightness(1.06);transform:translateY(-1px);}
.garage-cta:active{transform:scale(.985);}
.cta-ico{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;border-radius:11px;
  background:rgba(26,18,6,.16);color:#1a1206;}
.cta-ico svg{width:21px;height:21px;}
.cta-txt{display:flex;flex-direction:column;line-height:1.15;min-width:0;}
.cta-txt b{font-family:'Saira Condensed';font-weight:900;font-size:20px;letter-spacing:.09em;}
.cta-txt small{font-size:11px;font-weight:700;opacity:.8;letter-spacing:.03em;white-space:nowrap;}
.cta-arrow{flex:0 0 auto;width:17px;height:17px;margin-left:auto;color:#1a1206;opacity:.75;
  transition:transform .15s;}
.garage-cta:hover .cta-arrow{transform:translateX(3px);opacity:1;}
.foot-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border:1px solid var(--line);
  border-radius:13px;background:rgba(19,26,42,.55);backdrop-filter:blur(8px);
  color:var(--dim);font-weight:800;font-size:13.5px;letter-spacing:.07em;
  transition:color .15s,border-color .15s;}
.foot-btn svg{width:16px;height:16px;}
.foot-btn:hover{color:var(--ink);border-color:var(--line-strong);}
.menu-hint{position:absolute;bottom:max(14px,env(safe-area-inset-bottom));left:0;right:0;text-align:center;
  color:#525d73;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;}

/* ---------- SHEETS (garage / howto) ---------- */
.sheet{position:absolute;inset:0;z-index:50;display:flex;flex-direction:column;
  padding:max(16px,env(safe-area-inset-top)) clamp(14px,3vw,28px) max(16px,env(safe-area-inset-bottom));
  background:
    radial-gradient(110% 70% at 50% -10%, rgba(90,209,255,.07) 0%, transparent 55%),
    linear-gradient(180deg,#0c101b 0%, #0b0e14 100%);}
.sheet-head{display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--line);}
.sheet-title{font-family:'Saira Condensed';font-weight:900;font-size:clamp(24px,4vw,32px);letter-spacing:.05em;}
.sheet-title em{font-style:normal;color:var(--amber);}
.sheet-head-txt{display:flex;flex-direction:column;gap:1px;}
.sheet-sub{color:var(--faint);font-weight:800;font-size:10.5px;letter-spacing:.22em;}
.money-banner{margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  font-family:'Saira Condensed';font-weight:800;font-size:18px;color:var(--green);
  background:rgba(93,255,157,.08);border:1px solid rgba(93,255,157,.22);border-radius:12px;padding:8px 15px;white-space:nowrap;}
.money-banner svg{width:16px;height:16px;}
.sheet-close{margin-left:12px;display:inline-flex;align-items:center;gap:7px;padding:10px 16px;
  border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--dim);
  font-weight:800;font-size:13px;letter-spacing:.08em;transition:border-color .15s,color .15s;}
.sheet-close svg{width:14px;height:14px;}
.sheet-close:hover{color:var(--ink);border-color:var(--line-strong);}

.garage-body{flex:1;display:grid;grid-template-columns:1fr;gap:16px;overflow:auto;margin-top:16px;
  padding-bottom:10px;min-height:0;}
@media(min-width:860px){.garage-body{overflow:hidden;padding-bottom:0;min-height:0;}}
.garage-scroll{display:flex;flex-direction:column;gap:10px;}

/* desktop showroom: list | stage | build rail */
.garage-col{min-height:0;display:flex;flex-direction:column;}
/* children of scrollable garage columns must keep their natural height —
   without this flex squashes the cards together and the rail looks jammed */
.garage-col-side>*,.garage-scroll>*{flex:0 0 auto;}
.col-label{display:flex;align-items:center;gap:7px;color:var(--faint);font-weight:800;font-size:11px;
  letter-spacing:.18em;margin-bottom:2px;padding-left:4px;}
.col-label svg{width:13px;height:13px;color:var(--amber);}
@media(min-width:860px){
  .garage-body{grid-template-columns:minmax(250px,300px) minmax(0,1fr);gap:14px;}
  .garage-col-list .garage-scroll,
  .garage-col-side{overflow-y:auto;padding-right:6px;scrollbar-width:thin;scrollbar-color:#2a3550 transparent;}
  .garage-col-list .garage-scroll::-webkit-scrollbar,
  .garage-col-side::-webkit-scrollbar{width:5px;}
  .garage-col-list .garage-scroll::-webkit-scrollbar-thumb,
  .garage-col-side::-webkit-scrollbar-thumb{background:#2a3550;border-radius:99px;}
}
@media(min-width:1180px){
  .garage-body{grid-template-columns:minmax(260px,320px) minmax(0,1fr) minmax(330px,400px);gap:16px;}
}
/* mid width: side column drops under the stage */
@media(min-width:860px) and (max-width:1179px){
  .garage-col-side{grid-column:1 / -1;overflow:visible;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:12px;align-items:start;}
}
.garage-stage{position:relative;display:flex;flex-direction:column;gap:12px;min-height:0;}
@media(max-width:859px){
  /* mobile: car first, then detail, then settings */
  .garage-body{display:flex;flex-direction:column;}
  .garage-stage{order:-1;display:block;}
}

.card{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(165deg,var(--panel),#101625);
  transition:border-color .15s;}
.car-card{position:relative;padding:12px 14px;cursor:pointer;overflow:hidden;
  transition:border-color .15s,background .15s,transform .1s;}
.car-card:hover{border-color:var(--line-strong);background:linear-gradient(165deg,#16203a,#111a2e);
  transform:translateX(2px);}
.car-card.sel{border-color:var(--amber);background:linear-gradient(165deg,#1b2338,#141c30);}
.car-card.sel::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--amber);
  box-shadow:0 0 14px rgba(255,180,84,.7);}
.car-card h3{font-family:'Saira Condensed';font-weight:800;font-size:17.5px;letter-spacing:.04em;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.car-tag{font-size:9px;font-weight:800;letter-spacing:.1em;padding:2.5px 7px;border-radius:99px;
  background:rgba(255,255,255,.07);color:var(--faint);border:1px solid transparent;}
.car-card.sel .car-tag{color:var(--amber-soft);background:rgba(255,180,84,.1);border-color:rgba(255,180,84,.25);}
.car-card .stat-row:nth-of-type(2){margin-top:5px;}
.car-card.locked{opacity:.62;}
.car-card.locked::after{content:'';position:absolute;inset:0;background:
  repeating-linear-gradient(-45deg,transparent 0 9px,rgba(255,255,255,.02) 9px 10px);pointer-events:none;}
.stat-row{display:flex;align-items:center;gap:8px;margin-top:7px;font-size:12px;font-weight:700;color:var(--dim);}
.stat-row span:first-child{width:74px;letter-spacing:.06em;}
.bar{flex:1;height:5px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;}
.bar i{display:block;height:100%;border-radius:99px;box-shadow:0 0 8px currentColor;}
.locked-note{margin-top:8px;font-size:12px;font-weight:700;color:var(--red);}
.car-price{margin-top:7px;font-family:'Saira Condensed';font-weight:800;font-size:15px;color:var(--amber);}
.car-card.locked .car-price{color:var(--dim);}

.detail-panel{padding:16px;}
.detail-head{display:flex;align-items:flex-start;gap:12px;}
.detail-name{font-family:'Saira Condensed';font-weight:900;font-size:24px;letter-spacing:.04em;}
.detail-desc{color:var(--dim);font-weight:600;font-size:13px;margin-top:2px;}
.detail-price{margin-left:auto;font-family:'Saira Condensed';font-weight:800;font-size:17px;white-space:nowrap;}
.detail-price .ok{color:var(--green);}
.wide{width:100%;margin-top:12px;border-radius:12px;}
.sec-title{display:flex;align-items:center;gap:8px;font-family:'Saira Condensed';font-weight:800;
  font-size:16px;letter-spacing:.09em;margin-top:20px;color:var(--ink);}
.sec-title::after{content:'';flex:1;height:1px;background:var(--line);}

.up-row{display:flex;align-items:center;gap:12px;margin-top:10px;background:rgba(255,255,255,.03);
  border:1px solid var(--line);border-radius:13px;padding:11px 13px;}
.up-info{flex:1;min-width:0;}
.up-info b{font-size:14px;}
.up-info span{display:block;color:var(--dim);font-size:11px;font-weight:600;margin-top:1px;}
.pips{display:flex;gap:4px;margin-top:6px;}
.pips i{width:22px;height:5px;border-radius:99px;background:rgba(255,255,255,.1);display:block;}
.pips i.on{background:var(--amber);box-shadow:0 0 8px rgba(255,180,84,.6);}
.up-btn{flex:0 0 auto;min-width:96px;padding:10px 10px;border-radius:10px;background:var(--amber);color:#1a1206;
  font-weight:800;font-size:13px;text-align:center;box-shadow:0 6px 18px -8px rgba(255,180,84,.55);
  transition:filter .15s,transform .1s;}
.up-btn:not([disabled]):hover{filter:brightness(1.1);}
.up-btn:not([disabled]):active{transform:scale(.97);}
.up-btn[disabled]{background:#39415280;color:var(--dim);box-shadow:none;}

.cos-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.cos-btn{padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.02);
  color:var(--dim);font-weight:700;font-size:12px;display:flex;flex-direction:column;align-items:center;gap:2px;
  transition:border-color .15s,color .15s;}
.cos-btn small{font-size:9px;color:var(--amber);letter-spacing:.04em;}
.cos-btn:hover{border-color:var(--line-strong);}
.cos-btn.on{border-color:var(--green);color:var(--ink);background:rgba(93,255,157,.06);}
.custom-grid{display:flex;flex-direction:column;gap:12px;margin-top:10px;}
/* wide screens: customization blocks flow in two columns so the right
   rail fits without a kilometre of scrolling */
@media(min-width:1180px){
  .custom-grid{display:grid;grid-template-columns:1fr 1fr;align-items:start;}
}
.custom-block{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:13px;padding:13px;}
.custom-block>b{display:block;font-size:13px;margin-bottom:8px;letter-spacing:.04em;}
.custom-block small{display:block;color:var(--faint);font-size:10px;margin-top:7px;font-weight:600;}
.custom-block .swatches{margin-top:2px;}
.custom-block .swatch{width:26px;height:26px;}

.tune-panel{padding:16px;margin-bottom:8px;}
.tune-panel h3{font-family:'Saira Condensed';font-weight:800;font-size:18px;letter-spacing:.06em;margin-bottom:2px;
  display:flex;align-items:center;gap:8px;}
.tune-panel h3 svg{width:16px;height:16px;color:var(--amber);}
.tune-row{display:flex;align-items:center;gap:12px;margin-top:13px;font-weight:700;}
.tune-row label{flex:0 0 118px;color:var(--dim);font-size:13px;}
input[type=range]{flex:1;-webkit-appearance:none;height:4px;border-radius:99px;background:rgba(255,255,255,.14);outline:none;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--amber);cursor:pointer;border:none;box-shadow:0 0 12px rgba(255,180,84,.65);}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--amber);border:none;cursor:pointer;}
.tune-val{flex:0 0 52px;text-align:right;font-family:'Saira Condensed';font-size:16px;}
.swatches{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;}
.swatch{width:30px;height:30px;border-radius:9px;border:2px solid transparent;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:transform .1s;}
.swatch:hover{transform:scale(1.12);}
.swatch.sel{border-color:#fff;transform:scale(1.08);}
select{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:9px 12px;
  color:var(--ink);font-family:inherit;font-weight:700;outline:none;}
.reset-row{margin-top:20px;}
.danger-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border:1px solid rgba(255,93,93,.4);
  border-radius:11px;color:var(--red);font-weight:800;font-size:13px;letter-spacing:.04em;
  transition:background .15s;}
.danger-btn svg{width:14px;height:14px;}
.danger-btn:hover{background:rgba(255,93,93,.08);}

/* garage 3D preview — cinematic stage */
#carPreview{position:relative;flex:1;min-height:clamp(230px,40vh,430px);width:100%;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:
    radial-gradient(90% 55% at 50% 108%, rgba(90,209,255,.13) 0%, transparent 60%),
    radial-gradient(70% 45% at 50% -8%, rgba(255,180,84,.07) 0%, transparent 55%),
    linear-gradient(180deg,#101728 0%, #0c111d 100%);
  touch-action:none;cursor:grab;}
#carPreview::before{content:'';position:absolute;left:10%;right:10%;bottom:12%;height:1px;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(90,209,255,.4),transparent);pointer-events:none;}
#carPreview::after{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;z-index:1;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.05) 45%,rgba(90,209,255,.14) 50%,rgba(255,255,255,.05) 55%,transparent);
  pointer-events:none;}
#carPreview:active{cursor:grabbing;}
#carPreview canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.preview-cap{position:absolute;left:16px;bottom:12px;display:flex;flex-direction:column;
  pointer-events:none;text-shadow:0 2px 10px rgba(0,0,0,.8);}
.preview-cap span{font-family:'Saira Condensed';font-weight:800;font-size:21px;letter-spacing:.05em;}
.preview-cap small{color:#aebad2;font-weight:700;font-size:11px;letter-spacing:.14em;}
.preview-hint{position:absolute;right:12px;bottom:10px;color:#525d73;font-size:10.5px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;pointer-events:none;display:inline-flex;align-items:center;gap:6px;}
.preview-hint svg{width:13px;height:13px;}
@media(max-width:520px){#carPreview{min-height:clamp(160px,24vh,220px);}
  .preview-cap span{font-size:15px;}.preview-cap small{display:none;}}

/* ---------- HUD (kept compatible with game.js) ---------- */
#hud{position:absolute;inset:0;z-index:20;pointer-events:none;}
.speedo{position:absolute;left:max(14px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));
  display:flex;align-items:flex-end;gap:10px;}
.speed-num{font-family:'Saira Condensed';font-weight:900;font-size:58px;line-height:.85;text-shadow:0 2px 16px rgba(0,0,0,.85);}
.speed-unit{color:var(--dim);font-weight:700;font-size:14px;letter-spacing:.15em;margin-bottom:6px;}
.gear-badge{font-family:'Saira Condensed';font-weight:800;font-size:20px;color:var(--cyan);margin-bottom:8px;}
.score-box{position:absolute;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));text-align:right;}
.score-label{color:var(--dim);font-size:12px;font-weight:700;letter-spacing:.2em;}
.score-val{font-family:'Saira Condensed';font-weight:900;font-size:40px;line-height:1;text-shadow:0 2px 16px rgba(0,0,0,.85);}
.banked-val{font-family:'Saira Condensed';font-weight:800;font-size:19px;color:var(--green);}
.mult-box{position:absolute;top:max(64px,calc(env(safe-area-inset-top) + 58px));right:max(14px,env(safe-area-inset-right));text-align:right;}
.mult-val{font-family:'Saira Condensed';font-weight:900;font-size:30px;color:var(--amber);text-shadow:0 0 18px rgba(255,180,84,.55);}
.drift-bar-wrap{position:absolute;top:0;right:0;width:7px;height:100%;background:rgba(255,255,255,.05);}
.drift-bar{position:absolute;top:0;right:0;width:100%;height:0%;background:linear-gradient(180deg,var(--amber),var(--red));}
.combo-pop{position:absolute;left:50%;top:32%;transform:translateX(-50%);text-align:center;opacity:0;}
.combo-big{font-family:'Saira Condensed';font-weight:900;font-size:46px;color:var(--amber);text-shadow:0 0 24px rgba(255,180,84,.7);}
.grade-big{font-family:'Saira Condensed';font-weight:900;font-size:26px;letter-spacing:.2em;color:var(--ink);}
.toast{position:absolute;left:50%;bottom:22%;transform:translateX(-50%);background:var(--glass);
  backdrop-filter:blur(10px);border:1px solid var(--line-strong);border-radius:13px;padding:11px 19px;
  font-weight:700;font-size:15px;opacity:0;white-space:nowrap;}
.top-left{position:absolute;top:max(14px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));
  display:flex;flex-direction:column;gap:6px;}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--glass);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:11px;padding:7px 12px;font-weight:700;font-size:13px;width:max-content;}
.chip b{font-family:'Saira Condensed';font-size:16px;letter-spacing:.03em;}
.chip .lbl{color:var(--dim);font-size:11px;letter-spacing:.12em;}
.slope-chip b.up{color:var(--amber);} .slope-chip b.down{color:var(--cyan);}
.hud-btns{position:absolute;top:max(14px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);
  display:flex;gap:8px;pointer-events:auto;}
.icon-btn{width:38px;height:38px;border-radius:12px;background:var(--glass);backdrop-filter:blur(10px);
  border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);transition:border-color .15s;}
.icon-btn svg{width:17px;height:17px;}
.icon-btn.off{opacity:.38;}
.mini-map{position:absolute;right:max(14px,env(safe-area-inset-right));top:50%;transform:translateY(-70%);
  width:110px;height:150px;background:rgba(11,14,20,.62);border:1px solid var(--line);border-radius:13px;overflow:hidden;}

/* ---------- RACE (rival bots) ---------- */
.race-chip b{color:var(--cyan);} .race-chip b.p1{color:var(--green);}
#standingsList{position:absolute;right:max(14px,env(safe-area-inset-right));top:calc(50% + 88px);
  display:flex;flex-direction:column;gap:3px;pointer-events:none;}
.st-row{display:flex;align-items:center;gap:7px;background:rgba(11,14,20,.62);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:8px;padding:3px 9px 3px 5px;font-weight:800;font-size:12px;
  font-family:'Saira Condensed';letter-spacing:.06em;color:var(--dim);}
.st-row .st-pos{width:17px;height:17px;border-radius:50%;background:#ffffff14;display:grid;place-items:center;
  font-size:10.5px;color:var(--ink);}
.st-row.me{border-color:var(--amber);color:var(--ink);}
.st-row.me .st-pos{background:var(--amber);color:#1a1206;}
@media(max-width:760px){#standingsList{display:none;}}
@media (orientation: portrait) and (max-width: 520px){#standingsList{display:none;}}

@media(max-width:760px){.mini-map{display:none;}.speed-num{font-size:44px;}}

/* ---------- TOUCH ---------- */
#touch{position:absolute;inset:0;z-index:30;pointer-events:none;}
.tbtn{position:absolute;pointer-events:auto;z-index:5;width:76px;height:76px;border-radius:50%;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;
  color:#fff;font-family:'Saira Condensed';font-weight:900;font-size:15px;letter-spacing:.06em;
  backdrop-filter:blur(5px);}
.tbtn svg{width:26px;height:26px;}
.tbtn:active,.tbtn.on{background:rgba(255,255,255,.2);}
#tLeft{left:max(18px,env(safe-area-inset-left));bottom:calc(max(18px,env(safe-area-inset-bottom)) + 96px);}
#tRight{left:calc(max(18px,env(safe-area-inset-left)) + 92px);bottom:max(18px,env(safe-area-inset-bottom));}
#tGas{right:max(18px,env(safe-inset-right,18px));bottom:calc(max(18px,env(safe-area-inset-bottom)) + 96px);
  background:rgba(93,255,157,.13);border-color:rgba(93,255,157,.4);color:var(--green);}
#tGas svg,#tBrake svg{width:30px;height:30px;}
#tBrake{right:calc(max(18px,env(safe-area-inset-right)) + 92px);bottom:max(18px,env(safe-area-inset-bottom));
  background:rgba(255,93,93,.13);border-color:rgba(255,93,93,.4);color:var(--red);}
#tHand{left:calc(max(18px,env(safe-area-inset-left)) + 92px);bottom:max(18px,env(safe-area-inset-bottom));
  background:rgba(255,180,84,.13);border-color:rgba(255,180,84,.4);color:var(--amber);}

/* --- steering wheel (bottom-left) --- */
#steerBase{position:absolute;left:max(-14px,calc(env(safe-area-inset-left) - 14px));bottom:max(-14px,calc(env(safe-area-inset-bottom) - 14px));
  width:190px;height:190px;pointer-events:auto;touch-action:none;}
#steerWheel{position:absolute;inset:12px;border-radius:50%;
  background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.16),rgba(255,255,255,.05) 62%);
  border:2px solid rgba(255,255,255,.28);box-shadow:0 4px 22px rgba(0,0,0,.35),inset 0 0 18px rgba(0,0,0,.25);
  backdrop-filter:blur(6px);display:grid;place-items:center;color:#fff;
  transform:rotate(0deg);will-change:transform;}
#steerWheel svg{width:78%;height:78%;opacity:.9;}
#steerBase.active #steerWheel{border-color:rgba(93,255,157,.65);box-shadow:0 4px 26px rgba(93,255,157,.25),inset 0 0 18px rgba(0,0,0,.3);}
#steerHint{position:absolute;left:0;right:0;top:-24px;text-align:center;color:rgba(255,255,255,.5);
  font-family:'Saira Condensed';font-weight:900;font-size:11px;letter-spacing:.18em;pointer-events:none;
  transition:opacity .4s;}
#steerBase.dragged #steerHint{opacity:0;}

/* full-screen brake flash (tap empty screen = brake) */
#touch.braking::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(circle at 50% 60%,transparent 50%,rgba(255,50,30,.35));
  box-shadow:inset 0 0 110px rgba(255,50,30,.6);}
#tCam{left:calc(max(18px,env(safe-area-inset-left)) + 184px);bottom:max(18px,env(safe-area-inset-bottom));
  width:54px;height:54px;font-size:11px;}

@media (orientation:portrait) and (max-width:520px){
  .tbtn{width:68px;height:68px;font-size:13px;}
  #steerBase{width:170px;height:170px;}
  #tHand{left:auto;right:calc(max(12px,env(safe-area-inset-right)) + 80px);
    bottom:calc(max(14px,env(safe-area-inset-bottom)) + 84px);width:58px;height:58px;font-size:11px;}
  #tCam{left:max(14px,env(safe-area-inset-left));bottom:max(10px,env(safe-area-inset-bottom));width:46px;height:46px;font-size:10px;}
  .speedo{left:50%;transform:translateX(-50%);bottom:calc(max(10px,env(safe-area-inset-bottom)) + 2px);}
  .speed-num{font-size:34px;}
  .speed-unit{font-size:11px;margin-bottom:4px;}
  .gear-badge{font-size:15px;margin-bottom:6px;}
  .score-box{right:max(10px,env(safe-area-inset-right));}
  .score-val{font-size:28px;}
  .banked-val{font-size:13px;}
  .mult-val{font-size:22px;}
  .top-left .chip{padding:4px 8px;font-size:10px;}
  .top-left .chip b{font-size:12px;}
  .hud-btns{transform:none;left:auto;right:max(8px,env(safe-area-inset-right));
    top:max(8px,env(safe-area-inset-top));flex-direction:column;}
  .icon-btn{width:32px;height:32px;}
  .icon-btn svg{width:15px;height:15px;}
  #menu .brand{font-size:clamp(44px,14vw,68px);}
  .modes{margin-top:22px;gap:9px;}
  .mode-btn{padding:12px 14px;}
  .mode-name{font-size:17px;}
  .mode-desc{display:none;}
  .menu-foot{flex-direction:row;gap:8px;}
}

/* ---------- RESULTS ---------- */
#results{position:absolute;inset:0;z-index:45;display:flex;align-items:center;justify-content:center;
  padding:20px;background:radial-gradient(90% 90% at 50% 30%, rgba(13,17,27,.88) 0%, rgba(7,10,16,.94) 100%);
  backdrop-filter:blur(6px);}
.res-card{width:min(440px,92vw);background:linear-gradient(170deg,#151c2e,#101624);
  border:1px solid var(--line-strong);border-radius:22px;padding:28px;text-align:center;box-shadow:var(--shadow);}
.res-grade{font-family:'Saira Condensed';font-weight:900;font-size:68px;line-height:1;color:var(--amber);
  text-shadow:0 0 40px rgba(255,180,84,.35);}
.res-title{color:var(--dim);font-weight:800;letter-spacing:.24em;font-size:12px;margin-top:4px;text-transform:uppercase;}
.res-score{font-family:'Saira Condensed';font-weight:900;font-size:46px;margin-top:14px;}
.res-new{margin-top:10px;display:inline-flex;align-items:center;gap:6px;color:var(--green);font-weight:800;
  letter-spacing:.14em;font-size:13px;}
.res-new svg{width:14px;height:14px;}
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px;}
.res-cell{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:11px 6px;}
.res-cell b{display:block;font-family:'Saira Condensed';font-size:19px;font-weight:800;}
.res-cell span{color:var(--faint);font-size:10.5px;font-weight:800;letter-spacing:.09em;}
.res-btns{display:flex;gap:10px;margin-top:20px;}
.res-btns button{flex:1;padding:14px;border-radius:13px;font-weight:800;font-size:15px;letter-spacing:.06em;
  transition:filter .15s,transform .1s;}
.res-btns button:active{transform:scale(.98);}
.primary-btn{background:linear-gradient(160deg,#ffc678,var(--amber));color:#1a1206;
  box-shadow:0 12px 30px -12px rgba(255,180,84,.5);display:inline-flex;align-items:center;justify-content:center;gap:8px;}
.primary-btn svg{width:15px;height:15px;}
.primary-btn:not([disabled]):hover{filter:brightness(1.08);}
.primary-btn[disabled]{opacity:.5;box-shadow:none;cursor:default;}
.ghost-btn{border:1px solid var(--line-strong);color:var(--dim);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;}
.ghost-btn svg{width:15px;height:15px;}
.ghost-btn:hover{color:var(--ink);}

/* ---------- PAUSE ---------- */
#pause{position:absolute;inset:0;z-index:44;display:flex;align-items:center;justify-content:center;
  background:rgba(7,10,16,.8);backdrop-filter:blur(6px);}
.pause-card{text-align:center;}
.pause-card h2{font-family:'Saira Condensed';font-weight:900;font-size:38px;letter-spacing:.1em;
  text-transform:uppercase;}
.pause-sub{color:var(--faint);font-weight:700;font-size:12px;letter-spacing:.28em;text-transform:uppercase;margin-top:4px;}
.pause-btns{display:flex;flex-direction:column;gap:10px;margin-top:24px;width:min(260px,80vw);margin-inline:auto;}
.pause-btns button{padding:14px;border-radius:13px;font-weight:800;letter-spacing:.05em;font-size:15px;
  transition:filter .15s,transform .1s;}
.pause-btns button:active{transform:scale(.98);}

/* ---------- animations ---------- */
@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){ .brand-wrap,.modes,.menu-foot{animation:none;} }

/* boot error banner */
#bootError{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:60;
  background:#3a1518;border:1px solid rgba(255,93,93,.55);color:#ffb4b4;padding:10px 18px;
  border-radius:12px;font-weight:700;font-size:14px;max-width:86vw;text-align:center;}

/* ============================================================
   TOUCH OVERRIDE — a phone in "desktop site" mode reports a wide
   viewport (e.g. 980px). The desktop showroom grid then squeezes
   the stage into a dark sliver and shrinks list text into blur.
   On any touch-primary device force the single-column layout.
   ============================================================ */
@media (pointer: coarse) {
  .garage-body{display:flex !important;flex-direction:column !important;overflow:auto !important;}
  .garage-stage{order:-1;display:block;}
  .garage-col{min-height:0;overflow:visible;}
  .garage-col-list .garage-scroll,
  .garage-col-side{overflow:visible;padding-right:0;}
  #carPreview{min-height:clamp(210px,32vh,320px);}
}