/* ══════════════════════════════════════════════════════════════════════════
   view.css — "Call of Dragons" ranking-surface theme
   ---------------------------------------------------------------------------
   SCOPE: every rule is prefixed with `.cod-surface`, a class applied to the
   tab containers that opt into this theme — currently #tab-view (/view) and
   #tab-alliance (/alliance "BXH Server"). Other tabs (compare/lord/…) share the
   same base classes (.panel, .table-wrap, .count-badge, .charts-row, the column
   picker, the player drawer) but DON'T carry .cod-surface, so they're untouched.
   A couple of rules that only make sense for /view's 2-row-header table (data-
   header right-align, the custom <select> caret) stay scoped to #tab-view.
   No JS hooks, IDs, class names, markup or logic are touched.

   Look: an arcane war-board. A fixed, immersive backdrop (deep indigo night,
   gold dawn glow, arcane-violet + mana-teal light, a faint tactical grid and a
   vignette) sits behind carved-obsidian panels trimmed with gold HUD corners.
   Titles use Oswald (condensed, full Vietnamese coverage); numbers use Rajdhani.
   The ranking table is the hero: right-aligned tabular figures, a fixed identity
   spine, an embossed header bar and a highlighted sort axis.

   Compatibility: rgba() only (no color-mix). The backdrop hangs off
   `.cod-surface::before/::after`, which only paint while the tab is displayed
   (hidden tabs are display:none). The sidebar/topbar are position:fixed z-index
   100, so the z-index:-1 backdrop never covers them. `:has()`/backdrop-filter
   are progressive — unsupported browsers just lose a subtle tint, never layout.
   ══════════════════════════════════════════════════════════════════════════ */

.cod-surface {
  /* Theme tokens */
  --v-gold:    #f0b429;
  --v-gold-lt: #ffd97d;
  --v-violet:  #b06aff;
  --v-teal:    #3dffa0;
  --v-line:    rgba(240, 180, 41, .14);   /* gold hairline */
  --v-line-2:  rgba(255, 255, 255, .06);  /* top highlight */
  --v-radius:    14px;
  --v-radius-sm: 9px;
  --v-radius-xs: 6px;
  --v-cell-py:   9px;
  --v-cell-px:   14px;   /* MUST stay 14px — frozen columns use hardcoded left offsets */
  --v-row-hover: rgba(240, 180, 41, .08);
  --v-disp: 'Oswald', 'Rajdhani', 'Arial Narrow', Arial, sans-serif;
  --v-num:  'Rajdhani', 'Oswald', Arial, sans-serif;
  position: relative;
  z-index: 0;                              /* own stacking context for the backdrop */
  color: var(--text);
}

/* ─── Immersive backdrop (fixed, behind everything in the content column) ─── */
.cod-surface::before,
.cod-surface::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.cod-surface::before {
  z-index: -2;
  background:
    radial-gradient(ellipse 62% 46% at 50% -8%,  rgba(240, 180, 41, .15), transparent 62%),
    radial-gradient(ellipse 46% 52% at 5% 10%,   rgba(176, 106, 255, .13), transparent 55%),
    radial-gradient(ellipse 52% 46% at 97% 97%,  rgba(61, 255, 160, .08),  transparent 55%),
    radial-gradient(circle at 52% 38%, transparent 52%, rgba(0, 0, 0, .58) 100%),
    linear-gradient(180deg, #0c1122 0%, #0a0d1c 40%, #06070f 100%);
  animation: vBgBreathe 26s ease-in-out infinite;
}
.cod-surface::after {
  z-index: -1;
  background-image:
    linear-gradient(118deg, transparent 41%, rgba(240, 180, 41, .045) 50%, transparent 59%),
    linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: auto, 46px 46px, 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 20%, #000 40%, transparent 92%);
          mask-image: radial-gradient(ellipse 90% 80% at 50% 20%, #000 40%, transparent 92%);
  opacity: .6;
}
@keyframes vBgBreathe {
  0%, 100% { opacity: 1;   }
  50%      { opacity: .86; }
}

/* ══════════════════════════════════════════════════════════════════════════
   1. PANELS — carved obsidian, gold hairline, HUD corner brackets
   ══════════════════════════════════════════════════════════════════════════ */
.cod-surface .panel {
  position: relative;
  background:
    linear-gradient(180deg, rgba(24, 29, 48, .74), rgba(13, 16, 27, .82));
  border: 1px solid var(--v-line);
  border-radius: var(--v-radius);
  padding: 18px 20px;
  margin-bottom: 16px;
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  box-shadow:
    inset 0 1px 0 var(--v-line-2),
    0 20px 44px -26px rgba(0, 0, 0, .95);
  transition: border-color .2s ease;
}
.cod-surface .panel:hover { box-shadow: inset 0 1px 0 var(--v-line-2), 0 20px 44px -26px rgba(0, 0, 0, .95); }
/* Gold HUD corner brackets (top-left / bottom-right) */
.cod-surface .panel::before,
.cod-surface .panel::after {
  content: '';
  position: absolute;
  width: 15px; height: 15px;
  border: 2px solid rgba(240, 180, 41, .42);
  pointer-events: none;
}
.cod-surface .panel::before { top: 7px; left: 7px; border-right: 0; border-bottom: 0; border-top-left-radius: 5px; }
.cod-surface .panel::after  { bottom: 7px; right: 7px; border-left: 0; border-top: 0; border-bottom-right-radius: 5px; }
/* No brackets on the table panel (padding:0) — they'd sit over cell data */
.cod-surface .panel[style*="padding:0"]::before,
.cod-surface .panel[style*="padding:0"]::after { display: none; }

.cod-surface .panel-title {
  font-family: var(--v-disp);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--v-gold-lt);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 13px;
  text-shadow: 0 0 18px rgba(240, 180, 41, .25);
  display: flex; align-items: center; gap: 10px;
}
/* Rune diamond before the title */
.cod-surface .panel-title::before {
  content: '';
  width: 7px; height: 7px;
  flex-shrink: 0;
  background: var(--v-gold);
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(240, 180, 41, .8);
}
.cod-surface .panel-title::after {
  height: 1px;
  background: linear-gradient(90deg, rgba(240, 180, 41, .5), transparent 70%);
  opacity: .9;
}
/* Single-row date panel — no title rule/gap */
.cod-surface .panel[style*="display:flex"] .panel-title { margin-bottom: 0; }
.cod-surface .panel[style*="display:flex"] .panel-title::after { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   2. SEARCH — leading magnifier, gold focus ring
   ══════════════════════════════════════════════════════════════════════════ */
.cod-surface {
  --v-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E");
}
.cod-surface .search-wrap::before {
  content: '';
  position: absolute;
  left: 11px; top: 50%;
  width: 14px; height: 14px;
  transform: translateY(-50%);
  pointer-events: none;
  background: var(--text-dim);
  opacity: .6;
  -webkit-mask: var(--v-search-icon) center / contain no-repeat;
          mask: var(--v-search-icon) center / contain no-repeat;
}
.cod-surface .search-input {
  padding-left: 32px !important;
  background: rgba(8, 11, 20, .6);
  border: 1px solid var(--border);
  border-radius: var(--v-radius-sm);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.cod-surface .search-input:focus {
  border-color: var(--v-gold);
  background: rgba(12, 16, 28, .85);
  box-shadow: 0 0 0 3px rgba(240, 180, 41, .18);
}
.cod-surface .search-clear:hover { color: var(--red); background: rgba(255, 68, 85, .14); }

/* ══════════════════════════════════════════════════════════════════════════
   3. SERVER SELECTOR — glowing HUD tiles, gold rail on the active pick
   ══════════════════════════════════════════════════════════════════════════ */
.cod-surface .server-grid {
  grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
  gap: 9px;
}
.cod-surface .server-card {
  background: linear-gradient(180deg, rgba(27, 32, 52, .7), rgba(15, 19, 32, .82));
  border: 1px solid rgba(240, 180, 41, .10);
  border-left: 3px solid transparent;
  border-radius: var(--v-radius-sm);
  padding: 11px 13px;
  overflow: visible;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: border-color .15s, background .15s, box-shadow .15s, transform .06s;
}
.cod-surface .server-card::before { display: none; }   /* drop the base top-glow */
.cod-surface .server-card:hover {
  border-color: rgba(240, 180, 41, .3);
  border-left-color: rgba(240, 180, 41, .6);
  background: linear-gradient(180deg, rgba(33, 39, 62, .8), rgba(19, 24, 40, .88));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 20px -14px rgba(0, 0, 0, .9);
}
.cod-surface .server-card:active { transform: translateY(1px); }
.cod-surface .server-card.active {
  border-color: rgba(240, 180, 41, .5);
  border-left-color: var(--v-gold);
  background: linear-gradient(180deg, rgba(52, 42, 16, .55), rgba(26, 22, 12, .7));
  box-shadow: inset 0 1px 0 rgba(255, 216, 120, .18), 0 0 24px -6px rgba(240, 180, 41, .35);
}
.cod-surface .server-card.server-home { border-left-color: rgba(240, 180, 41, .5); }
.cod-surface .server-card.server-home.active { border-left-color: var(--v-gold); }
.cod-surface .server-num {
  font-family: var(--v-num);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: .4px;
  color: var(--text);
  line-height: 1.15;
}
.cod-surface .server-card.active .server-num,
.cod-surface .server-card.server-home .server-num {
  color: var(--v-gold-lt);
  text-shadow: 0 0 14px rgba(240, 180, 41, .4);
}
.cod-surface .server-sub { font-size: .72rem; color: var(--text-dim); margin-top: 3px; letter-spacing: .2px; }
.cod-surface .server-ally-tag {
  font-size: .64rem;
  font-weight: 700;
  color: var(--v-gold-lt);
  background: rgba(240, 180, 41, .12);
  border: 1px solid rgba(240, 180, 41, .28);
  border-radius: var(--v-radius-xs);
  padding: 1px 6px;
  letter-spacing: .6px;
}

/* ══════════════════════════════════════════════════════════════════════════
   4. NATIVE <select> — custom caret. Applied to view/compare/lord, whose selects
   carry no inline `background:` (only `width:auto`). NOT /alliance: its selects
   use an inline `background:` shorthand that would wipe this caret image while
   appearance:none hid the native arrow — leaving no arrow at all.
   ══════════════════════════════════════════════════════════════════════════ */
#tab-view select,
#tab-compare select,
#tab-lord select {
  background-color: rgba(8, 11, 20, .6);
  border: 1px solid var(--border);
  border-radius: var(--v-radius-sm);
  padding: 8px 30px 8px 12px;
  font-size: .86rem;
  color: var(--text);
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23f0b429' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1.5 2l4.5 4 4.5-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 11px;
  transition: border-color .15s, box-shadow .15s;
}
#tab-view select:hover, #tab-compare select:hover, #tab-lord select:hover { border-color: rgba(240, 180, 41, .45); }
#tab-view select:focus, #tab-compare select:focus, #tab-lord select:focus { border-color: var(--v-gold); outline: none; box-shadow: 0 0 0 3px rgba(240, 180, 41, .15); }

/* ══════════════════════════════════════════════════════════════════════════
   5. STATISTICS — HUD stat plates, strong number hierarchy
   ══════════════════════════════════════════════════════════════════════════ */
.cod-surface .stats-row { gap: 9px; margin-bottom: 14px; }
.cod-surface .stat-card {
  background: linear-gradient(180deg, rgba(24, 29, 48, .68), rgba(14, 17, 28, .8));
  border: 1px solid rgba(255, 255, 255, .05);
  border-left: 2px solid var(--accent, var(--v-gold));
  border-radius: var(--v-radius-sm);
  padding: 11px 14px 12px;
  flex: 1 1 128px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.cod-surface .stat-card::after { display: none; }
.cod-surface .stat-label {
  font-family: var(--v-disp);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.cod-surface .stat-val {
  font-family: var(--v-num);
  font-size: 1.62rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  margin-top: 4px;
}
.cod-surface .stat-card:first-child .stat-val {
  font-family: var(--v-disp);              /* season name may carry Vietnamese */
  font-weight: 600;
  color: var(--accent, var(--v-gold));
}
.cod-surface .stat-sub { font-size: .74rem; color: var(--text-dim); margin-top: 3px; }

/* ══════════════════════════════════════════════════════════════════════════
   6. CHARTS
   ══════════════════════════════════════════════════════════════════════════ */
.cod-surface .charts-row { gap: 10px; margin-bottom: 14px; }
.cod-surface .chart-card {
  background: linear-gradient(180deg, rgba(20, 25, 41, .7), rgba(12, 15, 25, .8));
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: var(--v-radius-sm);
  padding: 14px 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  display: flex;              /* let the chart body fill + vertically center */
  flex-direction: column;
}
.cod-surface .chart-title {
  font-family: var(--v-disp);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .5px;       /* tighter so the long M/P title fits 1 line more often */
  text-transform: uppercase;
  color: var(--v-gold-lt);
  margin-bottom: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--v-line);
  flex-shrink: 0;
}

/* ─── Distribution histogram (Lực Chiến / M/P) ───
   Vertical columns = you read the shape of the distribution at a glance: which
   bracket holds the most players. Position (x) encodes the ordered bucket, so a
   single hue per chart is correct (gold = power, violet = M/P); height encodes
   count. The tallest bar is highlighted as the peak. */
/* Fill the card height and center the histogram vertically so cards 1 & 2 match
   the taller "Top Merit" list (card 3). Because the plot height is fixed, a long
   title that wraps to 2 lines grows the row instead of squeezing the bars. */
.cod-surface .vdist { padding-top: 2px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.cod-surface .vdist-cap {
  font-family: var(--v-disp);
  font-size: .72rem; letter-spacing: .3px;
  color: var(--text-dim); text-align: center; margin-bottom: 10px;
}
/* Axis titles: Y names the bar values (people), X names the metric + unit, so
   it's unambiguous which axis is players and which is the power/rate bucket. */
.cod-surface .vdist-main { display: flex; align-items: stretch; gap: 7px; }
.cod-surface .vdist-yaxis {
  writing-mode: vertical-rl; transform: rotate(180deg);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--v-disp); font-size: .56rem; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim);
  opacity: .9;
}
.cod-surface .vdist-xaxis {
  text-align: center; margin-top: 9px;
  font-family: var(--v-disp); font-size: .68rem; font-weight: 600;
  letter-spacing: .5px; text-transform: uppercase; color: var(--text-dim);
}
.cod-surface .vdist-xaxis b { color: var(--text); font-weight: 700; }
.cod-surface .vdist-cap b { font-family: var(--v-num); color: var(--gold); font-weight: 700; }
.cod-surface .vdist-cap .pk { color: var(--text); font-weight: 600; }
.cod-surface .vdist-plot { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 6px; height: 200px; }
.cod-surface .vdist-col {
  flex: 1; min-width: 0; height: 100%;
  display: flex; flex-direction: column; align-items: center;
  cursor: default;
}
.cod-surface .vdist-val {
  height: 15px; line-height: 15px;
  font-family: var(--v-num); font-size: .74rem; font-weight: 700;
  color: var(--text-dim); font-variant-numeric: tabular-nums;
}
.cod-surface .vdist-col.peak .vdist-val { color: var(--gold); }
.cod-surface .vdist-bar-wrap {
  flex: 1; width: 100%;
  display: flex; align-items: flex-end; justify-content: center;
  border-bottom: 1px solid rgba(240, 180, 41, .22);
}
.cod-surface .vdist-bar {
  width: 78%; max-width: 34px; min-height: 3px;
  border-radius: 5px 5px 0 0;
  background: var(--grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
  transform-origin: bottom;
  animation: vColGrow .55s cubic-bezier(.22, 1, .36, 1) both;
  transition: filter .15s;
}
.cod-surface .vdist-col:hover .vdist-bar { filter: brightness(1.16); }
.cod-surface .vdist-col.peak .vdist-bar {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 0 16px -2px var(--glow);
}
.cod-surface .vdist-xlabel {
  height: 15px; margin-top: 6px;
  font-family: var(--v-num); font-size: .6rem; font-weight: 600;
  color: var(--text-dim); white-space: nowrap; letter-spacing: 0;
}
.cod-surface .vdist-col.peak .vdist-xlabel { color: var(--gold); }
/* Per-chart hues */
.cod-surface .vdist-pow .vdist-bar { --grad: linear-gradient(180deg, #ffdc72, #d1901c); --glow: rgba(240, 180, 41, .75); }
.cod-surface .vdist-mp  .vdist-bar { --grad: linear-gradient(180deg, #cba7f6, #7a4fc0); --glow: rgba(176, 106, 255, .7); }
.cod-surface .vdist-mp  .vdist-col.peak .vdist-val,
.cod-surface .vdist-mp  .vdist-col.peak .vdist-xlabel { color: #c2a6f2; }
.cod-surface .vdist-mp  .vdist-bar-wrap { border-bottom-color: rgba(176, 106, 255, .22); }

/* ─── Ranked bars (Top Công Trạng) ─── */
.cod-surface .vchart-bars { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.cod-surface .vbar-row {
  display: grid; grid-template-columns: 22px 84px 1fr auto;
  align-items: center; gap: 8px;
}
.cod-surface .vbar-rank {
  font-family: var(--v-num); font-size: .74rem; font-weight: 700;
  color: var(--text-dim); text-align: center;
}
.cod-surface .vbar-row.top .vbar-rank { font-size: .92rem; }
.cod-surface .vbar-name {
  font-size: .74rem; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cod-surface .vbar-row:hover .vbar-name { color: #7dffc4; }
.cod-surface .vbar-track {
  height: 14px; border-radius: 0 4px 4px 0;
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03);
  overflow: hidden;
}
/* Teal — distinct from the gold power histogram & violet M/P histogram */
.cod-surface .vbar-fill {
  height: 100%; border-radius: 0 4px 4px 0;
  background: linear-gradient(90deg, #196f4a, #35e39a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
  animation: vBarGrow .6s cubic-bezier(.22, 1, .36, 1) both;
  transition: filter .15s;
}
.cod-surface .vbar-row.top .vbar-fill {
  background: linear-gradient(90deg, #219a68, #7dffc4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 12px -3px rgba(61, 255, 160, .7);
}
.cod-surface .vbar-row:hover .vbar-fill { filter: brightness(1.14); }
.cod-surface .vbar-val {
  font-family: var(--v-num); font-size: .76rem; font-weight: 700;
  color: var(--green); font-variant-numeric: tabular-nums; text-align: right;
}
.cod-surface .vbar-row.top .vbar-rank { color: var(--green); }
.cod-surface .vchart-empty { color: var(--text-dim); font-size: .82rem; text-align: center; padding: 22px 0; }

@keyframes vColGrow { from { transform: scaleY(0); } }
@keyframes vBarGrow { from { width: 0; } }

/* ══════════════════════════════════════════════════════════════════════════
   7. RANKING TOOLBAR
   ══════════════════════════════════════════════════════════════════════════ */
.cod-surface .tbar { padding: 13px 16px 12px; border-bottom: 1px solid var(--v-line); gap: 10px; }
.cod-surface .count-badge {
  font-family: var(--v-disp);   /* carries Vietnamese ("người chơi") — Oswald, not Rajdhani */
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-dim);
  background: rgba(8, 11, 20, .5);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 12px;
  letter-spacing: .3px;
}
.cod-surface .count-badge b { color: var(--v-gold-lt); font-weight: 700; }
.cod-surface .count-badge.on { border-color: rgba(240, 180, 41, .4); color: var(--text); }
.cod-surface .tbar-controls .btn-ghost {
  background: rgba(8, 11, 20, .5);
  border-color: var(--border);
  border-radius: var(--v-radius-sm);
  transition: border-color .15s, color .15s, background .15s;
}
.cod-surface .tbar-controls .btn-ghost:hover {
  border-color: rgba(240, 180, 41, .55);
  color: var(--v-gold-lt);
  background: rgba(240, 180, 41, .08);
}

/* ══════════════════════════════════════════════════════════════════════════
   8. THE TABLE — the hero
   Right-aligned tabular numbers, a fixed identity spine, an embossed header,
   quiet group bands and a calm gold hover. Horizontal cell padding stays 14px
   (frozen columns are pinned at hardcoded left offsets 0/42/102px in view.js).
   ══════════════════════════════════════════════════════════════════════════ */
.cod-surface .table-wrap { border-radius: 0; }
.cod-surface .panel > div[style*="border-radius"] {
  border-radius: 0 0 var(--v-radius) var(--v-radius) !important;
}
.cod-surface table { font-size: .9rem; }

/* Header bar — embossed, gold-lit underline */
.cod-surface thead tr { border-bottom: none; }
.cod-surface thead th {
  padding: 10px var(--v-cell-px);
  font-family: var(--v-disp);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--text-dim);
  background: linear-gradient(180deg, #1c2138, #141829);
  border-bottom: 2px solid rgba(240, 180, 41, .3);
}
.cod-surface .table-wrap thead th { background: linear-gradient(180deg, #1c2138, #141829); }
/* Center the /view data-column headers so they sit over the centered cells
   (identity: # / ID centered, Name / Alliance left). */
#tab-view thead tr:last-child th { text-align: center; }
#tab-view thead tr:last-child th.col-freeze.left { text-align: left; }
.cod-surface thead th.col-freeze,
.cod-surface .table-wrap thead th.col-freeze { background: #171b2d; }
.cod-surface thead th.sorted { color: var(--v-gold-lt); }
.cod-surface thead th:not(.nosort):hover { color: var(--v-gold-lt); }
/* Active sort axis — gold wash + underline (underline listed first = on top) */
.cod-surface thead th.sorted {
  box-shadow: inset 0 -2px 0 var(--v-gold), inset 0 0 0 999px rgba(240, 180, 41, .1);
}

/* Group band (colored section labels) — subtle; base .g-* keeps the top accent */
.cod-surface .grp-hdr {
  background: rgba(10, 13, 23, .6);
  font-family: var(--v-disp);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: 1.2px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--v-line);
}

/* Body rows */
.cod-surface tbody tr { border-bottom: 1px solid rgba(255, 255, 255, .045); }
.cod-surface tbody td {
  padding: var(--v-cell-py) var(--v-cell-px);
  text-align: center;                 /* numeric columns read best centered here */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  line-height: 1.35;
}
.cod-surface tbody td.rank { text-align: center; font-family: var(--v-num); }
.cod-surface tbody td.col-freeze:not(.left) { text-align: center; }
.cod-surface tbody td.left { text-align: left; }
.cod-surface tbody td.rate { color: var(--v-violet); font-weight: 600; }
.cod-surface td.name { color: var(--v-gold-lt); font-weight: 600; }
.cod-surface td.name:hover { color: var(--v-gold); }
.cod-surface td.ally { color: var(--blue); font-size: .8rem; }

/* Frozen spine cells sit on a slightly darker glass so the board reads as a
   fixed rail as columns scroll under it */
.cod-surface tbody td.col-freeze { background: rgba(11, 14, 24, .96); }

/* Uniform gold hover across normal + frozen cells (inset overlay = seamless) */
.cod-surface tbody tr:hover td { box-shadow: inset 0 0 0 999px var(--v-row-hover); }
.cod-surface tbody tr.no-results:hover td { box-shadow: none; }
.cod-surface tbody tr[aria-hidden="true"]:hover td { box-shadow: none; }

/* Top-3 — restrained metal tint; medal color already set by .r1/.r2/.r3 */
.cod-surface tbody tr:has(td.r1) td { box-shadow: inset 0 0 0 999px rgba(255, 215, 0, .06); }
.cod-surface tbody tr:has(td.r2) td { box-shadow: inset 0 0 0 999px rgba(200, 200, 200, .05); }
.cod-surface tbody tr:has(td.r3) td { box-shadow: inset 0 0 0 999px rgba(205, 127, 50, .06); }
.cod-surface tbody tr:has(td.r1):hover td,
.cod-surface tbody tr:has(td.r2):hover td,
.cod-surface tbody tr:has(td.r3):hover td { box-shadow: inset 0 0 0 999px var(--v-row-hover); }
.cod-surface td.rank.r1 { font-size: 1.08rem; }
.cod-surface td.rank.r2, .cod-surface td.rank.r3 { font-size: 1.04rem; }

/* Scrollbar */
.cod-surface .table-wrap::-webkit-scrollbar { height: 9px; }
.cod-surface .table-wrap::-webkit-scrollbar-track { background: transparent; }
.cod-surface .table-wrap::-webkit-scrollbar-thumb {
  background: rgba(240, 180, 41, .3);
  border-radius: 999px;
  border: 2px solid rgba(8, 11, 20, .8);
}
.cod-surface .table-wrap::-webkit-scrollbar-thumb:hover { background: rgba(240, 180, 41, .5); }
.cod-surface .table-wrap { scrollbar-width: thin; scrollbar-color: rgba(240, 180, 41, .3) transparent; }

/* Empty / not-found */
.cod-surface .no-results td { padding: 34px; color: var(--text-dim); }
.cod-surface .empty { padding: 34px 20px; color: var(--text-dim); }

/* ══════════════════════════════════════════════════════════════════════════
   9. COLUMN PICKER (⚙)
   ══════════════════════════════════════════════════════════════════════════ */
.cod-surface .cpbtn { border-radius: var(--v-radius-sm); background: rgba(8, 11, 20, .5); border-color: var(--border); }
.cod-surface .cpbtn.active { border-color: rgba(240, 180, 41, .4); color: var(--v-gold-lt); }

/* ══════════════════════════════════════════════════════════════════════════
   10. RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) { .cod-surface .stat-val { font-size: 1.44rem; } }
@media (max-width: 680px) {
  .cod-surface .panel { padding: 15px 15px; border-radius: 12px; }
  .cod-surface .panel::before, .cod-surface .panel::after { width: 12px; height: 12px; }
  .cod-surface .server-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .cod-surface .stat-card { flex: 1 1 calc(50% - 5px); padding: 10px 12px; }
  .cod-surface .stat-val { font-size: 1.36rem; }
  .cod-surface .tbar { padding: 12px 13px; }
  /* Ranking table on phones — a taller, more legible "leaderboard app" feel */
  .cod-surface table { font-size: .86rem; }
  .cod-surface tbody td { padding: 11px 12px; }
  .cod-surface thead th { padding: 10px 12px; font-size: .68rem; }
  .cod-surface td.name { font-size: .92rem; }
  .cod-surface td.ally { font-size: .78rem; }
  .cod-surface td.rank { font-size: 1.05rem; }
  .cod-surface td.rank.r1 { font-size: 1.28rem; }
  .cod-surface td.rank.r2, .cod-surface td.rank.r3 { font-size: 1.16rem; }
  .cod-surface tbody tr { border-bottom-color: rgba(255, 255, 255, .07); }
}
@media (max-width: 420px) { .cod-surface .server-num { font-size: 1.16rem; } }

/* ── Ranking table — podium + frozen-spine polish (both /view & /alliance) ── */
/* Frozen identity spine gets a gold divider so the pinned rail reads as one unit
   and hints there's more to swipe right to — a big mobile clarity win. */
.cod-surface tbody td.col-freeze-last { border-right: 1px solid rgba(240, 180, 41, .13); }
.cod-surface thead th.col-freeze-last { border-right: 1px solid rgba(240, 180, 41, .22); }
/* Top-3 podium: glowing medals + a touch stronger row tint so the leaders pop. */
.cod-surface td.rank.r1 { text-shadow: 0 0 12px rgba(255, 215, 0, .6); }
.cod-surface td.rank.r2 { text-shadow: 0 0 11px rgba(215, 215, 215, .5); }
.cod-surface td.rank.r3 { text-shadow: 0 0 11px rgba(205, 127, 50, .58); }
.cod-surface tbody tr:has(td.r1) td { box-shadow: inset 0 0 0 999px rgba(255, 215, 0, .075); }
.cod-surface tbody tr:has(td.r2) td { box-shadow: inset 0 0 0 999px rgba(200, 200, 200, .06); }
.cod-surface tbody tr:has(td.r3) td { box-shadow: inset 0 0 0 999px rgba(205, 127, 50, .075); }
/* Keep hover winning over the podium tint */
.cod-surface tbody tr:has(td.r1):hover td,
.cod-surface tbody tr:has(td.r2):hover td,
.cod-surface tbody tr:has(td.r3):hover td { box-shadow: inset 0 0 0 999px var(--v-row-hover); }
/* The name is the hook */
.cod-surface td.name { font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════════════
   11. LIGHT THEME — swap the night backdrop for a warm parchment war-table
   ══════════════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] .cod-surface {
  --v-line:   rgba(140, 100, 0, .22);
  --v-line-2: rgba(255, 255, 255, .5);
  --v-row-hover: rgba(160, 112, 0, .1);
}
:root[data-theme="light"] .cod-surface::before {
  background:
    radial-gradient(ellipse 62% 46% at 50% -8%, rgba(200, 150, 0, .16), transparent 62%),
    radial-gradient(ellipse 46% 52% at 5% 10%,  rgba(120, 80, 180, .08), transparent 55%),
    radial-gradient(ellipse 52% 46% at 97% 97%, rgba(40, 130, 90, .07), transparent 55%),
    radial-gradient(circle at 52% 38%, transparent 60%, rgba(120, 90, 50, .12) 100%),
    linear-gradient(180deg, #f3ecdd 0%, #efe7d5 45%, #e8dfca 100%);
}
:root[data-theme="light"] .cod-surface::after {
  background-image:
    linear-gradient(118deg, transparent 41%, rgba(160, 110, 0, .05) 50%, transparent 59%),
    linear-gradient(rgba(120, 90, 50, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 90, 50, .05) 1px, transparent 1px);
  opacity: .7;
}
:root[data-theme="light"] .cod-surface .panel {
  background: linear-gradient(180deg, rgba(253, 250, 245, .92), rgba(245, 240, 230, .95));
}
:root[data-theme="light"] .cod-surface .server-card,
:root[data-theme="light"] .cod-surface .stat-card,
:root[data-theme="light"] .cod-surface .chart-card { background: var(--bg2); }
:root[data-theme="light"] .cod-surface .server-card.active {
  background: rgba(200, 150, 0, .12);
}
:root[data-theme="light"] .cod-surface .search-input,
:root[data-theme="light"] .cod-surface select,
:root[data-theme="light"] .cod-surface .count-badge,
:root[data-theme="light"] .cod-surface .tbar-controls .btn-ghost,
:root[data-theme="light"] .cod-surface .cpbtn { background: var(--bg2); }
:root[data-theme="light"] .cod-surface thead th,
:root[data-theme="light"] .cod-surface .table-wrap thead th {
  background: linear-gradient(180deg, #ece3d0, #e2d7bf);
  color: var(--text-dim);
}
:root[data-theme="light"] .cod-surface thead th.col-freeze,
:root[data-theme="light"] .cod-surface .table-wrap thead th.col-freeze { background: #e6dcc6; }
:root[data-theme="light"] .cod-surface tbody td.col-freeze { background: rgba(245, 240, 230, .9); }
:root[data-theme="light"] .cod-surface tbody tr { border-bottom-color: rgba(120, 90, 50, .12); }
:root[data-theme="light"] .cod-surface thead th.sorted {
  box-shadow: inset 0 -2px 0 var(--gold), inset 0 0 0 999px rgba(160, 112, 0, .12);
}
:root[data-theme="light"] .cod-surface tbody tr:has(td.r1) td { box-shadow: inset 0 0 0 999px rgba(200, 150, 0, .12); }
:root[data-theme="light"] .cod-surface tbody tr:has(td.r2) td { box-shadow: inset 0 0 0 999px rgba(120, 120, 120, .1); }
:root[data-theme="light"] .cod-surface tbody tr:has(td.r3) td { box-shadow: inset 0 0 0 999px rgba(170, 100, 40, .12); }
/* Pale gold-lt titles are low-contrast on parchment — use the theme gold */
:root[data-theme="light"] .cod-surface .panel-title,
:root[data-theme="light"] .cod-surface .chart-title,
:root[data-theme="light"] .cod-surface td.name,
:root[data-theme="light"] .cod-surface .server-ally-tag,
:root[data-theme="light"] .cod-surface .stat-card:first-child .stat-val { color: var(--gold); }
:root[data-theme="light"] .cod-surface .vbar-row:hover .vbar-name { color: var(--green); }

/* ─── Motion honesty ─── */
@media (prefers-reduced-motion: reduce) {
  .cod-surface::before,
  .cod-surface .vdist-bar,
  .cod-surface .vbar-fill { animation: none !important; }
  .cod-surface * { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   12. ALLIANCE (BXH Server) — polish for tab-specific pieces so /alliance
       matches /view. Shared components (panels, tables, toolbars, search,
       count-badge, charts) are already themed above via .cod-surface; these
       rules only touch the alliance-only building blocks.
   ══════════════════════════════════════════════════════════════════════════ */
/* Server-window chips — subtle obsidian tiles */
.cod-surface .alc-srv-chip {
  background: linear-gradient(180deg, rgba(24, 29, 48, .6), rgba(14, 17, 28, .7));
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: var(--v-radius-sm);
}
.cod-surface .alc-srv-chip-name { color: var(--v-gold-lt); font-family: var(--v-num); }

/* Compare "pick a server" tiles — mirror the /view server-card (gold rail + glow) */
.cod-surface .alc-cmp-pickitem {
  background: linear-gradient(180deg, rgba(27, 32, 52, .7), rgba(15, 19, 32, .82));
  border: 1px solid rgba(240, 180, 41, .10);
  border-left: 3px solid transparent;
  border-radius: var(--v-radius-sm);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.cod-surface .alc-cmp-pickitem:hover {
  border-color: rgba(240, 180, 41, .3);
  border-left-color: rgba(240, 180, 41, .6);
}
.cod-surface .alc-cmp-pickitem.on {
  border-color: rgba(240, 180, 41, .5);
  border-left-color: var(--v-gold);
  background: linear-gradient(180deg, rgba(52, 42, 16, .55), rgba(26, 22, 12, .7));
  box-shadow: inset 0 1px 0 rgba(255, 216, 120, .18), 0 0 22px -6px rgba(240, 180, 41, .35);
}
.cod-surface .alc-cmp-pickitem .alc-cmp-srv { font-family: var(--v-num); color: var(--v-gold-lt); }

/* Compare summary — stronger "max" highlight with a gold edge */
.cod-surface .alc-sum-max {
  color: var(--v-gold-lt); font-weight: 700;
  background: rgba(240, 180, 41, .1);
  box-shadow: inset 2px 0 0 var(--v-gold);
}

/* Legend chips use the numeric face for the S### tokens */
.cod-surface .alc-radar-lg { font-family: var(--v-num); }

/* Alliance (BXH Server) reads best CENTERED — center the numeric columns
   (headers tagged .alc-rt in alliance.js) and their cells, while keeping the
   Name / Alliance identity columns left-aligned. Scoped to #tab-alliance so
   /view keeps its right-aligned numeric spine. Header + cell both centered →
   perfectly in-line. */
.cod-surface th.alc-rt { text-align: center; }
#tab-alliance tbody td { text-align: center; }
#tab-alliance tbody td.left { text-align: left; }

/* ── Segmented toggles ("switch" controls: view-mode + data-mode) ──
   Reworked into a premium console-tab group: inset obsidian track, Oswald
   uppercase labels, a lit gold active pill. Both the Xếp Hạng/Thành Viên/So Sánh
   toggle and the Toàn bộ/Chọn ngày toggle share .alc-view-toggle. */
.cod-surface .alc-view-toggle {
  gap: 3px;
  background: rgba(6, 9, 16, .55);
  border: 1px solid var(--v-line);
  border-radius: 11px;
  padding: 4px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .5);
}
.cod-surface .alc-view-toggle .btn {
  font-family: var(--v-disp);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--text-dim);
  background: transparent;
  border-radius: 8px;
  padding: 7px 17px;
  transition: color .16s ease, background .16s ease, box-shadow .16s ease, transform .1s ease;
}
.cod-surface .alc-view-toggle .btn:hover:not(.btn-primary) {
  color: var(--v-gold-lt);
  background: rgba(240, 180, 41, .08);
}
.cod-surface .alc-view-toggle .btn.btn-primary {
  color: #17120a !important;
  background: linear-gradient(180deg, #ffe58c 0%, #f3ba33 52%, #cf9312 100%) !important;
  border-color: rgba(255, 228, 140, .55) !important;
  box-shadow:
    0 3px 12px rgba(240, 180, 41, .38),
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -2px 3px rgba(150, 95, 0, .3) !important;
}
.cod-surface .alc-view-toggle .btn.btn-primary:hover { filter: brightness(1.04); }
.cod-surface .alc-view-toggle .btn:active { transform: translateY(1px); }
:root[data-theme="light"] .cod-surface .alc-view-toggle {
  background: rgba(0, 0, 0, .05);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .08);
}
@media (max-width: 600px) {
  .cod-surface .alc-view-toggle .btn { letter-spacing: .3px; padding: 7px 6px; }
  /* Drop the outer glow on tight widths so the active tab doesn't read wider */
  .cod-surface .alc-view-toggle .btn.btn-primary {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .15) !important;
  }
}

/* Info notice — obsidian card that keeps the info-blue signal */
.cod-surface .alc-notice {
  background: linear-gradient(180deg, rgba(24, 29, 48, .55), rgba(13, 16, 27, .7));
  border: 1px solid rgba(79, 168, 255, .18);
  border-left: 3px solid rgba(79, 168, 255, .65);
  border-radius: var(--v-radius-sm);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
:root[data-theme="light"] .cod-surface .alc-notice {
  background: rgba(79, 168, 255, .06);
}

/* General ghost buttons across the surface (e.g. "Xem chi tiết N server").
   Lower specificity than the toggle rules above, so it never repaints the
   inactive toggle buttons. */
.cod-surface .btn-ghost {
  background: rgba(8, 11, 20, .5);
  border-color: var(--border);
  border-radius: var(--v-radius-sm);
  transition: border-color .15s, color .15s, background .15s;
}
.cod-surface .btn-ghost:hover {
  border-color: rgba(240, 180, 41, .55);
  color: var(--v-gold-lt);
  background: rgba(240, 180, 41, .08);
}
:root[data-theme="light"] .cod-surface .btn-ghost { background: var(--bg2); }

/* ══════════════════════════════════════════════════════════════════════════
   13. COMPARE (/compare) & LORD (/lord) — polish for tab-specific pieces so
       both match /view. Shared components (panels, tables, toolbars, search,
       count-badge, column picker, medals, group bands, ghost buttons) are
       already themed above via .cod-surface; these rules only touch the
       compare/lord-only building blocks.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Compare: keep the identity columns (Name / Alliance, tagged .left) left-
   aligned. The big diff table has a 2-row header (group band + sortable metric
   row) and the Top-10 table has a 1-row header — base `th{text-align:center}`
   already centers both, and body cells inherit the global `.cod-surface tbody
   td` centering + `td.left` left-align from section 8. ── */
#tab-compare thead th.left { text-align: left; }

/* Section labels ("So Sánh Tổng Thay Đổi", "Top 10", date pickers) — Oswald
   caps with a small gold rune. Shared by /compare and /lord. */
.cod-surface .section-label {
  font-family: var(--v-disp);
  font-weight: 600;
  color: var(--v-gold-lt);
  letter-spacing: 1.8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cod-surface .section-label::before {
  content: '';
  width: 6px; height: 6px;
  flex-shrink: 0;
  background: var(--v-gold);
  transform: rotate(45deg);
  box-shadow: 0 0 8px rgba(240, 180, 41, .7);
}

/* Compare — summary "total change" cards (HUD stat plates). The colored top
   stripe keeps its per-metric accent (set inline via border-top-color); we only
   restyle the body + side borders, so the inline color still wins for the top
   edge. */
.cod-surface .cmp-card {
  background: linear-gradient(180deg, rgba(24, 29, 48, .68), rgba(14, 17, 28, .8));
  border: 1px solid rgba(255, 255, 255, .05);
  border-top-width: 2px;   /* accent stripe; color comes from inline style */
  border-radius: var(--v-radius-sm);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.cod-surface .cmp-title {
  font-family: var(--v-disp);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--v-gold-lt);
}
.cod-surface .cmp-row { border-bottom-color: rgba(255, 255, 255, .05); }
.cod-surface .cmp-key { font-family: var(--v-disp); letter-spacing: .3px; }
.cod-surface .cmp-val { font-family: var(--v-num); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Compare — Top-10 metric selector pills: inset console tabs, lit gold active */
.cod-surface .metric-tab {
  font-family: var(--v-disp);
  font-weight: 600;
  letter-spacing: .4px;
  background: rgba(8, 11, 20, .5);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: var(--v-radius-sm);
  transition: color .15s, background .15s, border-color .15s, box-shadow .15s;
}
.cod-surface .metric-tab:hover {
  border-color: rgba(240, 180, 41, .5);
  color: var(--v-gold-lt);
  background: rgba(240, 180, 41, .08);
}
.cod-surface .metric-tab.active {
  color: #17120a;
  background: linear-gradient(180deg, #ffe58c 0%, #f3ba33 52%, #cf9312 100%);
  border-color: rgba(255, 228, 140, .55);
  box-shadow: 0 2px 10px rgba(240, 180, 41, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* Compare — "pick two different dates" info notice (obsidian info card) */
.cod-surface .status.info {
  background: linear-gradient(180deg, rgba(24, 29, 48, .55), rgba(13, 16, 27, .7));
  border: 1px solid rgba(79, 168, 255, .18);
  border-left: 3px solid rgba(79, 168, 255, .65);
  border-radius: var(--v-radius-sm);
  color: var(--text);
}

/* ── Lord — player profile + history ── */
.cod-surface .lord-profile-name {
  font-family: var(--v-disp);
  font-weight: 700;
  letter-spacing: .4px;
  text-shadow: 0 0 16px rgba(255, 126, 182, .35);   /* keeps the pink lord accent */
}
.cod-surface .detail-sec-title {
  font-family: var(--v-disp);
  font-weight: 600;
  color: var(--v-gold-lt);
  letter-spacing: 1.6px;
  border-bottom: 1px solid var(--v-line);
}
.cod-surface .detail-row { border-bottom-color: rgba(255, 255, 255, .05); }
.cod-surface .detail-key { font-family: var(--v-disp); letter-spacing: .2px; }
.cod-surface .detail-val { font-variant-numeric: tabular-nums; }  /* keep font (Vietnamese-safe) */

/* Lord — recent-ID search chips: obsidian tiles with a gold hover rail */
.cod-surface .lord-recent-label { font-family: var(--v-disp); letter-spacing: .4px; }
.cod-surface .lord-recent-chip {
  background: linear-gradient(180deg, rgba(24, 29, 48, .6), rgba(14, 17, 28, .72));
  border: 1px solid rgba(240, 180, 41, .12);
  border-radius: var(--v-radius-sm);
  transition: border-color .15s, background .15s;
}
.cod-surface .lord-recent-chip:hover {
  border-color: rgba(240, 180, 41, .45);
  background: linear-gradient(180deg, rgba(33, 39, 62, .75), rgba(19, 24, 40, .85));
}
.cod-surface .lord-recent-chip b { color: var(--v-gold-lt); }

/* Lord — profile + history sections rendered as separated obsidian stat cards
   (both the current-profile grid and the before→after history grid) so the
   three columns read as distinct panels instead of one flat wall. */
.cod-surface .lord-profile-body .detail-sec,
.cod-surface .lord-diff-grid .detail-sec {
  background: linear-gradient(180deg, rgba(255, 255, 255, .022), rgba(0, 0, 0, .08));
  border: 1px solid var(--v-line);
  border-radius: var(--v-radius-sm);
  padding: 12px 14px 6px;
  margin-bottom: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

/* History diff rows — aligned "before → after" with a colored delta pill.
   Numbers use the Rajdhani tabular face; the whole value group right-aligns and
   wraps gracefully on narrow columns so long figures never overflow. */
.cod-surface .lord-diff-grid .detail-row { align-items: center; gap: 10px; padding: 7px 0; }
.cod-surface .lord-diff-grid .detail-key,
.cod-surface .lord-profile-body .detail-key {
  font-family: var(--v-disp);
  letter-spacing: .2px;
  color: var(--text-dim);
}
.cod-surface .lord-stat-vals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 5px 8px;
  flex: 1;
  min-width: 0;
  font-family: var(--v-num);
  font-variant-numeric: tabular-nums;
}
.cod-surface .lord-stat-num { white-space: nowrap; font-weight: 600; }
.cod-surface .lord-stat-num.before { color: var(--text-dim); }
.cod-surface .lord-stat-num.after  { color: var(--text); font-weight: 700; }
.cod-surface .lord-stat-arrow { color: rgba(240, 180, 41, .6); font-weight: 700; }
.cod-surface .lord-stat-vals-plain b { color: var(--v-gold-lt); }
.cod-surface .lord-delta {
  white-space: nowrap;
  font-weight: 700;
  font-size: .8rem;
  line-height: 1.5;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.cod-surface .lord-delta.pos { color: var(--green); background: rgba(61, 255, 160, .1);  border-color: rgba(61, 255, 160, .24); }
.cod-surface .lord-delta.neg { color: var(--red);   background: rgba(255, 77, 109, .1);  border-color: rgba(255, 77, 109, .24); }
.cod-surface .lord-delta.zero { color: var(--text-dim); background: transparent; border-color: transparent; padding: 0; }

/* ── Light theme — keep parchment readable ── */
:root[data-theme="light"] .cod-surface .lord-profile-body .detail-sec,
:root[data-theme="light"] .cod-surface .lord-diff-grid .detail-sec {
  background: linear-gradient(180deg, rgba(0, 0, 0, .015), rgba(0, 0, 0, .04));
}

/* ══════════════════════════════════════════════════════════════════════════
   14. KVK — Match Prediction (/kvk/match). A "war council" redesign: obsidian
       match boards, azure vs. rose team banners, a glowing VS sigil and premium
       tug-of-war comparison bars. renderKvk() toggles .cod-surface onto #tab-kvk
       for the match view ONLY (the calendar sub-tab keeps its own styling).
       These rules override the base .kvk-* set in style.css.
   ══════════════════════════════════════════════════════════════════════════ */
.cod-surface .kvk-subtitle { color: var(--text-dim); font-size: .88rem; margin: -4px 0 16px; }

/* ── Match board ── */
.cod-surface .kvk-match {
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(255, 77, 109, .07), transparent 60%),
    linear-gradient(180deg, rgba(24, 29, 48, .5), rgba(12, 15, 25, .62));
  border: 1px solid var(--v-line);
  border-radius: var(--v-radius);
  padding: 18px;
  box-shadow: inset 0 1px 0 var(--v-line-2), 0 18px 40px -28px rgba(0, 0, 0, .9);
  transition: border-color .2s, box-shadow .2s;
}
.cod-surface .kvk-match:hover {
  border-color: rgba(240, 180, 41, .28);
  box-shadow: inset 0 1px 0 var(--v-line-2), 0 22px 46px -26px rgba(0, 0, 0, .95);
}
.cod-surface .kvk-match-head {
  border-bottom: 1px solid var(--v-line);
  padding-bottom: 11px;
  margin-bottom: 15px;
}
.cod-surface .kvk-match-num {
  font-family: var(--v-disp);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--v-gold-lt);
  font-size: .92rem;
  display: flex; align-items: center; gap: 9px;
}
.cod-surface .kvk-match-num::before {
  content: '⚔';
  font-size: .95rem;
  color: #ff6b81;
  text-shadow: 0 0 10px rgba(255, 77, 109, .6);
}

/* ── Arena + team colour tokens ── */
.cod-surface .kvk-arena { gap: 16px; }
.cod-surface .kvk-team-a { --team: #4fa8ff; --team-rgb: 79, 168, 255; }
.cod-surface .kvk-team-b { --team: #ff7eb6; --team-rgb: 255, 126, 182; }

.cod-surface .kvk-team {
  min-width: 0;   /* let the 1fr arena tracks shrink instead of overflowing */
  background:
    radial-gradient(120% 40% at 50% 0%, rgba(var(--team-rgb), .12), transparent 62%),
    linear-gradient(180deg, rgba(20, 25, 41, .72), rgba(12, 15, 25, .82));
  border: 1px solid rgba(255, 255, 255, .05);
  border-top: 2px solid rgba(var(--team-rgb), .7);
  border-radius: var(--v-radius);
  padding: 15px;
  gap: 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.cod-surface .kvk-team:hover { transform: translateY(-2px); border-color: rgba(var(--team-rgb), .35); }
.cod-surface .kvk-team-a .kvk-team-name,
.cod-surface .kvk-team-b .kvk-team-name {
  font-family: var(--v-disp);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--team);
  text-shadow: 0 0 16px rgba(var(--team-rgb), .45);
}
.cod-surface .kvk-team-count {
  font-family: var(--v-num);
  color: var(--team);
  background: rgba(var(--team-rgb), .12);
  border: 1px solid rgba(var(--team-rgb), .3);
  border-radius: 999px;
  padding: 2px 10px;
}

/* Server chips — team-tinted glass pills */
.cod-surface .kvk-srv-chip {
  background: rgba(var(--team-rgb), .14);
  border: 1px solid rgba(var(--team-rgb), .38);
  color: var(--team);
  font-family: var(--v-num);
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 4px 3px 11px;
}
.cod-surface .kvk-srv-x {
  background: rgba(0, 0, 0, .3);
  color: var(--team);
  width: 17px; height: 17px;
}
.cod-surface .kvk-srv-x:hover { background: rgba(var(--team-rgb), .6); color: #0b0e18; }

.cod-surface .kvk-add-btn {
  background: rgba(var(--team-rgb), .08);
  border: 1px dashed rgba(var(--team-rgb), .45);
  color: var(--team);
  font-family: var(--v-disp);
  letter-spacing: .5px;
  border-radius: 999px;
}
.cod-surface .kvk-add-btn:hover { background: rgba(var(--team-rgb), .18); border-style: solid; }

/* Server picker dropdown — keep base left/right positioning; restyle surface */
.cod-surface .kvk-picker {
  background: linear-gradient(180deg, rgba(24, 29, 48, .96), rgba(13, 16, 27, .98));
  border: 1px solid rgba(240, 180, 41, .18);
  border-radius: var(--v-radius-sm);
  box-shadow: 0 18px 42px -18px rgba(0, 0, 0, .95);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.cod-surface .kvk-picker-search {
  background: rgba(8, 11, 20, .7);
  border: 1px solid var(--border);
  border-radius: var(--v-radius-xs);
}
.cod-surface .kvk-picker-search:focus { border-color: var(--v-gold); outline: none; }
.cod-surface .kvk-picker-item { border-radius: var(--v-radius-xs); }
.cod-surface .kvk-picker-item:hover { background: rgba(var(--team-rgb), .16); }
.cod-surface .kvk-picker-srv { font-family: var(--v-num); color: var(--v-gold-lt); }

/* Team primary metric — hero headline (icon | stacked label/value/count) */
.cod-surface .kvk-hero {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  column-gap: 12px;
  padding: 11px 13px;
  background: linear-gradient(180deg, rgba(var(--team-rgb), .14), rgba(var(--team-rgb), .03));
  border: 1px solid rgba(var(--team-rgb), .26);
  border-radius: var(--v-radius-sm);
}
.cod-surface .kvk-hero-icon img { width: 40px; height: 40px; object-fit: contain; display: block; }
.cod-surface .kvk-hero-body { min-width: 0; }   /* let the big number shrink, never overflow */
.cod-surface .kvk-hero-label {
  font-family: var(--v-disp); font-size: .64rem; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim);
}
.cod-surface .kvk-hero-value {
  font-family: var(--v-num); font-size: 1.5rem; font-weight: 700; line-height: 1.15;
  color: var(--team); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(var(--team-rgb), .4);
  overflow-wrap: anywhere;   /* wrap rather than break the card on ultra-long full numbers */
}
.cod-surface .kvk-hero-sub {
  font-family: var(--v-disp); font-size: .62rem; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text-dim); line-height: 1.3; margin-top: 2px;
}

/* Secondary metric cells — icon left, label + value stacked right */
.cod-surface .kvk-stats-grid { gap: 7px; }
.cod-surface .kvk-stat-card {
  background: linear-gradient(180deg, rgba(24, 29, 48, .6), rgba(14, 17, 28, .74));
  border: 1px solid rgba(255, 255, 255, .05);
  border-left: 2px solid var(--m-color, var(--v-gold));
  border-radius: var(--v-radius-sm);
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 30px 1fr;
  grid-template-areas: "icon label" "icon value";
  column-gap: 9px;
  align-items: center;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.cod-surface .kvk-stat-card:hover {
  border-color: var(--m-color, var(--v-gold));
  box-shadow: 0 0 18px -8px var(--m-color, var(--v-gold));
  transform: translateY(-1px);
}
.cod-surface .kvk-stat-icon { grid-area: icon; }
.cod-surface .kvk-stat-icon img { width: 30px; height: 30px; }
.cod-surface .kvk-stat-label { grid-area: label; margin: 0; font-size: .6rem; }
.cod-surface .kvk-stat-value {
  grid-area: value; margin: 0;
  font-family: var(--v-num); font-size: 1rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cod-surface .kvk-stats-empty { border: 1px dashed var(--v-line); border-radius: var(--v-radius-sm); color: var(--text-dim); }

/* ── VS sigil ── */
.cod-surface .kvk-vs-circle {
  position: relative;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #2a1420, #120a12 70%);
  border: 1px solid rgba(240, 180, 41, .55);
  color: var(--v-gold-lt);
  font-family: var(--v-disp);
  font-weight: 700; letter-spacing: 2px; font-size: 1.02rem;
  box-shadow: 0 0 26px -6px rgba(255, 77, 109, .5), inset 0 1px 0 rgba(255, 255, 255, .18);
  animation: kvkSigilPulse 2.6s ease-in-out infinite;
}
.cod-surface .kvk-vs-circle::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px dashed rgba(240, 180, 41, .4);
  animation: kvkSigilSpin 12s linear infinite;
}
@keyframes kvkSigilPulse {
  0%, 100% { box-shadow: 0 0 26px -6px rgba(255, 77, 109, .45), inset 0 1px 0 rgba(255, 255, 255, .18); }
  50%      { box-shadow: 0 0 34px -2px rgba(255, 77, 109, .7),  inset 0 1px 0 rgba(255, 255, 255, .18); }
}
@keyframes kvkSigilSpin { to { transform: rotate(360deg); } }

/* ── Verdict badge ── */
.cod-surface .kvk-cmp-block { border-top: 1px solid var(--v-line); }
.cod-surface .kvk-verdict {
  font-family: var(--v-disp);
  font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  border-radius: var(--v-radius-sm);
  border: 1px solid transparent;
}
.cod-surface .kvk-verdict.win-a { background: rgba(79, 168, 255, .12);  border-color: rgba(79, 168, 255, .35);  color: #7cc4ff; box-shadow: 0 0 22px -8px rgba(79, 168, 255, .6); }
.cod-surface .kvk-verdict.win-b { background: rgba(255, 126, 182, .12); border-color: rgba(255, 126, 182, .35); color: #ff9dc7; box-shadow: 0 0 22px -8px rgba(255, 126, 182, .6); }
.cod-surface .kvk-verdict.tie   { background: rgba(255, 255, 255, .04); border-color: var(--v-line); color: var(--text-dim); }

/* ── Tug-of-war comparison bars ── */
.cod-surface .kvk-cmp-label { font-family: var(--v-disp); font-size: .8rem; letter-spacing: .3px; color: var(--text); }
.cod-surface .kvk-cmp-bar {
  position: relative;
  height: 30px;
  border-radius: var(--v-radius-xs);
  background: rgba(6, 9, 16, .7);
  border: 1px solid var(--v-line);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55);
}
.cod-surface .kvk-cmp-bar::after {   /* 50/50 reference seam */
  content: '';
  position: absolute; left: 50%; top: 3px; bottom: 3px; width: 1px;
  background: rgba(255, 255, 255, .12);
  transform: translateX(-.5px);
  pointer-events: none;
}
.cod-surface .kvk-cmp-side { font-family: var(--v-num); font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cod-surface .kvk-cmp-side.a { background: linear-gradient(90deg,  rgba(79, 168, 255, .55),  rgba(79, 168, 255, .12));  color: #eaf4ff; }
.cod-surface .kvk-cmp-side.b { background: linear-gradient(270deg, rgba(255, 126, 182, .55), rgba(255, 126, 182, .12)); color: #ffeef6; }
.cod-surface .kvk-cmp-side.win.a { background: linear-gradient(90deg,  rgba(79, 168, 255, .92),  rgba(79, 168, 255, .35));  color: #04122b; font-weight: 800; box-shadow: inset 0 0 14px rgba(255, 255, 255, .25); }
.cod-surface .kvk-cmp-side.win.b { background: linear-gradient(270deg, rgba(255, 126, 182, .92), rgba(255, 126, 182, .35)); color: #2a0a1a; font-weight: 800; box-shadow: inset 0 0 14px rgba(255, 255, 255, .25); }
.cod-surface .kvk-cmp-side.lose { opacity: .45; }
.cod-surface .kvk-cmp-diff { font-family: var(--v-num); color: var(--v-gold-lt); font-weight: 700; }

.cod-surface .kvk-add-match { font-family: var(--v-disp); letter-spacing: 1.5px; }

/* ── Light theme — swap the obsidian surfaces for parchment ── */
:root[data-theme="light"] .cod-surface .kvk-match {
  background: linear-gradient(180deg, rgba(253, 250, 245, .9), rgba(245, 240, 230, .94));
}
:root[data-theme="light"] .cod-surface .kvk-team { background: var(--bg2); }
:root[data-theme="light"] .cod-surface .kvk-stat-card,
:root[data-theme="light"] .cod-surface .kvk-picker { background: var(--bg2); }
:root[data-theme="light"] .cod-surface .kvk-cmp-bar { background: rgba(0, 0, 0, .05); }

/* ── Responsive — our .cod-surface rules outrank the base @media tweaks by
   specificity, so re-apply the mobile sizing here. ── */
/* Stack the two teams below ~1024px: with the desktop sidebar taking ~240px,
   the content column can't fit two full team cards side-by-side much before
   this, so the base 768px stack point left an overflow gap (Team B clipped). */
@media (max-width: 1024px) {
  .cod-surface .kvk-arena { grid-template-columns: 1fr; }
  /* Teams are full-width when stacked → every picker opens rightward */
  .cod-surface .kvk-team-b .kvk-picker,
  .cod-surface .kvk-picker { left: 0; right: auto; }
}
@media (max-width: 768px) {
  .cod-surface .kvk-match { padding: 14px; }
  .cod-surface .kvk-team { padding: 13px; }
  .cod-surface .kvk-hero { padding: 10px 12px; column-gap: 10px; }
  .cod-surface .kvk-hero-value { font-size: 1.3rem; }
  .cod-surface .kvk-hero-icon img { width: 34px; height: 34px; }
  /* two metric columns (base sets three, which our grid layout makes too tight) */
  .cod-surface .kvk-stats-grid { grid-template-columns: 1fr 1fr; }
  /* shrink VS sigil + comparison text back down */
  .cod-surface .kvk-vs-circle { width: 48px; height: 48px; font-size: .88rem; }
  .cod-surface .kvk-cmp-label { font-size: .74rem; }
  .cod-surface .kvk-cmp-side { font-size: .7rem; padding: 0 6px; }
  .cod-surface .kvk-cmp-bar { height: 24px; }
}
@media (max-width: 560px) {
  /* one metric per row: icon · label · value(right) — cannot overflow the card */
  .cod-surface .kvk-stats-grid { grid-template-columns: 1fr; }
  .cod-surface .kvk-stat-card {
    grid-template-columns: 26px 1fr auto;
    grid-template-areas: "icon label value";
    column-gap: 8px;
  }
  .cod-surface .kvk-stat-icon img { width: 26px; height: 26px; }
  .cod-surface .kvk-stat-label { font-size: .64rem; }
  .cod-surface .kvk-stat-value { text-align: right; font-size: .92rem; }
  .cod-surface .kvk-cmp-label { font-size: .68rem; }
}

/* ── Motion honesty ── */
@media (prefers-reduced-motion: reduce) {
  .cod-surface .kvk-vs-circle,
  .cod-surface .kvk-vs-circle::before { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   15. KVK — Season Calendar (/kvk/calendar). Themed to match the site: obsidian
       toolbar + grid, gold hairlines, a gold "today" spotlight and vivid solid
       category bars (replacing the base color-mix() bars, which lose their
       border on iOS Safari <16.4). renderKvk() keeps .cod-surface on #tab-kvk
       for the calendar sub-tab too. VISUAL-ONLY overrides (no padding / size /
       grid-template changes) so the base responsive @media rules still apply.
   ══════════════════════════════════════════════════════════════════════════ */

/* Header + season pill */
.cod-surface .kvc-sub { color: var(--text-dim); }
.cod-surface .kvc-season-name {
  font-family: var(--v-disp);
  letter-spacing: 1px;
  color: var(--v-gold-lt);
  background: linear-gradient(135deg, rgba(240, 180, 41, .14), rgba(240, 180, 41, .04));
  border: 1px solid rgba(240, 180, 41, .32);
}

/* Toolbar shell + fields */
.cod-surface .kvc-toolbar {
  background: linear-gradient(180deg, rgba(24, 29, 48, .55), rgba(13, 16, 27, .62));
  border: 1px solid var(--v-line);
  border-radius: var(--v-radius);
}
.cod-surface .kvc-tb-label { font-family: var(--v-disp); color: var(--text-dim); }
.cod-surface .kvc-date-btn,
.cod-surface .kvc-time-wrap {
  background: rgba(8, 11, 20, .6);
  border: 1px solid var(--border);
  border-radius: var(--v-radius-sm);
}
.cod-surface .kvc-date-btn:hover { background: rgba(12, 16, 28, .85); border-color: rgba(240, 180, 41, .45); }
.cod-surface .kvc-date-btn:focus-visible,
.cod-surface .kvc-time-wrap:focus-within {
  border-color: var(--v-gold);
  box-shadow: 0 0 0 3px rgba(240, 180, 41, .18);
}
.cod-surface .kvc-select {
  -webkit-appearance: none; appearance: none;
  background-color: rgba(8, 11, 20, .6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23f0b429' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1.5 2l4.5 4 4.5-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 11px;
  border: 1px solid var(--border);
  border-radius: var(--v-radius-sm);
  padding-right: 30px;
}
.cod-surface .kvc-select:focus { border-color: var(--v-gold); box-shadow: 0 0 0 3px rgba(240, 180, 41, .18); }

/* Anchor pill (Dark-Monster time) — pink accent on obsidian */
.cod-surface .kvc-anchor-pill {
  background: linear-gradient(180deg, rgba(24, 29, 48, .6), rgba(13, 16, 27, .72));
  border: 1px solid rgba(255, 126, 150, .32);
  border-left: 3px solid rgba(255, 126, 150, .7);
  border-radius: var(--v-radius-sm);
}
.cod-surface .kvc-anchor-pill b { color: #ff9dc7; }
.cod-surface .kvc-anchor-tz {
  background: rgba(255, 126, 150, .16);
  border: 1px solid rgba(255, 126, 150, .35);
  color: #ffb0c1;
  font-family: var(--v-num);
}

/* Today summary — gold spotlight card */
.cod-surface .kvc-today-summary {
  background: linear-gradient(135deg, rgba(240, 180, 41, .12), rgba(240, 180, 41, .02));
  border: 1px solid rgba(240, 180, 41, .3);
  border-radius: var(--v-radius-sm);
}
.cod-surface .kvc-today-title b { color: var(--v-gold-lt); }
.cod-surface .kvc-today-count {
  background: rgba(8, 11, 20, .5);
  border: 1px solid var(--border);
  font-family: var(--v-num);
}

/* Filters */
.cod-surface .kvc-filters-toggle {
  background: rgba(8, 11, 20, .5);
  border: 1px solid var(--border);
  border-radius: var(--v-radius-sm);
}
.cod-surface .kvc-filters-toggle:hover { border-color: rgba(240, 180, 41, .45); background: rgba(240, 180, 41, .06); }
.cod-surface .kvc-filters-toggle-label { font-family: var(--v-disp); }
.cod-surface .kvc-filters-toggle-count { background: var(--v-gold); color: #1a1305; font-family: var(--v-num); }
.cod-surface .kvc-filters-count { background: rgba(8, 11, 20, .5); border: 1px solid var(--border); font-family: var(--v-disp); }
.cod-surface .kvc-filters-pop {
  background: linear-gradient(180deg, rgba(24, 29, 48, .97), rgba(13, 16, 27, .98));
  border: 1px solid rgba(240, 180, 41, .18);
  border-radius: var(--v-radius-sm);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.cod-surface .kvc-filters-title { font-family: var(--v-disp); color: var(--v-gold-lt); }
.cod-surface .kvc-mini-btn { background: rgba(8, 11, 20, .5); border: 1px solid var(--border); border-radius: var(--v-radius-xs); }
.cod-surface .kvc-mini-btn:hover:not(:disabled) { border-color: rgba(240, 180, 41, .45); color: var(--v-gold-lt); }
.cod-surface .kvc-filter-opt:hover { background: var(--v-row-hover); }

/* Grid shell + header */
.cod-surface .kvc-grid-wrap {
  border: 1px solid var(--v-line);
  border-radius: var(--v-radius);
  background: rgba(12, 15, 25, .72);
  scrollbar-color: rgba(240, 180, 41, .4) transparent;
}
.cod-surface .kvc-grid-wrap::-webkit-scrollbar-thumb { background: rgba(240, 180, 41, .4); }
.cod-surface .kvc-grid-wrap::-webkit-scrollbar-track { background: transparent; }
.cod-surface .kvc-grid { background: transparent; }
.cod-surface .kvc-grid-head {
  background: linear-gradient(180deg, #1c2138, #141829);
  border-bottom: 2px solid rgba(240, 180, 41, .3);
}
.cod-surface .kvc-grid-day-head { font-family: var(--v-disp); color: var(--text-dim); }
.cod-surface .kvc-grid-day-head:nth-child(7),
.cod-surface .kvc-grid-day-head:nth-child(8) { color: #ff9dc7; }
.cod-surface .kvc-grid-wlabel {
  background: #171b2d;
  color: var(--text-dim);
  font-family: var(--v-disp);
  border-right: 1px solid var(--v-line);
}
.cod-surface .kvc-grid-row { border-top: 1px solid var(--v-line); }

/* Day cells — the hero: clear obsidian cells, gold "today" spotlight */
.cod-surface .kvc-cell {
  background: rgba(18, 22, 36, .55);
  border-right: 1px solid var(--v-line);
}
.cod-surface .kvc-cell:hover { background: var(--v-row-hover); }
.cod-surface .kvc-cell.today {
  background: linear-gradient(180deg, rgba(240, 180, 41, .12), transparent 62%);
  box-shadow: inset 0 0 0 2px var(--v-gold);
}
.cod-surface .kvc-cell-dnum { font-family: var(--v-num); color: var(--text); }
.cod-surface .kvc-cell-today { font-family: var(--v-disp); background: var(--v-gold); color: #1a1305; }

/* Event bars — vivid solid category colour (no color-mix → iOS-safe) */
.cod-surface .kvc-ev {
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(0, 0, 0, .14)), var(--ev);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
.cod-surface .kvc-ev-t { font-family: var(--v-num); }
.cod-surface .kvc-ev-key {
  box-shadow:
    0 0 0 2px var(--v-gold),
    0 0 12px 1px rgba(240, 180, 41, .5),
    inset 0 0 10px rgba(240, 180, 41, .35);
}

/* Legend */
.cod-surface .kvc-legend {
  background: linear-gradient(180deg, rgba(24, 29, 48, .5), rgba(13, 16, 27, .6));
  border: 1px solid var(--v-line);
  border-radius: var(--v-radius-sm);
}
.cod-surface .kvc-legend-title { font-family: var(--v-disp); color: var(--v-gold-lt); }

/* ── Light theme — swap the obsidian surfaces for parchment ── */
:root[data-theme="light"] .cod-surface .kvc-toolbar {
  background: linear-gradient(180deg, rgba(253, 250, 245, .8), rgba(245, 240, 230, .85));
}
:root[data-theme="light"] .cod-surface .kvc-date-btn,
:root[data-theme="light"] .cod-surface .kvc-time-wrap,
:root[data-theme="light"] .cod-surface .kvc-filters-toggle,
:root[data-theme="light"] .cod-surface .kvc-filters-count,
:root[data-theme="light"] .cod-surface .kvc-today-count,
:root[data-theme="light"] .cod-surface .kvc-filters-pop,
:root[data-theme="light"] .cod-surface .kvc-mini-btn,
:root[data-theme="light"] .cod-surface .kvc-grid-wrap,
:root[data-theme="light"] .cod-surface .kvc-legend,
:root[data-theme="light"] .cod-surface .kvc-cell { background: var(--bg2); }
:root[data-theme="light"] .cod-surface .kvc-select { background-color: var(--bg2); }
:root[data-theme="light"] .cod-surface .kvc-grid-head { background: linear-gradient(180deg, #ece3d0, #e2d7bf); }
:root[data-theme="light"] .cod-surface .kvc-grid-wlabel { background: #e6dcc6; }
:root[data-theme="light"] .cod-surface .kvc-cell:hover { background: var(--bg3); }
:root[data-theme="light"] .cod-surface .kvc-cell.today {
  background: linear-gradient(180deg, rgba(160, 112, 0, .14), transparent 62%);
}
:root[data-theme="light"] .cod-surface .kvc-anchor-pill {
  background: linear-gradient(135deg, rgba(255, 77, 109, .08), rgba(255, 77, 109, .02));
}

/* ══════════════════════════════════════════════════════════════════════════
   16. GAMEDATA (/gamedata) — Heroes / Quiz / Event / Mobilize. Reskins the
       sub-tab-specific pieces to match the site. Backgrounds are left on the
       theme tokens (var(--bg2/3/4)) so both light + dark work with no per-piece
       overrides; we upgrade borders → gold hairlines, accent text, Oswald/
       Rajdhani faces, hover/active states, and replace the base color-mix()
       (which loses its tint on iOS Safari <16.4). Panels/search are already
       themed via .cod-surface. VISUAL-only (no grid-template / size changes) so
       the base responsive @media rules still apply.
   ══════════════════════════════════════════════════════════════════════════ */

/* Custom search inputs (quiz/event + heroes don't use .search-input) */
.cod-surface .quiz-search-wrap input,
.cod-surface .hero-search-input {
  border: 1px solid var(--border);
  border-radius: var(--v-radius-sm);
  transition: border-color .15s, box-shadow .15s;
}
.cod-surface .quiz-search-wrap input:focus,
.cod-surface .hero-search-input:focus {
  border-color: var(--v-gold);
  box-shadow: 0 0 0 3px rgba(240, 180, 41, .18);
}

/* Active state for the ghost toggles (Mobilize browse/plan mode) */
.cod-surface .btn-ghost.active {
  border-color: rgba(240, 180, 41, .5);
  color: var(--v-gold-lt);
  background: rgba(240, 180, 41, .08);
}

/* ── Quiz + Event — Q&A cards (gold spine, filled number badge, answer callout) ── */
.cod-surface .quiz-item {
  background: linear-gradient(180deg, rgba(24, 29, 48, .58), rgba(12, 15, 25, .66));
  border: 1px solid var(--v-line);
  border-left: 3px solid rgba(240, 180, 41, .5);
  border-radius: var(--v-radius-sm);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.cod-surface .quiz-item:hover {
  border-color: rgba(240, 180, 41, .4);
  border-left-color: var(--v-gold);
  box-shadow: 0 8px 20px -10px rgba(240, 180, 41, .35), inset 0 1px 0 rgba(255, 255, 255, .05);
  transform: translateY(-1px);
}
/* Number → a lit gold badge */
.cod-surface .quiz-num {
  background: linear-gradient(180deg, #ffe58c 0%, #f3ba33 55%, #cf9312 100%);
  color: #1a1305;
  border-radius: 8px;
  font-family: var(--v-num);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(240, 180, 41, .35), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.cod-surface .quiz-q { color: var(--text); }
/* Answer → a gold callout box with a teal check */
.cod-surface .quiz-a {
  margin-top: 7px;
  padding: 6px 11px;
  background: linear-gradient(90deg, rgba(240, 180, 41, .14), rgba(240, 180, 41, .03));
  border-left: 3px solid var(--v-gold);
  border-radius: 0 7px 7px 0;
  color: var(--v-gold-lt);
  font-weight: 700;
}
.cod-surface .quiz-a::before { content: '✓ '; color: var(--v-teal); font-weight: 800; opacity: 1; }
.cod-surface .quiz-hl,
.cod-surface .mobilize-hl { background: rgba(240, 180, 41, .32); }

/* ── Mobilize — filter chips ── */
/* Section labels ("CHỌN BẬC…", "CHỌN LOẠI…") → Oswald caps + a gold rune */
.cod-surface .mobilize-filter-label {
  font-family: var(--v-disp);
  color: var(--text-dim);
  display: flex; align-items: center; gap: 7px;
}
.cod-surface .mobilize-filter-label::before {
  content: '';
  width: 5px; height: 5px; flex-shrink: 0;
  background: var(--v-gold); transform: rotate(45deg);
  box-shadow: 0 0 7px rgba(240, 180, 41, .7);
}
.cod-surface .mobilize-tier-btn { font-family: var(--v-disp); border-radius: var(--v-radius-sm); border-color: var(--border); }
.cod-surface .mobilize-tier-btn:hover,
.cod-surface .mobilize-cat-btn:hover { border-color: rgba(240, 180, 41, .45); color: var(--v-gold-lt); }
.cod-surface .mobilize-tier-btn.active,
.cod-surface .mobilize-cat-btn.active {
  background: linear-gradient(135deg, rgba(240, 180, 41, .2), rgba(240, 180, 41, .04));
  border-color: var(--v-gold);
  color: var(--v-gold-lt);
  box-shadow: 0 0 14px -4px rgba(240, 180, 41, .5);
}
/* Rarity chips — a colour-coded dot (Cam/Tím/Xanh) so the row reads as a
   legend; the "Chọn tất cả" action (margin-left:auto) keeps its ⚡ only. */
.cod-surface .mobilize-rarity-btn {
  display: inline-flex; align-items: center; gap: 7px;
  border-color: var(--border);
}
.cod-surface .mobilize-rarity-btn:not([style*="auto"])::before {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
  background: var(--r-color);
  box-shadow: 0 0 6px var(--r-color);
}
.cod-surface .mobilize-rarity-btn.active {
  background: rgba(255, 255, 255, .07);
  border-color: var(--r-color);
  color: var(--r-color);
  box-shadow: 0 0 14px -4px var(--r-color);
}
/* "Chọn tất cả" (plan-mode pick-all) → distinct gold outline action */
.cod-surface .mobilize-rarity-btn[style*="auto"] {
  border-color: rgba(240, 180, 41, .4);
  color: var(--v-gold-lt);
}
.cod-surface .mobilize-rarity-btn[style*="auto"]:hover {
  border-color: var(--v-gold);
  background: rgba(240, 180, 41, .1);
}

/* ── Mobilize — category sections ── */
.cod-surface .mobilize-section {
  background: linear-gradient(180deg, rgba(20, 25, 41, .6), rgba(12, 15, 25, .7));
  border: 1px solid var(--v-line);
  border-radius: var(--v-radius);
  box-shadow: inset 0 1px 0 var(--v-line-2), 0 16px 36px -26px rgba(0, 0, 0, .9);
}
.cod-surface .mobilize-cat-header {
  background: linear-gradient(90deg, rgba(240, 180, 41, .14), rgba(240, 180, 41, .02) 70%, transparent);
  border-bottom: 1px solid rgba(240, 180, 41, .22);
}
/* Category icon → a small gold "rune tile" */
.cod-surface .mobilize-cat-icon {
  width: 34px; height: 34px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(240, 180, 41, .12);
  border: 1px solid rgba(240, 180, 41, .3);
  border-radius: var(--v-radius-sm);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.cod-surface .mobilize-cat-name {
  font-family: var(--v-disp);
  font-size: 1rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--v-gold-lt);
  text-shadow: 0 0 14px rgba(240, 180, 41, .25);
}
.cod-surface .mobilize-cat-count {
  font-family: var(--v-num);
  color: var(--v-gold-lt);
  background: rgba(8, 11, 20, .5);
  border: 1px solid rgba(240, 180, 41, .25);
}

/* ── Mobilize — task cards (items): rarity-tinted obsidian + coloured glow ── */
.cod-surface .mobilize-task {
  background: linear-gradient(180deg, var(--r-bg, rgba(255, 255, 255, .05)), rgba(12, 15, 25, .5));
  border: 1px solid rgba(255, 255, 255, .07);
  border-left: 3px solid var(--r-color);
  border-radius: var(--v-radius-sm);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.cod-surface .mobilize-task:hover {
  border-color: var(--r-color);
  box-shadow: 0 8px 22px -8px var(--r-color), inset 0 1px 0 rgba(255, 255, 255, .07);
  transform: translateY(-2px);
}
.cod-surface .mobilize-rarity {
  font-family: var(--v-disp);
  letter-spacing: .6px;
  border: 1px solid var(--r-color);
}
/* Points → a prominent gold pill */
.cod-surface .mobilize-points {
  font-family: var(--v-num);
  color: var(--v-gold-lt);
  background: rgba(240, 180, 41, .13);
  border: 1px solid rgba(240, 180, 41, .28);
  border-radius: 999px;
  padding: 1px 9px;
}
.cod-surface .mobilize-task-bot { border-top: 1px dashed var(--v-line); }
.cod-surface .mobilize-meta-item b { color: var(--v-gold-lt); }
.cod-surface .mobilize-task.plan-mode.picked {
  border-color: var(--v-gold) !important;
  background: linear-gradient(180deg, rgba(240, 180, 41, .16), rgba(240, 180, 41, .05)) !important;
}
.cod-surface .mobilize-check { border-color: var(--border); color: var(--v-gold-lt); }
.cod-surface .mobilize-task.plan-mode.picked .mobilize-check { border-color: var(--v-gold); background: rgba(240, 180, 41, .2); }

/* ── Mobilize — plan picks panel ── */
.cod-surface .mpick-title { font-family: var(--v-disp); color: var(--v-gold-lt); }
.cod-surface .mpick-count { font-family: var(--v-num); }
.cod-surface .mpick-total b { color: var(--v-gold-lt); }
.cod-surface .mpick-item { border: 1px solid var(--v-line); border-radius: var(--v-radius-sm); }
.cod-surface .mpick-qty-btn { border-color: var(--border); }
.cod-surface .mpick-qty-btn:hover { border-color: var(--v-gold); color: var(--v-gold-lt); }
.cod-surface .mpick-qty-val { font-family: var(--v-num); }

/* ── Heroes — filters + cards ── */
.cod-surface .hero-filter-label { font-family: var(--v-disp); color: var(--text-dim); }
.cod-surface .hero-filter-btn { border-color: var(--border); }
.cod-surface .hero-filter-btn:hover { border-color: rgba(240, 180, 41, .45); color: var(--v-gold-lt); }
.cod-surface .hero-filter-btn.active {
  background: linear-gradient(135deg, rgba(240, 180, 41, .18), rgba(240, 180, 41, .04));
  border-color: var(--v-gold);
  color: var(--v-gold-lt);
}
.cod-surface .hero-card {
  background: linear-gradient(180deg, rgba(24, 29, 48, .6), rgba(12, 15, 25, .7));
  border: 1px solid var(--v-line);
  border-radius: var(--v-radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: border-color .2s, box-shadow .2s, transform .12s;
}
.cod-surface .hero-card:hover {
  border-color: rgba(240, 180, 41, .4);
  box-shadow: 0 6px 22px -8px rgba(240, 180, 41, .22), inset 0 1px 0 rgba(255, 255, 255, .05);
  transform: translateY(-2px);
}
.cod-surface .hero-nickname { font-style: italic; }
.cod-surface .hero-state-msg { color: var(--text-dim); }
.cod-surface .hero-name { font-family: var(--v-disp); font-size: 1.05rem; color: var(--v-gold-lt); letter-spacing: .3px; }
.cod-surface .hero-gen-badge {
  font-family: var(--v-num);
  color: #d7b8ff;
  background: rgba(176, 106, 255, .22);
  border-color: rgba(176, 106, 255, .45);
}
/* Rarity-coded top accent (progressive :has — unsupported browsers just skip it) */
.cod-surface .hero-card:has(.rar-5) { border-top: 2px solid rgba(255, 110, 90, .75); }
.cod-surface .hero-card:has(.rar-4) { border-top: 2px solid rgba(176, 106, 255, .7); }
.cod-surface .hero-card:has(.rar-low) { border-top: 2px solid rgba(240, 180, 41, .5); }
.cod-surface .hero-card:has(.rar-5):hover { box-shadow: 0 6px 22px -8px rgba(255, 110, 90, .3), inset 0 1px 0 rgba(255, 255, 255, .05); }
.cod-surface .hero-card:has(.rar-4):hover { box-shadow: 0 6px 22px -8px rgba(176, 106, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .05); }
.cod-surface .hero-tag { border: 1px solid var(--border); }
.cod-surface .hero-skill-wrap { border-color: var(--border); }
.cod-surface .hero-skill-wrap:hover { border-color: var(--v-gold); box-shadow: 0 0 8px rgba(240, 180, 41, .35); }
.cod-surface .hero-tooltip { border: 1px solid rgba(240, 180, 41, .3); border-radius: var(--v-radius-sm); }
.cod-surface .htip-name { color: var(--v-gold-lt); }

/* ── Light theme — pale gold-lt accents are low-contrast on parchment ── */
:root[data-theme="light"] .cod-surface .quiz-a,
:root[data-theme="light"] .cod-surface .quiz-num,
:root[data-theme="light"] .cod-surface .mobilize-cat-name,
:root[data-theme="light"] .cod-surface .mobilize-points,
:root[data-theme="light"] .cod-surface .mpick-title,
:root[data-theme="light"] .cod-surface .mpick-total b,
:root[data-theme="light"] .cod-surface .hero-name,
:root[data-theme="light"] .cod-surface .htip-name,
:root[data-theme="light"] .cod-surface .hero-filter-btn.active,
:root[data-theme="light"] .cod-surface .mobilize-tier-btn.active,
:root[data-theme="light"] .cod-surface .mobilize-cat-btn.active { color: var(--gold); }
/* Mobilize surfaces — swap the obsidian fade for parchment (keeps the rarity tint) */
:root[data-theme="light"] .cod-surface .mobilize-section {
  background: linear-gradient(180deg, rgba(253, 250, 245, .85), rgba(245, 240, 230, .9));
}
:root[data-theme="light"] .cod-surface .mobilize-task {
  background: linear-gradient(180deg, var(--r-bg, rgba(0, 0, 0, .03)), var(--bg2));
}
:root[data-theme="light"] .cod-surface .mobilize-cat-count { background: var(--bg2); }
:root[data-theme="light"] .cod-surface .quiz-item {
  background: linear-gradient(180deg, rgba(253, 250, 245, .85), rgba(245, 240, 230, .9));
}
:root[data-theme="light"] .cod-surface .hero-card {
  background: linear-gradient(180deg, rgba(253, 250, 245, .9), rgba(245, 240, 230, .94));
}

/* ── Hero detail modal — rendered on <body> (outside .cod-surface), so it's
   themed with #-scoped rules using theme-safe tokens/values (no --v-* vars,
   backgrounds stay on var(--bg*) so light + dark both work). ── */
#heroDetailModal .hd-header { border-bottom-color: rgba(240, 180, 41, .18); }
#heroDetailModal .hd-name {
  font-family: 'Oswald', 'Rajdhani', 'Arial Narrow', Arial, sans-serif;
  letter-spacing: .3px;
}
#heroDetailModal .hd-skill-name {
  font-family: 'Oswald', 'Rajdhani', 'Arial Narrow', Arial, sans-serif;
  letter-spacing: .2px;
}
#heroDetailModal .hd-skill {
  border-color: rgba(240, 180, 41, .14);
  transition: border-color .15s, box-shadow .15s;
}
#heroDetailModal .hd-skill:hover {
  border-color: rgba(240, 180, 41, .38);
  box-shadow: 0 4px 16px -8px rgba(240, 180, 41, .3);
}
#heroDetailModal .hd-skill-awakening {
  border-color: rgba(240, 180, 41, .35);
  box-shadow: inset 0 0 22px -12px rgba(240, 180, 41, .5);
}
#heroDetailModal .hd-skill-num {
  font-family: 'Rajdhani', Arial, sans-serif;
  font-weight: 700;
}
:root[data-theme="light"] .cod-surface .cmp-card,
:root[data-theme="light"] .cod-surface .lord-recent-chip,
:root[data-theme="light"] .cod-surface .metric-tab { background: var(--bg2); }
:root[data-theme="light"] .cod-surface .cmp-title,
:root[data-theme="light"] .cod-surface .detail-sec-title,
:root[data-theme="light"] .cod-surface .section-label { color: var(--gold); }
:root[data-theme="light"] .cod-surface .status.info { background: rgba(79, 168, 255, .06); }

/* ══════════════════════════════════════════════════════════════════════════
   17. ABOUT (/about) — image blocks: the author's in-game Lord card + donate QR.
       The About tab is not a .cod-surface, so these are global rules (view.css
       loads after style.css, so equal-specificity rules here win).
   ══════════════════════════════════════════════════════════════════════════ */
.about-img-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.about-img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--border-gold, rgba(240, 180, 41, .4));
  box-shadow: 0 12px 36px -8px rgba(0, 0, 0, .5);
}
.about-img-lord { width: 320px; }
.about-img-qr { width: 240px; border-radius: 14px; }
.about-img-cap { font-size: .85rem; color: var(--text-dim); text-align: center; }
/* Copy-on-click ID / Name chips under the Lord card */
.about-lord-ids {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.about-copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg3, #1a1f2e);
  border: 1px solid var(--border-gold, rgba(240, 180, 41, .4));
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  color: var(--text);
  font: inherit;
  transition: border-color .15s, background .15s, transform .1s, box-shadow .15s;
}
.about-copy:hover {
  background: var(--bg4, #222838);
  border-color: var(--gold, #f0b429);
  box-shadow: 0 4px 16px -6px rgba(240, 180, 41, .35);
}
.about-copy:active { transform: translateY(1px); }
.about-copy-k {
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-dim);
}
.about-copy-v {
  font-weight: 700;
  color: var(--gold, #f0b429);
  font-variant-numeric: tabular-nums;
}
.about-copy-ico { font-size: .9rem; opacity: .6; }
.about-copy.copied { border-color: var(--green, #3dffa0); }
.about-copy.copied .about-copy-ico { color: var(--green, #3dffa0); opacity: 1; }
.about-copy-hint { font-size: .78rem; color: var(--text-dim); text-align: center; }