/* stand.css — exhibition build, ReadyMembership brand */

:root{
  --purple:#3C1642; --purpleDeep:#1C0A1E; --purpleVivid:#751F82;
  --teal:#4ED3AF; --tealMed:#71DCBF; --mint:#DDF9F3; --mintPale:#C5F4EA; --tealDark:#38967D;
  --orange:#F47B20; --lavender:#9A86BE; --lavenderPale:#E2DCE3; --white:#fff;
  --font:'Manjari','Trebuchet MS',system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden}
body{
  font-family:var(--font);color:var(--white);
  background:radial-gradient(120% 80% at 50% -10%, #5a2266 0%, var(--purple) 45%, var(--purpleDeep) 100%);
  min-height:100%;
}
/* Cabinet vs theatre.
   Menus keep the heading, promo cards and footer on a 1080p screen — measured
   at 1920×1080 the old 120px chrome left the stage 960px tall and shoved
   120px of footer below the fold. --chrome is that reserved strip.
   Once a run starts, .playing hides the chrome and the stage fills the frame. */
:root{--chrome:268px}
.wrap{width:100%;max-width:none;padding:12px clamp(12px,2vw,26px) 12px;
  display:flex;flex-direction:column;gap:10px;min-height:100dvh;box-sizing:border-box}
.hidden{display:none !important}

/* ---------- brand chrome: one compact bar ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.topbar .logo{height:30px;width:auto;display:block;flex:none}
.topbar .tag{font-size:12px;color:var(--tealMed);font-weight:700;text-align:right;flex:none}
.topbar .tag span{display:block;color:var(--lavender);font-weight:400;font-size:11px}
.titleline{display:flex;align-items:center;gap:12px;flex:1 1 auto;justify-content:center;min-width:0}

.eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--purple);background:var(--teal);padding:4px 10px;
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
h1.title{margin:0;font-size:clamp(20px,3.4vw,30px);font-weight:700;line-height:1;
  font-style:italic;letter-spacing:-.01em;text-transform:uppercase}
h1.title b{color:var(--teal)}
.sub{margin:0 0 4px;color:var(--lavenderPale);font-size:clamp(13px,3vw,16px);grid-column:1/-1}
.sub b{color:var(--tealMed);font-weight:700}

/* ---------- stage ---------- */
.stagewrap{display:grid;place-items:center;width:100%;flex:1 1 auto;min-height:0}
.stage{position:relative;overflow:hidden;background:var(--purpleDeep);
  width:min(100%, calc((100dvh - var(--chrome)) * 16 / 9));
  aspect-ratio:16/9;
  border-radius:14px;
  box-shadow:0 0 0 3px var(--teal),0 0 0 10px rgba(78,211,175,.12),0 26px 60px rgba(0,0,0,.6)}
@media (max-width:900px){:root{--chrome:232px}}

/* In-run: the cabinet goes away and the playfield owns the viewport. */
body.playing{overflow:hidden}
body.playing .wrap{padding:0;gap:0;min-height:100dvh}
body.playing .topbar,
body.playing .promo,
body.playing .foot{display:none}
body.playing .stagewrap{flex:none;height:100dvh}
body.playing .stage{width:100%;height:100dvh;max-height:100dvh;aspect-ratio:auto;
  border-radius:0;box-shadow:none}
/* The buffer is sized to the element in main.js, so this is normally 1:1 and
   there is nothing to resample. `pixelated` used to live here and was the
   cause of the picture crawling: at a fractional scale it makes some source
   pixels two screen pixels wide and some three, and the pattern shifts as the
   image moves. Smooth resampling is the safer default for the moments when the
   two are briefly out of step, such as mid window-resize. The chunky look is
   preserved inside the buffer by imageSmoothingEnabled = false. */
canvas{display:block;width:100%;height:auto;aspect-ratio:16/9}
body.playing canvas{height:100%;aspect-ratio:auto}
.scanlines{position:absolute;inset:0;pointer-events:none;opacity:.22;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}

/* ---------- HUD ---------- */
.hud{position:absolute;inset:0;pointer-events:none;font-weight:700}
.chip{position:absolute;background:rgba(60,22,66,.86);color:#fff;padding:7px 12px;border-radius:14px;
  font-size:clamp(12px,2.4vw,15px);line-height:1;display:flex;gap:8px;align-items:center;
  box-shadow:0 3px 0 rgba(0,0,0,.3),inset 0 0 0 1px rgba(113,220,191,.35)}
.chip .k{color:var(--tealMed);font-size:.72em;letter-spacing:.06em;text-transform:uppercase}
.chip .v{font-weight:700;font-size:1.25em;min-width:1ch;text-align:right;font-variant-numeric:tabular-nums}
.chip .of{color:var(--lavender);font-size:.74em;margin-left:-4px}
#lapChip{top:12px;left:12px}
.soundcue{position:absolute;left:50%;top:20%;transform:translateX(-50%);pointer-events:auto;
  z-index:6;font-size:clamp(14px,3.2vw,18px);padding:12px 22px}
body.playing #lapChip{top:44px}

.mark{position:absolute;top:10px;left:12px;z-index:2;display:flex;align-items:center;gap:8px;
  pointer-events:none;opacity:.88;filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
.mark img{height:18px;width:auto;display:block}
.mark span{font-size:13px;font-weight:700;font-style:italic;letter-spacing:.02em;
  text-transform:uppercase;color:#fff;line-height:1}
.mark span b{color:var(--teal)}
#curChip{top:12px;left:50%;transform:translateX(-50%);background:var(--teal)}
#curChip .k{color:rgba(60,22,66,.75)} #curChip .v{color:var(--purple)}
#bestChip{top:12px;right:12px}
#spdChip{bottom:12px;right:12px;flex-wrap:wrap;max-width:150px}
#padChip{bottom:12px;left:50%;transform:translateX(-50%);background:var(--teal);color:var(--purple)}
#padChip .k{color:rgba(60,22,66,.75)} #padChip .v{color:var(--purple)}

.minimap{position:absolute;top:52px;right:12px;width:108px;height:84px;
  background:rgba(28,10,30,.72);border-radius:12px;padding:6px;
  box-shadow:0 3px 0 rgba(0,0,0,.3),inset 0 0 0 1px rgba(113,220,191,.4);
  pointer-events:none}
.minimap path#mapTrack{stroke:rgba(221,249,243,.35);stroke-width:3.2;stroke-linejoin:round;stroke-linecap:round}
.minimap path#mapProg{stroke:var(--teal);stroke-width:3.2;stroke-linejoin:round;stroke-linecap:round}
.minimap line#mapSF{stroke:var(--orange);stroke-width:1.8}
.minimap circle#mapCar{fill:var(--orange);stroke:#fff;stroke-width:.7}
#spdBar{width:100%;height:8px;border-radius:6px;background:rgba(255,255,255,.22);overflow:hidden}
#spdFill{height:100%;width:0;background:linear-gradient(90deg,var(--tealMed),var(--teal),var(--orange));transition:width .08s linear}

/* Sized to be read from across a stand, not from a desk. */
.laps{position:absolute;bottom:12px;left:12px;display:flex;gap:7px}
.laps i{min-width:30px;height:24px;padding:0 8px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-style:normal;font-weight:700;font-size:14px;line-height:1;
  color:rgba(255,255,255,.55);background:rgba(28,10,30,.55);
  box-shadow:inset 0 0 0 2px rgba(113,220,191,.35)}
.laps i.good{background:var(--teal);color:#1C0A1E;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.laps i.void{background:var(--orange);color:#1C0A1E;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.laps i.live{background:rgba(113,220,191,.30);color:#fff;
  box-shadow:inset 0 0 0 2px var(--teal);animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}

.flash{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font-size:clamp(20px,6vw,38px);
  font-weight:700;color:#fff;text-shadow:0 3px 0 var(--purpleVivid),0 5px 0 rgba(0,0,0,.25);opacity:0;
  pointer-events:none;transition:opacity .18s;white-space:nowrap;text-align:center}
.flash.show{opacity:1}
.flash.void{color:var(--orange)}

.lights{position:absolute;left:50%;top:34%;transform:translateX(-50%);display:flex;gap:10px}
.lights i{width:clamp(22px,5vw,34px);height:clamp(22px,5vw,34px);border-radius:50%;
  background:rgba(0,0,0,.55);box-shadow:inset 0 0 0 3px rgba(255,255,255,.18)}
.lights i.on{background:var(--orange);box-shadow:0 0 18px rgba(244,123,32,.8),inset 0 0 0 3px rgba(255,255,255,.25)}
.lights.green i{background:var(--teal);box-shadow:0 0 18px rgba(78,211,175,.9),inset 0 0 0 3px rgba(255,255,255,.25)}

/* ---------- overlays ---------- */
.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:13px;padding:22px;color:#fff;overflow:auto;
  background:radial-gradient(120% 120% at 50% 25%,rgba(28,10,30,.62),rgba(28,10,30,.93));backdrop-filter:blur(3px)}
#ovResult{justify-content:flex-start;overflow:hidden;gap:10px;padding:16px 18px 14px}
#ovResult .result-main{flex:1 1 auto;min-height:0;width:100%;overflow:auto;
  display:flex;flex-direction:column;align-items:center;gap:11px}
#ovResult .result-actions{flex:none;width:100%;padding-top:4px}
.btn.pad-sel{box-shadow:0 0 0 3px #fff,0 5px 0 var(--tealDark),0 8px 16px rgba(0,0,0,.4)}
.overlay .miniLogo{height:24px;opacity:.95}
.overlay h2{margin:0;font-size:clamp(22px,6vw,38px);text-shadow:0 3px 0 var(--purpleVivid),0 6px 0 rgba(0,0,0,.25)}
.overlay p{margin:0;max-width:520px;line-height:1.5;font-size:clamp(13px,3vw,15px);color:var(--lavenderPale)}
.overlay p b{color:var(--teal)}
.overlay p.hint{color:var(--lavender);font-size:12px}

.btn{pointer-events:auto;cursor:pointer;border:0;font-family:var(--font);font-weight:700;
  font-size:clamp(15px,3.6vw,19px);color:var(--purple);background:var(--teal);padding:13px 26px;border-radius:14px;
  box-shadow:0 5px 0 var(--tealDark),0 8px 16px rgba(0,0,0,.4);transition:transform .06s,box-shadow .06s}
.btn.big{font-size:clamp(17px,4.2vw,23px);padding:16px 34px}
.btn.ghost{background:transparent;color:var(--tealMed);box-shadow:inset 0 0 0 2px rgba(113,220,191,.5)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--tealDark),0 4px 8px rgba(0,0,0,.4)}
.btn:disabled{opacity:.5;cursor:default}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

.nameinput{pointer-events:auto;font-family:var(--font);font-weight:700;text-align:center;text-transform:uppercase;
  font-size:clamp(22px,6vw,34px);letter-spacing:.14em;width:min(340px,80%);padding:10px 14px;color:#fff;
  background:rgba(255,255,255,.08);border:2px solid rgba(113,220,191,.4);border-radius:14px;outline:none}
.nameinput:focus{border-color:var(--teal);background:rgba(78,211,175,.14)}
.nameinput::placeholder{color:var(--lavender);letter-spacing:.1em}
#gatePass{text-transform:none;letter-spacing:.12em}
.name-err{color:var(--orange)!important;min-height:1.2em;font-weight:700}

/* Arcade high-score name entry — shown when a pad is live. */
.namepad{width:min(420px,100%);display:flex;flex-direction:column;align-items:center;gap:10px}
.name-slots{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;width:100%}
.name-slots i{display:flex;align-items:center;justify-content:center;height:38px;
  border-radius:8px;background:rgba(20,8,22,.55);border:2px solid rgba(113,220,191,.28);
  font-size:20px;font-weight:700;letter-spacing:0;color:#fff}
.name-slots i.on{border-color:var(--teal);background:rgba(78,211,175,.16);box-shadow:0 0 0 2px rgba(78,211,175,.25)}
.name-slots i.empty{color:var(--lavender)}
.name-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;width:100%}
.name-key{pointer-events:auto;cursor:pointer;height:34px;border:0;border-radius:8px;
  background:rgba(255,255,255,.08);color:#fff;font-family:var(--font);font-weight:700;
  font-size:15px;letter-spacing:.02em;padding:0}
.name-key:hover{background:rgba(255,255,255,.16)}
.name-key.act{background:rgba(244,123,32,.22);color:var(--orange);box-shadow:inset 0 0 0 2px rgba(244,123,32,.55)}
.name-key.wide{grid-column:span 2;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.name-key.cur{background:var(--teal);color:var(--purple);box-shadow:0 3px 0 var(--tealDark)}
.returning{width:min(420px,100%);text-align:left}
.returning-row{display:flex;flex-wrap:wrap;gap:6px;max-height:76px;overflow:auto;justify-content:center}
.ret{pointer-events:auto;cursor:pointer;border:0;border-radius:10px;padding:6px 10px;
  background:rgba(255,255,255,.08);color:#fff;font-family:var(--font);font-weight:700;font-size:12px}
.ret.sel{background:var(--teal);color:var(--purple)}
.pad-on .nameinput{display:none}
.pad-on #driverHint b{color:var(--tealMed)}

.selfie{display:flex;align-items:center;gap:16px;max-width:440px;width:100%;
  background:rgba(113,220,191,.12);border:1px solid rgba(113,220,191,.35);border-radius:16px;padding:12px 14px;text-align:left}
.selfie-frame{width:132px;height:132px;flex:none;border-radius:14px;overflow:hidden;background:#140816;
  box-shadow:inset 0 0 0 1px rgba(113,220,191,.35)}
.selfie-frame video,.selfie-frame img{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);display:block}
.selfie strong{display:block;color:var(--teal);margin-bottom:4px}
.selfie p{margin:0 0 8px;color:var(--lavenderPale);font-size:13px}
.selfie .btnrow{margin:0;justify-content:flex-start}

.looks{max-width:520px;width:100%;text-align:left}
.disclaimer{margin:0 0 10px !important;font-size:12px !important;color:var(--lavenderPale) !important;max-width:none !important}

.claim{display:flex;align-items:center;gap:16px;max-width:440px;width:100%;
  background:rgba(113,220,191,.12);border:1px solid rgba(113,220,191,.35);border-radius:16px;padding:12px 14px;text-align:left}
.claim .qr{width:148px;height:148px;flex:none;background:#fff;border-radius:10px;padding:8px}
.claim .qr svg{width:100%;height:100%;display:block}
.claim strong{display:block;color:var(--teal);margin-bottom:4px}
.claim p{margin:0 0 6px;color:var(--lavenderPale);font-size:13px}
.claim a{color:var(--tealMed);font-size:12px;word-break:break-all}

.livwrap{margin:0}
.livtitle{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tealMed);margin-bottom:6px}
.liveries{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.liv{pointer-events:auto;cursor:pointer;width:152px;border:3px solid transparent;border-radius:18px;padding:12px 10px;
  background:rgba(255,255,255,.06);display:flex;flex-direction:column;align-items:center;gap:9px;
  transition:transform .08s,border-color .08s,background .08s}
.liv:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.liv.sel{border-color:var(--teal);background:rgba(78,211,175,.16)}
.liv .swatch{width:130px;height:46px;border-radius:12px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}
.livlogo{height:28px;width:auto;max-width:130px;object-fit:contain;
  background:#fff;padding:5px 8px;border-radius:8px;display:block}
.liv .swatch i{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:13px}
/* team names run long, so let them wrap rather than clip */
.liv small{font-size:12px;font-weight:600;color:#fff;line-height:1.2;text-align:center;overflow-wrap:anywhere}
.liv.sel small{color:var(--teal)}

.keys{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;font-size:13px}
.keys b{background:rgba(113,220,191,.18);padding:4px 9px;border-radius:8px;color:var(--tealMed)}

.padsetup{pointer-events:auto;width:min(420px,100%);text-align:left;
  background:rgba(113,220,191,.08);border:1px solid rgba(113,220,191,.28);
  border-radius:16px;padding:12px 14px 10px}
.padsetup-head{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.padsetup-head strong{color:var(--teal);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.padsetup-head span{color:var(--lavenderPale);font-size:12px;line-height:1.35}
.padsetup.live .padsetup-head strong{color:var(--tealMed)}
.padmeters{display:grid;gap:6px;margin-bottom:10px}
.padmeters label{display:grid;grid-template-columns:64px 1fr;gap:8px;align-items:center;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--lavender)}
.padmeters i{display:block;height:10px;border-radius:6px;background:rgba(255,255,255,.12);position:relative;overflow:hidden}
.padmeters i b{position:absolute;top:0;bottom:0;left:50%;width:0;background:var(--teal);
  border-radius:6px;transform-origin:left center}
.padmeters label:first-child i b{left:50%;background:var(--tealMed)}
.padmeters label:last-child i b{background:var(--orange)}
.padopts{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-bottom:8px}
.padopts .chk{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mint);
  cursor:pointer;user-select:none}
.padopts .chk input{accent-color:var(--teal)}
.padopts .dz{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--lavenderPale);margin-left:auto}
.padopts .dz input{width:90px;accent-color:var(--teal)}
.padsetup .hint{margin:0}

.final{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin:2px 0}
.final div{background:rgba(113,220,191,.12);border-radius:14px;padding:9px 15px;min-width:104px;
  box-shadow:inset 0 0 0 1px rgba(113,220,191,.25)}
.final small{display:block;color:var(--lavender);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.final strong{font-size:clamp(19px,5vw,28px);font-variant-numeric:tabular-nums}

/* ---------- leaderboard ---------- */
.lbwrap{width:100%;max-width:440px;background:rgba(113,220,191,.08);border:1px solid rgba(113,220,191,.25);
  border-radius:16px;padding:11px 13px;pointer-events:auto}
.lbhead{display:flex;justify-content:space-between;font-size:11px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--tealMed);margin-bottom:7px}
.lbhead .scope{color:var(--lavender)}
.lbrows{display:flex;flex-direction:column;gap:3px;max-height:168px;overflow:auto}
.lbrow{display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:center;font-size:14px;padding:4px 6px;border-radius:8px}
.lbrow .r{color:var(--lavender);font-weight:700;text-align:center}
.lbrow .n{color:#fff;display:flex;align-items:center;gap:7px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lbrow .n .dot{width:11px;height:11px;border-radius:3px;flex:none}
.lbrow .s{color:var(--teal);font-weight:700;font-variant-numeric:tabular-nums}
.lbrow.me{background:rgba(78,211,175,.2)}
.lbrow.podium .r{color:var(--orange)}
.lbempty{color:var(--lavender);font-size:13px;padding:8px 2px}

/* ---------- touch ---------- */
.touch{position:absolute;inset:0;pointer-events:none}
.pad{position:absolute;bottom:16px;width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.45);
  border:3px solid rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;font-size:30px;
  color:var(--purple);pointer-events:auto;user-select:none;box-shadow:0 4px 10px rgba(0,0,0,.3)}
.pad:active{background:rgba(255,255,255,.9)}
#tLeft{left:14px}#tRight{left:98px}
#tGas{right:14px;bottom:70px;background:rgba(78,211,175,.7)}
#tBrake{right:14px;background:rgba(244,123,32,.6)}
@media (hover:hover) and (pointer:fine){.touch{display:none}}

/* ---------- promo + foot ---------- */
.promo{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:0;flex:none}
.promo .card{background:rgba(113,220,191,.08);border:1px solid rgba(113,220,191,.28);border-radius:16px;padding:14px 16px}
.promo .card b{display:block;color:var(--teal);font-size:15px;margin-bottom:3px}
.promo .card span{color:var(--lavenderPale);font-size:13px;line-height:1.45}
@media (max-width:620px){.promo{grid-template-columns:1fr}}
.foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:0;flex-wrap:wrap;flex:none}
.foot .l{display:flex;align-items:center;gap:10px;color:var(--teal);font-size:13px}
.foot .l img{height:24px;width:24px}
.foot .r{color:var(--teal);font-size:12px;opacity:.85;max-width:340px;text-align:right}