/* select.css — 3-column hero layout for car selection screen.
   Layout: header strip + 3-col body (garage / preview-hero / settings).
   Mobile reflow at the bottom of this file.

   Three first-class breakpoints (D3 — addendum 2026-05-08):
   - mobile (≤767px): selMobile parallel block, single-column carousel
   - tablet portrait (768-899px): selMobile (carousel reads better
     than cramped desktop 3-col)
   - tablet landscape + iPad Pro portrait (900-1199px): selBody desktop
     layout with tighter column widths
   - desktop (≥1200px): full 3-col selBody at canonical widths

   Design tokens via CSS custom properties — single source of truth so
   future polish passes inherit. Mobile-first: base values target the
   tightest viewport; @media (min-width:...) progressively widens. */

#sSelect{
  /* Design tokens (D3 — UX-clarity P1-P9) */
  --space-2x:8px;
  --space-3x:12px;
  --space-4x:16px;
  --space-6x:24px;
  --space-8x:32px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:18px;
  --accent-primary:#ff6600;
  --accent-equipped:#22ddff;
  --accent-lock:#ff3a3a;
  --neutral-100:#f5f3ff;
  --neutral-300:#c9b9ff;
  --neutral-500:#6e5a9a;
  --neutral-700:#3a2960;
  --neutral-800:#2a1f4a;
  --neutral-900:#0d0020;
  --font-heading:'Orbitron',sans-serif;
  --font-body:'Rajdhani',sans-serif;
  --duration-micro:.18s;
  --duration-medium:.32s;
  --easing-out:cubic-bezier(.22,.61,.36,1);
  --easing-in-out:cubic-bezier(.45,.05,.55,.95);
}
@media (prefers-reduced-motion:reduce){
  #sSelect{
    --duration-micro:.01s;
    --duration-medium:.01s;
  }
}

#sSelect{
  background:radial-gradient(ellipse at 30% 50%,#0d0020,#050010,#000005);
  justify-content:flex-start;padding:0;overflow:hidden
}
/* Dot field + ultra-faint scanlines layered together for a CRT feel. */
#sSelect::before{
  content:'';position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(0deg,transparent 0,transparent 1px,rgba(255,255,255,.025) 1px,rgba(255,255,255,.025) 2px),
    radial-gradient(circle,rgba(180,100,255,.3) 1px,transparent 1px),
    radial-gradient(circle,rgba(100,200,255,.15) .7px,transparent .7px);
  background-size:100% 2px,32px 32px,20px 20px;
  background-position:0 0,3px 4px,12px 14px;
  pointer-events:none;opacity:.65;z-index:0
}
/* Perspective grid floor at the bottom — Tron-style horizon. Faded to
   transparent at the top via a mask gradient. Hidden when motion is
   reduced or on small phones to keep the masked-transformed layer off
   low-end paint paths. */
#sSelect::after{
  content:'';position:absolute;left:-20%;right:-20%;bottom:0;height:240px;
  background-image:
    linear-gradient(rgba(255,45,111,.35) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,45,111,.35) 1px,transparent 1px);
  background-size:46px 46px;
  pointer-events:none;z-index:0;opacity:.18;
  transform:perspective(320px) rotateX(58deg);transform-origin:50% 100%;
  mask-image:linear-gradient(transparent 0%,black 65%);
  -webkit-mask-image:linear-gradient(transparent 0%,black 65%)
}
@media (prefers-reduced-motion:reduce),(max-width:600px){
  #sSelect::after{display:none}
}

/* ── HEADER ──────────────────────────────────────────────────────────── */
.selHeader{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:12px 24px 10px;border-bottom:1px solid #2a1f4a;
  flex-shrink:0;position:relative;z-index:1;background:rgba(0,0,0,.3)
}
.selHeaderLeft{display:flex;flex-direction:column;gap:2px}
.selHeaderRight{display:flex;gap:8px;align-items:center}
.selTitle{
  font-family:'Orbitron',sans-serif;font-size:clamp(13px,1.6vw,18px);
  letter-spacing:5px;margin:0;color:#ff3a8c;font-weight:700;
  text-shadow:0 0 10px rgba(255,58,140,.55);
  animation:titleFlicker 8s infinite
}
@keyframes titleFlicker{
  0%,4%,5.5%,7%,9%,100%{opacity:1}
  4.5%{opacity:.78}
  6%,8%{opacity:.92}
}
.selSubtitle{font-family:'Rajdhani',sans-serif;font-size:11px;color:#6e5a9a;letter-spacing:2px}
.selBack{
  font-family:'Orbitron',sans-serif;font-size:10px;color:#c9b9ff;
  background:#2a1f4a;border:none;border-radius:14px;padding:6px 14px;
  cursor:pointer;letter-spacing:2px;transition:all .18s
}
.selBack:hover{background:#3a2960;color:#fff}
#worldIndicator{
  font-family:'Orbitron',sans-serif;font-size:10px;color:#c9b9ff;
  background:#2a1f4a;border:none;border-radius:14px;padding:6px 14px;
  cursor:pointer;letter-spacing:2px;transition:all .18s
}
#worldIndicator:hover{background:#3a2960;color:#fff}

/* ── BODY 3-col grid ─────────────────────────────────────────────────── */
/* Round-8 (PR #126): left widened 240 → 380px to host the tile-grid
   garage; right widened 280 → 320px for the glass-blur settings panel. */
.selBody{
  display:grid;grid-template-columns:380px 1fr 320px;gap:0;
  flex:1;overflow:hidden;width:100%;
  height:calc(100vh - 54px);height:calc(100dvh - 54px);
  position:relative;z-index:1
}

/* ── LEFT: garage with tier tabs ────────────────────────────────────── */
.selLeft{
  display:flex;flex-direction:column;border-right:1px solid #2a1f4a;
  overflow-y:hidden;padding:0;background:rgba(0,0,0,.25)
}
.garageHeader{
  padding:10px 12px 6px;border-bottom:1px solid #2a1f4a;background:rgba(0,0,0,.2)
}
.garageHeaderLbl{
  font-family:'Orbitron',sans-serif;font-size:8px;color:#6e5a9a;
  letter-spacing:3px;margin-bottom:8px
}
.tierTabs{
  display:flex;gap:4px;flex-wrap:nowrap;overflow-x:auto;
  font-family:'Orbitron',sans-serif;font-size:8.5px;letter-spacing:1px;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 18px),transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 18px),transparent 100%)
}
.tierTabs::-webkit-scrollbar{display:none}
.tierTab{
  flex:1 0 auto;min-width:34px;padding:5px 6px;text-align:center;cursor:pointer;
  color:#6e5a9a;border-bottom:1px solid #2a1f4a;transition:color .15s,border-color .15s,text-shadow .15s;
  white-space:nowrap
}
.tierTab:hover{color:#c9b9ff}
.tierTabSel{
  color:#ff3a8c;border-bottom-color:#ff3a8c;font-weight:600;
  text-shadow:0 0 8px rgba(255,58,140,.5)
}

/* Garage unlock progress bar — sits under the GARAGE label, gives a
   one-glance read of catalogue completion. */
.garageProg{
  height:3px;background:rgba(255,255,255,.05);border-radius:2px;
  overflow:hidden;margin-top:8px
}
.garageProgFill{
  height:100%;background:linear-gradient(90deg,#ff3a8c,#c41e6a);
  border-radius:2px;transition:width .3s ease;
  box-shadow:0 0 6px rgba(255,58,140,.6)
}

/* Round-8 (PR #126): desktop carCard rebuilt as a tile grid that
   mirrors the mobile .selM-card recipe. 3-col square tiles with baked
   Three.js snapshot centre, tier badge top-left, lock pip top-right,
   brand+model strip bottom. */
.carGrid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  padding:10px 12px 12px;width:100%;
  overflow-y:auto;flex:1;
  scrollbar-width:thin;scrollbar-color:rgba(255,58,140,.4) transparent
}
.carGrid::-webkit-scrollbar{width:6px}
.carGrid::-webkit-scrollbar-thumb{background:rgba(255,58,140,.4);border-radius:3px}
.carCard{
  --team:#6e5a9a;--car-accent:#ff3a8c;--car-glow:rgba(255,58,140,.45);
  position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;
  cursor:pointer;
  background:linear-gradient(135deg,#120a1f 0%,#1a0f2e 100%);
  border:1px solid color-mix(in srgb,var(--car-accent) 30%,rgba(40,20,80,.7));
  transition:transform .2s cubic-bezier(.34,1.3,.64,1),box-shadow .2s,border-color .2s;
  display:block
}
.carCard:hover{
  transform:translateY(-2px);
  border-color:var(--car-accent);
  box-shadow:0 0 18px var(--car-glow),0 6px 18px rgba(0,0,0,.45)
}
.carCard.sel{
  border:2px solid var(--car-accent);
  box-shadow:0 0 0 1px var(--car-accent),0 0 22px var(--car-glow),
             inset 0 0 24px color-mix(in srgb,var(--car-glow) 35%,transparent)
}
.carCardBg{
  position:absolute;inset:0;z-index:0;
  background:radial-gradient(circle at 50% 60%,var(--car-glow) 0%,transparent 65%)
}
.carCardCanvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1
}
.carCardCanvas.carCardCanvasLocked{filter:grayscale(.85) brightness(.55)}
.carCardBadge{
  position:absolute;top:5px;left:5px;z-index:2;
  padding:2px 6px;border-radius:4px;
  background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-family:'Orbitron',sans-serif;font-weight:700;font-size:7px;
  letter-spacing:.15em;color:var(--car-accent);
  border:1px solid color-mix(in srgb,var(--car-accent) 55%,transparent)
}
.carCardLock{
  position:absolute;top:5px;right:5px;z-index:2;
  width:20px;height:20px;border-radius:50%;
  background:rgba(0,0,0,.7);display:grid;place-items:center;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)
}
.carCardLock svg{width:9px;height:9px}
.carCardLock .carLockIcon{font-size:11px}
.carCardPrice{
  position:absolute;top:5px;right:30px;z-index:2;
  font-family:'Orbitron',sans-serif;font-size:8px;font-weight:700;
  letter-spacing:1.5px;color:#ffcc44;
  padding:3px 6px;border-radius:4px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,200,80,.4);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)
}
.carCardPrice.afford{color:#7dffb0;border-color:rgba(125,255,176,.45);text-shadow:0 0 6px rgba(125,255,176,.4)}
.carCardLabel{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:14px 10px 8px;
  background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.7) 55%,rgba(0,0,0,.88) 100%);
  border-bottom:1px solid var(--car-accent)
}
.carBrand{
  font-family:'Orbitron',sans-serif;font-size:7px;font-weight:700;
  letter-spacing:.22em;color:#c9b9ff;opacity:.8;
  text-transform:uppercase;line-height:1;margin-bottom:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.carName{
  font-family:'Orbitron',sans-serif;font-size:11px;font-weight:900;
  letter-spacing:.04em;color:#fff;line-height:1.05;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 1px 6px rgba(0,0,0,.95)
}
.carCard.locked{cursor:not-allowed}
.carCard.locked .carCardBadge{opacity:.5}
.carLockMini{font-size:10px;color:#6e5a9a;line-height:1}
.carPriceLbl{
  font-family:'Rajdhani',sans-serif;font-size:10px;color:#ffcc44;
  letter-spacing:1px;line-height:1
}
.carPriceLbl.afford{color:#7dffb0;text-shadow:0 0 6px rgba(125,255,176,.4)}
.carLockIcon{font-size:11px;color:#6e5a9a;line-height:1}

/* ── CENTER: hero preview ───────────────────────────────────────────── */
.selCenter{
  display:flex;flex-direction:column;padding:18px 24px 16px;
  gap:10px;position:relative;overflow:hidden;min-height:0;
  align-items:center
}
.selCenter::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 40%,rgba(140,60,255,.06) 0%,transparent 70%);
  pointer-events:none
}
.prevHeader{
  width:100%;max-width:720px;margin:0 auto;
  text-align:center
}
.prevBrandLine{
  font-family:'Orbitron',sans-serif;font-size:10px;color:#6e5a9a;
  letter-spacing:4px;text-transform:uppercase;text-align:center
}
.prevModelLine{
  font-family:'Rajdhani',sans-serif;font-size:24px;color:#fff;
  font-weight:600;letter-spacing:1.5px;line-height:1.1;text-align:center
}
.prevSpecsLine{
  font-family:'Rajdhani',sans-serif;font-size:11px;color:#8a78b8;
  letter-spacing:2px;margin-top:1px;text-align:center
}
.prevCanvasWrap{
  position:relative;width:100%;max-width:720px;
  flex:0 1 auto;aspect-ratio:16/10;min-height:0;
  margin:0 auto;
  border:1px solid #2a1f4a;border-radius:var(--radius-md);
  background:radial-gradient(ellipse at 50% 60%,#2a1a4a,#0d0820);
  overflow:hidden
}
/* Desktop ≥1200: utilize the centre column more — wider preview reads
   premium without losing layout balance. Tablet 900-1199 stays at the
   720 default to avoid a too-wide preview on iPad landscape. */
@media (min-width:1200px){
  .prevCanvasWrap{max-width:880px}
}
/* Magenta L-shaped corner brackets — anchors the preview as a viewport. */
.prevCorner{
  position:absolute;width:18px;height:18px;pointer-events:none;
  border:0 solid #ff2d6f;
  filter:drop-shadow(0 0 5px rgba(255,45,111,.7))
}
.prevCornerTL{top:7px;left:7px;border-top-width:2px;border-left-width:2px;border-top-left-radius:5px}
.prevCornerTR{top:7px;right:7px;border-top-width:2px;border-right-width:2px;border-top-right-radius:5px}
.prevCornerBL{bottom:7px;left:7px;border-bottom-width:2px;border-left-width:2px;border-bottom-left-radius:5px}
.prevCornerBR{bottom:7px;right:7px;border-bottom-width:2px;border-right-width:2px;border-bottom-right-radius:5px}
#carPreviewCvs{
  width:100%;height:100%;display:block
}
.colorRow{
  display:flex;gap:8px;padding:6px 10px;margin:6px auto 0;
  width:fit-content;max-width:100%;
  background:rgba(0,0,0,.4);border-radius:14px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.05)
}
.colorDot{
  width:18px;height:18px;border-radius:50%;cursor:pointer;
  border:2px solid transparent;transition:transform .12s,border-color .12s;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)
}
.colorDot:hover{transform:scale(1.12)}
.colorDot.cSel{
  border-color:#fff;transform:scale(1.10);
  box-shadow:0 0 10px rgba(255,255,255,.6),0 0 18px rgba(255,45,111,.5),
             inset 0 0 0 1px rgba(255,255,255,.2)
}

/* ── STATS BAR (horizontal 4-column grid of compact stat cards) ─────── */
.statBars{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  width:100%;max-width:720px;margin:2px auto 0;flex-shrink:0
}
.statCard{
  background:rgba(26,15,58,.7);border:1px solid rgba(255,255,255,.05);
  border-radius:8px;padding:8px 10px 9px;
  display:flex;flex-direction:column;gap:5px;align-items:stretch
}
.statCardHead{
  display:flex;align-items:baseline;justify-content:space-between;gap:6px
}
.statCardLbl{
  font-family:'Orbitron',sans-serif;font-size:8.5px;color:#8a78b8;
  letter-spacing:2px
}
.statCardBar{
  position:relative;height:5px;background:rgba(255,255,255,.05);
  border-radius:3px;overflow:hidden
}
.statCardGhost{
  position:absolute;top:0;left:0;height:100%;
  background:rgba(255,255,255,.08);border-radius:3px
}
.statCardFill{
  position:relative;height:100%;border-radius:3px;
  transition:width .22s ease-out
}
.statCardVal{
  font-family:'Rajdhani',sans-serif;font-size:14px;font-weight:600;
  letter-spacing:.3px;text-align:right;white-space:nowrap;line-height:1
}
.statCardValMax{font-size:9px;color:#4a3a6a;letter-spacing:.3px;font-weight:400}

/* ── RIGHT: settings + rival + start ────────────────────────────────── */
.selRight{
  display:flex;flex-direction:column;padding:14px 18px;gap:12px;
  overflow-y:auto;background:rgba(0,0,0,.15);border-left:1px solid #2a1f4a
}
.setSeg{
  display:flex;flex-direction:column;gap:6px;
  padding:9px 11px 8px;border-radius:8px;
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06)
}
.setLbl{
  font-family:'Orbitron',sans-serif;font-size:9px;color:#6e5a9a;
  letter-spacing:3px;padding-left:2px
}
.setOpts{display:flex;gap:0;border-bottom:1px solid #2a1f4a}
.setOpt{
  flex:1;padding:7px 0;text-align:center;cursor:pointer;
  font-family:'Rajdhani',sans-serif;font-size:13px;color:#a89bc7;
  letter-spacing:1px;
  border-bottom:2px solid transparent;
  border-left:1px solid rgba(255,255,255,.06);
  transition:color .15s,border-color .15s,text-shadow .15s,background .15s;
  user-select:none
}
.setOpt:first-child{border-left:none}
.setOpt:hover{color:#fff;background:rgba(255,58,140,.06)}
.setOptSel{
  color:#ff3a8c;border-bottom-color:#ff3a8c;font-weight:600;
  text-shadow:0 0 8px rgba(255,58,140,.45)
}

.rivalSeg{
  display:flex;flex-direction:column;gap:6px;
  padding:9px 11px 10px;border-radius:8px;
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06)
}
.rivalCard{
  display:flex;align-items:center;gap:11px;padding:2px
}
.rivalIcon{
  width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;border-radius:8px;
  background:radial-gradient(circle,rgba(255,58,140,.25),rgba(255,58,140,.04));
  border:1px solid rgba(255,58,140,.3);font-size:18px;line-height:1
}
.rivalInfo{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.rivalBestLapLbl{
  font-family:'Orbitron',sans-serif;font-size:7.5px;color:#6e5a9a;
  letter-spacing:2.5px
}
.rivalCar{
  font-family:'Rajdhani',sans-serif;font-size:12px;color:#c9b9ff;
  letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.rivalTime{
  font-family:'Rajdhani',sans-serif;font-size:11px;color:#ffcc44;
  letter-spacing:1px
}

.startBtnWrap{margin-top:auto;display:flex;flex-direction:column;gap:6px}
.startBtn{
  font-family:'Orbitron',sans-serif;font-size:14px;color:#fff;
  background:linear-gradient(90deg,#ff3a8c,#c41e6a);border:none;border-radius:10px;
  padding:11px 0 9px;cursor:pointer;letter-spacing:2px;font-weight:600;
  box-shadow:0 0 20px rgba(255,58,140,.35),0 6px 20px rgba(0,0,0,.35);
  transition:transform .12s,box-shadow .15s;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;width:100%
}
.startBtnLine{display:flex;align-items:center;gap:10px}
.startBtn:hover{
  transform:translateY(-1px);
  animation:startBtnPulse 1.6s ease-in-out infinite
}
.startBtn:active{transform:translateY(0);animation:none}
@keyframes startBtnPulse{
  0%,100%{box-shadow:0 0 24px rgba(255,58,140,.5),0 8px 24px rgba(0,0,0,.4)}
  50%{box-shadow:0 0 40px rgba(255,58,140,.85),0 10px 30px rgba(0,0,0,.45)}
}
.startBtnArrow{font-size:12px;opacity:.85}
.raceSummary{
  font-family:'Rajdhani',sans-serif;font-size:10px;
  color:rgba(255,255,255,.75);
  letter-spacing:1.5px;text-align:center;font-weight:400
}

/* ── MOBILE REFLOW (<768px) ─────────────────────────────────────────── */
@media(max-width:768px){
  .selHeader{padding:8px 12px 7px;gap:8px}
  .selTitle{font-size:13px;letter-spacing:3px}
  .selSubtitle{font-size:9px;letter-spacing:1.5px}
  .selHeaderRight{flex-shrink:0}
  .selBack,#worldIndicator{
    font-size:9px;padding:5px 10px;white-space:nowrap;line-height:1.1
  }
  .selBody{
    grid-template-columns:1fr;grid-template-rows:auto auto auto;
    height:auto;min-height:calc(100dvh - 48px);
    overflow-y:auto;overflow-x:hidden
  }
  .selLeft{
    order:1;border-right:none;border-bottom:1px solid #2a1f4a;
    max-height:none;overflow-y:visible
  }
  .garageHeader{padding:8px 10px 6px}
  /* Mobile tabs: smaller padding/gap zodat alle 5 in 365px viewport
     content area passen, plus mask-fade voor scroll-affordance op
     extra-narrow phones (iPhone SE, 320px). */
  .tierTabs{
    gap:2px;font-size:8px;letter-spacing:.5px;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 16px),transparent 100%);
            mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 16px),transparent 100%)
  }
  .tierTab{padding:5px 4px;min-width:28px}
  /* Garage on mobile becomes a horizontally-scrollable strip with a
     subtle right-edge fade so users see scroll affordance. */
  .carGrid{
    flex-direction:row;overflow-x:auto;overflow-y:hidden;gap:0;
    padding:6px 8px 6px 6px;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 24px),transparent 100%);
            mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 24px),transparent 100%)
  }
  .carCard{
    flex-shrink:0;width:132px;border-bottom:none;border-left:none;
    border-radius:10px;margin:0 4px;scroll-snap-align:start;
    background:rgba(20,10,40,.55);padding:7px 8px;gap:7px
  }
  .carCard.sel{
    background:rgba(255,58,140,.15);
    box-shadow:inset 0 0 0 1px #ff3a8c
  }
  .carCard.sel::after{display:none}
  .carSwatch{width:20px;height:20px;border-radius:5px}
  .carBrand{font-size:7px;letter-spacing:2px}
  .carName{font-size:10.5px}
  .carCardTrail{margin-left:0;gap:3px}
  .carPriceLbl,.carLockMini,.carLockIcon{font-size:9px}
  .selCenter{
    order:2;padding:10px 14px;gap:8px;
    align-items:stretch
  }
  .prevHeader{max-width:none}
  .prevBrandLine{font-size:9px;letter-spacing:3px}
  .prevModelLine{font-size:18px}
  .prevSpecsLine{font-size:10px;margin-bottom:2px}
  .prevCanvasWrap{
    flex:0 0 auto;width:100%;max-width:none;
    height:48vw;max-height:240px;min-height:160px;
    aspect-ratio:auto
  }
  .statBars{max-width:none;grid-template-columns:1fr 1fr;gap:6px}
  .statCard{padding:6px 9px 7px;gap:4px}
  .statCardLbl{font-size:7.5px;letter-spacing:1.8px}
  .statCardVal{font-size:12px}
  .statCardValMax{font-size:8px}
  .selRight{
    order:3;padding:10px 14px;gap:10px;
    padding-bottom:calc(96px + env(safe-area-inset-bottom,0px));
    border-left:none;border-top:1px solid #2a1f4a
  }
  .setSeg{gap:4px;padding:7px 9px 6px}
  .rivalSeg{padding:7px 9px 8px}
  .rivalIcon{width:32px;height:32px;font-size:16px}
  /* Brighter unselected state op mobile — #a89bc7 was nog te donker op
     real-device dark bg. Plus duidelijker vertical separators tussen
     opties zodat de drie "1 / 3 / 5" niet visueel samenvallen tot één
     gecentreerd nummer. */
  .setOpt{padding:8px 0;font-size:14px;min-height:38px;color:#d4c8e8;font-weight:500}
  .setOpt+.setOpt{border-left-color:rgba(255,255,255,.16)}
  .setOptSel{font-weight:700}
  /* Pin start button to bottom on mobile so it's always reachable */
  .startBtnWrap{
    position:fixed;left:10px;right:10px;z-index:10;
    bottom:calc(10px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(135deg,rgba(15,0,30,.94),rgba(5,0,15,.96));
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    padding:8px 12px;border-radius:14px;
    box-shadow:0 -6px 28px rgba(0,0,0,.55),0 0 24px rgba(255,58,140,.18);
    margin-top:0
  }
  .startBtn{padding:12px 0;font-size:13px;letter-spacing:1.5px}
}

/* ── NARROW PHONE REFLOW (<420px) ───────────────────────────────────── */
/* On iPhone SE / small Androids the title + 2 buttons collide on one
   row. Stack: title-and-subtitle on row 1, buttons on row 2. */
@media(max-width:420px){
  .selHeader{
    flex-direction:column;align-items:stretch;gap:6px;
    padding:8px 12px 8px
  }
  .selHeaderLeft{flex-direction:row;align-items:baseline;gap:10px;flex-wrap:wrap}
  .selHeaderRight{justify-content:flex-end;gap:6px}
  .selTitle{font-size:12px;letter-spacing:2.5px}
  .selSubtitle{font-size:8.5px}
  .selBack,#worldIndicator{font-size:8.5px;padding:5px 9px}
}

@media(min-width:769px) and (max-width:1100px){
  .selBody{grid-template-columns:200px 1fr 240px}
}

/* ── PORTRAIT PHONE (orientation portrait, <=600px wide) ──────────────
   Eerdere mobile reflow gaf carGrid een horizontale strip van car-cards.
   In portrait phone werd dat afgekapt op 3 cards → niet alle 12 auto's
   bereikbaar. In landscape phone blijft de horizontale strip wel goed
   werken (genoeg breedte). Daarom: portrait-only override naar verticale
   1-koloms scrollbare lijst, plus aspect-ratio fix op preview-wrap. */
@media (orientation:portrait) and (max-width:899px){
  .selLeft{max-height:36vh;overflow-y:auto;overflow-x:hidden}
  .carGrid{
    flex-direction:column;overflow-x:hidden;overflow-y:auto;
    gap:0;padding:4px 0;
    -webkit-mask-image:none;mask-image:none;
    scroll-snap-type:none
  }
  .carCard{
    flex-shrink:0;width:auto;margin:0;
    border-radius:0;border-bottom:1px solid #1a0f3a;
    padding:8px 12px;gap:10px;scroll-snap-align:none;
    background:transparent
  }
  .carCard.sel{
    background:linear-gradient(90deg,rgba(255,58,140,.18),rgba(255,58,140,.04));
    box-shadow:inset 0 0 0 1px rgba(255,58,140,.4)
  }
  .carCard.sel::after{
    content:'▶';display:block;position:absolute;right:10px;top:50%;
    transform:translateY(-50%);color:#ff3a8c;font-size:9px;
    text-shadow:0 0 8px rgba(255,58,140,.8)
  }
  /* Preview: contain-fit (zie _displayCanvasSnapshot) toont nu de hele
     auto. Aspect ratio terug naar 16:10 in plaats van 48vw cap zodat de
     letterbox-marge minimaal is. */
  .prevCanvasWrap{
    aspect-ratio:16/10;height:auto;max-height:34vh;min-height:140px
  }
}

/* ──────────────────────────────────────────────────────────────────────
   MOBILE PORTRAIT REDESIGN — parallel .selMobile block.
   Hidden by default; visible on portrait phones only. The legacy
   .selHeader and .selBody are hidden on this breakpoint so the new
   layout takes over without restructuring the desktop DOM.
   ────────────────────────────────────────────────────────────────────── */
.selMobile{display:none}

/* D3 — bumped breakpoint from 600 → 899 so tablet portrait (iPad
   Mini 768, iPad 11" 834) uses the carousel UX rather than a cramped
   desktop 3-col. Landscape phones (>600 wide) still get desktop. */
@media (orientation:portrait) and (max-width:899px){
  /* Hide legacy desktop layout pieces */
  #sSelect > .selHeader,
  #sSelect > .selBody{display:none !important}
  /* Override .screen flex centering so the mobile block fills the screen */
  #sSelect{
    align-items:stretch !important;
    justify-content:flex-start !important;
    overflow-y:auto;overflow-x:hidden
  }

  .selMobile{
    display:flex;flex-direction:column;
    position:relative;z-index:2;
    width:100%;max-width:480px;margin:0 auto;
    min-height:100dvh;
    padding-bottom:calc(118px + env(safe-area-inset-bottom,0px));
    color:#f5f3ff;
    font-family:'Rajdhani',sans-serif;
    -webkit-tap-highlight-color:transparent
  }

  /* ── TOP BAR ─────────────────────────────────────────────────────── */
  .selM-topbar{
    position:sticky;top:0;z-index:3;
    padding:max(env(safe-area-inset-top),10px) 14px 10px;
    background:linear-gradient(180deg,rgba(10,6,18,.95) 0%,rgba(10,6,18,.85) 70%,transparent 100%);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    display:flex;align-items:center;gap:10px
  }
  .selM-iconBtn{
    width:40px;height:40px;border-radius:12px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(167,139,250,.12);
    display:grid;place-items:center;
    color:#f5f3ff;flex-shrink:0;cursor:pointer;
    transition:transform .15s,background .15s;padding:0
  }
  .selM-iconBtn:active{transform:scale(.92);background:rgba(255,45,138,.15)}
  .selM-iconBtn svg{width:18px;height:18px}
  .selM-trackPill{
    flex:1;height:40px;border-radius:12px;
    background:linear-gradient(135deg,rgba(217,70,239,.18),rgba(255,45,138,.12));
    border:1px solid rgba(217,70,239,.35);
    display:flex;align-items:center;justify-content:center;gap:8px;
    padding:0 12px;color:#f5f3ff;cursor:pointer;
    font-family:'Orbitron',sans-serif;font-weight:700;font-size:11px;
    letter-spacing:.12em;transition:transform .15s;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis
  }
  .selM-trackPill:active{transform:scale(.98)}
  .selM-trackEmoji{font-size:15px}
  .selM-trackPill svg{flex-shrink:0;opacity:.7}
  .selM-coinsPill{
    height:40px;border-radius:12px;
    background:rgba(251,191,36,.08);
    border:1px solid rgba(251,191,36,.25);
    display:flex;align-items:center;gap:6px;
    padding:0 12px;color:#fbbf24;
    font-family:'Orbitron',sans-serif;font-weight:700;font-size:12px;
    flex-shrink:0
  }
  .selM-coinDot{
    width:11px;height:11px;border-radius:50%;
    background:radial-gradient(circle at 30% 30%,#fcd34d,#d97706);
    box-shadow:0 0 8px rgba(251,191,36,.5)
  }

  /* ── TITLE BLOCK ─────────────────────────────────────────────────── */
  /* Iets kleiner + meer tracking dan eerder; spacing tussen secties is
     ~15% verlaagd (padding 4/18/8 → 2/18/4) zodat de auto-card hoger op
     het scherm landt. */
  .selM-titleBlock{padding:2px 18px 4px}
  .selM-title{
    font-family:'Orbitron',sans-serif;font-weight:900;font-size:19px;
    line-height:1;letter-spacing:.08em;margin:0;
    background:linear-gradient(135deg,#ff2d8a 0%,#d946ef 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent
  }

  /* ── TABS ROW (tabs links, unlock-progress rechts) ──────────────────
     Combineert de oude selM-tabs rij met selM-subtitle progress strip;
     bespaart een hele verticale rij in de header. */
  .selM-tabsRow{
    display:flex;align-items:center;gap:10px;
    padding:8px 14px 0
  }
  .selM-subtitle{
    flex-shrink:0;margin-left:auto;font-size:9.5px;color:#8170aa;
    letter-spacing:.12em;display:flex;align-items:center;gap:7px;
    font-family:'Orbitron',sans-serif;font-weight:700
  }
  .selM-progress{
    width:54px;height:3px;background:rgba(255,255,255,.06);
    border-radius:999px;overflow:hidden
  }
  .selM-progressFill{
    height:100%;width:0%;transition:width .3s ease;
    background:linear-gradient(90deg,#ff2d8a,#d946ef);
    box-shadow:0 0 8px rgba(255,45,138,.55)
  }

  /* ── TIER TABS ───────────────────────────────────────────────────── */
  .selM-tabs{
    flex:1;display:flex;gap:6px;min-width:0;
    overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none
  }
  .selM-tabs::-webkit-scrollbar{display:none}
  .selM-tab{
    flex-shrink:0;padding:6px 12px;border-radius:999px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(167,139,250,.12);
    color:#a89cc7;
    font-family:'Rajdhani',sans-serif;font-weight:700;font-size:12.5px;
    letter-spacing:.1em;text-transform:uppercase;
    cursor:pointer;transition:all .2s
  }
  .selM-tab.selM-tabActive{
    background:linear-gradient(135deg,rgba(255,45,138,.2),rgba(217,70,239,.2));
    border-color:#ff2d8a;color:#f5f3ff;
    box-shadow:0 0 16px rgba(255,45,138,.3)
  }

  /* ── CAROUSEL ────────────────────────────────────────────────────── */
  /* Card height bumped 230 → 256 (~11%) zodat de auto-render meer adem-
     ruimte krijgt boven de naam-strip die nu een gradient-overlay heeft
     i.p.v. losse tekst onderaan. carouselWrap loopt dus mee. */
  .selM-carouselWrap{position:relative;margin-top:8px;height:286px}
  .selM-carousel{
    display:flex;overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-behavior:smooth;
    height:100%;gap:14px;
    padding:0 calc(50% - 115px);
    scrollbar-width:none;-ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
    /* Expliciet pan-x toestaan: iOS Safari claimt anders soms de
       horizontale pointer voor page-back-gesture of zoom; deze hint
       verzekert dat de carousel zelf de horizontale touches krijgt. */
    touch-action:pan-x pan-y
  }
  .selM-carousel::-webkit-scrollbar{display:none}
  .selM-card{
    flex-shrink:0;width:230px;height:256px;
    scroll-snap-align:center;position:relative;
    border-radius:22px;overflow:hidden;
    transform:scale(.88);opacity:.5;
    transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .3s,box-shadow .3s;
    cursor:pointer;
    --car-accent:#ff2d8a;
    --car-glow:rgba(255,45,138,.4)
  }
  .selM-card.selM-cardActive{
    transform:scale(1);opacity:1;
    box-shadow:0 14px 36px rgba(0,0,0,.5),
               0 0 0 1px var(--car-accent),
               0 0 28px var(--car-glow)
  }
  .selM-card.selM-cardLocked{cursor:not-allowed}
  .selM-cardBg{
    position:absolute;inset:0;
    background:linear-gradient(135deg,#120a1f 0%,#1a0f2e 100%);
    border:1px solid rgba(255,255,255,.06);
    border-radius:inherit
  }
  .selM-cardBg::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(circle at 50% 60%,var(--car-glow) 0%,transparent 65%)
  }
  /* Bottom accent gradient — uses the per-car colour i.p.v. de oude
     vaste gele lijn. Zit in de naam-strip overlay zodat de strip
     visueel met een dunne accent-onderlijn afgesloten wordt. */
  .selM-cardCorners{position:absolute;inset:12px;pointer-events:none}
  .selM-cardCorners::before,.selM-cardCorners::after{
    content:'';position:absolute;width:18px;height:18px;
    border:2px solid var(--car-accent);opacity:.55
  }
  .selM-cardCorners::before{
    top:0;left:0;border-right:none;border-bottom:none;
    border-top-left-radius:6px
  }
  .selM-cardCorners::after{
    bottom:0;right:0;border-left:none;border-top:none;
    border-bottom-right-radius:6px
  }
  .selM-cardCanvas{
    position:absolute;inset:0;width:100%;height:100%;
    display:block
  }
  .selM-cardCanvas.selM-cardCanvasLocked{filter:grayscale(.85) brightness(.55)}
  /* Type-badge — inside card-padding, glassy backdrop-blur, accent border. */
  .selM-cardBadge{
    position:absolute;top:12px;left:12px;z-index:2;
    padding:4px 9px;border-radius:6px;
    background:rgba(255,255,255,.05);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    font-family:'Orbitron',sans-serif;font-weight:700;font-size:9px;
    letter-spacing:.18em;color:var(--car-accent);
    border:1px solid color-mix(in srgb,var(--car-accent) 55%,transparent);
    box-shadow:0 2px 10px rgba(0,0,0,.4)
  }
  .selM-cardLock{
    position:absolute;top:12px;right:12px;z-index:2;
    width:28px;height:28px;border-radius:50%;
    background:rgba(0,0,0,.7);display:grid;place-items:center;
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)
  }
  /* Name-strip — gradient bottom overlay, sits as a dedicated band so the
     auto-render above it stays visually clean. Includes a 1px accent line
     at the very bottom in the car's colour i.p.v. de oude gele underline. */
  .selM-cardName{
    position:absolute;left:0;right:0;bottom:0;z-index:2;
    padding:32px 16px 14px;
    background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.7) 55%,rgba(0,0,0,.85) 100%);
    border-bottom:1px solid var(--car-accent);
    box-shadow:inset 0 -1px 0 var(--car-accent),
               0 1px 16px var(--car-glow)
  }
  .selM-cardBrand{
    font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;
    letter-spacing:.28em;color:#c9b9ff;margin-bottom:3px;opacity:.78;
    text-transform:uppercase
  }
  .selM-cardModel{
    font-family:'Orbitron',sans-serif;font-size:21px;font-weight:900;
    letter-spacing:.05em;color:#fff;line-height:1;
    text-shadow:0 2px 12px rgba(0,0,0,.85)
  }
  .selM-cardPrice{
    margin-top:5px;font-family:'Rajdhani',sans-serif;font-weight:700;
    font-size:12px;letter-spacing:.08em;color:#ffcc44
  }
  .selM-cardPrice.afford{color:#7dffb0;text-shadow:0 0 6px rgba(125,255,176,.4)}

  /* ── DOTS ────────────────────────────────────────────────────────── */
  /* Inactive 4px round, low-opacity wit; active 8px gradient pill met
     glow. Smoothe transition tussen states. Spacing 6px volgens P9. */
  .selM-dots{
    display:flex;justify-content:center;align-items:center;
    gap:6px;margin-top:10px;height:10px
  }
  .selM-dot{
    width:4px;height:4px;border-radius:50%;
    background:rgba(255,255,255,.15);
    transition:width var(--duration-micro,.18s) var(--easing-out,ease-out),
               height var(--duration-micro,.18s) var(--easing-out,ease-out),
               background var(--duration-micro,.18s) var(--easing-out,ease-out),
               box-shadow var(--duration-micro,.18s) var(--easing-out,ease-out)
  }
  .selM-dot.selM-dotActive{
    width:18px;height:8px;border-radius:999px;
    background:linear-gradient(90deg,#ff2d8a,#d946ef);
    box-shadow:0 0 10px rgba(255,45,138,.7)
  }

  /* ── STATS STRIP ─────────────────────────────────────────────────── */
  /* Compact 3-up strip: tighter padding, smaller numerals, thinner bar.
     Whole strip caps at ~62px high to leave room for chips + CTA on
     iPhone-14-class viewports without scrolling. */
  .selM-stats{
    display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;
    margin:10px 14px 0
  }
  .selM-stat{
    background:rgba(255,255,255,.03);
    border:1px solid rgba(167,139,250,.12);
    border-radius:11px;padding:6px 8px 7px;text-align:center
  }
  .selM-statLbl{
    font-family:'Orbitron',sans-serif;font-size:8px;font-weight:700;
    letter-spacing:.16em;color:#6b5b8c;margin-bottom:2px
  }
  /* Numerieke waarde iets meer letter-spacing; eenheid (HP / KM/H / S)
     dimmer zodat het hoofdgetal duidelijker pops. */
  .selM-statVal{
    font-family:'Orbitron',sans-serif;font-size:13px;font-weight:900;
    color:#f5f3ff;line-height:1;letter-spacing:.04em
  }
  .selM-statUnit{
    font-size:8px;color:#a89cc7;margin-left:3px;font-weight:600;
    opacity:.6;letter-spacing:.05em
  }
  .selM-statBar{
    margin-top:4px;height:2px;background:rgba(255,255,255,.05);
    border-radius:999px;overflow:hidden
  }
  .selM-statBarFill{
    height:100%;width:0%;border-radius:999px;
    background:linear-gradient(90deg,#ff2d8a,#d946ef);
    transition:width .25s ease-out
  }

  /* ── OPTIONS ─────────────────────────────────────────────────────── */
  /* Tighter rows + smaller chips so LAPS / DIFF / MODE collectively eat
     ~120px instead of ~150px. Chips drop from 34→30px; the surrounding
     row is 38px tall, still finger-friendly. */
  .selM-options{
    margin-top:12px;padding:0 14px;
    display:flex;flex-direction:column;gap:8px
  }
  .selM-optionRow{display:flex;align-items:center;gap:8px}
  .selM-optionLabel{
    width:50px;flex-shrink:0;
    font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;
    letter-spacing:.18em;color:#6b5b8c
  }
  .selM-chips{
    flex:1;display:flex;gap:3px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(167,139,250,.12);
    border-radius:10px;padding:3px
  }
  .selM-chip{
    flex:1;height:30px;border-radius:8px;
    background:transparent;border:none;color:#a89cc7;
    font-family:'Rajdhani',sans-serif;font-weight:700;font-size:12.5px;
    letter-spacing:.04em;cursor:pointer;transition:all .18s;
    display:flex;align-items:center;justify-content:center;gap:4px;
    padding:0 4px
  }
  .selM-chip.selM-chipActive{
    background:linear-gradient(135deg,#ff2d8a,#d946ef);color:#fff;
    box-shadow:0 3px 10px rgba(255,45,138,.35)
  }
  .selM-chipIcon{font-size:13px;line-height:1}

  /* ── CTA BAR (sticky bottom) ─────────────────────────────────────── */
  /* Slimmer button, capped width (~70% of phone), summary integrated as
     a sub-label inside the button — replaces the previous pair of "big
     CTA + duplicate summary line beneath it". */
  .selM-ctaBar{
    position:fixed;left:0;right:0;bottom:0;z-index:5;
    padding:8px 14px max(env(safe-area-inset-bottom),10px);
    background:linear-gradient(180deg,transparent 0%,rgba(10,6,18,.92) 30%,#0a0612 100%);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)
  }
  .selM-ctaBarInner{
    max-width:320px;margin:0 auto;display:flex;flex-direction:column
  }
  .selM-ctaBtn{
    width:100%;min-height:54px;border:none;border-radius:14px;
    padding:7px 16px;
    background:linear-gradient(135deg,#ff2d8a 0%,#d946ef 60%,#6d28d9 100%);
    color:#fff;cursor:pointer;position:relative;overflow:hidden;
    box-shadow:0 6px 18px rgba(255,45,138,.32),
               0 2px 6px rgba(217,70,239,.22),
               inset 0 1px 0 rgba(255,255,255,.18);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;transition:transform .15s
  }
  .selM-ctaBtn:active{transform:scale(.97)}
  .selM-ctaBtn::before{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
    transform:translateX(-100%);
    animation:selMShine 3.4s ease-in-out infinite
  }
  .selM-ctaBtnMain{
    display:flex;align-items:center;justify-content:center;gap:8px;
    font-family:'Orbitron',sans-serif;font-weight:900;font-size:15px;
    letter-spacing:.16em;line-height:1
  }
  .selM-ctaBtnLbl{line-height:1}
  @keyframes selMShine{
    0%,60%{transform:translateX(-100%)}
    100%{transform:translateX(100%)}
  }
  .selM-ctaSummary{
    display:flex;justify-content:center;align-items:center;gap:5px;
    font-size:9.5px;color:rgba(255,255,255,.78);
    letter-spacing:.08em;text-transform:uppercase;
    font-family:'Rajdhani',sans-serif;font-weight:700;
    flex-wrap:wrap;line-height:1.1
  }
  .selM-ctaSummary .selM-sep{opacity:.45}
}

/* Smaller Android phones — 360px viewport, shorter screens. */
@media (orientation:portrait) and (max-width:380px){
  .selM-title{font-size:20px}
}

/* ── Mobile car-tile grid (2026-05-11) ─────────────────────────────────
   Owner feedback "ik wil het niet voor meerdere auto's op de pagina
   zonder dat het rommelig is, misschien gewoon klein vierkantjes /
   tegeltjes". Replaces the horizontal swipe carousel with a 4-column
   tile grid that shows every car at once. Active car name lives in a
   dedicated banner above the grid (selM-activeName) since the tiles
   are too small for inline brand/model text.

   Overrides — not removes — the .selM-carousel rules above so the
   carousel-wrap, card hierarchy, badge, lock pip, and per-card
   --car-accent variables stay intact; we just re-layout them. */
@media (orientation:portrait) and (max-width:899px){
  .selM-carouselWrap{
    height:auto;margin-top:6px;margin-bottom:14px;
    /* The grid scrolls vertically internally if there are more rows
       than fit; carouselWrap itself is just a layout container.
       margin-bottom keeps the POWER / TOP SPEED / 0-100 stats panel
       from sitting flush against the last row of tiles. */
    display:flex;flex-direction:column;
  }
  /* Active-car name banner above the grid */
  .selM-activeName{
    padding:4px 16px 8px;display:flex;flex-direction:column;gap:2px;
  }
  .selM-activeBrand{
    font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;
    letter-spacing:.28em;color:#c9b9ff;opacity:.78;
    text-transform:uppercase;line-height:1
  }
  .selM-activeModel{
    font-family:'Orbitron',sans-serif;font-size:22px;font-weight:900;
    color:#fff;line-height:1.1;letter-spacing:.04em;
    text-shadow:0 2px 12px rgba(0,0,0,.6)
  }
  /* Re-layout the carousel itself as a 4-column grid */
  .selM-carousel{
    display:grid!important;
    grid-template-columns:repeat(4,1fr)!important;
    /* Explicit row height — aspect-ratio inside grid is unreliable
       on older iOS Safari, so each card gets a fixed pixel height.
       2026-05-11 round-5: shrunk 84 → 72px so all four rows of
       13 cars (4 cols × 4 rows = 16 cells, last row partial) fit
       inside the grid without the bottom row clipping. */
    grid-auto-rows:72px!important;
    gap:8px!important;
    padding:8px 14px 12px!important;
    overflow-x:visible!important;
    overflow-y:auto!important;
    /* Fits 4 rows of 72px (288px) + 3 gaps of 8px (24px) = 312px
       worst case. Last row is shorter (only the 13th car) so 320
       leaves a small buffer + room for scroll-shadow if more cars
       are added later. */
    max-height:320px!important;
    scroll-snap-type:none!important;
    -webkit-overflow-scrolling:touch
  }
  /* Tile-style card — height taken from grid-auto-rows, width from
     grid 1fr column. Explicit overrides nuke the 230×256 base sizes
     so iOS Safari can't fall back to the swipe-carousel dimensions. */
  .selM-card{
    width:auto!important;height:auto!important;
    min-width:0!important;min-height:0!important;
    max-width:none!important;max-height:none!important;
    flex-shrink:0!important;
    /* Active state used to project a 18px box-shadow glow that
       bled into neighbouring tiles; pull it in so tiles read
       as separate tappable squares. */
    transform:none!important;opacity:1!important;
    border-radius:12px!important;
    transition:box-shadow .2s,border-color .2s;
    /* 2026-05-11 round-4 tap-fix. Card itself is the click target;
       enable touch + a soft tap highlight so iOS Safari registers
       the tap reliably (without highlight the scroll heuristic
       sometimes swallows the click as a swipe-start). */
    cursor:pointer;
    -webkit-tap-highlight-color:rgba(255,255,255,0.08);
    touch-action:manipulation;
    pointer-events:auto!important
  }
  /* All visual children inside a tile are decoration only — keep them
     OUT of the tap path so the click never lands on a child instead
     of the card. Fixes "kan geen andere auto's selecteren": the
     canvas / cardBg / badge / lock / name strip were absorbing taps
     in some iOS Safari builds. */
  .selM-card > *{pointer-events:none!important}
  .selM-card.selM-cardActive{
    transform:none!important;
    box-shadow:0 0 0 2px var(--car-accent),0 0 8px var(--car-glow)!important
  }
  .selM-cardBg{border-radius:12px}
  .selM-cardCorners{display:none!important}
  /* Type badge — shrink to fit corner of tile */
  .selM-cardBadge{
    top:4px;left:4px;font-size:7px;padding:2px 5px;
    letter-spacing:.14em;border-radius:4px
  }
  .selM-cardLock{
    top:4px;right:4px;width:18px;height:18px
  }
  .selM-cardLock svg{width:9px;height:9px}
  /* Hide the per-card name strip — active name lives in the banner now */
  .selM-cardName,.selM-cardBrand,.selM-cardModel,.selM-cardPrice{
    display:none!important
  }
  /* Dots are redundant in grid mode — alle cards zichtbaar */
  .selM-dots{display:none!important}
}

/* Smaller phones — drop to 3 columns so each tile stays tappable. */
@media (orientation:portrait) and (max-width:380px){
  /* 13 cars in 3 cols = 5 rows. At 72px per row + 8px gap that's
     400px worst case — too tall, so cap at 308px (~4 rows visible
     + 5th row scrolls). */
  .selM-carousel{
    grid-template-columns:repeat(3,1fr)!important;
    max-height:308px!important
  }
  .selM-activeModel{font-size:20px}
}

/* ── D3 — Tablet landscape (900-1199px) tuning ──────────────────────
   iPad landscape 1024×768 + iPad Pro 11" landscape 1194×834 + iPad
   Pro 12.9" portrait 1024×1366 (portrait but >899 so it lands here).
   Tighten the desktop 3-col widths so the centre preview gets enough
   space without the columns feeling cramped. */
@media (min-width:900px) and (max-width:1199px){
  .selBody{grid-template-columns:200px 1fr 240px}
  .selLeft{padding:var(--space-3x) var(--space-2x)}
  .selRight{padding:var(--space-3x) var(--space-2x)}
  .prevCanvasWrap{max-width:680px}
}

/* ── D3 — Visible focus rings for keyboard navigation ──────────────
   Required by addendum: desktop keyboard-nav must be first-class.
   Use :focus-visible (modern UA) so mouse-clicks don't paint focus
   rings — only keyboard traversal does. */
.tierTab:focus-visible,
.carCard:focus-visible,
.colorRow > *:focus-visible,
.setOpt:focus-visible,
.startBtn:focus-visible,
.selBack:focus-visible,
#worldIndicator:focus-visible,
.selM-tab:focus-visible,
.selM-chip:focus-visible,
.selM-ctaBtn:focus-visible,
.selM-iconBtn:focus-visible,
.selM-trackPill:focus-visible{
  outline:2px solid var(--accent-equipped);
  outline-offset:3px;
  border-radius:var(--radius-sm);
}
/* ── D3 — touch/click discipline ───────────────────────────────────
   touch-action:manipulation removes the 300ms double-tap-to-zoom
   delay on iOS Safari and prevents pinch-zoom on tappable targets. */
.tierTab,.carCard,.colorRow > *,.setOpt,.startBtn,.selBack,
#worldIndicator,.selM-tab,.selM-chip,.selM-ctaBtn,.selM-iconBtn,
.selM-trackPill{
  touch-action:manipulation;
}

/* ── D4 — micro-interactions + state polish ────────────────────────
   All animations use --duration-micro/--easing-out tokens so
   prefers-reduced-motion automatically shortens them to .01s.
   Hover-states gated on @media(hover:hover) so touch devices do
   NOT trigger them on a transient finger-down (per addendum P9). */

/* Primary CTA — START RACE button (desktop). Press animation = compress
   to 98% scale + slight inset glow, snaps back on release. */
.startBtn{
  transition:transform var(--duration-micro) var(--easing-out),
             box-shadow var(--duration-micro) var(--easing-out),
             filter var(--duration-micro) var(--easing-out);
}
@media(hover:hover){
  .startBtn:hover{filter:brightness(1.08);transform:translateY(-1px)}
}
.startBtn:active{transform:scale(.98)}

/* Mobile CTA — same press feedback but stronger because thumb-tap
   benefits from larger compression cue. */
.selM-ctaBtn{
  transition:transform var(--duration-micro) var(--easing-out),
             box-shadow var(--duration-micro) var(--easing-out);
}
.selM-ctaBtn:active{transform:scale(.97)}

/* Setting toggles (LAPS / DIFFICULTY / MODE) — press feedback */
.setOpt{
  transition:background var(--duration-micro) var(--easing-out),
             color var(--duration-micro) var(--easing-out),
             transform var(--duration-micro) var(--easing-out);
}
.setOpt:active{transform:scale(.96)}
@media(hover:hover){
  .setOpt:not(.setOptSel):hover{background:rgba(255,255,255,.04);color:#c9b9ff}
}

/* Mobile chips — same press feedback */
.selM-chip{
  transition:transform var(--duration-micro) var(--easing-out),
             background var(--duration-micro) var(--easing-out);
}
.selM-chip:active{transform:scale(.95)}

/* Garage card lift on desktop hover (subtle, not distracting) */
@media(hover:hover) and (min-width:900px){
  .carCard:not(.locked):hover{
    transform:translateX(2px);
    box-shadow:inset 4px 0 12px -4px rgba(255,58,140,.18)
  }
  .carCard{
    transition:background var(--duration-micro) var(--easing-out),
               border-left-width var(--duration-micro) var(--easing-out),
               box-shadow var(--duration-medium) var(--easing-out),
               transform var(--duration-micro) var(--easing-out);
  }
}

/* Tier tab press feedback */
.tierTab{
  transition:color var(--duration-micro) var(--easing-out),
             border-color var(--duration-micro) var(--easing-out),
             text-shadow var(--duration-micro) var(--easing-out);
}
.tierTab:active{transform:scale(.96)}

/* Color swatch press feedback (color customisation row) */
.colorRow > *{
  transition:transform var(--duration-micro) var(--easing-out),
             box-shadow var(--duration-micro) var(--easing-out);
}
.colorRow > *:active{transform:scale(.92)}

/* Empty/loading skeleton — shimmer placeholder for the preview canvas
   while bakeAllCarSnapshots is mid-flight. Used by select.js if it
   adds .preview-loading to .prevCanvasWrap during bake. */
.prevCanvasWrap.preview-loading::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
  background-size:200% 100%;
  animation:previewShimmer 1.4s ease-in-out infinite;
  z-index:2;pointer-events:none;
}
@keyframes previewShimmer{
  0%{background-position:-100% 0}
  100%{background-position:200% 0}
}
@media(prefers-reduced-motion:reduce){
  .prevCanvasWrap.preview-loading::before{animation:none}
}

/* Disabled state for the START RACE button when no playable selection
   (e.g. all locked, or selected but unaffordable). Wired via JS by
   adding .disabled or [aria-disabled="true"]. */
.startBtn[aria-disabled="true"],
.startBtn.disabled,
.selM-ctaBtn[aria-disabled="true"],
.selM-ctaBtn.disabled{
  opacity:.55;cursor:not-allowed;filter:saturate(.5);
}
.startBtn[aria-disabled="true"]:active,
.startBtn.disabled:active,
.selM-ctaBtn[aria-disabled="true"]:active,
.selM-ctaBtn.disabled:active{transform:none}

/* ─────────────────────────────────────────────────────────────────────────
   Round-8 (PR #126) — Car-picker DESKTOP polish: hero typography,
   bigger preview chrome, glass-blur right panel, startBtn shimmer.
   ≥769px only — mobile stays on its existing tile-grid layout.
   ───────────────────────────────────────────────────────────────────────── */
@media (min-width:769px){
  /* Tier-tabs polish: pill style + magenta highlight, sit just above
     the carGrid as a horizontal segmented control. */
  .garageHeader{padding:12px 14px 10px}
  .tierTab{
    border-radius:10px;border-bottom:none;
    padding:6px 9px;color:#8a78b8;
    transition:color .15s,background .15s,border-color .15s,box-shadow .15s;
    border:1px solid transparent
  }
  .tierTab:hover{background:rgba(255,58,140,.05);color:#fff}
  .tierTabSel{
    background:rgba(255,58,140,.12);color:#ff3a8c;
    border-color:rgba(255,58,140,.5);
    text-shadow:0 0 10px rgba(255,58,140,.6);
    box-shadow:0 0 12px rgba(255,58,140,.25)
  }
  /* HERO PREVIEW HEADER — bigger, dramatic, gradient text on the model. */
  .prevHeader{margin:0 auto 4px}
  .prevBrandLine{font-size:13px;letter-spacing:6px;color:#a89bc7}
  .prevModelLine{
    font-family:'Orbitron',sans-serif;font-weight:900;
    font-size:clamp(34px,3.4vw,52px);
    letter-spacing:.06em;line-height:1.05;
    background:linear-gradient(168deg,#ffffff 0%,#cc88ff 45%,#ff44dd 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 0 14px rgba(204,68,255,.55)) drop-shadow(0 0 32px rgba(255,68,221,.25))
  }
  .prevSpecsLine{font-size:12px;letter-spacing:3px;color:#a89bc7;margin-top:4px}
  /* Bigger corner brackets on the preview viewport */
  .prevCorner{width:24px;height:24px;border-width:2.5px}
  .prevCornerTL{border-top-left-radius:6px}
  .prevCornerTR{border-top-right-radius:6px}
  .prevCornerBL{border-bottom-left-radius:6px}
  .prevCornerBR{border-bottom-right-radius:6px}
  /* COLOR ROW — bigger swatches with brighter selection ring. */
  .colorRow{gap:12px;padding:8px 14px;border-radius:18px}
  .colorDot{width:22px;height:22px}
  /* STAT CARDS — glass-blur container per card + gradient fill bars. */
  .statCard{
    background:rgba(20,10,40,.55);
    border:1px solid rgba(180,80,255,.18);
    border-radius:10px;padding:9px 12px 10px;
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)
  }
  .statCardLbl{font-size:9px;letter-spacing:3px}
  .statCardVal{font-size:16px;font-weight:700}
  .statCardFill{box-shadow:0 0 8px currentColor}
  /* RIGHT panel — glass-blur segments + gradient border-image on rival. */
  .selRight{padding:18px 20px;gap:14px;background:linear-gradient(180deg,rgba(15,8,30,.55) 0%,rgba(8,4,20,.45) 100%);border-left:1px solid rgba(180,80,255,.18)}
  .setSeg{
    background:rgba(20,10,40,.55);
    border:1px solid rgba(180,80,255,.18);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    padding:11px 13px 10px;border-radius:12px
  }
  .setLbl{font-size:10px;letter-spacing:3.5px;color:#a89bc7}
  .setOpt{font-size:13px;padding:8px 0;font-weight:600}
  .setOptSel{
    color:#ff3a8c;text-shadow:0 0 12px rgba(255,58,140,.65);
    background:rgba(255,58,140,.08);
    border-bottom-color:#ff3a8c
  }
  .rivalSeg{
    background:rgba(20,10,40,.55);
    border:1px solid transparent;
    border-image:linear-gradient(90deg,#00eeff,#cc44ff,#ff44dd) 1;
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    padding:12px 14px 13px;border-radius:0
  }
  .rivalIcon{width:44px;height:44px;font-size:22px;border-radius:10px;background:radial-gradient(circle,rgba(204,68,255,.3),rgba(255,58,140,.08));border-color:rgba(204,68,255,.45)}
  .rivalCar{font-size:13px;color:#fff}
  .rivalTime{font-size:13px;color:#ffd700;text-shadow:0 0 8px rgba(255,215,0,.45)}
  /* START RACE — neon shimmer sweep across the gradient. */
  .startBtn{
    font-size:16px;letter-spacing:3px;padding:14px 0 12px;
    background:linear-gradient(90deg,#8833cc 0%,#ff3388 35%,#ff6600 70%,#ff3388 100%);
    background-size:200% 100%;
    box-shadow:0 0 28px rgba(204,68,255,.45),0 8px 24px rgba(0,0,0,.4);
    animation:startBtnShimmer 4s linear infinite
  }
  @keyframes startBtnShimmer{
    0%{background-position:0% 0%}
    100%{background-position:200% 0%}
  }
  .startBtnArrow{font-size:14px}
  .raceSummary{font-size:11px;letter-spacing:2px;color:rgba(255,255,255,.85)}
}
@media (min-width:769px) and (prefers-reduced-motion:reduce){
  .startBtn{animation:none!important;background-position:0% 0%!important}
}