/* Eko Drift UI shell — "bright arcade" direction (owner, 2026-10-16). One display face (Exo 2 heavy
   italic), one text face (Barlow Semi Condensed), one accent (danfo yellow) + cyan/magenta energy.
   Parallelogram buttons, photo cards, no decorative glows on text. */
:root{
  /* premium international palette (owner 2026-10-16: no yellow / no "local" colours): near-black glass,
     white primary, ONE cool accent used sparingly */
  --ui-bg:#07090e; --ui-bg2:#11141c; --ui-ink:#ffffff; --ui-dim:#9aa3b8; --ui-y:#ffffff; --ui-c:#47e1ff; --ui-m:#47e1ff;
  --ui-card:#11141c; --ui-line:rgba(255,255,255,0.12); --ui-skew:-10deg; --ui-shadow:rgba(0,0,0,0.45);
  --ui-display:'Exo 2', 'Segoe UI', system-ui, sans-serif; --ui-text:'Barlow Semi Condensed', 'Segoe UI', system-ui, sans-serif;
}
/* while a menu is up, no race HUD/controls show through */
body.in-shell #hud,body.in-shell #touch-ui,body.in-shell #standings,body.in-shell #minimap,body.in-shell #pause-btn,body.in-shell #coach,
body.in-shell #coach-skip,body.in-shell #section-name,body.in-shell #ghost-delta,body.in-shell #perf-hud,body.in-shell #nitro-rays,body.in-shell #speed-lines{display:none!important}
#shell{position:fixed;inset:0;z-index:31;font-family:var(--ui-text);color:var(--ui-ink);pointer-events:none}
#shell.hidden{display:none}
#shell .scr{position:absolute;inset:0;display:none;pointer-events:auto;overflow:hidden}
#shell .scr.on{display:flex;flex-direction:column}
/* sky-to-road wash over the live 3D scene, strongest at the edges so the car stays clear */
#shell .wash{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,rgba(7,9,14,0.92) 0%,rgba(7,9,14,0.25) 26%,rgba(7,9,14,0) 46%,rgba(7,9,14,0.15) 70%,rgba(7,9,14,0.94) 100%)}
#shell .top{position:relative;display:flex;align-items:center;gap:10px;padding:max(10px,env(safe-area-inset-top)) 14px 6px}
#shell .logo{font-family:var(--ui-display);font-style:italic;font-weight:900;font-size:24px;letter-spacing:0.5px;line-height:1}
#shell .logo b{color:var(--ui-c)}
#shell .chips{margin-left:auto;display:flex;gap:6px;align-items:center}
#shell .chip{font-weight:700;font-size:13px;letter-spacing:0.6px;padding:5px 10px;background:rgba(255,255,255,0.1);border-radius:999px;white-space:nowrap}
#shell .chip.y{background:#fff;color:#0a0c12}
#shell .icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,0.12);font-size:18px;cursor:pointer;border:0;color:#fff}
#shell .back{font-family:var(--ui-display);font-style:italic;font-weight:900;font-size:15px;letter-spacing:1px;cursor:pointer;background:0;border:0;color:#fff;padding:6px 4px}
#shell h2{font-family:var(--ui-display);font-style:italic;font-weight:900;font-size:clamp(22px,5.4vw,34px);margin:0;letter-spacing:0.4px;line-height:1}
#shell .sub{font-size:13px;font-weight:600;color:var(--ui-dim);letter-spacing:0.8px;text-transform:uppercase}

/* parallelogram buttons */
#shell .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border:0;
  font-family:var(--ui-display);font-style:italic;font-weight:900;font-size:18px;letter-spacing:1px;text-transform:uppercase;color:#111;
  background:var(--ui-y);padding:12px 26px;transform:skewX(var(--ui-skew));box-shadow:0 4px 0 rgba(0,0,0,0.35),0 10px 24px rgba(0,0,0,0.35)}
#shell .btn > *{transform:skewX(calc(-1 * var(--ui-skew)))}
#shell .btn:active{transform:skewX(var(--ui-skew)) translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,0.35)}
#shell .btn.c{background:var(--ui-c);box-shadow:0 4px 0 rgba(0,0,0,0.35),0 10px 24px rgba(0,0,0,0.35)}
#shell .btn.ghost{background:rgba(255,255,255,0.12);color:#fff;box-shadow:none}
#shell .btn.off{background:#3a4268;color:#9aa3c9;box-shadow:none;pointer-events:none}

/* HOME: hero card + mode grid */
#scr-home .body{position:relative;flex:1;display:grid;gap:10px;padding:8px 14px max(14px,env(safe-area-inset-bottom));
  grid-template-columns:1fr;grid-template-rows:auto auto;align-content:end}
#shell .card{position:relative;overflow:hidden;border-radius:14px;background:var(--ui-card) center/cover no-repeat;cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,0.45);min-height:92px;isolation:isolate}
#shell .card::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(5,6,10,0.85) 100%)}
#shell .card .ct{position:absolute;left:14px;right:14px;bottom:12px}
#shell .card .ct h3{font-family:var(--ui-display);font-style:italic;font-weight:900;font-size:clamp(20px,4.6vw,30px);margin:0;line-height:1;letter-spacing:0.3px}
#shell .card .ct p{margin:4px 0 0;font-weight:600;font-size:13px;color:#dfe6ff;letter-spacing:0.6px;text-transform:uppercase}
#shell .card .tag{position:absolute;top:10px;left:10px;font-family:var(--ui-display);font-style:italic;font-weight:900;font-size:12px;letter-spacing:1px;
  padding:4px 10px;background:rgba(255,255,255,0.94);color:#0a0c12;transform:skewX(var(--ui-skew))}
#shell .card .tag.c{background:var(--ui-c)}#shell .card .tag.m{background:var(--ui-m);color:#fff}
#shell .card.soon{filter:saturate(0.4);cursor:default}
#shell .card .stripe{position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ui-c)}
#shell .card.hero{min-height:168px}
/* bright arcade fallbacks until the art lands (the image layer sits on top when it loads) */
#h-career{background-color:#11141c;background-image:linear-gradient(135deg,#1b2333,#0b0e15)}
#h-quick{background-color:#11141c;background-image:linear-gradient(135deg,#1a2a3a,#0b0e15)}
#h-trial{background-color:#11141c;background-image:linear-gradient(135deg,#232338,#0b0e15)}
#h-garage{background-color:#11141c;background-image:linear-gradient(135deg,#2a2a30,#0b0e15)}
#scr-events .card{background-color:#11141c;background-image:linear-gradient(160deg,#1c2433,#0b0e15)}
#shell .card.hero .ct h3{font-size:clamp(26px,7vw,44px)}
#shell .card .cta{position:absolute;right:12px;bottom:12px}
#shell .grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#shell .grid .card{min-height:104px}
@media (orientation:landscape){
  /* the car owns the left/centre; career card bottom-left, modes stacked on the right */
  #scr-home .body{grid-template-columns:minmax(0,1fr) min(42vw,420px);grid-template-rows:1fr;align-items:end;padding-top:4px}
  #shell .card.hero{min-height:0;height:min(150px,36vh);max-width:min(52vw,520px)}
  #shell .card.hero .ct h3{font-size:clamp(22px,3.6vw,34px)}
  #scr-home .grid{grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));align-self:stretch}
  #scr-home .grid .card{min-height:0}
}

/* EVENTS: swipe carousel */
#scr-events .rail{position:relative;flex:1;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 14px 16px;align-items:stretch;-webkit-overflow-scrolling:touch}
#scr-events .rail::-webkit-scrollbar{display:none}
#scr-events .card{flex:0 0 min(78vw,420px);scroll-snap-align:center;min-height:0}
#scr-events .card .meta{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
#scr-events .card .meta span{font-weight:700;font-size:12px;letter-spacing:0.6px;padding:3px 8px;border-radius:4px;background:rgba(255,255,255,0.16)}
#scr-events .card .meta span.best{background:var(--ui-c);color:#05202a}
#scr-events .foot{position:relative;display:flex;gap:10px;align-items:center;justify-content:space-between;padding:0 14px max(14px,env(safe-area-inset-bottom))}
#shell .seg{display:inline-flex;transform:skewX(var(--ui-skew));background:rgba(255,255,255,0.1)}
#shell .seg button{transform:skewX(calc(-1*var(--ui-skew)));background:0;border:0;color:#cfd6ff;font-family:var(--ui-display);font-style:italic;font-weight:900;font-size:13px;letter-spacing:1px;padding:9px 14px;cursor:pointer}
#shell .seg button.on{color:#111;background:var(--ui-y);transform:none}

/* SHOWROOM: the 3D stage renders behind; panels over it */
#scr-show{background:transparent}
#scr-show .stage-ui{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:safe flex-end;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 14px max(14px,env(safe-area-inset-bottom))}
#scr-show .carname{text-align:center;margin-bottom:6px}
#scr-show .carname h2{font-size:clamp(30px,8vw,48px)}
#scr-show .arrows{position:absolute;left:0;right:0;top:42%;display:flex;justify-content:space-between;padding:0 8px;pointer-events:none}
#scr-show .arrows button{pointer-events:auto;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,0.14);color:#fff;font-size:20px;cursor:pointer}
#scr-show .stats{display:grid;grid-template-columns:auto 1fr auto;gap:5px 10px;align-items:center;font-weight:700;font-size:12px;letter-spacing:0.8px;
  background:rgba(7,9,14,0.72);border-radius:12px;padding:10px 12px;margin-bottom:10px}
#scr-show .bar{height:8px;border-radius:4px;background:rgba(255,255,255,0.14);overflow:hidden;position:relative}
#scr-show .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--ui-c);border-radius:4px}
#scr-show .bar i.up{background:#ffffff}
#scr-show .tabs{display:flex;gap:6px;margin-bottom:8px;overflow-x:auto}
#scr-show .tabs .seg{flex:0 0 auto}
#scr-show .panel{background:rgba(7,9,14,0.82);border-radius:12px;padding:10px 12px;margin-bottom:10px;min-height:64px}
#scr-show .part{display:flex;align-items:center;gap:10px}
@media (max-width:520px){#scr-show .part .sub{display:none}#scr-show .part .btn{margin-left:auto}#scr-show .stats{padding:8px 10px;gap:4px 8px}}
#scr-show .pips{display:flex;gap:4px}#scr-show .pips i{width:18px;height:8px;background:rgba(255,255,255,0.18);transform:skewX(var(--ui-skew))}
#scr-show .pips i.on{background:var(--ui-c)}
#scr-show .swatches{display:flex;gap:9px;flex-wrap:wrap}
#scr-show .sw{width:36px;height:36px;border-radius:50%;border:3px solid rgba(255,255,255,0.25);cursor:pointer}
#scr-show .sw.on{border-color:#fff;box-shadow:0 0 0 3px var(--ui-c)}
#scr-show .actions{display:flex;gap:10px;justify-content:space-between;align-items:center}
#scr-show .lock{font-weight:700;color:var(--ui-c);letter-spacing:0.6px}

/* CAREER ladder */
#scr-career .list{position:relative;flex:1;overflow-y:auto;padding:4px 14px 12px;display:flex;flex-direction:column;gap:6px}
#scr-career .rung{display:grid;grid-template-columns:46px 1fr auto;gap:10px;align-items:center;background:rgba(17,20,28,0.86);border-radius:10px;padding:8px 10px}
#scr-career .rung .rk{font-family:var(--ui-display);font-style:italic;font-weight:900;font-size:22px;color:var(--ui-dim)}
#scr-career .rung b{font-family:var(--ui-display);font-style:italic;font-weight:900;font-size:17px;letter-spacing:0.4px}
#scr-career .rung small{display:block;font-weight:600;font-size:11.5px;color:var(--ui-dim);letter-spacing:0.6px;text-transform:uppercase}
#scr-career .rung.next{background:linear-gradient(90deg,rgba(71,225,255,0.22),rgba(17,20,28,0.92));outline:1.5px solid var(--ui-c)}
#scr-career .rung.done{opacity:0.62}#scr-career .rung.done .rk{color:var(--ui-c)}
#scr-career .rung.me{background:rgba(0,225,255,0.18)}
#scr-career .hero{position:relative;padding:0 14px 10px}
#scr-career .taunt{font-style:italic;font-weight:600;color:var(--ui-c);margin:4px 0 8px;font-size:14px}

/* toast */
#shell-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:40;background:#111;color:#fff;font-weight:700;padding:8px 14px;border-radius:8px;opacity:0;transition:opacity .2s;pointer-events:none}
#shell-toast.on{opacity:1}

/* landscape showroom: car left, panel right (kept last so it wins over the base rules) */
@media (orientation:landscape){
  #scr-show .stage-ui{position:absolute;right:14px;top:56px;bottom:max(12px,env(safe-area-inset-bottom));width:min(400px,46vw);padding:0;justify-content:safe flex-end;overflow-y:auto}
  #scr-show .carname{position:fixed;left:24px;top:58px;text-align:left;margin:0}
  #scr-show .arrows{right:auto;width:52vw;top:50%}
  #scr-show .part .sub{display:none}#scr-show .part .btn{margin-left:auto}
  #scr-show .stats{font-size:11px;gap:2px 8px;padding:6px 10px;margin-bottom:6px}
  #scr-show .panel{padding:6px 10px;margin-bottom:6px}#scr-show .panel[style*=grid]{gap:3px!important}
  #scr-show .part .btn{padding:5px 10px!important;font-size:12px!important}
  #scr-show .tabs{margin-bottom:5px}#scr-show .actions .btn{padding:9px 20px}
}

/* RESULTS restyled over the podium stage (old markup, new look) */
#results-screen{background:linear-gradient(90deg,rgba(7,9,14,0.92) 0%,rgba(7,9,14,0.7) 46%,rgba(7,9,14,0) 70%)!important;backdrop-filter:none!important;align-items:flex-start!important;padding:max(14px,env(safe-area-inset-top)) 18px 14px!important;justify-content:center!important}
#results-screen .danfo-badge{font-family:var(--ui-display);font-style:italic;font-weight:900;background:#fff;color:#0a0c12;transform:skewX(var(--ui-skew));border:0;box-shadow:none;margin:0 0 6px}
#results-screen .game-title{font-family:var(--ui-display)!important;font-style:italic;font-weight:900;color:#fff!important;text-shadow:0 5px 0 rgba(0,0,0,0.35)!important;font-size:clamp(40px,10vw,76px)!important;margin:0!important;-webkit-text-stroke:0!important;background:none!important;-webkit-text-fill-color:#fff!important}
#results-screen .game-sub{font-family:var(--ui-text);font-weight:700;color:var(--ui-c)!important;text-shadow:none!important;text-align:left}
#results-screen .panel-box,#career-res{background:rgba(7,9,14,0.78)!important;border:0!important;border-left:3px solid var(--ui-c)!important;border-radius:10px!important;box-shadow:none!important;max-width:min(460px,92vw)!important;text-align:left;font-family:var(--ui-text)}
#results-screen .stat-row{font-weight:600;letter-spacing:0.4px}
#results-screen .stat-val{font-family:var(--ui-display);font-style:italic;font-weight:900;color:#fff}
#results-screen .cta-btn,#res-links a{font-family:var(--ui-display)!important;font-style:italic!important;font-weight:900!important;transform:skewX(var(--ui-skew));border:0!important;border-radius:0!important;box-shadow:0 4px 0 rgba(0,0,0,0.35)!important;background:#fff!important;color:#0a0c12!important;text-shadow:none!important}
#res-links a{background:rgba(255,255,255,0.14)!important;color:#fff!important;box-shadow:none!important}
#res-links a.next{background:var(--ui-c)!important;color:#03151b!important}
@media (orientation:portrait){#results-screen{background:linear-gradient(180deg,rgba(7,9,14,0) 0%,rgba(7,9,14,0.55) 34%,rgba(7,9,14,0.94) 58%)!important;justify-content:flex-end!important}}

/* pause / settings / coach / misc old screens in the new palette */
#pause-screen{background:rgba(5,6,10,0.84)!important;backdrop-filter:blur(6px);z-index:50!important}   /* above the home shell (31): settings opened from home were under the cards (P0) */
#pause-screen .game-title,#pause-screen h1{font-family:var(--ui-display)!important;font-style:italic;font-weight:900;color:#fff!important;-webkit-text-fill-color:#fff!important;text-shadow:none!important;background:none!important}
#pause-screen .cta-btn{font-family:var(--ui-display)!important;font-style:italic!important;font-weight:900!important;background:rgba(255,255,255,0.1)!important;color:#fff!important;border:0!important;border-radius:0!important;transform:skewX(var(--ui-skew));box-shadow:none!important;text-shadow:none!important}
#pause-screen #pm-resume{background:#fff!important;color:#0a0c12!important}
.set-box{background:rgba(17,20,28,0.94)!important;border:1px solid rgba(255,255,255,0.12)!important;font-family:var(--ui-text)}
.seg button{border-color:rgba(255,255,255,0.25)!important;font-family:var(--ui-display)!important;font-style:italic}
.seg button.on{background:#fff!important;color:#0a0c12!important}
.set-row input[type=range]{accent-color:var(--ui-c)}
#coach{background:rgba(255,255,255,0.95)!important;color:#0a0c12!important;border:0!important;font-family:var(--ui-display)!important;font-style:italic}
.t-btn.coach-hl,#steer-pad .arrow.coach-hl{animation:none!important;box-shadow:0 0 0 3px var(--ui-c)!important}
#drift-score-pill{background:rgba(7,9,14,0.8)!important;border:1px solid var(--ui-c)!important;color:#fff!important;font-family:var(--ui-display)!important;font-style:italic}
#ghost-delta{border-left-color:var(--ui-c)!important;background:rgba(7,9,14,0.7)!important}
#garage-screen,#title-screen{display:none!important}

/* ===== critic round 1 fixes (Lenny method: one radius, one CTA shape, cyan only for primary/active) ===== */
#shell .card{border-radius:12px;box-shadow:0 8px 22px rgba(0,0,0,0.5)}
#shell .card::after{background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(4,5,8,0.88) 100%)}
#shell h2{text-transform:uppercase}
#shell .kicker{display:block;font-weight:700;font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,0.7);margin-bottom:4px}
#shell .card .ct p{text-transform:none;font-size:13.5px;letter-spacing:0.2px;color:rgba(255,255,255,0.78);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#shell .card .ct p b{color:#fff;font-weight:700}
#shell .card .ct h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(20px,5vw,28px)}
#shell .card .tag{background:rgba(255,255,255,0.14)!important;color:#fff!important;font-family:var(--ui-text);font-style:normal;font-weight:700;font-size:11px;letter-spacing:1.2px;transform:none;border-radius:4px;padding:3px 8px}
#shell .btn{font-size:16px;padding:11px 22px}
#shell .btn.wide{display:flex;width:100%}
#shell .btn.c{background:#fff;color:#0a0c12}
#h-career .ct{bottom:64px}
#h-career .btn.wide{position:absolute;left:12px;right:12px;bottom:12px;width:auto;background:var(--ui-c);color:#03151b;box-shadow:0 4px 0 rgba(0,0,0,0.35)}
#h-online{min-height:0!important;grid-column:1 / span 2;background:#11141c;cursor:pointer}
#h-online .ct{position:static;padding:10px 14px;display:flex;justify-content:space-between;align-items:baseline}
#h-online .ct h3{font-size:16px!important}
#h-online::after{display:none}
#shell .icon.back-c{font-size:26px;line-height:1;width:44px;height:44px;background:rgba(255,255,255,0.08)}
#shell .top h2{font-size:clamp(20px,5vw,26px);white-space:nowrap}
#shell .seg button{color:rgba(255,255,255,0.55)}
#shell .seg button.on{background:#fff;color:#0a0c12}
#shell .wash.solid{background:#07090e!important}
/* events */
#scr-events .card .btn.cta{position:absolute;right:12px;bottom:12px;padding:9px 18px;font-size:14px;pointer-events:none}
#scr-events .card .ct{right:110px}
#scr-events .dots{position:relative;display:flex;gap:6px;justify-content:center;padding:0 0 max(14px,env(safe-area-inset-bottom))}
#scr-events .dots i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,0.3);transition:width .2s}
#scr-events .dots i.on{width:18px;background:#fff}
@media (orientation:landscape){#scr-events .card{flex-basis:min(46vw,460px)}}
/* showroom */
#scr-show .carname h2{font-size:clamp(28px,7vw,44px)}
#scr-show .carname .sub{text-transform:none;letter-spacing:0.2px;font-size:14px;color:rgba(255,255,255,0.72)}
#scr-show .carname .sub b{color:var(--ui-c)}
#scr-show .stats{background:rgba(10,12,18,0.82);grid-template-columns:96px 1fr 70px;font-family:var(--ui-text);font-weight:600;font-size:12.5px;letter-spacing:0.2px}
#scr-show .stats span:nth-child(3n){text-align:right;color:rgba(255,255,255,0.8)}
#scr-show .bar{height:6px;background:rgba(255,255,255,0.12)}
#scr-show .bar i{background:#fff}
#scr-show .bar i.up{background:var(--ui-c)}
#scr-show .arrows{top:27%;bottom:auto}
@media (orientation:landscape){#scr-show .arrows{top:50%!important}}
#scr-show .panel{background:rgba(10,12,18,0.82)}
#scr-show .panel.parts{display:grid;gap:6px}
#scr-show .part{display:grid;grid-template-columns:1fr auto auto 104px;gap:12px;align-items:center}
#scr-show .part .pn{font-weight:600;font-size:14px}
#scr-show .pips{gap:4px}#scr-show .pips i{width:28px;height:6px;transform:none;border-radius:3px;background:rgba(255,255,255,0.16)}
#scr-show .pips i.on{background:#fff}
#scr-show .part .lv{font-size:11px;font-weight:700;letter-spacing:1px;color:rgba(255,255,255,0.55);width:44px}
#scr-show .pbtn{height:36px;border-radius:8px;border:1px solid rgba(255,255,255,0.22);background:rgba(255,255,255,0.08);color:#fff;font-weight:700;font-size:13.5px;cursor:pointer}
#scr-show .pbtn.hot{background:var(--ui-c);border-color:var(--ui-c);color:#03151b}
#scr-show .pbtn.dim{opacity:0.4}
#scr-show .maxed{font-size:12px;font-weight:700;letter-spacing:1px;color:rgba(255,255,255,0.55);text-align:center}
#scr-show .lock{color:#fff}
/* career */
#scr-career .next{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;background:rgba(17,20,28,0.9);border-radius:12px;padding:10px 12px;border:1px solid rgba(71,225,255,0.35)}
#scr-career .next b{display:block;font-family:var(--ui-display);font-style:italic;font-weight:900;font-size:22px}
#scr-career .next small{display:block;color:rgba(255,255,255,0.72);font-size:13px}
#scr-career .next em{display:block;margin-top:4px;color:rgba(255,255,255,0.86);font-size:13px}
#scr-career .thumb{display:block;background:center/contain no-repeat;aspect-ratio:12/7}
#scr-career .rung{grid-template-columns:28px 64px 1fr 44px;gap:10px;background:rgba(17,20,28,0.9);padding:6px 10px;outline:0!important}
#scr-career .rung .rk{font-size:18px;color:rgba(255,255,255,0.6)}
#scr-career .rung .who b{font-family:var(--ui-text);font-style:normal;font-weight:700;font-size:15px}
#scr-career .rung .who small{text-transform:none;letter-spacing:0.2px;font-size:12.5px;color:rgba(255,255,255,0.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#scr-career .rung .st{text-align:center;font-size:13px;font-weight:700;letter-spacing:1px}
#scr-career .rung.locked{opacity:0.45;background:rgba(17,20,28,0.9)!important}
#scr-career .rung.done{opacity:1}#scr-career .rung.done .rk{color:rgba(255,255,255,0.6)}#scr-career .rung.done .st{color:#fff}
#scr-career .rung.next{background:rgba(71,225,255,0.12)!important;box-shadow:inset 0 0 0 1px var(--ui-c)}
#scr-career .rung.next .st{color:var(--ui-c)}
#scr-career .pin{position:relative;padding:8px 14px max(14px,env(safe-area-inset-bottom))}
#scr-career .pin .btn{background:var(--ui-c);color:#03151b}
#scr-career .list{padding-bottom:4px}

/* critic round 1b */
#shell .card.hero{min-height:204px}
#h-career .ct{bottom:66px}
#h-garage{grid-column:1 / span 2}
@media (orientation:landscape){#shell .card.hero{height:min(200px,48vh)}#h-garage{grid-column:auto}}
#scr-events .card .ct{right:12px;bottom:60px}
#scr-events .card .ct h3{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:clamp(20px,5.4vw,26px);line-height:1.05}
#scr-events .card .btn.cta{left:12px;right:auto}

#shell #h-career .ct{bottom:68px}
@media (orientation:landscape){#scr-home .grid .card .ct h3{font-size:clamp(18px,2.6vw,24px)}}
/* results round 1 */
#results-screen .game-title{font-size:clamp(36px,8vw,56px)!important}
#res-subtitle{font-size:13px!important;letter-spacing:0.3px!important;color:rgba(255,255,255,0.72)!important;text-transform:none!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:92vw}
#results-screen .panel-box{border-left:0!important;background:rgba(10,12,18,0.82)!important}
#results-screen .stat-row:has(#res-rivals){display:none}
#results-screen .stat-row:has(#res-pos){display:none}
#rematch-btn{order:2}
#results-screen{flex-wrap:nowrap}
#results-screen .res-actions{display:flex;gap:10px;align-items:center}
#results-screen #res-subtitle{font-family:var(--ui-text)!important;font-size:13px!important;letter-spacing:0.3px!important;color:rgba(255,255,255,0.72)!important;text-transform:none!important;margin:2px 0 10px}
#results-screen .res-actions .cta-btn,#results-screen .res-actions #res-links a{height:46px;min-width:150px;display:inline-flex;align-items:center;justify-content:center;font-size:16px!important;padding:0 22px!important;margin:0!important}
#results-screen .res-actions #res-links{margin:0}
#results-screen .res-actions #res-links a.next{background:var(--ui-c)!important;color:#03151b!important;box-shadow:0 4px 0 rgba(0,0,0,0.35)!important}
#results-screen .res-actions .cta-btn{background:rgba(255,255,255,0.12)!important;color:#fff!important;box-shadow:none!important}
/* ===== critic round 2: results v2 — rewards first, standings list ===== */
#results-screen .panel-box,#results-screen #career-res{display:none!important}
#res2{width:min(440px,92vw);font-family:var(--ui-text);color:#fff;margin:0 0 12px}
.r2-rew{display:flex;gap:8px;margin-bottom:6px}
.r2-rew>div{background:rgba(255,255,255,0.07);border-radius:10px;padding:6px 12px 7px;display:flex;flex-direction:column;min-width:0}
.r2-rew small{font-size:10px;font-weight:700;letter-spacing:1.4px;color:rgba(255,255,255,0.55)}
.r2-rew b{font-family:var(--ui-display);font-style:italic;font-weight:900;font-size:24px;line-height:1.05;white-space:nowrap}
.r2-cash{flex:1}.r2-cash b{color:#fff}
.r2-rank b em{font-style:normal;opacity:0.5;margin:0 4px}
.r2-rank.up b{color:var(--ui-c)}
.r2-pay{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:11.5px;color:rgba(255,255,255,0.6);margin:0 2px 8px}
.r2-pay b{color:rgba(255,255,255,0.9);font-weight:700}
.r2-list{background:rgba(255,255,255,0.05);border-radius:10px;overflow:hidden}
.r2-row{display:flex;align-items:center;gap:10px;height:34px;padding:0 12px 0 10px;font-weight:600;font-size:14px}
.r2-row+.r2-row{border-top:1px solid rgba(255,255,255,0.07)}
.r2-row .n{font-family:var(--ui-display);font-style:italic;font-weight:900;width:16px;text-align:center;color:rgba(255,255,255,0.6)}
.r2-row i{width:48px;height:26px;background:center/contain no-repeat;flex:none}
.r2-row .nm{flex:1;letter-spacing:0.6px;text-align:left}
.r2-row .g{font-variant-numeric:tabular-nums;color:rgba(255,255,255,0.7);font-size:13px}
.r2-row.me{background:#fff;color:#0a0c12}.r2-row.me .n,.r2-row.me .g{color:#0a0c12}
.r2-stats{display:flex;gap:14px;font-size:11px;font-weight:700;letter-spacing:1px;color:rgba(255,255,255,0.5);margin:8px 2px 0}
.r2-stats b{color:#fff;margin-left:3px}
#results-screen #res-subtitle{margin:2px 0 10px!important}
@media (orientation:landscape) and (max-height:500px){
  #results-screen{padding-left:calc(env(safe-area-inset-left) + 22px)!important}
  #results-screen .game-title{font-size:40px!important;line-height:1!important}
  #results-screen .danfo-badge{margin-bottom:2px}
  #results-screen #res-subtitle{margin:0 0 6px!important}
  #res2{width:min(400px,50vw);margin-bottom:8px}
  .r2-row{height:27px;font-size:13px}.r2-row i{height:20px;width:40px}
  .r2-rew b{font-size:20px}.r2-rew>div{padding:4px 10px 5px}.r2-pay{margin-bottom:5px;font-size:11px}
  .r2-stats{display:none}
  #results-screen .res-actions .cta-btn,#results-screen .res-actions #res-links a{height:42px!important}
}
@media (orientation:portrait){#results-screen{padding-bottom:calc(env(safe-area-inset-bottom) + 34px)!important}}
/* ===== critic round 2: duplicates out, accent discipline, safe areas ===== */
/* home: the hero car IS the garage entry (no separate garage card) */
#shell #h-garage.hero-tap{position:fixed;z-index:2;left:0;right:0;top:calc(env(safe-area-inset-top) + 64px);height:34vh;background:none;border:0;padding:0;cursor:pointer;color:#fff;text-align:left}
#h-garage .gl{position:absolute;left:calc(env(safe-area-inset-left) + 18px);bottom:0;display:flex;flex-direction:column;font-family:var(--ui-text)}
#h-garage .gl b{font-family:var(--ui-display);font-style:italic;font-weight:900;font-size:22px;letter-spacing:0.3px;text-shadow:0 2px 10px rgba(0,0,0,0.6)}
#h-garage .gl small{font-size:13px;font-weight:600;color:rgba(255,255,255,0.75);text-shadow:0 1px 6px rgba(0,0,0,0.7)}
#h-garage .go{position:absolute;right:calc(env(safe-area-inset-right) + 18px);bottom:2px;width:40px;height:40px;border-radius:50%;background:rgba(10,12,18,0.55);border:1.5px solid rgba(255,255,255,0.3);display:grid;place-items:center;font-size:24px;line-height:1}
#scr-home .body{padding-bottom:calc(env(safe-area-inset-bottom) + 34px)!important}
@media (orientation:landscape){
  #shell #h-garage.hero-tap{right:auto;width:56vw;height:auto;bottom:calc(min(150px,36vh) + 40px)}
  #scr-home .grid{grid-template-columns:1fr!important;grid-template-rows:repeat(2,minmax(0,1fr))!important}
  #scr-home .body{padding-bottom:calc(env(safe-area-inset-bottom) + 16px)!important;padding-left:calc(env(safe-area-inset-left) + 14px)!important;padding-right:calc(env(safe-area-inset-right) + 14px)!important}
}
/* money pill: dark glass, white figure; cyan stays for primary actions only */
#shell .chip.y{background:rgba(255,255,255,0.1);color:#fff}
/* tabs: underline, not slanted pills (slant is reserved for CTAs) */
#scr-show .tabs .seg{transform:none;background:none;gap:18px}
#scr-show .tabs .seg button{transform:none!important;background:none!important;color:rgba(255,255,255,0.5)!important;padding:6px 0!important;border:0!important;border-bottom:2px solid transparent!important;font-style:normal!important;font-family:var(--ui-text)!important;font-weight:700!important;letter-spacing:1.2px}
#scr-show .tabs .seg button.on{color:#fff!important;border-bottom-color:#fff!important}
#scr-events .top .seg,#scr-events .top .seg button{transform:none!important}
#scr-events .top .seg{border-radius:999px;overflow:hidden}
/* events in portrait: vertical list of 16:9 cards */
@media (orientation:portrait){
  #scr-events .rail{flex-direction:column;overflow-x:hidden;overflow-y:auto;scroll-snap-type:none;padding-bottom:calc(env(safe-area-inset-bottom) + 24px)}
  #scr-events .card{flex:0 0 auto;aspect-ratio:16/9;width:100%}
}
@media (orientation:landscape){#scr-events .rail{padding-left:calc(env(safe-area-inset-left) + 14px);padding-right:calc(env(safe-area-inset-right) + 14px)}}
/* stronger bottom wash for text on renders */
#shell .card::after{background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(4,5,8,0.55) 62%,rgba(4,5,8,0.92) 100%)}
#shell .card .ct .kicker{text-shadow:0 1px 6px rgba(0,0,0,0.8)}
/* career: no NEXT card; the next rung expands; YOU row */
#scr-career .hero:empty{display:none}
#scr-career .rung.locked{opacity:0.55}
#scr-career .rung.next{padding:10px;background:rgba(71,225,255,0.1)!important;outline:1.5px solid var(--ui-c)!important}
#scr-career .rung.next .thumb{height:44px}
#scr-career .rung.next em{display:block;margin-top:3px;font-size:12.5px;color:rgba(255,255,255,0.8);white-space:normal}
#scr-career .rung.next .st{color:var(--ui-c)}
#scr-career .rung.me{background:#fff!important;color:#0a0c12}
#scr-career .rung.me .rk,#scr-career .rung.me small{color:rgba(10,12,18,0.65)!important}
#scr-career .pin{padding-bottom:calc(env(safe-area-inset-bottom) + 20px)!important}
#scr-show .stage-ui{padding-bottom:calc(env(safe-area-inset-bottom) + 20px)}
@media (orientation:landscape){
  #shell .card.hero{height:min(170px,44vh)!important;min-height:0!important}
  #shell #h-garage.hero-tap{bottom:calc(min(170px,44vh) + 30px + env(safe-area-inset-bottom))}
}
#scr-career .rung{grid-template-columns:28px 64px minmax(0,1fr) auto!important}
#scr-career .rung .st{min-width:22px;font-size:12px}
/* ===== critic round 3 ===== */
/* event cards: whole card is the tap target; no slanted button */
#scr-events .card .go{position:absolute;right:14px;bottom:14px;width:36px;height:36px;border-radius:50%;background:rgba(10,12,18,0.6);border:1.5px solid rgba(255,255,255,0.3);display:grid;place-items:center;font-size:22px;line-height:1;color:#fff}
#scr-events .card .ct{right:64px}
#scr-events .card{background-position:center 70%}
#shell .card .tag{background:rgba(10,12,18,0.85)!important;color:rgba(255,255,255,0.9)!important}
#shell .card::after{background:linear-gradient(0deg,rgba(8,10,14,0.94) 0%,rgba(8,10,14,0.6) 30%,rgba(8,10,14,0) 62%)!important}
/* garage: price buttons fit their text; affordable = cyan outline, unaffordable = grey */
#scr-show .pbtn{width:auto!important;min-width:0!important;padding:6px 14px!important;margin-left:auto;white-space:nowrap;background:transparent!important;border:1.5px solid rgba(71,225,255,0.85)!important;color:#fff!important}
#scr-show .pbtn.hot{background:transparent!important}
#scr-show .pbtn.dim{border-color:rgba(255,255,255,0.18)!important;color:rgba(255,255,255,0.4)!important}
#scr-show .part{display:grid!important;grid-template-columns:90px 1fr auto;align-items:center;gap:12px}
#scr-show .part .pips{justify-self:start}
/* results: REMATCH is a straight ghost button; subtitle = track name only */
#results-screen .res-actions .cta-btn#rematch-btn{transform:none!important;border:1.5px solid rgba(255,255,255,0.35)!important;background:transparent!important}
#res-subtitle:empty{display:none}
@media (orientation:landscape) and (max-height:500px){.r2-stats{display:flex!important;margin-top:5px}}
/* career landscape: CTA not full width */
@media (orientation:landscape){#scr-career .pin .btn{max-width:520px;margin:0 auto}}
@media (orientation:portrait){
  #shell #h-garage.hero-tap{height:27vh}
  #scr-home #h-career{min-height:min(300px,36vh)}
  #scr-home .grid .card{min-height:min(150px,18vh)}
}
#scr-career .top{position:relative;z-index:3;background:#07090e}
#scr-career .list{position:relative;z-index:1}
/* ===== critic round 4 ===== */
#scr-show #race-go{background:var(--ui-c)!important;color:#03151b!important}
#scr-events .card .go,#h-garage .go{display:none}
#scr-events .top,#scr-show .top{position:relative;z-index:3}
#scr-events{background:#07090e}
#scr-career .rung.me{background:#1b2230!important;color:#fff;box-shadow:inset 3px 0 0 #fff}
#scr-career .rung.me .rk,#scr-career .rung.me small{color:rgba(255,255,255,0.7)!important}
#scr-career .rung.locked{opacity:0.7}
#results-screen .res-actions .cta-btn#rematch-btn{border:0!important;min-width:0!important;padding:0 12px!important;color:rgba(255,255,255,0.85)!important;text-decoration:underline;text-underline-offset:5px}
/* ===== critic round 5: price buttons are glass; only the cheapest affordable one is filled ===== */
#scr-show .pbtn{border:1px solid rgba(255,255,255,0.22)!important;background:rgba(255,255,255,0.08)!important;color:#fff!important}
#scr-show .pbtn.hot{background:var(--ui-c)!important;border-color:var(--ui-c)!important;color:#03151b!important}
#scr-show .pbtn.dim{background:transparent!important;color:rgba(255,255,255,0.4)!important}
#scr-show .bar i:not(.up){border-radius:3px}
/* licence: credits/privacy + OSM attribution reachable from home (ODbL) */
#scr-home .legal{grid-column:1 / -1;justify-self:center;font-family:var(--ui-text);font-size:11px;font-weight:600;letter-spacing:0.4px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 8px;margin-top:-4px}
@media (orientation:landscape){#scr-home .legal{position:fixed;left:calc(env(safe-area-inset-left) + 18px);bottom:calc(env(safe-area-inset-bottom) + 2px);margin:0;padding:2px 0;font-size:10px}}
/* world top 10 (time trial) */
.r2-head{display:flex;align-items:center;justify-content:space-between;margin:10px 2px 5px;font-size:11px;font-weight:700;letter-spacing:1.4px;color:rgba(255,255,255,0.55)}
.r2-head button{background:none;border:0;color:rgba(255,255,255,0.85);font:inherit;letter-spacing:0.4px;cursor:pointer;pointer-events:auto}
#world-top{max-height:min(40vh,240px);overflow-y:auto;pointer-events:auto}
.r2-row .nm small{font-size:10px;letter-spacing:1px;opacity:0.55;margin-left:4px}
.r2-row .gh{margin-left:8px;background:none;border:1px solid rgba(255,255,255,0.3);color:inherit;border-radius:6px;font:700 10px var(--ui-text);letter-spacing:1px;padding:3px 7px;cursor:pointer}
@media (orientation:landscape) and (max-height:500px){#world-top{max-height:28vh}}
/* portrait fix (release QA 2026-10-17): the car arrows sat under .stage-ui (later in the DOM, flex:1), so taps never
   reached them; lift them above it */
#scr-show .arrows{z-index:3}
#scr-show .arrows button{position:relative;z-index:3}
/* ===== live rooms lobby (src/ui/lobby.js) ===== */
body.in-lobby #h2,body.in-lobby #touch-ui,body.in-lobby #hud,body.in-lobby #steer-pad,body.in-lobby #minimap,body.in-lobby #standings,body.in-lobby #pause-btn{display:none!important}
#net-lobby{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;padding:16px 16px calc(env(safe-area-inset-bottom) + 20px);
  background:linear-gradient(180deg,rgba(7,9,14,0) 0%,rgba(7,9,14,0.6) 40%,rgba(7,9,14,0.95) 75%);font-family:var(--ui-text);color:#fff}
#net-lobby .nl-card{width:min(460px,100%)}
#net-lobby .nl-top{display:flex;align-items:center;gap:12px;margin-bottom:8px}
#net-lobby .nl-top small{font-size:11px;font-weight:700;letter-spacing:1.6px;color:var(--ui-c)}
#net-lobby .nl-top h2{margin:0;font-family:var(--ui-display);font-style:italic;font-weight:900;font-size:26px;line-height:1}
#net-lobby .nl-back{width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,0.12);color:#fff;font-size:22px;cursor:pointer;flex:none}
#net-lobby .nl-code{margin-left:auto;font-family:var(--ui-display);font-style:italic;font-weight:900;font-size:16px;letter-spacing:2px;background:#fff;color:#0a0c12;padding:6px 10px;border-radius:8px}
#net-lobby .nl-status{font-size:13.5px;color:rgba(255,255,255,0.75);margin:0 2px 8px}
#net-lobby .nl-status.err{color:#ff8a8a}
/* Phase 5: ranked line on quick matches + private-room rules (host segs / guest chips) */
#net-lobby .nl-ranked{font-size:13px;font-weight:700;letter-spacing:0.6px;color:#fff;margin:-4px 2px 8px}
#net-lobby .nl-ranked b{color:var(--ui-c)}
#net-lobby .nl-ranked small{display:block;font-size:10.5px;letter-spacing:1.1px;color:rgba(255,255,255,0.5);margin-top:2px}
#net-lobby .nl-rules{background:rgba(255,255,255,0.05);border-radius:12px;padding:8px 12px;margin-bottom:10px}
#net-lobby .nl-rule{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 0;font-size:11px;font-weight:700;letter-spacing:1.3px;color:rgba(255,255,255,0.55)}
#net-lobby .nl-rule+.nl-rule{border-top:1px solid rgba(255,255,255,0.07)}
#net-lobby .nl-seg{display:inline-flex;background:rgba(255,255,255,0.1);border-radius:8px;overflow:hidden}
#net-lobby .nl-seg button{background:0;border:0;color:rgba(255,255,255,0.65);font:700 12px var(--ui-text);padding:6px 9px;cursor:pointer}
#net-lobby .nl-seg button.on{background:#fff;color:#0a0c12}
#net-lobby .nl-tag{font-size:12px;font-weight:700;letter-spacing:1px;color:#fff}
#net-lobby .nl-seat .nm b.tag{color:var(--ui-c);font-size:11px;letter-spacing:1px;margin-right:4px;font-weight:900}
#net-lobby .nl-seats{background:rgba(255,255,255,0.05);border-radius:12px;overflow:hidden;margin-bottom:10px}
#net-lobby .nl-seat{display:flex;align-items:center;gap:10px;height:44px;padding:0 12px}
#net-lobby .nl-seat+.nl-seat{border-top:1px solid rgba(255,255,255,0.07)}
#net-lobby .nl-seat i{width:56px;height:30px;background:center/contain no-repeat;flex:none}
#net-lobby .nl-seat .nm{flex:1;font-weight:700;font-size:15px;display:flex;flex-direction:column;line-height:1.1}
#net-lobby .nl-seat .nm small{font-size:10.5px;letter-spacing:1.2px;color:rgba(255,255,255,0.5);font-weight:700}
#net-lobby .nl-seat .st{font-size:11px;font-weight:700;letter-spacing:1.4px;color:var(--ui-c)}
#net-lobby .nl-seat.me{background:rgba(255,255,255,0.1)}
#net-lobby .nl-seat.empty{color:rgba(255,255,255,0.4)}
#net-lobby .nl-seat.empty .n{width:56px;text-align:center}
#net-lobby .nl-actions{display:flex;gap:10px}
#net-lobby .nl-actions .btn{flex:1;height:48px;font-size:16px}
#net-lobby .nl-ready{background:rgba(255,255,255,0.12);color:#fff;border:0;border-radius:10px;font-family:var(--ui-display);font-style:italic;font-weight:900;letter-spacing:1px;cursor:pointer}
#net-lobby .nl-ready.on{background:#fff;color:#0a0c12}
#net-lobby .nl-bots{margin-top:10px;width:100%;height:44px;border:1px solid rgba(255,255,255,0.3);background:none;color:#fff;border-radius:10px;font:700 14px var(--ui-text);cursor:pointer}
@media (orientation:landscape) and (max-height:500px){#net-lobby{align-items:center;justify-content:flex-start;padding-left:calc(env(safe-area-inset-left) + 22px)}#net-lobby .nl-seat{height:36px}#net-lobby .nl-top h2{font-size:22px}}
#net-lobby .nl-start{background:var(--ui-c);color:#03151b;border:0;border-radius:0;transform:skewX(var(--ui-skew,-8deg));font-family:var(--ui-display);font-style:italic;font-weight:900;letter-spacing:1px;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,0.35)}
#net-lobby .nl-start span{display:inline-block;transform:skewX(calc(-1 * var(--ui-skew,-8deg)))}
/* online screen */
#scr-online .body{flex:1;display:flex;flex-direction:column;justify-content:flex-start;gap:10px;padding:12px 16px calc(env(safe-area-inset-bottom) + 28px);max-width:520px;width:100%;margin:0 auto;overflow-y:auto}
#scr-online .body>.opt:first-child{margin-top:auto}   /* short screens scroll; tall screens keep the buttons pinned at the bottom like before */
#scr-online .opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:16px 18px;border-radius:12px;border:0;background:rgba(255,255,255,0.08);color:#fff;cursor:pointer;font-family:var(--ui-text)}
#scr-online .opt b{font-family:var(--ui-display);font-style:italic;font-weight:900;font-size:22px}
#scr-online .opt small{font-size:13px;color:rgba(255,255,255,0.65)}
#scr-online .opt.cta{background:var(--ui-c);color:#03151b}#scr-online .opt.cta small{color:rgba(3,21,27,0.7)}
#scr-online .join{display:flex;gap:8px}
#scr-online .join input{flex:1;min-width:0;height:52px;border-radius:12px;border:1px solid rgba(255,255,255,0.25);background:rgba(255,255,255,0.06);color:#fff;font:900 italic 22px var(--ui-display);letter-spacing:4px;text-transform:uppercase;padding:0 14px}
#scr-online .join button{height:52px;padding:0 20px;border-radius:12px;border:0;background:#fff;color:#0a0c12;font:900 italic 16px var(--ui-display);cursor:pointer}
#scr-online .note{font-size:12px;color:rgba(255,255,255,0.5);margin:2px 2px 0}
/* Phase 5: ranked + crew cards on the Online screen (same card/row language as Eko Hustle) */
#scr-online .on-card{background:rgba(255,255,255,0.07);border-radius:12px;padding:12px 14px}
#scr-online .on-card .hz-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
#scr-online .on-card .hz-row b{font-size:16px}
#scr-online .on-card .hz-row span{font-family:var(--ui-display);font-style:italic;font-weight:900;color:var(--ui-c)}
#scr-online .on-card small{font-size:12px;color:rgba(255,255,255,0.6);display:block;margin-top:4px}
#scr-online .on-card .join{margin-top:8px}
#scr-online .on-card .join input{height:44px;font-size:16px;letter-spacing:2px}
#scr-online .on-card .join button{height:44px}
#scr-online .on-card .hz-btn.ghost{background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.75)}
#scr-online .hz-board{margin-top:8px;max-height:150px;overflow-y:auto}
#h-online{min-height:0!important}
#scr-home .grid .card.wide{grid-column:1 / -1}
@media (orientation:landscape){#scr-home .grid{grid-template-rows:repeat(3,minmax(0,1fr))!important}#scr-home .grid .card.wide{grid-column:auto}}
/* key art behind the lobby: your car's cover, dimmed toward the card */
#net-lobby{background:linear-gradient(180deg,rgba(7,9,14,0.15) 0%,rgba(7,9,14,0.55) 40%,rgba(7,9,14,0.95) 75%),var(--nl-cover,none) center/cover no-repeat,#07090e}
@media (orientation:landscape) and (max-height:500px){#net-lobby{background:linear-gradient(90deg,rgba(7,9,14,0.95) 0%,rgba(7,9,14,0.75) 45%,rgba(7,9,14,0.1) 75%),var(--nl-cover,none) center/cover no-repeat,#07090e}}
/* home portrait: career + RACE/TRIAL + CHALLENGES/ONLINE all fit in two rows (ONLINE used to land in a 0-height third row) */
@media (orientation:portrait){
  #scr-home #h-career{min-height:min(240px,29vh)!important}
  #scr-home .grid{grid-template-rows:minmax(110px,15vh) minmax(78px,10vh)!important}
  #scr-home .grid .card{min-height:0!important}
  #scr-home .grid #h-online{grid-column:auto}
  #scr-home #h-online .ct{position:absolute;display:block;padding:0}
  #scr-home #h-online::after{display:block}
  #scr-home #h-online .ct h3{font-size:clamp(20px,5vw,28px)!important}
}
/* home landscape: RACE/TRIAL + CHALLENGES/ONLINE as a 2x2 (TIME TRIAL used to sit in a 0-width implicit column) */
@media (orientation:landscape){
  #scr-home .grid{grid-template-columns:1fr 1fr!important;grid-template-rows:repeat(2,minmax(0,1fr))!important}
  #scr-home .grid #h-online{grid-column:auto}
  #scr-home #h-online .ct{position:absolute;display:block;padding:0}
  #scr-home #h-online::after{display:block}
  #scr-home #h-online .ct h3{font-size:clamp(18px,2.6vw,24px)!important}
}
/* Phase 1: rewards in every mode, hustle wins, challenge outcome (medals) */
.r2-pay span.h{color:var(--ui-c)}.r2-pay span.h b{color:var(--ui-c)}
.r2-why{font-size:12.5px;color:rgba(255,255,255,0.8);background:rgba(255,255,255,0.06);border-left:3px solid #ff8a8a;border-radius:6px;padding:6px 10px;margin:0 0 8px}
.r2-medals{display:flex;gap:6px;margin:0 0 8px}
.r2-medals span{flex:1;font-size:11.5px;color:rgba(255,255,255,0.6);background:rgba(255,255,255,0.05);border-radius:8px;padding:5px 8px;display:flex;flex-direction:column;line-height:1.25}
.r2-medals span b{font-family:var(--ui-display);font-style:italic;font-size:13px;letter-spacing:0.5px;color:#fff}
.r2-medals span em{font-style:normal;color:rgba(255,255,255,0.5)}
.r2-medals span.got{background:#fff;color:#0a0c12}.r2-medals span.got b,.r2-medals span.got em{color:#0a0c12}
/* challenge brief (src/ui/brief.js) */
#brief{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;padding:16px 16px calc(env(safe-area-inset-bottom) + 20px);background:#07090e center/cover no-repeat;font-family:var(--ui-text);color:#fff}
#brief .bf-card{width:min(460px,100%)}
#brief .bf-k{font-size:11px;font-weight:700;letter-spacing:1.6px;color:var(--ui-c);text-transform:uppercase}
#brief h2{margin:2px 0 6px;font-family:var(--ui-display);font-style:italic;font-weight:900;font-size:30px;line-height:1}
#brief .bf-obj{margin:0 0 10px;font-size:14px;color:rgba(255,255,255,0.85)}
#brief .bf-targets{display:flex;gap:8px;margin-bottom:10px}
#brief .bf-t{flex:1;background:rgba(255,255,255,0.07);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column}
#brief .bf-t b{font-family:var(--ui-display);font-style:italic;font-size:14px}
#brief .bf-t span{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
#brief .bf-t em{font-style:normal;font-size:12px;color:rgba(255,255,255,0.6)}
#brief .bf-t.gold b{color:#ffd76a}#brief .bf-t.silver b{color:#d8dee8}#brief .bf-t.bronze b{color:#e0a46c}
#brief .bf-t.held{outline:1.5px solid #fff}
#brief .bf-rules{margin:0 0 12px;padding-left:18px;font-size:12.5px;color:rgba(255,255,255,0.7);line-height:1.5}
#brief .bf-actions{display:flex;gap:10px}
#brief .bf-back{height:48px;padding:0 20px;border:1px solid rgba(255,255,255,0.3);background:none;color:#fff;border-radius:10px;font:700 14px var(--ui-text);cursor:pointer}
#brief .bf-go{flex:1;height:48px;border:0;background:var(--ui-c);color:#03151b;transform:skewX(var(--ui-skew,-8deg));font-family:var(--ui-display);font-style:italic;font-weight:900;font-size:18px;letter-spacing:1px;cursor:pointer}
#brief .bf-go span{display:inline-block;transform:skewX(calc(-1 * var(--ui-skew,-8deg)))}
@media (orientation:landscape) and (max-height:500px){#brief{align-items:center;justify-content:flex-start;padding-left:calc(env(safe-area-inset-left) + 22px)}#brief h2{font-size:24px}#brief .bf-rules{display:none}}
/* Eko Hustle */
#shell .chip.hz{border:1px solid var(--ui-c);color:var(--ui-c);background:rgba(71,225,255,0.08);cursor:pointer;font-family:var(--ui-text)}
#scr-hustle .body{flex:1;display:flex;flex-direction:column;gap:10px;padding:12px 16px calc(env(safe-area-inset-bottom) + 24px);max-width:520px;width:100%;margin:0 auto}
#scr-hustle .hz-lead{margin:0 2px 4px;font-size:13.5px;color:rgba(255,255,255,0.7)}
#scr-hustle .hz-task{background:rgba(255,255,255,0.07);border-radius:12px;padding:12px 14px}
#scr-hustle .hz-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
#scr-hustle .hz-row b{font-size:16px}
#scr-hustle .hz-row span{font-family:var(--ui-display);font-style:italic;font-weight:900;color:var(--ui-c)}
#scr-hustle .hz-bar{height:6px;border-radius:3px;background:rgba(255,255,255,0.12);margin:8px 0 4px;overflow:hidden}
#scr-hustle .hz-bar i{display:block;height:100%;background:var(--ui-c)}
#scr-hustle .hz-task small{font-size:12px;color:rgba(255,255,255,0.6)}
#scr-hustle .hz-task.done{opacity:0.65}#scr-hustle .hz-task.done .hz-row span{color:#fff}
#scr-career .rung.done{cursor:pointer}#scr-career .rung.done .st{font-size:10.5px;letter-spacing:1.2px;color:var(--ui-c)}
#scr-hustle .body,#scr-online .body{position:relative;z-index:1}
/* ===== Garage v2: PR + class badges, compare, tune, finishes, mastery, collection wall ===== */
.prb{display:inline-flex;align-items:center;gap:6px;font-family:var(--ui-display);font-style:italic;font-weight:900;font-size:13px;color:#fff;background:rgba(255,255,255,0.1);border-radius:6px;padding:2px 8px 2px 2px;letter-spacing:0.5px}
.prb b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:4px;background:#fff;color:#0a0c12;font-size:12px}
.prb.cls-S b{background:var(--ui-c)}.prb.cls-A b{background:#fff}.prb.cls-B b{background:#c9cfd9}.prb.cls-C b{background:#9aa3b2}.prb.cls-D b{background:#6b7383;color:#fff}
#scr-show .carname .prb{margin:2px auto 0}
#scr-show .carname .mst{display:block;font-size:11.5px;color:rgba(255,255,255,0.6);margin-top:2px}
#scr-show .carname .pin-b{margin-top:4px;background:none;border:1px solid rgba(255,255,255,0.3);color:#fff;border-radius:999px;font:700 11px var(--ui-text);letter-spacing:1px;padding:3px 10px;cursor:pointer;pointer-events:auto}
#scr-show .carname .pin-b.on{background:#fff;color:#0a0c12}
#scr-show .cmp{font-size:12px;color:rgba(255,255,255,0.75);text-align:center;margin:0 0 6px}#scr-show .cmp b{color:#fff}
#scr-show .part .pn{display:flex;flex-direction:column;line-height:1.15}
#scr-show .part .gain{font-size:10.5px;color:var(--ui-c);font-weight:600;letter-spacing:0.2px;text-transform:none}
#scr-show .part{grid-template-columns:minmax(0,1fr) auto auto!important}
#scr-show .pips i{width:14px!important}
#scr-show .finishes{display:flex;gap:6px;margin-top:10px}
#scr-show .finishes button,#scr-show .tune .tn{flex:1;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.15);color:#fff;border-radius:8px;padding:7px 8px;font:700 12px var(--ui-text);letter-spacing:0.8px;cursor:pointer}
#scr-show .finishes button.on,#scr-show .tune .tn.on{background:#fff;color:#0a0c12}
/* STYLE tab (visual shop): three compact categories, same button language as finishes */
#scr-show .look{display:flex;flex-direction:column;gap:9px}
#scr-show .lk-cat .lk-t{display:block;font-size:10.5px;font-weight:700;letter-spacing:1.6px;color:rgba(255,255,255,0.5);margin:0 2px 5px}
#scr-show .lk-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
#scr-show .lk{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.15);color:#fff;border-radius:8px;padding:7px 6px 6px;font:700 11px var(--ui-text);letter-spacing:0.5px;cursor:pointer;display:flex;flex-direction:column;gap:2px;align-items:center}
#scr-show .lk small{font-size:9.5px;font-weight:700;letter-spacing:0.8px;color:rgba(255,255,255,0.55)}
#scr-show .lk.buy small{color:var(--ui-c)}
#scr-show .lk.on{background:#fff;color:#0a0c12}#scr-show .lk.on small{color:rgba(10,12,18,0.6)}
#scr-show .tune{display:flex;flex-direction:column;gap:6px}
#scr-show .tune .tn{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
#scr-show .tune .tn small{font-weight:500;font-size:11.5px;letter-spacing:0.2px;opacity:0.75}
#scr-show .btn.ghost{background:transparent!important;border:1px solid rgba(255,255,255,0.35)!important;color:#fff!important;margin-right:8px}
#shell .chip#show-coll{cursor:pointer;border:0;color:#fff;font-family:var(--ui-text)}
#scr-collection .body{position:relative;z-index:1;flex:1;overflow-y:auto;padding:8px 16px calc(env(safe-area-inset-bottom) + 24px);max-width:720px;width:100%;margin:0 auto}
#scr-collection .coll-next{margin:0 2px 10px;font-size:14px;font-weight:600;color:var(--ui-c)}
#scr-collection .coll-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#scr-collection .coll{display:flex;flex-direction:column;align-items:flex-start;gap:4px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:8px 10px 10px;color:#fff;text-align:left;cursor:pointer;font-family:var(--ui-text)}
#scr-collection .coll .thumb{width:100%;height:64px;background:center/contain no-repeat}
#scr-collection .coll:not(.own) .thumb{filter:grayscale(0.7) brightness(0.7)}
#scr-collection .coll .nm b{display:block;font-family:var(--ui-display);font-style:italic;font-size:16px}
#scr-collection .coll .nm small{font-size:12px;color:rgba(255,255,255,0.6)}
#scr-collection .coll.own{border-color:rgba(255,255,255,0.25)}
@media (orientation:landscape){#scr-collection .coll-grid{grid-template-columns:repeat(4,1fr)}}
/* ===== Phase 4 live ops: login streak, weekly tournament, season cards, badges ===== */
#scr-hustle .body{overflow-y:auto}
.hz-streak{outline:1px solid rgba(71,225,255,0.35)}
.hz-dots{display:flex;gap:6px;margin:10px 0 4px}
.hz-dots i{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,0.14)}
.hz-dots i.on{background:#fff}
.hz-dots i.now{background:var(--ui-c)}
.hz-btn{margin-top:10px;width:100%;height:44px;border:0;border-radius:10px;background:var(--ui-c);color:#03151b;font:900 italic 15px var(--ui-display);letter-spacing:1px;cursor:pointer}
.hz-btn.done{background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.6);pointer-events:none}
.hz-board{margin-top:8px}
.hz-brow{display:flex;align-items:center;gap:10px;padding:7px 2px;font-size:13px;font-weight:600;border-top:1px solid rgba(255,255,255,0.07)}
.hz-brow .n{font-family:var(--ui-display);font-style:italic;font-weight:900;width:18px;text-align:center;color:rgba(255,255,255,0.6)}
.hz-brow .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hz-brow .g{font-variant-numeric:tabular-nums;color:rgba(255,255,255,0.7)}
.hz-brow.me{color:var(--ui-c)}
.hz-plist{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.hz-pl{flex:1;min-width:30%;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);color:#fff;border-radius:8px;padding:8px 6px;font:700 12px var(--ui-text);cursor:pointer}
.hz-note{margin:0 4px;font-size:12px;color:rgba(255,255,255,0.5);text-align:center}
#shell .chip#hz-badges{cursor:pointer;color:#fff;font-family:var(--ui-text)}
#scr-badges .body{position:relative;z-index:1;flex:1;overflow-y:auto;padding:8px 16px calc(env(safe-area-inset-bottom) + 24px)}
.bd-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:720px;width:100%;margin:0 auto}
@media (orientation:landscape){.bd-grid{grid-template-columns:repeat(3,1fr)}}
.bdg{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:3px;opacity:0.55}
.bdg.on{opacity:1;border-color:rgba(71,225,255,0.45)}
.bdg small{font-size:10px;font-weight:700;letter-spacing:1.4px;color:rgba(255,255,255,0.5);text-transform:uppercase}
.bdg b{font-family:var(--ui-display);font-style:italic;font-weight:900;font-size:16px}
.bdg p{margin:0;font-size:12.5px;color:rgba(255,255,255,0.7)}
.bdg span{margin-top:4px;font-size:11px;font-weight:700;letter-spacing:1px;color:var(--ui-c)}
.bdg.on span{color:rgba(255,255,255,0.6)}
#scr-show .lock .ofr{font-style:normal;color:var(--ui-c);font-weight:700;letter-spacing:0.6px}
#scr-show .lock s{opacity:0.5;font-weight:400;margin-left:4px}
/* settings: soundtrack name + skip */
.set-track{font-size:12px;font-weight:700;letter-spacing:0.6px;color:rgba(255,255,255,0.75);flex:1;text-align:right;margin-right:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
.set-skip{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.25);color:#fff;border-radius:8px;font:700 11px var(--ui-text);letter-spacing:1px;padding:6px 10px;cursor:pointer}

/* Phase 3 wave A: challenges screen — a vertical rail of banner cards with medal chips */
#scr-challenges .body{display:flex;flex-direction:column}
#ch-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;margin-top:8px;padding-bottom:12px;-webkit-overflow-scrolling:touch}
#ch-list .card{flex:0 0 92px;min-height:92px}
#ch-list .card .ct h3{font-size:clamp(18px,4.6vw,24px)}
#shell .card .ch-medal{position:absolute;top:10px;right:10px;font-family:var(--ui-display);font-style:italic;font-weight:900;font-size:11px;letter-spacing:1.2px;padding:4px 10px;border-radius:4px;color:#0a0c12;transform:skewX(var(--ui-skew,-8deg))}
#shell .card .ch-medal.gold{background:#ffd76a}
#shell .card .ch-medal.silver{background:#d8dee8}
#shell .card .ch-medal.bronze{background:#e0a46c}