/* =========================================================
   Dust & Spokes — desert bike park
   Light UI, cream panels, ink type, orange accents.
   ========================================================= */

:root{
  --cream:      #FFF3DE;
  --cream-2:    #F8E7CB;
  --cream-3:    #EFD9B6;
  --ink:        #1D1B24;
  --ink-soft:   #5D5568;
  --ink-faint:  #8C8496;
  --orange:     #F08A3C;
  --orange-dk:  #D9691F;
  --teal:       #2E7C8F;
  --magenta:    #E4576B;
  --sand:       #E8C89A;
  --line:       rgba(29,27,36,.14);
  --line-2:     rgba(29,27,36,.08);
  --r:          18px;
  --r-sm:       12px;
  --shadow:     0 10px 30px -12px rgba(29,27,36,.45);
  --shadow-sm:  0 4px 14px -8px rgba(29,27,36,.5);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html,body{
  height:100%; margin:0;
  background:#2B2430;
  color:var(--ink);
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  overscroll-behavior:none;
}
body{ overflow:hidden; }

button, input{ font-family:inherit; }
button{ user-select:none; -webkit-user-select:none; cursor:pointer; border:0; background:none; color:inherit; }
.hidden{ display:none !important; }
[hidden]{ display:none !important; }
.muted{ color:var(--ink-soft); }

/* ================= APP SHELL ================= */
#app{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  height:100dvh;
  width:100%;
  background:var(--cream);
  overflow:hidden;
}

/* ================= HUD ================= */
.hud{
  flex:0 0 auto;
  background:var(--cream);
  border-bottom:2px solid var(--line-2);
  padding:8px 12px;
  z-index:30;
}
.hud-row{
  display:flex; align-items:center; gap:10px;
  min-height:38px;
}
#hudMenu{ justify-content:space-between; }

.brand{ display:flex; align-items:center; gap:8px; min-width:0; }
.brand-mark{
  width:16px; height:16px; flex:0 0 auto;
  border-radius:5px;
  background:linear-gradient(140deg,var(--orange),var(--magenta));
  box-shadow:inset 0 0 0 2px rgba(255,243,222,.65);
}
.brand-t{
  font-family:'Bricolage Grotesque', 'Inter', sans-serif;
  font-weight:800; font-size:15px; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hud-chips{ display:flex; gap:6px; flex:0 0 auto; }
.chip{
  display:flex; flex-direction:column; align-items:flex-end; line-height:1;
  background:var(--cream-2);
  border:1.5px solid var(--line-2);
  border-radius:10px; padding:4px 9px; min-width:52px;
}
.chip b{ font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
.chip i{
  font-style:normal; font-size:8.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint); margin-top:3px;
}

#hudRide{ justify-content:space-between; gap:6px; }
.rs{
  display:flex; flex-direction:column; align-items:center; line-height:1;
  flex:1 1 0; min-width:0;
  background:var(--cream-2);
  border:1.5px solid var(--line-2);
  border-radius:10px; padding:4px 2px 5px;
}
.rs i{
  font-style:normal; font-size:8px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-faint);
}
.rs b{
  font-size:14px; font-weight:700; margin-top:3px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.c-combo{ color:var(--orange-dk); }
.c-combo.bump{ animation:combobump .28s ease-out; }
@keyframes combobump{ 0%{ transform:scale(1);} 45%{ transform:scale(1.3);} 100%{ transform:scale(1);} }

.pause-btn{
  flex:0 0 auto; width:34px; height:34px; border-radius:11px;
  background:var(--ink); color:var(--cream);
  display:grid; place-items:center;
  transition:transform .12s ease;
}
.pause-btn:active{ transform:scale(.92); }

/* ================= STAGE ================= */
.stage{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  background:linear-gradient(180deg,#2E7C8F 0%, #7C6A8C 62%, #A8909E 100%);
}
#scene{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  touch-action:none;
}
.vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 45%, transparent 45%, rgba(29,27,36,.30) 100%);
  z-index:2;
}

.countdown{
  position:absolute; inset:0; z-index:20;
  display:grid; place-items:center;
  pointer-events:none;
  font-family:'Bricolage Grotesque','Inter',sans-serif;
  font-weight:800; font-size:88px; color:var(--cream);
  text-shadow:0 6px 0 rgba(29,27,36,.35), 0 0 40px rgba(240,138,60,.6);
  animation:cdpop .4s ease-out;
}
@keyframes cdpop{ from{ transform:scale(1.7); opacity:0; } to{ transform:scale(1); opacity:1; } }

.toast{
  position:absolute; left:50%; top:14px; transform:translate(-50%,-16px);
  z-index:22;
  background:var(--ink); color:var(--cream);
  font-size:12px; font-weight:600; letter-spacing:.04em;
  padding:8px 16px; border-radius:999px;
  opacity:0; pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
  white-space:nowrap; max-width:calc(100% - 32px); overflow:hidden; text-overflow:ellipsis;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ================= SCREENS ================= */
.screen{
  position:absolute; inset:0; z-index:40;
  display:flex;
  padding:14px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
/* a screen always wins over the HUD / control dock while it is open */
.screen:not(.hidden){ pointer-events:auto; }
.screen-bottom{ align-items:flex-end; }
.screen-center{ align-items:center; justify-content:center; }

.panel{
  background:var(--cream);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:20px;
  width:100%;
  max-width:520px;
  margin:0 auto;
  border:1.5px solid rgba(29,27,36,.08);
  animation:panelin .26s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes panelin{ from{ transform:translateY(14px); opacity:0; } to{ transform:none; opacity:1; } }
.panel-narrow{ max-width:400px; }

.eyebrow{
  font-size:10px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--orange-dk);
  margin-bottom:6px;
}
.title{
  font-family:'Bricolage Grotesque','Inter',sans-serif;
  font-weight:800;
  font-size:clamp(30px, 9vw, 46px);
  line-height:.94;
  letter-spacing:-.03em;
  margin:0 0 8px;
  color:var(--ink);
}
.title .amp{ color:var(--orange); }
.tagline{
  margin:0 0 16px;
  font-size:13.5px; line-height:1.5; color:var(--ink-soft);
  max-width:34ch;
}
.panel-h{
  font-family:'Bricolage Grotesque','Inter',sans-serif;
  font-size:24px; font-weight:800; letter-spacing:-.02em;
  margin:0 0 8px;
}

/* code row */
.code-row{
  display:flex; align-items:stretch; gap:8px; margin-bottom:14px;
}
.code-box{
  flex:1 1 auto;
  display:flex; align-items:center; gap:10px;
  background:var(--cream-2);
  border:1.5px dashed rgba(29,27,36,.22);
  border-radius:var(--r-sm);
  padding:8px 12px;
  min-width:0;
}
.code-label{
  font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:700; white-space:nowrap;
}
.code-value{
  font-family:'Bricolage Grotesque','Inter',sans-serif;
  font-size:20px; font-weight:800; letter-spacing:.14em;
  color:var(--ink);
  margin-left:auto;
  white-space:nowrap;
}

/* actions */
.actions{
  display:flex; gap:8px; flex-wrap:wrap;
}
.actions-col{ flex-direction:column; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:46px; padding:0 18px;
  border-radius:14px;
  font-size:14.5px; font-weight:700;
  letter-spacing:-.01em;
  background:var(--cream-2); color:var(--ink);
  border:1.5px solid var(--line);
  transition:transform .12s ease, background .16s ease, box-shadow .16s ease;
  flex:1 1 auto;
}
.btn:active{ transform:scale(.97); }
.btn-primary{
  background:linear-gradient(180deg, var(--orange) 0%, #E87C2A 100%);
  color:#2A1405;
  border-color:rgba(160,80,10,.35);
  box-shadow:0 4px 0 0 var(--orange-dk), 0 10px 20px -12px rgba(217,105,31,.9);
}
.btn-primary:active{ box-shadow:0 1px 0 0 var(--orange-dk); transform:translateY(2px) scale(.99); }
.btn-ghost{ background:var(--cream); }
.btn-ghost:hover{ background:var(--cream-2); }
.btn-small, .btn-sm{ min-height:42px; font-size:13px; padding:0 13px; flex:0 0 auto; }
.btn-wide{ flex:1 1 100%; }

.linkbtn{
  font-size:12.5px; font-weight:600; color:var(--teal);
  text-decoration:underline; text-underline-offset:3px;
  padding:6px 2px;
}
.title-foot{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:14px; font-size:12px; color:var(--ink-soft);
}
.dot{ color:var(--ink-faint); }

/* ================= LOCKER ================= */
.screen-locker{
  align-items:flex-end;
  padding:0;
  overflow:hidden;
}
.locker-sheet{
  width:100%;
  max-height:66%;
  display:flex; flex-direction:column;
  background:var(--cream);
  border-radius:22px 22px 0 0;
  box-shadow:0 -14px 40px -14px rgba(29,27,36,.5);
  border-top:1.5px solid rgba(29,27,36,.1);
  animation:sheetin .3s cubic-bezier(.2,.9,.3,1.05);
}
@keyframes sheetin{ from{ transform:translateY(40px); opacity:0; } to{ transform:none; opacity:1; } }
.locker-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 8px;
}
.locker-head h2{
  font-family:'Bricolage Grotesque','Inter',sans-serif;
  font-size:20px; font-weight:800; margin:0; letter-spacing:-.02em;
}
.icon-btn{
  width:38px; height:38px; border-radius:12px;
  display:grid; place-items:center;
  background:var(--cream-2); color:var(--ink);
  transition:transform .12s ease, background .16s ease;
}
.icon-btn:active{ transform:scale(.92); }
.tabs{
  display:flex; gap:6px; padding:0 16px 10px;
}
.tab{
  flex:1 1 0; min-height:40px; border-radius:12px;
  font-size:13px; font-weight:700;
  background:var(--cream-2); color:var(--ink-soft);
  border:1.5px solid transparent;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.tab.is-on{
  background:var(--ink); color:var(--cream); border-color:var(--ink);
}
.locker-body{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:0 16px 20px;
  flex:1 1 auto;
}
.opt{ margin-bottom:14px; }
.opt-k{
  display:block; font-size:9.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:7px;
}
.swatches{ display:flex; gap:8px; flex-wrap:wrap; }
.sw{
  width:40px; height:40px; border-radius:12px;
  border:2.5px solid transparent;
  box-shadow:inset 0 0 0 1.5px rgba(29,27,36,.16);
  transition:transform .12s ease, border-color .16s ease;
  position:relative;
}
.sw:active{ transform:scale(.92); }
.sw.is-on{
  border-color:var(--ink);
  transform:translateY(-2px);
  box-shadow:inset 0 0 0 1.5px rgba(29,27,36,.16), 0 6px 12px -6px rgba(29,27,36,.5);
}
.sw-chip{
  width:auto; height:38px; padding:0 13px;
  display:inline-flex; align-items:center;
  font-size:12px; font-weight:700;
  border-radius:11px;
  background:var(--cream-2); color:var(--ink-soft);
  border:2px solid transparent;
}
.sw-chip.is-on{ background:var(--ink); color:var(--cream); border-color:var(--ink); }

/* bike cards */
.bike-card{
  display:flex; gap:12px; align-items:center;
  background:var(--cream-2);
  border:2px solid transparent;
  border-radius:16px;
  padding:12px;
  margin-bottom:10px;
  transition:border-color .18s ease, background .18s ease;
}
.bike-card.is-on{ border-color:var(--ink); background:#fff; }
.bike-dot{
  width:44px; height:44px; border-radius:13px; flex:0 0 auto;
  box-shadow:inset 0 -6px 0 rgba(0,0,0,.16), inset 0 0 0 2px rgba(255,255,255,.25);
}
.bike-main{ flex:1 1 auto; min-width:0; }
.bike-name{
  font-family:'Bricolage Grotesque','Inter',sans-serif;
  font-size:15px; font-weight:800; letter-spacing:-.01em;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.bike-desc{ font-size:11.5px; color:var(--ink-soft); margin-top:2px; }
.bars{ display:flex; gap:10px; margin-top:8px; flex-wrap:wrap; }
.bar{ flex:1 1 60px; min-width:56px; }
.bar i{
  display:block; font-style:normal; font-size:8px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:3px;
}
.bar-track{
  height:6px; border-radius:99px; background:rgba(29,27,36,.12); overflow:hidden;
}
.bar-fill{
  height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--orange),var(--magenta));
  transition:width .3s ease;
}
.bike-buy{
  flex:0 0 auto; min-height:42px; padding:0 14px;
  border-radius:12px; font-size:12.5px; font-weight:800;
  background:var(--ink); color:var(--cream);
  display:inline-flex; align-items:center; gap:5px;
  transition:transform .12s ease, opacity .16s ease;
}
.bike-buy:active{ transform:scale(.95); }
.bike-buy.is-owned{ background:var(--cream-3); color:var(--ink); }
.bike-buy.is-equipped{ background:var(--teal); color:var(--cream); }
.bike-buy:disabled{ opacity:.45; }
.tagpill{
  font-size:8.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 6px; border-radius:6px;
  background:var(--orange); color:#2A1405;
}

/* ================= CODE ENTRY ================= */
.code-input{
  width:100%; margin-top:12px;
  height:64px;
  text-align:center;
  font-family:'Bricolage Grotesque','Inter',sans-serif;
  font-size:30px; font-weight:800; letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--cream-2);
  border:2px solid rgba(29,27,36,.16);
  border-radius:14px;
  outline:none;
  transition:border-color .16s ease, background .16s ease;
}
.code-input::placeholder{ color:rgba(29,27,36,.22); letter-spacing:.3em; }
.code-input:focus{ border-color:var(--orange); background:#fff; }
.code-msg{
  min-height:18px; margin-top:8px;
  font-size:12px; font-weight:600; color:var(--magenta);
}

/* ================= RESULTS ================= */
.res-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  margin:14px 0;
}
.res-stat{
  background:var(--cream-2); border-radius:13px;
  padding:10px 12px;
  display:flex; flex-direction:column; gap:2px;
}
.res-stat i{
  font-style:normal; font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint); font-weight:700;
}
.res-stat b{
  font-family:'Bricolage Grotesque','Inter',sans-serif;
  font-size:22px; font-weight:800; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.ghost-line{
  font-size:12.5px; line-height:1.45; color:var(--ink-soft);
  background:rgba(46,124,143,.10);
  border-left:3px solid var(--teal);
  border-radius:0 10px 10px 0;
  padding:9px 12px;
  margin-bottom:14px;
}
.ghost-line b{ color:var(--teal); }

/* ================= DOCK / CONTROLS ================= */
.dock{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:8px;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom, 0px) * 0);
  background:var(--cream);
  border-top:2px solid var(--line-2);
  z-index:30;
}
.dock-group{ display:flex; align-items:center; gap:8px; }

.pad{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px;
  border-radius:20px;
  background:var(--ink); color:var(--cream);
  box-shadow:0 4px 0 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.16);
  transition:transform .09s ease, box-shadow .09s ease, background .12s ease;
  touch-action:none;
}
.pad:active, .pad.is-down{
  transform:translateY(3px);
  box-shadow:0 1px 0 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
}
.pad svg{ width:26px; height:26px; }
.pad span{
  font-size:8.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  line-height:1;
}
.pad-steer{ width:66px; height:66px; border-radius:22px; }
.pad-steer svg{ width:30px; height:30px; }
.pad-small{
  width:56px; height:52px;
  background:var(--cream-2); color:var(--ink);
  box-shadow:0 4px 0 0 rgba(29,27,36,.22), inset 0 0 0 1.5px rgba(29,27,36,.10);
}
.pad-small:active, .pad-small.is-down{
  box-shadow:0 1px 0 0 rgba(29,27,36,.22), inset 0 0 0 1.5px rgba(29,27,36,.10);
}
.pad-small svg{ width:20px; height:20px; }
.pad-jump{
  width:74px; height:74px; border-radius:50%;
  background:linear-gradient(180deg, var(--orange) 0%, #E87C2A 100%);
  color:#2A1405;
  box-shadow:0 5px 0 0 var(--orange-dk), 0 10px 18px -10px rgba(217,105,31,.9), inset 0 1px 0 rgba(255,255,255,.4);
}
.pad-jump:active, .pad-jump.is-down{
  transform:translateY(4px);
  box-shadow:0 1px 0 0 var(--orange-dk), inset 0 1px 0 rgba(255,255,255,.3);
}
.pad-jump svg{ width:30px; height:30px; }

/* focus ring */
button:focus-visible, input:focus-visible{
  outline:3px solid var(--teal);
  outline-offset:2px;
}

/* ================= RESPONSIVE ================= */
@media (min-width:720px){
  .screen-center{ align-items:center; }
  .panel{ padding:26px; }
  .screen-locker{
    align-items:center;
    justify-content:flex-end;
    padding:16px;
    overflow:visible;
  }
  .locker-sheet{
    width:400px;
    max-height:calc(100% - 24px);
    border-radius:22px;
    margin-right:0;
    margin-left:auto;
    border:1.5px solid rgba(29,27,36,.1);
  }
  .locker-body{ padding-bottom:24px; }
  .pad-steer{ width:72px; height:72px; }
  .pad-jump{ width:82px; height:82px; }
  .pad-small{ width:64px; height:56px; }
  .dock{ padding:10px 18px; }
}

@media (max-height:520px){
  .panel{ padding:14px; }
  .title{ font-size:26px; }
  .tagline{ display:none; }
  .code-row{ margin-bottom:10px; }
  .locker-sheet{ max-height:82%; }
  .res-grid{ margin:8px 0; }
}

@media (max-width:360px){
  .pad-steer{ width:58px; height:60px; border-radius:19px; }
  .pad-small{ width:50px; height:48px; }
  .pad-jump{ width:66px; height:66px; }
  .dock-group{ gap:6px; }
  .dock{ gap:4px; padding-left:7px; padding-right:7px; }
  .chip{ min-width:46px; padding:3px 7px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}