/* ============================================================
   GasRun — NEO-BRUTALISM RACING UI (v4)
   Day (Light) + Night (Dark) themes.
   Default = LIGHT (day mode, like user requested).
   Toggle via 3-dot menu — stored in localStorage.
   ============================================================ */

/* ============================================================
   DEFAULT THEME = LIGHT (warm daytime racing)
   ============================================================ */
:root,
:root[data-theme="light"]{
  /* UI surfaces */
  --bg-0:#fef6e4;         /* warm cream sky */
  --bg-1:#fce7b5;         /* warm peach */
  --bg-2:#fdd79a;         /* warm sunset */
  --panel:#fff8ea;        /* soft panel */
  --panel-2:#fff1d2;      /* secondary panel */
  --ink:#0d0d14;          /* hard black border */
  --ink-2:#05050a;

  --text:#1a1a28;         /* near-black text on light bg */
  --text-dim:#4a4a5a;
  --muted:#6a6a7a;

  /* Aggressive racing accents */
  --race-orange:#ff6b35;
  --race-orange-2:#ff8c42;
  --race-yellow:#f7d046;
  --race-red:#ef476f;
  --race-mint:#06d6a0;
  --race-cyan:#4cc9f0;
  --race-purple:#8338ec;
  --race-lime:#c7f464;

  /* Hard brutalism shadows */
  --hs-sm: 3px 3px 0 var(--ink);
  --hs-md: 5px 5px 0 var(--ink);
  --hs-lg: 7px 7px 0 var(--ink);
  --hs-xl: 9px 9px 0 var(--ink);

  --bw: 3px;
  --bw-thick: 4px;
  --radius-sharp: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --lb-row:56px;
  --lb-gap:10px;

  /* =========================================================
     CANVAS PALETTE VARS (read by JS getCanvasPalette())
     Light theme — daytime racing
     ========================================================= */
  --cv-sky-top:    #bfe8ff;   /* bright blue sky */
  --cv-sky-mid:    #e8f4ff;
  --cv-sky-bot:    #fde3b9;   /* warm horizon */

  --cv-asphalt-1:  #4a4a5c;   /* mid-gray asphalt */
  --cv-asphalt-2:  #5a5a70;
  --cv-asphalt-dot:#8a8a9e;

  --cv-road-shadow:rgba(30,20,10,0.22);
  --cv-road-stroke:#0d0d14;

  --cv-lane-outline:rgba(13,13,20,0.85);
  --cv-lane-dash:  #ffffff;

  --cv-edge-left:  #f7d046;
  --cv-edge-right: #ff6b35;

  --cv-streak-a:   rgba(255,107,53,0.35);
  --cv-streak-b:   rgba(247,208,70,0.55);

  --cv-side-1:     #a8d888;   /* green grass */
  --cv-side-2:     #8cc66e;
  --cv-side-3:     #78b05a;
  --cv-side-accent:#ff6b35;

  --cv-hazard:     #f7d046;

  --cv-overlay:    rgba(20,10,5,0.45);
  --cv-banner-bg:  #fff8ea;
  --cv-banner-sh:  #ff6b35;
  --cv-banner-ttl: #ef476f;
  --cv-banner-txt: #1a1a28;
  --cv-banner-sub: #ff6b35;
}

/* ============================================================
   DARK THEME = NIGHT (charcoal nocturnal racing)
   ============================================================ */
:root[data-theme="dark"]{
  --bg-0:#16161f;
  --bg-1:#1a1a2e;
  --bg-2:#20202f;
  --panel:#242438;
  --panel-2:#2d2d44;
  --ink:#0d0d14;
  --ink-2:#05050a;

  --text:#f5f0e1;
  --text-dim:#b8b2a0;
  --muted:#8a8578;

  --cv-sky-top:    #1a1a2e;
  --cv-sky-mid:    #20202f;
  --cv-sky-bot:    #16161f;

  --cv-asphalt-1:  #1e1e2d;
  --cv-asphalt-2:  #262637;
  --cv-asphalt-dot:#3a3a52;

  --cv-road-shadow:rgba(0,0,0,0.75);
  --cv-road-stroke:#0d0d14;

  --cv-lane-outline:rgba(13,13,20,0.9);
  --cv-lane-dash:  #f7d046;

  --cv-edge-left:  #f7d046;
  --cv-edge-right: #ff6b35;

  --cv-streak-a:   rgba(255,107,53,0.35);
  --cv-streak-b:   rgba(247,208,70,0.45);

  --cv-side-1:     #2d2d44;
  --cv-side-2:     #33334d;
  --cv-side-3:     #3a3a55;
  --cv-side-accent:#ff6b35;

  --cv-hazard:     #f7d046;

  --cv-overlay:    rgba(10,10,15,0.65);
  --cv-banner-bg:  #242438;
  --cv-banner-sh:  #ff6b35;
  --cv-banner-ttl: #ef476f;
  --cv-banner-txt: #f5f0e1;
  --cv-banner-sub: #f7d046;
}

*{box-sizing:border-box}
::selection{background:var(--race-yellow); color:var(--ink)}

/* ---------- Fonts ---------- */
@font-face{
  font-family:"AmericanCaptainPatrius";
  src:url("/assets/fonts/AmericanCaptainPatrius02FRE.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Akando";
  src:url("/assets/fonts/Akando-Regular.otf") format("opentype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"RebellionSquad";
  src:url("/assets/fonts/RebellionSquad-ZpprZ.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"SuperPixel";
  src:url("/assets/fonts/SuperPixel-m2L8j.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}

/* ---------- Base ---------- */
html,body{
  height:100%; margin:0;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(255,107,53,.10), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(247,208,70,.08), transparent 55%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 60%, var(--bg-2) 100%);
  color:var(--text);
  font-family:"Akando", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  min-height:100dvh;
  overflow-x:hidden;
  letter-spacing:.3px;
  transition: background .4s ease, color .3s ease;
}

/* Subtle grid pattern */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(13,13,20,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,13,20,.04) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
  opacity:.7;
}
:root[data-theme="dark"] body::before{
  background-image:
    linear-gradient(rgba(247,208,70,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247,208,70,.025) 1px, transparent 1px);
}

/* Diagonal warning stripes corner */
body::after{
  content:"";
  position:fixed; top:0; right:0; width:120px; height:120px;
  z-index:0; pointer-events:none;
  background: repeating-linear-gradient(
    45deg,
    rgba(247,208,70,.06) 0 10px,
    rgba(239,71,111,.06) 10px 20px
  );
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  opacity:.8;
}

#app{
  height:100%; width:100%;
  display:flex; align-items:stretch; justify-content:center;
  min-height:100dvh;
  position:relative; z-index:1;
}

.shell{
  width:100%; max-width:540px; height:100%;
  padding:10px 12px 12px;
  display:flex; flex-direction:column; gap:12px;
  position:relative;
}

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:4px 2px;
}

.iconBtn{
  border:var(--bw) solid var(--ink);
  background:var(--panel);
  color:var(--text);
  width:44px; height:44px; padding:0;
  border-radius:var(--radius-sharp);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--hs-sm);
  transition: transform .08s ease, box-shadow .08s ease, background .15s, color .15s;
  cursor:pointer;
}
.iconBtn:hover{
  background:var(--race-yellow);
  color:var(--ink);
  box-shadow: var(--hs-md);
  transform: translate(-1px,-1px);
}
.iconBtn:active{
  transform: translate(3px,3px);
  box-shadow: 0 0 0 var(--ink);
}

.title{
  flex:1; text-align:center;
  font-family:"RebellionSquad","AmericanCaptainPatrius", Akando, system-ui;
  font-size:20px; letter-spacing:2.5px;
  color:var(--text);
  text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow: 2px 2px 0 var(--ink), 3px 3px 0 var(--race-orange);
}
.mcFont{font-family:"RebellionSquad","AmericanCaptainPatrius","Akando",system-ui}
.title .mcRed{color:var(--race-yellow); text-shadow: 2px 2px 0 var(--ink)}

.badge{
  font-size:12px; font-weight:900; letter-spacing:1px;
  color:var(--ink);
  padding:10px 16px;
  background:var(--race-orange);
  border:var(--bw) solid var(--ink);
  border-radius:var(--radius-sharp);
  box-shadow: var(--hs-sm);
  cursor:pointer;
  transition: transform .08s ease, box-shadow .08s ease, background .15s;
  text-transform:uppercase;
  font-family:"Akando",system-ui;
}
.badge:hover{
  transform:translate(-1px,-1px);
  box-shadow: var(--hs-md);
  background:var(--race-orange-2);
}
.badge:active{
  transform:translate(3px,3px);
  box-shadow: 0 0 0 var(--ink);
}
.badge.connected{
  background:var(--race-mint);
  color:var(--ink);
}
.badge.error{
  background:var(--race-red);
  color:#fff;
}

/* ============================================================
   GAME CARD
   ============================================================ */
.gameCard{
  flex:1;
  background:var(--panel);
  border:var(--bw-thick) solid var(--ink);
  border-radius:var(--radius-md);
  box-shadow: var(--hs-xl), var(--hs-lg) var(--race-orange);
  padding:8px;
  position:relative; overflow:hidden;
}

.gameCard::before{
  content:"GAS // RUN";
  position:absolute;
  top:-2px; left:14px;
  font-family:"Akando", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:11px; font-weight:900; letter-spacing:2px;
  padding:4px 10px 3px;
  background:var(--race-yellow);
  color:var(--ink);
  border:var(--bw) solid var(--ink);
  border-top:0;
  border-radius:0 0 4px 4px;
  z-index:2;
  pointer-events:none;
}
.gameCard::after{
  content:"▲ LIVE";
  position:absolute;
  top:-2px; right:14px;
  font-family:"Akando",system-ui;
  font-size:10px; font-weight:900; letter-spacing:1.5px;
  padding:4px 10px 3px;
  background:var(--race-red);
  color:#fff;
  border:var(--bw) solid var(--ink);
  border-top:0;
  border-radius:0 0 4px 4px;
  z-index:2;
  pointer-events:none;
}

.canvasWrap{
  position:absolute; inset:8px;
  top:18px;
  border-radius:var(--radius-sharp);
  overflow:hidden;
  background:var(--panel-2);
  border:var(--bw) solid var(--ink);
  box-shadow: inset 0 0 0 2px rgba(247,208,70,.08);
}
canvas{
  display:block; width:100%; height:100%;
  touch-action:none; user-select:none;
  -webkit-user-select:none; -webkit-touch-callout:none;
}

/* ============================================================
   HUD (in-game stats)
   ============================================================ */
.hudMini{
  position:absolute;
  top:12px; left:12px;
  display:flex; flex-direction:column;
  gap:3px;
  padding:8px 10px 8px 12px;
  border-radius:var(--radius-sharp);
  background:var(--ink);
  border:var(--bw) solid var(--race-yellow);
  box-shadow: 4px 4px 0 var(--race-orange);
  pointer-events:none;
  user-select:none;
  font-family:"Akando", ui-sans-serif, system-ui;
  min-width: 130px;
  z-index:3;
}
.hudMiniRow{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px;
  font-size:11px; letter-spacing:.7px;
  line-height:1.3;
}
.hudMini .hudK{
  color: var(--race-yellow);
  font-weight:900;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:1px;
}
.hudMini b{
  color:#fff;
  font-weight:900;
  font-variant-numeric: tabular-nums;
  font-size:13px;
}
.hudMiniRow:nth-child(1) b{color:var(--race-orange)}
.hudMiniRow:nth-child(2) b{color:var(--race-mint)}
.hudMiniRow:nth-child(3) b{color:var(--race-cyan)}
.hudMiniRow:nth-child(4) b{color:var(--race-yellow)}

.hud{display:none !important}

@media (max-width: 420px){
  .hudMini{top:8px; left:8px; padding:6px 8px; min-width:115px}
  .hudMini .hudK{font-size:9px}
  .hudMini b{font-size:12px}
}

/* ============================================================
   BOTTOM CONTROLS
   ============================================================ */
.bottomBar{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding-bottom: max(4px, env(safe-area-inset-bottom));
  padding-top:4px;
}
.controls{
  display:flex; gap:12px;
  width:100%; max-width:480px; margin:0 auto;
}
.ctrlBtn{
  flex:1; padding:18px 14px;
  border-radius:var(--radius-sharp);
  border:var(--bw-thick) solid var(--ink);
  background:var(--panel);
  color:var(--text);
  font-weight:900; font-size:15px; letter-spacing:1.2px;
  text-transform:uppercase;
  font-family:"Akando",system-ui;
  touch-action:none; user-select:none; -webkit-user-select:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  box-shadow: var(--hs-md);
  transition: transform .06s ease, box-shadow .06s ease, background .12s, color .12s;
  position:relative; overflow:hidden;
  cursor:pointer;
}
.ctrlBtn .ctrlIcon{font-size:18px; line-height:1; font-weight:900}

.ctrlBtn:not(.primary):hover{
  background:var(--race-cyan);
  color:var(--ink);
}
.ctrlBtn:not(.primary):active{
  transform: translate(4px,4px);
  box-shadow: 0 0 0 var(--ink);
}
.ctrlBtn.primary{
  background:var(--race-orange);
  color:var(--ink);
  border-color:var(--ink);
  box-shadow: var(--hs-md);
  text-shadow: 1px 1px 0 rgba(255,255,255,.3);
}
.ctrlBtn.primary:hover{
  background:var(--race-yellow);
}
.ctrlBtn.primary:active{
  transform: translate(4px,4px);
  box-shadow: 0 0 0 var(--ink);
}

/* ============================================================
   BOTTOM SHEET
   ============================================================ */
.sheet{
  position:absolute; inset:0;
  background:rgba(10,10,15,.62);
  display:none;
  padding:18px 18px calc(18px + env(safe-area-inset-bottom));
  align-items:flex-end; justify-content:center;
  z-index:40;
}
:root[data-theme="light"] .sheet{
  background:rgba(30,20,10,.45);
}
.sheet.open{display:flex; animation: fadeIn .15s ease}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}

.sheetPanel{
  width:100%; max-width:540px;
  background:var(--panel);
  border:var(--bw-thick) solid var(--ink);
  border-radius:var(--radius-md);
  box-shadow: var(--hs-xl), var(--hs-lg) var(--race-yellow);
  overflow:hidden;
  animation: slideUp .18s cubic-bezier(.2,.8,.2,1);
}
@keyframes slideUp{from{transform:translateY(24px); opacity:.4} to{transform:translateY(0); opacity:1}}

.sheetHeader{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  border-bottom:var(--bw) solid var(--ink);
  background:var(--race-orange);
}
.sheetHeader h3{
  margin:0; font-size:18px; font-weight:900;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--ink);
  font-family:"Akando", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-shadow: 2px 2px 0 rgba(255,255,255,.25);
}
.sheetHeader .iconBtn{
  background:var(--ink);
  color:var(--race-yellow);
  border-color:var(--ink-2);
  box-shadow: 3px 3px 0 var(--ink-2);
}
.sheetHeader .iconBtn:hover{
  background:var(--race-red);
  color:#fff;
}

.sheetBody{
  padding:18px;
  color:var(--text);
  font-size:14px; line-height:1.6;
  max-height:70vh; overflow-y:auto;
  background:var(--panel);
}
.sheetBody::-webkit-scrollbar{width:8px}
.sheetBody::-webkit-scrollbar-track{background:var(--bg-0)}
.sheetBody::-webkit-scrollbar-thumb{
  background:var(--race-orange);
  border:2px solid var(--ink);
  border-radius:0;
}

.kv{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:12px 2px;
  border-bottom:2px dashed rgba(13,13,20,.18);
  font-size:13px;
}
:root[data-theme="dark"] .kv{
  border-bottom-color: rgba(247,208,70,.25);
}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--text-dim); font-weight:700; letter-spacing:.4px; text-transform:uppercase; font-size:11px}
.kv .v, .kv span{color:var(--text); font-weight:900; text-align:right; font-variant-numeric:tabular-nums}

.row{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}

.btn, .pill{
  flex:1; min-width:130px;
  border:var(--bw) solid var(--ink);
  background:var(--panel-2);
  color:var(--text);
  padding:12px 14px;
  border-radius:var(--radius-sharp);
  font-weight:900; font-size:13px; letter-spacing:1px;
  text-transform:uppercase;
  font-family:"Akando",system-ui;
  box-shadow: var(--hs-sm);
  transition: transform .06s ease, box-shadow .06s ease, background .12s, color .12s;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.btn:hover, .pill:hover{
  background:var(--race-yellow);
  color:var(--ink);
  transform:translate(-1px,-1px);
  box-shadow: var(--hs-md);
}
.btn:active, .pill:active{
  transform:translate(3px,3px);
  box-shadow: 0 0 0 var(--ink);
}
.btn.accent, .pill.primary{
  background:var(--race-orange);
  color:var(--ink);
}
.btn.accent:hover, .pill.primary:hover{
  background:var(--race-yellow);
}
.btn.danger{
  background:var(--race-red);
  color:#fff;
}
.btn.danger:hover{
  background:#ff5a7d;
  color:#fff;
}
.pillHow{
  background:var(--race-mint);
  color:var(--ink);
}
.pillHow:hover{background:#1aeab0; color:var(--ink)}
.pill .pillIcon{width:18px; height:18px; object-fit:contain}

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size:12px; color:var(--race-yellow);
  background:var(--ink);
  padding:3px 8px; border-radius:3px;
  border:1px solid var(--race-yellow);
  font-weight:700;
}

/* ============================================================
   TOAST
   ============================================================ */
.toast{
  position:fixed;                              /* fixed to viewport, not overlap sheet */
  left:50%;
  top:max(16px, env(safe-area-inset-top));     /* top of screen, safe-area aware */
  transform:translateX(-50%) translateY(-12px);
  background:var(--ink);
  border:var(--bw) solid var(--race-yellow);
  color:#fff;
  padding:11px 16px;
  border-radius:var(--radius-sharp);
  font-size:12.5px; font-weight:800; letter-spacing:.4px;
  text-transform:none;                          /* keep message readable, not shouty */
  line-height:1.45;
  display:none; max-width:min(92vw, 440px);
  text-align:center;
  box-shadow: 5px 5px 0 var(--race-orange);
  opacity:0;
  transition: opacity .18s ease, transform .18s ease;
  z-index:9999;                                 /* above everything incl. sheet */
  font-family:"Akando",system-ui;
  pointer-events:none;
}
.toast.show{
  display:block; opacity:1;
  transform:translateX(-50%) translateY(0);
}

.rewardPlus{
  color:var(--race-mint);
  font-weight:900;
  text-shadow: 1px 1px 0 var(--ink);
}
.rewardTxt{color:var(--text-dim); font-weight:700}

/* ============================================================
   LEADERBOARD
   ============================================================ */
#boards{display:flex; flex-direction:column; gap:16px}
.board{
  background:var(--panel-2);
  border:var(--bw) solid var(--ink);
  border-radius:var(--radius-sharp);
  padding:14px;
  box-shadow: var(--hs-md);
}
.boardTitle{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  font-weight:900; color:var(--race-orange);
  text-transform:uppercase; letter-spacing:1.5px; font-size:13px;
  margin-bottom:12px;
  font-family:"Akando",system-ui;
  padding-bottom:8px;
  border-bottom:2px solid var(--ink);
}
.weekCountdownWrap{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:800;
  color:#ffbebe;            /* soft pink label (was red-on-red) */
  padding:4px 10px;
  background:#1a0a10;        /* deep dark maroon for red 7-seg */
  border:2px solid var(--ink);
  border-radius:3px;
  font-size:12px;
  line-height:1;
  max-width:100%;
  flex-wrap:nowrap;
  overflow:hidden;
  white-space:nowrap;
  vertical-align:middle;
  box-shadow: inset 0 0 0 1px rgba(255,70,70,0.25);
}
:root[data-theme="light"] .weekCountdownWrap{
  background:#1a0a10;        /* same dark bg — needed because 7-seg renders red pixels */
  color:#ffdede;
}
:root[data-theme="dark"] .weekCountdownWrap{
  background:#140810;
  color:#ffbebe;
}
.weekCountdownWrap canvas,
.weekCountdownWrap .segCanvas{
  display:inline-block;
  height:14px;
  width:auto;
  max-width:100%;
  vertical-align:middle;
  image-rendering:pixelated;
  flex:0 0 auto;
  /* slight lift so digits don't touch the border */
  margin:0 1px;
}
.segCanvas{
  display:inline-block;
  height:14px;
  width:auto;
  vertical-align:middle;
  image-rendering:pixelated;
}

/* Week row in Menu — prevent overflow on small screens */
.kv:has(.weekCountdownWrap){
  flex-wrap:wrap;
  gap:8px;
}
.kv .v:has(.weekCountdownWrap){
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  max-width:100%;
  overflow:hidden;
}

.boardList{
  display:flex; flex-direction:column; gap:var(--lb-gap);
  max-height: calc(var(--lb-row)*6 + var(--lb-gap)*5 + 4px);
  overflow-y:auto;
  padding-right:4px;
}
.boardList::-webkit-scrollbar{width:6px}
.boardList::-webkit-scrollbar-track{background:var(--bg-0)}
.boardList::-webkit-scrollbar-thumb{background:var(--race-yellow); border-radius:0}

.boardRow{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px;
  border-radius:var(--radius-sharp);
  background:var(--panel);
  border:2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform .08s ease, background .15s, box-shadow .08s;
}
.boardRow:hover{
  transform:translate(-1px,-1px);
  box-shadow: 4px 4px 0 var(--race-orange);
}
.boardRow .rank{
  width:32px; text-align:center;
  font-weight:900; color:var(--text-dim);
  font-size:14px;
  font-family:"Akando",system-ui;
}
.boardRow:nth-child(1) .rank{color:var(--race-yellow)}
.boardRow:nth-child(2) .rank{color:#6a7a85}
.boardRow:nth-child(3) .rank{color:var(--race-orange)}

.boardRow .who{
  flex:1; font-weight:800; color:var(--text);
  font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.boardRow .pts{
  font-weight:900;
  color:var(--race-mint);
  font-variant-numeric: tabular-nums;
  font-size:14px;
}
:root[data-theme="light"] .boardRow .pts{
  color:#058c6a;
}

.copy{color:var(--text-dim); font-size:13px; line-height:1.6}

/* ============================================================
   MENU ITEMS
   ============================================================ */
.menuList{display:flex; flex-direction:column; gap:10px; margin-top:4px}
.menuItem{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px;
  border:var(--bw) solid var(--ink);
  border-radius:var(--radius-sharp);
  background:var(--panel-2);
  color:var(--text);
  cursor:pointer;
  font-weight:800; letter-spacing:.5px;
  font-family:"Akando",system-ui;
  font-size:14px;
  text-transform:uppercase;
  transition: transform .06s ease, box-shadow .06s ease, background .15s;
  text-align:left; width:100%;
  box-shadow: var(--hs-sm);
}
.menuItem:hover{
  background:var(--race-yellow);
  color:var(--ink);
  transform:translate(-1px,-1px);
  box-shadow: var(--hs-md);
}
.menuItem:active{
  transform:translate(3px,3px);
  box-shadow: 0 0 0 var(--ink);
}
.menuItem .mi-icon{
  width:36px; height:36px; border-radius:var(--radius-sharp);
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--race-orange);
  border:2px solid var(--ink);
  font-size:18px;
  color:var(--ink);
  font-weight:900;
}
.menuItem:hover .mi-icon{
  background:var(--ink);
  color:var(--race-yellow);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 420px){
  .title{font-size:16px; letter-spacing:1.5px}
  .badge{font-size:11px; padding:8px 12px}
  .ctrlBtn{padding:16px 10px; font-size:13px}
  :root{ --bw: 2.5px; --bw-thick: 3px; }
}
@media (max-height: 720px){
  .ctrlBtn{padding:14px 12px}
}

/* Subtle border-color pulse */
@keyframes brutPulse{
  0%,100%{box-shadow: var(--hs-xl), var(--hs-lg) var(--race-orange)}
  50%    {box-shadow: var(--hs-xl), var(--hs-lg) var(--race-yellow)}
}
.gameCard{animation: brutPulse 5s ease-in-out infinite}

/* ============================================================
   SHEET BODY POLISH
   ============================================================ */
.menuGrid{display:flex; flex-direction:column; gap:0; margin-bottom:8px}

.btnRow{
  display:flex; gap:12px; margin-top:14px; flex-wrap:wrap;
}

.commitWrap{margin-top:14px}

.alertRed{
  margin-top:14px;
  padding:12px 14px;
  border-radius:var(--radius-sharp);
  background:var(--race-red);
  border:var(--bw) solid var(--ink);
  color:#fff;
  font-size:12.5px; line-height:1.5; font-weight:700;
  box-shadow: var(--hs-sm);
}

/* ---- Connect wallet sheet ---- */
.connectWalletSheet{display:flex; flex-direction:column; gap:12px}
.walletOptionList{display:flex; flex-direction:column; gap:10px}
.walletOption{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:4px;
  width:100%; text-align:left;
  padding:14px 16px;
  border-radius:var(--radius-sharp);
  border:var(--bw) solid var(--ink);
  background:var(--panel-2);
  color:var(--text);
  cursor:pointer;
  box-shadow: var(--hs-sm);
  transition: transform .06s ease, box-shadow .06s ease, background .12s, color .12s;
}
.walletOption:hover{
  background:var(--race-cyan);
  color:var(--ink);
  transform:translate(-1px,-1px);
  box-shadow: var(--hs-md);
}
.walletOption:active{
  transform:translate(3px,3px);
  box-shadow: 0 0 0 var(--ink);
}
.walletOption:disabled{opacity:.55; cursor:wait}

.walletOptionTitle{
  font-weight:900; font-size:14px;
  letter-spacing:.5px; text-transform:uppercase;
}
.walletOptionSub{
  font-weight:600; font-size:11.5px; opacity:.75;
  letter-spacing:.3px;
}

.walletHint{
  font-size:12.5px; line-height:1.55;
  padding:12px 14px;
  border:var(--bw) solid var(--race-yellow);
  border-left-width:6px;
  background:var(--ink);
  color:#fff;
  border-radius:var(--radius-sharp);
}

/* ============================================================
   WALLETCONNECT — enhanced wallet picker styles
   ============================================================ */
.walletOption{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:12px !important;
}
.walletOption.recommended{
  border-color: var(--race-orange);
  box-shadow: var(--hs-sm), inset 0 0 0 2px var(--race-orange);
}
.walletOptionIcon{
  width:44px; height:44px;
  flex:0 0 44px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--race-yellow);
  border:2px solid var(--ink);
  border-radius:var(--radius-sharp);
  font-size:22px;
  box-shadow: 2px 2px 0 var(--ink);
}
.walletOption:hover .walletOptionIcon{
  background:var(--ink);
  color:var(--race-yellow);
}
.walletOptionBody{
  display:flex; flex-direction:column;
  align-items:flex-start; gap:3px;
  flex:1; min-width:0;
}
.walletOptionTitle{
  display:inline-flex; align-items:center; gap:8px;
  flex-wrap:wrap;
}
.walletRecBadge{
  font-size:9.5px;
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:3px 8px;
  background:var(--race-orange);
  color:var(--ink);
  border:2px solid var(--ink);
  border-radius:3px;
  line-height:1;
}
.walletOption:hover .walletRecBadge{
  background:var(--ink);
  color:var(--race-orange);
  border-color:var(--race-orange);
}

/* WalletConnect modal — ensure it sits above our sheet */
wcm-modal, w3m-modal{
  --wcm-z-index: 99999 !important;
  z-index: 99999 !important;
}

/* ---- Leaderboard Lock screen ---- */
.lbLocked{
  display:flex; flex-direction:column; align-items:center;
  gap:16px; padding:10px 4px 4px; text-align:center;
}
.lbLockedIcon{
  font-size:52px;
  padding:12px;
  background:var(--race-red);
  border:var(--bw-thick) solid var(--ink);
  border-radius:var(--radius-sharp);
  box-shadow: var(--hs-md);
  animation: lockShake 3s ease-in-out infinite;
  display:inline-block;
}
@keyframes lockShake{
  0%,100%{transform:rotate(-2deg)}
  50%    {transform:rotate(2deg)}
}
.lbLockedTitle{
  font-family:"Akando", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:22px; letter-spacing:2.5px; font-weight:900;
  color:var(--race-orange);
  text-shadow: 3px 3px 0 var(--ink);
  text-transform:uppercase;
}
.lbLockedDesc{
  font-size:13.5px; line-height:1.6;
  color:var(--text);
  max-width:420px;
  font-weight:600;
}
.lbLockedDesc b{
  color:var(--race-orange);
  background:var(--ink);
  padding:1px 6px;
  border-radius:3px;
  color:var(--race-yellow);
}

.lbProgressWrap{
  width:100%; max-width:420px;
  margin:6px 0 2px;
}
.lbProgressBar{
  width:100%; height:18px;
  background:var(--ink);
  border:var(--bw) solid var(--ink);
  border-radius:var(--radius-sharp);
  overflow:hidden;
  box-shadow: var(--hs-sm);
  position:relative;
}
.lbProgressFill{
  height:100%;
  background:repeating-linear-gradient(
    45deg,
    var(--race-orange) 0 12px,
    var(--race-yellow) 12px 24px
  );
  border-radius:0;
  transition: width .5s cubic-bezier(.2,.8,.2,1);
  position:relative;
}
.lbProgressFill::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,.2) 50%, transparent 100%);
  animation: progShine 2.2s linear infinite;
}
@keyframes progShine{
  from{transform:translateX(-100%)}
  to{transform:translateX(100%)}
}
.lbProgressTxt{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:10px; font-size:13px; font-weight:900; color:var(--text);
  font-variant-numeric: tabular-nums;
  text-transform:uppercase; letter-spacing:.8px;
}
.lbProgressTxt b{color:var(--race-orange)}
.lbProgressPct{color:var(--race-mint)}
:root[data-theme="light"] .lbProgressPct{color:#058c6a}

.lbLockedHint{
  font-size:12.5px; line-height:1.55;
  padding:12px 14px;
  border:var(--bw) solid var(--race-orange);
  border-left-width:6px;
  background:var(--ink);
  color:#fff;
  border-radius:var(--radius-sharp);
  max-width:440px;
  font-weight:600;
}
.lbLockedHint b{color:var(--race-yellow)}

/* ---- Leaderboard access card ---- */
.lbAccessCard{
  margin-top:14px;
  padding:14px;
  border-radius:var(--radius-sharp);
  border:var(--bw) solid var(--ink);
  background:var(--panel-2);
  box-shadow: var(--hs-sm);
}
.lbAccessCard.unlocked{
  box-shadow: var(--hs-sm), inset 0 0 0 2px var(--race-mint);
}
.lbAccessCard.locked{
  box-shadow: var(--hs-sm), inset 0 0 0 2px var(--race-red);
}
.lbAccessHead{
  display:flex; align-items:center; gap:10px;
  margin-bottom:10px;
}
.lbAccessIcon{font-size:18px}
.lbAccessTitle{
  flex:1;
  font-weight:900; letter-spacing:1.2px; text-transform:uppercase;
  font-size:13px; color:var(--text);
}
.lbAccessStatus{
  font-size:10.5px; font-weight:900; letter-spacing:1.5px;
  padding:4px 10px;
  border:2px solid var(--ink);
  border-radius:3px;
  text-transform:uppercase;
}
.lbAccessCard.unlocked .lbAccessStatus{
  color:var(--ink); background:var(--race-mint);
}
.lbAccessCard.locked .lbAccessStatus{
  color:#fff; background:var(--race-red);
}
.lbAccessBar{
  width:100%; height:10px;
  background:var(--ink);
  border:2px solid var(--ink);
  border-radius:var(--radius-sharp); overflow:hidden;
}
.lbAccessFill{
  height:100%;
  background:repeating-linear-gradient(
    45deg,
    var(--race-orange) 0 10px,
    var(--race-yellow) 10px 20px
  );
  transition: width .5s cubic-bezier(.2,.8,.2,1);
}
.lbAccessInfo{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin-top:10px;
  font-size:11.5px; color:var(--text-dim);
  flex-wrap:wrap;
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
}
.lbAccessInfo b{color:var(--text); font-weight:900; font-variant-numeric:tabular-nums}
.lbAccessNote{font-weight:800}
.lbAccessNote.good{color:var(--race-mint)}
:root[data-theme="light"] .lbAccessNote.good{color:#058c6a}

.boardsNotice{
  min-height:0; font-size:12.5px; color:var(--race-mint);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.5px;
}
:root[data-theme="light"] .boardsNotice{color:#058c6a}
.boardsNotice:empty{display:none}

/* ============================================================
   THEME SWITCHER CARD (inside Menu sheet)
   ============================================================ */
.themeSwitchCard{
  margin-top:14px;
  padding:14px;
  border-radius:var(--radius-sharp);
  border:var(--bw) solid var(--ink);
  background:var(--panel-2);
  box-shadow: var(--hs-sm);
}
.themeSwitchHead{
  display:flex; align-items:center; gap:10px;
  margin-bottom:12px;
}
.themeSwitchIcon{
  font-size:18px;
  width:30px; height:30px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--race-yellow);
  border:2px solid var(--ink);
  border-radius:3px;
}
.themeSwitchTitle{
  flex:1;
  font-weight:900; letter-spacing:1.2px; text-transform:uppercase;
  font-size:13px; color:var(--text);
  font-family:"Akando",system-ui;
}
.themeSwitchOpts{
  display:flex; gap:10px;
}
.themeOpt{
  flex:1;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 14px;
  border:var(--bw) solid var(--ink);
  border-radius:var(--radius-sharp);
  background:var(--panel);
  color:var(--text);
  font-weight:900; font-size:13px; letter-spacing:1px;
  text-transform:uppercase;
  font-family:"Akando",system-ui;
  box-shadow: var(--hs-sm);
  cursor:pointer;
  transition: transform .06s ease, box-shadow .06s ease, background .15s, color .15s;
}
.themeOpt:hover{
  transform:translate(-1px,-1px);
  box-shadow: var(--hs-md);
}
.themeOpt:active{
  transform:translate(3px,3px);
  box-shadow: 0 0 0 var(--ink);
}
.themeOpt.active{
  background:var(--race-orange);
  color:var(--ink);
  box-shadow: var(--hs-md);
}
.themeOpt[data-theme="light"].active{
  background:var(--race-yellow);
  color:var(--ink);
}
.themeOpt[data-theme="dark"].active{
  background:var(--ink);
  color:var(--race-yellow);
}
.themeOptIcon{font-size:16px}
.themeOptLbl{letter-spacing:1.2px}

/* Withdraw USDC amount form */
.fieldLabel{
  display:block;
  margin:14px 0 8px;
  font-size:13px;
  font-weight:700;
  color:var(--text);
}
.wdInputRow{
  display:flex;
  gap:8px;
  align-items:center;
  margin-bottom:12px;
}
.wdInput{
  flex:1;
  min-width:0;
  border:var(--bw) solid var(--ink);
  border-radius:var(--radius-md);
  background:var(--panel);
  color:var(--text);
  font-size:18px;
  font-weight:800;
  padding:12px 14px;
  outline:none;
  box-shadow:var(--hs-sm);
}
.wdInput:focus{
  border-color:var(--race-orange);
}
.mutedNote{
  margin:10px 0 0;
  font-size:12px;
  color:var(--muted);
}