:root{--red:#C8102E;--yellow:#FFD100;--black:#0A0A0A;--dark:#1A1A1A;--gd:#252525;--gl:#777;--white:#F0F0F0;}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Barlow',sans-serif;background:var(--dark);color:var(--white);height:100svh;overflow:hidden;display:flex;flex-direction:column;visibility:hidden;}
header{background:var(--dark);border-bottom:3px solid var(--red);height:auto;padding:8px 14px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.logo{display:flex;align-items:center;gap:8px;}
.badge{width:32px;height:32px;background:var(--red);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;}
.logo-text{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;letter-spacing:1.5px;text-transform:uppercase;line-height:1.1;}
.logo-sub{font-family:'Barlow Condensed',sans-serif;font-size:9px;letter-spacing:2px;color:var(--gl);text-transform:uppercase;}
.hdr-r{display:flex;gap:12px;}
.hstat{text-align:center;}
.hstat-l{font-family:'Barlow Condensed',sans-serif;font-size:9px;letter-spacing:2px;color:var(--gl);text-transform:uppercase;}
.hstat-v{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:700;color:var(--yellow);line-height:1;}
.wrap{flex:1;display:flex;overflow:hidden;}
.sidebar{width:300px;background:var(--dark);border-right:1px solid #2a2a2a;display:flex;flex-direction:column;flex-shrink:0;position:relative;z-index:10;touch-action:manipulation;}
.sb{flex:1;overflow-y:auto;padding:14px;padding-bottom:24px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain;scroll-behavior:smooth;}
.sb::-webkit-scrollbar{width:3px;}
.sb::-webkit-scrollbar-thumb{background:var(--red);}
.map-wrap{flex:1;position:relative;}
#map{width:100%;height:100%;cursor:crosshair;background:#111;touch-action:manipulation;}
.map-dark .leaflet-tile-pane{filter:brightness(2.5) contrast(1.3) invert(0.05);background:#111;}
.map-street .leaflet-tile-pane{background:#2a2a2a;}
.screen{display:none;flex-direction:column;gap:9px;}
#player-rows:empty{display:none;}
.screen.active{display:flex;}
.sec{font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--gl);padding-bottom:4px;border-bottom:1px solid #2a2a2a;}
.d-list{display:flex;flex-direction:column;gap:4px;}
.d-card{background:var(--gd);border:1px solid #333;border-radius:6px;padding:8px 11px;cursor:pointer;transition:border-color .15s,background .15s;}
.d-card.sel{background:var(--surface);}
.d-top{display:flex;align-items:center;gap:7px;margin-bottom:2px;}
.d-badge{font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;color:var(--red);background:rgba(200,16,46,.15);padding:1px 6px;border-radius:3px;letter-spacing:1px;}
.d-card.sel .d-badge{}
.d-name{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;text-transform:uppercase;}
.d-stns{font-family:'Barlow Condensed',sans-serif;font-size:10px;color:var(--gl);}
.s-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;}
.s-btn{background:var(--gd);border:1px solid #333;border-radius:5px;padding:6px 3px;cursor:pointer;text-align:center;transition:border-color .15s,background .15s,color .15s,transform 160ms var(--ease-out);color:var(--white);}
.s-btn.sel{background:#252525;color:var(--yellow);}
.s-num{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;}
.s-short{font-family:'Barlow Condensed',sans-serif;font-size:8px;color:var(--gl);line-height:1.2;margin-top:1px;}
.s-btn.sel .s-short{color:var(--text-muted);}
.diff-row{display:flex;gap:0;background:var(--surface);border:1px solid var(--border-dim);border-radius:6px;overflow:hidden;}
.db{flex:1;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;text-transform:uppercase;background:var(--gd);border:1px solid #333;border-radius:5px;padding:7px 3px;cursor:pointer;color:var(--gl);text-align:center;transition:background .15s,color .15s,transform 160ms var(--ease-out);}
.db.on{border-color:var(--yellow);color:var(--yellow);background:rgba(255,209,0,.07);}
.db-name{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;line-height:1.2;}
.db-desc{font-family:'Barlow Condensed',sans-serif;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gl);margin-top:3px;line-height:1;}
.db.on .db-desc{color:rgba(255,209,0,0.6);}
.btn{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;letter-spacing:2px;text-transform:uppercase;border:none;border-radius:6px;padding:11px;cursor:pointer;transition:background .15s,transform 160ms var(--ease-out),box-shadow .15s;width:100%;}
.btn-r{background:var(--red);color:#fff;}

.btn-r:disabled{background:#333;color:#555;cursor:not-allowed;transform:none;}
.btn-s{background:transparent;color:var(--white);border:1px solid #444;}

.q-card{background:var(--gd);border:1px solid #333;border-radius:8px;padding:13px;}
.q-rnd{font-family:'Barlow Condensed',sans-serif;font-size:10px;color:var(--red);letter-spacing:2px;text-transform:uppercase;margin-bottom:2px;}
.q-name{font-family:'Barlow Condensed',sans-serif;font-size:32px;font-weight:900;line-height:1;text-transform:uppercase;}
.q-sub{font-family:'Barlow Condensed',sans-serif;font-size:11px;color:var(--gl);margin-top:3px;}
.pips{display:flex;gap:3px;}
.pip{flex:1;height:5px;background:#2a2a2a;border-radius:3px;transition:background .3s;}
.pip.done-green{background:#4CAF50;}
.pip.done-orange{background:#FF9800;}
.pip.done-red{background:var(--red);}
.pip.cur{background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.6);box-sizing:border-box;}
.tap{font-family:'Barlow Condensed',sans-serif;font-size:13px;color:var(--gl);text-align:center;}
.tap-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:500;pointer-events:none;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;letter-spacing:1.5px;color:#999;background:rgba(26,26,26,0.85);border:1px solid #333;padding:5px 12px;border-radius:4px;text-transform:uppercase;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,0.4);}
.pulse{animation:pulse 1.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
button.hint-btn{background:transparent;border:1px solid #444;color:var(--gl);transition:border-color .15s,color .15s,transform 160ms var(--ease-out);}
button.hint-btn:disabled{border-color:#2a2a2a;color:#444;cursor:not-allowed;transform:none;}
.fetching{background:var(--gd);border:1px solid #333;border-radius:8px;padding:12px;text-align:center;display:none;}
.fetching.show{display:block;}
.spin{width:26px;height:26px;border:3px solid #333;border-top-color:var(--red);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 7px;}
@keyframes spin{to{transform:rotate(360deg)}}
.spin-txt{font-family:'Barlow Condensed',sans-serif;font-size:11px;color:var(--gl);letter-spacing:1px;text-transform:uppercase;}
.r-card{background:var(--gd);border-radius:8px;padding:14px;text-align:center;}
.r-st{font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:1px;color:var(--gl);text-transform:uppercase;margin-bottom:3px;}
.r-dist{font-family:'Barlow Condensed',sans-serif;font-size:48px;font-weight:900;line-height:1;}
.r-unit{font-family:'Barlow Condensed',sans-serif;font-size:12px;color:var(--gl);letter-spacing:2px;}
.r-stars{font-size:20px;margin:5px 0 2px;}
.r-lbl{font-family:'Barlow Condensed',sans-serif;font-size:12px;color:var(--gl);letter-spacing:1px;}
.sum-medal{font-size:48px;text-align:center;}
.sum-score{font-family:'Barlow Condensed',sans-serif;font-size:72px;font-weight:900;color:var(--yellow);text-align:center;line-height:1;}
.sum-lbl{font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:3px;color:var(--gl);text-transform:uppercase;text-align:center;}
.sum-rows{display:flex;flex-direction:column;gap:4px;}
.sum-row{background:var(--gd);border-radius:5px;padding:7px 11px;display:flex;justify-content:space-between;}
.sum-sn{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:600;text-transform:uppercase;}
.sum-sd{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:600;}
.slider-row{display:flex;align-items:center;gap:10px;}
.slider-lbl{font-family:'Barlow Condensed',sans-serif;font-size:11px;color:var(--gl);white-space:nowrap;}
.slider-val{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:700;color:var(--yellow);min-width:28px;text-align:right;}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:4px;background:#333;border-radius:2px;outline:none;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:var(--red);border-radius:50%;cursor:pointer;}
input[type=range]::-moz-range-thumb{width:18px;height:18px;background:var(--red);border-radius:50%;cursor:pointer;border:none;}
.loading-badge{display:none;position:fixed;bottom:16px;right:16px;background:#1a1a1a;border:1px solid #444;border-radius:6px;padding:8px 12px;font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:1px;color:var(--gl);z-index:1000;text-transform:uppercase;}
.loading-badge.show{display:flex;align-items:center;gap:8px;}
.loading-badge .spin{width:10px;height:10px;border:2px solid #333;border-top-color:var(--red);border-radius:50%;animation:spin .7s linear infinite;margin:0;flex-shrink:0;}
.stn-tip{background:rgba(26,26,26,.85)!important;border:1px solid #333!important;color:var(--white)!important;font-family:'Barlow Condensed',sans-serif!important;font-size:12px!important;letter-spacing:1px!important;padding:3px 7px!important;}
/* Base mobile breakpoint — polish layer extends this below */
@media(max-width:680px){
  .sidebar{width:100%;border-right:none;border-top:1px solid #333;}
  .wrap{flex-direction:column-reverse;}
}


.leaflet-control-attribution {
  background: rgba(0,0,0,0.3) !important;
  filter: grayscale(1) opacity(0.4);
  font-size: 9px !important;
}
.leaflet-control-attribution a {
  color: #aaa !important;
}

/* ── Unified setup additions ──────────────────────────────────── */
/* screen-inner: scrollable content area inside sidebar screens   */
.screen-inner{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:9px;}

/* Base stepper/player-row definitions — polish layer overrides below */
.stepper-row{display:flex;align-items:center;}
.player-row{display:flex;align-items:center;}

.q-name, .r-street-name {
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
}
html { background: var(--dark); height: 100svh; }


/* ═══════════════════════════════════════════════════════════════
   UI POLISH LAYER — overrides base styles via cascade.
   Sections: tokens → global → header → sidebar → setup cards →
   gameplay → results → multiplayer → mobile → motion.
   ═══════════════════════════════════════════════════════════════ */

/* ── Design tokens ───────────────────────────────────────────── */
:root {
  --red-glow:    rgba(200,16,46,.16);
  --yellow-glow: rgba(255,209,0,.08);
  --surface:     #1e1e1e;   /* card surface — slightly lifted from --dark */
  --border-dim:  #272727;   /* subtle dividers */
  --border-mid:  #2e2e2e;   /* card borders */
  --text-muted:  #888;      /* was --gl:#777 — lifted for WCAG contrast */
  --ease:        cubic-bezier(.2,0,0,1);  /* iOS-style decelerate */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);  /* Emil: strong ease-out */
  --dur:         .17s;
}

/* ── Global interaction resets ───────────────────────────────── */
/* Kill blue iOS tap flash on every interactive element */
button, input, a { -webkit-tap-highlight-color: transparent; }
/* iOS: remove inner shadow on text inputs */
input[type=text] { -webkit-appearance: none; appearance: none; }

/* ── Header ──────────────────────────────────────────────────── */
.logo-wrap       { width: fit-content; }
.logo-sub        { color: var(--text-muted); text-align: justify; text-align-last: justify; }
.hstat-l         { color: var(--text-muted); }

/* ── Map controls in dark mode ───────────────────────────────── */
.map-dark .leaflet-bar {
  border-color: #333 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.4) !important;
}
.map-dark .leaflet-bar a {
  background: rgba(26,26,26,.85) !important;
  color: #999 !important;
  border-bottom-color: #333 !important;
}
.map-dark .leaflet-bar a:hover {
  background: rgba(40,40,40,.9) !important;
  color: var(--white) !important;
}

/* ── Map style toggle ────────────────────────────────────────── */
.map-style-btn {
  cursor: pointer;
  margin-top: 6px !important;
}
.map-style-btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #333;
  text-decoration: none;
  background: #fff;
  line-height: 1;
}
.map-style-btn a:hover { background: #f4f4f4; color: #000; }

/* ── Sidebar container ───────────────────────────────────────── */
/* Tighter padding, quieter scrollbar */
.sidebar         { border-right-color: var(--border-dim); }
.sb              { padding: 12px 12px 24px; gap: 8px; }
.sb::-webkit-scrollbar       { width: 2px; }
.sb::-webkit-scrollbar-thumb { background: rgba(200,16,46,.3); border-radius: 1px; }

/* ── Section labels (.sec) ───────────────────────────────────── */
.sec {
  font-size: 10px;
  letter-spacing: 2.5px;
  color: var(--text-muted);
  padding-bottom: 0;
  border-bottom: none;
  line-height: 1.4;
  margin-top: -2px;
  margin-bottom: 4px;
}

/* ── District cards (.d-card) ────────────────────────────────── */
/* Subtle lifted surface + per-district left border (set by JS).
   Hover = red tint. Selected = yellow tint. */
.d-card {
  background: var(--surface);
  border: none;
  border-left: 4px solid transparent;
  border-radius: 7px;
  padding: 9px 11px 9px 10px;
  position: relative;
  transition: border-color var(--dur) var(--ease),
              background   var(--dur) var(--ease);
}
.d-card.sel        { background: var(--surface); }
.d-header          { cursor: pointer; }
.d-name            { font-size: 13px; letter-spacing: .5px; flex: 1; }
.d-stns            { font-size: 10px; color: var(--text-muted); margin-top: 2px;
                     max-height: 20px; opacity: 1; overflow: hidden;
                     transition: max-height .2s var(--ease), opacity .15s var(--ease), margin .2s var(--ease); }
.d-card.sel .d-stns { max-height: 0; opacity: 0; margin-top: 0; }
.d-badge           { font-size: 10px; letter-spacing: .5px; }
.d-chevron {
  position: absolute;
  right: 11px;
  top: 20px;
  color: #444;
  transition: transform .2s var(--ease);
}
.d-card.sel .d-chevron { transform: rotate(180deg); }

/* ── District station dropdown ──────────────────────────────── */
.d-dropdown {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s var(--ease), margin .25s var(--ease);
  margin-top: 0;
}
.d-dropdown.open {
  max-height: 300px;
  margin-top: 8px;
}
.d-dropdown .s-grid {
  padding-top: 8px;
  border-top: 1px solid var(--border-dim);
}

/* ── Rural districts accordion ──────────────────────────────── */
.rural-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 4px 0;
  border-bottom: 1px dashed var(--border-dim);
  transition: color var(--dur) var(--ease);
}
.rural-count {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 1px;
  color: #555;
}
.rural-chevron {
  position: absolute;
  right: 11px;
  width: 14px;
  height: 14px;
  color: #444;
  transition: transform .2s var(--ease);
}
.rural-group.open .rural-chevron {
  transform: rotate(180deg);
}
.rural-inner {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rural-group.open .rural-inner {
  max-height: 600px;
  margin-top: 4px;
}

/* ── Station grid (.s-btn) ───────────────────────────────────── */
/* Tall enough for 44 px minimum touch target */
.s-btn {
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: 6px;
  padding: 11px 4px;
  min-height: 46px;
  transition: border-color var(--dur) var(--ease),
              background   var(--dur) var(--ease),
              color         var(--dur) var(--ease);
}
.s-btn.sel        { background: #252525; color: var(--yellow); }
.s-num            { font-size: 14px; }
.s-short          { font-size: 9px; color: var(--text-muted); }
.s-btn.sel .s-short { color: var(--text-muted); }

/* ── Difficulty buttons (.db) ────────────────────────────────── */
/* Same surface + state language as .s-btn for visual consistency */
.db {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 10px 4px;
  min-height: 46px;
  color: var(--text-muted);
  transition: background var(--dur) var(--ease),
              color     var(--dur) var(--ease);
}

.db.on    { background: var(--yellow-glow); color: var(--yellow); }
.db-name  { font-size: 13px; }
.db-desc  { font-size: 9px; color: var(--text-muted); }
.db.on .db-desc { color: rgba(255,209,0,.5); }

/* ── Player count stepper ────────────────────────────────────── */
/* ── Player count stepper — mirrors .diff-row layout ─────────── */
.stepper-row {
  width: 100%;
  gap: 0;
  background: var(--surface);
  border: none;
  border-radius: 6px;
  overflow: hidden;
}
.stepper-btn {
  flex: 1;
  width: auto;
  height: auto;
  min-height: 36px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--text-muted);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color var(--dur) var(--ease),
              background var(--dur) var(--ease),
              transform 160ms var(--ease-out);
}
.stepper-val {
  flex: 1;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  color: var(--yellow);
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stepper-lbl { display: none; }

/* ── Multiplayer player cards ────────────────────────────────── */
.mp-card {
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: mpCardIn 180ms cubic-bezier(0.23, 1, 0.32, 1) both;
  animation-delay: calc(var(--i, 0) * 50ms);
}
@keyframes mpCardIn {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .mp-card { animation: none; }
}
.mp-card-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-muted);
}
.mp-card-input {
  width: 100%;
  padding: 9px 10px;
  background: #141414;
  border: 1px solid var(--border-dim);
  border-radius: 5px;
  color: var(--white);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  letter-spacing: .5px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--dur) var(--ease);
}
.mp-card-input:focus { border-color: #505050; box-shadow: none; outline: none; }
.mp-card-input::placeholder { color: #3d3d3d; }
.mp-card-status {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; letter-spacing: 1px;
  min-height: 14px;
  color: var(--text-muted);
}
.mp-card-status:empty { display: none; }

/* Segmented difficulty control */
.mp-diff-bar {
  display: flex; gap: 0;
  background: var(--surface);
  border: 1px solid var(--border-dim);
  border-radius: 6px;
  overflow: hidden;
}
.mp-diff-seg {
  flex: 1;
  min-height: 36px;
  background: transparent;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.mp-diff-seg.active {
  background: var(--yellow-glow);
  color: var(--yellow);
}

/* Legacy player-row — keep for backward compat but hide */
.player-row       { gap: 4px; margin-bottom: 6px; }
.player-row input {
  flex: 1;
  min-width: 0;
  padding: 9px 10px;
  background: #181818;
  border: 1px solid var(--border-mid);
  border-radius: 5px;
  color: var(--white);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  letter-spacing: .5px;
  transition: border-color var(--dur) var(--ease);
}
.player-row input:focus       { border-color: #505050; box-shadow: none; outline: none; }
.player-row input::placeholder { color: #3d3d3d; }

/* ── Question slider ─────────────────────────────────────────── */
input[type=range]                     { height: 5px; background: #2a2a2a; }
input[type=range]::-webkit-slider-thumb {
  width: 20px; height: 20px;
  box-shadow: 0 0 0 3px rgba(200,16,46,.2);
}
input[type=range]::-moz-range-thumb   {
  width: 20px; height: 20px;
  box-shadow: 0 0 0 3px rgba(200,16,46,.2);
}
.slider-val {
  font-size: 16px;
  font-weight: 900;
  padding: 3px 10px;
  border-radius: 4px;
  background: var(--surface);
  min-width: 40px;
  text-align: center;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Question card (.q-card) ─────────────────────────────────── */
/* Lifted surface to separate from sidebar background */
.q-card { background: var(--surface); border: 1px solid var(--border-mid); padding: 14px; }

/* Street name: the primary hero element — enlarged and tightened */
.q-name  { font-size: 40px; line-height: 1.05; letter-spacing: -.5px; }
.q-rnd   { font-size: 11px; letter-spacing: 3px; margin-bottom: 4px; }
.q-sub   { font-size: 12px; color: var(--text-muted); margin-top: 5px; letter-spacing: .5px; }

/* ── Progress pips ───────────────────────────────────────────── */
/* Taller, rounder — cleaner color differentiation between states */
.pips             { gap: 4px; }
.pip              { height: 7px; background: #252525; border-radius: 4px; }
.pip.cur          { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.45); }
.pip.done-green   { background: #3dba52; }
.pip.done-orange  { background: #f59a1a; }
.pip.done-red     { background: var(--red); }

/* ── Tap hint ────────────────────────────────────────────────── */
.tap { font-size: 13px; color: var(--text-muted); letter-spacing: .5px; }

/* ── Fetching overlay ────────────────────────────────────────── */
.fetching  { background: var(--surface); border: 1px solid var(--border-mid); padding: 14px; }
.spin-txt  { font-size: 12px; letter-spacing: 1.5px; }

/* ── Buttons ─────────────────────────────────────────────────── */
/* 48 px min height satisfies iOS 44 px guideline with margin.
   Red hover gets a directional glow — reinforces primary action. */
.btn {
  padding: 13px;
  font-size: 15px;
  letter-spacing: 2px;
  border-radius: 7px;
  min-height: 48px;
  transition: background var(--dur) var(--ease),
              transform   var(--dur) var(--ease),
              box-shadow  var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color        var(--dur) var(--ease);
}
.btn-r         { background: var(--red); }
.btn-r:disabled{ background: #202020; color: #363636; box-shadow: none; transform: none; cursor: not-allowed; }
.btn-r.not-ready { background: #202020; color: #363636; box-shadow: none; cursor: not-allowed; transform: none; }
.btn-r.not-ready:hover { background: #202020; transform: none; box-shadow: none; }
.btn-s         { border-color: #363636; color: #bbb; }

/* ── Result card (.r-card) ───────────────────────────────────── */
/* More padding + visible border makes the score feel framed */
.r-card   { background: var(--surface); border: 1px solid var(--border-mid); padding: 20px 14px; }
.r-st     { font-size: 10px; letter-spacing: 2px; color: var(--text-muted); margin-bottom: 5px; }
/* Distance: enlarged — the performance moment */
.r-dist   { font-size: 56px; line-height: 1; }
.r-unit   { font-size: 11px; letter-spacing: 3px; color: var(--text-muted); margin-top: 2px; }
/* Stars: larger with breathing room */
.r-stars  { font-size: 26px; margin: 10px 0 5px; letter-spacing: 6px; }
/* Performance label: visible, not buried */
.r-lbl    { font-size: 13px; color: #aaa; letter-spacing: 1px; }

/* ── Summary screen ──────────────────────────────────────────── */
.sum-score { font-size: 76px; }
.sum-lbl   { font-size: 10px; letter-spacing: 3px; color: var(--text-muted); }
.sum-row   {
  background: var(--surface);
  border: 1px solid var(--border-dim);
  border-radius: 6px;
  padding: 8px 12px;
}
.sum-sn { font-size: 13px; }
.sum-sd { font-size: 13px; }

/* ── Results screen layout: scrollable content + fixed buttons ── */
/* Only when active — flex layout with scrollable center, fixed bottom */
#sc-sum.active, #sc-mp-results.active {
  display: flex !important;
  flex-direction: column;
  flex: 1;       /* fill .sb height so children can scroll within it */
  min-height: 0; /* allow flex child to shrink below its content size */
  gap: 0;
}
.result-scroll {
  flex: 1;
  min-height: 0;     /* critical: allows flex child to scroll rather than overflow */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 0 0 12px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(200,16,46,.3) transparent;
}
.result-scroll::-webkit-scrollbar       { width: 3px; }
.result-scroll::-webkit-scrollbar-track { background: transparent; }
.result-scroll::-webkit-scrollbar-thumb { background: rgba(200,16,46,.3); border-radius: 2px; }
.result-scroll::-webkit-scrollbar-thumb:hover { background: rgba(200,16,46,.5); }
.result-buttons {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 12px 0 0 0;
  border-top: 1px solid var(--border-dim);
}

/* ── Multiplayer handoff screen ──────────────────────────────── */
/* Round label + player name get more size/air; button goes full-width */
#mp-handoff-round  { font-size: 11px !important; letter-spacing: 3px !important; margin-bottom: 14px !important; color: var(--text-muted) !important; }
#mp-handoff-name   { font-size: 52px !important; margin-bottom: 6px !important; }
#mp-handoff-diff   { font-size: 11px !important; letter-spacing: 3px !important; margin-bottom: 22px !important; }
#mp-handoff-scores { width: 100% !important; max-width: 100% !important; margin-bottom: 24px !important; }
/* I'M READY spans full width — primary action deserves full emphasis */
#sc-mp-handoff .btn-r { width: 100% !important; }

/* ── Multiplayer results screen ──────────────────────────────── */
#sc-mp-results .screen-inner { padding: 4px 0; }

/* ── Loading badge ───────────────────────────────────────────── */
.loading-badge { background: #1c1c1c; border-color: #363636; border-radius: 8px; }

/* ── Mobile / iOS Safari ─────────────────────────────────────── */
/* 680 px breakpoint: safe-area insets for notch / Dynamic Island,
   larger touch targets on phone, street name scaled down slightly */
@media (max-width: 680px) {
  body::before {
    content: '';
    display: block;
    height: env(safe-area-inset-top, 0px);
    background: var(--dark);
    flex-shrink: 0;
  }
  header {
    padding-left:  max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
  .sidebar {
    max-height: 52svh;
  }
  .sb {
    padding-bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 24px));
  }
  /* Street name: slightly smaller on phone portrait */
  .q-name  { font-size: 34px; }
  /* Primary button: extra height on touch */
  .btn     { min-height: 52px; }
  .db, .s-btn { min-height: 48px; }
}

/* ── Hamburger menu button ──────────────────────────────────── */
.menu-btn {
  width: 36px; height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-mid);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  flex-shrink: 0;
  margin-left: 8px;
  -webkit-tap-highlight-color: transparent;
}
.menu-btn svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.menu-btn:focus-visible {
  outline: 2px solid var(--red); outline-offset: 2px;
}

/* ── Stats slide-out panel ──────────────────────────────────── */
.stats-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease);
}
.stats-backdrop.open {
  opacity: 1; pointer-events: auto;
}
.stats-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 340px; max-width: 90vw;
  background: var(--dark);
  border-left: 3px solid var(--red);
  z-index: 9999;
  transform: translateX(100%);
  transition: transform .3s var(--ease);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.stats-panel.open {
  transform: translateX(0);
}
.stats-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  height: 55px; box-sizing: border-box;
  border-bottom: 1px solid var(--border-dim);
  flex-shrink: 0;
}
.stats-header-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 14px;
  letter-spacing: 2px; text-transform: uppercase;
}
.stats-close {
  width: 36px; height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-mid);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.stats-close svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.stats-close:focus-visible {
  outline: 2px solid var(--red); outline-offset: 2px;
}
.stats-body {
  flex: 1; overflow-y: auto;
  padding: 14px 16px 24px;
  display: flex; flex-direction: column; gap: 14px;
  font-family: 'Barlow Condensed', sans-serif;
}
.stats-body button, .stats-body input { font-family: inherit; }
#stats-tab-content { display: flex; flex-direction: column; gap: 14px; }
.stats-body::-webkit-scrollbar { width: 2px; }
.stats-body::-webkit-scrollbar-thumb { background: rgba(200,16,46,.3); border-radius: 1px; }

/* Stats profile card */
.stats-profile {
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: 8px;
  padding: 14px;
  text-align: center;
}
.stats-profile-name {
  font-weight: 900; font-size: 28px;
  text-transform: uppercase;
  margin-bottom: 2px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  justify-content: center;
}
.stats-profile-name .edit-icon {
  font-size: 14px; opacity: 0.3; transition: opacity 0.15s;
}
.stats-name-input {
  font-weight: 900; font-size: 28px;
  text-transform: uppercase;
  text-align: center;
  background: transparent; border: none;
  border-bottom: 2px solid var(--yellow);
  color: var(--text-main);
  outline: none;
  width: 100%; max-width: 240px;
  padding: 0 0 2px;
}
.stats-profile-sap {
  font-size: 11px; letter-spacing: 2px;
  color: var(--text-muted); text-transform: uppercase;
}
.stats-profile-meta {
  display: flex; justify-content: center; gap: 20px;
  margin-top: 10px;
}
.stats-profile-meta .spm-item {
  text-align: center;
}
.stats-profile-meta .spm-val {
  font-weight: 700; font-size: 22px; color: var(--yellow);
}
.stats-profile-meta .spm-lbl {
  font-size: 9px; letter-spacing: 2px; color: var(--text-muted);
  text-transform: uppercase;
}

/* Stats tabs */
.stats-tabs {
  display: flex; gap: 0;
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: 6px;
  overflow: hidden;
  min-height: 40px;
}
.stats-tab {
  flex: 1;
  min-height: 40px;
  background: transparent;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.stats-tab.active {
  background: var(--red);
  color: var(--white);
}

/* ── Stats content — clean minimal redesign ─────────────────── */

/* Section headers */
.stats-sec {
  font-size: 10px; font-weight: 600;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 6px;
  margin-top: 4px;
}

/* Empty state */
.stats-empty {
  font-size: 12px; color: #444;
  letter-spacing: 1px; text-align: center;
  padding: 16px 0;
}

/* ── Score cards (Best Scores) ──────────────────────────────── */
.score-card {
  background: var(--surface);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
}
.score-stn {
  font-size: 22px; font-weight: 900;
  color: var(--white);
  min-width: 44px;
}
.score-info { flex: 1; min-width: 0; }
.score-diff {
  font-size: 9px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 5px;
}
.score-bar-track {
  height: 4px;
  background: #2a2a2a;
  border-radius: 2px;
  overflow: hidden;
}
.score-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s var(--ease);
}
.score-pct {
  font-size: 20px; font-weight: 900;
  min-width: 50px; text-align: right;
}

/* ── Drill feed (Recent Drills) ─────────────────────────────── */
.drill-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
}
.drill-item + .drill-item {
  border-top: 1px solid rgba(255,255,255,0.04);
}
.drill-info { flex: 1; min-width: 0; }
.drill-title {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--white);
}
.drill-meta {
  font-size: 10px; color: var(--text-muted);
  margin-top: 2px; letter-spacing: 0.5px;
}
.drill-pct {
  font-size: 16px; font-weight: 900;
  padding: 3px 10px;
  border-radius: 4px;
  min-width: 48px; text-align: center;
  flex-shrink: 0;
}

/* ── Street cards (Streets to Work On / Forgotten) ──────────── */
.street-card {
  background: var(--surface);
  border-radius: 8px;
  padding: 11px 14px;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}

.street-top {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.street-name {
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.3px;
  color: var(--white);
}
.street-dist {
  font-size: 15px; font-weight: 900;
  flex-shrink: 0; margin-left: 8px;
}
.street-bar-track {
  height: 3px;
  background: #2a2a2a;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 5px;
}
.street-bar-fill {
  height: 100%;
  border-radius: 2px;
}
.street-meta {
  font-size: 10px; color: var(--text-muted);
  letter-spacing: 0.5px;
  display: flex; align-items: center; gap: 4px;
}
.street-stars { color: var(--yellow); letter-spacing: 1px; }

/* ── Leaderboard ────────────────────────────────────────────── */
.lb-podium {
  display: flex; gap: 6px; margin-bottom: 6px;
}
.lb-podium-card {
  flex: 1;
  background: var(--surface);
  border-radius: 8px;
  padding: 10px 6px;
  text-align: center;
}
.lb-podium-medal { font-size: 20px; line-height: 1; }
.lb-podium-name {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase;
  color: var(--white);
  margin: 6px 0 2px;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.lb-podium-score {
  font-size: 18px; font-weight: 900;
  color: var(--yellow);
}
.lb-podium-sub {
  font-size: 9px; color: var(--text-muted);
  letter-spacing: 0.5px;
}

.lb-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
}
.lb-row + .lb-row {
  border-top: 1px solid rgba(255,255,255,0.04);
}
.lb-rank {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  min-width: 24px; text-align: center;
}
.lb-row-info { flex: 1; min-width: 0; }
.lb-row-name {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--white);
}
.lb-row-sub {
  font-size: 10px; color: var(--text-muted);
  margin-top: 1px;
}
.lb-row-pct {
  font-size: 16px; font-weight: 900;
  color: var(--yellow);
}
.lb-row.lb-me {
  background: rgba(255,209,0,.05);
  border-radius: 6px;
  padding: 8px 6px;
  margin: -1px -6px;
}
.lb-row.lb-me .lb-rank,
.lb-row.lb-me .lb-row-name { color: var(--yellow); }

.stats-dept-summary {
  font-size: 11px; color: var(--text-muted);
  letter-spacing: 1px; text-align: center;
  padding: 2px 0 8px;
}
.stats-divider {
  border: none; border-top: 1px solid var(--border-mid);
  margin: 4px 0 0;
}
.stats-logout {
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 1px solid #333;
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 11px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--dur), color var(--dur);
  margin-top: 8px;
}

/* Personal best banner on summary */
.pb-banner {
  background: rgba(255,209,0,.1);
  border: 1px solid var(--yellow);
  border-radius: 6px;
  padding: 8px 12px;
  text-align: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px; font-weight: 700;
  color: var(--yellow);
  letter-spacing: 2px; text-transform: uppercase;
  display: none;
}
.pb-banner.show { display: block; }

/* ── Sticky start button (mobile) ────────────────────────────── */
@media (max-width: 680px) {
  #start-btn {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: auto;
    /* Override disabled styling on mobile — button is always tappable */
    background: var(--red) !important;
    color: #fff !important;
    cursor: pointer !important;
  }
  /* Gradient fade at bottom of screen — hides when scrolled to bottom */
  #sb-sentinel { height: 1px; }
  #sb-fade {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to top, var(--dark), transparent);
    pointer-events: none;
    z-index: 4;
    transition: opacity .25s ease;
  }
  #sb-fade.at-bottom { opacity: 0; }
}

/* ── Active press feedback (Emil: scale 0.97 on :active) ────── */
.btn:active, .s-btn:active, .stepper-btn:active,
.db:active, .mp-diff-seg:active, .stats-tab:active,
.stats-close:active, .menu-btn:active,
.hint-btn:active, .stats-logout:active {
  transform: scale(0.97);
}
.btn-r:active { transform: scale(0.97) translateY(0); }
.btn-r:disabled:active, .hint-btn:disabled:active { transform: none; }

/* ── Hover guard (Emil: gate hover behind media query) ──────── */
@media (hover: hover) and (pointer: fine) {
  .d-card:hover       { background: var(--surface); }
  .d-card.sel:hover   { background: var(--surface); }
  .s-btn:hover        { background: #252525; border-color: var(--border-mid); }
  .db:hover           { color: var(--white); }
  .btn-r:hover        { background: #d4112c; transform: translateY(-1px); box-shadow: 0 4px 18px rgba(200,16,46,.3); }
  .btn-s:hover        { border-color: #5a5a5a; color: var(--white); }
  .stepper-btn:hover  { color: var(--white); }
  .mp-diff-seg:hover  { color: var(--white); }
  .stats-tab:hover    { color: var(--white); }
  .stats-close:hover  { border-color: var(--red); color: var(--white); }
  .stats-logout:hover { border-color: var(--red); color: var(--red); }
  .menu-btn:hover     { border-color: var(--red); color: var(--white); }
  .street-card:hover  { background: #252525; }
  .hint-btn:hover:not(:disabled) { border-color: var(--white); color: var(--white); }
  .rural-toggle:hover { color: var(--white); }
  .stats-profile-name:hover .edit-icon { opacity: 0.7; }
}

/* ── Screen fade entrance ───────────────────────────────────── */
@keyframes screenFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.screen.active {
  animation: screenFadeIn 120ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* ── Loading badge entrance ─────────────────────────────────── */
@keyframes badgeSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.loading-badge.show {
  animation: badgeSlideIn 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, .btn, .d-card, .s-btn, .db, .stepper-btn {
    transition-duration: .01ms !important;
    animation-duration:  .01ms !important;
  }
}