/* ============================================================
   dartbot.css — purple scheme matching game.html
   ============================================================ */

/* ── Fonts ─────────────────────────────────────────────────── */
html { --font-display: 'Bebas Neue', sans-serif; --font-body: 'DM Sans', sans-serif; }
body, input, select, button, textarea { font-family: 'DM Sans', sans-serif !important; }

/* ── Purple accent vars (replacing amber) ───────────────────── */
:root {
  --pu:         #99231a;
  --pu-2:       #99231a;
  --pu-3:       #e8f1e8;
  --pu-bg:      rgba(153,35,26,0.12);
  --pu-bg-2:    rgba(153,35,26,0.22);
  --pu-border:  rgba(153,35,26,0.35);
  --shadow-pu:  0 4px 20px rgba(153,35,26,0.3);
  --grad-pu:    linear-gradient(135deg, #99231a 0%, #99231a 100%);
  --blue-bg-2:  rgba(153,35,26,0.22);
  --green-bg:   rgba(153,35,26,0.12);
  --green-2:    #99231a;
}

/* ── Body offset ─────────────────────────────────────────────── */
body { padding-top: 60px; }

/* ══════════════════════════════════════════════════════════════
   TOPBAR — matches game.html exactly
══════════════════════════════════════════════════════════════ */
header.topbar {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 60px !important;
  background: rgba(6,8,16,0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(18,21,23,0.07) !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  z-index: 300 !important;
  box-sizing: border-box !important;
}
[data-theme="light"] header.topbar {
  background: rgba(18,21,23,0.96) !important;
  border-bottom-color: rgba(0,0,0,0.10) !important;
}
[data-theme="light"] .topbar-page { color: rgba(0,0,0,0.40); }
[data-theme="light"] .topbar-user { color: #f2efe8; }
.topbar-logo-mark {
  width: 30px; height: 30px; border-radius: 7px;
  background: linear-gradient(135deg, #99231a 0%, #99231a 50%, #99231a 100%) !important;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif; font-size: 17px; color: #fff;
  box-shadow: 0 0 14px rgba(153,35,26,0.35); flex-shrink: 0;
}
.topbar-logo {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 20px !important; letter-spacing: 3px !important;
  background: linear-gradient(135deg, #99231a, #99231a, #99231a) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.topbar-page { font-size: 13px; color: var(--text-3); font-weight: 500; letter-spacing: 0.5px; }
.topbar-user { font-weight: 700; color: var(--text); }

/* ── Blobs ───────────────────────────────────────────────────── */
.blob { position: fixed; border-radius: 50%; pointer-events: none; filter: blur(80px); opacity: 0.07; z-index: 0; }
.blob-1 { width: 600px; height: 600px; top: -200px; left: -200px; background: radial-gradient(circle, #99231a, transparent 70%); }
.blob-2 { width: 500px; height: 500px; bottom: -150px; right: -150px; background: radial-gradient(circle, #99231a, transparent 70%); }
header.topbar, #setupScreen, #gameScreen, #resultScreen { position: relative; z-index: 1; }

/* ══════════════════════════════════════════════════════════════
   SETUP SCREEN
══════════════════════════════════════════════════════════════ */
.bot-setup { max-width: 680px; padding-top: 28px; padding-bottom: 48px; }

.setup-hero { text-align: center; padding: 28px 0 36px; animation: fadeUp .35s ease both; }
.bot-icon-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 16px; margin-bottom: 14px;
  background: var(--grad-pu);
  font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 2px; color: #fff;
  box-shadow: var(--shadow-pu);
}
.setup-hero h1 { margin-bottom: 8px; }

.setup-card {
  background: var(--grad-card); border: 1px solid var(--border-2);
  border-radius: var(--r-xl); padding: 22px; margin-bottom: 16px;
  box-shadow: var(--shadow); animation: fadeUp .35s ease both;
}
.setup-card-title {
  font-size: 11px; font-weight: 900; text-transform: uppercase;
  letter-spacing: 1.2px; color: var(--text-3); margin-bottom: 16px;
}
.setup-row { display: flex; gap: 20px; flex-wrap: wrap; }
.setup-row .field { flex: 1; min-width: 180px; }

/* Segmented buttons — purple active */
.seg-group { display: flex; gap: 6px; flex-wrap: wrap; }
.seg-btn {
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: var(--r-sm); color: var(--text-2);
  padding: 8px 14px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .15s;
}
.seg-btn:hover { border-color: var(--pu); color: var(--pu-2); }
.seg-btn.active { background: var(--pu-bg-2); border-color: var(--pu); color: var(--pu-2); }

/* Difficulty tabs */
.diff-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-2); margin-bottom: 20px; }
.diff-tab {
  background: none; border: none; padding: 8px 16px;
  font-size: 14px; font-weight: 600; color: var(--text-3); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s;
}
.diff-tab:hover { color: var(--text-2); }
.diff-tab.active { color: var(--pu-2); border-bottom-color: var(--pu); }

.diff-panel { display: none; }
.diff-panel.active { display: block; }
.tab-hint { font-size: 13px; color: var(--text-3); margin-bottom: 16px; }

/* Level grid */
.level-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.level-btn {
  background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r);
  padding: 12px 6px; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; gap: 4px; transition: all .15s;
}
.level-btn:hover { border-color: var(--pu); }
.level-btn.active { background: var(--pu-bg-2); border-color: var(--pu); }
.lv-num { font-size: 20px; font-weight: 900; color: var(--text); }
.lv-avg { font-size: 11px; color: var(--text-3); }
.level-btn.active .lv-num { color: var(--pu-2); }
.level-btn.active .lv-avg { color: var(--pu); }

/* Manual avg */
.avg-input-row { display: flex; align-items: center; gap: 12px; }
.avg-input {
  width: 120px; background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: var(--r); color: var(--text); font-size: 24px; font-weight: 700;
  padding: 10px 14px; text-align: center; transition: border-color .15s;
}
.avg-input:focus { outline: none; border-color: var(--pu); }
.avg-label { font-size: 14px; color: var(--text-3); }
.avg-range-hint { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); margin-top: 10px; }

/* Start button — purple gradient */
.btn-start {
  width: 100%; margin-top: 8px;
  background: var(--grad-pu); border-color: transparent;
  font-size: 17px; font-weight: 800; padding: 16px; border-radius: var(--r-xl);
  letter-spacing: 0.5px; box-shadow: var(--shadow-pu); transition: opacity .15s, transform .15s;
}
.btn-start:hover { opacity: 0.9; transform: translateY(-1px); }

/* ══════════════════════════════════════════════════════════════
   GAME SCREEN
══════════════════════════════════════════════════════════════ */
.match-bar {
  background: var(--surface); border-bottom: 1px solid var(--border-2);
  padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.match-bar-info { display: flex; gap: 6px; flex-wrap: wrap; }
.pill.pill-purple { background: var(--pu-bg); color: var(--pu-2); border: 1px solid var(--pu-border); }

/* ── 3-col game grid: player | control | bot ── */
.game-grid {
  display: grid;
  grid-template-columns: 1fr 320px 1fr;
  gap: 8px;
  padding: 10px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 900px) {
  .game-grid { grid-template-columns: 1fr 280px 1fr; }
}
@media (max-width: 700px) {
  .game-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }
  #p1Card  { grid-column: 1; grid-row: 1; }
  #p2Card  { grid-column: 2; grid-row: 1; }
  #inputPanel { grid-column: 1 / -1; grid-row: 2; }
}

/* ── Player cards — freeplay style ── */
.player-card {
  background: var(--grad-card); border: 1px solid var(--border-2);
  border-radius: var(--r-xl); padding: 16px 18px; box-shadow: var(--shadow);
  transition: border-color .2s, box-shadow .2s;
}
.player-card.throwing { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), 0 4px 20px rgba(153,35,26,0.25); }
.player-card-bot.throwing { border-color: var(--pu); box-shadow: 0 0 0 1px var(--pu), var(--shadow-pu); }

.pc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.pc-name { font-size: 17px; font-weight: 800; color: var(--text); }
.pc-score {
  font-size: clamp(52px, 9vw, 80px); font-weight: 900; letter-spacing: -3px;
  line-height: 1.05; margin: 6px 0 10px; transition: color .2s;
}
.pc-score.low { color: var(--pu-2); }
.pc-score.pulse { animation: scorePulse .25s ease; }

/* Stat boxes — like freeplay */
.pc-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px; margin-bottom: 10px;
}
.stat-box {
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: 10px; padding: 8px 6px; text-align: center;
}
.sb-val { font-size: 18px; font-weight: 900; color: var(--text); line-height: 1.1; }
.sb-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-3); margin-top: 2px; }

/* Extra pills row */
.pc-extras { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.pill-180     { background: rgba(168,115,12,0.1); color: #a8730c; border-color: rgba(168,115,12,0.25) !important; }
.pill-180-bot { background: var(--pu-bg); color: var(--pu-2); border-color: var(--pu-border) !important; }

/* Checkout banner */
.co-banner {
  display: flex; align-items: center; gap: 8px;
  background: var(--green-bg); border: 1px solid rgba(153,35,26,0.3);
  border-radius: var(--r); padding: 7px 10px; font-size: 13px; margin-bottom: 8px;
}
.co-banner.co-hidden { display: none; }
.co-banner-bot { background: var(--pu-bg); border-color: var(--pu-border); }
.co-score { font-weight: 900; font-size: 14px; color: var(--green-2); }
.co-banner-bot .co-score { color: var(--pu-2); }
.co-route { flex: 1; color: var(--text-2); font-size: 13px; }
.co-darts { color: var(--text-3); font-size: 11px; }

/* Visit log on player card */
.pc-visit-log-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--text-3); margin-bottom: 6px; margin-top: 4px;
}
.visit-log {
  min-height: 36px; max-height: 130px; overflow-y: auto;
  font-size: 13px; font-weight: 700; color: var(--text-2);
  display: flex; flex-direction: column; gap: 2px;
}
.visit-log::-webkit-scrollbar { width: 3px; }
.visit-log::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 2px; }

/* ── Centre control card — freeplay style ── */
.ctrl-card {
  background: var(--grad-card); border: 1px solid var(--border-2);
  border-radius: var(--r-xl); padding: 12px; box-shadow: var(--shadow);
}

/* The central .ctrl-score-row + .score-display block was removed
   2026-05 — the live remaining preview lives on the active player
   card now (.pc-score.bust handles the BUST state). */

/* Mini stats strip in centre — like freeplay's leg/avg summary */
.ctrl-stats-strip {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 4px; align-items: center;
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; font-size: 12px;
}
.css-p1 { display: flex; flex-direction: column; gap: 1px; }
.css-p2 { display: flex; flex-direction: column; gap: 1px; text-align: right; }
.css-mid { font-size: 10px; font-weight: 900; color: var(--text-3); text-align: center; text-transform: uppercase; letter-spacing: 1px; }
.css-val { font-size: 22px; font-weight: 900; color: var(--blue-2); line-height: 1; }
.css-val-bot { color: var(--pu-2); }
.css-lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-3); }
.css-avg { font-size: 12px; font-weight: 800; color: var(--blue-2); margin-top: 4px; }
.css-sub { font-size: 9px; color: var(--text-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.css-180  { font-size: 12px; font-weight: 800; color: #a8730c; }
.css-180b { font-size: 12px; font-weight: 800; color: var(--pu-2); }
.css-p2 .css-avg  { color: var(--pu-2); }

/* Numpad — DEPRECATED 2026-05.
   Replaced by canonical .numpad in css/style.css. The dartbot styles
   here were the closest to the new canonical, which preserves the
   blue Enter button, red-tinted Miss, var(--surface-2) base. The
   .np-quick and .np-180-big rules are dropped since those buttons
   no longer exist in the markup. */

/* Dart selector */
.dart-selector { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ds-label { font-size: 12px; color: var(--text-3); white-space: nowrap; }

.action-row { display: flex; gap: 6px; margin-bottom: 0; }
.btn-submit-text {
  flex: 1; background: var(--grad-pu); border-color: transparent;
  font-size: 14px; font-weight: 700; box-shadow: var(--shadow-pu);
}
.btn-submit-text:hover { opacity: 0.9; }

/* Visit feed inside ctrl card */
#visitFeedWrap {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.vf-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.vf-title { font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-3); }
.vf-count { font-size: 9px; font-weight: 800; color: var(--text-3); }
.vf-list { max-height: 160px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.vf-list::-webkit-scrollbar { width: 3px; }
.vf-list::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 2px; }
.vf-row {
  display: grid; grid-template-columns: auto 1fr auto auto;
  gap: 6px; align-items: center;
  padding: 5px 8px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--surface-2);
  animation: vfSlideIn .18s ease both;
}
@keyframes vfSlideIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
.vf-row.vf-bust { border-color: rgba(213,55,42,0.18); background: rgba(213,55,42,0.05); }
.vf-row.vf-co   { border-color: rgba(153,35,26,0.28); background: rgba(153,35,26,0.06); }
.vf-row.vf-180  { border-color: rgba(168,115,12,0.25); background: rgba(168,115,12,0.05); }
.vf-player { font-size: 10px; font-weight: 800; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60px; }
.vf-player-bot { color: var(--pu-2) !important; }
.vf-score { font-size: 13px; font-weight: 900; color: var(--text); }
.vf-row.vf-bust .vf-score { color: rgba(213,55,42,0.8); text-decoration: line-through; }
.vf-row.vf-180  .vf-score { color: #a8730c; }
.vf-row.vf-co   .vf-score { color: #99231a; }
.vf-remain { font-size: 11px; font-weight: 700; color: var(--text-3); }
.vf-tag { font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: .6px; padding: 2px 6px; border-radius: 999px; white-space: nowrap; }
.vf-tag-bust { background: rgba(213,55,42,0.15);  color: #8c2622; border: 1px solid rgba(213,55,42,0.25); }
.vf-tag-co   { background: rgba(153,35,26,0.15);  color: #b73a2e; border: 1px solid rgba(153,35,26,0.25); }
.vf-tag-180  { background: rgba(168,115,12,0.12);  color: #a8730c; border: 1px solid rgba(168,115,12,0.25); }
.vf-tag-leg  { background: var(--surface-3); color: var(--text-3); border: 1px solid var(--border-2); }


/* ══════════════════════════════════════════════════════════════
   RESULT SCREEN
══════════════════════════════════════════════════════════════ */
.result-card {
  max-width: 560px; margin: 40px auto;
  background: var(--grad-card); border: 1px solid var(--border-2);
  border-radius: var(--r-xl); padding: 36px 28px; box-shadow: var(--shadow);
  text-align: center; animation: fadeUp .4s ease both;
}
.result-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 20px;
  margin: 0 auto 16px; font-family: 'Bebas Neue', sans-serif;
  font-size: 20px; letter-spacing: 2px; color: #fff; background: var(--surface-3);
}
.result-mark[data-result="win"]  { background: linear-gradient(135deg, #1e7a3e, #145229); box-shadow: 0 4px 24px rgba(30,122,62,0.4); }
.result-mark[data-result="win"]::after  { content: 'WIN'; }
.result-mark[data-result="loss"] { background: var(--grad-pu); box-shadow: var(--shadow-pu); }
.result-mark[data-result="loss"]::after { content: 'LOSS'; }
.result-card h2 { margin-bottom: 6px; }

.result-stats-grid {
  display: flex; align-items: flex-start; margin: 28px 0 24px;
  background: var(--surface); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border-2);
}
.rs-col { flex: 1; padding: 20px 16px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rs-divider { display: flex; align-items: center; font-size: 13px; font-weight: 900; color: var(--text-3); padding: 0 10px; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.rs-name  { font-size: 15px; font-weight: 800; margin-bottom: 8px; }
.rs-avg   { font-size: 32px; font-weight: 900; color: var(--blue-2); }
.rs-legs  { font-size: 28px; font-weight: 900; margin-top: 8px; }
.rs-label { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; }
.rs-stat  { display: flex; justify-content: space-between; width: 100%; font-size: 13px; color: var(--text-2); margin-top: 4px; }
.rs-stat span:last-child { font-weight: 700; color: var(--text); }
.result-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* ── Animations ─────────────────────────────────────────────── */
@keyframes fadeUp   { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes scorePulse { 0%{transform:scale(1)} 50%{transform:scale(1.08)} 100%{transform:scale(1)} }
@keyframes pulse    { 0%,100%{opacity:1} 50%{opacity:.5} }
@keyframes slideIn  { from{opacity:0;transform:translateX(-6px)} to{opacity:1;transform:none} }

/* Bot thinking strip */
.bot-thinking {
  display: none; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--pu-bg); border: 1px solid var(--pu-border);
  border-radius: var(--r); font-size: 13px; color: var(--pu-2);
  margin-bottom: 8px; animation: pulse 1.2s ease-in-out infinite;
}
.bot-thinking.visible { display: flex; }

/* ══════════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES
══════════════════════════════════════════════════════════════ */

/* Purple vars lighten for light mode */
[data-theme="light"] { --pu: #701812; --pu-2: #701812; --pu-bg: rgba(112,24,18,0.08); --pu-border: rgba(112,24,18,0.28); }

/* Setup screen */
[data-theme="light"] .setup-card          { background: #ffffff; border-color: rgba(18,21,23,0.042); }
[data-theme="light"] .setup-card-title    { color: #7b8896; }
[data-theme="light"] .seg-btn             { background: #121517; border-color: rgba(0,0,0,0.14); color: #c6bfae; }
[data-theme="light"] .seg-btn:hover       { border-color: #701812; color: #701812; }
[data-theme="light"] .seg-btn.active      { background: rgba(112,24,18,0.10); border-color: #701812; color: #701812; }
[data-theme="light"] .diff-tabs           { border-bottom-color: rgba(18,21,23,0.042); }
[data-theme="light"] .diff-tab            { color: #7b8896; }
[data-theme="light"] .diff-tab.active     { color: #701812; border-bottom-color: #701812; }
[data-theme="light"] .tab-hint            { color: #7b8896; }
[data-theme="light"] .level-btn           { background: #121517; border-color: rgba(0,0,0,0.14); }
[data-theme="light"] .level-btn:hover     { border-color: #701812; }
[data-theme="light"] .level-btn.active    { background: rgba(112,24,18,0.10); border-color: #701812; }
[data-theme="light"] .lv-num              { color: #f2efe8; }
[data-theme="light"] .lv-avg              { color: #7b8896; }
[data-theme="light"] .level-btn.active .lv-num { color: #701812; }
[data-theme="light"] .level-btn.active .lv-avg { color: #701812; }
[data-theme="light"] .avg-input           { background: #121517; border-color: rgba(0,0,0,0.14); color: #f2efe8; }
[data-theme="light"] .avg-input:focus     { border-color: #701812; }
[data-theme="light"] .avg-label           { color: #7b8896; }
[data-theme="light"] .avg-range-hint      { color: #7b8896; }

/* Game screen */
[data-theme="light"] .match-bar           { background: #121517; border-bottom-color: rgba(0,0,0,0.10); }
[data-theme="light"] .player-card         { background: #ffffff; border-color: rgba(18,21,23,0.042); }
[data-theme="light"] .player-card.throwing { border-color: rgba(112,24,18,0.50); box-shadow: 0 0 0 1px rgba(112,24,18,0.20), 0 4px 16px rgba(18,21,23,0.028); }
[data-theme="light"] .player-card-bot.throwing { border-color: #701812; box-shadow: 0 0 0 1px rgba(112,24,18,0.30), 0 4px 16px rgba(18,21,23,0.028); }
[data-theme="light"] .ctrl-card           { background: #ffffff; border-color: rgba(18,21,23,0.042); }
[data-theme="light"] .pc-score.bust       { color: #8c2622; }

/* Visit feed */
[data-theme="light"] #visitFeedWrap       { border-top-color: rgba(0,0,0,0.09); }
[data-theme="light"] .vf-row              { background: rgba(0,0,0,0.03); border-color: rgba(18,21,23,0.028); }
[data-theme="light"] .vf-row.vf-bust      { background: rgba(213,55,42,0.05); border-color: rgba(213,55,42,0.15); }
[data-theme="light"] .vf-row.vf-co        { background: rgba(153,35,26,0.05); border-color: rgba(153,35,26,0.18); }
[data-theme="light"] .vf-row.vf-180       { background: rgba(168,115,12,0.05); border-color: rgba(168,115,12,0.18); }
[data-theme="light"] .vf-tag-leg          { background: rgba(18,21,23,0.017); color: #7b8896; border-color: rgba(0,0,0,0.10); }

/* Numpad light-mode overrides removed 2026-05 — canonical .np-btn in
   css/style.css uses var(--surface-2) which already swaps correctly under
   [data-theme="light"]. .np-quick is gone from markup. */

/* Result screen */
[data-theme="light"] .result-card        { background: #ffffff; border-color: rgba(18,21,23,0.042); }
[data-theme="light"] .result-stats-grid  { background: #121517; border-color: rgba(0,0,0,0.10); }
[data-theme="light"] .rs-divider         { color: #7b8896; border-color: rgba(0,0,0,0.10); }
[data-theme="light"] .rs-label           { color: #7b8896; }
[data-theme="light"] .rs-stat            { color: #c6bfae; }
[data-theme="light"] .rs-stat span:last-child { color: #f2efe8; }