/* =========================================================================
   App-specific styles, built on the Hearth tokens in theme.css.
   (No gold/navy here — everything reads from CSS variables.)
   ========================================================================= */

.panel.hidden { display: none; }

/* ---- view header ---- */
.view-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.view-head h2 { font-size: 24px; }
.view-head p { margin-top: 4px; }
.head-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.section-h { margin: 28px 0 14px; font-size: 16px; font-weight: 600; }
.loading { color: var(--fg-3); padding: 24px 0; font-size: 14px; }
.link-strong { color: var(--fg-1); font-weight: 600; }
.link-strong:hover { color: var(--brand-ember-deep); }
.inline-i { width: 13px; height: 13px; vertical-align: -2px; }
.inline-i.warn { color: var(--danger); }

/* ---- score quality colors ---- */
.sc-good { color: var(--success); }
.sc-ok   { color: var(--fg-1); }
.sc-mid  { color: var(--warning); }
.sc-bad  { color: var(--danger); }

/* ---- toggle label (distributions) ---- */
.toggle-label { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.toggle-text { font-size: 13px; color: var(--fg-2); }

/* =========================================================================
   Tables (champion roster + player/leaderboard)
   ========================================================================= */
/* shell = count-bar header layer + the scrollable table beneath it */
.table-shell { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.table-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--bg-sunken);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.table-shell .table-wrap { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.table-bar-wrap { flex-wrap: wrap; }
.table-bar-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.count-pill {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: 13px; font-weight: 600; color: var(--fg-1);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-full); padding: 5px 12px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.count-pill .count-num { color: var(--brand-ember-deep); }
.count-pill .count-unit { color: var(--fg-3); font-weight: 500; font-size: 12px; }
.field-sm { height: 36px; padding: 0 12px; font-size: 13px; }
.table-shell .table-wrap { border: none; }

/* clearable search input (✕ appears when there is text) */
.search-wrap { position: relative; display: inline-flex; }
.search-wrap .field { width: 100%; padding-right: 32px; }
.search-clear {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  display: none; align-items: center; justify-content: center;
  width: 24px; height: 24px; border: none; background: transparent;
  color: var(--fg-4); cursor: pointer; border-radius: var(--radius-sm);
  transition: color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.search-clear:hover { color: var(--fg-1); background: var(--surface-hover); }
.search-clear .lucide { width: 15px; height: 15px; }
.search-wrap.has-text .search-clear { display: inline-flex; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); width: 100%; background: var(--surface); }
table.roster { border-collapse: collapse; width: 100%; font-size: 14px; }
table.roster th, table.roster td { padding: 9px 12px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); }
/* let the wordy list columns wrap so the champion roster fits without h-scroll */
table.roster td.cell-wrap { white-space: normal; min-width: 78px; max-width: 158px; line-height: 1.35; }
table.roster thead th, table.roster tr:first-child th {
  position: sticky; top: 0; background: var(--surface); color: var(--fg-3);
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
  cursor: pointer; user-select: none; z-index: 1;
}
table.roster thead th:hover { color: var(--fg-1); }
table.roster th.sorted { color: var(--brand-ember-deep); }
table.roster th.sorted.asc::after { content: " ▲"; font-size: 9px; }
table.roster th.sorted.desc::after { content: " ▼"; font-size: 9px; }
table.roster th.num, table.roster td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.roster tbody tr:hover, table.roster tr:hover { background: var(--surface-hover); }
table.roster tbody tr:last-child td { border-bottom: none; }
table.roster td.name { font-weight: 600; }
table.roster td.avatar { padding: 4px 10px; width: 44px; }
table.roster td.avatar img { width: 34px; height: 34px; border-radius: var(--radius-sm); display: block; object-fit: cover; background: var(--surface-hover); }
table.roster tbody tr.champ-row { cursor: pointer; }
table.roster tbody tr.champ-row:hover { background: var(--brand-ember-wash); }
table.roster td.opener { text-align: right; }
table.roster td.opener .barwrap { vertical-align: middle; margin-right: 6px; }
table.roster td.opener .pct { vertical-align: middle; }

/* bars */
.barwrap { background: var(--bg-sunken); border-radius: var(--radius-full); height: 16px; flex: 1; overflow: hidden; min-width: 60px; }
.bar { display: block; height: 100%; border-radius: var(--radius-full); }
.bar-a { background: var(--brand-ember); }
.bar-c { background: var(--success); }
.pct { width: 52px; text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--fg-3); }
.barwrap.mini { display: inline-block; height: 8px; width: 56px; flex: none; }

/* =========================================================================
   Champion filters
   ========================================================================= */
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filter-search-input {
  background: var(--surface); color: var(--fg-1); border: 1px solid var(--line-strong);
  border-radius: var(--radius-md); padding: 9px 12px; font: 400 14px/1.4 var(--font-sans);
}
.filter-search-input:focus { outline: none; border-color: var(--brand-ember); box-shadow: 0 0 0 3px var(--brand-ember-wash); }
.filter-group { position: relative; }
.filter-btn {
  background: var(--surface); color: var(--fg-1); border: 1px solid var(--line-strong);
  border-radius: var(--radius-md); padding: 8px 12px; font: 500 13px/1 var(--font-sans);
  cursor: pointer; white-space: nowrap; transition: border-color var(--dur-base) var(--ease-out);
}
.filter-btn:hover { border-color: var(--line-emphasis); }
.filter-btn-active { border-color: var(--brand-ember); color: var(--brand-ember-deep); }
.filter-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 200;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  padding: 6px; min-width: 160px; max-height: 280px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 1px; box-shadow: var(--shadow-md);
}
.filter-dropdown.hidden { display: none; }
.filter-option { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; }
.filter-option:hover { background: var(--surface-hover); }
/* clear-filters button — ghost style, only visible/usable when something is set */
.filter-clear {
  background: transparent; color: var(--fg-3); border: 1px solid transparent;
  border-radius: var(--radius-md); padding: 8px 10px; font: 500 13px/1 var(--font-sans);
  cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px;
  transition: color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.filter-clear:hover { color: var(--danger); background: var(--danger-soft); }
.filter-clear .lucide { width: 14px; height: 14px; }

/* =========================================================================
   Distributions
   ========================================================================= */
/* controls: inline attribute select + toggle, baseline-aligned */
.dist-controls { align-items: center; gap: 18px; }
.control-inline { display: flex; align-items: center; gap: 9px; }
.control-label { font-size: 13px; font-weight: 500; color: var(--fg-2); white-space: nowrap; }

/* two-column layout: wider categories table on the left, controls + explanation
   stacked on the right (controls align to the explanation card). */
.dist-layout { display: grid; grid-template-columns: minmax(520px, 1.8fr) minmax(290px, 0.9fr); gap: 20px; align-items: start; }
@media (max-width: 1024px) { .dist-layout { grid-template-columns: 1fr; } }
.dist-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 76px; }
.dist-shell { overflow: visible; }
.dist { padding: 4px 18px 12px; }
.dist .row { display: grid; grid-template-columns: 150px minmax(120px, 1fr) 56px 66px; gap: 12px; align-items: center; height: 36px; padding: 0; border-bottom: none; }
.dist .head { height: auto; color: var(--fg-3); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.c-value { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-answers { display: flex; align-items: center; gap: 8px; }
.c-answers .barwrap { min-width: 30px; }
.c-answers .pct { width: 40px; }
.c-roster { text-align: right; color: var(--fg-3); }
.c-bias { text-align: right; font-variant-numeric: tabular-nums; }
.c-bias.pos { color: var(--success); }
.c-bias.neg { color: var(--danger); }
.note-pos { color: var(--success); font-weight: 600; }
.note-neg { color: var(--danger); font-weight: 600; }
.dist-note {
  line-height: 1.65; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 18px 22px; font-size: 13.5px;
}
.dist-note strong { color: var(--fg-1); }

/* =========================================================================
   History (all 5 modes)
   ========================================================================= */
table.hist-table { border-collapse: collapse; width: 100%; font-size: 13px; }
table.hist-table th, table.hist-table td { padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.hist-table thead th {
  position: sticky; top: 0; background: var(--surface); color: var(--fg-3);
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; z-index: 1;
}
.hist-th-date { min-width: 120px; }
.hist-th-mode { min-width: 170px; }
table.hist-table tbody tr:last-child td { border-bottom: none; }
table.hist-table tbody tr:hover { background: var(--surface-hover); }
table.hist-table tbody tr.hist-today { background: var(--brand-ember-wash); }
.hist-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.hist-date-val { color: var(--fg-3); font-size: 12px; }
.hist-today-badge { margin-left: 6px; background: var(--brand-ember-wash); color: var(--brand-ember-deep); border-radius: var(--radius-full); padding: 1px 8px; font-size: 11px; font-weight: 600; }
.hist-champ { display: flex; align-items: center; gap: 7px; }
.hist-avatar { width: 24px; height: 24px; border-radius: var(--radius-sm); object-fit: cover; background: var(--surface-hover); flex-shrink: 0; }
.hist-name { font-weight: 500; font-size: 13px; }
.hist-name-link { cursor: pointer; }
.hist-name-link:hover { color: var(--brand-ember-deep); text-decoration: underline; }
.hist-sub { font-size: 11px; color: var(--fg-3); background: var(--surface-hover); border-radius: var(--radius-sm); padding: 1px 6px; white-space: nowrap; flex-shrink: 0; }
.hist-spoiler-cell { text-align: center; padding: 10px 14px; }
.hist-spoiler-btn .lucide { width: 15px; height: 15px; }

/* =========================================================================
   Champion detail
   ========================================================================= */
#panel-champ-detail { max-width: 880px; }
.detail-hero { margin-bottom: 24px; }
.hero-info { display: flex; align-items: center; gap: 18px; }
.hero-avatar { width: 72px; height: 72px; border-radius: var(--radius-lg); object-fit: cover; background: var(--surface-hover); flex-shrink: 0; }
.hero-text { display: flex; flex-direction: column; gap: 10px; }
.hero-name { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }
.attr-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag { background: var(--surface-hover); border-radius: var(--radius-full); padding: 4px 10px; font-size: 12px; color: var(--fg-2); }

/* stat cards (detail) */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; }
.stat-card.card-green { border-color: var(--success); }
.stat-card.card-gold  { border-color: var(--brand-ember); }
.stat-card.card-warn  { border-color: var(--danger); }
.stat-card .stat-value { font-family: var(--font-display); font-size: 24px; font-weight: 500; line-height: 1.1; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.stat-card .stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-3); margin-bottom: 4px; }
.stat-card .stat-sub { font-size: 12px; color: var(--fg-3); word-break: break-word; }

.detail-section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 14px; }
.detail-section h3 { margin: 0 0 12px; font-size: 16px; font-weight: 600; }

/* optimal path */
.sp1-grid { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.sp1-row { display: grid; grid-template-columns: 26px 1fr 1fr 52px 70px; gap: 8px; align-items: center; padding: 6px 8px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; }
.sp1-row:hover { background: var(--surface-hover); }
.sp1-opt { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.sp1-custom { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.sp1-bar { height: 10px; }
.sp1-badge { font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; color: var(--fg-3); }
.sp1-badge.badge-1 { color: var(--success); font-weight: 600; }
.sp1-badge.badge-few { color: var(--info); }
.sp1-path { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px 12px; padding: 8px 12px; background: var(--bg-sunken); border-left: 2px solid var(--line-strong); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.sp1-step { display: grid; grid-template-columns: 22px 24px 1fr auto; gap: 8px; align-items: center; padding: 3px 0; font-size: 13px; }
.sp1-step-answer { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 5px; }
.stepn, .stepinfo { color: var(--fg-3); font-size: 12px; }
.oc-avatar { width: 24px; height: 24px; border-radius: var(--radius-sm); object-fit: cover; background: var(--surface-hover); display: block; }
.oc-name { font-size: 13px; font-weight: 500; }
.oc-bits { font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; color: var(--fg-3); }
.answer-label { color: var(--success); }
.oc-wrap { position: relative; margin-top: 8px; }
.oc-input { width: 100%; }
.oc-drop { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 200; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 4px; max-height: 220px; overflow-y: auto; box-shadow: var(--shadow-md); }
.oc-drop.hidden { display: none; }
.oc-drop-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; }
.oc-drop-row:hover { background: var(--surface-hover); }

/* attribute rarity */
.attr-rarity { display: flex; flex-direction: column; }
.attr-row { display: grid; grid-template-columns: 84px 130px 110px 110px 90px; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); }
.attr-row:last-child { border-bottom: none; }
.attr-head { color: var(--fg-3); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; padding-bottom: 8px; border-bottom: 1px solid var(--line-strong) !important; }
.attr-label-col { color: var(--fg-3); font-size: 13px; }
.attr-val-col { font-weight: 500; font-size: 14px; }
.attr-num-col { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--fg-3); }
.excl { font-size: 11px; border-radius: var(--radius-full); padding: 3px 9px; text-align: center; white-space: nowrap; font-weight: 500; }
.excl-unique  { background: var(--success-soft); color: var(--success); }
.excl-rare    { background: var(--info-soft); color: var(--info); }
.excl-common  { background: var(--surface-hover); color: var(--fg-3); }
.excl-vcommon { background: var(--surface-hover); color: var(--fg-4); }

.date-list { display: flex; flex-wrap: wrap; gap: 6px; }
.date-chip { background: var(--bg-sunken); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 4px 10px; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--fg-2); }

/* =========================================================================
   Friends — stat row, charts, cards
   ========================================================================= */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 24px; }
.charts-1col { margin-bottom: 24px; }
.chart-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 20px; min-width: 0; }
.chart-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.chart-head h3 { font-size: 14px; font-weight: 600; color: var(--fg-2); }
.chart { width: 100%; height: auto; display: block; }
.chart-line { fill: none; stroke: var(--brand-ember); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-area { fill: var(--brand-ember-wash); stroke: none; }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-axis { fill: var(--fg-4); font: 9px var(--font-mono); }
.chart-empty { color: var(--fg-3); font-size: 13px; padding: 24px 0; text-align: center; }

/* multi-series comparison: per-series line + player toggle chips */
.ms-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ms-dot { stroke: var(--surface); stroke-width: 1; }
.series-toggles { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.series-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px;
  border-radius: var(--radius-full); border: 1px solid var(--line-strong); background: var(--surface);
  font-size: 12px; font-weight: 500; color: var(--fg-3); cursor: pointer; user-select: none;
  transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.series-chip:hover { border-color: var(--line-emphasis); color: var(--fg-1); }
.series-chip[data-active="true"] { color: var(--fg-1); border-color: currentColor; }
.series-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; transition: opacity var(--dur-base); }
.series-chip[data-active="false"] .series-dot { opacity: .3; }

/* horizontal bar chart */
.barchart { display: flex; flex-direction: column; gap: 10px; }
.barrow { display: grid; grid-template-columns: 90px 1fr 44px; gap: 10px; align-items: center; }
.barrow-label { font-size: 13px; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barrow-track { background: var(--bg-sunken); border-radius: var(--radius-full); height: 14px; overflow: hidden; }
.barrow-fill { height: 100%; background: var(--brand-ember); border-radius: var(--radius-full); }
.barrow-val { text-align: right; font-size: 13px; color: var(--fg-2); }

/* day + player cards */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.card-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.win-mark { width: 16px; height: 16px; color: var(--warning); }
.kv-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.kv-label { color: var(--fg-3); display: inline-flex; align-items: center; gap: 7px; }
.kv-label .lucide { width: 15px; height: 15px; }
.winner-banner {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  padding: 12px; margin-bottom: 18px; background: var(--brand-ember-wash);
  border: 1px solid color-mix(in srgb, var(--brand-ember) 25%, transparent);
  border-radius: var(--radius-lg); font-size: 14px; color: var(--brand-ember-deep);
}
.winner-banner .lucide { width: 16px; height: 16px; }
.mode-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 8px; }

/* compact daily summary table */
.daily-table td, .daily-table th { padding: 11px 14px; }
.daily-table .daily-rank { color: var(--fg-3); width: 38px; }
.daily-table tr.winner-row { background: var(--brand-ember-wash); }
.daily-table tr.winner-row:hover { background: var(--brand-ember-wash); }
.daily-player { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.daily-player .win-mark { width: 15px; height: 15px; color: var(--warning); }
.daily-total { font-weight: 700; }
.daily-table .inline-i { width: 13px; height: 13px; vertical-align: -2px; margin-left: 2px; }
.daily-medal { font-variant-numeric: tabular-nums; }
.daily-medal.m1 { color: #d9a441; font-weight: 700; }
.daily-medal.m2 { color: #b8bcc4; font-weight: 700; }
.daily-medal.m3 { color: #c08457; font-weight: 700; }
.mode-avg { font-family: var(--font-display); font-size: 28px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; margin-top: 8px; }

/* =========================================================================
   HOME / landing
   ========================================================================= */
.crumbs a { color: inherit; text-decoration: none; transition: color var(--dur-base) var(--ease-out); }
.crumbs a:hover { color: var(--fg-1); }

.home-hero {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  flex-wrap: wrap; margin-bottom: 28px;
  padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 140% at 100% 0%, var(--brand-ember-wash), transparent 60%),
    var(--surface);
}
.home-hero-main h2 { font-size: 26px; letter-spacing: -0.02em; }
.home-hero-main p { margin-top: 6px; }
.home-timer {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  text-align: right; flex-shrink: 0;
}
.home-timer-label { font-size: 12px; color: var(--fg-3); letter-spacing: 0.03em; text-transform: uppercase; }
.home-timer-val {
  font-family: var(--font-mono); font-size: 34px; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--brand-ember-deep);
}

/* status note (waiting / in-progress) */
.home-note {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px; margin-bottom: 18px;
  border: 1px solid color-mix(in srgb, var(--brand-ember) 22%, transparent);
  border-radius: var(--radius-lg); background: var(--brand-ember-wash);
}
.home-note.subtle { background: var(--surface); border-color: var(--line); }
.home-note-ico {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line); color: var(--brand-ember-deep);
}
.home-note.subtle .home-note-ico { color: var(--fg-2); }
.home-note-ico .lucide { width: 20px; height: 20px; }
.home-note-text h3 { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.home-note-text p { font-size: 14px; line-height: 1.5; }
.home-wait-lbl { margin-top: 12px; font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; }

.wait-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.wait-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: var(--radius-full);
  border: 1px solid var(--line); background: var(--surface);
  font-size: 13px; color: var(--fg-2);
}
.wait-chip .lucide { width: 13px; height: 13px; color: var(--fg-3); }

/* revealed answers grid */
.ans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.ans-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
}
.ans-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ans-mode { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--fg-3); letter-spacing: 0.02em; }
.ans-mode .lucide { width: 15px; height: 15px; }
.ans-champ { font-family: var(--font-display); font-size: 19px; font-weight: 500; letter-spacing: -0.01em; color: var(--fg-1); }
.ans-img {
  width: 52px; height: 52px; flex-shrink: 0; object-fit: cover;
  border-radius: var(--radius-md); border: 1px solid var(--line);
}

/* winner hero (completed day) */
.winner-hero {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 22px 24px; margin-bottom: 22px;
  border: 1px solid color-mix(in srgb, var(--brand-ember) 30%, transparent);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(130% 160% at 0% 0%, var(--brand-ember-wash), transparent 65%),
    var(--surface);
}
.winner-crown {
  flex-shrink: 0; width: 58px; height: 58px; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-ember); color: #fff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-ember) 35%, transparent);
}
.winner-crown .lucide { width: 30px; height: 30px; }
.winner-info { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.winner-label { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-ember-deep); font-weight: 600; }
.winner-name {
  font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1.1;
  letter-spacing: -0.02em; color: var(--fg-1); text-decoration: none;
}
.winner-name:hover { color: var(--brand-ember-deep); }
.winner-meta { font-size: 13px; color: var(--fg-3); }
.winner-total { flex-shrink: 0; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.winner-total-num {
  font-family: var(--font-display); font-size: 40px; font-weight: 600; line-height: 1;
  color: var(--brand-ember-deep); font-variant-numeric: tabular-nums;
}
.winner-total-lbl { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-3); }

/* =========================================================================
   OPENERS
   ========================================================================= */
.op-note {
  font-size: 14px; line-height: 1.55; margin-bottom: 20px;
  padding: 14px 16px; border-left: 3px solid var(--brand-ember);
  background: var(--bg-sunken); border-radius: var(--radius-md);
}
.op-note strong { color: var(--fg-1); }
#op-chart .series-chip.op-ref { cursor: default; }
#op-chart .series-chip.op-ref:hover { border-color: currentColor; color: var(--fg-1); }
.op-champ { display: inline-flex; align-items: center; gap: 9px; }
.op-img { width: 26px; height: 26px; border-radius: var(--radius-sm); border: 1px solid var(--line); flex-shrink: 0; }

.home-past { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 14px; }
.home-past .lucide { width: 15px; height: 15px; }