/* ============================================================
   Commander Sim — dark dashboard styled to match the reference
   screenshots. No frameworks; vanilla CSS only.
   ============================================================ */

:root {
  --bg: #0c0913;
  --bg-elev: #15101e;
  --bg-elev-2: #1b1428;
  --panel-bg: #1a1327;   /* elevated panel — between bg-elev and bg-elev-2 */
  --border: #2a1f3d;
  --border-strong: #3a2c52;
  --text: #e4dffb;
  --text-dim: #8a809e;
  --text-faint: #5a5170;

  /* Accent colors for up to 4 players */
  --p1: #d97a6c;   /* salmon / red */
  --p1-soft: rgba(217, 122, 108, 0.12);
  --p1-border: rgba(217, 122, 108, 0.35);
  --p2: #b196f6;   /* lavender */
  --p2-soft: rgba(177, 150, 246, 0.12);
  --p2-border: rgba(177, 150, 246, 0.35);
  --p3: #79c2c9;   /* teal */
  --p3-soft: rgba(121, 194, 201, 0.12);
  --p3-border: rgba(121, 194, 201, 0.35);
  --p4: #e2c47a;   /* gold */
  --p4-soft: rgba(226, 196, 122, 0.12);
  --p4-border: rgba(226, 196, 122, 0.35);

  --accent: #7c8ef8;

  /* Font stacks */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;

  /* Semantic status colours (same values as player colours, explicit intent) */
  --danger:  #d97a6c;   /* error / destructive — same value as --p1 */
  --success: #79c2c9;   /* ok / win — same value as --p3 */
  --warning: #e2c47a;   /* caution / highlight — same value as --p4 */

  /* Button text colours */
  --btn-text-dark:  #1a1000;   /* dark text on gold/warm gradient buttons */
  --btn-text-light: #e7ddf3;   /* light text on dark/purple buttons */

  /* Border-radius scale */
  --radius-lg: 16px;   /* major panels, stat cards */
  --radius-md: 12px;   /* content cards, history cards */
  --radius-sm:  8px;   /* buttons, inputs */
  --radius-xs:  4px;   /* chips, badges, tags */

  /* Transition scale */
  --transition-fast: 0.12s ease;
  --transition-base: 0.2s ease;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  min-height: 100%;
}
/* Always reserve the vertical-scrollbar gutter so layout doesn't shift
   horizontally when a view goes from short (no scrollbar) to tall (with
   scrollbar). The centered topbar logo was the most visible victim of
   the reflow. `scrollbar-gutter: stable` is the modern fix; falling back
   to `overflow-y: scroll` covers older WebKit. */
html {
  scrollbar-gutter: stable;
  overflow-y: scroll;
}

/* Multi-layer magic background:
   1) Radial vignette glow from top (hero area)
   2) Soft color washes bottom-left + bottom-right
   3) Hex grid texture overlay (data-URI SVG)
   4) Fixed mana orbs scattered around (see .bg-decor below)
   5) Faint star dust for atmosphere                          */
body {
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(124, 142, 248, 0.14), transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 100%, rgba(217, 122, 108, 0.08), transparent 65%),
    radial-gradient(ellipse 70% 50% at 15% 100%, rgba(177, 150, 246, 0.08), transparent 65%),
    var(--bg);
  background-attachment: fixed;
}

/* Hex-grid tile + star dust as a single overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='52' viewBox='0 0 60 52'><polygon points='30,0 60,15 60,37 30,52 0,37 0,15' fill='none' stroke='%23e4dffb' stroke-opacity='0.025' stroke-width='1'/></svg>"),
    radial-gradient(1px 1px at 20% 30%, rgba(228, 223, 251, 0.10), transparent 50%),
    radial-gradient(1px 1px at 80% 70%, rgba(228, 223, 251, 0.08), transparent 50%),
    radial-gradient(1.5px 1.5px at 40% 80%, rgba(228, 223, 251, 0.10), transparent 50%),
    radial-gradient(1px 1px at 60% 20%, rgba(228, 223, 251, 0.08), transparent 50%),
    radial-gradient(2px 2px at 90% 40%, rgba(228, 223, 251, 0.06), transparent 50%);
  background-size: 60px 52px, 400px 400px, 600px 600px, 500px 500px, 700px 700px, 350px 350px;
}

/* ----- Background decorations container ----- */
.bg-decor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Large translucent mana-color orbs scattered around the viewport */
.mana-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.35;
  animation: float 18s ease-in-out infinite alternate;
}
@keyframes float {
  from { transform: translate(0, 0); }
  to   { transform: translate(20px, -15px); }
}
.orb-w { width: 280px; height: 280px; top:  6%; left:  -4%; background: #f8edcf; animation-delay: -2s; opacity: 0.10; }
.orb-u { width: 360px; height: 360px; top: 60%; left:  78%; background: #6597c9; animation-delay: -6s; opacity: 0.16; }
.orb-b { width: 240px; height: 240px; top: 80%; left:  -3%; background: #2b2025; animation-delay: -10s; opacity: 0.30; }
.orb-r { width: 320px; height: 320px; top: 18%; left:  82%; background: #d65a3e; animation-delay: -14s; opacity: 0.12; }
.orb-g { width: 260px; height: 260px; top: 40%; left:  35%; background: #5c9264; animation-delay: -18s; opacity: 0.08; }

/* Spell circle watermark — positioned in the lower-right corner area */
.spell-circle {
  position: absolute;
  width: 520px;
  height: 520px;
  right: -160px;
  bottom: -180px;
  opacity: 0.55;
  animation: slow-spin 240s linear infinite;
}
@keyframes slow-spin { to { transform: rotate(360deg); } }

.view, .topbar, .hero { position: relative; z-index: 1; }

/* ---------- Top bar (two-row nav) ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  /* MTG-inspired: deep void with five-color mana aurora + faint rune tile */
  background-color: rgba(10, 8, 20, 0.96);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ccircle cx='60' cy='60' r='52' fill='none' stroke='rgba(180,160,255,0.04)' stroke-width='1'/%3E%3Ccircle cx='60' cy='60' r='36' fill='none' stroke='rgba(180,160,255,0.03)' stroke-width='1' stroke-dasharray='3 5'/%3E%3Cpolygon points='60,12 72,46 108,46 80,68 90,102 60,82 30,102 40,68 12,46 48,46' fill='none' stroke='rgba(124,142,248,0.05)' stroke-width='1'/%3E%3C/svg%3E"),
    linear-gradient(105deg,
      rgba(240,230,210,0.06) 0%,
      rgba(100,140,220,0.09) 20%,
      rgba(10,8,18,0.0)      40%,
      rgba(200,60,40,0.07)   70%,
      rgba(50,170,110,0.06)  100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(124,142,248,0.15);
  box-shadow: 0 1px 0 rgba(216,180,100,0.10), 0 4px 28px rgba(0,0,0,0.55);
  /* Single-row layout. Brand is absolute-centred and spans the full bar
     height; nav lives on the left, icons + user-menu on the right.
     `position: sticky` (above) already establishes a containing block for
     the absolutely positioned .brand child.

     Children align to the BOTTOM of the bar so the nav tabs and user
     chip sit on the same baseline as the bottom edge of the logo. */
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 28px 6px;
  min-height: 96px;
}


/* Right-side icon cluster + user menu */
.topbar-right { display: flex; align-items: center; gap: 12px; }

/* Left-side nav — no top divider now that we're single-row */
.topbar-nav {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border-top: none;
}

.nav-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 8px 18px 7px;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
  position: relative;
}
.nav-tab:hover { color: var(--text); }
.nav-tab.active {
  color: var(--text-bright);
  border-bottom-color: var(--accent);
}
.nav-tab.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 25%;
  right: 25%;
  height: 6px;
  background: var(--accent);
  filter: blur(5px);
  opacity: 0.35;
  border-radius: 50%;
}

.topbar-left  { display: none; } /* reset-btn slot kept in DOM for JS compat, visually gone */
.user-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(216, 121, 91, 0.14);
  border: 1px solid rgba(216, 121, 91, 0.30);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.user-badge::before {
  content: "✦";
  color: var(--p1);
  font-size: 11px;
  margin-right: 6px;
  opacity: 0.85;
}

/* Admin view */
.admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 12px;
}
.admin-wide { grid-column: 1 / -1; }
.admin-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.admin-row:last-child { border-bottom: none; }
.admin-row-tight { padding: 5px 0; gap: 10px; font-size: 12px; }
.admin-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.admin-row-tight .admin-name { font-size: 13px; }
.admin-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(216, 121, 91, 0.18);
  border: 1px solid rgba(216, 121, 91, 0.4);
  color: var(--p1);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.admin-meta {
  color: var(--text-dim);
  font-size: 11px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
}
.admin-ts { min-width: 130px; }
.admin-event {
  color: rgba(216, 121, 91, 0.9);
  font-size: 11px;
  font-weight: 600;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
  min-width: 95px;
}

/* ---- Audit log table ---- */
.admin-audit-row {
  display: grid;
  grid-template-columns: 148px 72px 140px 1fr;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 12px;
}
.admin-audit-row:last-child { border-bottom: none; }
.admin-audit-ts {
  color: var(--text-dim);
  font-size: 11px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  white-space: nowrap;
}
.admin-audit-user {
  color: var(--text);
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-audit-event {
  font-size: 11px;
  font-weight: 600;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.03em;
  color: var(--text-dim);
  white-space: nowrap;
}
.admin-audit-event.admin-event-ok   { color: #7abf7a; }
.admin-audit-event.admin-event-info { color: rgba(124,142,248,0.85); }
.admin-audit-event.admin-event-warn { color: rgba(216,121,91,0.9); }
.admin-audit-detail {
  color: var(--text-dim);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-group {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(20, 15, 30, 0.5);
  border-left: 2px solid rgba(216, 121, 91, 0.4);
  border-radius: 4px;
}
.admin-group-head {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

/* User-management row controls */
.admin-user-row { gap: 16px; }
.admin-user-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-mini-btn {
  font-size: 11px;
  padding: 4px 10px;
  letter-spacing: 0.04em;
}
.admin-danger {
  border-color: rgba(220, 60, 60, 0.45);
  color: rgba(255, 130, 130, 0.95);
}
.admin-danger:hover {
  background: rgba(220, 60, 60, 0.18);
  border-color: rgba(220, 60, 60, 0.7);
}
.admin-add-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 6px;
  background: rgba(30, 22, 50, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.admin-add-form input[type="text"],
.admin-add-form input[type="password"] {
  flex: 1;
  min-width: 140px;
  padding: 7px 10px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
}
.admin-add-form input:focus {
  outline: none;
  border-color: rgba(216, 121, 91, 0.5);
}
.admin-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.admin-add-btn {
  padding: 7px 16px;
  font-size: 12px;
}

/* Per-deck AI play notes — collapsible textarea inside each deck slot. */
.deck-notes-block {
  margin-top: 10px;
  border: 1px dashed rgba(216, 121, 91, 0.30);
  border-radius: 6px;
  padding: 6px 10px;
  background: rgba(20, 15, 30, 0.35);
}
.deck-notes-block > summary {
  cursor: pointer;
  color: var(--text-dim);
  font-size: 13px;
  letter-spacing: 0.01em;
  padding: 4px 2px;
  user-select: none;
}
.deck-notes-block[open] > summary { color: rgba(216, 121, 91, 0.85); }
.deck-notes-block > summary::marker { color: rgba(216, 121, 91, 0.55); }
.deck-notes-input {
  width: 100%;
  margin-top: 8px;
  min-height: 90px;
  resize: vertical;
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
}
.deck-notes-input:focus {
  outline: none;
  border-color: rgba(216, 121, 91, 0.5);
  background: rgba(0, 0, 0, 0.45);
}
.deck-notes-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
  font-size: 11px;
}

/* Card-swap (Add / Remove) panels used by both Monte Carlo recommendations
   and Deep Match post-match analysis. */
.swap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
  margin-top: 10px;
  align-items: start;
}
.swap-col-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.swap-col-add    { color: rgba(122, 196, 144, 0.95); }
.swap-col-remove { color: rgba(220, 110, 110, 0.95); }
.swap-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 11px;
  margin-bottom: 7px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-left: 2px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.swap-add    { border-left-color: rgba(122, 196, 144, 0.7); }
.swap-remove { border-left-color: rgba(220, 110, 110, 0.7); }
.swap-row:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.10);
}
.swap-add:hover    { border-left-color: rgba(122, 196, 144, 0.9); }
.swap-remove:hover { border-left-color: rgba(220, 110, 110, 0.9); }
.swap-marker {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 14px;
  min-width: 12px;
  text-align: center;
  line-height: 1.5;
}
.swap-add    .swap-marker { color: rgba(122, 196, 144, 0.95); }
.swap-remove .swap-marker { color: rgba(220, 110, 110, 0.95); }
.swap-body { flex: 1; min-width: 0; }
.swap-card {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-bright, #fff);
  line-height: 1.25;
}
.swap-reason {
  font-size: 12.5px;
  color: var(--text-dim);
  margin-top: 4px;
  line-height: 1.5;
}
@media (max-width: 640px) {
  .swap-grid { grid-template-columns: 1fr; }
}

.swap-section-head {
  margin-top: 20px;
  font-weight: 700;
  color: rgba(216, 121, 91, 0.95);
}
.swap-check {
  margin-right: 4px;
  margin-top: 3px;
  cursor: pointer;
  accent-color: var(--p1);
  flex-shrink: 0;
}
.swap-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.swap-balance {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin-right: auto;
}
.swap-balance.ok { color: rgba(122, 196, 144, 0.95); }
.swap-balance.warn { color: rgba(220, 140, 80, 0.95); }
.swap-apply-selected, .swap-apply-all {
  font-size: 12px;
  padding: 6px 14px;
}
.swap-apply-all { font-weight: 600; }

/* ── Card hover popup ────────────────────────────────────────────────────────
   Fixed-position singleton. pointer-events:none so it never captures hovers
   itself. Shown/hidden entirely via display:none/block in JS. */
.card-hover-popup {
  position: fixed;
  z-index: 9999;
  display: none;
  width: 220px;
  height: 308px;
  border-radius: 12px;
  overflow: hidden;
  pointer-events: none;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.70),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}
.card-hover-popup img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* cursor:help on everything with a data-card (all hover targets) */
[data-card]:not(input):not(.swap-row) {
  cursor: help;
}
/* Dotted underline only on inline text — not on images or block containers */
[data-card]:not(input):not(.swap-row):not(img):not(div) {
  text-decoration: underline dotted rgba(216, 121, 91, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: text-decoration-color 0.15s ease;
}
[data-card]:not(input):not(.swap-row):not(img):not(div):hover {
  text-decoration-color: rgba(216, 121, 91, 0.9);
}

/* ---------- Deep Match turn structure ---------- */
.turn-block {
  margin: 14px 0 18px;
  padding: 0 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(20, 15, 30, 0.35);
  overflow: hidden;
}
.turn-block.p1 { border-left: 3px solid var(--p1); }
.turn-block.p2 { border-left: 3px solid var(--p2); }
.turn-block.p3 { border-left: 3px solid var(--p3); }
.turn-block.p4 { border-left: 3px solid var(--p4); }
.turn-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.30);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.turn-number {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(216, 121, 91, 0.95);
}
.turn-player {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}
.phase-block { padding: 6px 14px 4px; }
.phase-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(216, 121, 91, 0.75);
  margin: 6px 0 4px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(216, 121, 91, 0.12);
}

/* ---------- Board snapshot — grouped by card type ---------- */
.bs-player {
  margin: 10px 14px 6px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.22);
  border-radius: 6px;
}
.bs-player.p1 { border-left: 2px solid var(--p1); }
.bs-player.p2 { border-left: 2px solid var(--p2); }
.bs-player-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.bs-group { margin: 4px 0; }
.bs-group-label {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-right: 6px;
}
.bs-cmdr-marker {
  color: rgba(216, 121, 91, 0.95);
  margin-right: 3px;
  font-size: 11px;
}
.bs-stats {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  color: var(--text-dim);
  margin-left: 2px;
}
.bs-tap {
  color: var(--text-dim);
  margin-left: 2px;
  font-size: 10px;
}
.bs-zone {
  margin: 6px 0 0;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
  font-size: 11px;
}
.bs-zone summary {
  cursor: pointer;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10px;
  user-select: none;
}
.bs-zone summary::marker { color: rgba(216, 121, 91, 0.5); }
.bs-zone-cards {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px 6px;
}

/* Instant-speed reactions (e.g., opponent casts Path to Exile to remove your
   commander). Stands out from the rest of the transcript so the user sees
   immediately that an opponent stepped in. */
.deep-reactive {
  background: rgba(216, 121, 91, 0.10);
  border-left: 2px solid rgba(216, 121, 91, 0.6);
  padding-left: 8px;
  margin: 3px 0;
}
.deep-reactive .deep-actor {
  font-family: var(--font-display);
  font-weight: 600;
  color: rgba(216, 121, 91, 0.95);
}

/* Heuristic-fill casts — same shape as an LLM cast but slightly dimmer and
   tagged so the user can see which casts the LLM chose vs. which the
   heuristic added to spend leftover mana. */
.deep-auto {
  opacity: 0.85;
}
.deep-auto .deep-tag {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  color: var(--text-dim);
  margin-left: 4px;
  letter-spacing: 0.05em;
}

/* Combat phase: per-attacker breakdown lines + final summary row. */
.deep-combat strong {
  color: rgba(255, 220, 200, 0.95);
  font-family: "SF Mono", Menlo, Consolas, monospace;
}
.deep-combat .dies {
  color: rgba(220, 100, 100, 0.95);
  font-weight: 600;
  margin-left: 4px;
}
.deep-combat-summary {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  font-weight: 600;
}
.brand {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.04em;
  pointer-events: none;     /* never block clicks on nav / icons */
  z-index: 1;
}

.brand-name {
  background: linear-gradient(90deg, #e8d5a0, #c8a86a, #e8d5a0);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: brand-shimmer 4s linear infinite;
}
@keyframes brand-shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.brand-name {
  color: var(--text);
  background: linear-gradient(90deg, var(--p1), var(--p2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Topbar logo. Spans the full bar height via the absolute-positioned
   .brand parent (top:0 / bottom:0), so 100% here matches the topbar. */
/* Sized in absolute pixels (not 100% of the bar) so we can let it
   overhang the bottom edge slightly without growing the topbar's
   reserved vertical space. The brand container is overflow-visible so
   the overhang renders cleanly into the page below. */
.brand { overflow: visible; }
.brand-logo {
  height: 116px;
  width: auto;
  display: block;
  /* Smaller overhang — the previous -28px collided with content
     sitting directly under the topbar (the commander pillbox on the
     setup page sat in its path). -10px keeps a subtle medallion read
     without burying anything below. */
  margin-bottom: -10px;
  filter:
    drop-shadow(0 0 6px  rgba(216, 169, 91, 0.50))
    drop-shadow(0 0 16px rgba(226, 184, 110, 0.30))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
}

/* ---------- Login screen ---------- */
/* Login view — full page, Oracle's Prophecy nebula background */
#login-view {
  position: fixed;
  inset: 0;
  z-index: 99999;     /* above topbar's sticky stacking context */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  overflow: hidden;
  /* Override .view's max-width/margin so login fills the entire viewport */
  max-width: none !important;
  margin: 0 !important;
  width: 100vw;
  height: 100vh;
  background:
    radial-gradient(ellipse 55% 45% at 50% 50%, rgba(124, 95, 240, 0.08) 0%, transparent 65%),
    radial-gradient(ellipse 130% 100% at 50% 50%, rgba(26, 20, 85, 0.45) 0%, rgba(10, 7, 50, 0.65) 50%, rgba(3, 2, 26, 0.85) 100%),
    #050314;
}
#login-view[hidden] { display: none !important; }

/* Drifting nebula clouds — same recipe as .md-seer-outer::before */
#login-view::before {
  content: "";
  position: absolute;
  inset: -40%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 55% at 28% 35%, rgba(165,  75, 255, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 75% 65%, rgba( 60, 130, 255, 0.13) 0%, transparent 60%),
    radial-gradient(ellipse 55% 60% at 55% 12%, rgba(130,  50, 230, 0.11) 0%, transparent 60%),
    radial-gradient(ellipse 50% 45% at 12% 80%, rgba(200,  80, 220, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 65% 40% at 90% 25%, rgba( 80,  60, 230, 0.11) 0%, transparent 60%),
    radial-gradient(ellipse 75% 55% at 45% 75%, rgba(  6,  12,  60, 0.40) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 82%  8%, rgba(  4,   8,  48, 0.36) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at  8% 45%, rgba(  3,   6,  40, 0.34) 0%, transparent 60%);
  filter: blur(10px);
  animation: seer-nebula 28s ease-in-out infinite alternate;
}

/* Twinkling starfield */
#login-view::after {
  content: "";
  position: absolute;
  inset: -10%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(3px 3px at 11% 23%, rgba(255,255,255,1), transparent 65%),
    radial-gradient(3.5px 3.5px at 47% 17%, rgba(255,255,255,1), transparent 65%),
    radial-gradient(3.5px 3.5px at 19% 88%, rgba(255,255,255,1), transparent 65%),
    radial-gradient(3.5px 3.5px at 86% 92%, rgba(255,255,255,1), transparent 65%),
    radial-gradient(3px 3px at 78% 41%, rgba(255,255,255,0.95), transparent 65%),
    radial-gradient(3px 3px at 35% 38%, rgba(230,240,255,0.95), transparent 65%),
    radial-gradient(3px 3px at 71%  9%, rgba(220,230,255,0.95), transparent 65%),
    radial-gradient(3px 3px at 63% 60%, rgba(245,235,255,0.95), transparent 65%),
    radial-gradient(3px 3px at  9% 51%, rgba(220,225,255,0.90), transparent 65%),
    radial-gradient(3.5px 3.5px at 24% 11%, rgba(255,255,255,1), transparent 65%),
    radial-gradient(3px 3px at 41% 73%, rgba(255,250,240,0.95), transparent 65%),
    radial-gradient(3.5px 3.5px at 56% 31%, rgba(255,255,255,1), transparent 65%),
    radial-gradient(3px 3px at 67% 87%, rgba(240,235,255,0.95), transparent 65%),
    radial-gradient(3px 3px at 88% 53%, rgba(255,255,255,0.95), transparent 65%),
    radial-gradient(3.5px 3.5px at  3% 75%, rgba(255,255,255,1), transparent 65%),
    radial-gradient(2px 2px at 29% 64%, rgba(220,235,255,0.85), transparent 60%),
    radial-gradient(2px 2px at 92% 73%, rgba(220,235,255,0.85), transparent 60%),
    radial-gradient(2px 2px at 54% 56%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(2px 2px at  6% 45%, rgba(210,225,255,0.85), transparent 60%),
    radial-gradient(2px 2px at 27% 14%, rgba(220,230,255,0.85), transparent 60%),
    radial-gradient(2px 2px at 44% 79%, rgba(200,215,255,0.85), transparent 60%),
    radial-gradient(2px 2px at 67% 28%, rgba(230,235,255,0.85), transparent 60%),
    radial-gradient(2px 2px at 81% 66%, rgba(220,225,255,0.85), transparent 60%),
    radial-gradient(1.5px 1.5px at  4% 12%, rgba(220,230,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 22% 37%, rgba(210,220,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 38% 91%, rgba(220,235,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 52%  4%, rgba(210,220,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 75% 51%, rgba(220,230,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 36%, rgba(210,225,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 14% 73%, rgba(220,230,255,0.65), transparent 60%);
  animation: seer-twinkle 5s ease-in-out infinite;
}

/* Login card — fully transparent (no box) so only the content shows.
   Flex column with centred children so logo, sub, form button all align
   on a vertical axis regardless of intrinsic widths. */
.login-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 560px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.login-card > .login-sub { width: 100%; }
/* Form column stays narrow so the inputs don't span the full card width. */
.login-card > .login-form { width: 100%; max-width: 380px; }
.login-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 560px;        /* doubled — landscape 3:2 aspect */
  max-width: 90vw;     /* don't blow past narrow viewports */
  height: auto;
  margin: 0 auto 8px;  /* tight to the next element so the block centres */
  background: transparent;
}
.login-icon img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  filter: none;       /* no glow — keep the SVG crisp */
  animation: none;
}
.login-title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  background: linear-gradient(90deg, var(--p1), var(--p2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 4px;
}
.login-sub {
  color: var(--text-dim);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  margin: 0 0 18px;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.login-form input {
  background: var(--bg-elev-2);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
}
.login-form input:focus {
  outline: none;
  border-color: var(--accent);
}
.login-btn {
  margin-top: 8px;
  width: 100%;
}
.login-error {
  color: var(--p1);
  font-size: 13px;
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--p1-soft);
  border: 1px solid var(--p1-border);
  border-radius: 6px;
}
@keyframes cb-icon-pulse {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 30px rgba(216,121,91,0.55), 0 0 60px rgba(216,121,91,0.25); }
  50%      { transform: scale(1.06); box-shadow: 0 0 40px rgba(216,121,91,0.75), 0 0 80px rgba(216,121,91,0.35); }
}

/* ---------- View containers ---------- */

.view {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px;
}
/* Setup view stays at 1440 — the 4-player deck grid needs the extra room. */
#setup-view.view { max-width: 1320px; }

/* ============================================================
   Hero banner
   ============================================================ */
.hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 32px 18px;
  text-align: center;
  position: relative;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 70% at 50% 50%, rgba(124, 142, 248, 0.08), transparent 70%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.hero-meta-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.hero-eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--text-faint);
  text-transform: uppercase;
  padding: 5px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
}
.hero-title {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 600;
  margin: 0;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text);
}
.hero-title-accent {
  background: linear-gradient(120deg, var(--p1) 0%, var(--p2) 70%, var(--p3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}
.hero-tagline {
  font-family: var(--font-display);
  font-size: 16px;
  font-style: italic;
  color: var(--text-dim);
  margin: 0;
}
.hero-mana-bar {
  display: inline-flex;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(21, 16, 30, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-mana-bar .mana-pip {
  width: 18px;
  height: 18px;
  font-size: 10px;
}

@media (max-width: 720px) {
  .hero { padding: 20px 16px 14px; }
  .hero-title { font-size: 26px; }
  .hero-tagline { font-size: 14px; }
}

.page-title {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--text);
  letter-spacing: -0.005em;
  line-height: 1.1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.subtitle {
  color: var(--text-dim);
  margin: 0 0 36px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
}

/* ---------- Buttons ---------- */

button {
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  border-radius: 8px;
  border: none;
  transition: background var(--transition-fast), border var(--transition-fast), color var(--transition-fast);
}

/* Danger variant for destructive confirmations (Delete, etc.) */
._co-confirm-danger {
  background: linear-gradient(135deg, #c0392b 0%, #e74c3c 60%, #c0392b 130%) !important;
  box-shadow: 0 0 20px rgba(192,57,43,0.4), inset 0 1px 0 rgba(255,255,255,0.15) !important;
}
._co-confirm-danger:hover {
  background: linear-gradient(135deg, #e74c3c 0%, #ff6b6b 60%, #e74c3c 130%) !important;
}

.primary-btn {
  background: linear-gradient(135deg, var(--p1) 0%, #c66555 60%, var(--p2) 130%);
  background-size: 200% 200%;
  background-position: 0% 50%;
  color: var(--btn-text-dark);
  font-weight: 700;
  padding: 12px 28px;
  font-size: 14px;
  letter-spacing: 0.01em;
  box-shadow: 0 0 24px rgba(217, 122, 108, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: background-position 0.4s ease, box-shadow var(--transition-base) ease, transform 0.05s;
}
.primary-btn:hover {
  background-position: 100% 50%;
  box-shadow: 0 0 32px rgba(217, 122, 108, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.primary-btn:active { transform: translateY(1px); }
.primary-btn:disabled {
  background: var(--border-strong);
  color: var(--text-faint);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}

.ghost-btn {
  background: transparent;
  color: var(--text-dim);
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
}
.ghost-btn:hover {
  color: var(--text);
  border-color: var(--text-dim);
}

/* ---------- Deck slots ---------- */

#deck-slots {
  display: grid;
  gap: 16px;
  margin-top: 10px;
  margin-bottom: 24px;
  /* Default — overridden by .slots-N classes set from JS.
     minmax(0, 1fr) lets columns shrink below their intrinsic content width,
     so long dropdown option text can't force the grid wider than its container. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#deck-slots.slots-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#deck-slots.slots-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 4-slot layout — tighter columns so 4 cards fit horizontally. */
#deck-slots.slots-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 800px) {
  #deck-slots,
  #deck-slots.slots-2,
  #deck-slots.slots-3,
  #deck-slots.slots-4 { grid-template-columns: 1fr; }
}

/* ---- Deck slot — card-select layout ---- */
.deck-slot {
  display: flex;
  flex-direction: column;
  /* Tight stack — picker dropdown sits flush with the card below. */
  gap: 4px;
  position: relative;
}

/* Thin player-color bar at very top of the slot column */
.deck-slot.p1::before,
.deck-slot.p2::before,
.deck-slot.p3::before,
.deck-slot.p4::before {
  content: "";
  position: absolute;
  top: 0; left: 12px; right: 12px;
  height: 2px;
  border-radius: 2px;
  opacity: 0.6;
}
.deck-slot.p1::before { background: var(--p1); }
.deck-slot.p2::before { background: var(--p2); }
.deck-slot.p3::before { background: var(--p3); }
.deck-slot.p4::before { background: var(--p4); }

/* Picker state */
.slot-picker-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: var(--bg-elev);
  border: 1px dashed var(--border);
  border-radius: 10px;
  min-height: 0;
  /* Match the card's max-width so a wide column doesn't leave the
     dropdown floating across empty space above a narrow card. */
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
}
.slot-picker-wrap .deck-picker { flex: 1; min-height: 0; padding: 5px 8px; }

/* Card state — MTG card visual */
.slot-card-wrap { display: flex; flex-direction: column; gap: 4px; }

/* ── Empty-slot oracle placeholder ────────────────────────────────────────
   When no deck is picked, the card frame paints a dark starry sky in the
   art zone with a faint hooded oracle silhouette, and the text box is
   replaced by a soft sepia parchment with unreadable faux-Latin lines. */

/* Keep the .slot-picker-wrap visible on empty slots so the slot column
   has the same total height as a populated slot (which keeps the picker
   above the card). Without parity the empty card grows to fill the
   column that's missing the picker, breaking the side-by-side layout. */

/* Card root: deep night frame. Drop the blue/lavender border so the
   photo's own edge forms the frame, and add a touch of overall
   transparency so the empty card sits softer than the populated one. */
.deck-mtg-card[data-empty] {
  background: linear-gradient(180deg,
              rgba(10, 6, 24, 0.80) 0%,
              rgba(17, 10, 40, 0.80) 50%,
              rgba(22, 14, 48, 0.80) 100%);
  /* No border: a 1px border made the overflow:hidden rounded clip antialias
     against the page glow, showing as a white hairline on the art's right
     edge. The dark inset ring on the overlay below paints over any residual
     seam deterministically. */
  box-shadow: inset 0 0 30px rgba(0,0,0,0.45), 0 6px 18px rgba(0,0,0,0.38);
  opacity: 0.88;
}
/* Empty card layout — make the "The Oracle" text box the SAME size and
   position as a selected card's score box.
   - Title bar: fully collapsed (display:none) so the oracle art still
     reaches the top edge of the card.
   - Type line + footer: kept in flow but invisible (visibility:hidden)
     so they RESERVE their height. Without this the textbox (the only
     flex:1 row) would flex-grow into their space and end up much taller
     than the populated card's box.
   - Art section: grown slightly (aspect 1.62 → 1.45) to absorb the
     collapsed title bar's height, so the reserved type-line/footer math
     lands the textbox at the populated card's box height. (1.36 left
     the art a hair too tall, so the blue box came up just short of the
     selected card's box.) */
.deck-mtg-card[data-empty] .deck-mtg-titlebar { display: none; }
.deck-mtg-card[data-empty] .deck-mtg-typeline,
.deck-mtg-card[data-empty] .deck-mtg-footer { visibility: hidden; }
.deck-mtg-card[data-empty] .deck-mtg-art-section { aspect-ratio: 1.45 / 1; }

/* Hooded-oracle illustration filling the art frame. Vignetted on the
   bottom edge so it bleeds into the parchment text box below without a
   hard seam, and very slightly desaturated so the heavy starry blue
   doesn't overwhelm the rest of the page. */
/* The oracle image lives on the section's ::before so it can fade out
   while the Scryfall <img> fades in (instead of being a hard swap). */
.deck-mtg-card .deck-mtg-art-section {
  position: relative;
  background: #0a0618;
}
/* Oracle photo lives in a real element (not ::before) so WAAPI can
   animate its opacity on deck pick — pseudo-elements aren't reachable
   by .animate(). The overlay is ALWAYS rendered (never display:none)
   so the browser keeps it composited; we control visibility via
   opacity. Empty card → opacity 1. Populated card → opacity 0. The
   JS pick-handler then tween-animates the opacity between those two
   resting states for the crossfade. */
.deck-mtg-card .deck-mtg-oracle-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, transparent 70%, rgba(10,8,28,0.95) 100%),
    url("oracle.png") center 12% / cover no-repeat;
  /* `filter` was dropped: a filter buffer on an inset element fringes its
     own right/bottom edge, contributing to the white hairline. The 0.92
     desaturation it provided is imperceptible, so it isn't worth the seam. */
  pointer-events: none;
  opacity: 0;
}
.deck-mtg-card[data-empty] .deck-mtg-oracle-overlay {
  opacity: 1;
  /* Deterministic seam kill: this overlay is the topmost layer over the art,
     so a 1px dark inset ring paints directly over the rounded-clip antialias
     line on every edge. Real geometry → works at any dpr / browser zoom,
     unlike compositing-layer tricks. Blends into the existing edge vignette. */
  box-shadow: inset 0 0 0 1px #0a0618;
}

/* ── CSS-driven whole-card crossfade ──────────────────────────────
   On any deck swap (empty→deck, deck→deck, deck→empty), JS clones
   the OLD .deck-mtg-card before wiping slots.innerHTML, then drops
   the clone INSIDE the new .deck-mtg-card with the .deck-mtg-card-
   ghost class. The ghost sits absolutely on top and dissolves away
   over 1400 ms, revealing the new card underneath — so the user
   sees a true crossfade of the WHOLE card (art + title + score +
   pills + metrics), not just the commander image. The new card
   doesn't need its own animation; the ghost reveals it. */
@keyframes card-dissolve-out {
  0%   { opacity: 1; transform: scale(1);    filter: blur(0); }
  100% { opacity: 0; transform: scale(1.06); filter: blur(2.5px); }
}
/* Ghost lives as a SIBLING of the new .deck-mtg-card inside
   .slot-card-wrap (not nested inside the new card) so the new
   card's [data-empty] attribute doesn't cascade into the ghost
   via descendant selectors — otherwise on deck→oracle swaps the
   ghost's overlay snaps to "oracle visible" before the fade
   even starts, which is exactly the "image snaps then fades"
   the user reported. */
.slot-card-wrap { position: relative; }
.deck-mtg-card-ghost {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100% !important;
  max-width: 280px !important;
  margin: 0 auto !important;
  z-index: 5;
  pointer-events: none;
  animation: card-dissolve-out 1400ms ease-in-out forwards;
  border-radius: 14px;
  overflow: hidden;
}

/* Text box: parchment plate with the Oracle's brief description of her
   powers. flex+overflow:hidden lock the prose inside so the card keeps
   its 63/88 aspect — without this, overflow text pushes the slot taller
   than the populated card next to it. */
.deck-mtg-card[data-empty] .deck-mtg-textbox {
  /* Very dark midnight blue plate (was a warm brown parchment) so the
     empty Oracle card reads as a cold, starlit slate rather than aged
     paper — matches the hooded-figure art above it. */
  background:
    linear-gradient(180deg, rgba(14,20,46,0.62), rgba(6,10,28,0.82));
  border-top: 1px solid rgba(120,140,220,0.16);
  padding: 10px 13px 11px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}
.deck-mtg-card[data-empty] .deck-mtg-textbox::before {
  /* subtle nebula wash — cool blue/violet to match the midnight plate */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(90,110,200,0.12), transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(60,80,170,0.12), transparent 60%);
  pointer-events: none;
}
.deck-mtg-empty-text {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  font-family: "Cormorant Garamond", "EB Garamond", serif;
  font-size: 12px;
  line-height: 1.42;
  color: rgba(215, 195, 160, 0.48);          /* dimmer than before */
  letter-spacing: 0.01em;
  text-align: center;
  overflow: hidden;
}
.deck-mtg-empty-text p {
  margin: 0;
  font-style: italic;
}
.deck-mtg-empty-text .dmt-title {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(220, 185, 130, 0.62);
  text-shadow: 0 0 8px rgba(200, 150, 70, 0.15);
}
.deck-mtg-empty-text .dmt-cta {
  font-size: 11px;
  letter-spacing: 0.02em;
  color: rgba(220, 195, 140, 0.40);
}

/* ── Crossfade machinery ──────────────────────────────────────────
   Both the oracle overlay and the Scryfall <img> are real DOM
   elements stacked in the art section. CSS sets resting visibility
   per state; the JS pick-handler drives a WAAPI .animate() over
   both so the swap is a real opacity tween, not a hard cut. */
.deck-mtg-card .deck-mtg-art-section { position: relative; overflow: hidden; }
.deck-mtg-card .deck-mtg-art { position: relative; z-index: 1; }

/* ---- MTG-card-shaped deck slot, styled in the site palette ----
   Keeps real card proportions (63 : 88) and the stripe layout
   (title → art → type line → text box → footer) but drops the
   gold/parchment look in favour of the accent + lavender gradient
   used everywhere else, with the commander art bleeding into the
   text box like the deck-detail hero. */
.deck-mtg-card {
  display: flex;
  flex-direction: column;
  aspect-ratio: 63 / 88;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  background: #0a0612;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65),
              0 0 0 1px rgba(124, 142, 248, 0.18);
  transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
  position: relative;
}
/* Hover lift removed inside deck slots — the card was shifting up
   under the user's cursor and triggering the global card-hover
   preview overlay. The slot is a tile, not a card-name reference,
   so neither the shift nor the preview is wanted. */
.deck-slot .deck-mtg-card:hover {
  transform: none;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65),
              0 0 0 1px rgba(124, 142, 248, 0.18);
}
/* Keep the existing lift behaviour everywhere ELSE that uses the same
   class (e.g. populated decks rendered in lists outside .deck-slot). */
.deck-mtg-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.78),
              0 0 0 1px rgba(124, 142, 248, 0.35);
}

/* Title bar — dark indigo → dark plum, big white serif name. */
.deck-mtg-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 11px 3px;
  background: linear-gradient(135deg,
              #1a1442 0%,
              #28194a 100%);
  box-shadow: inset 0 -1px 0 rgba(124, 142, 248, 0.18);
}
.deck-mtg-name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  letter-spacing: 0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(20, 12, 50, 0.55);
  min-width: 0;
  flex: 1;
}
.deck-mtg-pips {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.deck-mtg-pips .mana-symbol {
  width: 15px;
  height: 15px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

/* Art frame — no border, no internal padding. Just the Scryfall art. */
.deck-mtg-art-section {
  position: relative;
  /* Slightly shorter art than a real card (1.37) buys ~30px of
     vertical room for the text box below, which now carries a big
     overall score + three score rings that would otherwise collide. */
  aspect-ratio: 1.62 / 1;
  overflow: hidden;
  background: #000;
}
.deck-mtg-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.deck-mtg-change {
  position: absolute;
  top: 6px; right: 6px;
  padding: 3px 8px;
  border-radius: 16px;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.20);
  color: rgba(255,255,255,0.80);
  font-size: 10px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  z-index: 1;
}
.deck-mtg-change:hover { background: rgba(255,255,255,0.15); color: #fff; }

/* Type line — same dark gradient as title, bolder commander name. */
.deck-mtg-typeline {
  display: flex;
  align-items: center;
  padding: 3px 11px 2px;
  background: linear-gradient(135deg,
              #1a1442 0%,
              #28194a 100%);
  box-shadow: inset 0 1px 0 rgba(124, 142, 248, 0.10),
              inset 0 -1px 0 rgba(124, 142, 248, 0.15);
  min-height: 0;
}
.deck-mtg-cmdr {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  text-shadow: 0 1px 2px rgba(20, 12, 50, 0.55);
}

/* Text box — commander art bleeds into the background under a dark
   overlay, mirroring the deck-detail hero treatment. */
.deck-mtg-textbox {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Score row pinned to the top, rings pinned to the bottom — maximum
     vertical separation so the tier pill never sits on top of the
     middle Mana ring. */
  justify-content: space-between;
  gap: 6px;
  padding: 8px 11px 6px;
  position: relative;
  background-color: #110a26;
  background-image: var(--card-art, none);
  background-size: cover;
  background-position: center 30%;
  color: #e7ddf3;
  min-height: 0;
}
/* Dark veil for readability — heavier near the bottom. */
.deck-mtg-textbox::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(10, 6, 22, 0.88) 0%,
              rgba(10, 6, 22, 0.92) 60%,
              rgba(10, 6, 22, 0.96) 100%);
  pointer-events: none;
}
.deck-mtg-textbox > * { position: relative; z-index: 1; }

/* Score row */
.deck-mtg-score-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.deck-mtg-score-num {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--p4);
  text-shadow: 0 0 16px rgba(226, 196, 122, 0.40);
  line-height: 1;
}
.deck-mtg-tier-pill {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
}

/* Footer — same dark gradient as title/type line. */
.deck-mtg-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 11px 2px;
  background: linear-gradient(135deg,
              #1a1442 0%,
              #28194a 100%);
  box-shadow: inset 0 1px 0 rgba(124, 142, 248, 0.12);
  font-size: 10px;
  font-weight: 600;
  color: rgba(231, 221, 243, 0.85);
  letter-spacing: 0.04em;
}
.deck-mtg-footer .deck-mtg-count {
  color: #fff;
}

/* Score row — overall power rating, centered and oversized so it
   anchors the card the way a hero score does. The tier pill rides
   centered beneath the big number rather than inline beside it. */
.deck-mtg-score-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
}
.deck-mtg-score-num {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  color: var(--p4);
  text-shadow: 0 0 22px rgba(226,196,122,0.45);
  line-height: 1;
}
.deck-mtg-tier-pill {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
}
.deck-mtg-tier-pill.tier-strong       { background: rgba(226,196,122,0.18); color: var(--p4); border: 1px solid rgba(226,196,122,0.35); }
.deck-mtg-tier-pill.tier-above        { background: rgba(124,142,248,0.16); color: var(--accent); border: 1px solid rgba(124,142,248,0.35); }
.deck-mtg-tier-pill.tier-fair         { background: rgba(177,150,246,0.14); color: var(--p2); border: 1px solid rgba(177,150,246,0.3); }
.deck-mtg-tier-pill.tier-underpowered { background: rgba(217,122,108,0.14); color: var(--p1); border: 1px solid rgba(217,122,108,0.3); }
.deck-mtg-tier-pill.tier-unscored     { background: rgba(255,255,255,0.05); color: var(--text-dim); border: 1px solid rgba(255,255,255,0.1); }

/* Mini benchmark donuts — three small score rings (Deck / Sim / Stab)
   inside the card's text box. Mirrors the donuts on the deck-detail
   header, just compact so three fit horizontally in the card. */
.deck-mini-rings {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 6px;
  /* Don't flex-grow — the textbox uses space-between, so the rings
     park at the bottom at their natural height instead of stretching
     up into the score row. */
  flex: 0 0 auto;
  min-height: 0;
}
.deck-mini-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.deck-mini-ring-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: rgba(231, 217, 176, 0.75);
}

/* Legacy 5-bar fallback — used when a deck has no benchmark yet. */
.deck-mtg-metrics {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: 0;
}
.deck-metric-row {
  display: grid;
  grid-template-columns: 58px 1fr 22px;
  align-items: center;
  gap: 6px;
}
.deck-metric-label {
  font-size: 9px;
  color: rgba(231, 217, 176, 0.65);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.deck-metric-track {
  height: 4px;
  border-radius: 3px;
  background: rgba(231, 217, 176, 0.10);
  overflow: hidden;
}
.deck-metric-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.deck-metric-val {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: #f4dca2;
  text-align: right;
  font-weight: 600;
}

/* .deck-mtg-count lives in the footer — colour comes from
   .deck-mtg-footer .deck-mtg-count earlier. No extra rule needed. */

/* Slot-card-wrap: just the card + optional remove */
.slot-card-wrap { display: flex; flex-direction: column; gap: 6px; }

.deck-picker {
  flex: 1;
  min-width: 0;   /* allow shrinking below intrinsic option width */
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.deck-picker:focus { outline: none; border-color: var(--accent); }

.deck-name-input {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
}
.deck-name-input:focus {
  outline: none;
  border-color: var(--accent);
}

.deck-list-input {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 10px;
  min-height: 140px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  resize: vertical;
}
.deck-list-input:focus {
  outline: none;
  border-color: var(--accent);
}

.deck-slot-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-dim);
  flex-wrap: wrap;
  gap: 8px;
  /* Stick to the bottom of the slot so footers across all slots align
     even when one slot has the AI play notes expanded. */
  margin-top: auto;
}

.deck-slot-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* All four deck-action buttons (Upload, Save, Export, Delete) share the
   same width and height so the row reads as a uniform set. */
.file-upload,
.save-deck-btn,
.export-deck-btn,
.delete-deck-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 12px;
  min-width: 86px;
  height: 32px;
  box-sizing: border-box;
}
.file-upload:hover { color: var(--text); border-color: var(--text-dim); }
.file-upload input { display: none; }

.delete-deck-btn { color: var(--p1); border-color: var(--p1-border); }
.delete-deck-btn:hover { color: var(--p1); border-color: var(--p1); background: var(--p1-soft); }
.delete-deck-btn { color: var(--p1); border-color: var(--p1-border); }
.delete-deck-btn:hover { color: var(--p1); border-color: var(--p1); background: var(--p1-soft); }

.remove-deck-btn {
  padding: 6px 10px;
  font-size: 12px;
}

/* ---------- Setup controls ---------- */

.setup-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* + Player icon pill */
.add-player-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(124,142,248,0.35);
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.add-player-pill:hover {
  background: rgba(124,142,248,0.10);
  border-color: var(--accent);
  color: var(--text-bright);
}
.add-player-pill:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Games inline input */
.games-input {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  height: 42px;
}
.games-input input {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(124,142,248,0.25);
  color: var(--text-bright);
  padding: 0 10px;
  border-radius: 8px;
  width: 72px;
  height: 42px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  box-sizing: border-box;
}
.games-input input:focus {
  outline: none;
  border-color: var(--accent);
}

#run-status {
  /* Used only for error/warning messages now (not progress) */
  margin-top: 20px;
  padding: 14px 18px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 14px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
}

/* Sticky progress banner — pinned just under the topbar so it's always
   in view while a sim runs, no matter where the user scrolled. */
#progress-banner {
  position: fixed;
  /* Sit just below the topbar (min-height: 96px) so the nav row stays
     fully clickable while a sim is running. 88px = topbar height + a
     couple of pixels of breathing room above the bar. */
  top: 88px;
  left: 0;
  right: 0;
  z-index: 20;
  background: rgba(12, 9, 19, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 10px 32px;
  display: flex;
  align-items: center;
  gap: 14px;
  animation: fade-in 0.2s ease;
}
#progress-banner[hidden] { display: none !important; }
.stop-btn {
  margin-left: auto;
  padding: 5px 14px;
  border-radius: 6px;
  background: rgba(217, 122, 108, 0.15);
  border: 1px solid rgba(217, 122, 108, 0.45);
  color: var(--p1);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  flex-shrink: 0;
}
.stop-btn:hover {
  background: rgba(217, 122, 108, 0.30);
  border-color: rgba(217, 122, 108, 0.70);
}
#progress-banner.is-queued {
  background: linear-gradient(180deg, rgba(40, 30, 60, 0.92), rgba(20, 15, 30, 0.92));
  border-bottom: 1px solid rgba(216, 121, 91, 0.35);
}
#progress-banner.is-queued .progress-banner-label {
  color: rgba(216, 121, 91, 0.95);
  letter-spacing: 0.06em;
}
#progress-banner.is-queued .progress-fill {
  background: repeating-linear-gradient(45deg,
    rgba(216, 121, 91, 0.25), rgba(216, 121, 91, 0.25) 8px,
    rgba(40, 30, 60, 0.4) 8px, rgba(40, 30, 60, 0.4) 16px);
  animation: cb-queue-stripes 1.2s linear infinite;
}
@keyframes cb-queue-stripes {
  from { background-position: 0 0; }
  to   { background-position: 32px 0; }
}

/* When the banner is visible, push only the .view content down so it doesn't
   overlay. Don't touch body padding — that would shift the sticky topbar. */
body.banner-active .view { margin-top: 52px; }
.progress-banner-bar {
  flex: 1;
  position: relative;
  height: 8px;
  background: rgba(228, 223, 251, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--p1) 0%, var(--p2) 70%, var(--p3) 100%);
  box-shadow: 0 0 12px rgba(124, 142, 248, 0.4);
  transition: width 0.5s ease;
}
.progress-banner-label {
  font-size: 12px;
  color: var(--text);
  letter-spacing: 0.06em;
  font-family: "Inter", sans-serif;
  white-space: nowrap;
  min-width: 200px;
  text-align: right;
  transition: color var(--transition-base) ease;
}
.progress-banner-label .elapsed {
  color: var(--text-faint);
  margin-left: 6px;
  font-size: 11px;
}

/* "Complete" state — bar turns teal/green with a stronger glow, label
   recolors. Held for ~700ms so the user actually sees the finish. */
#progress-banner.complete {
  border-bottom-color: var(--p3-border);
  background: linear-gradient(180deg, rgba(60, 100, 80, 0.45), rgba(12, 9, 19, 0.92));
}
#progress-banner.complete .progress-fill {
  background: linear-gradient(90deg, var(--p3) 0%, var(--p3) 100%);
  box-shadow: 0 0 18px var(--p3), 0 0 6px var(--p3);
  width: 100% !important;
}
#progress-banner.complete .progress-banner-label {
  color: var(--p3);
  font-weight: 600;
}

#progress-banner.fade-out {
  opacity: 0;
  transition: opacity var(--transition-base) ease;
}

.status-line {
  padding: 5px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: fade-in 0.2s ease;
}
@keyframes fade-in {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}
.status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 14px;
  flex-shrink: 0;
}
.status-line.active { color: var(--accent); }
.status-line.warning { color: var(--p4); }
.status-line.warning .status-icon { color: var(--p4); }
.status-line.done { color: var(--text-dim); }
.status-line.done .status-icon { color: var(--p3); }
.status-line.done .status-icon::before { content: "✓"; }
.status-line.done.final { color: var(--p3); font-weight: 500; }
.status-line.error { color: var(--danger); }
.status-line.error .status-icon::before { content: "✕"; }

/* Spinner for the currently-running phase */
.status-icon.spinner {
  border: 2px solid rgba(124, 142, 248, 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  width: 14px;
  height: 14px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.deck-errors {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: -4px;
}
.deck-error {
  color: var(--p1);
  font-size: 12px;
  padding: 2px 0;
}

/* ============================================================
   Results dashboard
   ============================================================ */

.dashboard {
  display: grid;
  gap: 16px;
  animation: dash-in 0.4s ease;
}
@keyframes dash-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Top row: 3 stat cards */
.stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.stat-card {
  background: linear-gradient(160deg, rgba(124,142,248,0.10), rgba(226,196,122,0.06));
  border: 1px solid rgba(124,142,248,0.28);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 160px;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
/* Subtle radial glow behind the big number */
.stat-card::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, currentColor, transparent 65%);
  top: -60px;
  opacity: 0.08;
  pointer-events: none;
}
.stat-card.p1::before { color: var(--p1); }
.stat-card.p2::before { color: var(--p2); }
.stat-card.p3::before { color: var(--p3); }
.stat-card.p4::before { color: var(--p4); }
.stat-card.middle::before { color: var(--accent); }

.stat-card.p1 { border-color: var(--p1-border); background: linear-gradient(180deg, var(--p1-soft), var(--bg-elev) 60%); }
.stat-card.p2 { border-color: var(--p2-border); background: linear-gradient(180deg, var(--p2-soft), var(--bg-elev) 60%); }
.stat-card.p3 { border-color: var(--p3-border); background: linear-gradient(180deg, var(--p3-soft), var(--bg-elev) 60%); }
.stat-card.p4 { border-color: var(--p4-border); background: linear-gradient(180deg, var(--p4-soft), var(--bg-elev) 60%); }

/* When a commander art-crop is available, render it as the card background
   under a dark gradient so the numbers stay legible. */
.stat-card.has-art {
  background-size: cover;
  background-position: center 25%;
  background-repeat: no-repeat;
}
.stat-card-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
/* Radial "stage spotlight" — anchors a dark pool centered behind the
   big number + commander label, while the art stays vivid out toward
   the card edges. The previous linear top→bottom gradient washed the
   whole card uniformly; the number ended up sitting on whatever hue
   the art happened to have there. The radial pulls the eye into a
   defined dark zone where the text lives. Pair with the heavier text
   weight + drop-shadow below for the full readability fix. */
.stat-card.has-art .stat-card-overlay {
  background:
    radial-gradient(ellipse 70% 60% at 50% 38%,
      rgba(8, 6, 16, 0.78) 0%,
      rgba(8, 6, 16, 0.55) 55%,
      rgba(8, 6, 16, 0.28) 100%),
    linear-gradient(180deg,
      rgba(8, 6, 16, 0.20) 0%,
      rgba(8, 6, 16, 0.50) 100%);
}
/* Heavier text + drop-shadow halo on art-backed cards. The base
   .stat-number above is 64px / 700; bumping to 800 + a layered black
   shadow gives each glyph a defined edge regardless of what's behind
   it. The hue stays (coral / lavender / etc. for player identity) but
   the legibility floor rises dramatically. */
.stat-card.has-art .stat-number {
  font-weight: 800;
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.85),
    0 0 18px rgba(0, 0, 0, 0.65),
    0 0 32px rgba(0, 0, 0, 0.40);
}
.stat-card.has-art .stat-label {
  color: rgba(255, 255, 255, 0.88);
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 8px rgba(0, 0, 0, 0.55);
}
.stat-card.has-art .stat-winrate {
  font-weight: 700;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.85), 0 0 14px rgba(0, 0, 0, 0.55);
}
.stat-card.has-art .stat-ci {
  color: rgba(255, 255, 255, 0.70);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.80);
}
.stat-card.has-art.p1 .stat-card-overlay { box-shadow: inset 0 0 80px rgba(216, 121, 91, 0.30); }
.stat-card.has-art.p2 .stat-card-overlay { box-shadow: inset 0 0 80px rgba(124, 142, 248, 0.30); }
.stat-card.has-art.p3 .stat-card-overlay { box-shadow: inset 0 0 80px rgba(122, 196, 144, 0.30); }
.stat-card.has-art.p4 .stat-card-overlay { box-shadow: inset 0 0 80px rgba(178, 139, 222, 0.30); }
.stat-card-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.stat-number {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
}
.p1 .stat-number { color: var(--p1); }
.p2 .stat-number { color: var(--p2); }
.p3 .stat-number { color: var(--p3); }
.p4 .stat-number { color: var(--p4); }

.stat-card .stat-label {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 4px;
}

.stat-card .stat-winrate {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
}
.stat-card .stat-ci {
  margin-top: 2px;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--text-faint);
  text-transform: uppercase;
  font-family: "Inter", sans-serif;
}
.p1 .stat-winrate { color: var(--p1); }
.p2 .stat-winrate { color: var(--p2); }
.p3 .stat-winrate { color: var(--p3); }
.p4 .stat-winrate { color: var(--p4); }

/* Avg-turns + Games count — both tinted blue (Sim Score accent) so the
   middle card reads as a single coherent "match summary" block. */
.stat-card.middle .stat-number {
  color: var(--accent);
  text-shadow: 0 0 28px rgba(124,142,248,0.45);
}
.stat-card.middle .stat-secondary {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--accent);
  opacity: 0.85;
}
.stat-card.middle .stat-label {
  color: var(--accent);
  opacity: 0.75;
}
.stat-card.middle .stat-stalemate {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-family: "Inter", sans-serif;
}

/* Side-by-side cards (win conditions) */
.col-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.col-row.three { grid-template-columns: 1fr 1fr 1fr; }
/* 4 players: stack into 2×2 rather than cram into 1×4 */
.col-row.four  { grid-template-columns: 1fr 1fr; }

.panel {
  background: linear-gradient(160deg, rgba(124,142,248,0.10), rgba(226,196,122,0.06));
  border: 1px solid rgba(124,142,248,0.28);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(228, 223, 251, 0.03);
}

/* Base h3 — panel section headings. Specific parent overrides allowed below. */
h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 16px;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

.panel-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.panel-title .p1-text { color: var(--p1); }
.panel-title .p2-text { color: var(--p2); }
.panel-title .p3-text { color: var(--p3); }
.panel-title .p4-text { color: var(--p4); }

/* Recommendations panel header — stacked eyebrow + commander name so a long
   commander name never wraps awkwardly or shoves the label to the corner. */
.rec-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 18px;
}
.rec-header-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.rec-header-cmdr {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
}
.rec-header-cmdr.p1-text { color: var(--p1); }
.rec-header-cmdr.p2-text { color: var(--p2); }
.rec-header-cmdr.p3-text { color: var(--p3); }
.rec-header-cmdr.p4-text { color: var(--p4); }

.section-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  color: var(--text-faint);
  margin-bottom: 14px;
}
/* Blue-tinted variant — used on "Wins by turn" so the chart pairs with
   the blue Avg-turns / Games stats above it. */
.section-eyebrow-accent {
  color: var(--accent);
  opacity: 0.85;
}

.winrow {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.winrow:last-child { border-bottom: none; }
.winrow .count { font-weight: 600; font-family: var(--font-display); font-size: 18px; }
.winrow.p1 .count { color: var(--p1); }
.winrow.p2 .count { color: var(--p2); }
.winrow.p3 .count { color: var(--p3); }
.winrow.p4 .count { color: var(--p4); }

/* Bar chart */
.chart-wrap { padding-top: 8px; }
.bar-chart-legend {
  display: flex;
  gap: 18px;
  justify-content: center;
  font-size: 12px;
  color: var(--text-dim);
  padding-top: 8px;
}
.legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  vertical-align: middle;
  border-radius: 3px;
}

/* Line chart */
.game-selector {
  background: var(--bg-elev-2);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  min-width: 320px;
}

/* Key moments list */
.km-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 16px;
}
.km-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  align-items: baseline;
}
.km-row:last-child { border-bottom: none; }
.km-turn { color: var(--text-faint); font-size: 12px; }
.km-row.p1 .km-text { color: var(--p1); }
.km-row.p2 .km-text { color: var(--p2); }
.km-row.p3 .km-text { color: var(--p3); }
.km-row.p4 .km-text { color: var(--p4); }
.km-row .km-icon {
  display: inline-block;
  margin-right: 6px;
}

/* All games grid */
.games-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.game-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  border: 1px solid currentColor;
}
.game-legend-item.p1 { color: var(--p1); background: var(--p1-soft); }
.game-legend-item.p2 { color: var(--p2); background: var(--p2-soft); }
.game-legend-item.p3 { color: var(--p3); background: var(--p3-soft); }
.game-legend-item.p4 { color: var(--p4); background: var(--p4-soft); }
.game-legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: currentColor;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4) inset;
}
.game-legend-name { font-weight: 500; color: var(--text); }

.games-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 8px;
}
.game-card {
  border-radius: 10px;
  padding: 10px 4px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
  font-size: 12px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg-elev-2) 0%, var(--bg-elev) 100%);
}
.game-card:hover {
  transform: translateY(-2px);
  filter: brightness(1.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Color-coded winner backgrounds — the entire card tints to the winner's
   color so the grid is readable at a glance without icons. */
.game-card.p1 { background: linear-gradient(180deg, var(--p1-soft) 0%, var(--bg-elev) 110%); border-color: var(--p1-border); }
.game-card.p2 { background: linear-gradient(180deg, var(--p2-soft) 0%, var(--bg-elev) 110%); border-color: var(--p2-border); }
.game-card.p3 { background: linear-gradient(180deg, var(--p3-soft) 0%, var(--bg-elev) 110%); border-color: var(--p3-border); }
.game-card.p4 { background: linear-gradient(180deg, var(--p4-soft) 0%, var(--bg-elev) 110%); border-color: var(--p4-border); }
.game-card.stale { background: var(--bg-elev-2); border-color: var(--border); }

/* Selected state — solid border in winner color */
.game-card.selected { box-shadow: 0 0 0 2px currentColor inset; }
.game-card.selected.p1 { color: var(--p1); }
.game-card.selected.p2 { color: var(--p2); }
.game-card.selected.p3 { color: var(--p3); }
.game-card.selected.p4 { color: var(--p4); }

.game-card .game-idx { color: var(--text-faint); font-size: 11px; margin-bottom: 2px; }
.game-card .game-turn {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.1;
}
.game-card.p1 .game-turn { color: var(--p1); }
.game-card.p2 .game-turn { color: var(--p2); }
.game-card.p3 .game-turn { color: var(--p3); }
.game-card.p4 .game-turn { color: var(--p4); }
.game-card.stale .game-turn { color: var(--text-faint); }

/* ----- Issues panel ----- */
.panel.issue-panel {
  border-color: var(--p1-border);
  background: linear-gradient(180deg, var(--p1-soft) 0%, var(--bg-elev-2) 80%);
}
.issue-panel .panel-title { color: var(--p1); }
.issue-help {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 14px;
}
.issue-group { margin-bottom: 12px; }
.issue-group:last-child { margin-bottom: 0; }
.issue-deck {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 6px;
}
.issue-cards {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.issue-card {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--p1-border);
  background: rgba(217, 122, 108, 0.08);
  color: var(--p1);
  font-size: 12px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
}

/* ----- Recommendations panel ----- */
.rec-list {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--text);
}
.rec-list.good li { color: var(--p3); }
.rec-list.bad  li { color: var(--p1); }

.rec-row {
  display: grid;
  grid-template-columns: 76px 1fr;   /* matches .rec-prio width */
  gap: 14px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.rec-row:last-child { border-bottom: none; }
.rec-prio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;        /* fits "MEDIUM" comfortably; HIGH/LOW pad to same width */
  height: 22px;
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 700;
  padding: 0;
  border-radius: 4px;
  flex-shrink: 0;
  box-sizing: border-box;
  border: 1px solid var(--border-strong);
}
.rec-row.prio-high   .rec-prio { color: var(--p1); border-color: var(--p1-border); background: var(--p1-soft); }
.rec-row.prio-medium .rec-prio { color: var(--p4); border-color: var(--p4-border); background: var(--p4-soft); }
.rec-row.prio-low    .rec-prio { color: var(--p3); border-color: var(--p3-border); background: var(--p3-soft); }

.rec-title { font-weight: 600; margin-bottom: 3px; }
.rec-detail { font-size: 13px; color: var(--text-dim); line-height: 1.5; }
/* Inline hover-enabled card name links inside recommendations / lists */
.rec-card-link {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(124,142,248,0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  cursor: help;
  transition: text-decoration-color var(--transition-fast), color var(--transition-fast);
}
.rec-card-link:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

.coverage-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: -8px;
  margin-bottom: 4px;
}
.cov {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.06em;
  border: 1px solid var(--border-strong);
  cursor: help;
}
.cov-full    { color: var(--p3); border-color: var(--p3-border); background: var(--p3-soft); }
.cov-partial { color: var(--p4); border-color: var(--p4-border); background: var(--p4-soft); }
.cov-unmod   { color: var(--p1); border-color: var(--p1-border); background: var(--p1-soft); }
.cov-land    { color: var(--accent); border-color: rgba(124,142,248,0.35); background: rgba(124,142,248,0.10); }

.dead-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding-top: 8px;
}
.dead-card {
  font-size: 12px;
  color: var(--text-faint);
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-elev-2);
}

.empty-state {
  color: var(--text-faint);
  padding: 14px 0;
  text-align: center;
  font-style: italic;
}

/* ----- Mana pips (deck color identity) ----- */
.mana-row {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  vertical-align: middle;
  margin-left: 8px;
}
.mana-pip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4) inset, 0 1px 2px rgba(0,0,0,0.3);
  flex-shrink: 0;
}
.mana-pip svg {
  width: 70%;
  height: 70%;
  display: block;
}
.mana-pip.W { background: linear-gradient(135deg, #f8edcf, #e3d7a8); color: #5a4a1f; }
.mana-pip.U { background: linear-gradient(135deg, #a0c8ec, #6597c9); color: #143557; }
.mana-pip.B { background: linear-gradient(135deg, #5e5759, #2b2025); color: #d8c8c8; }
.mana-pip.R { background: linear-gradient(135deg, #f3a48f, #d65a3e); color: #5a1d10; }
.mana-pip.G { background: linear-gradient(135deg, #a4caa0, #5c9264); color: #143818; }
.mana-pip.C { background: linear-gradient(135deg, #cabfc2, #948a8d); color: #2f2629; }
/* Generic mana number (e.g. {2}, {X}) */
.mana-pip.mana-num {
  background: linear-gradient(135deg, #c8bea8, #9a9080);
  color: #1e1a14;
  font-size: 10px;
  font-weight: 700;
  font-family: "SF Mono", Menlo, Consolas, monospace;
}
/* Hybrid (e.g. {W/U}, {2/W}) — inherits color from base pip, smaller text */
.mana-pip.mana-hyb {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

/* Larger pips for the big stat cards */
.stat-card .mana-row { margin-left: 0; margin-top: 4px; }
.stat-card .mana-pip { width: 16px; height: 16px; font-size: 10px; }

/* ----- Deep Match toggle + transcript ----- */
.deep-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--bg-elev-2);
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.deep-toggle:hover { color: var(--text); border-color: var(--text-dim); }
.deep-toggle input { accent-color: var(--accent); }
.deep-toggle input:checked ~ span { color: var(--accent); }
.deep-toggle-disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

.deep-roster {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 16px;
}
.deep-roster-item {
  position: relative;
  padding: 14px 18px;
  min-height: 96px;
  border-radius: 12px;
  border: 1px solid currentColor;
  background: linear-gradient(180deg, currentColor 0%, transparent 50%);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
/* Commander defeated — desaturate the panel, tint blood-red, drop a big
   skull overlay across the art. Reads as "eliminated" at a glance. */
.deep-roster-item.dead {
  filter: grayscale(0.55) saturate(0.8);
}
.deep-roster-item.dead .deep-roster-overlay {
  background:
    radial-gradient(ellipse at center, rgba(180, 30, 40, 0.55) 0%, rgba(40, 0, 0, 0.78) 70%),
    linear-gradient(180deg, rgba(12, 9, 19, 0.35) 0%, rgba(12, 9, 19, 0.55) 100%) !important;
  box-shadow: inset 0 0 80px rgba(220, 40, 50, 0.55) !important;
}
.deep-roster-item.dead::after {
  content: "☠";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 84px;
  line-height: 1;
  color: rgba(255, 240, 240, 0.92);
  text-shadow:
    0 0 20px rgba(220, 30, 30, 0.85),
    0 0 40px rgba(120, 0, 0, 0.7),
    0 2px 4px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  z-index: 2;
  animation: cb-death-pulse 2.2s ease-in-out infinite;
}
@keyframes cb-death-pulse {
  0%, 100% { opacity: 0.78; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.05); }
}
/* Keep the name + archetype visible but dimmer; life total goes red. */
.deep-roster-item.dead .deep-roster-name {
  color: rgba(220, 200, 200, 0.7);
  text-decoration: line-through;
  text-decoration-color: rgba(220, 40, 40, 0.7);
}
.deep-roster-item.dead .deep-roster-life {
  color: rgba(255, 90, 90, 0.95);
  text-shadow: 0 0 14px rgba(220, 30, 30, 0.6);
}
/* Head row: commander name on the left, big life total on the right. */
.deep-roster-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.deep-roster-life {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  letter-spacing: 0.03em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
}
/* Turn counter — center column, matches life-total visual weight. */
.deep-roster-turn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(216, 121, 91, 0.16), rgba(139, 92, 167, 0.16));
  border: 1px solid rgba(216, 121, 91, 0.32);
  box-shadow:
    0 0 18px rgba(216, 121, 91, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  min-width: 110px;
}
.deep-roster-turn-label {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 500;
  margin-bottom: 2px;
}
.deep-roster-turn-value {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  text-shadow: 0 0 14px rgba(216, 121, 91, 0.55);
}
.deep-roster-item.p1 { color: var(--p1); }
.deep-roster-item.p2 { color: var(--p2); }
/* When commander art is available, render it as the background under a dark
   gradient so the name and archetype stay legible. */
.deep-roster-item.has-art {
  background-size: cover;
  background-position: center 18%;
  background-repeat: no-repeat;
}
.deep-roster-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.deep-roster-item.has-art .deep-roster-overlay {
  background: linear-gradient(180deg,
    rgba(12, 9, 19, 0.35) 0%,
    rgba(12, 9, 19, 0.72) 60%,
    rgba(12, 9, 19, 0.92) 100%);
}
.deep-roster-item.has-art.p1 .deep-roster-overlay { box-shadow: inset 0 0 90px rgba(216, 121, 91, 0.30); }
.deep-roster-item.has-art.p2 .deep-roster-overlay { box-shadow: inset 0 0 90px rgba(124, 142, 248, 0.30); }
.deep-roster-body {
  position: relative;
  z-index: 1;
  width: 100%;
}
.deep-roster-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}
.deep-roster-archetype {
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  margin-top: 4px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

/* Sticky life ticker — pinned at the top of the transcript panel so the
   user can always see current life totals + turn while scrolling. */
.deep-life-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--bg-elev) 0%, var(--bg-elev-2) 100%);
  border: 1px solid var(--border);
  position: sticky;
  top: 96px;
  z-index: 5;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.deep-life-bar[hidden] { display: none !important; }
.life-ticker {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid currentColor;
  background: linear-gradient(180deg, currentColor 0%, transparent 60%);
  transition: opacity var(--transition-base) ease;
}
.life-ticker.p1 { color: var(--p1); }
.life-ticker.p2 { color: var(--p2); }
.life-ticker:last-of-type { justify-content: flex-end; flex-direction: row-reverse; }
.life-ticker-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.life-ticker-value {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  min-width: 70px;
  text-align: center;
  letter-spacing: 0.03em;
}
.life-ticker.dead { opacity: 0.4; }
.life-ticker.dead .life-ticker-value::after {
  content: " ✕";
  font-size: 22px;
}
.life-ticker-turn {
  font-family: var(--font-display);
  font-size: 36px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text);
  text-align: center;
  font-weight: 700;
  line-height: 1;
  padding: 8px 22px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(216, 121, 91, 0.18), rgba(139, 92, 167, 0.18));
  border: 1px solid rgba(216, 121, 91, 0.35);
  box-shadow:
    0 0 18px rgba(216, 121, 91, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  text-shadow: 0 0 14px rgba(216, 121, 91, 0.55);
  min-width: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.life-ticker-turn::before {
  content: "✦";
  font-size: 22px;
  color: var(--p1);
  opacity: 0.75;
}

.transcript-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}
.transcript-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(216, 121, 91, 0.10);
  border: 1px solid rgba(216, 121, 91, 0.35);
  border-radius: 8px;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--transition-fast) ease, border-color var(--transition-fast) ease, transform var(--transition-fast) ease;
}
.copy-btn:hover {
  background: rgba(216, 121, 91, 0.22);
  border-color: rgba(216, 121, 91, 0.6);
}
.copy-btn:active { transform: scale(0.97); }
.copy-btn-icon { font-size: 14px; line-height: 1; }
.deep-transcript {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 24px;
  height: 66vh;
  min-height: 420px;
  overflow-y: auto;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
  scroll-behavior: smooth;
}
/* Diagnostic info on skipped casts (cost vs available producers). */
.deep-diag {
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 0.02em;
  margin-left: 6px;
  opacity: 0.7;
}
/* Collapsible end-of-turn board snapshot. */
.deep-board-state {
  margin: 10px 0;
  padding: 10px 14px;
  background: rgba(40, 30, 60, 0.35);
  border-left: 3px solid rgba(216, 121, 91, 0.4);
  border-radius: 4px;
  font-size: 12px;
}
.deep-board-state summary {
  cursor: pointer;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
  user-select: none;
}
.deep-board-state summary::marker { color: rgba(216, 121, 91, 0.7); }
.bs-row {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}
.bs-row.p1 { border-left: 2px solid var(--p1); }
.bs-row.p2 { border-left: 2px solid var(--p2); }
.bs-name { font-weight: 600; color: var(--text); margin-right: 10px; }
.bs-meta { color: var(--text-dim); font-size: 11px; }
.bs-cards {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.bs-card {
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
}
.bs-card.bs-tapped {
  opacity: 0.5;
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.4);
}
.bs-empty {
  color: var(--text-dim);
  font-style: italic;
  font-size: 11px;
}
.deep-transcript::-webkit-scrollbar { width: 10px; }
.deep-transcript::-webkit-scrollbar-track { background: transparent; }
.deep-transcript::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
}
.deep-transcript::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
.deep-turn {
  margin-top: 14px;
  margin-bottom: 4px;
  padding: 6px 10px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  border-left: 3px solid currentColor;
}
.deep-turn:first-child { margin-top: 0; }
.deep-turn.p1 { color: var(--p1); background: var(--p1-soft); }
.deep-turn.p2 { color: var(--p2); background: var(--p2-soft); }
.deep-line {
  padding: 2px 0 2px 18px;
  color: var(--text);
}
.deep-line.p1 .deep-bullet { color: var(--p1); }
.deep-line.p2 .deep-bullet { color: var(--p2); }
.deep-bullet {
  display: inline-block;
  margin-right: 6px;
  color: var(--text-faint);
}
.deep-card {
  color: var(--text);
  font-weight: 500;
}
.deep-plan {
  color: var(--text-dim);
  font-style: italic;
  margin-left: 8px;
}
.deep-plan-error {
  color: var(--p4);
}
.deep-warn { color: var(--p4); }
.deep-combat { color: var(--text); font-weight: 500; }
.deep-muted { color: var(--text-faint); }
/* Planeswalker loyalty tick */
.deep-pw-tick { align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pw-loyalty {
  font-size: 11px;
  color: var(--p2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  margin-left: 4px;
}
.pw-ability {
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
}

.deep-result-banner {
  margin-top: 16px;
  padding: 14px 20px;
  border-radius: 10px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 22px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
}
.deep-result-banner.p1 { color: var(--p1); border-color: var(--p1-border); background: var(--p1-soft); }
.deep-result-banner.p2 { color: var(--p2); border-color: var(--p2-border); background: var(--p2-soft); }

/* ----- Post-match analysis ----- */
.analysis-summary {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 14px;
}
.analysis-turning {
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(124, 142, 248, 0.10);
  border-left: 3px solid var(--accent);
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.5;
}
.analysis-players {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.analysis-player {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid currentColor;
  background: linear-gradient(180deg, currentColor 0%, transparent 40%);
}
.analysis-player.p1 { color: var(--p1); }
.analysis-player.p2 { color: var(--p2); }
.analysis-player-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.analysis-player-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
}
.analysis-verdict {
  font-size: 11px;
  letter-spacing: 0.16em;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid currentColor;
}
.analysis-verdict.v-won { color: var(--p3); border-color: var(--p3-border); background: var(--p3-soft); }
.analysis-verdict.v-lost { color: var(--text-faint); border-color: var(--border-strong); }
.analysis-row {
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  margin: 4px 0;
}
.analysis-label {
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 6px;
}
.analysis-lessons ul {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}
@media (max-width: 800px) {
  .analysis-players { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
  .stat-row, .col-row, .col-row.three, .col-row.four { grid-template-columns: 1fr; }
  .games-grid { grid-template-columns: repeat(5, 1fr); }
  .deep-roster { grid-template-columns: 1fr; }
}

/* =========================================================================
   The Gauntlet — accent button + deck-scoring screen
   ========================================================================= */

/* Accent button in the topbar. Distinct gold gradient so it stands out
   alongside the muted ghost buttons (Admin / Sign out) without competing
   with the primary orange call-to-action used inside views. */
.accent-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 8px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  color: var(--btn-text-dark);
  background: linear-gradient(135deg, #f1d488 0%, var(--p4) 55%, #c8a447 130%);
  border: 1px solid rgba(226, 196, 122, 0.55);
  box-shadow:
    0 0 18px rgba(226, 196, 122, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
  transition: box-shadow var(--transition-base), transform 0.05s, filter var(--transition-fast);
}
.accent-btn:hover {
  filter: brightness(1.08);
  box-shadow:
    0 0 26px rgba(226, 196, 122, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.40);
}
.accent-btn:active { transform: translateY(1px); }
.accent-btn:disabled { opacity: 0.55; cursor: not-allowed; filter: grayscale(0.3); }
.accent-btn-icon {
  font-size: 12px;
  line-height: 1;
  color: var(--btn-text-dark);
  text-shadow: 0 0 6px rgba(255, 220, 140, 0.6);
}

/* ----- Gauntlet view ----- */

.gauntlet-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}
.gauntlet-title-wrap { flex: 1; }
.gauntlet-title {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.gauntlet-ornament {
  font-size: 28px;
  color: var(--p4);
  text-shadow: 0 0 14px rgba(226, 196, 122, 0.55);
}

.gauntlet-config {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-radius: 12px;
  background: rgba(226, 196, 122, 0.04);
  border: 1px solid rgba(226, 196, 122, 0.18);
  margin-bottom: 18px;
}
/* Equalize the two action buttons that sit side-by-side in this bar.
   primary-btn and accent-btn have different default padding/font; force the
   same shape here so they read as paired. Sentence case, matching the rest
   of the app. */
.gauntlet-config .primary-btn,
.gauntlet-config .accent-btn {
  padding: 12px 28px;
  font-size: 14px;
  letter-spacing: 0.01em;
  text-transform: none;
  min-width: 184px;
  justify-content: center;
  height: 44px;
  box-sizing: border-box;
}
.gauntlet-config-note {
  font-size: 13px;
  color: var(--text-dim);
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  flex: 1;
}
.gauntlet-field { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }
.gauntlet-field > span {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.gauntlet-field select,
.gauntlet-field input[type="number"] {
  padding: 9px 12px;
  border-radius: 7px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev);
  color: var(--text);
  font-family: "Inter", sans-serif;
  font-size: 14px;
}
.gauntlet-field select:focus,
.gauntlet-field input[type="number"]:focus {
  border-color: var(--p4);
  outline: none;
  box-shadow: 0 0 0 3px rgba(226, 196, 122, 0.18);
}

#gauntlet-status {
  margin: 14px 0;
  padding: 12px 18px;
  border-radius: 8px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 14px;
}
#gauntlet-status.error {
  background: rgba(217, 122, 108, 0.10);
  border-color: rgba(217, 122, 108, 0.35);
  color: var(--text);
}

/* Result layout: hero card on left, metrics on right; radar below spans full. */
/* ---- Gauntlet config row ---- */
.gauntlet-deck-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gauntlet-field-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.gauntlet-deck-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}

/* ---- Result grid ---- */
.gauntlet-result { display: flex; flex-direction: column; gap: 20px; margin-top: 8px; }
#gauntlet-result[hidden], #gauntlet-status[hidden] { display: none !important; }

/* ---- Single top panel: image · info · score · bars all on one row ---- */
.gauntlet-top {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  padding: 24px 28px;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(226,196,122,0.10), rgba(124,142,248,0.06));
  border: 1px solid rgba(226,196,122,0.28);
}
.gauntlet-hero-img { flex-shrink: 0; align-self: flex-start; }
.gauntlet-commander-img {
  width: 140px;
  height: 196px;
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  display: block;
  object-fit: cover;
  object-position: center 20%;
}
.gauntlet-commander-img.placeholder { background: rgba(255,255,255,0.04); border: 1px solid var(--border); }
/* Partner split — scoped entirely inside gauntlet-cmdr-split, no bleed */
.gauntlet-cmdr-split { position: relative; overflow: hidden; }
/* Each image covers only its own half — object-fit:cover then centers the art
   naturally within that half, putting the face/subject in the middle of each side */
.gauntlet-cmdr-split img:first-child {
  position: absolute;
  top: 0; left: 0;
  width: 62%; height: 100%;
  object-fit: cover;
  object-position: 65% top; /* pull face toward diagonal */
  clip-path: polygon(0 0, 94% 0, 68% 100%, 0 100%);
}
.gauntlet-cmdr-split img:last-child {
  position: absolute;
  top: 0; right: 0;
  width: 62%; height: 100%;
  object-fit: cover;
  object-position: 35% top; /* pull face toward diagonal */
  clip-path: polygon(32% 0, 100% 0, 100% 100%, 7% 100%);
}
.gauntlet-cmdr-split::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%; width: 2px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.05), rgba(255,255,255,0.3), rgba(255,255,255,0.05));
  transform: rotate(-10deg) translateX(-50%);
  pointer-events: none; z-index: 2;
}
.gauntlet-hero-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: flex-start;
  padding-top: 4px;
}
.gauntlet-hero-deck {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}
.gauntlet-hero-cmdr {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  font-style: italic;
  color: #f5e6a8;
  letter-spacing: 0.2px;
  margin-bottom: 2px;
}
.gauntlet-hero-sub { font-size: 13px; color: var(--text-dim); margin-top: 8px; }
.gauntlet-hero-sub strong { color: var(--text); font-weight: 600; }

.gauntlet-score-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding-right: 20px;
}
.gauntlet-score-col:last-of-type { border-right: none; }
.gauntlet-score-label {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text);
  font-family: var(--font-display);
}
.gauntlet-overall {
  font-family: var(--font-display);
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
  color: var(--p4);
  text-shadow: 0 0 36px rgba(226,196,122,0.45);
  margin: 0;
}
.gauntlet-overall-suffix {
  font-size: 13px;
  font-family: "Inter", sans-serif;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-top: -4px;
  text-shadow: none;
}
/* Inline /100 variant — sits to the right of the number, same color */
.score-display-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.score-suffix-inline {
  font-size: 22px !important;
  margin-top: 0 !important;
  font-family: var(--font-display) !important;
  font-weight: 600;
  opacity: 0.75;
}
/* Increase score number size in hero score display */
.score-display-row .gauntlet-overall {
  font-size: 80px;
}
/* Simulation Score — blue */
.sim-score-display .gauntlet-overall,
.sim-score-display .score-suffix-inline {
  color: var(--accent) !important;
  text-shadow: 0 0 28px rgba(124,142,248,0.45);
}
/* Deck Score — teal */
.deck-score-display .gauntlet-overall,
.deck-score-display .score-suffix-inline {
  color: var(--p3) !important;
  text-shadow: 0 0 28px rgba(121,194,201,0.40);
}
.gauntlet-tier {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 16px;
}
.tier-strong       { background: rgba(226,196,122,0.18); border: 1px solid rgba(226,196,122,0.45); color: var(--p4); }
.tier-above        { background: rgba(124,142,248,0.16); border: 1px solid rgba(124,142,248,0.40); color: var(--accent); }
.tier-fair         { background: rgba(177,150,246,0.14); border: 1px solid rgba(177,150,246,0.35); color: var(--p2); }
.tier-underpowered { background: rgba(217,122,108,0.14); border: 1px solid rgba(217,122,108,0.35); color: var(--p1); }

.gauntlet-bars-col { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; }

/* Admin memory stats */
.admin-mem-spark {
  width: 100%;
  height: 50px;
  display: block;
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
}

.admin-mem-stat {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 10px 14px;
}
.admin-mem-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin-bottom: 4px;
}
.admin-mem-val {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--p3);
}

/* Score + Deck Profile side-by-side row */
.gauntlet-score-bars-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(226,196,122,0.10), rgba(124,142,248,0.06));
  border: 1px solid rgba(226,196,122,0.28);
  overflow: hidden;
}
.gauntlet-score-narrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-shrink: 0;
  padding: 24px 28px 28px 26px;
  border-right: 1px solid rgba(226,196,122,0.20);
  min-width: 130px;
}
.gauntlet-bars-right {
  flex: 1;
  padding: 20px 26px;
  min-width: 0;
}

.gauntlet-bars-section {
  padding: 20px 26px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(124,142,248,0.07), rgba(226,196,122,0.04));
  border: 1px solid rgba(124,142,248,0.18);
}

.gauntlet-bars-right h3,
.gauntlet-bars-section h3,
.gauntlet-bars-col h3,
.gauntlet-radar-col h3,
.gauntlet-matchup-col h3 {
  margin: 0 0 16px 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text);
}
.metric-bars {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  height: 160px;
}
.metric-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}
.metric-col-value {
  font-family: "Inter", sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.metric-col-track {
  flex: 1;
  width: 32px;
  border-radius: 6px 6px 4px 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.metric-col-fill {
  width: 100%;
  border-radius: 4px 4px 0 0;
  transition: height 0.6s ease;
}
.metric-col-label {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  text-align: center;
  min-height: 16px;  /* equal height across single/multi-line labels so all bars get same track space */
  line-height: 1.3;
}

/* ---- Radar + matchup rows (one per format, side by side) ---- */
.gauntlet-radars { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gauntlet-radar-wrap {
  padding: 22px 24px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(124,142,248,0.10), rgba(226,196,122,0.06));
  border: 1px solid rgba(124,142,248,0.28);
  display: grid;
  grid-template-columns: minmax(200px, 360px) 1fr;
  gap: 20px;
  align-items: start;
}
.radar-svg { width: 100%; height: auto; max-width: 520px; }
.radar-axis { stroke-width: 1; }
.radar-ring { fill: none; stroke: rgba(228,223,251,0.08); stroke-width: 1; }
.radar-ring-label { fill: var(--text-dim); font-family: "Inter", sans-serif; font-size: 10px; }
.radar-deck-fill { fill: rgba(226,196,122,0.18); stroke: var(--p4); stroke-width: 2; filter: drop-shadow(0 0 6px rgba(226,196,122,0.3)); }
.radar-label { font-family: var(--font-display); font-size: 14px; letter-spacing: 0.04em; }
.radar-label-value { fill: var(--text-dim); font-family: "Inter", sans-serif; font-size: 11px; font-variant-numeric: tabular-nums; }

.matchup-list { margin: 0; padding: 0; list-style: none; }
.matchup-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 14px;
}
.matchup-row:last-child { border-bottom: 0; }
.archetype-swatch { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.archetype-name { color: var(--text); }
.winrate { font-variant-numeric: tabular-nums; font-weight: 600; }
.matchup-best  .archetype-name, .matchup-best  .winrate { color: var(--p4); }
.matchup-worst .archetype-name, .matchup-worst .winrate { color: var(--p1); }

/* (Retired: .gauntlet-suggestion + .suggestion-body styled the Sonnet
   "How to improve" tile, now superseded by Oracle's Prophecy.) */
.suggestion-body p { margin: 8px 0; }
.suggestion-body strong { color: var(--text); }

/* ---- Card list ---- */
.gauntlet-cardlist {
  padding: 14px 20px;
  border-radius: 12px;
  background: rgba(0,0,0,0.15);
  border: 1px solid var(--border);
}
.gauntlet-cardlist summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.05em;
  color: var(--text);
}
.card-count-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 10px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(255,255,255,0.06);
  color: var(--text-dim);
  font-family: "Inter", sans-serif;
}
.cardlist-grid {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2px 12px;
}
.cardlist-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  align-items: center;
  padding: 3px 0;
  font-size: 13px;
  cursor: default;
}
.card-cmc {
  text-align: center;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
  padding: 1px 3px;
}
.card-name { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Params (collapsed) ---- */
.gauntlet-params {
  padding: 14px 20px;
  border-radius: 12px;
  background: rgba(0,0,0,0.18);
  border: 1px solid var(--border);
}
.gauntlet-params summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}
.gauntlet-params-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.param-chip {
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.param-chip strong { color: var(--text); font-weight: 600; }

/* ---- Score badge on deck cards ---- */
.deck-slot-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.deck-gauntlet-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  cursor: default;
}
.deck-gauntlet-badge .badge-icon { font-size: 10px; opacity: 0.7; }
.deck-gauntlet-badge .badge-sep { font-size: 10px; opacity: 0.6; margin-left: 1px; }
.deck-gauntlet-badge .badge-tier { opacity: 0.75; }
.deck-gauntlet-badge.tier-strong       { background: rgba(226,196,122,0.14); border: 1px solid rgba(226,196,122,0.35); color: var(--p4); }
.deck-gauntlet-badge.tier-above        { background: rgba(124,142,248,0.12); border: 1px solid rgba(124,142,248,0.30); color: var(--accent); }
.deck-gauntlet-badge.tier-fair         { background: rgba(177,150,246,0.10); border: 1px solid rgba(177,150,246,0.28); color: var(--p2); }
.deck-gauntlet-badge.tier-underpowered { background: rgba(217,122,108,0.10); border: 1px solid rgba(217,122,108,0.28); color: var(--p1); }
.deck-gauntlet-badge.tier-unscored     { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); color: var(--text-dim); opacity: 0.6; }

@media (max-width: 900px) {
  .gauntlet-top { flex-wrap: wrap; }
  .gauntlet-commander-img { width: 100px; }
  .gauntlet-commander-img { width: 120px; }
  .gauntlet-radar-wrap { grid-template-columns: 1fr; }
}

/* Cast outcome annotation — the "→ removed Grave Titan" etc. suffix */
.cast-outcome {
  color: var(--text-dim);
  font-size: 0.88em;
  margin-left: 6px;
  letter-spacing: 0.01em;
}
.cast-outcome .deep-card {
  color: var(--text);
  text-decoration-color: rgba(228, 223, 251, 0.3);
}

/* =========================================================================
   AI Pilot Review — post-match decision quality + prompt improvement section
   ========================================================================= */

.pilot-review-wrap {
  margin-top: 22px;
  padding: 20px 24px;
  border-radius: 12px;
  background: rgba(124, 142, 248, 0.06);
  border: 1px solid rgba(124, 142, 248, 0.22);
}
.pilot-review-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.pilot-quality {
  padding: 3px 12px;
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.q-excellent { background: rgba(226,196,122,0.18); color: var(--p4); border: 1px solid rgba(226,196,122,0.4); }
.q-good      { background: rgba(121,194,201,0.18); color: var(--p3); border: 1px solid rgba(121,194,201,0.4); }
.q-mediocre  { background: rgba(177,150,246,0.18); color: var(--p2); border: 1px solid rgba(177,150,246,0.4); }
.q-poor      { background: rgba(217,122,108,0.18); color: var(--p1); border: 1px solid rgba(217,122,108,0.4); }

.pilot-players { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 800px) { .pilot-players { grid-template-columns: 1fr; } }

.pilot-player {
  padding: 16px 18px;
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(124,142,248,0.10), rgba(226,196,122,0.06));
  border: 1px solid rgba(124,142,248,0.28);
  border-left-width: 3px;
}
.pilot-player.p1 { border-left-color: var(--p1); }
.pilot-player.p2 { border-left-color: var(--p2); }
.pilot-player.p3 { border-left-color: var(--p3); }
.pilot-player.p4 { border-left-color: var(--p4); }

.pilot-player-head {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pilot-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}
.pilot-strategy {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.4;
}
.strategy-wrong { color: var(--p1); }
.strategy-ok    { color: var(--p3); }

.pilot-list {
  list-style: none;
  margin: 8px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pilot-good {
  font-size: 13px;
  color: var(--text);
  padding: 5px 10px;
  background: rgba(121,194,201,0.08);
  border-radius: 6px;
  border-left: 2px solid var(--p3);
}
.pilot-bad {
  font-size: 13px;
  color: var(--text);
  padding: 8px 10px;
  background: rgba(217,122,108,0.07);
  border-radius: 6px;
  border-left: 2px solid var(--p1);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
}
.pilot-turn-badge {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--p1);
  background: rgba(217,122,108,0.15);
  padding: 1px 7px;
  border-radius: 4px;
  flex-shrink: 0;
}
.pilot-what { flex: 1 1 200px; }
.pilot-should {
  flex: 1 1 200px;
  color: var(--text-dim);
  font-style: italic;
}
.pilot-cause {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--p1);
  background: rgba(217,122,108,0.12);
  padding: 1px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}
.pilot-suggestions-label {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 10px;
  margin-bottom: 4px;
}
.pilot-suggestion {
  font-size: 13px;
  color: var(--text);
  padding: 6px 10px;
  background: rgba(124,142,248,0.08);
  border-radius: 6px;
  border-left: 2px solid var(--accent);
  line-height: 1.5;
}
.pilot-top-improvement {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(124,142,248,0.10);
  border: 1px solid rgba(124,142,248,0.28);
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
}
.pilot-top-improvement strong { color: var(--accent); }

/* Post-match analysis loading placeholder */
.analysis-loading {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 4px;
  color: var(--text-dim);
  font-size: 14px;
  letter-spacing: 0.03em;
}
.analysis-loading-spinner {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Grouped [auto] cast summary line */
.deep-auto-count { font-variant-numeric: tabular-nums; font-weight: 600; }
.deep-auto-group { opacity: 0.82; }

/* =========================================================================
 * Benchmark Gauntlet (bm-v1) — POST /api/score/benchmark
 * ========================================================================= */

:root {
  --bench-win:  rgba(124, 192, 142, 0.85);  /* green for ≥50% bars */
  --bench-loss: rgba(217, 122, 108, 0.78);  /* salmon for <50% bars */
}

#benchmark-status {
  margin: 14px 0;
  padding: 12px 18px;
  border-radius: 8px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 14px;
}
#benchmark-status.error {
  background: rgba(217, 122, 108, 0.10);
  border-color: rgba(217, 122, 108, 0.35);
  color: var(--text);
}

.benchmark-result { display: flex; flex-direction: column; gap: 20px; margin-top: 8px; }
#benchmark-result[hidden], #benchmark-status[hidden] { display: none !important; }

/* ---- Unified simulation card ---- */
.benchmark-unified-card {
  display: flex;
  gap: 0;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(124,142,248,0.10), rgba(226,196,122,0.06));
  border: 1px solid rgba(124,142,248,0.28);
  overflow: hidden;
}
.benchmark-score-col {
  flex-shrink: 0;
  width: 210px;
  padding: 22px 20px;
  border-right: 1px solid rgba(124,142,248,0.18);
  display: flex;
  flex-direction: column;
  gap: 4px;
}


/* Section title baseline — used for every collapsible header on the deck
   detail page (DECK ANALYSIS, SIMULATION SCORE, CARDS, MATCH INSTRUCTIONS,
   ORACLE'S PROPHECY, PAST MATCHES). All share 13px Inter 600 uppercase
   0.08em text-dim. */
.benchmark-score-eyebrow,
.benchmark-section .gauntlet-score-label,
.md-gauntlet-summary .gauntlet-score-label {
  font-family: var(--font-body), "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.deck-header-deck {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.deck-header-cmdr {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--text-dim);
  font-style: italic;
  line-height: 1.1;
  margin-bottom: 8px;
}
.deck-header-score {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  color: var(--warning);
  text-shadow: 0 0 32px rgba(226,196,122,0.45);
  margin-top: 4px;
}
.deck-header-score-suffix {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dim);
  margin-left: 4px;
  vertical-align: top;
  text-shadow: none;
  letter-spacing: 0.05em;
}
.deck-header-tier {
  display: inline-block;
  margin-top: 18px;
  padding: 4px 14px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  align-self: flex-start;
}
.deck-header-score-empty {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--text-dim);
  margin-top: 8px;
}
.deck-header-tier-hint {
  font-size: 12px;
  color: var(--text-faint);
  font-style: italic;
}

/* ── Score Rings ────────────────────────────────────────────────────────── */
.deck-header-rings {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.score-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px;
}
.score-ring svg { display: block; }
.score-ring-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.score-ring-weight {
  font-size: 10px;
  color: var(--text-faint);
  font-family: "Inter", sans-serif;
}
.score-ring-gated { opacity: 0.55; }

/* Responsive — stack on narrow viewports */
@media (max-width: 900px) {
  .deck-unified-header {
    flex-wrap: wrap;
    gap: 18px;
  }
  .deck-header-rings { width: 100%; justify-content: space-around; }
}

/* Gold header takes full width since the score lives inside it */
.md-hero-full {
  display: block;
  margin-bottom: 16px;
  /* Plain block in normal document flow. The slide-down pill
     (.md-hero-pill below) handles the "stay-visible-while-scrolled"
     role via position: fixed instead of a sticky+morph hybrid. That
     avoids the layout-shift bug entirely — the full hero never animates
     and content below it never moves. */
}

/* ── Slide-down compact pill ──────────────────────────────────────────────
   Independent element rendered alongside the full hero. Hidden above the
   viewport via transform; slides into top: 96px when the scroll listener
   adds `.visible` (scroll Y > 200). Single GPU-accelerated transform —
   no shared-element morph, no layout reflow, no click-target shift. */
.md-hero-pill {
  position: fixed;
  top: 96px;
  left: 50%;
  /* -160% so it's fully off-screen above the topbar even with shadow. */
  transform: translate(-50%, -160%);
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 5px 18px 5px 5px;
  min-height: 50px;
  max-width: 70vw;
  border-radius: 999px;
  cursor: pointer;
  background: linear-gradient(135deg,
    rgba(82, 60, 22, 0.97),
    rgba(52, 40, 18, 0.97) 55%,
    rgba(40, 32, 55, 0.97));
  border: 1px solid rgba(212, 168, 64, 0.55);
  box-shadow: 0 0 0 1px rgba(212,168,64,0.18) inset,
              0 10px 28px rgba(0,0,0,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* Slide-in easing — same curve as Oracle's Prophecy drop-in for
     family resemblance. transform-only animation = no layout cost. */
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  /* Hidden state shouldn't intercept clicks while sliding in. */
  pointer-events: none;
}
.md-hero-pill.visible {
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.md-hero-pill:hover {
  border-color: rgba(212, 168, 64, 0.85);
  box-shadow: 0 0 0 1px rgba(212,168,64,0.30) inset,
              0 14px 36px rgba(0,0,0,0.65);
}
/* Circular art thumbnail on the left. */
.md-hero-pill-art {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(212, 168, 64, 0.55);
  object-fit: cover;
  object-position: center 25%;
  flex-shrink: 0;
}
.md-hero-pill-art.placeholder {
  background: rgba(60, 40, 90, 0.6);
}
/* Partner pair: re-use _cmdrArtSplit's two-image diagonal layout
   primitive and crop it into a circle. */
.md-hero-pill img.md-hero-pill-art + img.md-hero-pill-art,
.md-hero-pill .md-hero-pill-art > img {
  border-radius: 50%;
}
.md-hero-pill-name {
  font-family: var(--font-display, "Cormorant Garamond", serif);
  font-size: 20px;
  font-weight: 600;
  color: #fff8e8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.md-hero-pill-pips {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.md-hero-pill-pips .mana-symbol,
.md-hero-pill-pips .mana-pip {
  width: 22px;
  height: 22px;
  font-size: 12px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55));
}

/* ── Deck Analysis collapsible — teal tint to match Interaction colour ──── */
/* Suppress the .my-deck-details[open] padding-bottom — body has its own padding */
.md-gauntlet-details[open] { padding-bottom: 0; }
.md-gauntlet-details {
  position: relative;
  padding: 0;
  background: linear-gradient(135deg,
    rgba(121,194,201,0.42) 0%,
    rgba(64,160,170,0.24) 55%,
    rgba(40,110,130,0.18) 100%);
  border: 1px solid rgba(121,194,201,0.70);
  border-radius: var(--radius-lg);
  /* 16px to match .my-deck-section + .benchmark-section — uniform
     gutters between every detail-page card (Match Instructions, Deck
     Score, Simulation Score, Stability, Oracle's Prophecy). */
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 0 32px rgba(121,194,201,0.30) inset, 0 0 14px rgba(121,194,201,0.20);
}
.md-gauntlet-summary {
  display: flex;
  align-items: center;         /* Score+chips vertically centered */
  gap: 24px;
  cursor: pointer;
  list-style: none;
  /* Match Simulation Score panel padding so both boxes are the same height. */
  padding: 18px 20px;
  transition: background var(--transition-fast);
}
.md-gauntlet-summary::-webkit-details-marker { display: none; }
/* No hover background — matches Sim Score, prevents a visible sharp-cornered
   rectangle from showing through the rounded outer frame. */

/* ── Deck Analysis hero — chips one row, teal score, eyebrow matches Match Instructions ── */
.md-gauntlet-summary .benchmark-final-score-hero {
  color: #4fc2a7;              /* teal master score — size matches Sim hero */
}
.md-gauntlet-summary .benchmark-final-score-hero .benchmark-final-suffix {
  color: rgba(79,194,167,0.55);
}
/* DECK ANALYSIS eyebrow — inline above the score, matching Simulation Score layout. */
.md-gauntlet-summary .benchmark-hero-eyebrow,
.md-gauntlet-summary .md-gauntlet-hero-eyebrow {
  font-family: var(--font-body), "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0;
}
.md-gauntlet-summary .benchmark-hero-left {
  min-width: 240px;
}
/* Force a single row of chips */
.md-gauntlet-summary .benchmark-group-chips,
.md-gauntlet-summary .benchmark-hero-components {
  flex-wrap: nowrap;
}
/* Deck analysis chips: identical to simulation chips — no size overrides */
.md-gauntlet-summary-head {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 2px;
}
.md-gauntlet-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(121,194,201,0.75);
}
.md-gauntlet-chevron {
  font-size: 18px;
  line-height: 1;
  color: rgba(121,194,201,0.65);
  margin-left: auto;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}
.md-gauntlet-details[open] .md-gauntlet-chevron { transform: rotate(180deg); }

.md-gauntlet-bars-wrap {
  flex: 1;
  min-width: 0;
}
/* Keep Power Rating compact inside the summary */
.md-gauntlet-bars-wrap .gauntlet-overall { font-size: 48px; }
.md-gauntlet-bars-wrap .gauntlet-tier { font-size: 11px; padding: 3px 10px; }
.md-gauntlet-bars-wrap .gauntlet-score-label { font-size: 16px; }
/* Strip all inner gold boxes — the summary bar IS the container */
.md-gauntlet-bars-wrap .gauntlet-top {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  gap: 20px;
}
.md-gauntlet-bars-wrap .gauntlet-score-bars-row {
  background: none;
  border: none;
  border-radius: 0;
}
.md-gauntlet-bars-wrap .gauntlet-score-narrow {
  border-right: none;
  padding: 0 20px 0 0;
}
.md-gauntlet-bars-wrap .gauntlet-bars-right {
  padding: 0;
}
.md-gauntlet-bars-wrap .metric-bars { height: 120px; }

.md-gauntlet-body {
  padding: 22px 22px;
  border-top: 1px solid rgba(121,194,201,0.22);
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  /* Tightened from 18px → 12px to remove the visible gap between Color
     Pressure and the Deck Analysis tile row. The shorter chart height
     (above) already trims most of the dead space inside the Color
     Pressure box; this trims the inter-section gutter the rest of the
     way. */
  gap: 12px;
}

/* ── Sub-boxes inside Deck Analysis body (Mana&Colour, Score Breakdown) ── */
.gb-subbox {
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(121,194,201,0.20);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.gb-subbox-head {
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.gb-empty {
  font-size: 13px;
  color: var(--text-dim);
  font-style: italic;
  padding: 12px 4px;
}

/* ── Score Breakdown tiles (4×1 grid) ─────────────────────────────────── */
.gb-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 1100px) {
  .gb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .gb-grid { grid-template-columns: 1fr; }
}
/* Full-width variant — each .gb-tile takes the entire row instead of
   sharing a grid column. Used after the 4-tile breakdown was promoted
   to "give each category room to show contributing cards"
   (user direction). Wider rows let each component pack a card-pill
   list under its label without horizontal cramping. */
.gb-grid-fullwidth {
  display: flex;
  flex-direction: column;
  /* Compact gap (was 14) to tighten the Deck Analysis stack per
     user request ("Its so big, so ugly. Make it less"). */
  gap: 8px;
}
.gb-tile-fullwidth {
  /* Hero tile sets its own padding via .gb-tile-hero. This rule used
     to add 14×18 on top, which doubled padding on the hero variant.
     Reset so the hero tile controls its own dimensions cleanly. */
  padding: 0;
}
.gb-tile {
  background: linear-gradient(160deg, rgba(0,0,0,0.22), rgba(0,0,0,0.08));
  border: 1px solid var(--border);
  border-top: 3px solid var(--gb-color, var(--accent));
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.gb-tile-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}
.gb-tile-label {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.03em;
}
.gb-tile-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-shrink: 0;
}
.gb-tile-qual {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.gb-tile-score {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}
.gb-tile-denom {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  color: var(--text-dim);
  margin-left: 2px;
  letter-spacing: 0.04em;
}

/* ── Deck Score tile — split layout (per latest user direction) ──────
   Two columns: component grid on the left, dedicated score box on
   the right. The score box is a tinted panel with the category's
   tier colour so the headline number reads as its own card. */
.gb-tile-hero { padding: 12px 16px; }
.gb-tile-split {
  display: grid;
  /* 168 → 200 to fit the larger 56px score figure cleanly with
     breathing room around the /100 suffix. */
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 14px;
  align-items: stretch;
}
.gb-tile-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 6px;
}
.gb-tile-scorebox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 12px;
  border-radius: 10px;
  /* More transparency per user — was 35% border / 10%→3% bg. Now the
     panel is much lighter: 20% border, 4%→1% gradient. The tier-coloured
     top border (3px) keeps the panel identity without leaning on a heavy
     background fill. */
  border: 1px solid color-mix(in srgb, var(--gb-color, #7c8ef8) 20%, rgba(255,255,255,0.04));
  border-top: 3px solid var(--gb-color, #7c8ef8);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--gb-color, #7c8ef8) 4%, transparent) 0%,
    color-mix(in srgb, var(--gb-color, #7c8ef8) 1%, transparent) 100%);
  box-shadow: 0 0 14px -10px var(--gb-color, #7c8ef8) inset;
  text-align: center;
}
@media (max-width: 640px) {
  /* On narrow viewports drop the right column under the grid so the
     tile doesn't squish — keeps the score readable on phones. */
  .gb-tile-split {
    grid-template-columns: minmax(0, 1fr);
  }
  .gb-tile-scorebox { padding: 10px 12px; }
}
.gb-tile-head-hero {
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.gb-tile-label-hero {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-bottom: 2px;
}
.gb-tile-meta-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  text-align: right;
  line-height: 1;
}
.gb-tile-qual-hero {
  /* Bumped (10.5 → 13) per user — quality word reads as the panel's
     eyebrow at a glance now, not as a tiny chip. */
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.20em;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.gb-tile-score-hero {
  font-family: var(--font-display);
  /* 38 → 56 per user — the score is now the largest single piece of
     type on the deck-detail page, anchoring each category panel. */
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 0 34px color-mix(in srgb, var(--gb-color, #7c8ef8) 40%, transparent);
}
.gb-tile-score-hero .gb-tile-denom {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  color: var(--text-faint);
  margin-left: 4px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ── Component sub-tile grid (per user redesign) ──────────────────────
   Each contributing component becomes a small clickable tile. Tiles
   with cards open the popout modal on click; tiles with no cards are
   shown as disabled placeholders.
   auto-FIT (not auto-fill) so leftover space gets absorbed by the
   existing tiles instead of being left as ghost empty columns — the
   row stretches dynamically to fill the available width. */
.gb-component-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  padding: 10px 0 2px;
}
.gb-component-tile {
  display: grid;
  grid-template-rows: auto auto auto auto;
  row-gap: 4px;
  padding: 10px 12px 8px;
  border-radius: 8px;
  /* Border picks up a faint hint of the tier colour so it doesn't
     read as a generic grey rectangle. */
  border: 1px solid color-mix(in srgb, var(--gb-color, #7c8ef8) 18%, rgba(255, 255, 255, 0.05));
  /* Subtle tier-colour wash per user — Speed=gold, Consistency=lavender,
     Interaction=teal, Resilience=blue. Kept low-alpha (8% → 3%) so the
     tile still reads as a quiet card rather than a colour block;
     enough to make the tier identity obvious at a glance. */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--gb-color, #7c8ef8) 8%, transparent) 0%,
    color-mix(in srgb, var(--gb-color, #7c8ef8) 3%, transparent) 100%);
  font-family: "Inter", system-ui, sans-serif;
  text-align: left;
  cursor: default;
  color: inherit;
  transition: border-color 0.12s, background 0.12s;
  position: relative;
  overflow: hidden;
}
.gb-component-tile::before {
  /* Thin coloured stripe on the left edge — tile-tier colour
     (Speed=coral, Consistency=lavender, Interaction=teal,
     Resilience=blue). Inherited via --gb-color on the parent tile. */
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--gb-color, #7c8ef8);
  opacity: 0.85;
}
/* Static-tile variant: no hover lift, no pointer cursor — these tiles
   have no contributing cards, so they're informational only. The
   tier-coloured wash + left-edge stripe still convey identity. */
.gb-component-tile.gb-comp-static {
  cursor: default;
}
/* Clickable-tile variant: tiles with contributing cards open the cards
   popout on click. Pointer cursor + a subtle hover lift advertise the
   interaction. */
.gb-component-tile.gb-comp-clickable {
  cursor: pointer;
  transition: transform 0.06s, border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.gb-component-tile.gb-comp-clickable:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--gb-color, #7c8ef8) 50%, rgba(255, 255, 255, 0.10));
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--gb-color, #7c8ef8) 14%, transparent) 0%,
    color-mix(in srgb, var(--gb-color, #7c8ef8) 5%, transparent) 100%);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35),
              0 0 14px color-mix(in srgb, var(--gb-color, #7c8ef8) 18%, transparent);
}
.gb-component-tile.gb-comp-clickable:active { transform: translateY(0); }
.gb-component-tile.gb-comp-zero { opacity: 0.42; }
.gb-component-tile.gb-comp-zero::before { opacity: 0.40; }

.gb-comp-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.25;
  /* Wrap to 2 lines max; the design font scales down gracefully. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gb-comp-pts {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  margin-top: 2px;
}
.gb-comp-value {
  font-size: 10.5px;
  font-style: italic;
  color: var(--text-dim);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* "N cards →" affordance text inside a clickable component tile — the
   hint that the tile opens the cards popout. Colour is set inline to
   the tile-tier colour. */
.gb-comp-cards {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* Slim row list (legacy from previous redesign — kept hidden in case
   any cached HTML still uses it; the new layout uses .gb-component-grid
   instead). */
.gb-tile-rows {
  display: flex;
  flex-direction: column;
  padding: 2px 0;
}
.gb-row-hero {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  padding: 4px 2px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.04);
  min-height: 26px;
}
.gb-row-hero:last-child { border-bottom: none; }
.gb-row-hero .gb-row-pts {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  line-height: 1;
}
.gb-row-hero .gb-row-body {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  /* Defensive: keep label + value on one row even if a parent's
     layout reflow momentarily defeats the flex. Spans default to
     inline, so without flex-wrap:nowrap they'll stack on narrow
     widths — which is what the user was seeing. */
  flex-wrap: nowrap;
  overflow: hidden;
}
.gb-row-hero .gb-row-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}
.gb-row-hero .gb-row-value {
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
  white-space: nowrap;
  flex: 0 0 auto;
}
.gb-row-hero.gb-row-zero { opacity: 0.40; }
.gb-row-hero.gb-row-zero .gb-row-pts { color: var(--text-faint); }

/* Compact "View N cards →" button */
.gb-row-view-btn {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  height: 22px;
  border-radius: 5px;
  border: 1px solid rgba(124, 142, 248, 0.35);
  background: rgba(124, 142, 248, 0.08);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.05s;
  white-space: nowrap;
  line-height: 1;
}
.gb-row-view-btn:hover {
  background: rgba(124, 142, 248, 0.18);
  border-color: rgba(124, 142, 248, 0.60);
  color: rgba(255, 255, 255, 0.98);
}
.gb-row-view-btn:active { transform: translateY(1px); }
.gb-row-view-empty {
  font-size: 11px;
  color: var(--text-faint);
  padding-right: 6px;
}
/* Hide the JSON-payload <script> tag defensively. */
.gb-row-cards-data { display: none !important; }

/* Compact total footer */
.gb-tile-foot {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 8px;
  padding-top: 6px;
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.gb-tile-foot-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.gb-tile-foot-pts {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
}

/* ── Cards popout modal ──────────────────────────────────────────────
   Opens when a clickable component tile is pushed. Wider than it is
   tall, with the contributing cards laid out four to a row. Reuses the
   .modal-backdrop / .modal-panel chrome from the rest of the app. */
.gb-cards-modal-backdrop {
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gb-cards-modal-panel {
  /* Wide, short panel — explicitly wider than high. Width caps at
     94vw on narrow screens; max-height is held well below the width so
     the panel always reads as a landscape rectangle. */
  width: min(1080px, 94vw);
  max-height: 80vh;
  padding: 0;
  background: linear-gradient(180deg,
    rgba(34, 28, 56, 0.97) 0%,
    rgba(24, 20, 40, 0.97) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 3px solid var(--gb-modal-color, #7c8ef8);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.gb-cards-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.gb-cards-modal-titles { min-width: 0; }
.gb-cards-modal-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.gb-cards-modal-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px 0;
  line-height: 1.2;
}
.gb-cards-modal-sub {
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}
.gb-cards-modal-close {
  flex-shrink: 0;
  margin-left: 16px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.65);
  border-radius: 999px;
  width: 32px; height: 32px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.gb-cards-modal-close:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.30);
  color: var(--text);
}
.gb-cards-modal-grid {
  /* Always exactly four cards per row. Cards scale to fill their 1fr
     column, so the row stays full-width regardless of card count. */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  padding: 22px 26px 26px;
  overflow-x: hidden;
  overflow-y: auto;
}
.gb-cards-modal-grid .gb-card-mini {
  width: 100%;
  /* Grid items default to min-width:auto, which lets a nowrap card-name
     caption blow its column wider than its 1fr share — making columns
     unequal and cards in longer-named columns render bigger. min-width:0
     forces every column to a true equal 1fr, so all cards are uniform
     and the caption truncates with an ellipsis instead. */
  min-width: 0;
}
.gb-cards-modal-grid .gb-card-mini-name {
  max-width: 100%;
}
/* Uniform card boxes: pull the image out of flow so the box height is
   driven solely by the shape's 63:88 aspect-ratio (not the image's
   intrinsic/loading size). Without this, an unloaded or oddly-scaled
   image lets the box collapse to a different height than its siblings,
   which is why one card could render shorter than the rest. */
.gb-cards-modal-grid .gb-card-mini-shape {
  position: relative;
  width: 100%;
  aspect-ratio: 63 / 88;
  height: auto;
}
.gb-cards-modal-grid .gb-card-mini-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Phones: 4-up cards get too small, so drop to two per row. */
@media (max-width: 560px) {
  .gb-cards-modal-grid { grid-template-columns: repeat(2, 1fr); }
}
.gb-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 2px;
}
.gb-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: baseline;
  gap: 10px;
}
.gb-row-pts {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  text-align: right;
  color: var(--gb-color, var(--accent));
  line-height: 1.1;
}
.gb-row-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.gb-row-label {
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  white-space: normal;
  word-break: normal;
}
.gb-row-value {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  white-space: normal;
  letter-spacing: 0.01em;
}
/* Dim entire row when this metric contributed 0 points */
.gb-row-zero { opacity: 0.45; }
.gb-row-zero .gb-row-pts { color: var(--text-faint); font-weight: 600; }

/* Card thumb grid shown beneath a breakdown row when the backend
   attached a "cards" array. Each thumb is also an .oracle-card-ref so
   the existing Scryfall image-preview tooltip fires on hover. */
.gb-row-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  margin-left: 0;
}

/* Card art-crop thumbnail. Each tile shows the card's art_crop with the
   name floating beneath. The hover tooltip (via .oracle-card-ref) still
   fires for full image preview; this just makes the inline display
   actually look like cards instead of text pills. */
.gb-card-thumb {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 84px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.gb-card-thumb:hover {
  transform: translateY(-1px);
  border-color: rgba(124, 142, 248, 0.55);
  box-shadow: 0 0 12px rgba(124, 142, 248, 0.18);
}
.gb-card-thumb-img {
  width: 100%;
  height: 56px;
  object-fit: cover;
  display: block;
  background: rgba(0, 0, 0, 0.30);
}
.gb-card-thumb-name {
  width: 100%;
  padding: 3px 5px 4px;
  font-size: 9.5px;
  font-weight: 500;
  line-height: 1.15;
  color: rgba(255, 255, 255, 0.78);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: "Inter", system-ui, sans-serif;
}
/* When the Scryfall art-crop request fails (404, network, etc), the
   <img> hides itself and the parent gets .gb-card-thumb-fallback. The
   name span is already shown beneath, so the tile gracefully degrades
   to a name-only chip. */
.gb-card-thumb-fallback {
  width: auto;
  min-width: 0;
}
.gb-card-thumb-fallback .gb-card-thumb-name {
  padding: 6px 10px;
  white-space: nowrap;
  text-overflow: clip;
  font-size: 11px;
}
/* "+N more" overflow chip — visually distinct from the card thumbs so
   the click affordance reads as a control, not a card. */
.gb-card-thumb-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  color: rgba(168, 156, 242, 0.95);
  background: rgba(124, 142, 248, 0.10);
  border: 1px solid rgba(124, 142, 248, 0.30);
  border-radius: 6px;
  cursor: pointer;
  align-self: center;
}
.gb-card-thumb-more:hover {
  background: rgba(124, 142, 248, 0.18);
  border-color: rgba(124, 142, 248, 0.55);
}
.gb-card-thumb-hidden {
  display: contents;
}
.gb-card-thumb-hidden[hidden] {
  display: none;
}
.gb-card-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  white-space: nowrap;
}
.gb-card-pill:hover {
  background: rgba(124, 142, 248, 0.16);
  border-color: rgba(124, 142, 248, 0.45);
  color: rgba(255, 255, 255, 0.95);
}
.gb-card-pill-more {
  background: rgba(124, 142, 248, 0.10);
  border-color: rgba(124, 142, 248, 0.30);
  color: rgba(168, 156, 242, 0.95);
  font-weight: 600;
}
.gb-card-pill-hidden {
  display: contents;
}

/* ── Tabbed breakdown (Deck Analysis tiles) ──────────────────────────────
   Each tile is a two-pane layout:
     · Main pane (left)  — the active component's value + card grid.
                           Card grid clamps to a single row by default;
                           a "Show all N" button below expands it.
     · Totals sidebar (right) — vertical clickable list of every
                                component with its points, plus a
                                "Total" row at the bottom. The sidebar
                                doubles as the tab nav.
*/
.gb-tile-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 16px;
  align-items: start;
  margin-top: 8px;
}
@media (max-width: 720px) {
  .gb-tile-body {
    grid-template-columns: 1fr;
  }
}
.gb-tile-main { min-width: 0; }

/* Shared .gb-tab pill styles — used by the sidebar rows since the
   horizontal pill strip was removed but the click delegate still
   matches .gb-tab. */
.gb-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  white-space: nowrap;
  max-width: 100%;
}
.gb-tab .gb-tab-pts {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--gb-color, var(--accent));
  letter-spacing: 0.02em;
}
.gb-tab:hover {
  background: rgba(124, 142, 248, 0.10);
  border-color: rgba(124, 142, 248, 0.35);
  color: rgba(255, 255, 255, 0.95);
}
.gb-tab.is-active {
  background: rgba(124, 142, 248, 0.16);
  border-color: var(--gb-color, rgba(124, 142, 248, 0.65));
  color: rgba(255, 255, 255, 0.98);
  box-shadow: 0 0 8px rgba(124, 142, 248, 0.16);
}
.gb-tab-zero { opacity: 0.45; }
.gb-tab-zero .gb-tab-pts { color: var(--text-faint); }

.gb-tabpanels { position: relative; }
.gb-tabpanel { display: none; }
.gb-tabpanel.is-active { display: block; }
.gb-tabpanel-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.gb-tabpanel-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.gb-tabpanel-value {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
}

/* Totals sidebar — vertical list of every component for at-a-glance
   scoring, plus a Total sum at the bottom. Each row is a button so
   it doubles as the tab nav. */
.gb-totals {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}
.gb-totals-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gb-totals-row {
  /* Override the pill .gb-tab shape — we want a flat row, not a pill,
     in the sidebar. Still .gb-tab so the click delegate matches. */
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 8px;
  align-items: baseline;
  border-radius: 6px;
  padding: 5px 8px;
  border-color: transparent !important;
  background: transparent;
  white-space: normal;
  text-align: left;
  max-width: none;
}
.gb-totals-row:hover {
  background: rgba(124, 142, 248, 0.08);
  border-color: rgba(124, 142, 248, 0.20) !important;
}
.gb-totals-row.is-active {
  background: rgba(124, 142, 248, 0.16);
  border-color: var(--gb-color, rgba(124, 142, 248, 0.45)) !important;
  box-shadow: none;
}
.gb-totals-pts {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  text-align: right;
  color: var(--gb-color, var(--accent));
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.gb-totals-label {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.85);
}
/* Total row: centered, oversized — anchors the sidebar visually so
   the user's eye lands on the tile's grand-total score. Stacked label
   over points instead of a horizontal grid so the points can grow
   without pushing the label off the column. */
.gb-totals-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding: 14px 8px 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.10);
  text-align: center;
}
.gb-totals-foot-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(255, 255, 255, 0.55);
}
.gb-totals-foot-pts {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  color: var(--gb-color, var(--accent));
  letter-spacing: 0.02em;
}

/* Card-grid wrapper. Default state is "collapsed" — clamps the grid
   to one row via max-height. Clicking the Show-all button below the
   grid flips data-state="expanded" and removes the clamp. Card row
   height: 88w × (88/63) ≈ 123 image + 4 gap + ~28 caption ≈ 156. */
.gb-row-cards-wrap { display: flex; flex-direction: column; gap: 8px; }
.gb-row-cards-wrap[data-state="collapsed"] .gb-row-cards-mini {
  max-height: 162px;
  overflow: hidden;
}
.gb-row-cards-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px;
  margin-top: 0;
  align-content: flex-start;
}
.gb-row-cards-empty {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  padding: 6px 2px;
}

/* Vertical card mini — image + name caption underneath. The "small"
   Scryfall image is ~146px wide natively; we display at 88 so the
   printed name on the image itself is unreadably tiny, hence the
   explicit caption. */
.gb-card-mini {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  width: 88px;
  cursor: pointer;
  position: relative;
  transition: transform 0.12s;
}
.gb-card-mini:hover { transform: translateY(-1px); z-index: 2; }
.gb-card-mini:hover .gb-card-mini-shape {
  border-color: rgba(124, 142, 248, 0.55);
  box-shadow: 0 0 12px rgba(124, 142, 248, 0.22);
}
.gb-card-mini-shape {
  display: block;
  width: 100%;
  aspect-ratio: 63 / 88;
  border-radius: 5px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.gb-card-mini-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gb-card-mini-name {
  display: block;
  width: 100%;
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-family: "Inter", system-ui, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Fallback when Scryfall's small image fails — the .gb-card-mini-shape
   keeps the card silhouette but shows the name overlaid (we keep the
   caption below visible too as a redundancy). */
.gb-card-mini-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  font-size: 10.5px;
  font-weight: 500;
  text-align: center;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.05);
}
.gb-card-mini-fallback::after {
  content: attr(data-fallback);
  line-height: 1.2;
}

/* Show-all / Show-less toggle below the card grid. */
.gb-card-mini-toggle {
  align-self: flex-start;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(168, 156, 242, 0.95);
  background: rgba(124, 142, 248, 0.10);
  border: 1px solid rgba(124, 142, 248, 0.30);
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.gb-card-mini-toggle:hover {
  background: rgba(124, 142, 248, 0.18);
  border-color: rgba(124, 142, 248, 0.55);
  color: rgba(255, 255, 255, 0.95);
}
.gb-card-pill-hidden[hidden] {
  display: none;
}
.gb-note {
  font-size: 11px;
  font-style: italic;
  color: var(--warning);
  margin-top: 4px;
  padding: 6px 10px;
  background: rgba(226,196,122,0.08);
  border-radius: var(--radius-xs);
  border-left: 2px solid var(--warning);
}
.benchmark-hero-left { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.benchmark-hero-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.benchmark-groups-col {
  flex: 1;
  min-width: 0;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.benchmark-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.benchmark-final-score-wrap {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.benchmark-final-score {
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  color: var(--p4);
  text-shadow: 0 0 30px rgba(226,196,122,0.40);
}
.benchmark-final-suffix {
  font-size: 18px;
  vertical-align: middle;
  color: var(--text-dim);
  margin-left: 4px;
  text-shadow: none;
}
.benchmark-final-label {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---- Component chips ---- */
.benchmark-components {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.benchmark-component-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 96px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-left: 3px solid var(--chip-color, var(--p4));
}
.benchmark-component-chip.gated { opacity: 0.45; }
.benchmark-component-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-dim);
}
.benchmark-component-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.0;
  color: var(--text);
  margin-top: 2px;
}
.benchmark-component-weight {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 4px;
  letter-spacing: 0.04em;
}

/* ---- Ladder panel ---- */
.benchmark-ladder-panel {
  padding: 20px 24px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(124,142,248,0.10), rgba(226,196,122,0.06));
  border: 1px solid rgba(124,142,248,0.28);
}
.benchmark-ladder-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 12px;
}
.benchmark-ladder-header h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text);
}
.benchmark-breakeven {
  font-size: 13px;
  color: var(--text-dim);
}
.benchmark-breakeven strong { color: var(--p4); font-weight: 700; }
.benchmark-crossing { color: var(--text-dim); font-style: italic; margin-left: 4px; }
.benchmark-method-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.benchmark-breakeven-gated { color: var(--p1); }

/* ---- Ladder explainer ---- */
.ladder-explainer {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  border-left: 3px solid rgba(124,142,248,0.35);
}
.ladder-explainer strong { color: var(--text); }

/* ---- Ladder card grid ---- */
.ladder-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ladder-baseline-note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
  margin-bottom: 10px;
  opacity: 0.9;
}
.ladder-baseline-note strong { color: var(--text); }
.ladder-row {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  /* Unified blue border across all ladder rows regardless of win/loss/
     crossing state — keeps the section visually cohesive. The bar-fill
     colors below still communicate the win/loss state, so we don't lose
     the at-a-glance "is this matchup good for me" read. */
  border: 1px solid rgba(124,142,248,0.35);
  background: rgba(255,255,255,0.03);
  transition: transform var(--transition-fast) ease, border-color var(--transition-fast) ease;
}
.ladder-row:hover { transform: translateX(2px); background: rgba(255,255,255,0.05); }
/* All three state variants now share the same blue border. The classes
   stay (they're still useful as JS hooks and for the bar-fill rules
   below) but the border color no longer varies by outcome. */
.ladder-row-win   { border-color: rgba(124,142,248,0.35); }
.ladder-row-loss  { border-color: rgba(124,142,248,0.35); }
.ladder-row-crossing {
  border-color: rgba(124,142,248,0.55) !important;
  box-shadow: 0 0 16px rgba(124,142,248,0.18);
}
/* Bottom bar strip — clear proportional indicator */
.ladder-row-bar-track {
  height: 7px;
  background: rgba(255,255,255,0.06);
  border-radius: 0 0 10px 10px;
  overflow: hidden;
}
.ladder-row-bar {
  height: 100%;
  border-radius: 0 2px 2px 0;
  transition: width 0.5s ease;
}
.ladder-row-win  .ladder-row-bar {
  background: linear-gradient(90deg, #818cf8, #a5b4fc);
  box-shadow: 0 0 8px rgba(129,140,248,0.6);
}
.ladder-row-loss .ladder-row-bar {
  background: linear-gradient(90deg, #f87171, #fca5a5);
  box-shadow: 0 0 8px rgba(248,113,113,0.5);
}

/* Content sits above the fill */
.ladder-row-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  gap: 12px;
}
.ladder-row-left  { flex: 1; min-width: 0; }
.ladder-row-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.ladder-row-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.ladder-row-stat-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  white-space: nowrap;
}
.ladder-row-name {
  font-size: 15px;
  font-weight: 700;
  color: #e8e4f0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.ladder-row-verdict {
  font-size: 12.5px;
  color: rgba(200,195,218,0.80);
  line-height: 1.4;
}
.ladder-row-h2h {
  color: rgba(170,165,190,0.62);
  font-weight: 600;
  white-space: nowrap;
}
.ladder-row-rating {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  color: rgba(226,196,122,0.95);
  min-width: 44px;
  text-align: center;
  line-height: 1;
}
.ladder-crossing-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--p4);
  background: rgba(226,196,122,0.12);
  border: 1px solid rgba(226,196,122,0.30);
  border-radius: 4px;
  padding: 1px 6px;
}

/* ---- Callouts (strongest / weakest matchup) ---- */
.benchmark-callouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.benchmark-callout {
  padding: 14px 18px;
  border-radius: 10px;
  border-left: 3px solid var(--text-dim);
  background: rgba(124,142,248,0.06);
}
.benchmark-callout-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.benchmark-callout-body {
  font-size: 14px;
  color: var(--text);
  line-height: 1.4;
}
.benchmark-callout-rating {
  color: var(--text-dim);
  font-size: 12px;
  margin-left: 4px;
}
.benchmark-callout-strong {
  border-left-color: var(--bench-win);
  background: rgba(124, 192, 142, 0.06);
}
.benchmark-callout-weak {
  border-left-color: var(--bench-loss);
  background: rgba(217, 122, 108, 0.06);
}

/* ---- Failed-benchmarks block + calibration drawer ---- */
.benchmark-failed,
.benchmark-calibration,
.benchmark-match-report {
  border-radius: 10px;
  background: rgba(124,142,248,0.05);
  border: 1px solid rgba(124,142,248,0.18);
  padding: 12px 18px;
}
.benchmark-failed summary,
.benchmark-calibration summary,
.benchmark-match-report summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text);
}
.benchmark-failed summary::marker,
.benchmark-calibration summary::marker,
.benchmark-match-report summary::marker {
  color: var(--text-dim);
}
.benchmark-failed-list {
  list-style: none;
  margin: 10px 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.benchmark-failed-list > li {
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(217, 122, 108, 0.06);
  border-left: 2px solid rgba(217, 122, 108, 0.45);
}
.benchmark-failed-rating {
  font-size: 12px;
  color: var(--text-dim);
  margin-left: 6px;
}
.benchmark-failed-reasons {
  margin: 4px 0 0 16px;
  padding: 0;
  list-style: disc;
  font-size: 13px;
  color: var(--text-dim);
}

.benchmark-calibration-body { margin-top: 12px; }
.benchmark-calibration-loading {
  font-size: 13px;
  color: var(--text-dim);
  font-style: italic;
}
.calib-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 12px;
}
.calib-meta strong { color: var(--text); }
.calib-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-family: "Inter", sans-serif;
}
.calib-table th, .calib-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.calib-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  font-weight: 600;
}
.calib-num { text-align: right; font-variant-numeric: tabular-nums; }
.calib-id { font-family: monospace; color: var(--text-dim); font-size: 12px; }
.calib-name { color: var(--text); }
.calib-delta { font-weight: 600; }
.calib-delta-neg { color: var(--p1); }
.calib-delta-pos { color: var(--bench-win); }
.calib-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.calib-accepted     { background: rgba(124, 192, 142, 0.14); color: var(--bench-win);
                      border: 1px solid rgba(124, 192, 142, 0.45); }
.calib-needs-review { background: rgba(226, 196, 122, 0.14); color: var(--p4);
                      border: 1px solid rgba(226, 196, 122, 0.45); }
.calib-rejected     { background: rgba(217, 122, 108, 0.14); color: var(--p1);
                      border: 1px solid rgba(217, 122, 108, 0.45); }

.calib-failed {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.calib-failed h4 {
  margin: 0 0 8px 0;
  font-size: 13px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--p1);
}
.calib-failed-rating { font-size: 12px; color: var(--text-dim); margin-left: 6px; }
.calib-failed ul { margin: 0; padding-left: 20px; font-size: 13px; color: var(--text-dim); }

.calib-footnote {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
}
.calib-footnote code {
  font-family: monospace;
  background: rgba(255,255,255,0.05);
  padding: 1px 4px;
  border-radius: 3px;
}

/* ── Match Report (per-archetype win-rate table) ───────────────────────── */
.benchmark-match-report-body { margin-top: 12px; }
.match-report-empty {
  font-size: 13px;
  color: var(--text-dim);
  font-style: italic;
  padding: 8px 0;
}
.mr-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.mr-meta strong { color: var(--text); font-weight: 600; }
.match-report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.match-report-table th,
.match-report-table td {
  padding: 7px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.match-report-table th {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.match-report-table tbody tr:last-child td {
  border-bottom: none;
}
.match-report-table tbody tr:hover { background: rgba(124, 142, 248, 0.05); }
.mr-section { margin-bottom: 18px; }
.mr-section:last-of-type { margin-bottom: 0; }
.mr-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 8px;
}
.mr-section-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
}
.mr-archetype,
.mr-tier { font-weight: 600; color: var(--text); }
.mr-winrate { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; min-width: 70px; }
.mr-verdict { font-weight: 500; }
.mr-refdeck { color: var(--text-dim); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-games   { text-align: right; color: var(--text-dim); font-variant-numeric: tabular-nums; min-width: 50px; }
/* Win-rate colour bands — same palette as the strongest/weakest callouts
   above the report so the same number reads the same colour. */
.mr-wr-crush    { color: #5fd9b8; }
.mr-wr-win      { color: #79c2c9; }
.mr-wr-even     { color: rgba(255, 255, 255, 0.85); }
.mr-wr-loss     { color: #e6a07a; }
.mr-wr-crushed  { color: #e07a5f; }
.mr-wr-na       { color: var(--text-dim); }
.mr-footnote {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
}

/* Background Deep Match status chip in the topbar */
.deep-match-chip[hidden] { display: none !important; }
.deep-match-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: default;
  transition: background var(--transition-base), border-color var(--transition-base);
  white-space: nowrap;
}
.chip-running {
  background: rgba(124,142,248,0.14);
  border: 1px solid rgba(124,142,248,0.38);
  color: var(--accent);
}
.chip-done {
  background: rgba(226,196,122,0.16);
  border: 1px solid rgba(226,196,122,0.50);
  color: var(--p4);
  cursor: pointer;
  animation: chip-pulse 1.8s ease-in-out 2;
}
.chip-done:hover { background: rgba(226,196,122,0.28); }
.chip-failed {
  background: rgba(217,122,108,0.14);
  border: 1px solid rgba(217,122,108,0.40);
  color: var(--p1);
  cursor: pointer;
}
.chip-spinner {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(124,142,248,0.3);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}
.chip-ready { font-size: 11px; }
.chip-error { font-size: 11px; }
@keyframes chip-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(226,196,122,0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(226,196,122,0); }
}
.status-line.success {
  color: var(--p4);
  border-left: 3px solid var(--p4);
  padding-left: 12px;
}

/* Spinner inside the Run button while queuing a Deep Match */
.btn-spinner {
  display: inline-block;
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: var(--text-dim);
  animation: spin 0.75s linear infinite;
  vertical-align: middle;
  margin-right: 2px;
}

/* Two-button run row on setup screen */
.run-btns { display: flex; gap: 10px; align-items: center; }
.accent-btn:disabled {
  background: var(--border-strong);
  color: var(--text-faint);
  border-color: var(--border);
  box-shadow: none;
  cursor: not-allowed;
  filter: none;
}

/* Cached-snapshot chip in the benchmark hero. Distinct from the other meta
   chips so users can tell at a glance whether the result was replayed. */
.benchmark-meta-cached {
  background: rgba(226, 196, 122, 0.10);
  border-color: rgba(226, 196, 122, 0.45);
  color: var(--p4);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* =========================================================================
   Match History screen
   ========================================================================= */

#history-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

.history-loading {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 4px; color: var(--text-dim); font-size: 14px;
}

.history-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  border-radius: 10px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.history-row-clickable { cursor: pointer; }
.history-row-clickable:hover {
  border-color: var(--border-strong);
  background: var(--bg-elev-2);
}
.history-icon { font-size: 18px; text-align: center; }
.history-row-body { min-width: 0; }
.history-row-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.history-row-meta {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 3px;
}
.history-winner {
  color: var(--p4);
  font-weight: 600;
}
.history-row-right { flex-shrink: 0; }

.history-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.badge-done    { background: rgba(121,194,201,0.15); color: var(--p3); border: 1px solid rgba(121,194,201,0.35); }
.badge-running { background: rgba(124,142,248,0.15); color: var(--accent); border: 1px solid rgba(124,142,248,0.35); }
.badge-failed  { background: rgba(217,122,108,0.15); color: var(--p1); border: 1px solid rgba(217,122,108,0.35); }
.badge-timeout { background: rgba(90,81,112,0.25); color: var(--text-faint); border: 1px solid var(--border-strong); }

/* Commander battle art in history rows */
.history-art {
  position: relative;
  width: 96px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-elev-2);
}
.history-art-placeholder {
  width: 96px; height: 60px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
}
.history-cmdr-art {
  position: absolute;
  width: 60px;
  height: 60px;
  object-fit: cover;
  object-position: center top;
}
.history-cmdr-art-left  { left: 0;  clip-path: polygon(0 0, 68% 0, 100% 100%, 0 100%); }
.history-cmdr-art-right { right: 0; clip-path: polygon(32% 0, 100% 0, 100% 100%, 0 100%); }

/* History row grid update — wider first col for the art */
.history-row {
  grid-template-columns: 96px 1fr auto;
}

/* =========================================================================
 * Gauntlet unified-run progress (v1.1.3)
 * Shown while POST /api/gauntlet/score + POST /api/score/benchmark are in
 * flight in parallel. Two-step indicator + filling bar.
 * ========================================================================= */

#gauntlet-progress {
  margin: 14px 0;
  padding: 14px 18px;
  border-radius: 10px;
  background: rgba(124,142,248,0.06);
  border: 1px solid rgba(124,142,248,0.18);
}
#gauntlet-progress[hidden] { display: none !important; }

.gauntlet-progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 10px;
}
.gauntlet-progress-fill {
  height: 100%;
  width: 5%;
  background: linear-gradient(90deg, var(--p4), var(--accent));
  border-radius: 2px;
  transition: width 0.4s ease;
  box-shadow: 0 0 8px rgba(226, 196, 122, 0.45);
}

.gauntlet-progress-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 13px;
}
.gauntlet-progress-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-dim);
  transition: color var(--transition-base);
}
.gauntlet-progress-steps .step-mark {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.gauntlet-progress-steps li.step-running {
  color: var(--text);
}
.gauntlet-progress-steps li.step-running .step-mark {
  border-color: var(--accent);
  color: var(--accent);
  animation: gauntlet-spin 1.2s linear infinite;
}
@keyframes gauntlet-spin { to { transform: rotate(360deg); } }
.gauntlet-progress-steps li.step-done {
  color: var(--text);
}
.gauntlet-progress-steps li.step-done .step-mark {
  background: rgba(124, 192, 142, 0.14);
  border-color: rgba(124, 192, 142, 0.55);
  color: var(--bench-win, #7cc08e);
}
.gauntlet-progress-steps li.step-error {
  color: var(--p1);
}
.gauntlet-progress-steps li.step-error .step-mark {
  background: rgba(217, 122, 108, 0.12);
  border-color: rgba(217, 122, 108, 0.55);
  color: var(--p1);
}

/* Cards list now lives in its own container at the very bottom of the
   gauntlet view (below the benchmark panel). */
#cards-result {
  margin-top: 12px;
}
#cards-result[hidden] { display: none !important; }

/* =========================================================================
   Match History v2 — card layout with commander art on each side
   ========================================================================= */

/* Override old row styles */
.history-row, .history-row-body, .history-row-right,
.history-art, .history-cmdr-art, .history-art-placeholder { display: none !important; }

#history-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }

.history-card {
  display: grid;
  grid-template-columns: 110px 1fr 110px;
  gap: 0;
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(124,142,248,0.10), rgba(226,196,122,0.06));
  border: 1px solid rgba(124,142,248,0.28);
  overflow: hidden;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  min-height: 100px;
}
.history-card-clickable { cursor: pointer; }
.history-card-clickable:hover { border-color: var(--border-strong); background: var(--bg-elev-2); }

/* Commander art panels */
.history-card-art {
  width: 110px;
  overflow: hidden;
  flex-shrink: 0;
}
.history-cmdr {
  width: 110px;
  height: 100%;
  min-height: 100px;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}
.history-cmdr-placeholder {
  width: 110px;
  min-height: 100px;
  background: var(--bg-elev-2);
}

/* Center content */
.history-card-center {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.history-card-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Match info inside center */
.hmi-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.history-type-chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.chip-deep { background: rgba(124,142,248,0.15); color: var(--accent); border: 1px solid rgba(124,142,248,0.3); }
.chip-sim  { background: rgba(121,194,201,0.15); color: var(--p3);     border: 1px solid rgba(121,194,201,0.3); }
.hmi-date  { font-size: 12px; color: var(--text-faint); }

.hmi-winner { font-size: 14px; font-weight: 600; color: var(--p4); }
.hmi-dim    { font-size: 13px; color: var(--text-faint); }

/* Win-rate bars for sim rows */
.hmi-wr-row {
  display: grid;
  grid-template-columns: 72px 1fr 38px;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.hmi-wr-name { color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hmi-wr-bg { height: 6px; border-radius: 4px; background: rgba(255,255,255,0.06); overflow: hidden; }
.hmi-wr-fill { height: 100%; border-radius: 4px; }
.wr-hi { background: var(--p4); }
.wr-lo { background: var(--text-faint); }
.hmi-wr-val { color: var(--text-dim); text-align: right; font-variant-numeric: tabular-nums; }
.hmi-avg { font-size: 11px; color: var(--text-faint); margin-top: 2px; }

/* History card center layout fixes */
.history-card-center { overflow: hidden; }
.history-card-title { font-size: 16px; margin-bottom: 4px; }
.hmi-meta { flex-wrap: nowrap; overflow: hidden; }
.hmi-date { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hmi-wr-row { font-size: 11px; }
.hmi-wr-name { font-size: 11px; max-width: 80px; }
.hmi-wr-val { font-size: 11px; min-width: 36px; }

/* Cached chip in the gauntlet hero (v1.1.5) — reuses .benchmark-meta-cached
   style but needs a tiny top margin to sit under the games-per-matchup line. */
.gauntlet-hero-cache { margin-top: 6px; }

/* =========================================================================
 * User menu — replaces the standalone Sign out button in v1.1.6.
 * Click the username chip in the top-right to open a dropdown.
 * ========================================================================= */

.user-menu {
  position: relative;
}
.user-menu[hidden] { display: none !important; }

.user-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.user-menu-trigger:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--border-strong);
}
.user-menu-trigger[aria-expanded="true"] {
  background: rgba(124, 142, 248, 0.10);
  border-color: rgba(124, 142, 248, 0.45);
}
.user-menu-caret {
  font-size: 9px;
  color: var(--text-dim);
  transition: transform var(--transition-fast);
}
.user-menu-trigger[aria-expanded="true"] .user-menu-caret {
  transform: rotate(180deg);
}
.user-menu-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #7c8ef8;
  flex-shrink: 0;
  margin: 0 2px;
  box-shadow: 0 0 6px #7c8ef8;
}

.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  padding: 4px;
  border-radius: 8px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 1000;
}
.user-menu-dropdown[hidden] { display: none !important; }

.user-menu-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.user-menu-item:hover,
.user-menu-item:focus {
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}

/* =========================================================================
   Unified Activity Chip + Dropdown
   ========================================================================= */

.activity-wrap[hidden] { display: none !important; }
.activity-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.activity-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-base), box-shadow var(--transition-base);
}
.ac-running {
  background: rgba(124,142,248,0.16);
  border: 1px solid rgba(124,142,248,0.40);
  color: var(--accent);
}
.ac-done {
  background: rgba(226,196,122,0.16);
  border: 1px solid rgba(226,196,122,0.50);
  color: var(--p4);
  animation: chip-pulse 1.8s ease-in-out 3;
}
.ac-done:hover { background: rgba(226,196,122,0.28); }
.ac-mixed {
  background: rgba(177,150,246,0.16);
  border: 1px solid rgba(177,150,246,0.40);
  color: var(--p2);
}
.ac-error {
  background: rgba(217,122,108,0.14);
  border: 1px solid rgba(217,122,108,0.40);
  color: var(--p1);
}

/* Dropdown */
.activity-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 320px;
  max-width: 400px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  z-index: 100;
  overflow: hidden;
}
.activity-dropdown[hidden] { display: none !important; }

.acd-empty {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--text-faint);
  text-align: center;
}
.acd-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.acd-row:last-child { border-bottom: none; }
.acd-icon { font-size: 16px; text-align: center; }
.acd-body { min-width: 0; }
.acd-type {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.acd-name {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--text);
  line-height: 1.3;
  word-break: break-word;
}
.acd-action { flex-shrink: 0; }
.acd-status-running { color: var(--accent); }
.acd-status-error   { color: var(--p1); }
.acd-view-btn {
  padding: 4px 12px !important;
  font-size: 11px !important;
  letter-spacing: 0.04em;
}

/* History collapsible sections */
.history-section {
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(124,142,248,0.10), rgba(226,196,122,0.06));
  border: 1px solid rgba(124,142,248,0.28);
}
.history-section + .history-section { margin-top: 10px; }

.history-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background var(--transition-fast);
}
.history-section-header::-webkit-details-marker { display: none; }
.history-section-header:hover { background: var(--bg-elev-2); }

.hs-icon   { font-size: 16px; }
.hs-label  { font-family: var(--font-display); font-size: 18px;
             font-weight: 600; color: var(--text); flex: 1; }
.hs-count  { font-family: "Inter", sans-serif; font-size: 12px; font-weight: 600;
             padding: 2px 9px; border-radius: 999px;
             background: rgba(255,255,255,0.06); color: var(--text-dim); }
.md-cards-unid-badge {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--p1);
  background: rgba(217,122,108,0.12);
  border: 1px solid rgba(217,122,108,0.28);
  border-radius: 4px;
  padding: 1px 7px;
  margin-left: 8px;
  cursor: pointer;
  vertical-align: middle;
  transition: background var(--transition-base), border-color var(--transition-base);
}
.md-cards-unid-badge:hover {
  background: rgba(217,122,108,0.24);
  border-color: rgba(217,122,108,0.55);
}
.hs-chevron { font-size: 12px; color: var(--text-faint);
              transition: transform var(--transition-base); }
details[open] .hs-chevron { transform: rotate(180deg); }

.history-section-body { display: flex; flex-direction: column; gap: 1px; }
.history-section-body .history-card { border-radius: 0; border-left: none; border-right: none; border-bottom: none; }
.history-section-body .history-card:last-child { border-bottom: none; }

/* Override history-list gap since sections handle their own spacing */
#history-list { gap: 0; }

/* History section header commander art strip */
.hs-art-strip {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  height: 36px;
  width: auto;
}
.hs-art {
  width: 54px;
  height: 36px;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}
.hs-art-placeholder {
  width: 54px;
  height: 36px;
  background: var(--bg-elev-2);
}
/* Single-deck sections (gauntlet) slightly narrower */
.hs-art-strip .hs-art:only-child { width: 54px; }

/* Remove hs-icon since we replaced with art strip */
.hs-icon { display: none; }

/* Activity dropdown type label instead of emoji */
.acd-icon {
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: center;
  white-space: nowrap;
}

/* =========================================================================
 * Setup view polish (v1.1.8) — centered title + equally-sized action buttons.
 * ========================================================================= */

/* Centered page title + subtitle within the setup view only. Other views
   keep their existing layouts (gauntlet has its own header arrangement,
   admin / history are list views). */
#setup-view .page-title {
  justify-content: center;
  text-align: center;
  margin-top: 0;
}
/* Pull the whole setup view tight to the top — the deck-card grid
   has its own gold panels so the section doesn't need a 32px halo. */
#setup-view.view {
  padding-top: 12px;
}
#setup-view .subtitle {
  text-align: center;
}

/* Center the controls cluster (+ Player · Games · Simulate · Deep Match). */
#setup-view .setup-controls {
  justify-content: center;
  align-items: center;
}

/* Gold Simulate button */
.simulate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 32px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  color: var(--btn-text-dark);
  /* Match the My Decks gold accent — anchored on var(--p4) (#e2c47a) so
     the button reads as the same "antique gold" thread that runs through
     the deck score badges, p4 player accents, and ramped highlights
     across the app. Brighter and more saturated than the previous
     custom amber gradient. */
  background: linear-gradient(135deg,
              #d8a945 0%,
              var(--p4) 50%,
              #f0d795 100%);
  border: 1px solid rgba(226, 196, 122, 0.60);
  box-shadow: 0 0 22px rgba(226, 196, 122, 0.35),
              inset 0 1px 0 rgba(255, 240, 180, 0.35);
  transition: filter var(--transition-fast), box-shadow var(--transition-base), transform 0.05s;
}
.simulate-btn:hover {
  filter: brightness(1.10);
  box-shadow: 0 0 30px rgba(226, 196, 122, 0.55),
              inset 0 1px 0 rgba(255, 240, 180, 0.50);
}
.simulate-btn:active  { transform: translateY(1px); }
.simulate-btn:disabled {
  background: var(--border-strong);
  color: var(--text-faint);
  box-shadow: none;
  border-color: transparent;
  cursor: not-allowed;
}

/* Gauntlet history card score display */
.chip-gauntlet {
  background: rgba(226,196,122,0.14);
  color: var(--p4);
  border: 1px solid rgba(226,196,122,0.35);
}
.hmi-gauntlet-score {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 4px 0 2px;
}
.hmi-score-big {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}
.hmi-score-suffix { font-size: 13px; color: var(--text-faint); }
.hmi-tier-badge {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-left: 4px;
}

/* =========================================================================
 * v1.1.9 — Themed action buttons (replaces the gold accent-btn for two
 * specific buttons that needed distinct identity).
 *
 *   Deep Match: MTG-Swamp dark theme — deep black-purple, swamp-water
 *               highlights. Reads as "necromantic / deep ritual" without
 *               looking like a disabled button.
 *
 *   The Gauntlet (deck-slot): gold gradient + a subtle armored-gauntlet
 *               silhouette watermark behind the text.
 * ========================================================================= */

/* ---------- Deep Match — dark MTG theme ---------- */
.deep-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 8px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  cursor: pointer;
  color: var(--btn-text-light);
  position: relative;
  overflow: hidden;
  /* Cosmic void — same radial-gradient pair as .oracle-chat-btn so the
     two Oracle-flavoured CTAs read as siblings. */
  background:
    radial-gradient(ellipse 55% 80% at 50% 50%, rgba(124, 95, 240, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 130% 100% at 50% 50%, rgba(26, 20, 85, 0.85) 0%, rgba(10, 7, 50, 0.92) 60%, rgba(3, 2, 26, 0.97) 100%);
  border: 1px solid rgba(140, 95, 200, 0.40);
  box-shadow:
    0 0 22px rgba(124, 65, 178, 0.30),
    inset 0 1px 0 rgba(180, 130, 220, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55);
  transition: filter var(--transition-fast), box-shadow var(--transition-base), transform 0.05s;
}
/* Twinkling-stars layer — sized proportionally for the larger CTA so
   the void doesn't feel empty next to the Oracle pill. */
.deep-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(2.5px 2.5px at 12% 28%, rgba(255,255,255,1.00), transparent 65%),
    radial-gradient(2px 2px at 31% 72%, rgba(220,230,255,0.95), transparent 65%),
    radial-gradient(2.5px 2.5px at 50% 20%, rgba(255,255,255,1.00), transparent 65%),
    radial-gradient(2px 2px at 69% 78%, rgba(220,235,255,0.95), transparent 65%),
    radial-gradient(2.5px 2.5px at 88% 32%, rgba(255,255,255,1.00), transparent 65%),
    radial-gradient(1.5px 1.5px at 22% 55%, rgba(210,225,255,0.80), transparent 60%),
    radial-gradient(1.5px 1.5px at 61% 50%, rgba(220,230,255,0.80), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 18%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(1.5px 1.5px at 95% 65%, rgba(210,225,255,0.80), transparent 60%),
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(165, 75, 255, 0.18) 0%, transparent 65%),
    radial-gradient(ellipse 70% 55% at 80% 70%, rgba( 60, 130, 255, 0.16) 0%, transparent 65%);
  animation: seer-twinkle 5s ease-in-out infinite;
}
/* Keep the button label above the stars layer. */
.deep-btn > * { position: relative; z-index: 1; }
/* BETA flag on the Deep Match CTA — small lavender pill (app's beta tone). */
.deep-beta-pill {
  display: inline-block;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #7c8ef8 0%, #a67cff 100%);
  color: #fff;
  border-radius: 3px;
  padding: 2px 5px;
  line-height: 1;
  vertical-align: super;
  white-space: nowrap;
}
.deep-btn:hover {
  filter: brightness(1.18);
  box-shadow:
    0 0 30px rgba(155, 90, 220, 0.55),
    inset 0 1px 0 rgba(190, 140, 230, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55);
}
.deep-btn:active  { transform: translateY(1px); }
.deep-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.2);
}

/* ---------- The Gauntlet (deck-slot) ----------
   Same shape and size as the other four deck-slot action buttons
   (Upload / Save / Export / Delete in styles.css ~ line 1094):
     padding: 6px 12px; min-width: 86px; height: 32px; font-size: 12px;
   Differentiated only by colour + a gold background image.

   The CSS references frontend/gauntlet.jpg. Drop a real gauntlet
   image at that path and it picks up automatically. Until then the
   gold gradient under it shows through cleanly — no broken-image
   icon, no layout shift. Swap to .png / .webp by changing the URL. */
/* "Score Deck" — polished amethyst. Pulled off gold (now reserved for the
   "+ New Deck" create action) so the two primary actions in the My Decks
   chrome read as distinct visual roles: gold = create, violet = analyze.
   Violet was the natural pick — the app's existing brand chrome (panel
   borders, tier-pill glow, gauntlet wrapper) already runs on the same
   lavender family (rgba(124,142,248,...)), so the button slots cleanly into
   the palette instead of introducing a third hue.

   Multi-stop diagonal so it reads as polished gem rather than flat color:
   light lavender highlight → mid violet body → deeper amethyst base. White
   text + soft purple halo for legibility against the dark gauntlet panel. */
.gauntlet-deck-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  /* Geometry mirrors .oracle-chat-btn exactly so the action bar's
     three buttons (Ask the Oracle / Score Deck / icon set) all land
     at the same 32px box. Was padding 6px 12px which read taller in
     practice (line-height normal padding stacking). */
  padding: 0 14px;
  min-width: 86px;
  height: 32px;
  line-height: 1;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  color: #ffffff;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg,
              #a89cf2 0%,
              #7c6ef0 45%,
              #5b48d4 100%);
  border: 1px solid rgba(150, 130, 240, 0.65);
  border-radius: 6px;
  box-sizing: border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 14px rgba(124, 142, 248, 0.25);
  text-shadow: 0 1px 1px rgba(20, 12, 60, 0.45);
  transition: background var(--transition-fast),
              border-color var(--transition-fast),
              box-shadow var(--transition-fast),
              transform 0.05s;
}
.gauntlet-deck-btn:hover {
  background: linear-gradient(135deg,
              #b8aff5 0%,
              #8e80f5 45%,
              #6a58e0 100%);
  border-color: rgba(170, 150, 250, 0.80);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 0 20px rgba(124, 142, 248, 0.40);
}
.gauntlet-deck-btn:active   { transform: translateY(1px); }
.gauntlet-deck-btn:disabled { opacity: 0.55; cursor: not-allowed; filter: grayscale(0.3); }

/* Split button — two halves of .gauntlet-deck-btn joined at the seam.
   Main button on the left, caret on the right opens a dropdown menu. */
.split-btn {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}
.split-btn-main {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  /* Seam between Score Deck body and caret. Was rgba(26,18,8,...) (dark
     brown) when the button was gold; switched to a deep violet so it reads
     as the same "cut" on the new amethyst gradient. */
  border-right: 1px solid rgba(28, 18, 70, 0.45) !important;
}
.split-btn-caret {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left: none !important;
  min-width: 0;
  width: 28px;
  padding: 0 4px;
  font-size: 14px;
  line-height: 1;
}
.split-btn-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 50;
  min-width: 220px;
  padding: 4px;
  background: #1a1327;
  border: 1px solid rgba(177, 150, 246, 0.35);
  border-radius: 8px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55),
              0 0 0 1px rgba(124, 142, 248, 0.10);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* display:flex above otherwise wins over the browser's default
   [hidden]{display:none}, leaving the menu visible after JS sets
   menu.hidden = true. Force it back so closeMenu() actually closes. */
.split-btn-menu[hidden] { display: none !important; }
.split-btn-menu-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.split-btn-menu-item:hover {
  background: rgba(124, 142, 248, 0.10);
  border-color: rgba(124, 142, 248, 0.30);
}
.split-btn-menu-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-bright);
}
.split-btn-menu-sub {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

/* Setup view — also equalize the new .deep-btn (no longer .accent-btn) with
   .primary-btn so the Simulate / Deep Match pair stays matched. */
/* Ensure Deep Match matches Simulate height in setup */
#setup-view .run-btns .deep-btn {
  height: 42px;
  padding: 0 28px;
}

/* =============================================================================
   MY DECKS
   ============================================================================= */

.my-decks-page {
  /* Width + side padding come from the parent .view (1200px / 32px).
     Only add extra bottom space for the deck list footer. */
  padding-bottom: 32px;
}

.my-decks-title {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
  line-height: 1.1;
  margin: 0 0 24px;
}

/* ── Deck list rows ── */
.my-decks-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.my-deck-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px 12px 12px;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  min-height: 64px;
  position: relative;
  overflow: hidden;
}
.my-deck-row > * { position: relative; z-index: 1; }
/* Commander art faded into the right side of each row */
.my-deck-row--has-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--row-art);
  background-size: cover;
  background-position: center right;
  opacity: 0.18;
  mask-image: linear-gradient(to right, transparent 30%, black 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 30%, black 100%);
  pointer-events: none;
  z-index: 0;
}
.my-deck-row:hover {
  border-color: var(--accent);
  background: rgba(124,142,248,0.06);
}
.my-deck-row--has-art:hover::after { opacity: 0.25; }

.my-deck-row-art {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
/* When my-deck-row-art is a div wrapper (partner split) */
div.my-deck-row-art {
  position: relative;
  overflow: hidden;
}

/* cmdr-art-single: inherits all sizing from companion class (gauntlet-commander-img, my-deck-row-art, etc.) */
.my-deck-row-art-placeholder {
  width: 52px;
  height: 52px;
  border-radius: 6px;
  background: var(--border);
  flex-shrink: 0;
}

.my-deck-row-body {
  flex: 1;
  min-width: 0;
}
.my-deck-row-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.my-deck-row-cmdr {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-style: italic;
  opacity: 0.75;
}
.my-deck-row-meta {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 3px;
}
.my-deck-unid-inline {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--p1);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--transition-base);
}
.my-deck-unid-inline:hover {
  text-decoration-color: var(--p1);
}

.my-deck-score-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
  /* Fixed width so the score column starts and ends at the same X on every
     row — different number widths ("91.3" vs "74.5") no longer shift it. */
  width: 118px;
  flex-shrink: 0;
}
.mdb-score {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 0 18px rgba(255,255,255,0.10);
}
.mdb-tier {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.9;
  text-align: center;
  line-height: 1.2;
}
.mdb-unscored {
  font-size: 12px;
  color: var(--text-dim);
}

.my-deck-row-chevron {
  color: var(--text-dim);
  font-size: 18px;
  margin-left: 4px;
}

/* ── Deck detail ── */
.my-deck-back {
  margin-bottom: 16px;
}

.my-deck-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 28px;
}
.my-deck-detail-art {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
}
.my-deck-detail-header-body {
  flex: 1;
  min-width: 0;
}
.my-deck-detail-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-bright);
  margin-bottom: 4px;
}
.my-deck-detail-cmdr {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.my-deck-detail-meta {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 12px;
}
.my-deck-edit-btn {
  font-size: 13px;
}

/* ── Sections ── */
.my-deck-section {
  background: linear-gradient(160deg, rgba(124,142,248,0.10), rgba(226,196,122,0.06));
  border: 1px solid rgba(124,142,248,0.28);
  border-radius: 10px;
  padding: 18px 20px;
  /* 16px gutter — matches .md-gauntlet-details + .benchmark-section so
     the My Decks detail page stacks every panel with the same gap.
     Match Instructions, Oracle's Prophecy, and the Cards section all
     inherit this. */
  margin-bottom: 16px;
}

.my-deck-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.my-deck-run-gauntlet-btn {
  font-size: 13px;
}

/* Collapsible sections */
.my-deck-details {
  padding: 0;
}
.my-deck-details[open] {
  padding-bottom: 18px;
}
.my-deck-details-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  list-style: none;
  user-select: none;
}
.my-deck-details-summary::-webkit-details-marker { display: none; }
.my-deck-details-summary::after {
  content: "▸";
  margin-left: auto;
  transition: transform var(--transition-fast);
  font-size: 12px;
}
.my-deck-details[open] > .my-deck-details-summary::after {
  transform: rotate(90deg);
}
.my-deck-details-body {
  padding: 0 20px 4px;
}

/* Gauntlet score block (inline, in My Decks) */
.md-gauntlet-block {
  padding: 4px 0;
}
.md-gauntlet-score-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.md-score-big {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
}
.md-score-denom {
  font-size: 14px;
  color: var(--text-dim);
}
.md-tier-badge {
  font-size: 14px;
  font-weight: 600;
  margin-left: 4px;
}

/* ── Card groups ── */
.card-group {
  margin-bottom: 20px;
}
.card-group:last-child {
  margin-bottom: 0;
}

/* ---- Mana Curve chart ---- */
/* Standalone panel variant — no inner margin/border needed */
.md-mana-curve-section .mana-curve { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
/* ─── Mana Curve + Mana per Turn: two equal charts ─────────────────── */
.mana-curve {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Side-by-side: charts on the left, score panel on the right */
.mc-charts-and-scores {
  display: flex;
  gap: 24px;
  align-items: stretch;
}
.mc-charts {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Score panel */
.mc-scores-panel {
  flex-shrink: 0;
  width: 210px;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: linear-gradient(160deg, rgba(124,142,248,0.10), rgba(226,196,122,0.06));
  border: 1px solid rgba(124,142,248,0.28);
  border-radius: 12px;
  padding: 16px;
}
.mc-score-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mc-score-divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 14px 0;
}
.mc-score-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.mc-score-value {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  margin-top: 2px;
}
.mc-score-num {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
}
.mc-score-denom {
  font-size: 0.85rem;
  opacity: 0.6;
  font-weight: 400;
}
.mc-score-archetype {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 1px;
}
.mc-score-desc {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 6px 0 0;
}

/* Each chart section */
.mc-section {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mc-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px;
}
.mc-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.mc-section-stats {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.mc-stat-sep { color: var(--text-faint); }
.mc-warn {
  font-size: 11px;
  color: #e07060;
  font-weight: 600;
}

/* Chart area — both sections use this height */
.mc-bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  height: 100px;
}
.mc-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}
.mc-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  height: 18px;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
}
.mc-bar-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  padding: 0 2px;
}
.mc-bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  min-height: 3px;
}
.mc-label {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
}

/* Ramp SVG — same rendered height as mc-bars (100px bars + 18px counts + 22px labels = 140px total;
   SVG height chosen to match visual weight) */
.mc-ramp-panel { line-height: 0; }
.mc-ramp-svg   { width: 100%; height: 100px; display: block; }

/* ── Color Pressure section ─────────────────────────────────────────── */
.cp-section { margin-top: 4px; }
.cp-body {
  display: flex;
  gap: 20px;
  align-items: stretch;
  margin-top: 4px;
  /* Fit inside the .gb-subbox-chart cap so Color Pressure renders at the
     same height as Mana Curve / Mana per Turn. */
  height: 100%;
  min-height: 0;
}
/* Chart-only variant — the per-color chip cards on the left were
   retired (their info is already in the chart). Drop the inter-column
   gap and let the chart claim the whole row. */
.cp-body.cp-body-chart-only {
  gap: 0;
}
.cp-body.cp-body-chart-only > .cp-stress {
  flex: 1 1 auto;
  width: 100%;
}
/* Compact color cards when shown inside the Mana sub-box stack so they
   don't dominate the row. */
.gb-subbox-mana-row .cp-color-card {
  padding: 6px 8px;
  min-width: 72px;
  font-size: 11px;
}
.gb-subbox-mana-row .cp-color-grid { align-content: flex-start; }
.cp-left-col {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.cp-left-col .mc-section-header { margin-bottom: 10px; }
.cp-color-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex-shrink: 0;
}
.cp-color-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 90px;
}
.cp-color-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.cp-color-name {
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-display);
}
.cp-status {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border: 1px solid;
  border-radius: 999px;
  padding: 1px 7px;
}
.cp-stats {
  font-size: 10px;
  color: var(--text-faint);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.cp-delta {
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-display);
}
.cp-stress {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.cp-stress .mc-section-header {
  /* Match the COLOR PRESSURE eyebrow style */
  margin-bottom: 0;
}
.cp-stress .mc-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}
.cp-stress-svg {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: block;
}
.cp-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cp-legend-bottom {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-dim);
  justify-content: center;
}
.cp-legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ---- Deck Health subsection ---- */
.deck-health {
  margin-top: 18px;
  padding: 10px 12px;
  border-radius: 7px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
}
.dh-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.dh-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.dh-status {
  font-size: 11px;
  font-weight: 600;
  font-family: "SF Mono", Menlo, Consolas, monospace;
}
.dh-over  { color: #e07a5f; }
.dh-under { color: #c9a84c; }
.dh-ok    { color: #4fc2a7; }
.dh-label {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.dh-row {
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr auto auto;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  font-size: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.dh-row:last-of-type { border-bottom: none; }
.dh-name   { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.dh-reason { color: var(--text-dim); font-size: 12px; line-height: 1.5; }
.dh-qty    { color: var(--text-dim); font-size: 11px; flex-shrink: 0; }
.dh-price  { color: #4fc2a7; font-size: 11px; font-weight: 600; flex-shrink: 0; font-family: "SF Mono", Menlo, Consolas, monospace; }
.dh-ai-row    { margin-top: 8px; }
.dh-ai-results { margin-top: 4px; }
.dh-loading   { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); padding: 4px 0; }
.dh-suggest-btn {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 4px;
  background: rgba(124,142,248,0.10);
  border: 1px solid rgba(124,142,248,0.25);
  color: var(--accent);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.dh-suggest-btn:hover    { background: rgba(124,142,248,0.20); }
.dh-suggest-btn:disabled { opacity: 0.5; cursor: default; }
.dh-remove-btn {
  flex-shrink: 0;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(224,122,95,0.12);
  border: 1px solid rgba(224,122,95,0.30);
  color: #e07a5f;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.dh-remove-btn:hover    { background: rgba(224,122,95,0.22); }
.dh-remove-btn:disabled { opacity: 0.5; cursor: default; }
.dh-add-btn {
  flex-shrink: 0;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(107,191,107,0.12);
  border: 1px solid rgba(107,191,107,0.30);
  color: #6bbf6b;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.dh-add-btn:hover    { background: rgba(107,191,107,0.22); }
.dh-add-btn:disabled { opacity: 0.5; cursor: default; }
.card-group-header {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.card-group-count {
  font-weight: 400;
  opacity: 0.7;
}
.card-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 13px;
  color: var(--text-bright);
  cursor: default;
}
.card-row:hover { color: var(--accent); }
.card-row-qty {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  min-width: 20px;
  text-align: right;
  flex-shrink: 0;
  font-family: "SF Mono", Menlo, Consolas, monospace;
}
.card-row-qty-1 {
  opacity: 0.35;
}
.card-row-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-row-pips {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  align-items: center;
  margin-left: auto;
}
.card-row-pips .mana-pip { width: 15px; height: 15px; font-size: 9px; }
.card-row-pips .mana-pip svg { width: 65%; height: 65%; }

/* ---- Read-mode inline +/- buttons (basic lands / multi-copy cards) ---- */
.card-row-qtybtns {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
  flex-shrink: 0;
  opacity: 0.55;
  transition: opacity var(--transition-fast);
}
.card-row:hover .card-row-qtybtns { opacity: 1; }
.cr-qty-btn {
  width: 20px; height: 20px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: var(--radius-xs);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.cr-qty-btn:hover { background: rgba(255,255,255,0.10); color: var(--text); border-color: var(--text-dim); }
.cr-qty-btn:disabled { opacity: 0.4; cursor: default; }

/* ---- Edit-mode quantity badge ---- */
.card-row-qty-badge {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 28px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-xs);
  background: rgba(124,142,248,0.14);
  border: 1px solid rgba(124,142,248,0.32);
  color: var(--accent);
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  margin-right: 6px;
}
.card-row-qty-badge.card-row-qty-badge-1 {
  background: rgba(255,255,255,0.04);
  border-color: var(--border);
  color: var(--text-dim);
}

/* Edit-mode + button — same family as Delete/Replace */
.cer-btn.cer-inc {
  min-width: 22px;
  font-weight: 600;
  font-size: 13px;
}
.cer-btn.cer-delete {
  min-width: 22px;
}

/* ---- Unidentified card rows ---- */
.card-group-unidentified .card-group-header {
  color: var(--p1);
  border-bottom-color: rgba(217,122,108,0.25);
}
.card-group-unid-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-dim);
  margin-left: 8px;
  font-family: "Inter", sans-serif;
  text-transform: none;
  letter-spacing: 0;
}
.card-row-unidentified {
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(217,122,108,0.12);
  cursor: default;
}
.card-row-unidentified:hover { color: var(--text); }
.card-row-unidentified:last-child { border-bottom: none; }
.card-row-unid-header {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.card-row-unid-icon {
  font-size: 12px;
  color: var(--danger);
  flex-shrink: 0;
}
.card-row-unid-name {
  color: rgba(217,122,108,0.85);
  font-style: italic;
}
.card-row-unid-search {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding-left: 2px;
}
.card-row-unid-input {
  flex: 1;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  outline: none;
  min-width: 0;
}
.card-row-unid-input:focus { border-color: var(--accent); }
.card-row-unid-btn { font-size: 12px; padding: 4px 10px; flex-shrink: 0; }
.card-row-unid-status { font-size: 11px; color: var(--text-dim); }
.card-row-unid-status.ok  { color: rgba(79,194,167,0.9); }
.card-row-unid-status.err { color: var(--p1); }
.card-row-unid-resolved .card-row-unid-name { color: rgba(79,194,167,0.85); font-style: normal; }
.card-row-unid-resolved .card-row-unid-icon { color: rgba(79,194,167,0.9); }

/* My Decks · AI Analysis empty state — single Gauntlet button, centred.
   No text. When there's a suggestion to show it renders; when there
   isn't, this button is the call to action. Reuses the deck-slot
   .gauntlet-deck-btn styling exactly (gold image, dark wash, cream label). */
.my-deck-ai-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 0;
}

/* ── New Deck form on My Decks page ─────────────────────────────────────── */

.my-decks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.my-decks-header .my-decks-title { margin-bottom: 0; }

/* "+ New Deck" — polished gold. Overrides the .accent-btn gradient with a
   vertical 4-stop ramp that mimics brushed metal: bright top highlight, rich
   midtone, a deeper shadow stripe ~60% down, then a soft lower midtone. This
   is the "ingot" treatment the user asked for — purely cosmetic, no animation
   (no pulse, no glow shift on idle). Hover just bumps brightness +inset
   highlight. Border is a darker antique-gold edge so the pill reads as cut
   metal rather than a flat fill. */
.new-deck-btn {
  padding: 8px 18px;
  font-size: 13px;
  background: linear-gradient(180deg,
              #f4dc88 0%,
              #d8a83c 38%,
              #b07a18 62%,
              #d8a83c 100%);
  border: 1px solid #8a6614;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 200, 0.55),
    inset 0 -1px 0 rgba(60,  35,   0, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.35);
  /* Kill the .accent-btn box-shadow transition so we don't get the
     halo-pulse on focus; keep transform/filter for click feel only. */
  transition: filter var(--transition-fast), transform 0.05s;
}
.new-deck-btn:hover {
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 215, 0.65),
    inset 0 -1px 0 rgba(60,  35,   0, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.40);
}
.new-deck-btn:active { transform: translateY(1px); }

.new-deck-form {
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.new-deck-name-input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev-2);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}
.new-deck-name-input::placeholder { color: var(--text-faint); }
.new-deck-name-input:focus { border-color: var(--p4); outline: none; box-shadow: 0 0 0 3px rgba(226,196,122,0.15); }

.new-deck-list-input {
  width: 100%;
  min-height: 220px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev-2);
  color: var(--text);
  font-family: "Inter", monospace;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}
.new-deck-list-input::placeholder { color: var(--text-faint); }
.new-deck-list-input:focus { border-color: var(--accent); outline: none; }

.new-deck-import-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.new-deck-moxfield-input {
  flex: 1;
  padding: 8px 12px;
  border-radius: 7px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev-2);
  color: var(--text);
  font-size: 13px;
}
.new-deck-moxfield-input:focus { border-color: var(--accent); outline: none; }

.new-deck-error {
  font-size: 13px;
  color: var(--p1);
  padding: 6px 10px;
  background: rgba(217,122,108,0.1);
  border-radius: 6px;
  border: 1px solid rgba(217,122,108,0.3);
}

.new-deck-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.new-deck-action-btn { padding: 9px 18px; font-size: 13px; cursor: pointer; }
/* Push Save to the right */
.new-deck-actions .primary-btn { margin-left: auto; }

/* Ensure hidden attribute works on new-deck-form even with flex display */
.new-deck-form[hidden] { display: none !important; }
.new-deck-import-row[hidden] { display: none !important; }

/* ── My Decks detail page (Gauntlet-mirrored layout) ── */
.md-detail-page .gauntlet-result,
.md-detail-page .benchmark-result,
.md-detail-page .cards-result {
  /* Inherit existing Gauntlet styles — no overrides needed */
}
/* Space between the matchup radar panels and the Cards section below */
.md-detail-page #md-header-block { margin-bottom: 0; }

/* Hero row: commander card left, mana curve right */
.md-hero-row {
  display: flex;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 20px;
}
.md-hero-left {
  flex-shrink: 0;
  width: 340px;
}
.md-hero-left .gauntlet-top {
  height: 100%;
  box-sizing: border-box;
  align-items: flex-start;
}
.md-hero-right {
  flex: 1;
  min-width: 0;
}
.md-hero-right .gauntlet-score-bars-row {
  height: 100%;
  border-radius: 14px;
}
@media (max-width: 800px) {
  .md-hero-row { flex-direction: column; }
  .md-hero-left { width: 100%; }
}

.md-detail-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  gap: 10px;
}
.md-detail-bar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.md-delete-btn {
  color: #e07a5f;
  border-color: rgba(224,122,95,0.35);
  font-size: 13px;
}
.md-delete-btn:hover { background: rgba(224,122,95,0.10); border-color: rgba(224,122,95,0.6); }
.md-run-gauntlet-btn {
  font-size: 14px;
  padding: 9px 22px;
}

/* Gauntlet two-phase progress bar — inline in action bar */
.md-gauntlet-progress-inline {
  flex: 1;
  min-width: 0;
  padding: 0 16px;
}
.md-gauntlet-progress {
  transition: opacity 0.6s ease;
}
.mgp-track {
  height: 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.07);
  overflow: hidden;
  margin-bottom: 10px;
}
.mgp-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--p4), var(--accent));
  box-shadow: 0 0 12px rgba(226,196,122,0.4);
  width: 0%;
  transition: width 0.35s ease;
}
.mgp-label {
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.03em;
}

/* New deck form — live status strip */
.new-deck-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 2px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
}
.nd-sep { color: var(--border-strong); }
.nd-stat { color: var(--text-dim); }
.nd-has-cmdr { color: var(--p3); font-weight: 600; }
.nd-no-cmdr  { color: var(--p1); }

/* Deck row — scoring/greyed state */
.my-deck-row--scoring {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}
.my-deck-row--scoring:hover { background: inherit; }
.mdb-scoring {
  display: flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(124,142,248,0.10);
  border: 1px solid rgba(124,142,248,0.25);
}

/* My Decks sort select */
.decks-sort-select {
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev-2);
  color: var(--text-dim);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235a5170'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
.decks-sort-select:focus { border-color: var(--accent); outline: none; }
.decks-sort-select option { background: var(--bg-elev); }

/* Deck price chip in action bar */
.md-deck-price {
  font-size: 13px;
  font-weight: 600;
  color: #4fc2a7;
  padding: 5px 10px;
  background: rgba(79,194,167,0.10);
  border: 1px solid rgba(79,194,167,0.25);
  border-radius: 6px;
  letter-spacing: 0.02em;
}

/* Past Matches sub-sections (Deep / Sim) */
.md-history-subsection {
  margin-bottom: 8px;
}
.md-history-subsection-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 6px 0 4px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.md-history-subsection-label::-webkit-details-marker { display: none; }

/* My Decks header — filter icon + dropdown */
.my-decks-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Equal height for all header buttons */
.my-decks-header-actions .accent-btn,
.my-decks-header-actions .ghost-btn {
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.decks-sort-wrap { position: relative; }

.decks-sort-btn {
  width: 38px;
  padding: 0;
  border-radius: 8px;
}
.decks-sort-btn svg { display: block; }
/* Highlight when non-default sort is active */
.decks-sort-active {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

.decks-sort-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
  z-index: 50;
  min-width: 130px;
  overflow: hidden;
  padding: 4px 0;
}
.decks-sort-dropdown[hidden] { display: none !important; }

.dsd-item {
  display: block;
  width: 100%;
  padding: 9px 16px;
  text-align: left;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-dim);
  background: none;
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.dsd-item:hover { background: var(--bg-elev-2); color: var(--text); }
.dsd-active { color: var(--p4) !important; font-weight: 600; }

/* Deck price — inside the main card (moved from action bar) */
.md-deck-price {
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #4fc2a7;
  background: rgba(79,194,167,0.10);
  border: 1px solid rgba(79,194,167,0.25);
  border-radius: 6px;
  padding: 3px 10px;
  margin: 6px 0 4px;
}

/* =============================================================================
   DECK EDITOR
   ============================================================================= */

/* Save row */
.md-save-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

/* Card row in edit mode */
.card-row-edit {
  justify-content: flex-start;
  gap: 6px;
  padding: 4px 0;
}
.card-row-edit .card-row-pips { min-width: 44px; }
.card-row-edit .card-row-name { flex: 1; }
.card-row-price {
  font-size: 13px;
  font-weight: 700;
  color: #4fc2a7;
  min-width: 52px;
  text-align: right;
}
.card-row-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* Edit action buttons per card row */
.cer-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 500;
  padding: 2px 7px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.cer-btn:hover { background: rgba(255,255,255,0.10); color: var(--text); }
.cer-btn:disabled,
.cer-btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  background: rgba(255,255,255,0.02);
  color: var(--text-dim);
  pointer-events: none;
}
.cer-btn:disabled:hover,
.cer-btn[disabled]:hover {
  background: rgba(255,255,255,0.02);
  color: var(--text-dim);
}
/* Override variant-specific color/border so disabled state always reads as muted.
   Selector lists both :disabled (IDL) and [disabled] (attribute) explicitly,
   and stacks the class twice (.cer-btn.cer-btn) to beat any rule using just
   .cer-discard or .cer-oracle with !important. */
.cer-btn.cer-btn[disabled],
.cer-btn.cer-btn:disabled,
.cer-btn.cer-oracle[disabled],
.cer-btn.cer-oracle:disabled,
.cer-btn.cer-discard[disabled],
.cer-btn.cer-discard:disabled,
#md-save-btn[disabled],
#md-save-btn:disabled,
#md-discard-btn[disabled],
#md-discard-btn:disabled,
#md-undo-btn[disabled],
#md-undo-btn:disabled {
  color: var(--text-dim) !important;
  border-color: rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.02) !important;
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}
.cer-delete:hover { color: var(--p1); border-color: var(--p1); }
.cer-oracle  { color: var(--accent); border-color: rgba(124,142,248,0.3); }
.cer-oracle:hover { background: rgba(124,142,248,0.12); color: var(--text-bright); }
.cer-oracle-swap { margin-top: 4px; }

/* Undo button — when there's something to undo, highlight it so the user
   notices the action is available. */
#md-undo-btn:not(:disabled) {
  color: var(--accent);
  border-color: rgba(124, 142, 248, 0.55);
  background: rgba(124, 142, 248, 0.10);
}
#md-undo-btn:not(:disabled):hover {
  background: rgba(124, 142, 248, 0.22);
  color: var(--text-bright);
  border-color: rgba(124, 142, 248, 0.80);
}

/* Edit toggle active state */
.edit-active { color: var(--accent); border-color: var(--accent); }

/* Oracle panel */
.oracle-panel {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(124, 95, 240, 0.08) 0%, transparent 65%),
    radial-gradient(ellipse 80% 60% at 30% 30%, rgba(165, 75, 255, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 70%, rgba(60, 130, 255, 0.09) 0%, transparent 60%),
    linear-gradient(135deg, rgba(26, 20, 85, 0.45) 0%, rgba(10, 7, 50, 0.55) 50%, rgba(3, 2, 26, 0.60) 100%);
  border: 1px solid rgba(124, 95, 240, 0.30);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 4px 0 8px;
  font-size: 13px;
}
/* Twinkling starfield — same animation as Oracle's Prophecy */
.oracle-panel::after {
  content: '';
  position: absolute;
  inset: -10%;
  pointer-events: none;
  z-index: 0;
  background:
    /* Bright stars */
    radial-gradient(2.5px 2.5px at 8% 22%,  rgba(255,255,255,1.00), transparent 65%),
    radial-gradient(2.5px 2.5px at 22% 78%, rgba(255,255,255,1.00), transparent 65%),
    radial-gradient(2.5px 2.5px at 41% 14%, rgba(255,255,255,0.95), transparent 65%),
    radial-gradient(2.5px 2.5px at 67% 58%, rgba(245,235,255,0.95), transparent 65%),
    radial-gradient(2.5px 2.5px at 88% 30%, rgba(255,255,255,0.95), transparent 65%),
    radial-gradient(2.5px 2.5px at 92% 84%, rgba(230,240,255,0.95), transparent 65%),
    radial-gradient(2.5px 2.5px at 53% 92%, rgba(255,250,255,0.95), transparent 65%),
    /* Medium stars */
    radial-gradient(1.8px 1.8px at 14% 48%, rgba(220,230,255,0.85), transparent 60%),
    radial-gradient(1.8px 1.8px at 35% 35%, rgba(230,235,255,0.85), transparent 60%),
    radial-gradient(1.8px 1.8px at 47% 65%, rgba(220,235,255,0.85), transparent 60%),
    radial-gradient(1.8px 1.8px at 60% 8%,  rgba(220,230,255,0.85), transparent 60%),
    radial-gradient(1.8px 1.8px at 78% 70%, rgba(230,240,255,0.85), transparent 60%),
    radial-gradient(1.8px 1.8px at 81% 12%, rgba(220,230,255,0.85), transparent 60%),
    radial-gradient(1.8px 1.8px at 28% 88%, rgba(220,225,255,0.80), transparent 60%),
    /* Dim background stars */
    radial-gradient(1.2px 1.2px at  4% 65%, rgba(210,220,255,0.65), transparent 60%),
    radial-gradient(1.2px 1.2px at 19% 6%,  rgba(220,230,255,0.65), transparent 60%),
    radial-gradient(1.2px 1.2px at 32% 52%, rgba(210,225,255,0.65), transparent 60%),
    radial-gradient(1.2px 1.2px at 55% 38%, rgba(220,230,255,0.65), transparent 60%),
    radial-gradient(1.2px 1.2px at 70% 26%, rgba(210,225,255,0.65), transparent 60%),
    radial-gradient(1.2px 1.2px at 96% 56%, rgba(220,230,255,0.65), transparent 60%);
  animation: seer-twinkle 5s ease-in-out infinite;
}
.oracle-panel > * { position: relative; z-index: 1; }
.oracle-panel-header {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.oracle-suggestion {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-rows: auto auto;
  gap: 2px 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.oracle-suggestion:last-child { border-bottom: none; }
.oracle-suggestion-name {
  font-weight: 600;
  color: var(--text-bright);
  cursor: default;
  grid-column: 1;
  grid-row: 1;
}
/* Price sits directly to the LEFT of the Swap button (both span both rows
   and are vertically centred), so the price the user is about to pay is
   the last thing they see before clicking Swap. */
.oracle-suggestion-price {
  font-size: 13px;
  font-weight: 700;
  color: #4fc2a7;
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  text-align: right;
  white-space: nowrap;
}
.oracle-suggestion-reason {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  grid-column: 1;
  grid-row: 2;
}
.oracle-suggestion .cer-oracle-swap {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
}

/* Replace modal */
.md-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  padding: 20px;
}
.md-modal {
  background: #16121f;   /* solid — no transparency bleed-through */
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  width: min(92vw, 600px);
  box-shadow: 0 32px 80px rgba(0,0,0,0.85), 0 0 0 1px rgba(124,142,248,0.12);
}
.md-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 17px;
  font-weight: 600;
  color: var(--text-bright);
}
.md-modal-close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
}
.md-modal-close:hover { color: var(--text-bright); background: rgba(255,255,255,0.08); }
.md-modal-body { padding: 20px 24px 24px; }

/* Autocomplete dropdown */
.md-autocomplete {
  position: relative;
}
.md-autocomplete-list {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: #1e1829;
  border: 1px solid rgba(255,255,255,0.15);
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 220px;
  overflow-y: auto;
  z-index: 10;
  list-style: none;
  margin: 0; padding: 4px 0;
}
.md-autocomplete-item {
  padding: 9px 14px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}
.md-autocomplete-item:hover,
.md-autocomplete-item.focused { background: rgba(124,142,248,0.18); color: var(--text-bright); }

.md-replace-input-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.md-replace-input-row input {
  flex: 1;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.28);
  color: var(--text-bright);
  font-size: 15px;
  padding: 11px 14px;
  border-radius: 8px;
}
.md-replace-input-row input::placeholder { color: rgba(255,255,255,0.4); }
.md-replace-input-row input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255,255,255,0.18);
  box-shadow: 0 0 0 3px rgba(124,142,248,0.2);
}

.md-replace-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
}
.md-replace-card-img {
  width: 80px;
  border-radius: 5px;
  flex-shrink: 0;
}
.md-replace-card-info { flex: 1; }
.md-replace-card-name { font-weight: 600; color: var(--text-bright); margin-bottom: 2px; cursor: default; }
.md-replace-card-type { font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
.md-replace-card-price { font-size: 13px; font-weight: 600; color: var(--accent); }

/* Save notice */
.md-save-notice {
  background: rgba(79,194,167,0.12);
  border: 1px solid rgba(79,194,167,0.3);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--p4);
  margin: 8px 0;
}

/* Builds popup — centered floating panel (like the Replace popup) so it
   never gets cut off by a collapsed deck-detail section below. Width
   matches Replace so the two surfaces feel like the same workbench. */
.md-version-dropdown {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  width: min(960px, 94vw);
  /* No fixed height — the box grows with the number of saved builds and
     caps at 86vh, then the body scrolls. With a single Baseline row
     there's no empty purple space below it. */
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg,
              rgba(36, 24, 70, 0.98) 0%,
              rgba(22, 14, 46, 0.98) 100%);
  border: 1px solid rgba(196, 168, 255, 0.45);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55),
              0 0 0 1px rgba(196, 168, 255, 0.10);
  padding: 0;
  overflow: hidden;
}
.md-version-dropdown.md-version-empty {
  padding: 22px 24px;
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
}
.md-builds-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px 10px;
  border-bottom: 1px solid rgba(177, 150, 246, 0.20);
  flex-shrink: 0;
}
.md-builds-popup-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: rgba(231, 220, 255, 0.95);
  letter-spacing: 0.02em;
}
.md-builds-popup-close {
  background: transparent;
  border: 1px solid rgba(177, 150, 246, 0.30);
  color: rgba(231, 220, 255, 0.85);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.md-builds-popup-close:hover {
  background: rgba(177, 150, 246, 0.15);
  color: #fff;
}
.md-builds-popup-body {
  overflow-y: auto;
  /* Let the body collapse to content height — one Baseline row no longer
     leaves a tall purple void below. Still scrolls when the build list
     pushes past the popup's 86vh cap. */
  flex: 0 1 auto;
  padding: 4px 0;
}
/* Grid columns shared by the header row and every body row so labels and
   values line up. Compare checkbox + trash stay narrow on the right. */
.ver-header-row,
.ver-row {
  display: grid;
  grid-template-columns:
    minmax(150px, 1.4fr)   /* timestamp */
    minmax(110px, 1fr)     /* name */
    44px                   /* score badge */
    88px                   /* restore button */
    72px                   /* compare checkbox */
    44px;                  /* trash */
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
}
.ver-header-row {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 0.70);
  border-bottom: 1px solid rgba(177, 150, 246, 0.20);
  padding-top: 10px;
  padding-bottom: 10px;
}
.ver-header-row .ver-col-compare,
.ver-header-row .ver-col-restore,
.ver-header-row .ver-col-trash,
.ver-header-row .ver-col-score { text-align: center; }
.ver-row { border-bottom: 1px solid rgba(255,255,255,0.05); }
.ver-row:last-of-type { border-bottom: none; }
.ver-time { font-size: 12px; color: var(--text-dim); }
.ver-name { font-size: 13px; color: var(--text); font-weight: 600; }
.ver-col-compare { display: flex; justify-content: center; }
.ver-col-restore { display: flex; justify-content: center; }
.ver-col-trash   { display: flex; justify-content: center; }
.ver-col-score   { display: flex; justify-content: center; }
.ver-compare-check {
  width: 16px; height: 16px;
  accent-color: #b196f6;
  cursor: pointer;
}
/* "Current" pseudo-row — purple accent, italic label so it reads as
   transient. Restore/Delete already disabled in markup. */
.ver-row-current {
  background: linear-gradient(90deg,
    rgba(116, 200, 130, 0.12) 0%,
    rgba(116, 200, 130, 0.04) 100%);
  border-top: 1px solid rgba(116, 200, 130, 0.30);
  border-bottom: none;
}
.ver-row-current .ver-name  { color: #74c882; font-style: italic; }
.ver-row-current .ver-time  { color: #9bd6a1; font-style: italic; }
.ver-row-current .ver-score { color: #74c882; }
/* Compare action row — Compare button right-aligned, no panel background.
   The gray hint stripe is gone; the disabled state of the button does the
   communicating instead. */
.ver-compare-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 16px 4px;
}
.ver-compare-btn {
  font-size: 12px;
  padding: 6px 18px;
}
.ver-compare-btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Moxfield compare row — simple inline row, no panel background. */
.ver-moxfield-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 12px;
}
.ver-moxfield-label {
  font-size: 12px;
  color: rgba(196, 181, 253, 0.85);
  letter-spacing: 0.02em;
  flex-shrink: 0;
  font-weight: 600;
}
.ver-moxfield-input {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(8, 6, 22, 0.65);
  border: 1px solid rgba(177, 150, 246, 0.25);
  color: var(--text);
}
.ver-moxfield-input:focus {
  outline: none;
  border-color: rgba(124, 142, 248, 0.65);
  background: rgba(8, 6, 22, 0.85);
}
.ver-moxfield-btn {
  font-size: 12px;
  padding: 6px 18px;
  flex-shrink: 0;
}
.ver-moxfield-btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
.ver-moxfield-err {
  margin: 4px 16px 12px;
  padding: 6px 10px;
  background: rgba(40, 14, 14, 0.55);
  color: #ffb8b8;
  font-size: 11px;
  border-radius: 6px;
  border: 1px solid rgba(217, 122, 108, 0.35);
}
/* Compare modal — two-column add/remove + changed list. Reuses the
   .md-replace-popup shell so the header/close styling matches.
   Vertically dynamic: overrides the parent's fixed 720px height so the
   box shrinks to fit small diffs and grows (up to 88vh, then scrolls)
   for large ones. Centering survives because translate(-50%, -50%) on
   the parent shell is content-agnostic. */
.vcm-popup {
  height: auto;
  max-height: 88vh;
}
.vcm-popup .md-replace-popup-title { gap: 6px 10px; }
.vcm-popup .vcm-title-name {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--text-bright, #fff);
}
.vcm-body { padding: 4px 4px 12px; }
/* One-line summary at the top of the compare modal so the user can read
   the diff at a glance without counting column entries. */
.vcm-summary-line {
  font-size: 13px;
  color: rgba(231, 220, 255, 0.85);
  margin-bottom: 12px;
  padding: 8px 12px;
  background: rgba(20, 14, 38, 0.45);
  border-radius: 8px;
}
.vcm-summary-stat { font-weight: 700; margin: 0 4px; }
.vcm-summary-added   { color: #74c882; }
.vcm-summary-removed { color: #f29a8a; }
.vcm-summary-changed { color: #d4a840; }
/* Yellow warning banner when Baseline is suspiciously empty — points the
   user at the Re-stamp button so they can recover. */
.vcm-warning {
  font-size: 13px;
  color: #f2dfa6;
  background: rgba(212, 168, 64, 0.10);
  border: 1px solid rgba(212, 168, 64, 0.35);
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 12px;
}
/* Re-stamp link button on the Baseline row in the version panel. */
.ver-restamp-btn {
  background: rgba(242, 194, 91, 0.12);
  border: 1px solid rgba(242, 194, 91, 0.35);
  color: #f2dfa6;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  margin-left: 8px;
  border-radius: 6px;
  cursor: pointer;
  vertical-align: middle;
}
.ver-restamp-btn:hover {
  background: rgba(242, 194, 91, 0.22);
  color: #ffe7a8;
}
.vcm-score-line {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 12px;
  border-radius: 8px;
  background: rgba(20, 14, 38, 0.55);
  border: 1px solid rgba(177, 150, 246, 0.25);
  font-size: 13px;
  color: rgba(231, 220, 255, 0.90);
}
.vcm-score-line strong { margin-left: 6px; }
.vcm-score-up   strong { color: #74c8b2; }
.vcm-score-dn   strong { color: #f29a8a; }
.vcm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.vcm-col {
  background: rgba(20, 14, 38, 0.45);
  border: 1px solid rgba(177, 150, 246, 0.20);
  border-radius: 10px;
  padding: 10px 12px;
  min-height: 60px;
}
.vcm-col-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.vcm-head-removed { color: #f29a8a; }
.vcm-head-added   { color: #9bd6a1; }
.vcm-head-changed { color: #d4a840; }
.vcm-count {
  background: rgba(255,255,255,0.06);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
}
.vcm-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  font-size: 13px;
}
.vcm-qty {
  color: var(--text-faint);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vcm-name { color: var(--text); cursor: help; }
.vcm-empty { font-size: 12px; color: var(--text-faint); font-style: italic; }
.vcm-no-changes {
  text-align: center;
  padding: 24px 12px;
  color: var(--text-dim);
  font-style: italic;
}
.vcm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(177, 150, 246, 0.20);
}
.vcm-action-btn { font-size: 12px; padding: 6px 14px; }
@media (max-width: 700px) {
  .vcm-grid { grid-template-columns: 1fr; }
}
.ver-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: none;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--text-dim);
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.ver-icon:hover:not(:disabled) {
  background: rgba(255,255,255,0.06);
  color: var(--text-bright);
  border-color: rgba(255,255,255,0.10);
}
.ver-icon:disabled { opacity: 0.30; cursor: not-allowed; }
.ver-star-on { color: #f2c25b; }
.ver-trash:hover:not(:disabled) {
  color: #ff8090;
  border-color: rgba(220, 80, 110, 0.45);
  background: rgba(220, 80, 110, 0.10);
}
/* Baseline rows: gold accent + slight tint */
.ver-row-baseline {
  background: linear-gradient(90deg,
    rgba(242, 194, 91, 0.10) 0%,
    rgba(242, 194, 91, 0.04) 100%);
  border-bottom: 1px solid rgba(242, 194, 91, 0.18);
}
.ver-row-baseline .ver-time { color: #f2dfa6; }
.ver-row-baseline .ver-restore-btn {
  border-color: rgba(242, 194, 91, 0.55);
  color: #ffe7a8;
}

/* Cards summary with inline Edit/Save controls */
.md-cards-summary {
  /* 3-column grid: title left, action bloc truly centred independent of
     the title's length, price chip on the far right. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  /* Defensive: own the hit-zone explicitly so neither the sticky hero
     above nor a decorative ::before/::after on a sibling section can
     hover over the summary and swallow clicks / suppress the pointer
     cursor. The previous symptom was the cursor staying as an arrow and
     the click not toggling the details until the user expanded some
     other section (which triggered a reflow that incidentally cleared
     the overlap). z-index needs the summary to be a stacking context,
     hence position: relative. */
  position: relative;
  z-index: 5;
  cursor: pointer;
}
/* Make sure the bare grid cells (left of title, between blocs, right of
   price chip) all show the pointer cursor too — without this rule, hover
   over the title span's empty trailing whitespace inherited the default
   cursor from the parent grid cell, which the user reported as the bug. */
.md-cards-summary > .md-cards-title { cursor: pointer; }
.md-cards-summary::after,
.md-cards-summary::-webkit-details-marker { display: none; }
.md-cards-title { justify-self: start; }
.md-cards-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.md-cards-actions-center { justify-self: center; }
.md-cards-actions-right  { justify-self: end; gap: 6px; }
.md-cards-actions .md-deck-price {
  font-size: 12px;
  padding: 2px 8px;
}
/* Unify sizing for every button in the cards toolbar so Versions / Export
   / Undo / Save / Reset / Done all read as one row of pills. */
.md-cards-actions .cer-btn {
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  min-width: 72px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1;
}
/* Edit toggle — same look as the EDIT MODE pill (diagonal blue gradient,
   light inner ring, soft outer glow, dark text shadow). Keeps the
   existing rounded-rect shape of .cer-btn rather than going full pill. */
#md-edit-toggle {
  background: linear-gradient(135deg, #4f7af0 0%, #2f5fd0 60%, #234aa8 100%) !important;
  border: 1px solid rgba(90, 130, 245, 0.85) !important;
  color: #eef3ff !important;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(170, 195, 255, 0.20) inset,
              0 2px 8px rgba(60, 100, 230, 0.35);
  text-shadow: 0 1px 0 rgba(20, 30, 70, 0.45);
}
#md-edit-toggle:hover {
  background: linear-gradient(135deg, #5e88f6 0%, #3a6ce0 60%, #2a55b8 100%) !important;
  border-color: rgba(120, 155, 255, 0.95) !important;
  box-shadow: 0 0 0 1px rgba(190, 210, 255, 0.25) inset,
              0 3px 12px rgba(80, 120, 240, 0.50);
}
/* While in edit mode, dim it back so it reads as the "exit" affordance
   rather than the prominent CTA the resting state is. */
#md-edit-toggle.edit-active {
  background: rgba(47, 95, 208, 0.28) !important;
  border: 1px solid rgba(70, 120, 240, 0.65) !important;
  color: #cdddff !important;
  box-shadow: none;
  text-shadow: none;
}

/* ── Edit mode panel treatment ───────────────────────────────────────────────
   When the Cards section enters edit mode, the entire box shifts to a deep
   rich blue gradient so the user can see at a glance they're in a different
   state. The accent border + soft glow reinforce it. */
#md-cards-details.is-edit-mode {
  background: linear-gradient(180deg,
              rgba(70, 110, 240, 0.22) 0%,
              rgba(46, 78, 200, 0.16) 45%,
              rgba(24, 40, 110, 0.16) 100%);
  border-color: rgba(80, 120, 240, 0.70) !important;
  box-shadow: 0 0 0 1px rgba(80, 120, 240, 0.30),
              0 10px 36px rgba(60, 100, 230, 0.20);
}
/* Inline EDIT MODE pill sitting next to the "Cards 100" title.
   Class-driven visibility (was [hidden]-driven): the explicit display
   below outranks the user-agent's [hidden] { display:none }, so the pill
   leaked into view even after the hidden attribute was set. Now the pill
   is hidden by default and only revealed when its ancestor <details> has
   .is-edit-mode (set by _enterEditMode). */
.md-edit-pill {
  display: none;
  align-items: center;
  margin-left: 10px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #eef3ff;
  background: linear-gradient(135deg, #4f7af0 0%, #2f5fd0 60%, #234aa8 100%);
  border: 1px solid rgba(90, 130, 245, 0.85);
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(170, 195, 255, 0.20) inset,
              0 2px 8px rgba(60, 100, 230, 0.35);
  text-shadow: 0 1px 0 rgba(20, 30, 70, 0.45);
  vertical-align: middle;
}
.is-edit-mode .md-edit-pill { display: inline-flex; }
.md-export-wrap {
  position: relative;
}
.md-export-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--panel-bg, #1a1830);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  min-width: 180px;
  z-index: 200;
  overflow: hidden;
}
.md-export-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text);
  background: none;
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.md-export-item:hover { background: rgba(255,255,255,0.07); }

.md-export-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 4px 0;
}
/* Buy buttons get a subtle teal-green tint to signal external action. */
.md-export-buy { color: rgba(79,194,167,0.95); }
.md-export-buy:hover { background: rgba(79,194,167,0.10); }

/* Gauntlet button pulse after deck save */
.md-gauntlet-needs-run {
  animation: gauntlet-pulse 1.8s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(216,121,91,0.7);
}
@keyframes gauntlet-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(216,121,91,0.7); }
  50%  { box-shadow: 0 0 0 8px rgba(216,121,91,0); }
  100% { box-shadow: 0 0 0 0 rgba(216,121,91,0); }
}

/* Saved prompt in header block */
.md-saved-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  gap: 10px;
}
.md-saved-price {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: #4fc2a7;
}
.md-saved-msg {
  font-size: 14px;
  color: var(--text-dim);
  text-align: center;
}

/* =========================================================================
   Notification History Panel
   ========================================================================= */

.notif-wrap { position: relative; display: inline-flex; align-items: center; }

.notif-btn {
  position: relative;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.notif-btn:hover { color: var(--text); border-color: var(--text-dim); background: rgba(255,255,255,0.04); }

/* What's New star glow when there are unseen entries. Clears once the
   dropdown is opened (the click handler stamps WHATSNEW_SEEN_KEY and calls
   _whatsNewSyncBadge, which removes .has-new). */
#whatsnew-btn.has-new {
  color: #f4c542;
  border-color: rgba(244, 197, 66, 0.5);
  animation: whatsnew-pulse 2s ease-in-out infinite;
}
#whatsnew-btn.has-new svg {
  filter: drop-shadow(0 0 4px rgba(244, 197, 66, 0.85))
          drop-shadow(0 0 10px rgba(244, 197, 66, 0.45));
}
@keyframes whatsnew-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 197, 66, 0.0); }
  50%      { box-shadow: 0 0 12px 2px rgba(244, 197, 66, 0.35); }
}

.notif-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--p1);
  color: var(--btn-text-dark);
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.notif-badge[hidden] { display: none !important; }

.notif-dropdown {
  position: fixed;
  top: 72px;        /* below the two-row topbar */
  right: 12px;
  width: 570px;     /* 456 × 1.25 — another 25% wider (now 50% over original 380px) */
  max-height: 520px;
  overflow-y: auto;
  background: #16121f;   /* solid, matches modal */
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  z-index: 200;
  padding: 6px 0;
}
.notif-dropdown[hidden] { display: none !important; }

.notif-header {
  padding: 8px 14px 6px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

/* ── What's new dropdown ──────────────────────────────────────────────── */
.whatsnew-dropdown { width: 320px; max-height: 480px; }
.wn-date-group {
  padding: 8px 0 4px;
  border-bottom: 1px solid var(--border);
}
.wn-date-group:last-child { border-bottom: none; }
.wn-date-label {
  padding: 0 14px 4px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
}
.wn-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 14px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
}
.wn-type {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  min-width: 54px;
  text-align: center;
  margin-top: 2px;
}
.wn-type-added   { background: rgba(121,194,201,0.14); color: var(--success); border: 1px solid rgba(121,194,201,0.32); }
.wn-type-updated { background: rgba(124,142,248,0.14); color: var(--accent);  border: 1px solid rgba(124,142,248,0.32); }
.wn-type-fixed   { background: rgba(226,196,122,0.14); color: var(--warning); border: 1px solid rgba(226,196,122,0.32); }
.wn-summary { flex: 1; }

.notif-loading, .notif-empty {
  padding: 16px 14px;
  font-size: 13px;
  color: var(--text-faint);
  display: flex; align-items: center; gap: 10px;
}

.notif-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 12px;
  transition: background var(--transition-fast);
}
.notif-row-click { cursor: pointer; }
.notif-row-click:hover { background: rgba(212,168,64,0.12); }
.notif-row-new { background: rgba(226,196,122,0.05); }
.notif-row-new:hover { background: rgba(226,196,122,0.10); }

.notif-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.notif-dot-done { background: #d4a840; }          /* light gold */
.notif-dot-run  { background: var(--accent); animation: spin 0.9s linear infinite; }
.notif-dot-err  { background: var(--p1); }

.notif-row-body {
  display: flex; align-items: baseline; gap: 7px; min-width: 0; flex: 1;
}
.notif-type-chip {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: rgba(255,255,255,0.06);
  padding: 1px 6px;
  border-radius: 4px;
}
.notif-names {
  color: var(--text);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notif-date {
  color: var(--text-faint);
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Notification panel additions — live jobs + section labels */
.notif-section-label {
  padding: 6px 14px 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.notif-row-live { opacity: 0.85; }
.notif-dot-spin {
  width: 7px; height: 7px; border-radius: 50%;
  border: 2px solid rgba(124,142,248,0.3);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}
.notif-view-btn {
  font-size: 11px;
  font-weight: 600;
  color: var(--p4);
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(226,196,122,0.12);
  border: 1px solid rgba(226,196,122,0.30);
  flex-shrink: 0;
}
.notif-dismiss-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 5px;
  border-radius: 3px;
  color: var(--text-muted, #666);
  opacity: 0.4;
  transition: opacity var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
  margin-left: 2px;
  line-height: 1;
}
.notif-dismiss-btn:hover {
  opacity: 1;
  color: #6bbf6b;
}
/* Red × button — server-side delete from history. Sits next to the
   green ✓ "mark as read" button so users see read vs. delete clearly. */
.notif-delete-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 5px;
  border-radius: 3px;
  color: var(--text-muted, #666);
  opacity: 0.4;
  transition: opacity var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
  margin-left: 1px;
  line-height: 1;
}
.notif-delete-btn:hover {
  opacity: 1;
  color: #ef4444;          /* red */
}

/* =============================================================================
   THE SEER
   ============================================================================= */


/* ── Oracle's Prophecy section ───────────────────────────────────────────── */
/* === Seer's vision: cosmic void background ===
   Transparent so the page tint shows through; 60-star field across three
   size tiers with a slow-breathing nebula layered behind. */
.md-seer-outer {
  position: relative;
  overflow: hidden;
  background:
    /* Very faint focal glow at centre — the seer's gaze */
    radial-gradient(ellipse 55% 45% at 50% 50%, rgba(124, 95, 240, 0.06) 0%, transparent 65%),
    /* Very translucent void — heavy page-tint bleed-through */
    radial-gradient(ellipse 130% 100% at 50% 50%, rgba(26, 20, 85, 0.22) 0%, rgba(10, 7, 50, 0.30) 50%, rgba(3, 2, 26, 0.38) 100%);
}

/* Nebula clouds — softer now so content above reads cleanly. */
.md-seer-outer::before {
  content: '';
  position: absolute;
  inset: -40%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 55% at 28% 35%, rgba(165,  75, 255, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 75% 65%, rgba( 60, 130, 255, 0.09) 0%, transparent 60%),
    radial-gradient(ellipse 55% 60% at 55% 12%, rgba(130,  50, 230, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 45% at 12% 80%, rgba(200,  80, 220, 0.07) 0%, transparent 60%),
    radial-gradient(ellipse 65% 40% at 90% 25%, rgba( 80,  60, 230, 0.08) 0%, transparent 60%),
    /* Dark, dark blue pools — deep cobalt / midnight, adds depth */
    radial-gradient(ellipse 75% 55% at 45% 75%, rgba(  6,  12,  60, 0.32) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 82%  8%, rgba(  4,   8,  48, 0.30) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at  8% 45%, rgba(  3,   6,  40, 0.28) 0%, transparent 60%);
  filter: blur(10px);
  animation: seer-nebula 28s ease-in-out infinite alternate;
}

/* Starfield — 60 stars across three size tiers, drift + 4-step twinkle. */
.md-seer-outer::after {
  content: '';
  position: absolute;
  inset: -10%;
  pointer-events: none;
  z-index: 0;
  background:
    /* TIER A — bright foreground (18 stars, 2.5–3.5px) */
    radial-gradient(3px   3px   at 11% 23%, rgba(255,255,255,1.00), transparent 65%),
    radial-gradient(3.5px 3.5px at 47% 17%, rgba(255,255,255,1.00), transparent 65%),
    radial-gradient(3.5px 3.5px at 19% 88%, rgba(255,255,255,1.00), transparent 65%),
    radial-gradient(3.5px 3.5px at 86% 92%, rgba(255,255,255,1.00), transparent 65%),
    radial-gradient(3px   3px   at 78% 41%, rgba(255,255,255,0.95), transparent 65%),
    radial-gradient(3px   3px   at 35% 38%, rgba(230,240,255,0.95), transparent 65%),
    radial-gradient(3px   3px   at 71%  9%, rgba(220,230,255,0.95), transparent 65%),
    radial-gradient(3px   3px   at 63% 60%, rgba(245,235,255,0.95), transparent 65%),
    radial-gradient(3px   3px   at  9% 51%, rgba(220,225,255,0.90), transparent 65%),
    radial-gradient(3.5px 3.5px at 24% 11%, rgba(255,255,255,1.00), transparent 65%),
    radial-gradient(3px   3px   at 41% 73%, rgba(255,250,240,0.95), transparent 65%),
    radial-gradient(3.5px 3.5px at 56% 31%, rgba(255,255,255,1.00), transparent 65%),
    radial-gradient(3px   3px   at 67% 87%, rgba(240,235,255,0.95), transparent 65%),
    radial-gradient(3px   3px   at 88% 53%, rgba(255,255,255,0.95), transparent 65%),
    radial-gradient(3.5px 3.5px at  3% 75%, rgba(255,255,255,1.00), transparent 65%),
    radial-gradient(3px   3px   at 38% 96%, rgba(255,250,255,0.95), transparent 65%),
    radial-gradient(3px   3px   at 52% 48%, rgba(245,240,255,0.95), transparent 65%),
    radial-gradient(3px   3px   at 96% 15%, rgba(255,255,255,0.95), transparent 65%),
    /* TIER B — mid (22 stars, 1.8–2.2px) */
    radial-gradient(2px 2px at 29% 64%, rgba(220,235,255,0.85), transparent 60%),
    radial-gradient(2px 2px at 92% 73%, rgba(220,235,255,0.85), transparent 60%),
    radial-gradient(2px 2px at 54% 56%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(2px 2px at  6% 45%, rgba(210,225,255,0.85), transparent 60%),
    radial-gradient(2px 2px at 27% 14%, rgba(220,230,255,0.85), transparent 60%),
    radial-gradient(2px 2px at 44% 79%, rgba(200,215,255,0.85), transparent 60%),
    radial-gradient(2px 2px at 67% 28%, rgba(230,235,255,0.85), transparent 60%),
    radial-gradient(2px 2px at 81% 66%, rgba(220,225,255,0.85), transparent 60%),
    radial-gradient(2.2px 2.2px at 16% 35%, rgba(230,240,255,0.85), transparent 60%),
    radial-gradient(2px 2px at 32% 55%, rgba(220,230,255,0.80), transparent 60%),
    radial-gradient(2px 2px at 49% 88%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(2.2px 2.2px at 58% 19%, rgba(220,230,255,0.85), transparent 60%),
    radial-gradient(2px 2px at 74% 80%, rgba(210,225,255,0.80), transparent 60%),
    radial-gradient(2px 2px at 83% 25%, rgba(230,235,255,0.85), transparent 60%),
    radial-gradient(2px 2px at 95% 41%, rgba(220,230,255,0.85), transparent 60%),
    radial-gradient(2px 2px at 12% 65%, rgba(210,225,255,0.80), transparent 60%),
    radial-gradient(2.2px 2.2px at 36% 24%, rgba(230,240,255,0.85), transparent 60%),
    radial-gradient(2px 2px at 50% 6%, rgba(220,230,255,0.85), transparent 60%),
    radial-gradient(2px 2px at 61% 47%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(2px 2px at 75% 13%, rgba(220,235,255,0.85), transparent 60%),
    radial-gradient(2.2px 2.2px at 86% 79%, rgba(230,240,255,0.85), transparent 60%),
    radial-gradient(2px 2px at 21% 49%, rgba(220,230,255,0.85), transparent 60%),
    /* TIER C — dim background (20 stars, 1.4–1.6px) */
    radial-gradient(1.5px 1.5px at  4% 12%, rgba(220,230,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 22% 37%, rgba(210,220,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 38% 91%, rgba(220,235,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 52%  4%, rgba(210,220,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 75% 51%, rgba(220,230,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 36%, rgba(210,225,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 14% 73%, rgba(220,230,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 33% 27%, rgba(210,220,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 49% 47%, rgba(220,230,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 61% 82%, rgba(210,225,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 73% 19%, rgba(220,230,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 95% 58%, rgba(210,225,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at  7% 28%, rgba(220,230,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 18% 91%, rgba(210,220,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 43% 33%, rgba(220,230,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 57% 71%, rgba(210,225,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 69% 41%, rgba(220,230,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 80% 7%, rgba(210,225,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 91% 87%, rgba(220,230,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at  2% 62%, rgba(210,225,255,0.65), transparent 60%);
  animation: seer-twinkle 5s ease-in-out infinite;
}

/* === Keyframes === */
@keyframes seer-nebula {
  0%   { transform: translate(0, 0)    rotate(0deg)  scale(1);    }
  50%  { transform: translate(3%, -2%) rotate(6deg)  scale(1.08); }
  100% { transform: translate(-2%, 3%) rotate(-4deg) scale(0.95); }
}
@keyframes seer-twinkle {
  0%, 100% { opacity: 1;   }
  50%      { opacity: 0.3; }
}

/* All content must sit above the cosmic backdrop */
.md-seer-outer > * { position: relative; z-index: 1; }

.seer-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  cursor: pointer;
}

/* Right-side actions group: New Path + chevron */
.seer-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Collapse toggle — chevron only, no title text */
.seer-title-btn {
  background: none;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  line-height: 1;
}
.seer-title {
  /* Matches .my-deck-details-summary text — same as DECK ANALYSIS,
     SIMULATION SCORE, CARDS, MATCH INSTRUCTIONS, PAST MATCHES. */
  font-family: var(--font-body), "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.seer-chevron {
  font-size: 13px;
  color: #4fc2a7;
  opacity: 0.7;
  transition: transform 0.2s ease;
  display: inline-block;
}
.seer-collapsed .seer-chevron { transform: rotate(-90deg); }

/* Collapsed state */
.seer-collapsed #md-seer-content {
  display: none;
}

.seer-newpath-btn {
  font-size: 12px;
}

/* Prose paragraphs */
.seer-prose {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text);
  margin: 0;
}
/* Lists inside prose sections */
.seer-prose ul {
  margin: 6px 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.seer-prose li {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text);
}
/* Paragraphs inside a seer-prose div */
.seer-prose p { margin: 0 0 6px; }

/* Swap cards */
.seer-swaps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.seer-swap {
  background: linear-gradient(160deg, rgba(124,142,248,0.10), rgba(226,196,122,0.06));
  border: 1px solid rgba(124,142,248,0.28);
  border-radius: 10px;
  padding: 14px 16px;
  transition: border-color var(--transition-fast);
}
.seer-swap:hover { border-color: rgba(212,168,64,0.25); }
.seer-swap-confirmed { border-color: rgba(79,194,167,0.4); opacity: 0.7; }

.seer-swap-body {
  display: flex;
  align-items: center;
  gap: 16px;
}
.seer-swap-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.seer-swap-names {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.seer-swap-right {
  display: flex;
  flex-direction: row;   /* price left, confirm right */
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.seer-from {
  font-weight: 600;
  color: var(--text-bright);   /* white, same as to_card */
  cursor: default;
}
.seer-arrow {
  color: #4fc2a7;
  font-size: 16px;
  flex-shrink: 0;
}
.seer-to {
  font-weight: 700;
  color: var(--text-bright);
  cursor: default;
}
.seer-price {
  font-size: 13px;
  font-weight: 700;
  color: #4fc2a7;
}

.seer-reason {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0;
  padding-right: 8px;
}

.seer-confirm-btn {
  font-size: 13px;
  padding: 7px 18px;
  flex-shrink: 0;
}

/* Seer prose paragraphs */
.seer-prose-block {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}


/* ── How to Improve panel ──────────────────────────────────────────────────── */
.seer-improve-panel {
  margin-bottom: 18px;
  padding-top: 2px;
}
.seer-improve-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #818cf8;
  margin-bottom: 10px;
}
.seer-improve-body ul {
  margin: 0;
  padding: 0 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.seer-improve-body li,
.seer-improve-body p {
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

.seer-para {
  padding: 13px 0;
  border-bottom: 1px solid rgba(124, 142, 248, 0.12);
}
.seer-para:first-child { padding-top: 2px; }
.seer-para:last-child  { border-bottom: none; padding-bottom: 4px; }
.seer-para-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4fc2a7;
  margin-bottom: 7px;
}
.admin-decks-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

/* Per-user checkbox sits inside the <summary> next to the user name.
   Stop the click from toggling the <details> open/closed; that's wired
   in JS via stopPropagation(). */
.admin-group-check {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  cursor: pointer;
}
.admin-user-check {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: rgba(124, 142, 248, 0.95);
}
.admin-group-name {
  flex: 1;
}

/* Deck-list header row — Expand/Collapse-all button on the left, the
   selection-scope badge pushed to the right. Single row, vertically
   centered so the badge sits at the same height as the button. */
.admin-decks-listhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}
.admin-decks-listhead .admin-decks-expand-toggle {
  flex: 0 0 auto;
}
.admin-decks-listhead .admin-decks-selrow {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;          /* let the badge truncate before wrapping */
}
/* Standalone fallback — kept in case the selrow is rendered outside
   the listhead (e.g. earlier markup or a regression). */
.admin-decks-selrow {
  width: 100%;
}
.admin-decks-selbadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(124, 142, 248, 0.95);
  background: rgba(124, 142, 248, 0.10);
  border: 1px solid rgba(124, 142, 248, 0.35);
  border-radius: 999px;
  padding: 3px 10px 3px 12px;
  letter-spacing: 0.02em;
}
.admin-decks-selbadge-dim {
  color: rgba(255, 255, 255, 0.50);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}
.admin-decks-selclear {
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 2px 8px;
  cursor: pointer;
  border-left: 1px solid rgba(124, 142, 248, 0.40);
  padding-left: 8px;
  margin-left: 4px;
}
.admin-decks-selclear:hover { color: #fff; }

/* Benchmark refresh-all progress bar — benchmark-deck-profile styles removed (redundant with gauntlet tab) */
.admin-bm-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 4px;
}
/* Two-bar layout for Full Scoring (Phase 1 + Phase 2) */
.admin-phase-wrap { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 4px; }
.admin-phase-row  { display: flex; align-items: center; gap: 10px; }
.admin-phase-label {
  font-size: 11px; font-weight: 600; color: var(--text-dim);
  white-space: nowrap; min-width: 130px;
}
.admin-bm-bar-wrap-dim { opacity: 0.45; }
.admin-bm-bar-fill-2   { background: linear-gradient(90deg, var(--p3), var(--p4)); }
.admin-bm-bar-wrap {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
  min-width: 120px;
}
.admin-bm-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--p4));
  border-radius: 3px;
  transition: width 0.3s ease;
}
.admin-bm-bar-label {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.admin-bm-log {
  max-height: 180px;
  overflow-y: auto;
  margin-top: 4px;
  font-size: 11px;
  font-family: monospace;
  color: var(--text-faint);
}
.admin-bm-log-row { padding: 1px 0; }
.admin-bm-log-fail { color: var(--danger, #f87171); }

.sim-deck-note {
  text-align: center;
  font-size: 12px;
  color: var(--text-faint);
  margin: 6px 0 0;
  letter-spacing: 0.02em;
}

/* Match Instructions panel — teal-tinted background to match Deck Analysis */
.md-instructions-details {
  /* same background as .my-deck-section (Cards section) */
  background: linear-gradient(160deg, rgba(124,142,248,0.10), rgba(226,196,122,0.06));
  border-color: rgba(124,142,248,0.28);
  box-shadow: none;
}
.md-instructions-badge {
  font-size: 11px;
  color: var(--p4);
  opacity: 0.85;
  margin-left: 6px;
  vertical-align: middle;
  text-shadow: 0 0 8px rgba(226,196,122,0.5);
}
.md-instructions-hint {
  font-size: 11px;
  color: var(--text-faint);
  font-weight: 400;
  letter-spacing: 0.04em;
  margin-left: 8px;
  opacity: 0.85;
  text-transform: none;
}
.md-instructions-body { padding-top: 4px; }
.md-instructions-desc {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0 0 10px;
}
.md-instructions-textarea {
  width: 100%;
  min-height: 160px;
  max-height: 400px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(124,142,248,0.25);
  border-radius: 8px;
  color: var(--text-bright);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 12px;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color var(--transition-fast);
}
.md-instructions-textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255,255,255,0.07);
}
.md-instructions-textarea::placeholder { color: var(--text-faint); }
.md-instructions-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}
.md-instructions-footer .ghost-btn { font-size: 12px; padding: 6px 12px; }
.md-instructions-footer .primary-btn { font-size: 13px; padding: 7px 18px; }
.md-instructions-status {
  font-size: 12px;
  margin-top: 6px;
  text-align: right;
}
.md-instructions-status.ok  { color: var(--p3); }
.md-instructions-status.err { color: var(--p1); }

.md-seer-instr-btn {
  color: var(--accent);
  border-color: rgba(124,142,248,0.35);
  font-size: 13px;
}
.md-seer-instr-btn:hover {
  background: rgba(124,142,248,0.10);
  border-color: var(--accent);
  color: var(--text-bright);
}

/* Mini deck profile bars on My Decks list rows */
.mdr-metrics {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 40px;
  padding: 0 8px;
  flex-shrink: 0;
}
.mdr-metric-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 20px;
}
.mdr-bar-track {
  width: 8px;
  height: 24px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.mdr-bar-fill {
  width: 100%;
  border-radius: 2px;
  transition: height 0.4s ease;
  opacity: 0.85;
}
.mdr-label {
  font-size: 8px;
  color: var(--text-faint);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
}

/* Score chips — three pills (DECK / MANA / SIM) in the My Decks list row.
   Stability chip removed in bm-cr16.
   Container width: 3 chips × 62px + 2 gaps × 6px = 198px. */
.mdr-score-chips {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* Fixed width so the chips column stays the same on every row. */
  width: 200px;
  flex-shrink: 0;
}
.mdr-score-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 62px;      /* fixed so all three chips are the same size */
  flex-shrink: 0;
  padding: 5px 4px;
  border-radius: 8px;
  background: rgba(20, 14, 38, 0.65);
  border: 1px solid rgba(177, 150, 246, 0.30);
  line-height: 1.05;
}
.mdr-score-chip-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 0.70);
}
.mdr-score-chip-val {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}
/* Per-chip accent rings — matches the donut tones (mint/cream/blue/lavender). */
.mdr-chip-deck { border-color: rgba(116, 200, 178, 0.55); }
.mdr-chip-deck .mdr-score-chip-val { color: #74c8b2; }
.mdr-chip-mana { border-color: rgba(244, 232, 213, 0.55); }
.mdr-chip-mana .mdr-score-chip-val { color: #f4e8d5; }
.mdr-chip-sim  { border-color: rgba(124, 142, 248, 0.55); }
.mdr-chip-sim  .mdr-score-chip-val { color: #9ab1ff; }
.mdr-score-chip--dim .mdr-score-chip-val { color: var(--text-faint); }

/* Simulate button — grey while sim is running */
.simulate-btn.sim-btn-running {
  background: var(--border-strong);
  color: var(--text-faint);
  box-shadow: none;
  border-color: transparent;
  cursor: not-allowed;
  filter: none;
}

/* Deep match trigger lines */
.deep-trigger { opacity: 0.80; font-size: 12px; }
.deep-trigger-label { color: var(--p2); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }

/* No-benchmark indicator on My Decks list rows */
.mdr-bench-missing {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.mdr-bench-label {
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
}
.mdr-bench-btn {
  background: rgba(212,168,64,0.10);
  border: 1px solid rgba(212,168,64,0.35);
  border-radius: 5px;
  /* Gold text to match the warm border/background tint — was teal
     (#4fc2a7) which clashed with the gold treatment and read as
     unrelated to the rest of the chip. */
  color: var(--p4);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  cursor: pointer;
  white-space: nowrap;
  /* Tactile press feedback — lift + warm shadow on hover, push down
     on click. Without this, the button felt static; users couldn't
     tell it was an action target until they hovered. */
  transition: background var(--transition-fast),
              border-color var(--transition-fast),
              box-shadow var(--transition-fast),
              transform 0.05s ease,
              color var(--transition-fast);
}
.mdr-bench-btn:hover {
  background: rgba(212,168,64,0.22);
  border-color: rgba(212,168,64,0.70);
  color: #ffe7a8;
  box-shadow: 0 0 14px rgba(212,168,64,0.28),
              inset 0 1px 0 rgba(255,228,140,0.20);
  transform: translateY(-1px);
}
.mdr-bench-btn:active { transform: translateY(1px); }
.mdr-bench-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
/* While the deck is being scored: button stays gold but slightly
   muted, soft animated glow, and the inline crystal-ball spinner
   does the active animation. We DON'T drop opacity to 0.5 here
   (overriding :disabled) — the spinner reads better on the bright
   warm background, and the user explicitly wanted the orb to be
   visible. */
.mdr-bench-btn.mdr-bench-btn-scoring,
.mdr-bench-btn:disabled.mdr-bench-btn-scoring {
  opacity: 1;
  cursor: progress;
  background: rgba(212,168,64,0.18);
  border-color: rgba(212,168,64,0.55);
  color: #ffe7a8;
  box-shadow: 0 0 18px rgba(212,168,64,0.30) inset,
              0 0 14px rgba(212,168,64,0.20);
  animation: mdr-bench-scoring-pulse 1.6s ease-in-out infinite;
}
@keyframes mdr-bench-scoring-pulse {
  0%, 100% {
    box-shadow: 0 0 18px rgba(212,168,64,0.30) inset,
                0 0 14px rgba(212,168,64,0.20);
  }
  50% {
    box-shadow: 0 0 22px rgba(212,168,64,0.45) inset,
                0 0 22px rgba(212,168,64,0.35);
  }
}

/* The inline crystal-ball spinner inherits its own SMIL animations
   (the two orbital arcs rotate via animateTransform). Nothing CSS
   to do here — just defensive sizing in case it lands in a flex
   parent that would otherwise stretch it. */
.crystal-ball-spinner {
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(188, 167, 255, 0.55));
}

/* Score Deck button on unscored rows — sits inside the badge area.
   Shares all interaction states with .mdr-bench-btn (the row markup
   uses both classes together). The tweaked padding here is the only
   delta — slightly wider hit target for the standalone variant. */
.mdb-unscored { display: flex; align-items: center; }
.mdr-score-btn {
  background: rgba(212,168,64,0.10);
  border: 1px solid rgba(212,168,64,0.35);
  border-radius: 5px;
  color: var(--p4);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast),
              border-color var(--transition-fast),
              box-shadow var(--transition-fast),
              transform 0.05s ease,
              color var(--transition-fast);
}
.mdr-score-btn:hover {
  background: rgba(212,168,64,0.22);
  border-color: rgba(212,168,64,0.70);
  color: #ffe7a8;
  box-shadow: 0 0 14px rgba(212,168,64,0.28),
              inset 0 1px 0 rgba(255,228,140,0.20);
  transform: translateY(-1px);
}
.mdr-score-btn:active { transform: translateY(1px); }
.mdr-score-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
/* Score Deck — in-button progress while scoring. The button greys (locked) and
   a gold fill sweeps left→right behind the label as gauntlet then sim run. */
.mdr-score-btn--running,
.mdr-score-btn--running:hover {
  position: relative;
  overflow: hidden;
  cursor: progress;
  opacity: 1;
  background: rgba(120,120,140,0.16);
  border-color: rgba(160,160,180,0.32);
  color: rgba(224,219,238,0.85);
  box-shadow: none;
  transform: none;
  min-width: 116px;
  text-align: center;
}
.mdr-score-btn-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, rgba(212,168,64,0.32), rgba(212,168,64,0.58));
  box-shadow: 0 0 10px rgba(212,168,64,0.40);
  transition: width 0.3s ease;
  z-index: 0;
}
.mdr-score-btn-text {
  position: relative;
  z-index: 1;
}

/* ── Feedback modal ────────────────────────────────────────────────────────── */
.feedback-modal { max-width: 480px; width: 100%; }
.fb-type-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.fb-type-btn {
  flex: 1;
  min-width: 100px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.fb-type-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.fb-type-btn.active {
  border-color: var(--accent);
  background: rgba(99,179,237,0.12);
  color: var(--accent);
  font-weight: 600;
}
.fb-textarea {
  width: 100%;
  min-height: 120px;
  max-height: 280px;
  resize: vertical;
  background: var(--input-bg, rgba(255,255,255,0.06));
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  padding: 10px 12px;
  box-sizing: border-box;
  font-family: inherit;
  line-height: 1.5;
  transition: border-color var(--transition-fast);
}
.fb-textarea:focus { outline: none; border-color: var(--accent); }
.fb-char-count {
  font-size: 11px;
  color: var(--text-faint);
  text-align: right;
  margin-top: 4px;
  margin-bottom: 12px;
}
.fb-char-warn { color: var(--p4); }
.fb-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

/* ── Admin feedback panel ─────────────────────────────────────────────────── */
.admin-feedback-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  opacity: 0.7;
}
.admin-feedback-row:last-child { border-bottom: none; }
.admin-feedback-unread { opacity: 1; }
.admin-feedback-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.admin-feedback-body { flex: 1; min-width: 0; }
.admin-feedback-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--text-dim);
}
.admin-feedback-type {
  background: rgba(255,255,255,0.07);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  text-transform: capitalize;
}
.admin-feedback-unread .admin-feedback-meta strong { color: var(--accent); }
.admin-feedback-ts { color: var(--text-faint); margin-left: auto; }
.admin-feedback-msg {
  font-size: 14px;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}

/* ── Ask the Oracle chat panel ──────────────────────────────────────────────── */
/* ── Ask the Oracle — button + dropdown panel ─────────────────────────────── */

.oracle-chat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 14px;
  min-width: 86px;
  border: 1px solid rgba(147, 112, 219, 0.55);
  border-radius: 6px;
  color: #d6cbff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: all var(--transition-base);
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.25), inset 0 1px 0 rgba(167, 139, 250, 0.18);
  /* Cosmic void to mirror Oracle's Prophecy */
  background:
    radial-gradient(ellipse 55% 80% at 50% 50%, rgba(124, 95, 240, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 130% 100% at 50% 50%, rgba(26, 20, 85, 0.85) 0%, rgba(10, 7, 50, 0.92) 60%, rgba(3, 2, 26, 0.97) 100%);
}
/* Star+nebula layer that twinkles — same idea as .md-seer-outer::after */
.oracle-chat-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* a handful of bright stars sized for the small button */
    radial-gradient(2px 2px at 14% 30%, rgba(255,255,255,1.00), transparent 65%),
    radial-gradient(1.5px 1.5px at 33% 70%, rgba(220,230,255,0.95), transparent 65%),
    radial-gradient(2px 2px at 52% 22%, rgba(255,255,255,1.00), transparent 65%),
    radial-gradient(1.5px 1.5px at 71% 75%, rgba(220,235,255,0.95), transparent 65%),
    radial-gradient(2px 2px at 88% 35%, rgba(255,255,255,1.00), transparent 65%),
    radial-gradient(1px 1px at 22% 55%, rgba(210,225,255,0.80), transparent 60%),
    radial-gradient(1px 1px at 61% 50%, rgba(220,230,255,0.80), transparent 60%),
    radial-gradient(1px 1px at 78% 18%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(1px 1px at 95% 65%, rgba(210,225,255,0.80), transparent 60%),
    /* faint nebula tint */
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(165, 75, 255, 0.18) 0%, transparent 65%),
    radial-gradient(ellipse 70% 55% at 80% 70%, rgba( 60, 130, 255, 0.16) 0%, transparent 65%);
  animation: seer-twinkle 5s ease-in-out infinite;
}
.oracle-chat-btn:hover {
  border-color: rgba(147, 112, 219, 0.8);
  color: #e9d5ff;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(100, 60, 200, 0.4);
}
.oracle-chat-btn.active {
  border-color: rgba(167, 139, 250, 0.8);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}

/* Inline full-width panel — sits below the action bar, pushes content down */
.oracle-chat-panel {
  width: 100%;
  border-radius: 16px;
  overflow: visible;   /* must not clip card-hover popups */
  border: 1px solid rgba(99, 102, 241, 0.55);
  box-shadow: 0 8px 50px rgba(60, 20, 160, 0.55), 0 0 0 1px rgba(139,92,246,0.15), inset 0 1px 0 rgba(167,139,250,0.12);
  margin-bottom: 16px;
  animation: oracle-drop-in 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes oracle-drop-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── FAQ / How It Works orb button ──────────────────────────────────────── */
.faq-orb-btn,
.faq-orb-btn:hover,
.faq-orb-btn:focus,
.faq-orb-btn:active {
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@keyframes orb-pulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(160,100,220,0.5)) drop-shadow(0 0 2px rgba(160,100,220,0.3)); }
  50%       { filter: drop-shadow(0 0 10px rgba(180,120,255,0.85)) drop-shadow(0 0 4px rgba(220,180,255,0.5)); }
}
.faq-orb {
  /* SVG sizing — replaces the old emoji font-size. */
  width: 26px;
  height: 26px;
  display: block;
  animation: orb-pulse 2.8s ease-in-out infinite;
  transition: transform var(--transition-fast);
}
#faq-btn:hover .faq-orb,
.faq-orb-btn:hover .faq-orb {
  animation: none;
  filter: drop-shadow(0 0 12px rgba(180,120,255,1)) drop-shadow(0 0 4px #fff8);
  transform: scale(1.18);
}

/* ── FAQ modal ──────────────────────────────────────────────────────────── */
.faq-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
}
.faq-modal-panel {
  position: relative;
  width: min(820px, 95vw);
  max-height: 88vh;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(212,168,64,0.25);
  box-shadow: 0 0 60px rgba(212,168,64,0.15), 0 20px 60px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
}
.faq-modal-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 88vh;
}
.faq-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 28px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.faq-modal-orb {
  width: 34px;
  height: 34px;
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(124, 142, 248, 0.55));
}
.faq-modal-title {
  font-size: 20px;
  font-weight: 700;
  color: #d4a840;
  letter-spacing: 0.04em;
  flex: 1;
}
.faq-modal-close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.faq-modal-close:hover { color: var(--text); background: rgba(255,255,255,0.07); }
.faq-modal-body {
  overflow-y: auto;
  padding: 24px 28px 32px;
  flex: 1;
}
.faq-section {
  margin-bottom: 28px;
}
.faq-section:last-child { margin-bottom: 0; }
.faq-section-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #d4a840;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(212,168,64,0.2);
}
.faq-section p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 10px;
  opacity: 0.88;
}
.faq-section p:last-child { margin-bottom: 0; }
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px) { .faq-grid { grid-template-columns: 1fr; } }
.faq-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 14px 16px;
}
.faq-card-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.faq-card-title.green { color: #4fc2a7; }
.faq-card-title.amber { color: #d4a840; }
.faq-card ul {
  margin: 0;
  padding-left: 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  opacity: 0.85;
}
.faq-card ul li { margin-bottom: 4px; }
.faq-card ul li:last-child { margin-bottom: 0; }
.faq-roadmap-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.faq-roadmap-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  opacity: 0.85;
}
.faq-roadmap-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
  background: #d4a840;
}
.faq-roadmap-dot.done { background: #4fc2a7; }
.faq-roadmap-dot.soon { background: #a78bfa; }

/* Smoky animated background */
/* Seer cosmos background — mirrors Oracle's Prophecy */
.oracle-chat-bg {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  background:
    /* Faint focal glow at centre — match Oracle's Prophecy */
    radial-gradient(ellipse 55% 45% at 50% 50%, rgba(124, 95, 240, 0.06) 0%, transparent 65%),
    /* Very translucent void — match Oracle's Prophecy alpha levels */
    radial-gradient(ellipse 130% 100% at 50% 50%, rgba(26, 20, 85, 0.22) 0%, rgba(10, 7, 50, 0.30) 50%, rgba(3, 2, 26, 0.38) 100%);
}
/* Nebula clouds + dark blue pools — alphas match Oracle's Prophecy */
.oracle-chat-bg::before {
  content: '\'';
  position: absolute;
  inset: -40%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 55% at 28% 35%, rgba(165,  75, 255, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 75% 65%, rgba( 60, 130, 255, 0.09) 0%, transparent 60%),
    radial-gradient(ellipse 55% 60% at 55% 12%, rgba(130,  50, 230, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 45% at 12% 80%, rgba(200,  80, 220, 0.07) 0%, transparent 60%),
    radial-gradient(ellipse 65% 40% at 90% 25%, rgba( 80,  60, 230, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 75% 55% at 45% 75%, rgba(  6,  12,  60, 0.32) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 82%  8%, rgba(  4,   8,  48, 0.30) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at  8% 45%, rgba(  3,   6,  40, 0.28) 0%, transparent 60%);
  filter: blur(10px);
  animation: seer-nebula 28s ease-in-out infinite alternate;
}
/* Twinkling starfield (60 stars across three tiers) */
.oracle-chat-bg::after {
  content: '\'';
  position: absolute;
  inset: -10%;
  pointer-events: none;
  z-index: 0;
  background:
    /* TIER A — bright (18, 2.5–3.5px) */
    radial-gradient(3px   3px   at 11% 23%, rgba(255,255,255,1.00), transparent 65%),
    radial-gradient(3.5px 3.5px at 47% 17%, rgba(255,255,255,1.00), transparent 65%),
    radial-gradient(3.5px 3.5px at 19% 88%, rgba(255,255,255,1.00), transparent 65%),
    radial-gradient(3.5px 3.5px at 86% 92%, rgba(255,255,255,1.00), transparent 65%),
    radial-gradient(3px   3px   at 78% 41%, rgba(255,255,255,0.95), transparent 65%),
    radial-gradient(3px   3px   at 35% 38%, rgba(230,240,255,0.95), transparent 65%),
    radial-gradient(3px   3px   at 71%  9%, rgba(220,230,255,0.95), transparent 65%),
    radial-gradient(3px   3px   at 63% 60%, rgba(245,235,255,0.95), transparent 65%),
    radial-gradient(3px   3px   at  9% 51%, rgba(220,225,255,0.90), transparent 65%),
    radial-gradient(3.5px 3.5px at 24% 11%, rgba(255,255,255,1.00), transparent 65%),
    radial-gradient(3px   3px   at 41% 73%, rgba(255,250,240,0.95), transparent 65%),
    radial-gradient(3.5px 3.5px at 56% 31%, rgba(255,255,255,1.00), transparent 65%),
    radial-gradient(3px   3px   at 67% 87%, rgba(240,235,255,0.95), transparent 65%),
    radial-gradient(3px   3px   at 88% 53%, rgba(255,255,255,0.95), transparent 65%),
    radial-gradient(3.5px 3.5px at  3% 75%, rgba(255,255,255,1.00), transparent 65%),
    radial-gradient(3px   3px   at 38% 96%, rgba(255,250,255,0.95), transparent 65%),
    radial-gradient(3px   3px   at 52% 48%, rgba(245,240,255,0.95), transparent 65%),
    radial-gradient(3px   3px   at 96% 15%, rgba(255,255,255,0.95), transparent 65%),
    /* TIER B — mid (22, ~2px) */
    radial-gradient(2px 2px at 29% 64%, rgba(220,235,255,0.85), transparent 60%),
    radial-gradient(2px 2px at 92% 73%, rgba(220,235,255,0.85), transparent 60%),
    radial-gradient(2px 2px at 54% 56%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(2px 2px at  6% 45%, rgba(210,225,255,0.85), transparent 60%),
    radial-gradient(2px 2px at 27% 14%, rgba(220,230,255,0.85), transparent 60%),
    radial-gradient(2px 2px at 44% 79%, rgba(200,215,255,0.85), transparent 60%),
    radial-gradient(2px 2px at 67% 28%, rgba(230,235,255,0.85), transparent 60%),
    radial-gradient(2px 2px at 81% 66%, rgba(220,225,255,0.85), transparent 60%),
    radial-gradient(2.2px 2.2px at 16% 35%, rgba(230,240,255,0.85), transparent 60%),
    radial-gradient(2px 2px at 32% 55%, rgba(220,230,255,0.80), transparent 60%),
    radial-gradient(2px 2px at 49% 88%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(2.2px 2.2px at 58% 19%, rgba(220,230,255,0.85), transparent 60%),
    radial-gradient(2px 2px at 74% 80%, rgba(210,225,255,0.80), transparent 60%),
    radial-gradient(2px 2px at 83% 25%, rgba(230,235,255,0.85), transparent 60%),
    radial-gradient(2px 2px at 95% 41%, rgba(220,230,255,0.85), transparent 60%),
    radial-gradient(2px 2px at 12% 65%, rgba(210,225,255,0.80), transparent 60%),
    radial-gradient(2.2px 2.2px at 36% 24%, rgba(230,240,255,0.85), transparent 60%),
    radial-gradient(2px 2px at 50% 6%, rgba(220,230,255,0.85), transparent 60%),
    radial-gradient(2px 2px at 61% 47%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(2px 2px at 75% 13%, rgba(220,235,255,0.85), transparent 60%),
    radial-gradient(2.2px 2.2px at 86% 79%, rgba(230,240,255,0.85), transparent 60%),
    radial-gradient(2px 2px at 21% 49%, rgba(220,230,255,0.85), transparent 60%),
    /* TIER C — dim background (20, ~1.5px) */
    radial-gradient(1.5px 1.5px at  4% 12%, rgba(220,230,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 22% 37%, rgba(210,220,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 38% 91%, rgba(220,235,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 52%  4%, rgba(210,220,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 75% 51%, rgba(220,230,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 36%, rgba(210,225,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 14% 73%, rgba(220,230,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 33% 27%, rgba(210,220,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 49% 47%, rgba(220,230,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 61% 82%, rgba(210,225,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 73% 19%, rgba(220,230,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 95% 58%, rgba(210,225,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at  7% 28%, rgba(220,230,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 18% 91%, rgba(210,220,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 43% 33%, rgba(220,230,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 57% 71%, rgba(210,225,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 69% 41%, rgba(220,230,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 80%  7%, rgba(210,225,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 91% 87%, rgba(220,230,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at  2% 62%, rgba(210,225,255,0.65), transparent 60%);
  animation: seer-twinkle 5s ease-in-out infinite;
}

.oracle-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid rgba(99, 102, 241, 0.22);
  position: relative;
  z-index: 1;
}
.oracle-chat-title {
  font-size: 14px;
  font-weight: 700;
  color: #c4b5fd;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.oracle-chat-close {
  background: none;
  border: none;
  color: rgba(196,181,253,0.45);
  font-size: 15px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.oracle-chat-close:hover { color: #c4b5fd; background: rgba(99,102,241,0.15); }

.oracle-chat-messages {
  height: 260px;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  z-index: 1;
  scroll-behavior: smooth;
}

.oracle-msg {
  display: flex;
  flex-direction: column;
  max-width: 90%;
}
.oracle-msg-user      { align-self: flex-end;  align-items: flex-end; }
.oracle-msg-assistant { align-self: flex-start; align-items: flex-start; }

.oracle-msg-bubble {
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.oracle-msg-user .oracle-msg-bubble {
  background: rgba(99, 102, 241, 0.22);
  border: 1px solid rgba(99, 102, 241, 0.32);
  color: #e0d7ff;
}
.oracle-msg-assistant .oracle-msg-bubble {
  background: rgba(8, 4, 26, 0.72);
  border: 1px solid rgba(99, 102, 241, 0.18);
  color: #d4c8ff;
}
.oracle-msg-streaming::after {
  content: '▋';
  animation: oracle-blink 0.7s step-end infinite;
  color: #a78bfa;
}
@keyframes oracle-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.oracle-swap-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.oracle-swap-card {
  background: rgba(20, 10, 60, 0.85);
  border: 1px solid rgba(139, 92, 246, 0.30);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.oracle-swap-out    { color: #f87171; font-weight: 600; font-size: 13px; }
.oracle-swap-arrow  { color: #6d7280; font-size: 14px; }
.oracle-swap-in     { color: #86efac; font-weight: 600; font-size: 13px; }
.oracle-swap-reason { color: #9ca3af; font-size: 12px; width: 100%; margin-top: 4px; }
.oracle-swap-apply {
  margin-left: auto;
  background: rgba(139, 92, 246, 0.18);
  border: 1px solid rgba(139, 92, 246, 0.38);
  border-radius: 6px;
  color: #c4b5fd;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  flex-shrink: 0;
}
.oracle-swap-apply:hover   { background: rgba(139,92,246,0.32); border-color: rgba(139,92,246,0.65); }
.oracle-swap-apply:disabled { opacity: 0.4; cursor: not-allowed; }
.oracle-swap-applied { color: #86efac; font-size: 12px; margin-left: auto; }

.oracle-chat-input-row {
  display: flex;
  gap: 10px;
  padding: 10px 18px 14px;
  border-top: 1px solid rgba(99, 102, 241, 0.18);
  position: relative;
  z-index: 1;
  align-items: flex-end;
}
.oracle-chat-input {
  flex: 1;
  background: rgba(6, 4, 20, 0.75);
  border: 1px solid rgba(99, 102, 241, 0.30);
  border-radius: 10px;
  color: #e0d7ff;
  font-size: 14px;
  font-family: inherit;
  padding: 9px 13px;
  resize: none;
  line-height: 1.5;
  transition: border-color var(--transition-fast);
}
.oracle-chat-input:focus { outline: none; border-color: rgba(139, 92, 246, 0.55); }
.oracle-chat-input::placeholder { color: rgba(167,139,250,0.35); }
.oracle-chat-send {
  background: linear-gradient(135deg, #4c1d95, #1e3a8a);
  border: 1px solid rgba(139, 92, 246, 0.45);
  border-radius: 10px;
  color: #e9d5ff;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}
.oracle-chat-send:hover { background: linear-gradient(135deg, #5b21b6, #1d4ed8); box-shadow: 0 2px 12px rgba(109,40,217,0.4); }
.oracle-chat-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* Oracle markdown rendering */
.oracle-msg-bubble { font-size: 14px; line-height: 1.7; }
.oracle-msg-bubble h2 {
  color: #e9d5ff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 18px 0 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(139,92,246,0.25);
}
.oracle-msg-bubble h3 {
  color: #ddd6fe;
  font-size: 13px;
  font-weight: 700;
  margin: 14px 0 6px;
}
.oracle-msg-bubble h4 {
  color: #c4b5fd;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin: 14px 0 5px;
}
.oracle-msg-bubble h2:first-child,
.oracle-msg-bubble h3:first-child,
.oracle-msg-bubble h4:first-child { margin-top: 4px; }
.oracle-msg-bubble p  { margin: 0 0 10px; }
.oracle-msg-bubble p:last-child { margin-bottom: 0; }
.oracle-msg-bubble ul { margin: 4px 0 12px 0; padding: 0; list-style: none; }
.oracle-msg-bubble ol { margin: 4px 0 12px 20px; padding: 0; }
.oracle-msg-bubble ul li { padding-left: 16px; position: relative; margin-bottom: 5px; }
.oracle-msg-bubble ul li::before { content: "·"; position: absolute; left: 4px; color: #a78bfa; font-size: 16px; line-height: 1.4; }
.oracle-msg-bubble ol li { margin-bottom: 5px; }
.oracle-msg-bubble strong { color: #f3e8ff; font-weight: 600; }
.oracle-msg-bubble em    { color: #c4b5fd; font-style: italic; }

/* Chat limit notices */
.oracle-limit-msg {
  font-size: 12px;
  text-align: center;
  padding: 8px 16px;
  border-radius: 8px;
  margin: 8px 18px 4px;
  position: relative;
  z-index: 2;
}
.oracle-limit-warn {
  background: rgba(180, 120, 0, 0.15);
  border: 1px solid rgba(180, 120, 0, 0.35);
  color: #fbbf24;
}
.oracle-limit-hard {
  background: rgba(150, 30, 30, 0.2);
  border: 1px solid rgba(200, 50, 50, 0.35);
  color: #fca5a5;
  padding: 14px 20px;
  margin: 0;
  border-radius: 0 0 15px 15px;
}

/* Copy button */
.oracle-copy-btn {
  display: block;
  background: none;
  border: 1px solid rgba(99,102,241,0.30);
  border-radius: 5px;
  color: rgba(167,139,250,0.6);
  font-size: 11px;
  padding: 3px 10px;
  cursor: pointer;
  margin-top: 6px;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.oracle-copy-btn:hover {
  color: #c4b5fd;
  border-color: rgba(139,92,246,0.6);
  background: rgba(99,102,241,0.12);
}

/* Oracle inline card references */
.oracle-card-ref {
  color: #c4b5fd;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 1px dotted rgba(167,139,250,0.5);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.oracle-card-ref:hover {
  color: #e9d5ff;
  border-bottom-color: rgba(233,213,255,0.7);
}

/* ── Admin feedback panel header ──────────────────────────────────────────── */
.afb-panel-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.afb-type-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.afb-tab {
  font-size: 11px; padding: 3px 10px; border-radius: 12px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
  color: var(--text-dim); cursor: pointer; transition: all var(--transition-fast);
}
.afb-tab:hover   { background: rgba(255,255,255,0.09); color: var(--text); }
.afb-tab-active  { background: rgba(124,142,248,0.18); border-color: rgba(124,142,248,0.4); color: #a0aaff; font-weight: 600; }
.afb-panel-controls { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.afb-unread-label { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 5px; cursor: pointer; }

/* ── Admin feedback item ──────────────────────────────────────────────────── */
.afb-item {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.afb-item:last-child { border-bottom: none; }
.afb-item-unread { border-left: 3px solid rgba(124,142,248,0.5); padding-left: 10px; }
.afb-item-has-new .afb-item-header { /* subtle highlight handled by badge */ }

.afb-item-header {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 6px; flex-wrap: nowrap;
}
.afb-item-icon  { font-size: 14px; flex-shrink: 0; }
.afb-item-user  { font-size: 13px; font-weight: 600; color: var(--text); flex-shrink: 0; }
.afb-item-type  {
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-faint); background: rgba(255,255,255,0.06);
  padding: 1px 6px; border-radius: 4px; flex-shrink: 0;
}
.afb-item-ts    { font-size: 11px; color: var(--text-faint); flex-shrink: 0; }
.afb-new-badge  {
  font-size: 10px; font-weight: 700; color: #fff;
  background: #7c8ef8; padding: 1px 6px; border-radius: 8px; flex-shrink: 0;
}
.afb-unread-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(124,142,248,0.7); flex-shrink: 0;
}
.afb-item-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.afb-reply-toggle {
  font-size: 11px; padding: 2px 8px; color: var(--accent);
  border-color: rgba(124,142,248,0.25);
}
.afb-markread-btn {
  font-size: 11px; padding: 2px 8px; color: #6bbf6b;
  border-color: rgba(107,191,107,0.25);
}
.afb-markread-btn:hover { background: rgba(107,191,107,0.10); }
.afb-delete-btn {
  font-size: 11px; padding: 2px 7px; color: var(--text-faint);
  border-color: rgba(255,255,255,0.08);
}
.afb-delete-btn:hover { color: #e07a5f; border-color: rgba(224,122,95,0.35); }

.afb-item-msg  { font-size: 13px; color: var(--text-dim); white-space: pre-wrap; margin-bottom: 6px; }

/* Reply thread */
.afb-thread { margin: 8px 0 10px 0; border-left: 2px solid rgba(255,255,255,0.07); padding-left: 12px; display: flex; flex-direction: column; gap: 8px; }
.afb-reply { font-size: 12px; }
.afb-reply-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.afb-reply-author { font-weight: 600; font-size: 12px; }
.afb-reply-ts { color: var(--text-faint); font-size: 11px; }
.afb-reply-admin .afb-reply-author { color: #7c8ef8; }
.afb-reply-user  .afb-reply-author { color: #d4a840; }
.afb-reply-msg { color: var(--text-dim); white-space: pre-wrap; }

/* Expandable reply form */
.afb-reply-form { margin-top: 10px; }
.afb-reply-form[hidden] { display: none !important; }
.afb-reply-input {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10);
  border-radius: 6px; color: var(--text); font-size: 12px; padding: 7px 10px;
  resize: vertical; font-family: inherit;
}
.afb-reply-input:focus { outline: none; border-color: rgba(124,142,248,0.4); }
.afb-reply-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }

/* ── User feedback thread modal ───────────────────────────────────────────── */
.fbt-modal { max-width: 520px; display: flex; flex-direction: column; max-height: 80vh; }
.fbt-thread-body {
  flex: 1; overflow-y: auto; padding: 16px 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.fbt-message { display: flex; flex-direction: column; gap: 4px; }
.fbt-msg-meta { display: flex; align-items: center; gap: 8px; }
.fbt-author { font-size: 12px; font-weight: 600; color: var(--text); }
.fbt-ts { font-size: 11px; color: var(--text-faint); }
.fbt-msg-body { font-size: 13px; color: var(--text-dim); white-space: pre-wrap; padding: 8px 10px; border-radius: 6px; background: rgba(255,255,255,0.03); }
.fbt-admin .fbt-author { color: #7c8ef8; }
.fbt-admin .fbt-msg-body { background: rgba(124,142,248,0.06); border-left: 2px solid rgba(124,142,248,0.3); }
.fbt-user .fbt-author { color: #d4a840; }
.fbt-original .fbt-msg-body { background: rgba(212,168,64,0.06); border-left: 2px solid rgba(212,168,64,0.25); }
.fbt-reply-section { padding: 14px 20px; border-top: 1px solid rgba(255,255,255,0.07); display: flex; flex-direction: column; gap: 8px; }
.fbt-reply-section .fb-textarea { min-height: 56px; }
.fbt-reply-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Notification panel response row */
.notif-row-response { cursor: pointer; }
.notif-row-response:hover { background: rgba(124,142,248,0.10); }

/* ── Feedback inbox modal ─────────────────────────────────────────────────── */
.fbi-modal { max-width: 480px; display: flex; flex-direction: column; max-height: 75vh; }
.fbi-body { flex: 1; overflow-y: auto; }
.fbi-footer { padding: 14px 20px; border-top: 1px solid rgba(255,255,255,0.07); display: flex; justify-content: flex-end; }
.fbi-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background var(--transition-fast);
}
.fbi-row:last-child { border-bottom: none; }
.fbi-row:hover { background: rgba(124,142,248,0.07); }
.fbi-row-unread { background: rgba(124,142,248,0.05); }
.fbi-icon { font-size: 16px; flex-shrink: 0; }
.fbi-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fbi-type { font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
.fbi-snippet { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbi-row-right { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.fbi-badge { font-size: 10px; font-weight: 700; color: #fff; background: #7c8ef8; padding: 1px 6px; border-radius: 8px; white-space: nowrap; }
.fbi-replied { font-size: 10px; color: #6bbf6b; font-weight: 600; }
.fbi-ts { font-size: 11px; color: var(--text-faint); }

/* Oracle "Scrying the stars" loading state */
.oracle-scrying {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px !important;
  background: rgba(8, 4, 26, 0.5) !important;
  border-color: rgba(99, 102, 241, 0.15) !important;
  min-width: 160px;
}
.oracle-scrying-text {
  color: rgba(196, 181, 253, 0.7);
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0.02em;
}
.oracle-scrying-dots {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}
.oracle-scrying-dots span {
  display: inline-block;
  color: #a78bfa;
  font-size: 18px;
  line-height: 1;
  animation: oracle-dot-pulse 1.4s ease-in-out infinite;
}
.oracle-scrying-dots span:nth-child(2) { animation-delay: 0.2s; }
.oracle-scrying-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes oracle-dot-pulse {
  0%, 80%, 100% { opacity: 0.2; transform: translateY(0); }
  40%           { opacity: 1;   transform: translateY(-3px); }
}

/* ── Partner commander diagonal split art ───────────────────────────────── */
.cmdr-art-split {
  position: relative;
  overflow: hidden;
  /* Size owned by companion class (my-deck-row-art, gauntlet-commander-img, etc.) */
}
/* Each image covers only its own half so object-fit:cover centers the art
   within that half — naturally shows the face/subject of each card */
.cmdr-art-split img:first-child {
  position: absolute;
  top: 0; left: 0;
  width: 62%; height: 100%;
  object-fit: cover;
  object-position: 65% top;
  clip-path: polygon(0 0, 94% 0, 68% 100%, 0 100%);
}
.cmdr-art-split img:last-child {
  position: absolute;
  top: 0; right: 0;
  width: 62%; height: 100%;
  object-fit: cover;
  object-position: 35% top;
  clip-path: polygon(32% 0, 100% 0, 100% 100%, 7% 100%);
}
.cmdr-art-split::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%; width: 2px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.05), rgba(255,255,255,0.35), rgba(255,255,255,0.05));
  transform: rotate(-10deg) translateX(-50%);
  pointer-events: none;
  z-index: 2;
}

/* ── Admin tab bar ────────────────────────────────────────────────────────── */
.admin-tab-bar {
  display: flex;
  gap: 6px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 20px;
  flex-wrap: wrap;
  align-items: center;
}
.admin-tab {
  font-size: 13px;
  font-weight: 500;
  padding: 7px 18px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.admin-tab:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.18);
  color: var(--text);
}
.admin-tab-active {
  background: rgba(124,142,248,0.18);
  border-color: rgba(124,142,248,0.45);
  color: #b0b8ff;
  font-weight: 600;
}
.admin-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.13);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  margin-left: 6px;
  vertical-align: middle;
}
.admin-tab-badge[hidden] { display: none !important; }
.admin-tab-badge-alert   { background: #e07a5f !important; color: #fff !important; font-weight: 700 !important; }

/* ── Dashboard stat cards ─────────────────────────────────────────────────── */
.adash-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 20px; }
@media (max-width: 700px) { .adash-stats { grid-template-columns: repeat(2,1fr); } }
/* Centred stat tile. Each tile carries a tone modifier (.adash-stat-tone-*)
   that paints a soft accent gradient + matching border + value tint so the
   row reads as a deliberate dashboard rather than four grey boxes. */
.adash-stat {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 16px 16px 14px;
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.adash-stat-val {
  font-size: 2rem;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--text-bright);
  line-height: 1;
  margin: 0;
}
.adash-stat-lbl {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.adash-stat-link { cursor: pointer; }
.adash-stat-link:hover { transform: translateY(-1px); }

/* Tone modifiers — each box keys off a player-palette colour so the
   dashboard reads at a glance. */
.adash-stat-tone-users {
  background: linear-gradient(160deg, rgba(124,142,248,0.14), rgba(255,255,255,0.04) 80%);
  border-color: rgba(124,142,248,0.30);
}
.adash-stat-tone-users .adash-stat-val { color: #a4b1ff; text-shadow: 0 0 14px rgba(124,142,248,0.25); }

.adash-stat-tone-feedback {
  background: linear-gradient(160deg, rgba(177,150,246,0.14), rgba(255,255,255,0.04) 80%);
  border-color: rgba(177,150,246,0.30);
}
.adash-stat-tone-feedback .adash-stat-val { color: #c5b2ff; text-shadow: 0 0 14px rgba(177,150,246,0.25); }

.adash-stat-tone-sessions {
  background: linear-gradient(160deg, rgba(79,194,167,0.14), rgba(255,255,255,0.04) 80%);
  border-color: rgba(79,194,167,0.30);
}
.adash-stat-tone-sessions .adash-stat-val { color: #6ed8b8; text-shadow: 0 0 14px rgba(79,194,167,0.30); }

.adash-stat-tone-decks {
  background: linear-gradient(160deg, rgba(226,196,122,0.14), rgba(255,255,255,0.04) 80%);
  border-color: rgba(226,196,122,0.30);
}
.adash-stat-tone-decks .adash-stat-val { color: #e8cd84; text-shadow: 0 0 14px rgba(226,196,122,0.30); }

/* Alert override on the feedback card — overrides the tone for urgency. */
.adash-stat-alert {
  border-color: rgba(217,122,108,0.55) !important;
  background: linear-gradient(160deg, rgba(217,122,108,0.20), rgba(255,255,255,0.04) 80%) !important;
}
.adash-stat-alert .adash-stat-val {
  color: #ff9a8a !important;
  text-shadow: 0 0 14px rgba(217,122,108,0.35) !important;
}

/* Stats row → small action row directly underneath. Mirrors the same
   4-column grid so the Refresh Overview button lands flush under the
   Users tile (column 1) instead of floating below the whole row. */
.adash-stats-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: -10px;     /* lift it tight against the stats grid */
  margin-bottom: 18px;
}
.adash-stats-actions > .ghost-btn {
  /* Column 1 — sits flush under the Users tile. */
  grid-column: 1;
  min-width: 0;
  justify-self: stretch;
  text-align: center;
}
@media (max-width: 700px) {
  .adash-stats-actions { grid-template-columns: repeat(2, 1fr); }
}

/* Needs Attention — re-surfaces existing alert signals (e.g. unread
   feedback) as clickable status lines. Reuses the .adash-stat-alert
   palette so the two read as the same "attention" colour. Click
   behaviour reuses the existing feedback-tab switch; no new logic. */
.adash-attention-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(217,122,108,0.45);
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(217,122,108,0.16), rgba(255,255,255,0.03) 80%);
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.adash-attention-row:hover {
  transform: translateY(-1px);
  border-color: rgba(217,122,108,0.70);
}
.adash-attention-icon { color: #ff9a8a; font-size: 14px; }
.adash-attention-text { color: var(--text); font-size: 13px; flex: 1; }
.adash-attention-go { color: #ff9a8a; font-size: 12px; font-weight: 600; }

/* Scores subsection wrapper — keeps the heading and scoring buttons grouped
   so the dashboard reads as titled blocks instead of loose controls. */
.adash-subsection {
  margin-top: 8px;
  margin-bottom: 6px;
}
.adash-subsection-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.adash-actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* Equal-width admin scoring buttons. Centering text in a fixed min-width
   makes the row read as a deliberate cluster rather than a jagged set
   of mismatched widths. */
.adash-actions .ghost-btn {
  min-width: 180px;
  text-align: center;
  justify-content: center;
}

/* ── Admin decks details collapse ─────────────────────────────────────────── */
.admin-group-details summary.admin-group-head { cursor: pointer; user-select: none; }
/* Custom ::before triangle removed — the browser-default disclosure
   marker (the smaller ▶ that rotates to ▼ when [open]) is the only
   indicator now, fixing the doubled-arrow we were rendering before. */
.admin-group-details summary.admin-group-head::marker { color: rgba(255,255,255,0.55); }

/* ── Admin broadcast form ─────────────────────────────────────────────────── */
.ann-broadcast-panel {
  padding: 12px 0 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 14px;
}
.ann-row { display:flex; align-items:center; gap:8px; padding:5px 0; font-size:12px; border-bottom:1px solid rgba(255,255,255,0.04); }
.ann-row:last-child { border-bottom:none; }
.ann-row-msg { flex:1; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ann-row-meta { color:var(--text-faint); font-size:11px; flex-shrink:0; }
/* ── Announcements: sticky-pinned at top until dismissed, warm yellow ───── */
.notif-ann-section {
  /* Sticky inside .notif-dropdown (the scrollable container). The "Recent
     Activity" header sits above this in the DOM; using position: sticky
     with top: 0 pins the announcements once the user scrolls them up to
     the panel's top edge so they stay visible. */
  position: sticky;
  top: 0;
  z-index: 2;
  /* Opaque dark backdrop so the activity list scrolling underneath doesn't
     bleed through the sticky section. */
  background: #16121f;
  border-bottom: 1px solid rgba(250, 204, 21, 0.18);
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.55);
}
.notif-ann-section .notif-section-label {
  color: rgba(250, 204, 21, 0.95);
  letter-spacing: 0.12em;
}
.notif-row-ann {
  background: rgba(250, 204, 21, 0.10);
  border-left: 3px solid rgba(250, 204, 21, 0.85);
}
.notif-row-ann:hover {
  background: rgba(250, 204, 21, 0.16);
}
.notif-dot-ann {
  background: #facc15;
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(250, 204, 21, 0.55);
}
.notif-type-chip-ann {
  color: #facc15;
  border-color: rgba(250, 204, 21, 0.45);
  background: rgba(250, 204, 21, 0.08);
}

/* ── Commander art position editor ──────────────────────────────────────── */
.cmdr-art-edit-btn {
  position: absolute;
  top: 6px; right: 6px;
  width: 26px; height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
  z-index: 10;
}
.gauntlet-hero-img:hover .cmdr-art-edit-btn,
.cmdr-art-edit-btn.active { opacity: 1; }
.cmdr-art-edit-btn.active { background: rgba(99,102,241,0.7); border-color: rgba(139,92,246,0.8); color: #fff; }

.cmdr-art-edit-overlay {
  position: absolute;
  bottom: 6px; left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 20;
  padding: 4px;
}
.cmdr-art-controls {
  background: rgba(0,0,0,0.75);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  backdrop-filter: blur(4px);
}
.cmdr-art-ctrl-label {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.cmdr-art-dpad {
  display: grid;
  grid-template-columns: 26px 26px 26px;
  grid-template-rows: 26px 26px 26px;
  gap: 3px;
}
.cmdr-dpad-btn {
  width: 26px; height: 26px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.85);
  font-size: 11px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.1s;
}
.cmdr-dpad-btn:hover { background: rgba(255,255,255,0.25); }
.cmdr-art-dpad .cmdr-dpad-btn:nth-child(1) { grid-column: 2; grid-row: 1; }  /* ▲ */
.cmdr-art-dpad .cmdr-dpad-btn:nth-child(2) { grid-column: 1; grid-row: 2; }  /* ◄ */
.cmdr-art-dpad .cmdr-dpad-save             { grid-column: 2; grid-row: 2; width: 26px; height: 26px; padding: 0; border-radius: 5px; font-size: 13px; }
.cmdr-art-dpad .cmdr-dpad-btn:nth-child(4) { grid-column: 3; grid-row: 2; }  /* ► */
.cmdr-art-dpad .cmdr-dpad-btn:nth-child(5) { grid-column: 2; grid-row: 3; }  /* ▼ */

/* Commander art menu */
.cmdr-art-menu {
  position: absolute;
  top: 34px; right: 6px;
  background: var(--bg-elev, #1a1a2e);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  overflow: hidden;
  z-index: 30;
  min-width: 150px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.cmdr-menu-item {
  display: block;
  width: 100%;
  padding: 9px 14px;
  text-align: left;
  background: none;
  border: none;
  color: var(--text, #e0d7ff);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s;
}
.cmdr-menu-item:hover { background: rgba(255,255,255,0.08); }
.cmdr-menu-item + .cmdr-menu-item { border-top: 1px solid rgba(255,255,255,0.06); }
.cmdr-menu-reset { color: #f87171 !important; }

/* Upload overlay */
.cmdr-art-upload-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.82);
  border-radius: 10px;
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
}
.cmdr-upload-target-sel {
  width: 100%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  color: #fff;
  padding: 4px 8px;
  font-size: 12px;
}
.cmdr-upload-label { width: 100%; cursor: pointer; }
.cmdr-upload-drop {
  width: 100%;
  border: 1.5px dashed rgba(255,255,255,0.3);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  transition: border-color 0.15s, background 0.15s;
}
.cmdr-upload-drop:hover { border-color: rgba(139,92,246,0.7); background: rgba(99,60,200,0.15); }
.cmdr-upload-preview {
  max-width: 100%;
  max-height: 80px;
  border-radius: 6px;
  object-fit: cover;
}
.cmdr-upload-actions {
  display: flex;
  gap: 8px;
  width: 100%;
}
.cmdr-upload-actions button { flex: 1; font-size: 12px; padding: 6px 10px; }

/* Commander art drag-to-pan save button */
.cmdr-drag-save {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  font-size: 12px;
  padding: 5px 16px;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
/* Grab cursor hint while in drag mode */
.gauntlet-hero-img img[style*="grab"] {
  outline: 2px solid rgba(139,92,246,0.6);
  outline-offset: -2px;
}

/* ── AI pending banner (shows while recommendations are loading) ─────────── */
.ai-pending-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: 8px;
  background: rgba(124,142,248,0.06);
  border: 1px solid rgba(124,142,248,0.18);
  color: var(--text-dim);
  font-size: 13px;
  margin-bottom: 16px;
}

/* ── Oracle's Prophecy loading state ─────────────────────────────────────── */
.oracle-loading-panel { }
.oracle-loading-eyebrow { color: #4fc2a7; margin-bottom: 12px; }
.oracle-loading-body { display: flex; flex-direction: column; gap: 10px; }
.oracle-loading-header {
  display: flex; align-items: center; gap: 10px;
  color: var(--text-dim); font-style: italic; font-size: 13px;
}
.oracle-loading-label { color: var(--text-dim); font-style: italic; }

/* Shimmer bars — fake content skeleton */
.oracle-shimmer-bar {
  height: 11px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.10) 40%,
    rgba(212,168,64,0.12) 60%,
    rgba(255,255,255,0.04) 100%
  );
  background-size: 300% 100%;
  animation: oracle-shimmer 2s ease-in-out infinite;
}
@keyframes oracle-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Indeterminate progress bar */
.oracle-loading-bar-wrap {
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  margin-top: 4px;
}
.oracle-loading-bar-fill {
  height: 100%;
  width: 40%;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #d4a840, transparent);
  animation: oracle-bar 2s ease-in-out infinite;
}
@keyframes oracle-bar {
  0%   { transform: translateX(-150%); }
  100% { transform: translateX(400%); }
}

/* ── Deck unified header (My Decks benchmark card) ──────────────────────── */
.deck-unified-header {
  display: flex;
  align-items: stretch;   /* art fills full height */
  gap: 20px;
  padding: 0 20px 0 0;   /* art goes edge-to-edge on left */
  background: var(--panel-bg);
  border-radius: 14px;
  border: 1px solid rgba(212,168,64,0.30);
  box-shadow: 0 0 0 1px rgba(212,168,64,0.08) inset;
  min-height: 175px;      /* 25% taller */
  margin-bottom: 12px;
  overflow: hidden;
  position: relative;
}
/* Faded commander art bleeds in from the right — same pattern as the
   My Decks row (.my-deck-row--has-art::after). Replaces the gold
   gradient fill the banner used to ship with. */
.deck-unified-header--has-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--hero-art);
  background-size: cover;
  background-position: center right;
  opacity: 0.22;
  mask-image: linear-gradient(to right, transparent 35%, black 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 35%, black 100%);
  pointer-events: none;
  z-index: 0;
}
/* Lift every direct child above the ::after backdrop. */
.deck-unified-header > * { position: relative; z-index: 1; }
.deck-header-art-wrap {
  position: relative;
  flex-shrink: 0;
  width: 150px;
}
.deck-header-art {
  width: 100%;
  height: 100%;
  border-radius: 14px 0 0 14px;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}
.deck-header-art-split {
  width: 100%;
  height: 100%;
  border-radius: 14px 0 0 14px;
  overflow: hidden;
  position: relative;
  /* Stack the two commander images as a flex column so each gets
     exactly half the height. Without this the imgs render at natural
     size, stack vertically, and the container's overflow:hidden clips
     each one at an arbitrary horizontal band. */
  display: flex;
  flex-direction: column;
}
.deck-header-art-split > img {
  display: block;
  width: 100%;
  /* flex: 1 1 0 makes each half claim equal vertical space regardless
     of the natural aspect ratio of the source art. */
  flex: 1 1 0;
  min-height: 0;
  object-fit: cover;
  /* object-position is set per-image via inline style from the focal
     point cache so each commander's face stays in frame. */
}
/* Hairline divider between the two halves — same gold tint used on the
   rest of the gold panel chrome so it reads as intentional rather than
   a JPEG seam. */
.deck-header-art-split > img + img {
  border-top: 1px solid rgba(226, 196, 122, 0.30);
}
.deck-header-art-edit {
  position: absolute;
  bottom: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 5px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.7);
  font-size: 11px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
}
.deck-header-art-wrap:hover .deck-header-art-edit { opacity: 1; }
.deck-header-titles { flex: 1; min-width: 0; padding: 16px 0; }
.deck-header-cmdr {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 18px;
  font-weight: 500;
  color: #f5e6a8;
  font-style: italic;
  letter-spacing: 0.2px;
  opacity: 0.88;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.deck-header-deck {
  font-size: 32px;
  font-weight: 700;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  color: var(--text-bright, #fff);
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}
.deck-header-deck-text {
  cursor: text;
  overflow: hidden;
  text-overflow: ellipsis;
}
.deck-header-deck-edit {
  background: none;
  border: none;
  padding: 2px 6px;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.deck-header-deck:hover .deck-header-deck-edit {
  opacity: 1;
}
.deck-header-deck-edit:hover {
  color: var(--accent, #d4a840);
  background: rgba(255, 255, 255, 0.08);
}
.deck-header-deck-input {
  font: inherit;
  color: inherit;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(212, 168, 64, 0.5);
  border-radius: 4px;
  padding: 1px 8px;
  width: min(420px, 100%);
  outline: none;
}
.deck-header-deck-input:focus {
  border-color: var(--accent, #d4a840);
  box-shadow: 0 0 0 2px rgba(212, 168, 64, 0.18);
}
.deck-header-score {
  font-size: 64px;
  font-weight: 700;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  color: #4fc2a7;
  text-shadow: 0 0 32px rgba(226,196,122,0.45);
  line-height: 1;
}
.deck-header-score-suffix {
  font-size: 32px;
  font-weight: 600;
  color: #4fc2a7;
  margin-left: 6px;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  vertical-align: baseline;
  opacity: 0.85;
  letter-spacing: 0.02em;
  text-shadow: none;
}
.deck-header-tier {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 4px;
}
.deck-header-score-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.deck-header-score-row .deck-header-tier {
  margin-top: 0;
  align-self: center;
}
.deck-header-score-empty { font-size: 14px; color: var(--text-dim); }
.deck-header-tier-hint   { font-size: 11px; color: var(--text-faint); margin-top: 2px; }

/* Score rings */
.deck-header-rings {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
  padding: 16px 0;
}
.score-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.score-ring svg { display: block; }
.score-ring-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
}
.score-ring-weight {
  font-size: 10px;
  color: var(--text-faint);
  text-align: center;
}
.score-ring-gated { opacity: 0.5; }

/* ── Benchmark section — collapsible purple hero ─────────────────────────── */
.benchmark-section {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(139,92,246,0.38);
  background: linear-gradient(135deg,
    rgba(139,92,246,0.16) 0%,
    rgba(139,92,246,0.07) 60%,
    rgba(99,60,220,0.04) 100%);
  /* 16px gutter — matches .my-deck-section + .md-gauntlet-details so
     Simulation Score (and Stability, which inherits this rule) sits
     in the same uniform stack as the other detail-page cards. */
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 0 22px rgba(139,92,246,0.10), inset 0 1px 0 rgba(255,255,255,0.03);
}
.benchmark-hero-summary {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.benchmark-hero-summary::-webkit-details-marker { display: none; }
.benchmark-hero-left {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 160px;
}
/* Tier pill — only as wide as its content (no longer overlaps neighbouring elements) */
.benchmark-hero-left .benchmark-final-label {
  align-self: flex-start;
  margin-top: 4px;
  white-space: nowrap;
}
/* Break-even centred under the score column */
.benchmark-breakeven-centered {
  align-self: center;
  margin-top: 10px;
  font-size: 12px;
  text-align: center;
  color: var(--text-dim);
}
.benchmark-breakeven-centered strong { color: var(--warning); font-weight: 700; }

/* Group win-rate chips — bracketed tile design (matches Deck Profile tiles) */
.benchmark-group-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1;
  min-width: 0;
  align-items: center;
}
/* Deck Score chip row — distribute chips evenly across the full available width */
.md-gauntlet-summary .benchmark-group-chips {
  justify-content: space-evenly;
}
.md-gauntlet-summary .benchmark-group-chips .bm-group-chip {
  flex-shrink: 0;
}
.bm-group-chip {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: 10px;
  min-width: 100px;
  padding: 12px 16px 12px 10px;
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, rgba(0,0,0,0.30), rgba(0,0,0,0.10));
  border: 1px solid rgba(255,255,255,0.06);
  font-family: "Inter", sans-serif;
  cursor: default;
  transition: transform var(--transition-fast);
}
.bm-group-chip:hover { transform: translateY(-1px); }
/* Force all five tier chips onto ONE row, packed left. nowrap + flex:1 1 0
   + min-width:0 makes every chip shrink to share the row instead of the
   5th wrapping below (the previous flex-basis:100px / flex-wrap:wrap let
   it wrap 4+1). No max-width cap — chips fill the row edge to edge. */
.benchmark-hero-summary .benchmark-hero-components {
  flex-wrap: nowrap;
  overflow: visible;
  justify-content: flex-start;
}
.benchmark-hero-summary .benchmark-group-chips .bm-group-chip {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
}
/* Compact the big chip number a touch in the hero so five fit comfortably. */
.benchmark-hero-summary .benchmark-group-chips .bm-group-wr { font-size: 26px; }
.benchmark-hero-summary .benchmark-group-chips .bm-group-chip { padding: 10px 12px 10px 9px; }
.bm-group-chip.bm-group-win   { --bm-chip-color: #4fc2a7; }
.bm-group-chip.bm-group-even  { --bm-chip-color: var(--warning); }
.bm-group-chip.bm-group-loss  { --bm-chip-color: var(--danger); }

/* The "[" bracket — vertical line with short horizontal tabs at top and bottom */
.bm-group-bracket {
  position: relative;
  width: 8px;
  flex-shrink: 0;
  border-left: 2px solid var(--bm-chip-color);
  margin: 4px 0;
}
.bm-group-bracket::before,
.bm-group-bracket::after {
  content: "";
  position: absolute;
  left: -2px;
  width: 7px;
  height: 2px;
  background: var(--bm-chip-color);
}
.bm-group-bracket::before { top: 0; }
.bm-group-bracket::after  { bottom: 0; }

.bm-group-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
}
.bm-group-name {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bm-group-wr {
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.benchmark-hero-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(196,181,253,0.6);
  margin-bottom: 2px;
}
.benchmark-final-score-hero {
  font-size: 48px;
  font-weight: 700;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  color: #c4b5fd;
  line-height: 1;
  display: flex;
  align-items: flex-end;
  gap: 4px;
}
.benchmark-final-score-hero .benchmark-final-suffix {
  font-size: 16px;
  color: rgba(196,181,253,0.5);
  font-family: var(--font-body, 'Inter', sans-serif);
  padding-bottom: 6px;  /* align baseline with bottom of big number */
}
.benchmark-hero-components {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  flex: 1;
  align-items: center;
  overflow: hidden;
}
.benchmark-hero-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  flex-shrink: 0;
}
.benchmark-chevron {
  color: rgba(196,181,253,0.5);
  font-size: 18px;
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.benchmark-section[open] .benchmark-chevron { transform: rotate(180deg); }
.benchmark-body {
  padding: 0 20px 20px;
  border-top: 1px solid rgba(139,92,246,0.15);
}

/* ── Deck Analysis summary — matches Simulation Score bar ────────────────── */
.gauntlet-summary-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}
/* Score block — column: title on top, then score+pill row */
.gauntlet-summary-score-block {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* "DECK ANALYSIS" title — doubled size */
.gauntlet-summary-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #4fc2a7;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
}
/* Score + STRONG pill side by side, pill vertically centered */
.gauntlet-summary-score-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* Score doubled: 96px */
.gauntlet-summary-score {
  font-size: 96px;
  font-weight: 700;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  color: #4fc2a7;
  line-height: 1;
}
/* Chips — 33% bigger, more spacing */
.gauntlet-summary-chips {
  display: flex;
  flex-wrap: nowrap;
  flex: 1;
  align-items: center;
  justify-content: space-evenly;  /* spread chips across ALL available space */
}
.gauntlet-summary-chips .bm-group-chip {
  min-width: 116px;
  flex-shrink: 0;
}
/* Bigger chip numbers in Deck Analysis — +25% on prior size, hard right-aligned */
.gauntlet-summary-chips .benchmark-component-value {
  font-size: 3.3rem;       /* +25% from the previous 2.65rem */
  text-align: right;
  display: block;
  width: 100%;
  letter-spacing: -0.02em;
}
.gauntlet-summary-chips .benchmark-component-label {
  text-align: right;
  display: block;
  width: 100%;
}
.gauntlet-summary-chips .benchmark-component-chip {
  min-width: 130px;        /* room for the right-aligned bigger number */
  align-items: stretch;    /* let value + label span the full tile width */
  padding-right: 18px;     /* nudge the number further toward the right edge */
}

/* Simulation score row — number + /100 side by side */



/* Deck / Mana / Sim / Stability summary blocks: score on top, tier
   pill (STRONG / CEDH / STABLE) sits BELOW the score. Previously the
   pill was inline next to the figure; stacking matches the hero
   header treatment and gives the large score room to breathe. */
.deck-score-with-pill {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* Summary blocks need to be position:relative so the corner help orb
   (which lives INSIDE the summary now, not as a sibling-of-summary, so
   it stays visible when the section is collapsed) anchors to the
   summary box's top-right rather than escaping to the nearest
   positioned ancestor. */
.benchmark-hero-summary {
  position: relative;
}
.md-gauntlet-summary-orb-host {
  position: relative;
}

/* My Decks: small Mana score chip rendered next to the main
   final_power badge so the row mirrors the hero header's four-
   component framing (Deck / Mana / Sim / Stability). Cream colour
   keys to the Mana Score section + ring. */
.my-deck-mana-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  margin-left: 6px;
  border: 1px solid rgba(244, 232, 213, 0.32);
  border-radius: 10px;
  background: rgba(244, 232, 213, 0.04);
  color: #f4e8d5;
  min-width: 46px;
}
.mdmc-val {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: #f4e8d5;
}
.mdmc-label {
  font-size: 8.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(244, 232, 213, 0.65);
  margin-top: 2px;
  font-weight: 700;
}

/* ── Ask the Oracle: saved answers ─────────────────────────────────────── */
.oracle-chat-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.oracle-chat-saved-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  color: #e8e1d6;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.oracle-chat-saved-btn:hover { background: rgba(255,255,255,0.08); }
.oracle-chat-saved-btn.active {
  background: rgba(212, 175, 55, 0.18);
  border-color: rgba(212, 175, 55, 0.55);
  color: #f5e6a8;
}
.oracle-saved-count { opacity: 0.75; margin-left: 2px; }

.oracle-msg-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.oracle-save-btn {
  background: transparent;
  border: 1px solid rgba(212,175,55,0.45);
  color: #f5e6a8;
  padding: 3px 10px;
  border-radius: 5px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.oracle-save-btn:hover:not(:disabled) { background: rgba(212,175,55,0.18); }
.oracle-save-btn:disabled { opacity: 0.7; cursor: default; }

.oracle-chat-saved-panel {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 14px;
}
.oracle-saved-empty {
  text-align: center;
  color: rgba(232,225,214,0.6);
  font-style: italic;
  padding: 28px 12px;
  font-size: 13px;
}
.oracle-saved-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.oracle-saved-card {
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(212,175,55,0.20);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s, background 0.15s;
}
.oracle-saved-card:hover {
  border-color: rgba(212,175,55,0.40);
  background: rgba(0,0,0,0.28);
}
.oracle-saved-card.expanded {
  border-color: rgba(212,175,55,0.55);
}
.oracle-saved-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  cursor: pointer;
  user-select: none;
}
.oracle-saved-q {
  flex: 1;
  font-weight: 600;
  color: #f5e6a8;
  font-size: 13px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.oracle-saved-card.expanded .oracle-saved-q {
  -webkit-line-clamp: unset;
  display: block;
}
.oracle-saved-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.oracle-saved-date {
  font-size: 11px;
  color: rgba(232,225,214,0.55);
  font-style: italic;
}
.oracle-saved-delete {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(232,225,214,0.65);
  width: 22px;
  height: 22px;
  line-height: 1;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  padding: 0;
}
.oracle-saved-delete:hover {
  background: rgba(220,80,80,0.25);
  border-color: rgba(220,80,80,0.5);
  color: #fff;
}
.oracle-saved-card-body {
  font-size: 13px;
  line-height: 1.5;
  color: #e8e1d6;
  padding: 4px 14px 12px 14px;
  border-top: 1px solid rgba(212,175,55,0.15);
}

/* ── Mana Score section — warm-white (NOT gold) tint per user direction.
   Peer to Stability in the deck-detail page hierarchy; same .benchmark-
   section structure for layout parity with Sim Score / Stability. The
   colour key is a soft cream / eggshell — distinct from gold's
   yellow-saturated hue and from Stability's lavender. */
.mana-section {
  border: 1px solid rgba(244, 232, 213, 0.42) !important;
  background: linear-gradient(135deg,
    rgba(244, 232, 213, 0.20) 0%,
    rgba(232, 220, 200, 0.10) 55%,
    rgba(220, 208, 188, 0.08) 100%) !important;
  box-shadow: 0 0 26px rgba(244, 232, 213, 0.18) inset,
              0 0 14px rgba(244, 232, 213, 0.14) !important;
}
.mana-section .gauntlet-score-label {
  color: #f4e8d5;
}
.mana-score-display .gauntlet-overall,
.mana-score-display .score-suffix-inline {
  color: #f4e8d5 !important;
  text-shadow: 0 0 26px rgba(244, 232, 213, 0.45);
}
/* Hide the −PTS sub-line on chips so the Mana header reads as cleanly
   as Sim Score / Stability (matches their compact chip styling). */
.mana-section .bm-group-sub { display: none; }
.mana-body {
  padding: 6px 20px 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
}
/* The mana chart stack lives inside .mana-body. Reset its own outer
   margins so it doesn't accumulate padding-on-padding with the body. */
.mana-body > .mana-curve {
  margin-top: 0;
}

/* ============================================================
   Toast stack — bottom-right transient notices
   ============================================================ */
.toast-stack {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;  /* don't block clicks under the stack */
}
.toast {
  pointer-events: auto;
  min-width: 220px;
  max-width: 360px;
  background: linear-gradient(135deg, #1d1657 0%, #14104a 60%, #0a0735 100%);
  border: 1px solid rgba(124, 142, 248, 0.45);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #e9e3ff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.toast-visible {
  opacity: 1;
  transform: translateY(0);
}
.toast-error {
  border-color: rgba(220, 80, 110, 0.55);
  color: #ffd0d8;
}
/* Collapse/Expand all toggle in deck detail action bar */
/* Icon-only buttons in the deck-detail action bar */
.md-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  min-width: 0;
}
.md-icon-btn svg { display: block; }

/* ── Mana & Colour: 3 stacked sub-boxes (Mana Curve / Mana per Turn / Color Pressure) ── */
.mana-curve-stacked {
  display: flex;
  flex-direction: column;
  gap: 12px;        /* match .md-gauntlet-body gap so all subsections are even */
  /* The base .mana-curve rule (line ~6158) adds a 1px white-ish
     border-bottom + 14px padding-bottom + 20px margin-bottom for the
     standalone variant. In the stacked deck-analysis layout those become
     a visible line and ~34px gap between Mana per Turn and the Color
     Pressure box below — the user's reported "line between sections"
     bug. Override all three to nothing; spacing is handled by the
     `margin-top: 12px` on .cp-cov-apex-box and .cp-cov-donuts-box. */
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.gb-subbox-mana-row {
  /* Inherits .gb-subbox box styling so frames match Score breakdown.
     All charts in this section now share Mana per Turn's 180px height
     (matching ApexCharts chart.height in each _init…). The 240px
     min-height is chart 180 + header ~30 + caption header ~30 — tight
     to the content so no subsection feels visually taller than its
     neighbours. */
  min-height: 240px;
}
.gb-subbox-row {
  display: grid;
  /* Score-column width: 260 → 195 → 146 (two sequential ≈25% reductions
     per user feedback — the score-rail text was eating real estate that
     the charts on the left wanted). 146px is ~108px of usable text width
     after the 1px left border + 18px padding; the tightest live label
     ("9 ramp pieces" + paragraph) still fits cleanly because the score
     digits scale via font-size, not by stretching the column. */
  grid-template-columns: minmax(0, 1fr) 146px;
  gap: 20px;
  align-items: stretch;     /* let inner charts use the row's full height */
}
.gb-subbox-chart {
  min-width: 0;
  /* Cap the chart column so a tall SVG (e.g. the Color Pressure stress
     chart, intrinsic 160px) doesn't push the subbox taller than the
     Mana Curve / Mana per Turn rows. */
  max-height: 220px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.gb-subbox-caption {
  border-left: 1px solid var(--border);
  padding-left: 18px;
}
.gb-subbox-caption .mc-score-block { padding: 0; }
.mc-stats-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--text-dim);
}
@media (max-width: 720px) {
  .gb-subbox-row { grid-template-columns: 1fr; }
  .gb-subbox-caption { border-left: none; border-top: 1px solid var(--border); padding-left: 0; padding-top: 14px; }
}

/* Larger captions in the right rail of each Mana sub-box */
.gb-subbox-caption .mc-score-value     { font-size: 1.45rem; margin-top: 0; }
.gb-subbox-caption .mc-score-num       { font-size: 2.4rem; margin-top: 4px; }
.gb-subbox-caption .mc-score-denom     { font-size: 1.05rem; }
.gb-subbox-caption .mc-score-archetype { font-size: 13px; margin-top: 4px; }
.gb-subbox-caption .mc-score-desc      { font-size: 14px; line-height: 1.55; margin-top: 10px; }
/* ============================================================
   Pending change overlay on card-row-edit rows
   Added → green, Removed → red strikethrough, Changed → yellow, Swap → purple
   ============================================================ */
.card-row-pending {
  position: relative;
  border-radius: 6px;
  margin: 2px 0;
  padding-right: 6px;
}
.card-row-pending-add {
  background: linear-gradient(90deg, rgba(80, 200, 130, 0.16) 0%, rgba(80, 200, 130, 0.04) 100%);
  box-shadow: inset 3px 0 0 #50c882;
}
.card-row-pending-remove {
  background: linear-gradient(90deg, rgba(220, 80, 110, 0.16) 0%, rgba(220, 80, 110, 0.04) 100%);
  box-shadow: inset 3px 0 0 #dc506e;
}
.card-row-pending-change {
  background: linear-gradient(90deg, rgba(242, 194, 91, 0.16) 0%, rgba(242, 194, 91, 0.04) 100%);
  box-shadow: inset 3px 0 0 #f2c25b;
}
.card-row-pending-swap {
  background: linear-gradient(90deg, rgba(167, 139, 250, 0.16) 0%, rgba(167, 139, 250, 0.04) 100%);
  box-shadow: inset 3px 0 0 #a78bfa;
}
.card-row-name-removed {
  text-decoration: line-through;
  text-decoration-color: rgba(220, 80, 110, 0.85);
  text-decoration-thickness: 2px;
  color: rgba(255, 255, 255, 0.55);
}
.card-row-pending-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  margin-left: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-dim);
}
.card-row-pending-add    .card-row-pending-tag { background: rgba(80, 200, 130, 0.22); color: #b8f0d0; }
.card-row-pending-remove .card-row-pending-tag { background: rgba(220, 80, 110, 0.22); color: #ffc0cd; }
.card-row-pending-change .card-row-pending-tag { background: rgba(242, 194, 91, 0.22); color: #ffe7a8; }
.card-row-pending-swap   .card-row-pending-tag { background: rgba(167, 139, 250, 0.22); color: #d6c5ff; }

.cer-revert {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-width: 28px;
  padding: 0 !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1;
}
.cer-revert:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-bright);
}

/* "Pending removals" group header is more muted than normal groups */
.card-group-pending-removed .card-group-header {
  color: rgba(220, 80, 110, 0.75);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Discard button — slightly red so it visually pairs with Save */
.cer-discard {
  border-color: rgba(220, 80, 110, 0.45) !important;
  color: #ffc0cd;
}
.cer-discard:hover:not(:disabled) {
  background: rgba(220, 80, 110, 0.14);
  border-color: rgba(220, 80, 110, 0.75) !important;
  color: #fff;
}

/* Score badge shown next to each version row's timestamp */
/* Version diff popup */
.ver-diff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ver-diff-col { display: flex; flex-direction: column; gap: 6px; }
.ver-diff-head {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 4px;
}
.ver-diff-add { background: rgba(79,194,144,.15); color: rgba(79,194,144,.95); }
.ver-diff-rem { background: rgba(220,100,100,.15); color: rgba(220,110,110,.95); }
.ver-diff-list {
  margin: 0; padding: 0; list-style: none;
  max-height: 240px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 3px;
}
.ver-diff-list li { font-size: 13px; color: var(--text); }
.ver-diff-name { cursor: default; }
.ver-compare-btn { font-size: 11px; padding: 3px 8px; }

.ver-score {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  background: rgba(124, 142, 248, 0.16);
  color: #c4b5fd;
  font-family: var(--font-display, "Cormorant Garamond", serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ver-score-empty {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-faint);
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 11px;
  font-weight: 500;
}
.ver-row-baseline .ver-score {
  background: rgba(242, 194, 91, 0.18);
  color: #ffe7a8;
}

/* Make the SVG glyph in the revert button render at 14×14 inside the
   28×28 button bounds (overrides any global svg sizing) */
.cer-revert svg { display: block; width: 14px; height: 14px; }

/* ============================================================
   Base modal backdrop + panel (centred, flex)
   These were removed alongside the baseline feature; restoring
   them so the seer-warning modal (and any future modal) lands
   in the middle of the viewport instead of inlining at the bottom.
   ============================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(2, 2, 18, 0.65);
  backdrop-filter: blur(4px);
}
.modal-backdrop[hidden] { display: none; }
.modal-panel {
  background: linear-gradient(160deg, #0c1240 0%, #131a55 40%, #1b1278 100%);
  border: 1px solid rgba(124, 142, 248, 0.45);
  border-radius: 12px;
  width: min(560px, 100%);
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.modal-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.modal-close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 22px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.modal-close:hover { color: #fff; background: rgba(255,255,255,0.08); }

/* ============================================================
   Seer warning modal — singleton-rule violation
   Reuses the cosmic .oracle-chat-bg backdrop with a fixed
   max-width + thematic seer copy.
   ============================================================ */
.seer-warning-backdrop { z-index: 1500; }
.seer-warning-panel {
  background: transparent;       /* let .oracle-chat-bg show through */
  border: 1px solid rgba(167, 139, 250, 0.55);
  box-shadow: 0 20px 70px rgba(60, 20, 160, 0.65),
              0 0 0 1px rgba(167, 139, 250, 0.15);
  width: min(540px, 100%);
  max-height: 86vh;
  overflow: hidden;
}
.seer-warning-bg {
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
}
.seer-warning-header {
  position: relative;
  z-index: 2;
  border-bottom: 1px solid rgba(167, 139, 250, 0.22);
}
.seer-warning-header .modal-title {
  font-family: var(--font-display, "Cormorant Garamond", serif);
  font-size: 18px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.01em;
  color: #ffe7a8;
}
.seer-warning-body {
  position: relative;
  z-index: 2;
  padding: 16px 22px 6px;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.6;
}
.seer-warning-lead {
  font-family: var(--font-display, "Cormorant Garamond", serif);
  font-size: 17px;
  font-style: italic;
  color: #e9d5ff;
  margin: 0 0 12px;
}
.seer-warning-sub {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 6px 0 6px;
}
.seer-warning-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
}
.seer-warning-list li {
  padding: 4px 0;
  font-size: 13.5px;
  color: var(--text-bright);
  border-bottom: 1px dashed rgba(255,255,255,0.05);
}
.seer-warning-list li:last-child { border-bottom: none; }
.seer-warn-qty {
  display: inline-block;
  min-width: 32px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
  font-weight: 700;
  color: #ff8090;
  margin-right: 8px;
}
.seer-warning-foot {
  font-size: 12.5px;
  color: var(--text-dim);
  margin: 0 0 6px;
}
.seer-warning-actions {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 22px 18px;
  border-top: 1px solid rgba(167, 139, 250, 0.22);
}
.seer-warn-cancel { padding: 0 14px; height: 32px; }
.seer-warn-fix {
  padding: 0 14px;
  height: 32px;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.30) 0%, rgba(99, 102, 241, 0.30) 100%);
  border-color: rgba(167, 139, 250, 0.75) !important;
  color: #fff !important;
}
.seer-warn-fix:hover {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.45) 0%, rgba(99, 102, 241, 0.45) 100%);
}

/* ── Quick Add card search bar (edit mode) ───────────────────────────────── */
/* Phase 2: bar is now a vertical stack — input row + filter chips row. */
.card-add-bar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  margin: 0 0 14px;
  background: rgba(20, 14, 38, 0.55);
  border: 1px solid rgba(177, 150, 246, 0.30);
  border-radius: 10px;
  transition: border-color 0.15s;
}
/* ── Floating Replace popup ─────────────────────────────────────────────────
   Centered fixed panel. Intentionally NO full-screen backdrop — the page
   behind it stays visible and undimmed. */
.md-replace-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  /* Match the Quick Add (advanced search) bar width used in the deck
     builder so the popup feels like the same surface, not a narrower one. */
  width: min(960px, 94vw);
  height: min(720px, 88vh);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(36, 24, 70, 0.98) 0%, rgba(22, 14, 46, 0.98) 100%);
  border: 1px solid rgba(196, 168, 255, 0.45);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(196, 168, 255, 0.10);
  padding: 14px 16px 12px;
}
.md-replace-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.md-replace-popup-title {
  /* Card name dominates the header; the prefix/suffix words read as
     small caps muted labels that frame it. */
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 8px;
  color: rgba(231, 220, 255, 0.95);
}
.md-replace-popup-prefix,
.md-replace-popup-suffix {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 0.65);
  flex-shrink: 0;
}
.md-replace-popup-cardname {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--text-bright, #fff);
  /* Inline so hover bounds match the actual letters (consistent with
     every other hoverable card name in the app). */
  display: inline;
  overflow-wrap: anywhere;
}
.md-replace-popup-close {
  background: transparent;
  border: 1px solid rgba(177, 150, 246, 0.30);
  color: rgba(231, 220, 255, 0.85);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.md-replace-popup-close:hover {
  background: rgba(177, 150, 246, 0.15);
  color: #fff;
}
.md-replace-popup-body {
  overflow-y: auto;
  flex: 1 1 auto;
}
.md-replace-popup-body .card-add-bar {
  margin-bottom: 0;
}
.card-add-bar:focus-within { border-color: rgba(177, 150, 246, 0.65); }
.card-add-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-add-icon {
  color: rgba(177, 150, 246, 0.70);
  flex-shrink: 0;
}
.card-add-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  padding: 4px 0;
}
.card-add-input::placeholder { color: var(--text-faint); }
.card-add-clear {
  background: none; border: none; padding: 2px 4px; cursor: pointer;
  color: rgba(255,255,255,0.35); font-size: 13px; line-height: 1;
  border-radius: 3px; flex-shrink: 0;
  transition: color 0.15s;
}
.card-add-clear:hover { color: rgba(255,255,255,0.75); }

/* ── Phase 2 filter chips ─────────────────────────────────────────────── */
.card-add-filters {
  display: flex;
  flex-wrap: wrap;          /* mobile / narrow widths */
  align-items: center;
  gap: 8px;
  position: relative;       /* anchor for .card-add-chip-menu */
}
/* Commander filter bar reuses the deck-edit filter-bar visual language */
.builder-cmd-bar { margin: 0 0 20px; }
.card-add-chip {
  background: rgba(36, 28, 56, 0.65);
  border: 1px solid rgba(177, 150, 246, 0.25);
  color: var(--text-dim, #cfc8e8);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-family: inherit;
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.card-add-chip:hover {
  background: rgba(50, 38, 80, 0.85);
  border-color: rgba(177, 150, 246, 0.55);
  color: var(--text);
}
.card-add-chip-active {
  background: rgba(177, 150, 246, 0.20);
  border-color: rgba(177, 150, 246, 0.75);
  color: var(--text);
}
.card-add-chip-x {
  display: inline-block;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  padding: 0 2px;
  border-radius: 4px;
  color: rgba(177, 150, 246, 0.95);
  cursor: pointer;
}
.card-add-chip-x:hover { color: #fff; background: rgba(177, 150, 246, 0.35); }

/* Floating dropdown that opens under a chip when clicked. */
.card-add-chip-menu {
  position: absolute;
  z-index: 200;
  min-width: 160px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg-elev-2, #1a1327);
  border: 1px solid rgba(177, 150, 246, 0.45);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.card-add-chip-menu-item {
  background: transparent;
  border: none;
  color: var(--text-dim, #cfc8e8);
  text-align: left;
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.08s, color 0.08s;
}
.card-add-chip-menu-item:hover {
  background: rgba(177, 150, 246, 0.18);
  color: var(--text);
}
.card-add-chip-menu-item-active {
  background: rgba(177, 150, 246, 0.30);
  color: var(--text);
}

/* ── Range slider (CMC / Price chips) ────────────────────────────────────
   Two-handle slider that snaps to discrete tick stops. The top stop is
   the open-top "+" bucket (no upper bound). Default = full range, which
   the chip treats as no filter. */
.card-add-chip-menu-range {
  min-width: 360px;
  padding: 12px 14px 18px;
  gap: 10px;
}
.card-add-chip-menu-range .rs-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 0.85);
}
.card-add-chip-menu-range .rs-title { flex: 0 0 auto; }
.card-add-chip-menu-range .rs-clear {
  background: transparent; border: none;
  color: #6ea8ff; font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  cursor: pointer; padding: 2px 4px;
}
.card-add-chip-menu-range .rs-clear:hover { color: #9bc1ff; }
.card-add-chip-menu-range .rs-readout {
  margin-left: auto;
  color: rgba(231, 220, 255, 0.95);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
}
.card-add-chip-menu-range .rs-rail {
  position: relative;
  height: 36px;
  margin: 14px 18px 6px;
  user-select: none;
  touch-action: none;
}
.card-add-chip-menu-range .rs-track-bg,
.card-add-chip-menu-range .rs-track-fill {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 26px;
  border-radius: 999px;
  pointer-events: none;
}
.card-add-chip-menu-range .rs-track-bg {
  left: 0; right: 0;
  background: rgba(40, 28, 78, 0.85);
  border: 1px solid rgba(177, 150, 246, 0.22);
}
.card-add-chip-menu-range .rs-track-fill {
  background: rgba(120, 96, 200, 0.32);
  border: 1px solid rgba(177, 150, 246, 0.35);
}
.card-add-chip-menu-range .rs-tick {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18px; height: 26px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  cursor: pointer;
}
.card-add-chip-menu-range .rs-tick-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(196, 181, 253, 0.55);
}
.card-add-chip-menu-range .rs-tick-label {
  position: absolute;
  bottom: -16px;
  font-size: 10px;
  color: rgba(196, 181, 253, 0.7);
  white-space: nowrap;
}
.card-add-chip-menu-range .rs-handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(180deg, #3b2a76 0%, #261856 100%);
  border: 2px solid rgba(196, 181, 253, 0.85);
  box-shadow: 0 2px 6px rgba(0,0,0,0.45);
  cursor: grab;
  display: flex; align-items: center; justify-content: center;
}
.card-add-chip-menu-range .rs-handle:active,
.card-add-chip-menu-range .rs-handle:focus {
  cursor: grabbing;
  outline: none;
  border-color: #b196f6;
  box-shadow: 0 0 0 3px rgba(177, 150, 246, 0.30), 0 2px 6px rgba(0,0,0,0.45);
}
.card-add-chip-menu-range .rs-handle-bubble {
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ── Colour picker (multi-select chip) ─────────────────────────────────── */
/* Inline WUBRG pip in the chip badge — small coloured circle, sized to sit
   alongside the chip label text. */
.card-add-chip-pip {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10);
  vertical-align: middle;
}
.card-add-chip-pip-c {
  background: transparent;
  color: var(--text-dim);
  font-size: 8.5px;
  font-weight: 700;
  line-height: 9px;
  text-align: center;
  border-color: rgba(255, 255, 255, 0.35);
}
/* Coloured letter badge in the active chip pill — preferred over tiny
   pips because letters are unambiguous (Black vs Red dots at 11px were
   easy to confuse). */
.card-add-chip-letter {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1;
  vertical-align: middle;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.55);
}
.card-add-chip-letter-c {
  color: var(--text-faint, rgba(255,255,255,0.50));
  text-shadow: none;
}
.card-add-chip-pips {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0 2px;
}
/* Stacked checkbox rows inside the dropdown. */
.card-add-chip-menu-multi { min-width: 200px; }
/* Power chip — grid of toggleable pill buttons (multi-select). Compact
   3-column layout so 0-10 + 10+ fits in ~4 rows without scrolling. */
.card-add-chip-menu-grid .card-add-chip-menu-grid-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 2px;
  margin-bottom: 6px;
}
.card-add-chip-power-btn {
  background: rgba(36, 28, 56, 0.65);
  border: 1px solid rgba(177, 150, 246, 0.25);
  color: var(--text-dim, #cfc8e8);
  border-radius: 6px;
  padding: 6px 4px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.card-add-chip-power-btn:hover {
  background: rgba(50, 38, 80, 0.85);
  border-color: rgba(177, 150, 246, 0.55);
  color: var(--text);
}
.card-add-chip-power-on {
  background: rgba(177, 150, 246, 0.30) !important;
  border-color: rgba(177, 150, 246, 0.85) !important;
  color: var(--text) !important;
}
/* All / Any segmented control at the top of the colour picker. */
.card-add-chip-menu-segmented {
  display: flex;
  margin: 2px 4px 8px;
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(177, 150, 246, 0.20);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}
.card-add-chip-menu-seg {
  flex: 1 1 0;
  background: transparent;
  border: none;
  color: var(--text-dim, #cfc8e8);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.card-add-chip-menu-seg:hover {
  color: var(--text);
  background: rgba(177, 150, 246, 0.10);
}
.card-add-chip-menu-seg-on {
  background: rgba(177, 150, 246, 0.30);
  color: var(--text);
}
.card-add-chip-menu-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--text-dim, #cfc8e8);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.08s, color 0.08s;
}
.card-add-chip-menu-check:hover {
  background: rgba(177, 150, 246, 0.14);
  color: var(--text);
}
.card-add-chip-menu-check-on {
  background: rgba(177, 150, 246, 0.22);
  color: var(--text);
}
/* Colour rows for colours outside the commander's identity envelope. */
.card-add-chip-menu-check-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: transparent;
}
.card-add-chip-menu-check-disabled:hover {
  background: transparent;
  color: var(--text-dim);
}
.card-add-chip-menu-check-disabled input { pointer-events: none; }
.card-add-chip-menu-check input[type="checkbox"] {
  margin: 0;
  accent-color: rgba(177, 150, 246, 0.95);
}
.card-add-chip-menu-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 4px;
  padding: 6px 6px 2px;
}
.card-add-chip-menu-link {
  background: transparent;
  border: none;
  color: var(--text-faint);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  padding: 4px 6px;
  text-decoration: underline dotted transparent;
}
.card-add-chip-menu-link:hover {
  color: var(--text);
  text-decoration-color: rgba(177, 150, 246, 0.55);
}
.card-add-chip-menu-done {
  background: rgba(177, 150, 246, 0.22);
  border: 1px solid rgba(177, 150, 246, 0.45);
  color: var(--text);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  padding: 4px 12px;
  cursor: pointer;
}
.card-add-chip-menu-done:hover {
  background: rgba(177, 150, 246, 0.32);
}

/* Reset button is a quiet text link. */
.card-add-reset {
  background: transparent;
  border: none;
  color: var(--text-faint);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  padding: 4px 6px;
  margin-left: auto;        /* push to right edge */
  text-decoration: underline dotted transparent;
  transition: color 0.12s, text-decoration-color 0.12s;
}
.card-add-reset:hover {
  color: var(--text);
  text-decoration-color: rgba(177, 150, 246, 0.65);
}
.card-add-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 100;
  /* Up to 50 results — taller dropdown with scrolling for the rest. */
  max-height: 560px;
  overflow-y: auto;
  background: var(--bg-elev-2, #1a1327);
  border: 1px solid rgba(177, 150, 246, 0.35);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  padding: 4px;
}
.card-add-empty {
  padding: 14px;
  color: var(--text-dim);
  font-size: 13px;
  text-align: center;
}
.card-add-result {
  /* Flex (was grid 1fr auto auto auto) — the grid version could let the
     last cell wrap to its own row on narrow widths, which stretched the
     "+ ADD" tag full-width. Flex with min-width:0 on the name column
     guarantees the name ellipsizes first instead of pushing others to
     wrap. */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, opacity 0.12s;
}
.card-add-result:hover {
  background: rgba(177, 150, 246, 0.10);
}
.card-add-result-name {
  flex: 1 1 auto;
  min-width: 0;          /* allows ellipsis inside flex */
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Inner text-only span keeps the hover target glued to the actual letters,
   not the flex-stretched parent. */
.card-add-result-name-text {
  display: inline;
}
.card-add-result-pips {
  display: inline-flex;
  gap: 2px;
  font-size: 11px;
  color: var(--text-dim);
  flex-shrink: 0;
}
.card-add-result-type {
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}
.card-add-result-price {
  font-size: 11px;
  font-weight: 700;
  color: #4fc2a7;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 48px;
  text-align: right;
}
.card-add-result-price-missing {
  color: var(--text-faint);
  font-weight: 400;
}
.card-add-result-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
  /* Lock the tag to its natural pill size — never stretch across a row
     even if some parent layout collapses or rewraps. */
  flex: 0 0 auto;
  width: max-content;
  max-width: max-content;
  white-space: nowrap;
  line-height: 1.4;
}
.card-add-result-add {
  color: #6fe0a0;
}
/* ↔ Replace tag — purple to distinguish from the green + Add. Sits to
   the LEFT of the + Add pill so the eye reads "Replace … Add" in the
   same order as the actions are explained verbally. */
.card-add-result-tag-replace {
  color: #c4b5fd;
  margin-right: 4px;
  cursor: pointer;
}
.card-add-result-tag-replace:hover {
  background: rgba(196, 181, 253, 0.16);
  border-color: rgba(196, 181, 253, 0.85);
}
.card-add-result-in-deck {
  opacity: 0.40;
  pointer-events: auto;     /* still clickable so users get the flash feedback */
}
.card-add-result-in-deck .card-add-result-tag {
  color: var(--text-faint);
  border-color: rgba(255,255,255,0.2);
}
@keyframes card-add-flash {
  0%, 100% { background: transparent; }
  50%      { background: rgba(217, 122, 108, 0.15); }
}
.card-add-result-flash {
  animation: card-add-flash 0.5s ease;
}

/* ── ↔ Replace picker ──────────────────────────────────────────────────
   Floats above the result row that spawned it, lists the deck's
   mainboard cards with a quick search filter, and lets the user pick
   one to swap out. */
.card-replace-picker {
  /* Positioned via inline style by _openReplaceWithCardPicker.
     Fallback values keep the layout sane if JS doesn't manage to
     paint coords (e.g. tiny viewport edge case). */
  position: fixed;
  z-index: 250;
  background: var(--bg-elev-2, #1a1327);
  border: 1px solid rgba(196, 181, 253, 0.45);
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: crp-fade-in 0.15s ease;
}
@keyframes crp-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.crp-header {
  font-size: 13px;
  color: var(--text);
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.crp-header strong { color: #c4b5fd; }
.crp-search {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(177, 150, 246, 0.25);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  padding: 6px 10px;
  outline: none;
}
.crp-search:focus { border-color: rgba(196, 181, 253, 0.65); }
.crp-list {
  /* Was max-height:320px which sometimes overflowed past the picker on
     short viewports. flex:1 + min-height:0 makes the list claim leftover
     space inside the picker and scroll within those bounds — picker
     itself never exceeds its inline max-height. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.crp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-dim, #cfc8e8);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  padding: 6px 10px;
  cursor: pointer;
  transition: background 0.08s, color 0.08s;
}
.crp-row:hover {
  background: rgba(196, 181, 253, 0.18);
  color: var(--text);
}
.crp-row[hidden] { display: none; }
.crp-row-name {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crp-row-type {
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.crp-row-pips { flex-shrink: 0; }

/* Hover-target inner spans (text only — never the whole row/header). */
.crp-header-card,
.crp-row-name-text,
.crp-confirm-name-text { display: inline; }

/* ── Confirmation view (shown after a row is clicked) ──────────────────── */
.crp-confirm {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 12px 2px;
}
.crp-confirm-side {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.crp-confirm-out { border-left: 2px solid rgba(220, 110, 110, 0.65); }
.crp-confirm-in  { border-left: 2px solid rgba(122, 196, 144, 0.7); }
.crp-confirm-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.crp-confirm-out .crp-confirm-label { color: rgba(220, 110, 110, 0.95); }
.crp-confirm-in  .crp-confirm-label { color: rgba(122, 196, 144, 0.95); }
.crp-confirm-name {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-bright, #fff);
  line-height: 1.2;
  /* Allow long names to wrap inside the narrow column instead of overflowing. */
  overflow-wrap: anywhere;
}
/* Pull the meta row to the bottom of the panel so both sides align even
   when one card name wraps to 2 lines and the other doesn't. */
.crp-confirm-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-dim);
  margin-top: auto;
  padding-top: 6px;
}
.crp-confirm-meta .crp-row-type,
.crp-confirm-meta .crp-row-pips { display: inline-flex; align-items: center; }
.crp-confirm-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}
.crp-foot-confirm {
  justify-content: flex-end;
  gap: 8px;
}
.crp-back {
  /* Reuses .crp-cancel base look; sits at the left of the confirm footer. */
  margin-right: auto;
}
.crp-confirm-btn {
  background: linear-gradient(135deg, rgba(122, 196, 144, 0.22), rgba(122, 196, 144, 0.12));
  border: 1px solid rgba(122, 196, 144, 0.55);
  color: rgba(180, 230, 200, 0.95);
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 16px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.crp-confirm-btn:hover {
  background: linear-gradient(135deg, rgba(122, 196, 144, 0.32), rgba(122, 196, 144, 0.20));
  border-color: rgba(122, 196, 144, 0.85);
  color: #d6f4e1;
}
.crp-foot {
  display: flex;
  justify-content: flex-end;
  padding-top: 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 6px;
}
.crp-cancel {
  background: transparent;
  border: 1px solid rgba(177, 150, 246, 0.30);
  color: var(--text-dim);
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  padding: 4px 14px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.crp-cancel:hover {
  background: rgba(177, 150, 246, 0.18);
  color: var(--text);
}

/* Quick Add — loading states */
.card-add-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 14px;
  font-size: 13px;
  color: var(--text-dim);
}
.card-add-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(177, 150, 246, 0.25);
  border-top-color: #b196f6;
  border-radius: 50%;
  animation: card-add-spin 0.8s linear infinite;
}
@keyframes card-add-spin {
  to { transform: rotate(360deg); }
}
/* Spinner inside the input bar itself — sits at the right end */
.card-add-bar-loading::after {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid rgba(177, 150, 246, 0.25);
  border-top-color: #b196f6;
  border-radius: 50%;
  animation: card-add-spin 0.8s linear infinite;
  flex-shrink: 0;
}
/* Dim prior results while a new search is in flight (avoids empty flash) */
.card-add-results-stale {
  opacity: 0.45;
  pointer-events: none;
}

/* ============================================================
   ApexCharts sandbox — temporary, visible at the bottom of the
   Mana sub-box stack so we can compare against the working chart.
   Distinct dashed border + experiment chip so nobody mistakes it
   for the production chart.
   ============================================================ */
/* Apex-powered Mana Curve / Mana per Turn / Color Pressure sub-boxes.
   Match the production .gb-subbox panel styling exactly so they read as
   first-class sub-boxes (not a sandbox tile). Header text is white. */
.gb-subbox-mana-row > .gb-subbox-head {
  color: var(--text-bright);
}
.apex-sandbox-chart {
  width: 100%;
  /* Cap the chart cell height so the sandbox subbox matches the production
     Mana Curve row alongside it (which sits around 180–200px tall). */
  max-height: 200px;
}
.apex-sandbox-chart .mc-apex-chart {
  width: 100%;
  height: 180px;
}
.mc-apex-chart .apexcharts-canvas { background: transparent; }
.mc-apex-chart .apexcharts-tooltip {
  background: rgba(20, 16, 50, 0.96) !important;
  border: 1px solid rgba(167, 139, 250, 0.45) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  border-radius: 8px;
  color: var(--text-bright);
}
.mc-apex-chart .apexcharts-tooltip-title {
  background: rgba(124, 142, 248, 0.20) !important;
  border-bottom: 1px solid rgba(167, 139, 250, 0.35) !important;
  font-weight: 600;
}
/* Axis-title text ("Mana Cost", "Cards") — match the dim eyebrow style
   the rest of the deck panels use. */
.mc-apex-chart .apex-axis-title,
.mc-apex-chart .apexcharts-yaxis-title-text,
.mc-apex-chart .apexcharts-xaxis-title-text {
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: rgba(255, 255, 255, 0.45) !important;
}

/* Per-bar glow.
   Why single-shadow + GPU hint:
   Safari (WebKit) clips chained `filter: drop-shadow()` output to the
   source <path>'s bounding box, so stacked glows simply vanish there.
   Chrome composites them happily, which is why the previous triple-stack
   looked "crazy" in Chrome but invisible in Safari. A single, moderate
   drop-shadow renders consistently in both browsers — and toning the
   blur from 56px down to 14px also brings Chrome back to tasteful.
   will-change: filter is a hint that nudges Safari to allocate a
   compositing layer instead of skipping the filter outright on lower-end
   GPU paths.

   ApexCharts renders each bar in the distributed column chart as a
   separate <path> inside .apexcharts-series, in order, so we can target
   each by nth-of-type. */
/* Per-bar glow via inline SVG <filter> defs (see index.html). The filter
   regions use explicit oversized x/y/width/height so Safari renders the
   blur beyond the source path's bbox — CSS drop-shadow chains on SVG
   paths get clipped by WebKit. Each filter stacks 3 feGaussianBlurs +
   feMerge, the SVG-native equivalent of stacking drop-shadows. Alpha
   values are halved vs the original Chrome-only triple-stack so the
   chart reads as glowing without overpowering. */
.mc-apex-chart .apexcharts-series path { will-change: filter; }
.mc-apex-chart .apexcharts-series path:nth-of-type(1) { filter: url(#mc-glow-1); }
.mc-apex-chart .apexcharts-series path:nth-of-type(2) { filter: url(#mc-glow-2); }
.mc-apex-chart .apexcharts-series path:nth-of-type(3) { filter: url(#mc-glow-3); }
.mc-apex-chart .apexcharts-series path:nth-of-type(4) { filter: url(#mc-glow-4); }
.mc-apex-chart .apexcharts-series path:nth-of-type(5) { filter: url(#mc-glow-5); }
.mc-apex-chart .apexcharts-series path:nth-of-type(6) { filter: url(#mc-glow-6); }
.mc-apex-chart .apexcharts-series path:nth-of-type(7) { filter: url(#mc-glow-7); }


/* ── Mana per Turn ApexCharts sandbox (line/area chart) ───────────────── */
.mc-apex-chart-line {
  width: 100%;
  height: 180px;
}
.apex-sandbox-chart-line {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Disable the bar-specific drop-shadow stack on the line chart so it
   doesn't double-apply to area paths and line markers. */
.mc-apex-chart-line .apexcharts-series path,
.mc-apex-chart-line .apexcharts-series .apexcharts-area,
.mc-apex-chart-line .apexcharts-series circle {
  filter: none;
}
/* Soft glow on the line stroke + markers — matches the production
   indigo line look. */
.mc-apex-chart-line .apexcharts-line {
  filter:
    drop-shadow(0 0 4px rgba(124, 142, 248, 0.65))
    drop-shadow(0 0 16px rgba(124, 142, 248, 0.45));
}
.mc-apex-chart-line .apexcharts-series circle {
  filter:
    drop-shadow(0 0 4px rgba(124, 142, 248, 0.80))
    drop-shadow(0 0 12px rgba(124, 142, 248, 0.40));
}
/* Data labels on the line chart (Apex renders them as <text>) — keep the
   bar-chart white background-blob from creeping in. */
.mc-apex-chart-line .apexcharts-data-labels text {
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
}

/* ── Color Pressure ApexCharts sandbox ────────────────────────────────── */
.apex-sandbox-chart-cp {
  /* Override the default 200px chart cap — this tile has the colour-card
     column AND the bar chart side-by-side, so it needs room to breathe. */
  max-height: none;
}
/* ── CP sandbox layout — explicit flexbox, overrides the shared
   .gb-subbox-row grid AND the @media (max-width: 720px) collapse rule.
   Left cell holds the colour-card row + chart stacked; right cell holds
   the score block. Row uses `align-items: stretch` so the box height is
   driven by the LEFT column's natural content (cards + chart) — the
   right caption's `align-self: center` (further down) re-centers it
   without forcing the row to be taller than the left column needs.
   Previously this was `align-items: center` which created symmetric
   empty space above and below the left column whenever the right
   caption happened to be taller. */
.apex-sandbox-box-cp > .gb-subbox-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 24px !important;
  grid-template-columns: none !important;
}
.apex-sandbox-box-cp > .gb-subbox-row > .gb-subbox-chart {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-height: none !important;
  display: flex;
  flex-direction: column;
}
.apex-sandbox-box-cp > .gb-subbox-row > .gb-subbox-caption {
  /* Mirrors the 146px rail on .gb-subbox-row above. Must stay in lockstep
     with that value — the Color Pressure sandbox uses flex instead of
     grid, so the two declarations are independent and easy to drift. */
  flex: 0 0 146px !important;
  min-width: 0;
  border-left: 1px solid var(--border);
  padding-left: 20px;
  align-self: center;
}

/* ─── Color Pressure stand-alone box ────────────────────────────────
   Rendered OUTSIDE .mana-curve-stacked so it gets the full deck-detail
   width — the only way the grouped bars can render meaningfully wide
   (max bar width is container / (n_colors × 7) px; trapped inside the
   stacked column it capped at ~10px). */
.cp-standalone-box {
  margin-top: 14px;
}
.cp-standalone-box > .gb-subbox-row {
  /* Match the Mana Curve / Mana per Turn rail width so the row aligns
     visually with the stacked sub-boxes above it. */
  grid-template-columns: minmax(0, 1fr) 146px;
}
.cp-standalone-box .cp-standalone-chart {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Give the chart enough vertical room to feel like a real chart, not
     a sparkline. Combined with the SVG's preserveAspectRatio="none",
     this is what determines the rendered bar height. */
  min-height: 240px;
}
.cp-stand-chart {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.cp-stand-svg {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: block;
}
.cp-stand-legend {
  margin-top: 8px;
  justify-content: center;
}
/* X-axis CMC labels — HTML row beneath the SVG. Lives outside the
   stretched SVG so the digit glyphs render at their natural aspect
   ratio (preserveAspectRatio="none" inside the SVG distorts text). Each
   <span> is absolutely positioned at its bucket's center percentage and
   horizontally centered via translateX(-50%). */
.cp-stand-axis {
  position: relative;
  width: 100%;
  height: 18px;
  margin-top: 4px;
  user-select: none;
}
.cp-stand-cmc {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.42);
  font-size: 11px;
  font-weight: 600;
  font-family: "Inter", system-ui, sans-serif;
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
}

/* ─── Color Pressure Apex sandbox ──────────────────────────────────
   ApexCharts recreation of the SVG Color Pressure widget. The Apex
   chart provides the gradient + chart-level dropShadow for the
   "lit from above" body look; per-color halos are CSS filter
   drop-shadows keyed on Apex's seriesName attribute so each bar
   glows in its own hue (matches the hand-rolled SVG <filter>
   approach used by the production widget). */
.cp-sb-apex-box .gb-subbox-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cp-sb-apex-tag {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: rgba(124, 142, 248, 0.85);
  border: 1px solid rgba(124, 142, 248, 0.45);
  border-radius: 999px;
  padding: 2px 8px;
  text-transform: uppercase;
}
.cp-sb-apex-chart .mc-apex-chart {
  width: 100%;
  height: 100%;
}
.cp-sb-apex-chart .apexcharts-bar-area {
  /* Generic per-bar drop-shadow as a fallback. Per-series colour
     halos below override this with hue-specific glows. */
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.18));
}
.cp-sb-apex-chart .apexcharts-series[seriesName="White"] .apexcharts-bar-area {
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.45));
}
.cp-sb-apex-chart .apexcharts-series[seriesName="Blue"] .apexcharts-bar-area {
  filter: drop-shadow(0 0 5px rgba(98, 132, 255, 0.55));
}
.cp-sb-apex-chart .apexcharts-series[seriesName="Black"] .apexcharts-bar-area {
  filter: drop-shadow(0 0 5px rgba(180, 184, 200, 0.45));
}
.cp-sb-apex-chart .apexcharts-series[seriesName="Red"] .apexcharts-bar-area {
  filter: drop-shadow(0 0 5px rgba(244, 110, 110, 0.55));
}
.cp-sb-apex-chart .apexcharts-series[seriesName="Green"] .apexcharts-bar-area {
  filter: drop-shadow(0 0 5px rgba(80, 200, 120, 0.55));
}

/* ─── Color Pressure Coverage Donut sandbox ────────────────────────
   Five ApexCharts radialBar gauges, one per active colour, side by
   side. Each gauge fills to the colour's coverage % (capped at 100
   for the visual sweep; centre label always shows the true value).
   Hue-matched outer halo per cell mirrors the Mana Curve bloom. */
/* ── Color Pressure donut⇄bar toggle wrapper ─────────────────────────
   Both Apex charts live in here; only one pane shows at a time. The
   INACTIVE pane is taken out of flow (position:absolute) and hidden
   (visibility:hidden) but kept full-width (left/right:0) so its Apex
   chart container reports a non-zero clientWidth and renders correctly
   on first paint. Switching views is then a pure CSS swap — no Apex
   re-render needed. */
.cp-view-wrap {
  position: relative;
  /* Section gap — both inner boxes carry margin-top:12px individually
     (used when they rendered standalone/stacked). Inside the toggle
     wrapper that margin is zeroed below, so the gap from the card
     above lives here on the wrapper instead. Without this, the donut
     view (whose box margin we reset) sat flush against the card above
     while the bar view kept its 12px — inconsistent spacing. */
  margin-top: 12px;
}
.cp-view-pane {
  /* Active pane: normal flow, drives the wrapper height. */
  position: static;
  visibility: visible;
}
.cp-view-wrap[data-cp-view="donut"] .cp-view-pane-bar,
.cp-view-wrap[data-cp-view="bar"]   .cp-view-pane-donut {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  visibility: hidden;
  pointer-events: none;
}
/* Segmented toggle — sits top-right of the wrapper, just left of the
   box's crystal-ball help orb. */
.cp-view-toggle {
  position: absolute;
  top: 18px;
  right: 58px;
  z-index: 4;
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.cp-view-btn {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.cp-view-btn:hover { color: rgba(255, 255, 255, 0.85); }
.cp-view-btn.is-active {
  background: rgba(124, 142, 248, 0.22);
  color: rgba(255, 255, 255, 0.96);
  box-shadow: inset 0 0 0 1px rgba(124, 142, 248, 0.35);
}
@media (max-width: 640px) {
  /* On phones the toggle would collide with the title; drop it below
     the orb at the far right and shrink. */
  .cp-view-toggle { top: 14px; right: 14px; }
  .cp-view-btn { padding: 3px 7px; font-size: 10px; }
}

.cp-cov-donuts-box {
  /* Match the 12px gap inside .mana-curve-stacked so the donut chart
     visually pairs with the bar chart above it as one Color Pressure
     unit. Without this, the two boxes sit flush and read as a single
     box with a stray divider. */
  margin-top: 12px;
}
/* Inside the toggle wrapper, both boxes' own top margins are zeroed —
   the section gap lives on .cp-view-wrap instead, so donut and bar
   views space identically from the card above. */
.cp-view-pane > .cp-cov-donuts-box,
.cp-view-pane > .cp-cov-apex-box { margin-top: 0; }
.cp-cov-donuts-box .gb-subbox-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cp-cov-donuts-chart {
  width: 100%;
  padding: 8px 4px 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cp-cov-donuts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  align-items: end;
}
.cp-cov-donut-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.cp-cov-donut-name {
  font-family: var(--font-display, "Cormorant Garamond", serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  filter: drop-shadow(0 0 6px currentColor);
}
.cp-cov-donut-wrap {
  width: 100%;
  position: relative;
}
.cp-cov-donut-apex {
  width: 100%;
  height: 180px;     /* match Mana per Turn for uniform Mana subsection */
}
/* Glow halo per donut — keyed off data-colour so each gauge blooms
   in its own hue. SEVERE-status cells override below to bloom in
   danger red. Toned down to ~half intensity (per user note: the
   previous bloom was reading as too aggressive next to the bar
   chart's softer treatment). Blur radius dropped 14-18px → 9-11px,
   alpha cut to ~half of the previous values. */
.cp-cov-donut-cell[data-colour="W"] .cp-cov-donut-wrap {
  filter: drop-shadow(0 0 9px rgba(255, 255, 255, 0.18));
}
.cp-cov-donut-cell[data-colour="U"] .cp-cov-donut-wrap {
  filter: drop-shadow(0 0 10px rgba(98, 132, 255, 0.28));
}
.cp-cov-donut-cell[data-colour="B"] .cp-cov-donut-wrap {
  filter: drop-shadow(0 0 10px rgba(180, 184, 200, 0.22));
}
.cp-cov-donut-cell[data-colour="R"] .cp-cov-donut-wrap {
  filter: drop-shadow(0 0 10px rgba(244, 110, 110, 0.28));
}
.cp-cov-donut-cell[data-colour="G"] .cp-cov-donut-wrap {
  filter: drop-shadow(0 0 10px rgba(80, 200, 120, 0.28));
}
.cp-cov-donut-cell[data-status="cov-severe"] .cp-cov-donut-wrap {
  filter: drop-shadow(0 0 11px rgba(248, 113, 113, 0.35));
}
.cp-cov-donuts-chart .apexcharts-canvas { background: transparent; }

/* (Retired: .cp-cov-donuts-weakest* styled the "WEAKEST LINK Blue @
   55% coverage" callout under the donut grid. Removed when the donut
   widget was promoted to production — the per-donut status colour +
   percentage already communicate the same information at the affected
   ring without a separate callout.) */

/* ── Original Color Pressure bars: boost glow to match Mana Curve ──
   The hand-tuned SVG filter on the standalone Color Pressure box
   already gives a soft hue halo, but it stops well short of the
   Mana Curve bars' bloom. Layer an additional white drop-shadow on
   each bar so the overall lit-bar effect matches. */
.cp-stand-chart .cp-stand-svg rect[filter] {
  filter:
    drop-shadow(0 0 5px rgba(255, 255, 255, 0.18))
    drop-shadow(0 0 9px currentColor);
}
/* Apex legend markers default to small squares; size & soften them
   so they match the rest of the gauntlet chrome. */
.cp-sb-apex-chart .apexcharts-legend-marker {
  margin-right: 6px !important;
}

/* ─── Color Pressure Coverage sandbox ──────────────────────────────
   Horizontal divergence bars (per-colour coverage% vs 100% baseline)
   with status pills, axis legend, and a WEAKEST LINK callout. */
.cp-cov-apex-box {
  /* Space the bar chart away from the Mana per Turn box above it.
     Previously the two boxes sat flush and the user read the touching
     border edges as a stray line between sections. */
  margin-top: 12px;
}
.cp-cov-apex-box .gb-subbox-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cp-cov-apex-chart {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Sized to chart 180 + axis row + pills column so the box doesn't
     dwarf the other Mana subsection panels. */
  min-height: 240px;
}
.cp-cov-axis-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr 200px;
  align-items: center;
  padding: 0 12px 6px 12px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: rgba(255, 255, 255, 0.42);
  text-transform: uppercase;
}
.cp-cov-axis-left   { justify-self: start; padding-left: 40px; /* clears the yaxis label gutter */ }
.cp-cov-axis-center { justify-self: center; color: rgba(255, 255, 255, 0.62); }
.cp-cov-axis-right  { justify-self: end; }
.cp-cov-chart-pills {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}
.cp-cov-apex-mount {
  width: 100%;
  height: 100%;
}
.cp-cov-pills {
  /* Position-relative container — pill rows are absolutely positioned
     into this box by alignPills() in _initColorPressureCoverageApex
     so each pill lands at the exact vertical centre of its bar (Apex's
     internal padding shifts per category and the previous
     flex-space-around approximation drifted out of alignment for the
     shortest bars). */
  position: relative;
  min-width: 0;
  height: 100%;
  /* Default flex layout that runs until alignPills() fires (first
     paint, no-JS, or before Apex's mounted callback). Approximate
     placement so the column isn't visibly empty in that window. */
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 18px 4px 22px 0;
}
.cp-cov-pill-row {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  padding-right: 4px;
}
.cp-cov-pct {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.90);
  min-width: 56px;
  text-align: right;
}
.cp-cov-pill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid;
  text-transform: uppercase;
  min-width: 70px;
  text-align: center;
}
.cov-surplus  { color: #4ade80; border-color: rgba(74, 222, 128, 0.55); }
.cov-aligned  { color: #d4a840; border-color: rgba(212, 168, 64, 0.55); }
.cov-strained { color: #e08840; border-color: rgba(224, 136, 64, 0.55); }
.cov-severe   { color: #f87171; border-color: rgba(248, 113, 113, 0.55); }

/* (Retired: .cp-cov-weakest* styled the "WEAKEST LINK Blue @ 55%
   coverage" callout. Removed when the chart was promoted to production
   per user direction — the same information is now communicated by
   the SEVERE pill and the leftmost bar visually.) */

/* Per-bar glow on the Coverage chart. Apex's horizontal bars don't
   carry seriesName attributes (single series), so we apply a soft
   white drop-shadow across all bars; the bars' own fillColor varies
   per data point so the halo reads as adjacent to each colour. */
.cp-cov-apex-mount .apexcharts-bar-area {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.18));
}

/* Colour-card row inside the left cell. Sits ABOVE the chart, full width. */
.cp-color-grid-top {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  margin: 0 0 14px;
}
.cp-color-grid-top .cp-color-card {
  flex: 1 1 0;
  min-width: 110px;
  padding: 8px 10px;
}
.cp-apex-chart-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
}
/* ── Custom Color Pressure tooltip ─────────────────────────────────────
   Replaces Apex's shared tooltip (whose marker insisted on overlapping
   the label text). The chart's tooltip.custom callback returns this. */
.cp-tt {
  min-width: 230px;
  padding: 8px 12px;
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  color: var(--text-bright);
}
.cp-tt-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-bright);
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.cp-tt-row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
}
.cp-tt-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}
.cp-tt-name { color: var(--text); }
.cp-tt-val  { color: var(--text-bright); font-weight: 600; font-variant-numeric: tabular-nums; }
.mc-apex-chart-cp {
  width: 100%;
  /* Dropped from 240px → 190px. With Najeela-class decks topping out at
     ~6 pip-demand per turn, 240px left the chart canvas filling out
     ~100px of empty Y-axis grid above the bars, which read as "Color
     Pressure has dead space at the bottom" when sitting above the
     Deck Analysis tile row. 190px keeps the bars proportionally legible
     without the visual gap below the legend. */
  height: 190px;
}
/* The shared bar-chart per-bar glow stack was tuned for the 7-bucket Mana
   Curve palette; on the multi-series CP chart it bleeds onto neighbouring
   colour bars. Scope the bar drop-shadows off this chart and use a single
   subtle uniform glow instead. */
.mc-apex-chart-cp .apexcharts-series path {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.18));
}
/* Legend dots and label colours — Apex draws them inline; nudge to match
   the dim Inter look used elsewhere. Remove the 1px outline that Apex
   paints around each marker so they read as solid colour swatches. */
.mc-apex-chart-cp .apexcharts-legend-text {
  color: rgba(255, 255, 255, 0.65) !important;
  font-family: "Inter", sans-serif !important;
}
.mc-apex-chart-cp .apexcharts-legend-marker {
  border: none !important;
  box-shadow: none !important;
}
/* Apex tooltips render outside the chart container (appended to body via
   document fragments), so chart-scoped selectors don't reach them.
   Global rules below give every Apex tooltip a sane layout: marker is a
   small 9x9 swatch with real spacing to the label, and the tooltip box
   has a min-width so the shared rows don't get squashed. */
.apexcharts-tooltip {
  min-width: 200px;
}
.apexcharts-tooltip-series-group {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 4px 12px;
}
.apexcharts-tooltip-marker {
  width: 9px !important;
  height: 9px !important;
  margin-right: 0 !important;
  flex-shrink: 0;
  border: none !important;
  box-shadow: none !important;
}
.apexcharts-tooltip-text {
  font-family: "Inter", sans-serif;
  white-space: nowrap;
}

/* Vertically centre the Curve Fit / Ramp Velocity score caption against
   its chart cell. Without this the caption rides at the top because
   .gb-subbox-row defaults to align-items: start. (CP has its own flex
   layout above with its own align-items.) */
.gb-subbox-mana-row > .gb-subbox-row {
  align-items: center;
}

/* CP-specific tweaks layered on the .apex-sandbox-box-cp flex rules above. */
.apex-sandbox-box-cp .apex-sandbox-chart-cp {
  max-height: none;
  overflow: visible;
}
.apex-sandbox-box-cp .mc-apex-chart-cp {
  height: 220px;
}

/* ── Collapsible card groups (regular + edit mode) ───────────────────────── */
/* ── Card section stats bar (avg lands / hand + mana distribution) ────── */
.card-stats-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 6px 10px;
  margin: 0 0 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 7px;
  font-size: 12px;
  color: var(--text-dim);
}
.cstats-item { display: flex; align-items: center; gap: 5px; }
.cstats-icon { font-size: 13px; }
.cstats-item strong { color: var(--text); font-weight: 600; }
.cstats-sep { color: rgba(255,255,255,0.2); font-size: 14px; }
.cstats-pips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cstats-pip-bar { display: flex; align-items: center; gap: 4px; }
.cstats-pct { font-size: 11px; color: var(--text-dim); }
/* Editor banner — color-identity gradient fill (set inline), edge-to-edge with
   no framing border so it reads as one continuous band, not a boxed outline. */
.card-stats-bar--ci {
  justify-content: space-between;
  border: none;
  box-shadow: none;
  background-repeat: no-repeat;
}
.card-stats-bar--ci .cstats-item,
.card-stats-bar--ci .cstats-pct { color: rgba(232,228,248,0.88); }
.card-stats-bar--ci .cstats-item strong { color: #fff; }
.cstats-statrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.cstats-manapip {
  width: 17px; height: 17px; line-height: 17px; flex-shrink: 0;
}
.cstats-manapip svg { width: 11px; height: 11px; }

.card-groups-toolbar {
  display: flex;
  gap: 6px;
  margin: 4px 0 10px;
  justify-content: flex-end;
}
details.card-group-collapsible { padding: 0; }
details.card-group-collapsible > summary.card-group-header {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
details.card-group-collapsible > summary.card-group-header::-webkit-details-marker { display: none; }
.card-group-chevron {
  display: inline-block;
  width: 12px;
  font-size: 11px;
  color: var(--text-dim);
  transition: transform 0.15s ease;
}
details.card-group-collapsible:not([open]) > summary .card-group-chevron {
  transform: rotate(-90deg);
}
details.card-group-collapsible > .card-group-body { margin-top: 6px; }
details.card-group-collapsible:not([open]) > .card-group-body { display: none; }

/* Per-group edit-mode delta chips */
.card-group-deltas {
  display: inline-flex;
  gap: 6px;
  margin-left: 10px;
  flex-wrap: wrap;
}
.cgd {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  white-space: nowrap;
}
.cgd-add    { background: rgba(80, 200, 130, 0.18); color: #b8f0d0; border: 1px solid rgba(80, 200, 130, 0.35); }
.cgd-remove { background: rgba(220, 80, 110, 0.18); color: #ffc0cd; border: 1px solid rgba(220, 80, 110, 0.35); }
.cgd-change { background: rgba(242, 194, 91, 0.18); color: #ffe7a8; border: 1px solid rgba(242, 194, 91, 0.35); }
.cgd-swap   { background: rgba(124, 142, 248, 0.20); color: #c5cffb; border: 1px solid rgba(124, 142, 248, 0.40); font-weight: 600; }

/* ── Commander color identity pips ──────────────────────────────────────── */
/* Hero — sits between the title block and the rings.  Pip size is bumped
   so the icons read at a glance from across the hero. */
.deck-header-pips {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 16px 18px;
  flex-shrink: 0;
}
.deck-header-pips .mana-pip {
  width: 28px;
  height: 28px;
  font-size: 16px;
  box-shadow: 0 0 14px rgba(255,255,255,0.10), inset 0 1px 0 rgba(255,255,255,0.18);
}

/* My Decks list row — sits to the left of the metric bars, using the
   official Scryfall mana SVGs. */
.my-deck-row-pips {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* Fixed width so pips column stays the same width regardless of
     how many colors the commander has (1–5). 5 pips × 24px + 4 gaps × 4px = 136px. */
  width: 136px;
  flex-shrink: 0;
}
.my-deck-row-pips .mana-symbol {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55));
}

/* Hero — bigger, slightly glowing version of the same Scryfall SVGs. */
.deck-header-pips .mana-symbol {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.18));
}

/* When the hero gets tight (eg. on narrower viewports) wrap the OPTIMIZED
   pill below the score number so the pips have room to sit beside it. */
.deck-header-score-row { row-gap: 4px; }

/* ── Crystal-ball help orbs ─────────────────────────────────────────────── */
.help-orb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-left: 12px;
  vertical-align: middle;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: 1;
  transition: transform 0.18s ease, filter 0.18s ease;
  filter: drop-shadow(0 0 8px rgba(180, 160, 240, 0.55));
  animation: help-orb-pulse 3.4s ease-in-out infinite;
}
.help-orb svg { width: 100%; height: 100%; display: block; }
.help-orb:hover {
  transform: translateY(-1px) scale(1.08);
  filter: drop-shadow(0 0 16px rgba(210, 190, 255, 0.95));
  animation-play-state: paused;
}
.help-orb:focus-visible {
  outline: 2px solid rgba(190, 170, 240, 0.8);
  outline-offset: 3px;
  border-radius: 50%;
}
@keyframes help-orb-pulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(180, 160, 240, 0.55)); }
  50%      { filter: drop-shadow(0 0 14px rgba(210, 190, 255, 0.85)); }
}
.help-orb-inline {
  width: 22px;
  height: 22px;
  margin-left: 6px;
  animation: none;
  filter: drop-shadow(0 0 4px rgba(180, 160, 240, 0.45));
}

/* Corner-pinned variant — top-right of the hero card, half size. */
.help-orb-corner {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 19px;
  height: 19px;
  margin: 0;
  z-index: 3;
  animation: help-orb-soft-glow 4.2s ease-in-out infinite;
}
.help-orb-corner:hover {
  transform: scale(1.18);
  animation-play-state: paused;
}
/* Soft, gentle pulsing aura — bigger than the normal pulse, with a
   second offset layer so the glow feels alive instead of binary. */
@keyframes help-orb-soft-glow {
  0%, 100% {
    filter:
      drop-shadow(0 0 4px rgba(190, 170, 240, 0.45))
      drop-shadow(0 0 9px rgba(160, 140, 240, 0.20));
  }
  50% {
    filter:
      drop-shadow(0 0 9px rgba(220, 200, 255, 0.85))
      drop-shadow(0 0 18px rgba(160, 140, 240, 0.55));
  }
}

/* Hero needs to be a positioning context so the corner orb anchors. */
.deck-unified-header { position: relative; }

/* Help modal */
.help-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 6, 24, 0.62);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: help-fade-in 0.18s ease;
}
@keyframes help-fade-in { from { opacity: 0; } to { opacity: 1; } }
.help-modal {
  width: min(640px, 92vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, #14102e 0%, #1a1340 50%, #1f1550 100%);
  border: 1px solid rgba(190, 170, 240, 0.45);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(190,170,240,0.18) inset, 0 0 28px rgba(140,110,230,0.25) inset;
  overflow: hidden;
  animation: help-pop-in 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes help-pop-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.help-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(190,170,240,0.22);
  background: rgba(0,0,0,0.18);
}
.help-modal-header h3 {
  margin: 0;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 22px;
  font-weight: 600;
  color: #f5e6a8;
  letter-spacing: 0.02em;
}
.help-modal-close {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--text-dim);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}
.help-modal-close:hover { background: rgba(255,255,255,0.08); color: #fff; }
.help-modal-body {
  padding: 18px 22px 22px;
  overflow-y: auto;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.6;
}
.help-modal-body h4 {
  margin: 16px 0 6px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--p2);
  border-bottom: 1px dashed rgba(177,150,246,0.22);
  padding-bottom: 4px;
}
.help-modal-body h4:first-of-type { margin-top: 10px; }
.help-lede { margin: 0 0 8px; color: var(--text); }
.help-list { margin: 4px 0 0; padding-left: 22px; }
.help-list li { margin: 4px 0; }
.help-formula {
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(190,170,240,0.30);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  color: var(--text);
}
.help-formula-live {
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(190,170,240,0.22);
  border-radius: 8px;
  padding: 8px 14px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  text-align: center;
  color: var(--text);
}
.help-formula-live-dim { opacity: 0.65; font-size: 11px; margin-top: 4px; }
.help-empty {
  text-align: center;
  font-style: italic;
  color: var(--text-dim);
  padding: 8px 0;
}
.help-tier-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 18px;
  margin-top: 4px;
  font-size: 13px;
}
.help-tier-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.help-tier-dot.tier-strong       { background: var(--p4); box-shadow: 0 0 8px rgba(226,196,122,0.55); }
.help-tier-dot.tier-above        { background: var(--accent); box-shadow: 0 0 8px rgba(124,142,248,0.55); }
.help-tier-dot.tier-fair         { background: var(--p2); box-shadow: 0 0 8px rgba(177,150,246,0.55); }
.help-tier-dot.tier-underpowered { background: var(--p1); box-shadow: 0 0 8px rgba(217,122,108,0.55); }


/* Inline orb pushed to the far right of the sub-box heading row. */
.gb-subbox-head .help-orb {
  margin-left: auto;
}

/* ── Help popover (anchored, lightweight) ───────────────────────────────── */
.help-popover {
  position: absolute;
  z-index: 9990;
  width: min(380px, calc(100vw - 24px));
  background: linear-gradient(160deg, #14102e 0%, #1a1340 50%, #1f1550 100%);
  border: 1px solid rgba(190, 170, 240, 0.45);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.55),
              0 0 0 1px rgba(190,170,240,0.18) inset,
              0 0 22px rgba(140,110,230,0.25) inset;
  animation: help-pop-in 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.55;
}
.help-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(190,170,240,0.22);
  background: rgba(0,0,0,0.18);
  border-radius: 12px 12px 0 0;
}
.help-popover-header h4 {
  margin: 0;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 17px;
  font-weight: 600;
  color: #f5e6a8;
  letter-spacing: 0.02em;
}
.help-popover-close {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--text-dim);
  width: 22px;
  height: 22px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}
.help-popover-close:hover { background: rgba(255,255,255,0.08); color: #fff; }
.help-popover-body {
  padding: 12px 16px 14px;
}
.help-popover-body p { margin: 6px 0; }
.help-popover-body .help-list { padding-left: 20px; margin: 6px 0; }
.help-popover-body .help-formula {
  font-size: 13.5px;
  margin: 6px 0;
}
/* Arrow */
.help-popover-arrow {
  position: absolute;
  left: var(--arrow-x, 50%);
  top: -7px;
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, #14102e 0%, #1a1340 100%);
  border-top: 1px solid rgba(190, 170, 240, 0.45);
  border-left: 1px solid rgba(190, 170, 240, 0.45);
  transform: translateX(-50%) rotate(45deg);
}
.help-popover-up .help-popover-arrow {
  top: auto;
  bottom: -7px;
  border-top: none;
  border-left: none;
  border-right: 1px solid rgba(190, 170, 240, 0.45);
  border-bottom: 1px solid rgba(190, 170, 240, 0.45);
}

/* Inline orb in the score-breakdown tile header — sits after the score. */
.gb-tile-meta .help-orb { margin-left: 6px; align-self: center; }

/* Inline orb at the end of the Simulation Score rung chips. */
.sim-rungs-orb {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  align-self: center;
}
.sim-rungs-orb .help-orb { vertical-align: middle; }

/* ============================================================
   Commander Report — printable two-page overlay
   ============================================================
   Screen view: scrollable preview of what the printed PDF will
   look like, with a sticky toolbar at the top for Print/Close.
   @media print: hides everything else and renders the two
   .rpt-page sections at letter portrait. */

.rpt-loading {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  background: rgba(8, 6, 18, 0.65);
  z-index: 9000;
  color: var(--text-dim);
  font-size: 14px;
}
.rpt-overlay {
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: rgba(8, 6, 18, 0.85);
  overflow-y: auto;
  padding: 0 0 40px;
}
.rpt-toolbar {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px;
  background: rgba(8, 6, 18, 0.95);
  border-bottom: 1px solid rgba(177, 150, 246, 0.20);
  z-index: 1;
}
.rpt-print-btn, .rpt-close-btn { font-size: 13px; padding: 7px 18px; }

/* Each .rpt-page is sized like a US Letter portrait page. Centered in the
   overlay so the user sees a "paper preview" while still on screen. */
.rpt-page {
  width: 8.5in;
  min-height: 11in;
  margin: 24px auto;
  padding: 0.55in 0.55in 0.5in;
  background: #fdfaf2;
  color: #1a1620;
  font-family: "Cormorant Garamond", "Georgia", serif;
  font-size: 11pt;
  line-height: 1.45;
  box-shadow: 0 12px 48px rgba(0,0,0,0.55);
  position: relative;
  display: flex;
  flex-direction: column;
}

/* ── Page 1 — Hero header ──────────────────────────────────────────── */
.rpt-hero {
  position: relative;
  height: 1.6in;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 14px;
  background-color: #2b1a4d;
  background-image: var(--rpt-hero-art);
  background-size: cover;
  background-position: center 30%;
}
.rpt-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(8, 6, 18, 0.30) 0%,
    rgba(8, 6, 18, 0.75) 100%);
}
.rpt-hero-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 20px;
  color: #fff;
}
.rpt-hero-name {
  font-family: "Cormorant Garamond", serif;
  font-size: 28pt;
  font-weight: 600;
  line-height: 1.05;
  margin-bottom: 2px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
.rpt-hero-cmdr {
  font-family: "Inter", sans-serif;
  font-size: 11pt;
  font-style: italic;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.rpt-hero-meta {
  font-family: "Inter", sans-serif;
  font-size: 9.5pt;
  color: rgba(255,255,255,0.85);
  margin-top: 6px;
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.rpt-hero-meta .rpt-hero-sep { opacity: 0.5; }

/* ── Page 1 — Score block + chips row ──────────────────────────────── */
.rpt-row { display: flex; gap: 14px; margin-bottom: 14px; }
.rpt-row-score { align-items: stretch; }
.rpt-score-block {
  flex: 0 0 1.9in;
  background: #fff;
  border: 1px solid #e3d8c0;
  border-radius: 8px;
  padding: 10px 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.rpt-score-label {
  font-family: "Inter", sans-serif;
  font-size: 9pt;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #6b5d8a;
  font-weight: 700;
  margin-bottom: 4px;
}
.rpt-score-num {
  font-family: "Cormorant Garamond", serif;
  font-size: 36pt;
  font-weight: 700;
  line-height: 1;
  color: #1a1620;
}
.rpt-score-suffix { font-size: 14pt; color: #8a7da7; margin-left: 2px; }
.rpt-score-tier {
  font-family: "Inter", sans-serif;
  font-size: 10pt;
  font-weight: 700;
  color: #6c4eb4;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.rpt-chip-row { flex: 1; display: flex; gap: 10px; }
.rpt-chip {
  flex: 1;
  background: #fff;
  border: 1px solid #e3d8c0;
  border-radius: 8px;
  padding: 8px 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.rpt-chip-label {
  font-family: "Inter", sans-serif;
  font-size: 9pt;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: #6b5d8a;
  text-transform: uppercase;
}
.rpt-chip-val {
  font-family: "Cormorant Garamond", serif;
  font-size: 22pt;
  font-weight: 600;
}
.rpt-chip-deck .rpt-chip-val { color: #2f8b76; }
.rpt-chip-sim  .rpt-chip-val { color: #4a63c8; }

/* ── Page 1 — Two-column cards (bars + curve) ──────────────────────── */
.rpt-row-twocol { display: flex; gap: 14px; }
.rpt-row-twocol > .rpt-card { flex: 1; }
.rpt-card {
  background: #fff;
  border: 1px solid #e3d8c0;
  border-radius: 8px;
  padding: 10px 14px 12px;
  margin-bottom: 14px;
}
.rpt-section-head {
  font-family: "Inter", sans-serif;
  font-size: 9pt;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: #6b5d8a;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.rpt-bar-row {
  display: flex; align-items: center; gap: 8px;
  font-family: "Inter", sans-serif; font-size: 10pt;
  margin-bottom: 4px;
}
.rpt-bar-label { flex: 0 0 70px; color: #4a4258; }
.rpt-bar-track {
  flex: 1; height: 7px;
  background: #efe8d8; border-radius: 4px; overflow: hidden;
}
.rpt-bar-fill { height: 100%; border-radius: 4px; }
.rpt-bar-val { flex: 0 0 24px; text-align: right; color: #2a2236; font-weight: 700; font-size: 9pt; }

/* Mana curve — 8-column mini histogram. */
.rpt-curve { display: flex; align-items: flex-end; gap: 6px; height: 1.1in; }
.rpt-curve-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.rpt-curve-bar-wrap {
  flex: 1; width: 100%;
  display: flex; align-items: flex-end;
}
.rpt-curve-bar {
  width: 100%;
  background: linear-gradient(180deg, #6c4eb4 0%, #b196f6 100%);
  border-radius: 3px 3px 0 0;
  min-height: 1px;
}
.rpt-curve-num {
  font-family: "Inter", sans-serif;
  font-size: 8.5pt; font-weight: 700;
  color: #2a2236; margin-top: 2px;
}
.rpt-curve-cmc {
  font-family: "Inter", sans-serif;
  font-size: 8.5pt; color: #6b5d8a;
}

/* Composition row — one proportional bar + legend. */
.rpt-comp-bar {
  display: flex;
  height: 14px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
  background: #efe8d8;
}
.rpt-comp-seg { height: 100%; }
.rpt-comp-legend-row {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-family: "Inter", sans-serif; font-size: 9pt;
  color: #4a4258;
}
.rpt-comp-legend { display: inline-flex; align-items: center; gap: 5px; }
.rpt-comp-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 2px;
}

/* Strategy synopsis */
.rpt-strategy-card p {
  font-size: 11pt;
  margin: 0 0 6px;
  color: #2a2236;
}
.rpt-strategy-card .rpt-strategy-empty {
  color: #8a7da7;
  font-style: italic;
}

/* ── Page 2 — Deck list ────────────────────────────────────────────── */
.rpt-page-2 { padding-top: 0.55in; }
.rpt-page2-head {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #d4c3a0;
}
.rpt-page2-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 22pt; font-weight: 600;
  color: #1a1620;
}
.rpt-page2-sub {
  font-family: "Inter", sans-serif;
  font-size: 9pt;
  color: #6b5d8a;
  margin-top: 2px;
}
/* Two-column deck list so we can fit ~50 cards per page comfortably.
   Browser handles column overflow into page 3 automatically. */
.rpt-card-section {
  break-inside: avoid;
  margin-bottom: 10px;
}
.rpt-card-section-head {
  font-family: "Inter", sans-serif;
  font-size: 9pt; font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #6b5d8a;
  padding-bottom: 2px;
  margin-bottom: 4px;
  border-bottom: 1px solid #e3d8c0;
  display: flex; justify-content: space-between;
}
.rpt-card-section-count {
  font-weight: 600; color: #8a7da7;
}
.rpt-card-row {
  display: grid;
  grid-template-columns: 32px 1fr 28px 50px;
  align-items: baseline;
  font-family: "Inter", sans-serif;
  font-size: 10pt;
  line-height: 1.35;
  padding: 1px 0;
  color: #2a2236;
}
.rpt-card-qty   { font-weight: 700; color: #6b5d8a; }
.rpt-card-name  { color: #1a1620; }
.rpt-card-cmc   { text-align: right; color: #8a7da7; font-size: 9pt; }
.rpt-card-price { text-align: right; color: #2f8b76; font-size: 9pt; font-variant-numeric: tabular-nums; }
.rpt-card-commanders .rpt-card-row { font-weight: 600; }
.rpt-page2-foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #e3d8c0;
  font-family: "Inter", sans-serif;
  font-size: 8pt;
  color: #8a7da7;
  text-align: center;
}

/* Watermark — small logo + wordmark in the bottom-right corner. */
.rpt-watermark {
  position: absolute;
  bottom: 0.30in; right: 0.55in;
  display: flex; align-items: center; gap: 6px;
  font-family: "Inter", sans-serif;
  font-size: 7.5pt;
  letter-spacing: 0.18em;
  color: #b3a8d6;
  opacity: 0.65;
}
.rpt-watermark img { width: 18px; height: 18px; }

/* ── Print rules ───────────────────────────────────────────────────── */
@media print {
  @page { size: letter portrait; margin: 0.5in; }
  body.rpt-active > *:not(.rpt-overlay) { display: none !important; }
  body.rpt-active { background: #fff; }
  .rpt-overlay {
    position: static; padding: 0; background: #fff;
    overflow: visible;
  }
  .rpt-toolbar { display: none; }
  .rpt-page {
    margin: 0; box-shadow: none;
    page-break-after: always;
    width: auto;            /* let @page margins drive width */
    min-height: auto;
    padding: 0;
  }
  .rpt-page:last-of-type { page-break-after: auto; }
}

/* ── Matchup deviation bar chart (v9) ──────────────────────────────────── */
.matchup-empty {
  padding: 18px 12px;
  text-align: center;
  font-style: italic;
  color: var(--text-dim);
}
.matchup-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--text);
}
.matchup-callout-weak    { color: #ff9bb0; }
.matchup-callout-strong  { color: #9bb6ff; }
.matchup-callout-sep     { color: var(--text-faint); }
.matchup-callout-tier    { margin-left: auto; color: var(--text-dim); font-size: 12px; font-style: italic; }

.matchup-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.matchup-row {
  display: grid;
  grid-template-columns: 120px 1fr 56px;
  align-items: center;
  gap: 12px;
}
.matchup-row-noise { opacity: 0.65; }
.matchup-label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  color: var(--text);
}
.matchup-bar-track {
  position: relative;
  height: 18px;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
}
.matchup-bar-center {
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: rgba(255,255,255,0.32);
}
.matchup-bar {
  position: absolute;
  top: 1px;
  bottom: 1px;
  border: 1px solid;
  border-radius: 3px;
  /* JS scales `width` into 0–50% of the track so the bar never crosses the
     centre line. neg bars anchor on the right edge of the left half;
     pos bars on the left edge of the right half. */
}
.matchup-bar-neg { right: 50%; }
.matchup-bar-pos { left:  50%; }
.matchup-delta {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.matchup-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding: 0 8px;
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Legacy radar styling — no longer rendered anywhere. */
.gauntlet-radars, .matchup-panel { display: none; }

/* Help modal — matchup table */
.help-mu-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
  font-size: 12.5px;
}
.help-mu-table th,
.help-mu-table td {
  padding: 4px 8px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.help-mu-table th {
  font-family: "Inter", sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 700;
}

/* ── AI Recommendations panel — tabbed v2 ──────────────────────────────── */
.reco-panel { display: flex; flex-direction: column; }
.reco-panel .rec-header { margin-bottom: 8px; }

.reco-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 14px;
  background: rgba(0,0,0,0.22);
  border: 1px solid var(--border);
  border-radius: 999px;
  width: fit-content;
  max-width: 100%;
}
.reco-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.reco-tab:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.reco-tab.is-active {
  background: rgba(124,142,248,0.18);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(124,142,248,0.55);
}
.reco-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  border-radius: 8px;
  background: rgba(255,255,255,0.10);
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.reco-tab.is-active .reco-tab-count {
  background: rgba(255,255,255,0.20);
  color: #ffffff;
}
.reco-tabbody { animation: reco-fade-in 0.18s ease; }
@keyframes reco-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Strengths / Weaknesses callout cards */
.reco-callouts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.reco-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid;
  background: rgba(0,0,0,0.18);
  font-size: 13px;
  line-height: 1.55;
}
.reco-callout-good { border-color: rgba(122,196,144,0.40); background: rgba(122,196,144,0.08); }
.reco-callout-bad  { border-color: rgba(224,122,95,0.42);  background: rgba(224,122,95,0.08); }
.reco-callout-bullet {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 8px;
  border-radius: 50%;
}
.reco-callout-good .reco-callout-bullet { background: #7ac490; box-shadow: 0 0 10px rgba(122,196,144,0.55); }
.reco-callout-bad  .reco-callout-bullet { background: #e07a5f; box-shadow: 0 0 10px rgba(224,122,95,0.55); }
.reco-callout-body strong { color: #ffffff; font-weight: 600; }

/* Priority intro list inside the Swaps tab */
.reco-priority-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}
.reco-priority-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 10px 12px;
  border-left: 3px solid;
  border-radius: 0 8px 8px 0;
  background: rgba(0,0,0,0.18);
  font-size: 12.5px;
  line-height: 1.5;
}
.reco-priority-row.prio-high   { border-left-color: #e07a5f; }
.reco-priority-row.prio-medium { border-left-color: #e2c47a; }
.reco-priority-row.prio-low    { border-left-color: #7c8ef8; }
.reco-priority-tag {
  align-self: start;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: "Inter", sans-serif;
}
.prio-high   .reco-priority-tag { background: rgba(224,122,95,0.22); color: #ffc0b0; }
.prio-medium .reco-priority-tag { background: rgba(226,196,122,0.22); color: #ffe7a8; }
.prio-low    .reco-priority-tag { background: rgba(124,142,248,0.22); color: #bccaff; }
.reco-priority-title { font-weight: 600; color: var(--text); margin-bottom: 2px; }
.reco-priority-detail { color: var(--text-dim); }

/* Swap grid — 2 columns of card-art tiles */
.reco-swap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.reco-swap-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.reco-swap-col-head {
  font-family: "Inter", sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--border);
}
.reco-swap-col-add    { color: #b8f0d0; }
.reco-swap-col-remove { color: #ffc0cd; }

.reco-swap-tile {
  display: grid;
  grid-template-columns: 14px 56px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 8px;
  border: 1px solid;
  border-radius: 8px;
  background: rgba(0,0,0,0.20);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.reco-swap-tile:hover     { background: rgba(255,255,255,0.04); transform: translateY(-1px); }
.reco-swap-add            { border-color: rgba(122,196,144,0.30); }
.reco-swap-add:hover      { border-color: rgba(122,196,144,0.55); }
.reco-swap-remove         { border-color: rgba(224,122,95,0.30); }
.reco-swap-remove:hover   { border-color: rgba(224,122,95,0.55); }
.reco-swap-marker {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  line-height: 1;
}
.reco-swap-add    .reco-swap-marker { color: #7ac490; }
.reco-swap-remove .reco-swap-marker { color: #e07a5f; }
.reco-swap-art {
  width: 56px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  display: block;
  flex-shrink: 0;
}
.reco-swap-text { min-width: 0; }
.reco-swap-card {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reco-swap-reason {
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Themed hover tooltip — replaces the browser's white title= popup so the
   full reason text matches our dark palette. data-reason on the tile. */
.reco-swap-tile { position: relative; }
.reco-swap-tile::after {
  content: attr(data-reason);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  width: max-content;
  max-width: 360px;
  padding: 12px 14px;
  background: #0a0710;
  border: 1px solid rgba(124,142,248,0.70);
  border-radius: 10px;
  color: #e4dffb;
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 500;
  white-space: normal;
  text-align: left;
  box-shadow: 0 14px 36px rgba(0,0,0,0.95),
              0 0 0 999px transparent;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 4px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0.12s;
  pointer-events: none;
  z-index: 9999;
}
.reco-swap-tile:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0s;
}
/* Hovering raises the tile's z-index so its tooltip sits over neighbours */
.reco-swap-tile:hover { z-index: 100; }
/* Suppress empty tooltips when there's no reason text */
.reco-swap-tile[data-reason=""]::after,
.reco-swap-tile:not([data-reason])::after { content: none; }
.reco-swap-check {
  cursor: pointer;
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
}

/* Apply bar — single primary button + meta count */
.reco-apply-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.reco-apply-meta {
  flex: 1;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.reco-apply-meta.warn { color: #ffc0b0; }
.reco-apply-meta.ok   { color: #b8f0d0; }
.reco-apply-btn {
  white-space: nowrap;
}
.reco-apply-count {
  display: inline-block;
  padding: 0 6px;
  margin: 0 2px;
  border-radius: 4px;
  background: rgba(255,255,255,0.12);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .reco-swap-grid { grid-template-columns: 1fr; }
}

/* ── Color Pressure SANDBOX (proposed new widget) ───────────────────────
   Sits below the production Color Pressure widget in the deck-analysis
   body so the new effective-mana-per-turn model can be compared visually
   against the current % presentation. Promote to replace production
   once a variant lands. */
/* Position-relative so the corner help-orb anchors to the box. The frame
   colour itself comes from .gb-subbox (teal border), matching Mana Curve
   and Mana per Turn — no violet override anymore. */
.cps-sandbox-box {
  position: relative;
}
/* Inside the gb-subbox-row, the CPS body needs no caps — it lives in the
   left chart column and must use the full available width. */
.cps-sandbox-box > .gb-subbox-row > .gb-subbox-chart {
  max-height: none;
  overflow: visible;
}
.cps-sandbox-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0 0;
}
.cps-sandbox-explain {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-faint);
  padding: 8px 12px;
  background: rgba(0,0,0,0.18);
  border-radius: 6px;
  border-left: 2px solid rgba(124,142,248,0.45);
}
.cps-sandbox-explain strong {
  color: var(--text);
  font-weight: 600;
}

/* Per-color coverage rows: name | track | numbers | status */
.cps-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cps-row {
  display: grid;
  /* name | centred-deviation track | coverage% + status */
  grid-template-columns: 60px 1fr 140px;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
}
.cps-row-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
}
.cps-row-shares {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  justify-content: flex-end;
}
.cps-share-supply { font-weight: 600; }
.cps-share-demand { color: var(--text-dim); font-weight: 500; }
.cps-share-sep    { color: var(--text-faint); }

/* ── Centered-deviation track ─────────────────────────────────────────
   The track is split in half by a vertical centre line representing
   100% coverage. Under-supplied colors grow a bar LEFT from the centre,
   over-supplied colors grow RIGHT.  Length = absolute deviation. */
.cps-row-track {
  position: relative;
  height: 16px;
  display: grid;
  grid-template-columns: 1fr 2px 1fr;
  background: rgba(255,255,255,0.03);
  border-radius: 4px;
  overflow: visible;
}
.cps-track-half {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.cps-track-left  { border-radius: 4px 0 0 4px; }
.cps-track-right { border-radius: 0 4px 4px 0; }
.cps-track-center {
  background: rgba(255,255,255,0.45);
  box-shadow: 0 0 6px rgba(255,255,255,0.25);
  border-radius: 2px;
}
.cps-dev-bar {
  position: absolute;
  top: 0; bottom: 0;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.cps-dev-bar-left {
  right: 0;                /* grow leftward from the centre line */
  border-radius: 3px 1px 1px 3px;
  box-shadow: -2px 0 8px currentColor;
}
.cps-dev-bar-right {
  left: 0;                 /* grow rightward from the centre line */
  border-radius: 1px 3px 3px 1px;
  box-shadow: 2px 0 8px currentColor;
}

/* Coverage % + status pill stacked into the right column */
.cps-row-coverage-block {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.cps-row-coverage {
  font-size: 15px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cps-row-status {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: rgba(0,0,0,0.25);
}

/* Axis header above the rows: ← UNDER  100%  OVER → */
.cps-row-axis { opacity: 0.7; pointer-events: none; }
.cps-axis-track {
  background: transparent !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  height: 14px;
}
.cps-axis-label {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
}
.cps-axis-center {
  color: var(--text-dim);
  font-weight: 600;
}

/* Legend chips inside the explanation block */
.cps-legend {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: 8px;
}
.cps-chip {
  display: inline-block;
  padding: 1px 7px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  border: 1px solid var(--c);
  color: var(--c);
  border-radius: 999px;
  background: rgba(0,0,0,0.25);
}
.cps-row-numbers {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  justify-content: flex-end;
}
.cps-num            { font-weight: 600; }
.cps-num-demand     { color: var(--text-dim); }
.cps-num-sep        { color: var(--text-faint); }
.cps-row-status {
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Summary footer: total mana per turn, generic demand, colorless alert */
.cps-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.cps-summary-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
}
.cps-summary-row-secondary {
  color: var(--text-dim);
  font-size: 11.5px;
}
.cps-summary-label {
  flex: 1;
  color: var(--text-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10.5px;
  font-weight: 600;
}
.cps-summary-val {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.cps-summary-demand { color: var(--text-dim); }
.cps-summary-sep    { color: var(--text-faint); }
.cps-summary-ratio  {
  margin-left: 12px;
  font-weight: 700;
  font-size: 11.5px;
}
.cps-alert {
  margin-top: 4px;
  padding: 6px 10px;
  background: rgba(248,113,113,0.10);
  border: 1px solid rgba(248,113,113,0.30);
  border-radius: 4px;
  font-size: 11.5px;
  color: rgba(248,113,113,0.95);
}

/* ── Bracket Information drawer (clickable tier pill) ─────────────────────
   Opens below the deck-header gold panel when the user clicks the tier
   badge (HIGH POWER / Optimized / etc.). Shows the 5 WotC bracket criteria
   plus 2 community extras (Fast Mana, Free Interaction) as numbered
   counts with bullet-list card names. Pure informational. */
/* Score + tier stacked vertically (tier sits UNDER the big number rather
   than next to it). Wraps the same two elements .deck-header-score-row
   used to wrap; the original .deck-header-tier rules above stay in
   force, so the display font / uppercase / letter-spacing don't change
   — only the position relative to the score does. */
.deck-header-score-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 8px → 18px so the pill reads as its own element rather than
     crowding the score's baseline (user feedback on cEDH-pill screenshot). */
  gap: 18px;
}
.deck-header-score-stack .deck-header-tier {
  margin-top: 0;
}

/* Clickable variant of the tier pill: pointer cursor + pulse-glow to
   hint at clickability. Visually preserves the original .deck-header-tier
   typography (Cormorant display, uppercase, 0.08em letter-spacing) by NOT
   overriding font, padding, or letter-spacing — we just layer on cursor,
   the keyframe animation, and a focus-visible outline for keyboard nav. */
.deck-header-tier.tier-pill-btn {
  cursor: pointer;
  /* Subtle pulse: a halo of soft WHITE glow that breathes from low to
     mid opacity every 2.4s. White instead of blue (user feedback) so
     the pulse reads against the colored tier text rather than competing
     with it, and to fit the gold-panel chrome more cleanly. */
  animation: tierPillPulse 2.4s ease-in-out infinite;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.deck-header-tier.tier-pill-btn:hover {
  transform: translateY(-1px);
  /* Hover: brighter steady white halo; cancels the keyframe so the user
     gets stable feedback while their mouse is on the pill. */
  animation: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.55),
              0 0 18px rgba(255,255,255,0.50),
              0 0 32px rgba(255,255,255,0.28);
}
.deck-header-tier.tier-pill-btn:focus-visible {
  outline: 2px solid rgba(255,255,255,0.80);
  outline-offset: 3px;
  animation: none;
}
@keyframes tierPillPulse {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(255,255,255,0.22),
                0 0 6px  rgba(255,255,255,0.22),
                0 0 14px rgba(255,255,255,0.12);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(255,255,255,0.50),
                0 0 14px rgba(255,255,255,0.45),
                0 0 28px rgba(255,255,255,0.25);
  }
}
/* Respect prefers-reduced-motion — disable the pulse animation but keep
   the hover affordance. */
@media (prefers-reduced-motion: reduce) {
  .deck-header-tier.tier-pill-btn { animation: none; }
}

.bracket-drawer {
  margin: 0 0 16px;
  padding: 16px 20px 18px;
  border: 1px solid rgba(124,142,248,0.32);
  background: linear-gradient(180deg,
    rgba(124,142,248,0.07),
    rgba(124,142,248,0.02));
  border-radius: var(--radius-lg);
  animation: bracketDrawerSlide 0.22s ease;
}
@keyframes bracketDrawerSlide {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bracket-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.bracket-drawer-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
}
.bracket-drawer-close {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--text-dim);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.bracket-drawer-close:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border-color: rgba(255,255,255,0.24);
}

.bracket-drawer-empty {
  padding: 12px;
  font-size: 12.5px;
  color: var(--text-dim);
  text-align: center;
}

/* Tabbed layout — reuses .reco-tabs / .reco-tab styling from the
   Recommendations panel. The drawer-specific tweaks here only adjust
   spacing and the "empty in this tab" placeholder. */
.bracket-drawer-panel {
  margin-top: 4px;
}
.bracket-drawer-tabs {
  margin: 0 0 12px;
}
.bracket-drawer-tabbody {
  padding: 4px 4px 0;
}
.bracket-drawer-empty-tab {
  padding: 14px 0 8px;
  font-size: 12.5px;
  color: var(--text-faint);
  text-align: center;
  font-style: italic;
}

.bracket-drawer-list {
  list-style: none;
  margin: 4px 0 0 12px;
  padding: 0;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.75;
}
.bracket-drawer-list li::before {
  content: "— ";
  color: var(--text-faint);
  margin-right: 4px;
}
.bracket-drawer-card {
  cursor: pointer;
  border-bottom: 1px dotted rgba(124,142,248,0.25);
  transition: color 0.12s ease, border-color 0.12s ease;
}
.bracket-drawer-card:hover {
  color: var(--p4);
  border-color: var(--p4);
}

.bracket-drawer-combo-tag {
  display: inline-block;
  margin-left: 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 1px 6px;
  border-radius: 4px;
  vertical-align: middle;
}
.bracket-drawer-combo-tag.combo-win {
  background: rgba(248,113,113,0.16);
  color: rgba(248,113,113,0.95);
  border: 1px solid rgba(248,113,113,0.32);
}
.bracket-drawer-combo-tag.combo-enabler {
  background: rgba(212,168,64,0.16);
  color: rgba(212,168,64,0.95);
  border: 1px solid rgba(212,168,64,0.32);
}

/* .bracket-drawer-divider was used by the stacked-row layout; tabbed
   layout absorbs the framework/community distinction into per-tab
   notes (.bracket-drawer-tab-note). Rule kept for backward-compat
   with any older cached HTML. */
.bracket-drawer-divider {
  margin-top: 6px;
  padding: 4px 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-top: 1px dashed rgba(255,255,255,0.10);
}

/* ── Admin To-Do board ───────────────────────────────────────────────────── */
.todo-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0 14px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 16px;
}
.todo-header-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-bright);
}
.admin-action-btn {
  padding: 6px 14px;
  border-radius: 6px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.admin-action-btn:hover { opacity: 0.85; }
.admin-action-btn:disabled { opacity: 0.45; cursor: default; }
.admin-cancel-btn {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: var(--text-dim);
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.admin-cancel-btn:hover { border-color: rgba(255,255,255,0.3); color: var(--text); }
.todo-quickadd-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.todo-quickadd-input {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 7px;
  color: var(--text);
  font-size: 13px;
  padding: 8px 12px;
}
.todo-quickadd-input:focus { outline: none; border-color: var(--accent); }
.todo-quickadd-btn {
  padding: 8px 20px;
  border-radius: 7px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.todo-quickadd-btn:hover { opacity: 0.85; }
.todo-quickadd-btn:disabled { opacity: 0.45; cursor: default; }
.todo-quickadd-toast {
  font-size: 12.5px;
  padding: 6px 12px;
  border-radius: 6px;
  margin-bottom: 10px;
  background: rgba(79,194,167,0.12);
  border: 1px solid rgba(79,194,167,0.25);
  color: #4fc2a7;
}
.todo-quickadd-toast-err {
  background: rgba(248,113,113,0.12);
  border-color: rgba(248,113,113,0.3);
  color: #f87171;
}
.todo-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: start;
}
.todo-col {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 12px;
  min-height: 120px;
}
.todo-col[data-cat="priority"]  { background: rgba(220,60,60,0.07);  border-color: rgba(220,60,60,0.15); }
.todo-col[data-cat="scheduled"] { background: rgba(60,130,220,0.07); border-color: rgba(60,130,220,0.15); }
.todo-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.todo-col-title { font-size: 12.5px; font-weight: 700; color: var(--text-bright); letter-spacing: 0.03em; }
.todo-col-count {
  font-size: 11px;
  font-weight: 600;
  background: rgba(255,255,255,0.1);
  color: var(--text-dim);
  border-radius: 10px;
  padding: 1px 7px;
}
.todo-cards { display: flex; flex-direction: column; gap: 8px; }
.todo-empty { font-size: 11.5px; color: var(--text-faint); padding: 8px 4px; text-align: center; }
.todo-add-btn {
  margin-top: 10px;
  width: 100%;
  padding: 5px;
  border-radius: 6px;
  border: 1px dashed rgba(255,255,255,0.15);
  background: transparent;
  color: var(--text-faint);
  font-size: 11.5px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.todo-add-btn:hover { border-color: var(--accent); color: var(--accent); }
.todo-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  padding: 10px 11px 9px;
  transition: border-color 0.15s, opacity 0.15s, box-shadow 0.15s;
  cursor: default;
}
.todo-card:hover { border-color: rgba(255,255,255,0.18); }
.todo-card-closed { opacity: 0.5; }
.todo-card-dragging { opacity: 0.4; box-shadow: 0 4px 20px rgba(0,0,0,0.4); }
.todo-card-over { border-color: var(--accent) !important; box-shadow: 0 0 0 2px rgba(79,194,167,0.3); }
.todo-col-over { background: rgba(79,194,167,0.06) !important; border-color: rgba(79,194,167,0.3) !important; }
.todo-card-drag-handle {
  color: var(--text-faint);
  font-size: 14px;
  cursor: grab;
  flex-shrink: 0;
  padding: 0 3px 0 0;
  user-select: none;
  opacity: 0.4;
  transition: opacity 0.1s;
}
.todo-card:hover .todo-card-drag-handle { opacity: 0.8; }
.todo-card-top {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 5px;
}
.todo-card-title {
  flex: 1;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-bright);
  line-height: 1.4;
  word-break: break-word;
}
.todo-card-controls {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.todo-ctrl-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-dim);
  border-radius: 4px;
  font-size: 11px;
  padding: 1px 5px;
  cursor: pointer;
  line-height: 1.4;
  transition: background 0.1s, color 0.1s;
}
.todo-ctrl-btn:hover { background: rgba(255,255,255,0.1); color: var(--text-bright); }
.todo-del-btn:hover  { background: rgba(224,60,60,0.2); border-color: rgba(224,60,60,0.4); color: #f87171; }
.todo-move-cat {
  font-size: 10.5px;
  padding: 1px 3px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  color: var(--text-dim);
  cursor: pointer;
  max-width: 80px;
}
.todo-card-desc {
  font-size: 11.5px;
  color: var(--text-dim);
  margin-bottom: 7px;
  line-height: 1.45;
}
.todo-card-summary {
  font-size: 11.5px;
  color: var(--text-dim);
  margin-bottom: 7px;
  line-height: 1.45;
  font-style: italic;
}
.todo-card-footer { margin-top: 6px; }
.todo-progress-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}
.todo-progress-bar-bg {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
}
.todo-progress-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s;
}
.todo-progress-pct { font-size: 10.5px; color: var(--text-faint); min-width: 28px; text-align: right; }
.todo-card-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.todo-status-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.todo-status-open    { background: rgba(255,255,255,0.08); color: var(--text-faint); }
.todo-status-inprog  { background: rgba(79,194,167,0.15);  color: #4fc2a7; }
.todo-status-closed  { background: rgba(100,100,100,0.2);  color: #888; }
.todo-kw-badge {
  font-size: 10px;
  color: var(--text-faint);
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
  padding: 1px 5px;
  font-style: italic;
}
.todo-notes-details { margin-top: 6px; font-size: 11.5px; }
.todo-notes-details summary { cursor: pointer; color: var(--text-faint); font-size: 11px; user-select: none; }
.todo-notes-body {
  margin-top: 5px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.04);
  border-radius: 5px;
  color: var(--text-dim);
  white-space: pre-wrap;
  line-height: 1.5;
}
.todo-polish-panel {
  background: rgba(79,194,167,0.06);
  border: 1px solid rgba(79,194,167,0.2);
  border-radius: 10px;
  margin-bottom: 16px;
  padding: 14px 16px;
}
.todo-polish-inner { display: flex; flex-direction: column; gap: 10px; }
.todo-polish-label { font-size: 12.5px; color: var(--text-dim); }
.todo-polish-textarea {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  color: var(--text);
  font-size: 12.5px;
  padding: 8px 10px;
  resize: vertical;
  box-sizing: border-box;
}
.todo-polish-actions { display: flex; gap: 8px; }
.todo-polish-result-grid {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 8px 12px;
  align-items: start;
  margin-bottom: 10px;
}
.todo-polish-result-grid label { font-size: 11.5px; color: var(--text-faint); padding-top: 7px; }
.todo-pol-field {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 5px;
  color: var(--text);
  font-size: 12.5px;
  padding: 6px 9px;
  box-sizing: border-box;
}
.todo-pol-field:focus { outline: none; border-color: var(--accent); }
.todo-pol-desc { resize: vertical; }
.todo-polish-confirm-row { display: flex; gap: 8px; }
.todo-form-grid {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 9px 12px;
  align-items: start;
}
.todo-form-grid label { font-size: 11.5px; color: var(--text-faint); padding-top: 7px; }
/* Full card modal */
.todo-full-modal {
  background: var(--surface, #1a1a2e);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  width: 100%;
  max-width: 580px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  overflow: hidden;
}
.todo-full-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}
.todo-full-modal-cat { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.todo-full-modal-actions { display: flex; align-items: center; gap: 10px; }
.todo-copy-btn {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.todo-copy-btn:hover { border-color: var(--accent); color: var(--accent); }
.todo-full-modal-body { padding: 18px 22px 20px; }
.todo-prog-row-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.todo-prog-row-inline #tmod-prog-label { min-width: 36px; font-size: 13px; color: var(--text-dim); }
.todo-prog-mini-bar {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}
.todo-prog-mini-bar div { height: 100%; border-radius: 2px; transition: width 0.2s, background 0.2s; }
.todo-modal-notes { min-height: 80px; }
.todo-full-modal-meta {
  display: flex;
  gap: 16px;
  margin-top: 14px;
  font-size: 11px;
  color: var(--text-faint);
}
.todo-source-badge {
  background: rgba(255,255,255,0.07);
  border-radius: 4px;
  padding: 1px 6px;
  text-transform: capitalize;
}
.todo-modal-title-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-bright);
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(255,255,255,0.08);
  padding: 4px 2px 10px;
  margin-bottom: 18px;
  outline: none;
  transition: border-color 0.15s;
  font-family: inherit;
}
.todo-modal-title-input:focus { border-bottom-color: var(--accent); }
.todo-modal-title-input::placeholder { color: rgba(255,255,255,0.2); font-weight: 400; }
.todo-full-modal-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.todo-modal-footer-btn {
  min-width: 110px;
  padding: 8px 16px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}
.todo-modal-btn-save {
  background: var(--accent);
  color: #fff;
  border: none;
}
.todo-modal-btn-save:hover { opacity: 0.85; }
.todo-modal-btn-cancel {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid rgba(255,255,255,0.15);
}
.todo-modal-btn-cancel:hover { border-color: rgba(255,255,255,0.3); color: var(--text); }
.todo-modal-btn-delete {
  background: transparent;
  color: #f87171;
  border: 1px solid rgba(248,113,113,0.3);
}
.todo-modal-btn-delete:hover { background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.5); }
.todo-modal-btn-copy {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid rgba(255,255,255,0.15);
}
.todo-modal-btn-copy:hover { border-color: var(--accent); color: var(--accent); }
/* Card cursor pointer to hint clickability */
.todo-card { cursor: pointer; }
/* Summary one-liner input in modal */
.todo-modal-summary-input {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  color: var(--text-dim);
  font-size: 13px;
  padding: 4px 2px 8px;
  margin-bottom: 18px;
  outline: none;
  font-style: italic;
}
.todo-modal-summary-input:focus {
  border-bottom-color: var(--accent);
  color: var(--text);
}

/* ==========================================================================
   DECK BUILDER VIEW
   ========================================================================== */

/* ── Shell & layout ──────────────────────────────────────────────────────── */
.builder-shell {
  min-height: calc(100vh - 56px);
  display: flex;
  flex-direction: column;
}
.builder-rail-wrap {
  background: rgba(255,255,255,0.025);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: 16px 24px;
}
.builder-content {
  flex: 1;
  max-width: 1060px;
  margin: 0 auto;
  width: 100%;
  padding: 32px 24px 80px;
  box-sizing: border-box;
}

/* ── Step rail ───────────────────────────────────────────────────────────── */
.builder-rail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 700px;
  margin: 0 auto;
}
.rail-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.rail-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.14);
  color: var(--text-dim);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.rail-label {
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 0.2s;
}
.rail-step.active .rail-dot {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(124,142,248,0.22);
}
.rail-step.active .rail-label {
  color: var(--accent);
  font-weight: 600;
}
.rail-step.done .rail-dot {
  background: rgba(124,142,248,0.18);
  border-color: rgba(124,142,248,0.4);
  color: var(--accent);
}
.rail-step.done .rail-label { color: rgba(255,255,255,0.45); }
.rail-check { width: 12px; height: 12px; }
.rail-sep {
  flex: 1;
  min-width: 20px;
  max-width: 60px;
  height: 1.5px;
  background: rgba(255,255,255,0.1);
  margin: 0 4px;
  margin-bottom: 16px; /* align with dot centre */
  transition: background 0.2s;
}
.rail-sep.done { background: rgba(124,142,248,0.35); }

/* ── Step wrapper ────────────────────────────────────────────────────────── */
.builder-step-wrap { max-width: 900px; margin: 0 auto; }
.builder-step-header { margin-bottom: 28px; }
.builder-step-eyebrow {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.builder-step-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 32px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px;
  line-height: 1.2;
}
.builder-step-sub {
  font-size: 14px;
  color: var(--text-dim);
  margin: 0 0 12px;
  line-height: 1.55;
}
.builder-step-concept {
  display: inline-block;
  font-size: 13px;
  color: var(--text-dim);
  font-style: italic;
  background: rgba(124,142,248,0.08);
  border: 1px solid rgba(124,142,248,0.18);
  border-radius: 8px;
  padding: 6px 14px;
  margin-top: 4px;
}
.builder-section-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 12px;
}

/* ── Mode tabs (Step 1) ──────────────────────────────────────────────────── */
.builder-mode-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding-bottom: 0;
}
.builder-mode-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}
.builder-mode-tab:hover { color: var(--text); }
.builder-mode-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 500;
}

/* ── Pane content area ───────────────────────────────────────────────────── */
.builder-pane { max-width: 640px; }

/* Describe mode */
.builder-intent-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 120px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 14px;
  color: var(--text);
  resize: vertical;
  outline: none;
  transition: border-color 0.18s;
  font-family: inherit;
  line-height: 1.55;
}
.builder-intent-textarea:focus {
  border-color: rgba(124,142,248,0.55);
  background: rgba(124,142,248,0.04);
}
.builder-intent-textarea::placeholder { color: var(--text-dim); opacity: 0.55; }
.builder-intent-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}
.builder-primary-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  white-space: nowrap;
}
.builder-primary-btn:hover { opacity: 0.86; }
.builder-primary-btn:active { transform: scale(0.97); }
.builder-primary-btn:disabled { opacity: 0.38; cursor: default; transform: none; }
.builder-charcount { font-size: 12px; color: var(--text-dim); }

/* Browse mode */
.builder-search-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text);
  outline: none;
  transition: border-color 0.18s;
  margin-bottom: 20px;
}
.builder-search-input:focus { border-color: rgba(124,142,248,0.5); }
.builder-search-results { min-height: 60px; }
.builder-popular-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.builder-popular-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.builder-popular-pill {
  padding: 6px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.builder-popular-pill:hover {
  background: rgba(124,142,248,0.14);
  border-color: rgba(124,142,248,0.4);
  color: var(--accent);
}

/* ── Archetype grid ──────────────────────────────────────────────────────── */
.builder-arch-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
@media (max-width: 900px) { .builder-arch-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px) { .builder-arch-grid { grid-template-columns: repeat(2, 1fr); } }
.builder-arch-tile {
  position: relative;
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 0;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 150px;
  overflow: hidden;
  /* Commander art (set inline per tile) sits behind a subtle tint. */
  background-color: rgba(255,255,255,0.03);
  background-size: cover;
  background-position: center 22%;
  background-repeat: no-repeat;
}
/* Subtle tint over the art — darker toward the bottom so the label reads. */
.builder-arch-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(12,14,22,0.30) 0%,
    rgba(12,14,22,0.55) 45%,
    rgba(12,14,22,0.92) 100%);
  transition: background 0.15s;
  z-index: 0;
}
.builder-arch-tile:hover {
  border-color: rgba(124,142,248,0.55);
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(0,0,0,0.45);
}
.builder-arch-tile:hover::before {
  background: linear-gradient(to bottom,
    rgba(20,24,44,0.28) 0%,
    rgba(18,20,36,0.52) 45%,
    rgba(12,14,22,0.90) 100%);
}
.builder-arch-tile.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(124,142,248,0.35), 0 8px 26px rgba(0,0,0,0.45);
}
.builder-arch-tile.selected::before {
  background: linear-gradient(to bottom,
    rgba(124,142,248,0.22) 0%,
    rgba(60,60,120,0.45) 45%,
    rgba(12,14,22,0.90) 100%);
}
.builder-arch-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 12px 13px;
}
.builder-arch-icon { font-size: 22px; }
.builder-arch-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.8);
}
.builder-arch-desc {
  font-size: 11px;
  color: rgba(255,255,255,0.82);
  line-height: 1.4;
  text-shadow: 0 1px 5px rgba(0,0,0,0.85);
}

/* ── Power level grid (Step 3) ───────────────────────────────────────────── */
.builder-power-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 700px) { .builder-power-grid { grid-template-columns: repeat(2, 1fr); } }
.builder-power-tile {
  background: rgba(255,255,255,0.03);
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 14px 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.builder-power-tile:hover {
  border-color: rgba(212,168,64,0.38);
  background: rgba(212,168,64,0.05);
}
.builder-power-tile.selected {
  border-color: #d4a840;
  background: rgba(212,168,64,0.1);
  box-shadow: 0 0 0 2px rgba(212,168,64,0.18);
}
.builder-power-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.builder-power-sub {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
}

/* ── Commander lane (Step 2) ─────────────────────────────────────────────── */
.builder-lane { margin-bottom: 36px; }
.builder-lane-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.builder-lane-icon { font-size: 16px; flex-shrink: 0; }
.builder-lane-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
}
.builder-lane-sub { font-size: 12px; color: var(--text-dim); }
.builder-lane--unusual .builder-lane-name { color: #5ec4cb; }
.builder-lane--unusual .builder-lane-header { border-bottom-color: rgba(94,196,203,0.2); }

/* Lane "Expand ↗" button */
.builder-lane-expand {
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(124,142,248,0.3);
  border-radius: 6px;
  color: var(--accent);
  font-size: 11px;
  padding: 3px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.builder-lane-expand:hover {
  background: rgba(124,142,248,0.12);
  border-color: var(--accent);
}

/* Commander card grid */
/* T3/T5: compact commander banner carried through Constraints/Strategy/Skeleton */
.builder-cmd-banner {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px; padding: 10px 14px; margin: 4px 0 22px;
}
/* Translucent commander-art background variant */
.builder-cmd-banner--art {
  background-repeat: no-repeat;
  border-color: rgba(255,255,255,0.14);
}
.builder-cmd-banner--art .builder-banner-name { color: #fff; }
.builder-cmd-banner--art .builder-banner-arch { background: rgba(0,0,0,0.35); color: rgba(232,228,248,0.92); }
.builder-banner-art {
  width: 84px; height: 60px; object-fit: cover; object-position: center 22%;
  border-radius: 8px; flex-shrink: 0; cursor: zoom-in;
  border: 1px solid rgba(255,255,255,0.12);
}
.builder-banner-art--ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--text-faint); background: rgba(255,255,255,0.05);
}
.builder-banner-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.builder-banner-name {
  font-size: 16px; font-weight: 600; color: var(--text-bright);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.builder-banner-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.builder-banner-arch {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-dim); background: rgba(124,142,248,0.14);
  padding: 2px 9px; border-radius: 999px;
}
.builder-banner-fit {
  font-size: 11px; font-weight: 600; color: #5ec47a;
  background: rgba(94,196,122,0.12); padding: 2px 9px; border-radius: 999px;
}
.builder-banner-pips { display: inline-flex; gap: 2px; }

/* T4: formatted strategy body (headings + bullets) */
.builder-strat-body { font-size: 14px; line-height: 1.6; color: var(--text-dim); }
.builder-strat-h {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--p4, #7c8ef8); margin: 14px 0 6px; }
.builder-strat-body > .builder-strat-h:first-child { margin-top: 0; }
.builder-strat-p { margin: 0 0 8px; }
.builder-strat-ul { margin: 0 0 8px; padding-left: 20px; }
.builder-strat-ul li { margin: 3px 0; }
.builder-strat-body strong { color: var(--text); }

/* T2: commander browse controls */
.builder-cmd-controls {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 0 0 20px;
}
.builder-cmd-search {
  flex: 1 1 220px; min-width: 180px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 9px; padding: 9px 13px; color: var(--text); font-size: 14px;
}
.builder-cmd-search:focus { outline: none; border-color: rgba(124,142,248,0.55); }
.builder-cmd-select {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 9px; padding: 9px 11px; color: var(--text-dim); font-size: 13px; cursor: pointer;
}
.builder-cmd-select:focus { outline: none; border-color: rgba(124,142,248,0.45); }
.builder-cmd-resultcount { font-size: 12px; color: var(--text-faint); margin-bottom: 10px; }
.builder-cmd-loadmore { text-align: center; margin-top: 20px; }
.builder-cmd-lanecount {
  margin-left: auto; background: rgba(255,255,255,0.1); color: var(--text-dim);
  font-size: 11px; padding: 1px 8px; border-radius: 9px; font-weight: 600;
}

.builder-cmd-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.builder-cmd-grid--wide {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 860px) { .builder-cmd-grid--wide { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .builder-cmd-grid { grid-template-columns: 1fr; }
                             .builder-cmd-grid--wide { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .builder-cmd-grid--wide { grid-template-columns: 1fr; } }

/* Individual commander card */
.builder-cmd-card {
  background: rgba(255,255,255,0.03);
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.18s, transform 0.15s, box-shadow 0.18s;
  display: flex;
  flex-direction: column;
}
.builder-cmd-card:hover {
  border-color: rgba(124,142,248,0.45);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.builder-cmd-card.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(124,142,248,0.3), 0 6px 20px rgba(0,0,0,0.35);
}
.builder-cmd-card--unusual { border-color: rgba(94,196,203,0.18); }
.builder-cmd-card--unusual:hover {
  border-color: rgba(94,196,203,0.5);
  box-shadow: 0 6px 20px rgba(94,196,203,0.1);
}

/* Art section */
.builder-cmd-art {
  position: relative;
  width: 100%;
  aspect-ratio: 626 / 457;
  background: rgba(255,255,255,0.05);
  overflow: hidden;
}
.builder-cmd-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}
.builder-cmd-card:hover .builder-cmd-art img { transform: scale(1.04); }
.builder-cmd-art-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,15,25,0.88) 0%, rgba(15,15,25,0.35) 55%, transparent 100%);
}
.builder-cmd-art-footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 8px 10px 10px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px;
}
.builder-cmd-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  line-height: 1.25;
}
.builder-cmd-pips { display: flex; gap: 3px; flex-shrink: 0; }
.builder-cmd-unusual-badge {
  position: absolute;
  top: 8px; right: 8px;
  background: rgba(94,196,203,0.88);
  color: #08181a;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  padding: 2px 7px;
  border-radius: 20px;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}
.builder-cmd-art-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; color: rgba(255,255,255,0.15);
}
.builder-cmd-reason {
  padding: 10px 12px 14px;
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
  flex: 1;
}

/* ── Step navigation bar ─────────────────────────────────────────────────── */
.builder-step-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.builder-nav-back {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--text-dim);
  padding: 9px 20px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.builder-nav-back:hover { border-color: rgba(255,255,255,0.3); color: var(--text); }
.builder-nav-next {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 24px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.builder-nav-next:hover { opacity: 0.86; }
.builder-nav-next:disabled { opacity: 0.35; cursor: default; }
/* Alt (secondary) next button — "Sample Build →" etc. */
.builder-nav-next--alt {
  background: transparent;
  border: 1.5px solid rgba(124,142,248,0.45);
  color: var(--accent);
}
.builder-nav-next--alt:hover { opacity: 1; background: rgba(124,142,248,0.1); }
.builder-nav-next--alt:disabled { opacity: 0.35; cursor: default; }

/* ── Loading state ───────────────────────────────────────────────────────── */
.builder-loading-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 60px 0;
  text-align: center;
}
.builder-loading-label { font-size: 14px; color: var(--text-dim); }

/* ── Error state ─────────────────────────────────────────────────────────── */
.builder-error-wrap {
  max-width: 480px;
  margin: 60px auto;
  text-align: center;
}
.builder-error-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  color: var(--text);
  margin-bottom: 10px;
}
.builder-error-msg { font-size: 13px; color: var(--text-dim); }

/* ── Stub card (Steps 4–6) ───────────────────────────────────────────────── */
.builder-stub-card {
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 44px 32px;
  text-align: center;
  max-width: 500px;
}
.builder-stub-icon { font-size: 36px; margin-bottom: 12px; opacity: 0.5; }
.builder-stub-coming {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.builder-stub-teaser { font-size: 13px; color: var(--text-dim); line-height: 1.55; }

/* ── Nav beta badge ──────────────────────────────────────────────────────── */
.nav-tab--new { position: relative; }
.nav-new-pill {
  display: inline-block;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #f0d98c 0%, var(--p4) 100%);
  color: var(--btn-text-dark, #1a1000);
  border-radius: 3px;
  padding: 2px 5px;
  margin-left: 5px;
  vertical-align: super;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}

/* ── Clickable step-rail dot (completed steps) ───────────────────────────── */
.rail-dot--clickable {
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.12s;
}
.rail-dot--clickable:hover {
  background: rgba(124,142,248,0.3) !important;
  border-color: var(--accent) !important;
  transform: scale(1.12);
}

/* ── Narrow pane (Describe / Browse modes in Step 1) ────────────────────── */
.builder-narrow-pane { max-width: 640px; }

/* ── Wide step wrapper (Step 2 commander selection) ─────────────────────── */
.builder-step-wrap--wide { max-width: 1060px; }

/* ── Narrow step wrapper (Step 4 thesis, etc.) ───────────────────────────── */
.builder-step-wrap--narrow { max-width: 640px; }

/* ── Constraint tiles (Budget + Power Level in Step 3) ──────────────────── */
.builder-constraint-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 700px) { .builder-constraint-grid { grid-template-columns: repeat(2, 1fr); } }

.builder-constraint-tile {
  background: rgba(255,255,255,0.03);
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 14px 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.builder-constraint-tile:hover {
  border-color: rgba(124,142,248,0.4);
  background: rgba(124,142,248,0.06);
}
.builder-constraint-tile.selected {
  border-color: var(--accent);
  background: rgba(124,142,248,0.12);
  box-shadow: 0 0 0 2px rgba(124,142,248,0.2);
}
.builder-constraint-tile--power:hover {
  border-color: rgba(212,168,64,0.4);
  background: rgba(212,168,64,0.06);
}
.builder-constraint-tile--power.selected {
  border-color: #d4a840;
  background: rgba(212,168,64,0.1);
  box-shadow: 0 0 0 2px rgba(212,168,64,0.18);
}
.builder-constraint-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.builder-constraint-sub {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
}

/* ── Table Tolerance grid ────────────────────────────────────────────────── */
.builder-tol-hint {
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
  margin-left: 8px;
  text-transform: none;
  letter-spacing: 0;
}
.builder-tol-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.builder-tol-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 6px 14px 6px 10px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, color 0.14s, opacity 0.14s;
  user-select: none;
}
.builder-tol-item:hover {
  border-color: rgba(124,142,248,0.4);
  background: rgba(124,142,248,0.08);
}
.builder-tol-item.excluded {
  opacity: 0.45;
  border-color: rgba(255,255,255,0.06);
  background: transparent;
  text-decoration: line-through;
  color: var(--text-dim);
}
.builder-tol-check {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Summary chips (Step 4 header) ──────────────────────────────────────── */
.builder-summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.builder-summary-chip {
  display: inline-block;
  font-size: 12px;
  color: var(--text-dim);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 3px 11px;
}

/* ── Step 4: Deck Thesis card ────────────────────────────────────────────── */
.builder-thesis-generating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 44px 0;
}
.builder-thesis-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(124,142,248,0.25);
  border-radius: 16px;
  padding: 24px 26px 18px;
  margin-bottom: 4px;
}
.builder-thesis-ta-label {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 12px;
}
.builder-thesis-ta {
  width: 100%;
  box-sizing: border-box;
  min-height: 110px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 15.5px;
  font-style: italic;
  color: var(--text);
  resize: vertical;
  outline: none;
  transition: border-color 0.18s;
  font-family: 'Cormorant Garamond', Georgia, serif;
  line-height: 1.65;
}
.builder-thesis-ta:focus { border-color: rgba(124,142,248,0.5); }
.builder-thesis-wins {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
}
.builder-thesis-wins-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  flex-shrink: 0;
}
.builder-thesis-win-tag {
  font-size: 11.5px;
  color: var(--accent);
  background: rgba(124,142,248,0.1);
  border: 1px solid rgba(124,142,248,0.25);
  border-radius: 12px;
  padding: 2px 11px;
}
.builder-thesis-regen {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
  padding: 10px 0 0;
  transition: color 0.14s;
}
.builder-thesis-regen:hover { color: var(--accent); }

/* ── Archetype multi-select badges ──────────────────────────────────────── */
.builder-arch-hint {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 12px;
  font-style: italic;
}
.builder-arch-tile { position: relative; }
.builder-arch-badge {
  position: absolute;
  top: 7px; right: 7px;
  z-index: 2;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  box-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
.builder-arch-badge--2 { background: #a67cff; }
/* Selected accents only — never set `background` shorthand here (it would wipe
   the commander art background-image). The tint lives in ::before. */
.builder-arch-tile.selected--primary  { border-color: var(--accent); }
.builder-arch-tile.selected--secondary{ border-color: #a67cff;       }

/* ── Commander card body (Scryfall link + reason below art) ─────────────── */
.builder-cmd-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.builder-cmd-reason {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0;
}
.builder-cmd-scryfall {
  font-size: 11px;
  color: rgba(124,142,248,0.7);
  text-decoration: none;
  transition: color 0.14s;
  align-self: flex-start;
}
.builder-cmd-scryfall:hover { color: var(--accent); text-decoration: underline; }

/* ── Commander top-3 traits (Step 2 card footer) ─────────────────────────── */
.builder-cmd-traits {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}
.builder-cmd-trait {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(124,142,248,0.95);
  background: rgba(124,142,248,0.12);
  border: 1px solid rgba(124,142,248,0.28);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}

/* ── Strategy direction option tiles (Step 4) ────────────────────────────── */
.builder-strat-opts { margin-bottom: 18px; }
.builder-strat-opts-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.builder-strat-opts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

/* ── Deterministic archetype ranked list (Step 2) ────────────────────────── */
.builder-cmd-score {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 2;
  min-width: 30px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(124,142,248,0.92);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.builder-cmd-rank {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.builder-strat-opt {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.builder-strat-opt:hover {
  border-color: rgba(124,142,248,0.55);
  background: rgba(124,142,248,0.08);
  transform: translateY(-1px);
}
.builder-strat-opt.selected {
  border-color: rgba(124,142,248,0.9);
  background: rgba(124,142,248,0.14);
}
.builder-strat-opt-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-bright);
}
.builder-strat-opt-desc {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.45;
}

/* ── How-to-play manual block (Step 4) ───────────────────────────────────── */
.builder-manual-card {
  margin-top: 12px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
}
.builder-manual-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(124,142,248,0.85);
  margin-bottom: 6px;
}
.builder-manual-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
  margin: 0;
}

/* ── Step 5 Finish popover + right-aligned nav ───────────────────────────── */
.builder-step-nav--end { justify-content: flex-end; gap: 12px; }
.skel-finish-wrap { position: relative; display: inline-flex; }
.skel-finish-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  background: rgba(20,22,34,0.98);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  overflow: hidden;
  z-index: 30;
}
.skel-finish-item {
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text);
  padding: 11px 16px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.13s;
}
.skel-finish-item:hover { background: rgba(124,142,248,0.16); }

/* ── Step 6 Build view ───────────────────────────────────────────────────── */
.builder-build-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}
.builder-build-cards {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 20px;
}

/* ── "New List" regenerate button (Step 2 nav) ───────────────────────────── */
.builder-regen-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--text-dim);
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.builder-regen-btn:hover { border-color: rgba(255,255,255,0.3); color: var(--text); }

/* ── Strategy mode toggle (Step 4) ──────────────────────────────────────── */
/* Step 4 — Strategy: Oracle button row */
.builder-strategy-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

/* Shared action button — matches the site's dark-glass style.
   Used for "Ask the Oracle", "Ask Oracle for more picks", etc. */
.builder-action-btn {
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.builder-action-btn:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.25);
}

/* ── Step 5: Skeleton ────────────────────────────────────────────────────── */
/* ── Phase 12: Deck Check summary (builder step 6 interstitial) ─────────────── */
.deckcheck-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 10px;
  margin-bottom: 20px;
}
.deckcheck-status-icon { font-size: 16px; }
.deckcheck-status--fixed { background: rgba(94,196,122,0.12); color: #5ec47a; border: 1px solid rgba(94,196,122,0.3); }
.deckcheck-status--ok    { background: rgba(94,196,122,0.10); color: #5ec47a; border: 1px solid rgba(94,196,122,0.25); }
.deckcheck-status--warn  { background: rgba(232,133,74,0.12); color: #e8854a; border: 1px solid rgba(232,133,74,0.3); }
.deckcheck-body { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.deckcheck-clean { color: var(--text-dim); font-size: 14px; padding: 8px 0; }

/* T6: Corrections / Recommendations sections */
.deckcheck-section { display: flex; flex-direction: column; gap: 10px; }
.deckcheck-section-head {
  font-size: 14px; font-weight: 700; color: var(--text-bright);
  display: flex; align-items: center; gap: 8px;
}
.deckcheck-note { font-size: 12px; color: var(--text-faint); line-height: 1.5; margin: -2px 0 4px; }
.deckcheck-note strong { color: var(--text-dim); }
.deckcheck-recgroup {
  background: rgba(232,133,74,0.05); border: 1px solid rgba(232,133,74,0.22);
  border-radius: 10px; padding: 12px 14px;
}
.deckcheck-recgroup-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: #e8a04a; margin-bottom: 8px;
}
.deckcheck-rec { padding: 5px 0; border-top: 1px solid rgba(255,255,255,0.05); }
.deckcheck-rec:first-of-type { border-top: none; }
.deckcheck-rec-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.deckcheck-rec-desc { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; margin-top: 2px; }

/* #3 redesign: summary-first hero + collapsible accordions */
.deckcheck-hero {
  display: flex; align-items: center; gap: 16px;
  border-radius: 14px; padding: 16px 20px; margin: 4px 0 18px;
  border: 1px solid rgba(255,255,255,0.10);
}
.deckcheck-hero.deckcheck-status--fixed,
.deckcheck-hero.deckcheck-status--ok   { background: rgba(94,196,122,0.10); border-color: rgba(94,196,122,0.30); }
.deckcheck-hero.deckcheck-status--warn { background: rgba(232,133,74,0.10); border-color: rgba(232,133,74,0.30); }
.deckcheck-hero-icon {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; background: rgba(255,255,255,0.08);
}
.deckcheck-status--fixed .deckcheck-hero-icon,
.deckcheck-status--ok    .deckcheck-hero-icon { color: #5ec47a; }
.deckcheck-status--warn  .deckcheck-hero-icon { color: #e8854a; }
.deckcheck-hero-title { font-size: 18px; font-weight: 700; color: var(--text-bright); }
.deckcheck-hero-sub   { font-size: 13px; color: var(--text-dim); margin-top: 3px; }

.deckcheck-accordions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.deckcheck-acc {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 11px; overflow: hidden;
}
.deckcheck-acc--error { border-color: rgba(232,90,90,0.30); background: rgba(232,90,90,0.05); }
.deckcheck-acc--warn  { border-color: rgba(232,133,74,0.22); background: rgba(232,133,74,0.04); }
.deckcheck-acc-summary {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer;
  list-style: none; user-select: none; font-size: 14px; font-weight: 600; color: var(--text);
}
.deckcheck-acc-summary::-webkit-details-marker { display: none; }
.deckcheck-acc-icon { font-size: 15px; }
.deckcheck-acc--error .deckcheck-acc-icon { color: #e85a5a; }
.deckcheck-acc--warn  .deckcheck-acc-icon { color: #e8854a; }
.deckcheck-acc-title { flex: 0 0 auto; }
.deckcheck-acc-chevron { margin-left: auto; color: var(--text-faint); transition: transform .15s ease; font-size: 14px; }
.deckcheck-acc[open] .deckcheck-acc-chevron { transform: rotate(180deg); }
.deckcheck-acc-body { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 12px; }

.deckcheck-group {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 14px 16px;
}
.deckcheck-group--error { border-color: rgba(232,90,90,0.3); background: rgba(232,90,90,0.06); }
.deckcheck-group--warn  { border-color: rgba(232,133,74,0.25); background: rgba(232,133,74,0.05); }
.deckcheck-group-title {
  font-size: 13px; font-weight: 600; color: var(--text);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.deckcheck-count {
  background: rgba(255,255,255,0.1); color: var(--text-dim);
  font-size: 11px; padding: 1px 7px; border-radius: 8px; font-weight: 600;
}
.deckcheck-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-dim); font-size: 11px; }
.deckcheck-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.deckcheck-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.deckcheck-cut { color: #e85a5a; text-decoration: line-through; }
.deckcheck-arrow { color: var(--text-dim); }
.deckcheck-add { color: #5ec47a; font-weight: 600; }
.deckcheck-removed { color: var(--text-dim); font-style: italic; }
.deckcheck-reason { color: var(--text-dim); font-size: 12px; flex: 1 1 100%; padding-left: 2px; }

.skel-total {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-dim);
  padding: 12px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  margin-bottom: 22px;
}
.skel-total strong { font-size: 20px; color: var(--text); }
.skel-total--warn strong { color: #e8854a; }
.skel-ok  { color: #5ec47a; font-size: 16px; }
.skel-warn{ color: #e8854a; font-size: 12px; }
.skel-reset-btn {
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-dim);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.skel-reset-btn:hover { border-color: rgba(255,255,255,0.25); color: var(--text); }

.skel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
@media (max-width: 780px) { .skel-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .skel-grid { grid-template-columns: 1fr; } }

.skel-role-card {
  position: relative;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  overflow: hidden;
  min-height: 130px;
  display: flex;
  /* Representative MTG card art (set inline) behind a tint. */
  background-color: rgba(255,255,255,0.03);
  background-size: cover;
  background-position: center 28%;
  background-repeat: no-repeat;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.skel-role-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(12,14,22,0.45) 0%,
    rgba(12,14,22,0.66) 40%,
    rgba(12,14,22,0.90) 100%);
  z-index: 0;
}
.skel-role-card:hover { border-color: rgba(124,142,248,0.4); box-shadow: 0 6px 20px rgba(0,0,0,0.4); }
.skel-role-body {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 14px 12px;
  text-align: center;
}
.skel-role-icon  { font-size: 24px; line-height: 1; }
.skel-role-label {
  font-size: 12.5px;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 5px rgba(0,0,0,0.85);
}

.skel-role-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.skel-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.13s, border-color 0.13s;
  line-height: 1;
}
.skel-btn:hover:not(:disabled) {
  background: rgba(124,142,248,0.2);
  border-color: var(--accent);
}
.skel-btn:disabled { opacity: 0.25; cursor: default; }
.skel-count {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  min-width: 30px;
  text-align: center;
  text-shadow: 0 1px 6px rgba(0,0,0,0.9);
}

.skel-role-bar {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.18);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}
.skel-role-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.2s;
}

.skel-export-row {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}
.skel-copy-btn {
  /* reuse builder-nav-back appearance */
  padding: 9px 18px;
  font-size: 13px;
}

/* Experimental v3 SIM diagnostic chip (beta, flag-gated). Deliberately muted /
   "lab" styled so it never reads as the official score. */
.deck-header-v3diag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 4px 10px;
  border: 1px dashed rgba(124, 142, 248, 0.55);
  border-radius: 999px;
  background: rgba(124, 142, 248, 0.08);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: #9fb0e8;
}
.deck-header-v3diag .v3diag-tag { text-transform: uppercase; opacity: 0.85; }
.deck-header-v3diag .v3diag-val { font-weight: 700; color: #c5d0ff; font-size: 0.82rem; }
.deck-header-v3diag .v3diag-delta { opacity: 0.7; font-variant-numeric: tabular-nums; }

/* Small "SIM source: Robust v3" marker shown on deck details when Robust v3 is
   the official Simulation score (replaces the big experimental bubble). */
.deck-header-simsrc {
  display: inline-flex;
  align-items: center;
  align-self: center;          /* don't stretch to the hero row height */
  margin-top: 10px;
  padding: 3px 9px;
  border: 1px solid rgba(124, 142, 248, 0.35);
  border-radius: 999px;
  background: rgba(124, 142, 248, 0.06);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: #9fb0e8;
}
.deck-header-simsrc .simsrc-tag { text-transform: uppercase; opacity: 0.85; font-weight: 600; }

/* Legacy Production SIM ladder note (shown above the clock-race ladder when
   Robust v3 is the official Simulation Score). */
.benchmark-legacy-note {
  margin: 0 0 14px;
  padding: 8px 12px;
  border: 1px solid rgba(124, 142, 248, 0.28);
  border-left: 3px solid rgba(124, 142, 248, 0.6);
  border-radius: 8px;
  background: rgba(124, 142, 248, 0.05);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
}
.benchmark-legacy-note strong { color: var(--text); }

/* ── Robust v3 Simulation report ─────────────────────────────────────────── */
.rv3-srcmark {
  font-size: 10px; font-weight: 600; text-transform: none; letter-spacing: 0;
  margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  color: var(--p2); background: var(--p2-soft); border: 1px solid var(--p2-border);
  vertical-align: middle;
}
.rv3-explain { font-size: 12.5px; line-height: 1.5; color: var(--text-dim); margin: 0 0 12px; }
.rv3-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.rv3-stat {
  display: flex; flex-direction: column; gap: 2px; min-width: 92px;
  padding: 8px 11px; border: 1px solid var(--border-strong); border-radius: 8px;
  background: rgba(255,255,255,0.015);
}
.rv3-stat-val { font-size: 17px; font-weight: 700; }
.rv3-stat-lbl { font-size: 10px; color: var(--text-dim); }
.rv3-empty {
  padding: 14px 16px; border: 1px dashed var(--border-strong); border-radius: 8px;
  background: rgba(255,255,255,0.02); font-size: 12.5px; color: var(--text-dim); line-height: 1.5;
}
.rv3-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin-bottom: 16px; }
.rv3-hi { padding: 8px 11px; border: 1px solid var(--border-strong); border-radius: 8px; background: rgba(255,255,255,0.015); }
.rv3-hi-good { border-left: 3px solid var(--p2); }
.rv3-hi-bad  { border-left: 3px solid var(--accent); }
.rv3-hi-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); margin-bottom: 2px; }
.rv3-hi-body { font-size: 12.5px; line-height: 1.4; }
.rv3-dim { color: var(--text-dim); }
.rv3-table-wrap { overflow-x: auto; border: 1px solid var(--border-strong); border-radius: 10px; margin-bottom: 12px; }
.rv3-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rv3-table thead th {
  text-align: right; padding: 8px 12px; font-size: 10px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-dim); border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}
.rv3-table thead th:first-child, .rv3-table thead th:nth-child(2) { text-align: left; }
.rv3-table tbody td { padding: 7px 12px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.rv3-table tbody tr:last-child td { border-bottom: none; }
.rv3-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.rv3-ref { font-weight: 600; white-space: nowrap; }
.rv3-arch { color: var(--text-dim); white-space: nowrap; }
.rv3-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rv3-pos { color: var(--p2); }
.rv3-neg { color: var(--accent); }
.rv3-note { font-size: 11.5px; line-height: 1.5; color: var(--text-dim); }

.benchmark-legacy-report { margin-top: 16px; border-top: 1px solid var(--border-strong); padding-top: 12px; }
.benchmark-legacy-report > summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-dim);
  list-style: revert; padding: 4px 0;
}
.benchmark-legacy-report > summary:hover { color: var(--text); }
.benchmark-legacy-report-body { padding-top: 10px; }
.benchmark-failclosed-warn {
  margin: 0 0 14px; padding: 9px 13px; border-radius: 8px;
  border: 1px solid rgba(224,161,58,0.4); background: rgba(224,161,58,0.1);
  font-size: 12.5px; line-height: 1.5; color: #e6b665;
}
.benchmark-failclosed-warn strong { color: #f0c47a; }

/* ── Classification Audit / Path Ledger (admin) ───────────────────────────── */
.cav { margin: 12px 0; border: 1px solid var(--border-strong); border-radius: 10px; background: rgba(124,142,248,0.03); }
.cav-summary { cursor: pointer; padding: 9px 13px; font-size: 13px; font-weight: 600; color: var(--text); list-style: revert; }
.cav-body { padding: 4px 13px 13px; }
.cav-section { margin-top: 12px; }
.cav-h { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--p2); margin-bottom: 6px; font-weight: 700; }
.cav-sub { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); margin: 8px 0 3px; }
.cav-warn-h { color: #e0a13a; }
.cav-kv { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 3px 0; font-size: 12px; }
.cav-k { min-width: 130px; color: var(--text-dim); }
.cav-chip { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid var(--border-strong); }
.cav-primary { color: var(--p2); background: var(--p2-soft); border-color: var(--p2-border); font-weight: 600; }
.cav-cmdr { color: #c9b6ff; }
.cav-dim { color: var(--text-dim); font-size: 12px; }
.cav-list { margin: 4px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.5; }
.cav-warn li { color: #e0b072; }
.cav-path { margin: 6px 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border-strong); background: rgba(255,255,255,0.015); }
.cav-path-active { border-left: 3px solid var(--p2); }
.cav-path-excluded { border-left: 3px solid #e0a13a; }
.cav-path-inactive { border-left: 3px solid var(--border-strong); opacity: 0.85; }
.cav-path-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cav-path-name { font-weight: 600; font-size: 12.5px; }
.cav-strength { font-size: 11px; color: var(--p2); font-variant-numeric: tabular-nums; }
.cav-path-reason { font-size: 11.5px; color: var(--text-dim); margin: 2px 0 5px; }
.cav-gates { display: flex; flex-wrap: wrap; gap: 5px; }
.cav-gate { font-size: 10.5px; padding: 1px 6px; border-radius: 5px; background: rgba(255,255,255,0.04); }
.cav-ok { color: #7fd49b; }
.cav-no { color: #e08a8a; }
.cav-evidence, .cav-missing { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
.cav-missing { color: #d98c8c; }
.cav-signals { display: flex; flex-wrap: wrap; gap: 6px; }
.cav-sig { display: inline-flex; gap: 4px; font-size: 11px; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--border-strong); background: rgba(255,255,255,0.015); }
.cav-sig-k { color: var(--text-dim); }
.cav-sig-v { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Simulation Score: Player Summary ─────────────────────────────────────── */
.simps { padding: 4px 2px 2px; }
.simps-lede { font-size: 14px; line-height: 1.55; margin-bottom: 14px; }
.simps-h { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); margin-bottom: 7px; font-weight: 700; }
.simps-cards { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.simps-card { flex: 1 1 130px; min-width: 120px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: rgba(255,255,255,0.02); }
.simps-card-v { font-size: 17px; font-weight: 700; line-height: 1.2; }
.simps-card-l { font-size: 10.5px; color: var(--text-dim); margin-top: 3px; }
.simps-why { margin-bottom: 16px; }
.simps-why ul { margin: 0; padding-left: 18px; line-height: 1.6; font-size: 13px; }
.simps-why-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.simps-why-tile { padding: 10px 12px; border: 1px solid var(--border-strong); border-left: 3px solid var(--p2); border-radius: 10px; background: rgba(255,255,255,0.02); font-size: 13px; line-height: 1.45; }
.simps-break { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.simps-col { padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: rgba(255,255,255,0.015); }
.simps-band { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 13px; }
.simps-band:last-child { border-bottom: none; }
.simps-band-name { flex: 1; }
.simps-band-wr { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 42px; text-align: right; }
.simps-verdict { font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; min-width: 74px; text-align: center; }
.sim-v-crush { color: #0c1f14; background: #7fd49b; }
.sim-v-fav   { color: var(--p2); background: var(--p2-soft); border: 1px solid var(--p2-border); }
.sim-v-even  { color: var(--text-dim); background: rgba(255,255,255,0.06); }
.sim-v-unfav { color: #e0a13a; background: rgba(224,161,58,0.12); }
.sim-v-poor  { color: #e08a8a; background: rgba(224,138,138,0.12); }

/* ── Sim Score reworked layout (rules below the .sim-v-* block so card */
/*    backgrounds win over the verdict pill backgrounds via later declaration) ── */
/* #2 Four power-category result tiles (header) */
.sim-cats { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 18px; }
.sim-cat { flex: 1 1 150px; min-width: 130px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--border-strong); border-left: 3px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.03); text-align: center; }
.sim-cat-v { font-size: 26px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.sim-cat-l { font-size: 11px; color: var(--text-dim); margin-top: 6px; text-transform: uppercase; letter-spacing: .03em; }
.sim-cat.sim-v-crush { border-left-color: #7fd49b; } .sim-cat.sim-v-crush .sim-cat-v { color: #7fd49b; }
.sim-cat.sim-v-fav   { border-left-color: var(--p2); } .sim-cat.sim-v-fav .sim-cat-v { color: var(--p2); }
.sim-cat.sim-v-even  { border-left-color: #8a809e; } .sim-cat.sim-v-even .sim-cat-v { color: var(--text-bright, #e8e4f8); }
.sim-cat.sim-v-unfav { border-left-color: #e0a13a; } .sim-cat.sim-v-unfav .sim-cat-v { color: #e0a13a; }
.sim-cat.sim-v-poor  { border-left-color: #e0728f; } .sim-cat.sim-v-poor .sim-cat-v { color: #e0728f; }
/* smaller header tiles + reference-count meta tile */
.sim-cat--sm { flex: 1 1 120px; min-width: 105px; padding: 9px 12px; }
.sim-cat--sm .sim-cat-v { font-size: 19px; }
.sim-cat--sm .sim-cat-l { font-size: 10px; margin-top: 4px; }
.sim-cat--meta { border-left-color: rgba(124,142,248,0.5); }
.sim-cat--meta .sim-cat-meta-v { color: var(--text-bright, #e8e4f8); }
.sim-cat-meta-u { font-size: 12px; font-weight: 600; color: var(--text-dim); }

/* #1 Stat tiles — centered, blue tint, larger font */
.simps-cards--center { justify-content: center; }
.simps-cards--center .simps-card { flex: 0 1 210px; text-align: center;
  background: rgba(124,142,248,0.10); border-color: rgba(124,142,248,0.32); padding: 14px 16px; }
.simps-cards--center .simps-card-v { font-size: 24px; }
.simps-cards--center .simps-card-l { font-size: 12px; margin-top: 5px; }

/* #7 "Old Score" flag, draped to the right of the score */
.sim-stale-flag { display: inline-block; margin-left: 8px; vertical-align: middle;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: #e0a13a; background: rgba(224,161,58,0.15); border: 1px solid rgba(224,161,58,0.4);
  padding: 2px 7px; border-radius: 999px; }

/* #4 Archetype Results grid */
.sim-arch-section { margin: 18px 0; }
.sim-arch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.sim-arch-card { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border-strong);
  border-left: 3px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.03); }
.sim-arch-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sim-arch-name { font-size: 13.5px; font-weight: 600; color: var(--text-bright, #e8e4f8); }
.sim-arch-wr { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sim-arch-meta { font-size: 11px; color: var(--text-faint); margin-top: 4px; }
.sim-arch-card.sim-v-crush { border-left-color: #7fd49b; } .sim-arch-card.sim-v-crush .sim-arch-wr { color: #7fd49b; }
.sim-arch-card.sim-v-fav   { border-left-color: var(--p2); } .sim-arch-card.sim-v-fav .sim-arch-wr { color: var(--p2); }
.sim-arch-card.sim-v-even  { border-left-color: #8a809e; } .sim-arch-card.sim-v-even .sim-arch-wr { color: var(--text-dim); }
.sim-arch-card.sim-v-unfav { border-left-color: #e0a13a; } .sim-arch-card.sim-v-unfav .sim-arch-wr { color: #e0a13a; }
.sim-arch-card.sim-v-poor  { border-left-color: #e0728f; } .sim-arch-card.sim-v-poor .sim-arch-wr { color: #e0728f; }

/* #5 Nicer "Why this score?" tiles */
.simps-why-tile { display: flex; align-items: flex-start; gap: 9px; }
.simps-why-ico { font-size: 15px; line-height: 1.3; flex-shrink: 0; }

.simps-arch-line { font-size: 13px; line-height: 1.5; margin: 4px 0; }
.simps-arch-tag { color: var(--text-dim); font-weight: 600; }

/* SIM Player Summary ApexCharts cards */
.sim-chart-card { margin: 14px 0; padding: 12px 12px 6px; border: 1px solid var(--border-strong); border-radius: 10px; background: rgba(255,255,255,0.02); }
.sim-chart-card .simps-h { margin-bottom: 4px; }
.sim-chart { width: 100%; min-height: 140px; }
/* Sim Score "Matchup details" accordion — keeps the page summary-first */
.simps-details { margin: 14px 0 4px; border: 1px solid var(--border-strong); border-radius: 10px; background: rgba(255,255,255,0.02); overflow: hidden; }
.simps-details-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; color: var(--text-bright, #e8e4f8); }
.simps-details-summary::-webkit-details-marker { display: none; }
.simps-details-chevron { color: var(--text-faint); transition: transform .15s ease; }
.simps-details[open] .simps-details-chevron { transform: rotate(180deg); }
.simps-details-body { padding: 0 14px 12px; }
.simps-details-body .sim-chart-card:first-child { margin-top: 0; }
.simps-sub { font-size: 11.5px; color: var(--text-dim); line-height: 1.5; margin: 2px 0 8px; }
.simps-singles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.simps-single { padding: 9px 12px; border: 1px solid var(--border-strong); border-left: 3px solid #e0a13a; border-radius: 9px; background: rgba(224,161,58,0.05); }
.simps-single-arch { font-weight: 600; font-size: 13px; }
.simps-single-wr { font-size: 13px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.simps-single-vs { color: var(--text-dim); font-weight: 400; }
.simps-single-tag { font-size: 10.5px; color: #e0a13a; margin-top: 3px; text-transform: uppercase; letter-spacing: .03em; }
.sim-chart .apexcharts-tooltip { background: #1a1430 !important; border: 1px solid var(--border-strong) !important; color: var(--text) !important; }
.sim-chart .apexcharts-tooltip-title { background: #221a3c !important; border-bottom: 1px solid var(--border-strong) !important; }

/* ── Sim Score header meta (decks / games — replaces the v3 diagnostic chips) ── */
/* Tiles stand 75% of the header-bar height and sit vertically centred. The meta
   wrapper stretches to the full summary height; the inner row centres the tiles. */
.benchmark-hero-summary .benchmark-sim-meta { flex: 1; align-self: stretch; display: flex; align-items: stretch; justify-content: flex-end; gap: 10px; }
.benchmark-sim-meta .sim-ladder-meta { display: flex; align-items: center; gap: 10px; }
.sim-ladder-meta { display: flex; gap: 10px; }
.benchmark-sim-meta .sim-ladder-meta-tile { height: 75%; display: flex; flex-direction: column; justify-content: center; }
.sim-ladder-meta-tile { padding: 10px 14px; border: 1px solid var(--border-strong);
  border-left: 3px solid rgba(124,142,248,0.5); border-radius: 12px;
  background: rgba(255,255,255,0.03); text-align: right; min-width: 92px; }
.sim-ladder-meta-v { font-size: 22px; font-weight: 800; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.sim-ladder-meta-u { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.sim-ladder-meta-l { font-size: 10px; color: var(--text-dim); margin-top: 5px; text-transform: uppercase; letter-spacing: .03em; }

/* ── Sim Score metrics dashboard (body) ──────────────────────────────────── */
.simd { display: flex; flex-direction: column; gap: 16px; padding: 4px 2px 2px; }
.simd-h { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); font-weight: 700; }
.simd-sub { font-size: 11.5px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-faint); }

/* Power placement */
.simd-place-title { font-size: 13px; color: var(--text-dim); margin-bottom: 10px; }
.simd-place-title strong { color: var(--text); font-weight: 700; }
.simd-place-pill { display: inline-block; margin-left: 8px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--accent);
  background: rgba(124,142,248,0.14); border: 1px solid rgba(124,142,248,0.4); padding: 2px 8px; border-radius: 999px; }
.simd-place-bar { position: relative; display: flex; height: 30px; border-radius: 8px; overflow: hidden; font-size: 10px; }
.simd-place-seg { display: flex; align-items: center; justify-content: center; font-weight: 600; white-space: nowrap; overflow: hidden; }
.simd-seg-1 { background: rgba(127,212,155,0.22); color: #9fe3b4; }
.simd-seg-2 { background: rgba(177,150,246,0.24); color: #c8b6f9; }
.simd-seg-3 { background: rgba(224,161,58,0.24); color: #e6c27a; }
.simd-seg-4 { background: rgba(224,114,143,0.24); color: #f0a4b6; }
/* Reach overlay — a luminous wash from the left edge up to the deck's
   break-even power, with a bright right edge marking the exact point.
   Sits above the segments (low opacity, so the bracket labels still
   read through) but below nothing else. */
.simd-place-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  /* Stronger, clearly-visible wash (the previous 0.04–0.14 was too
     faint to read as a fill). Brightens the reached region and dims
     everything past the edge via the right shadow. */
  background: linear-gradient(90deg, rgba(255,255,255,0.14), rgba(255,255,255,0.30));
  border-right: 3px solid #ffffff;
  box-shadow: 3px 0 14px rgba(255,255,255,0.45),
              inset 0 0 18px rgba(255,255,255,0.12);
  pointer-events: none;
}
/* Faint 0–100 gridlines every 10% across the bar — a subtle ruler
   under the fill. The 1px line sits at the start of each 10% block. */
.simd-place-grid {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to right,
              rgba(255,255,255,0.07) 0 1px, transparent 1px 10%);
  pointer-events: none;
}
.simd-place-track { position: relative; height: 18px; }
/* Score value, centered under the right edge of the fill. */
.simd-place-edge {
  position: absolute; top: 0;
  transform: translateX(-50%);
  font-size: 11px; font-weight: 700; color: var(--text);
}
/* Scale numbers (10–90) beneath the bar. */
.simd-place-tick {
  position: absolute; top: 1px;
  transform: translateX(-50%);
  font-size: 10px; font-weight: 700;
  color: var(--text-dim);
  opacity: 0.9;
  pointer-events: none;
}
.simd-place-ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-faint); margin-top: 2px; }

/* Two-column cards */
.simd-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.simd-card { padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: 12px; background: rgba(255,255,255,0.02); }
.simd-card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.simd-card-h .simd-h { margin: 0; }
.simd-card-ico { font-size: 15px; line-height: 1; }

/* Win rate by power level (CSS bars) */
.simd-bandrow { margin-bottom: 12px; }
.simd-bandrow:last-child { margin-bottom: 0; }
.simd-bandrow-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; font-size: 14px; }
.simd-bandrow-wr { font-weight: 700; font-variant-numeric: tabular-nums; }
.simd-bar-track { height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.simd-bar-fill { height: 100%; border-radius: 3px; }

/* Reliability */
.simd-rel-big { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.simd-rel-big b { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); }
.simd-rel-big span { font-size: 13px; color: var(--text-dim); }
.simd-rel-flag { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 8px; font-size: 13px; line-height: 1.4; }
.simd-rel-flag b { font-weight: 700; }
.simd-rel-warn { background: rgba(224,161,58,0.12); color: #e6c27a; border: 1px solid rgba(224,161,58,0.3); }
.simd-rel-ok { background: rgba(127,212,155,0.12); color: #9fe3b4; border: 1px solid rgba(127,212,155,0.3); }
.simd-rel-sub { font-size: 11px; color: var(--text-faint); margin-top: 12px; }
/* Brief explainer paragraphs — what the two ± numbers actually mean. */
.simd-rel-explain { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.simd-rel-explain p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-dim); }
.simd-rel-explain b { color: var(--text); font-weight: 700; }

/* Strongest / toughest archetypes */
.simd-arch-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.simd-arch-row:last-child { border-bottom: none; }
.simd-arch-ref { color: var(--text-faint); font-size: 11px; margin-left: 5px; }
.simd-arch-wr { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Vs-expectation residual diverging bars */
.simd-resid-row { display: grid; grid-template-columns: 116px 1fr 46px; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; }
.simd-resid-name { color: var(--text); }
.simd-resid-track { display: flex; }
.simd-resid-track.pos { justify-content: flex-start; padding-left: 50%; }
.simd-resid-track.neg { justify-content: flex-end; padding-right: 50%; }
.simd-resid-bar { height: 14px; }
.simd-resid-bar.pos { background: #7fd49b; border-radius: 0 3px 3px 0; }
.simd-resid-bar.neg { background: #e0728f; border-radius: 3px 0 0 3px; }
.simd-resid-v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.simd-resid-v.pos { color: #7fd49b; }
.simd-resid-v.neg { color: #e0728f; }
.simd-resid-mid { border-top: 1px dashed var(--border-strong); margin: 3px 0; }

/* ── Simulation Score: Admin / Model Diagnostics (collapsed) ──────────────── */
.benchmark-admin-diag { margin-top: 16px; border: 1px solid var(--border-strong); border-radius: 10px; background: rgba(255,255,255,0.015); }
.benchmark-admin-diag > summary { cursor: pointer; padding: 10px 13px; font-size: 13px; font-weight: 700; color: var(--text); list-style: revert; }
.benchmark-admin-diag > summary:hover { color: var(--p2); }
.bm-admin-body { padding: 4px 13px 13px; }
.bm-admin-sub { font-size: 11.5px; color: var(--text-dim); margin-bottom: 12px; line-height: 1.5; }

/* ── Admin → Experimental SIM diagnostic tab ─────────────────────────────────
   Diagnostic-only comparison of Production SIM vs Experimental SIM v3. No
   scoring behavior; purely presentational. */
.expsim-subhead { color: var(--text-dim); font-size: 13px; margin: 0 0 8px; line-height: 1.5; }
.expsim-subhead strong { color: var(--text); }
.expsim-note {
  display: inline-block; font-size: 12px; color: var(--p2);
  background: var(--p2-soft); border: 1px solid var(--p2-border);
  border-radius: 6px; padding: 4px 10px; margin-bottom: 8px;
}
.expsim-formula {
  font-size: 12px; color: var(--text-dim); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.expsim-cards { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.expsim-card {
  flex: 1 1 150px; background: var(--panel-bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; text-align: center;
}
.expsim-card-val { font-size: 22px; font-weight: 700; color: var(--text); }
.expsim-card-lbl { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

.expsim-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.expsim-search {
  flex: 1 1 220px; min-width: 180px; background: var(--bg, #140e1f);
  border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 7px 10px; color: var(--text); font-size: 13px;
}
.expsim-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.expsim-filter { font-size: 11px; padding: 4px 9px; }
.expsim-filter-active {
  border-color: var(--accent); color: var(--accent);
  background: rgba(124, 142, 248, 0.12);
}
.expsim-refresh { font-size: 11px; }

.expsim-table-wrap { overflow-x: auto; }
.expsim-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.expsim-table thead th {
  position: sticky; top: 0; background: var(--panel-bg); z-index: 1;
  text-align: left; padding: 8px 10px; color: var(--text-dim);
  font-weight: 600; border-bottom: 1px solid var(--border-strong); white-space: nowrap;
}
.expsim-th { cursor: pointer; user-select: none; }
.expsim-th:hover { color: var(--text); }
.expsim-th-num, .expsim-num { text-align: right; }
.expsim-table tbody td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.expsim-table tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
.expsim-deck { display: flex; flex-direction: column; }
.expsim-deck-name { color: var(--text); font-weight: 600; }
.expsim-owner { color: var(--text-faint); font-size: 10.5px; }
.expsim-cmdr { color: var(--text-dim); }
.expsim-num { font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.expsim-prodsim { color: var(--accent); }
.expsim-v3 { color: var(--p2); }
.expsim-when { color: var(--text-faint); font-size: 11px; white-space: nowrap; }
.expsim-missing-cell { color: var(--text-faint); font-style: italic; }

.expsim-delta-pos { color: var(--success); }
.expsim-delta-neg { color: var(--danger); }
.expsim-delta-notable { font-weight: 700; }
.expsim-delta-major {
  font-weight: 700; padding: 1px 6px; border-radius: 5px;
  background: rgba(217, 122, 108, 0.10); outline: 1px solid var(--border-strong);
}
td.expsim-delta-pos.expsim-delta-major { background: rgba(121, 194, 201, 0.12); }
td.expsim-delta-neg.expsim-delta-major { background: rgba(217, 122, 108, 0.12); }

.expsim-pill { font-size: 10.5px; padding: 2px 7px; border-radius: 999px; font-weight: 600; }
.expsim-pill-ok      { color: var(--success); background: var(--p3-soft); border: 1px solid var(--p3-border); }
.expsim-pill-err     { color: var(--danger);  background: var(--p1-soft); border: 1px solid var(--p1-border); }
.expsim-pill-warn    { color: var(--p2);      background: var(--p2-soft); border: 1px solid var(--p2-border); }
.expsim-pill-missing { color: var(--text-faint); background: transparent; border: 1px dashed var(--border-strong); }

.expsim-actions { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; white-space: nowrap; }
.expsim-actions .ghost-btn { font-size: 10.5px; padding: 3px 8px; }
.expsim-rescore-status { font-size: 11px; }

.expsim-legend { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 10px; font-size: 11px; }
.expsim-legend-chip { padding: 2px 8px; border-radius: 5px; }
.expsim-legend-note { color: var(--text-faint); margin-left: auto; }

/* ── Experimental SIM drill-down (read-only detail row) ─────────────────────── */
.expsim-toggle {
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  font-size: 12px; padding: 0 6px 0 0; line-height: 1;
}
.expsim-toggle:hover { color: var(--text); }
.expsim-deck { display: flex; align-items: center; gap: 2px; }
.expsim-deck-cell { display: flex; flex-direction: column; }
.expsim-row-open > td { border-bottom-color: transparent; }
.expsim-detail-row > td { padding: 0 10px 14px; background: rgba(255,255,255,0.015); }
.expsim-detail { font-size: 12px; color: var(--text); }
.expsim-detail-loading { color: var(--text-dim); padding: 12px; }

.expsim-detail-summary {
  background: var(--panel-bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; margin: 10px 0; line-height: 1.6;
}
.expsim-detail-k { color: var(--text-dim); }
.expsim-detail-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 8px; }
.expsim-detail-sub { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.expsim-mu-list { list-style: none; margin: 0; padding: 0; }
.expsim-mu-list li { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; }
.expsim-mu-name { color: var(--text); flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.expsim-mu-meta { color: var(--text-faint); font-size: 10.5px; }
.expsim-mu-wr { color: var(--p2); font-variant-numeric: tabular-nums; }

.expsim-band-breakdown {
  background: var(--panel-bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; margin: 10px 0;
}
.expsim-band-note { text-transform: none; letter-spacing: 0; color: var(--text-faint); font-size: 10.5px; }
.expsim-band-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.expsim-band-chip {
  display: inline-flex; align-items: baseline; gap: 4px;
  background: var(--chip-bg, rgba(127,127,127,0.10)); border: 1px solid var(--border);
  border-radius: 6px; padding: 3px 8px; font-size: 11.5px; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.expsim-band-chip.expsim-band-cedh { border-color: var(--accent); }
.expsim-band-n { color: var(--text-faint); font-size: 10px; }

.expsim-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 10px; }
@media (max-width: 1100px) { .expsim-detail-grid { grid-template-columns: 1fr; } .expsim-detail-cols { grid-template-columns: 1fr; } }
.expsim-detail-pane { background: var(--panel-bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; overflow-x: auto; }
.expsim-detail-h { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.expsim-detail-meta-line { font-size: 11px; color: var(--text-dim); margin-bottom: 6px; }
.expsim-detail-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.expsim-detail-table th { text-align: left; color: var(--text-dim); font-weight: 600; padding: 4px 8px; border-bottom: 1px solid var(--border-strong); white-space: nowrap; }
.expsim-detail-table td { padding: 4px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.expsim-detail-empty { color: var(--text-faint); font-style: italic; padding: 10px; }
.expsim-detail-future { display: block; margin-top: 6px; color: var(--text-dim); font-style: normal; }
.expsim-detail-metabar { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11px; color: var(--text-dim); padding: 8px 2px; border-top: 1px solid var(--border); }
.expsim-detail-metabar strong { color: var(--text); }
.expsim-detail-note { font-size: 11px; color: var(--text-faint); margin-top: 6px; }

/* ── Experimental SIM review workflow ───────────────────────────────────────── */
.expsim-filter-sep { font-size: 11px; color: var(--text-faint); align-self: center; margin-left: 6px; }
.expsim-export { font-size: 11px; }
.expsim-review { vertical-align: middle; }
.expsim-review-status {
  background: var(--bg, #140e1f); color: var(--text); border: 1px solid var(--border-strong);
  border-radius: 6px; padding: 3px 6px; font-size: 11px; max-width: 170px;
}
.expsim-review-notes {
  background: var(--bg, #140e1f); color: var(--text); border: 1px solid var(--border-strong);
  border-radius: 6px; padding: 3px 7px; font-size: 11.5px; min-width: 160px; width: 100%;
}
.expsim-review-saved { font-size: 10px; margin-left: 4px; white-space: nowrap; }
.expsim-saving   { color: var(--text-dim); }
.expsim-saved    { color: var(--success); }
.expsim-unsaved  { color: var(--p2); }
.expsim-save-err { color: var(--danger); }

/* Robust v3 (Huber) parallel diagnostic column */
.expsim-robust { color: var(--p3); font-variant-numeric: tabular-nums; }
.expsim-robust-note { font-size: 10.5px; color: var(--text-faint); }

/* Robust v3 promoted to primary; equal-weight v3 demoted to muted secondary */
.expsim-robust-primary { color: var(--p2); font-weight: 700; }
.expsim-eqweight { color: var(--text-dim); }

/* Production-Viability: Candidate Main columns + note */
.expsim-candidate { color: var(--accent); font-weight: 600; }
.expsim-viability-note { color: var(--p2); background: var(--p2-soft); border: 1px solid var(--p2-border); border-radius: 6px; padding: 4px 10px; margin: 4px 0; display: inline-block; }
.expsim-viability-toggle { font-size: 11px; }

/* Official SIM source indicator */
.expsim-sim-source { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; margin-left: 8px; text-transform: none; letter-spacing: 0; }
.expsim-sim-source-prod { color: var(--text-dim); background: rgba(255,255,255,0.05); border: 1px solid var(--border-strong); }
.expsim-sim-source-robust { color: var(--p2); background: var(--p2-soft); border: 1px solid var(--p2-border); }

/* Score-source marker beside Main Power */
.expsim-src-badge { display: inline-block; font-size: 9px; font-weight: 700; line-height: 1; padding: 2px 4px; border-radius: 4px; margin-left: 5px; vertical-align: middle; cursor: help; }
.expsim-src-robust { color: var(--p2); background: var(--p2-soft); border: 1px solid var(--p2-border); }
.expsim-src-prod { color: var(--text-dim); background: rgba(255,255,255,0.05); border: 1px solid var(--border-strong); }
.expsim-src-failclosed { color: #e0a13a; background: rgba(224,161,58,0.12); border: 1px solid rgba(224,161,58,0.4); }

/* Production-hardening status + rollout block */
.expsim-status-block { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: 10px; background: rgba(255,255,255,0.02); }
.expsim-status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 18px; }
.expsim-status-grid > div { display: flex; flex-direction: column; gap: 2px; }
.expsim-status-k { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); }
.expsim-status-v { font-size: 13px; font-weight: 600; }
.expsim-status-v.expsim-status-on { color: var(--p2); }
.expsim-status-v code, .expsim-rollback-note code { font-size: 11px; background: rgba(255,255,255,0.06); padding: 1px 5px; border-radius: 4px; }
.expsim-rollout { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.expsim-roll-stat { display: flex; flex-direction: column; gap: 2px; min-width: 96px; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: rgba(255,255,255,0.015); }
.expsim-roll-val { font-size: 17px; font-weight: 700; }
.expsim-roll-lbl { font-size: 10px; color: var(--text-dim); }
.expsim-roll-robust .expsim-roll-val { color: var(--p2); }
.expsim-roll-warn .expsim-roll-val { color: #e0a13a; }
.expsim-rollback-note { margin-top: 12px; font-size: 11.5px; color: var(--text-dim); line-height: 1.5; }

/* ── Deterministic Builder QA (hidden admin tab) ──────────────────────────── */
.detqa-note { font-size: 12px; color: var(--text-dim); margin-bottom: 14px; line-height: 1.5; }
.detqa-panel { margin-bottom: 16px; }
.detqa-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.detqa-input { padding: 7px 10px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04); color: var(--text); font-size: 13px; flex: 1; min-width: 160px; }
.detqa-input.detqa-sm { flex: 0 0 150px; min-width: 120px; }
.detqa-ta { width: 100%; min-height: 130px; margin: 8px 0; padding: 10px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); color: var(--text);
  font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; resize: vertical; }
.detqa-ta-sm { min-height: 70px; }
.detqa-out { margin-top: 12px; font-size: 13px; }
.detqa-head { margin-bottom: 8px; }
.detqa-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 10.5px;
  font-weight: 700; letter-spacing: 0.04em; }
.detqa-ok  { background: rgba(74,222,128,0.18); color: #6ee7a8; border: 1px solid rgba(74,222,128,0.4); }
.detqa-bad { background: rgba(248,113,113,0.18); color: #fca5a5; border: 1px solid rgba(248,113,113,0.4); }
.detqa-table { border-collapse: collapse; margin: 8px 0; font-size: 12.5px; }
.detqa-table td { padding: 3px 14px 3px 0; color: var(--text-dim); }
.detqa-table td:last-child { color: var(--text-bright); font-weight: 600; }
.detqa-sections { margin: 8px 0; }
.detqa-section { font-size: 12px; margin: 3px 0; color: var(--text-dim); }
.detqa-mono, .detqa-section .detqa-mono { font-family: ui-monospace, Menlo, monospace; color: var(--text); }
.detqa-issues { margin: 6px 0; padding-left: 18px; font-size: 12px; line-height: 1.6; }
.detqa-issues-errors li { color: #fca5a5; }
.detqa-issues-warnings li { color: #e0a13a; }
.detqa-none { font-size: 12px; color: var(--text-faint); }
.detqa-raw { margin-top: 10px; }
.detqa-raw summary { cursor: pointer; font-size: 12px; color: rgba(124,142,248,0.85); }
.detqa-raw pre { max-height: 360px; overflow: auto; background: rgba(0,0,0,0.35); padding: 10px;
  border-radius: 8px; font-size: 11px; line-height: 1.4; }

/* ── Phase 14: Deck Check Observability ──────────────────────────────────── */
.detqa-statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; margin: 10px 0 16px; }
.detqa-statcard { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; padding: 12px; text-align: center; }
.detqa-statval { font-size: 22px; font-weight: 700; color: var(--text-bright); }
.detqa-statlbl { font-size: 11px; color: var(--text-faint); margin-top: 2px;
  text-transform: uppercase; letter-spacing: 0.03em; }
.detqa-obsgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px; margin-bottom: 16px; }
.detqa-obsh { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-dim); margin: 6px 0; }
.detqa-countlist { list-style: none; margin: 0; padding: 0; }
.detqa-countlist li { display: flex; align-items: center; gap: 8px; padding: 3px 0;
  font-size: 12.5px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.detqa-countn { margin-left: auto; background: rgba(255,255,255,0.1); color: var(--text-dim);
  font-size: 11px; padding: 1px 7px; border-radius: 8px; font-weight: 600; }
.detqa-cardname { color: var(--text); }
.detqa-mapalias-btn { font-size: 11px; padding: 1px 8px; }
.detqa-tablewrap { overflow-x: auto; }
.detqa-eventstable { width: 100%; font-size: 11.5px; }
.detqa-eventstable th { text-align: left; padding: 4px 10px 4px 0; color: var(--text-faint);
  font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.12); white-space: nowrap; }
.detqa-eventstable td { padding: 4px 10px 4px 0; color: var(--text-dim);
  border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: top; }
.detqa-eventstable td:last-child { color: var(--text-dim); font-weight: 400; }
.detqa-stbadge { padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 600; }
.detqa-st-corrected { background: rgba(94,196,122,0.15); color: #5ec47a; }
.detqa-st-passed { background: rgba(94,196,122,0.12); color: #5ec47a; }
.detqa-st-unresolved_errors { background: rgba(232,90,90,0.15); color: #e85a5a; }
.detqa-st-repair_skipped { background: rgba(232,133,74,0.15); color: #e8854a; }
.detqa-aliasbox { background: rgba(124,142,248,0.06); border: 1px solid rgba(124,142,248,0.25);
  border-radius: 10px; padding: 14px; margin: 12px 0; }
.detqa-aliashead { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.detqa-apierror { padding: 10px 12px; border-radius: 8px; background: rgba(248,113,113,0.12);
  border: 1px solid rgba(248,113,113,0.35); color: #fca5a5; font-size: 12.5px; }
.detqa-cand { padding: 8px 0; border-top: 1px solid rgba(255,255,255,0.08); }
.detqa-sw { font-size: 12px; color: var(--text-dim); margin: 2px 0; }
.detqa-hybrid { margin-top: 10px; font-size: 12px; }
.detqa-mods { list-style: none; padding: 0; margin: 6px 0; font-size: 12.5px; }
.detqa-versions { font-size: 11.5px; color: var(--text-dim); margin-top: 6px; }
.detqa-adv summary { cursor: pointer; font-size: 12px; color: rgba(124,142,248,0.85); margin: 4px 0; }

/* ── Reference Pool Health (admin) ────────────────────────────────────────── */
.rph-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.rph-h { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--p2); font-weight: 700; margin-bottom: 8px; }
.rph-targets { font-size: 12px; color: var(--text-dim); margin-top: 6px; }
.rph-band { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-size: 12.5px; }
.rph-band-name { min-width: 150px; }
.rph-band-bar { flex: 1; height: 9px; background: rgba(255,255,255,0.06); border-radius: 999px; overflow: hidden; }
.rph-band-fill { display: block; height: 100%; border-radius: 999px; }
.rph-bar-ok { background: var(--p2); }
.rph-bar-under { background: #e0a13a; }
.rph-band-count { min-width: 110px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-dim); }
.rph-flagrow { font-size: 12px; line-height: 1.6; margin: 3px 0; }
.rph-flagrow-k { color: var(--text-dim); }
.rph-table .rph-num, .rph-num { text-align: right; font-variant-numeric: tabular-nums; }
.rph-core { font-size: 9px; color: var(--p2); background: var(--p2-soft); border: 1px solid var(--p2-border); border-radius: 4px; padding: 0 4px; text-transform: uppercase; }
.rph-cov { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.rph-cov-trend  { color: #0c1f14; background: #7fd49b; }
.rph-cov-dir    { color: var(--p2); background: var(--p2-soft); border: 1px solid var(--p2-border); }
.rph-cov-single { color: #e0a13a; background: rgba(224,161,58,0.12); }
.rph-flag { font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 5px; text-transform: uppercase; }
.rph-flag-too_easy { color: #e0a13a; background: rgba(224,161,58,0.12); }
.rph-flag-too_hard { color: #e0728f; background: rgba(224,114,143,0.12); }
.rph-flag-high_residual { color: #c879d6; background: rgba(200,121,214,0.12); }
.rph-flag-model_risk { color: #e08a8a; background: rgba(224,138,138,0.12); }

/* ============================================================
   Phase 16 — Deck Report (polished post-build summary).
   Replaces the raw Deck Check interstitial as the user-facing
   step 6. Dark/glass panels, commander-art header, compact
   stat chips, collapsed Deck Check section.
   ============================================================ */
.deckreport-wrap { max-width: 980px; }

/* Header with commander art-crop background + glass overlay */
.deckreport-header {
  position: relative; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--border-strong);
  background: var(--panel-bg);
  margin: 4px 0 6px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.35), inset 0 0 60px rgba(124,142,248,0.06);
}
.deckreport-header-inner { padding: 26px 28px 22px; }
.deckreport-eyebrow {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin-bottom: 8px;
}
.deckreport-cmdname {
  font-family: var(--font-display); font-size: 34px; line-height: 1.05;
  font-weight: 700; color: #fff; display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; text-shadow: 0 2px 18px rgba(0,0,0,0.6);
}
.deckreport-pips { display: inline-flex; gap: 3px; align-items: center; }
.deckreport-header-meta {
  margin-top: 6px; font-size: 14px; color: var(--text); opacity: 0.92;
  text-shadow: 0 1px 10px rgba(0,0,0,0.5);
}

/* Status badge (used in header + meta + deck-check) */
.deckreport-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--text);
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: rgba(0,0,0,0.28);
}
.deckreport-badge--hero { margin-top: 14px; backdrop-filter: blur(4px); }
.deckreport-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.deckreport-badge-label { font-weight: 700; }
.deckreport-badge-sep { opacity: 0.45; }
.deckreport-badge--ok    { color: #79c2c9; }
.deckreport-badge--fixed { color: #7c8ef8; }
.deckreport-badge--warn  { color: #e2c47a; }
.deckreport-badge--ok .deckreport-badge-sep,
.deckreport-badge--fixed .deckreport-badge-sep,
.deckreport-badge--warn .deckreport-badge-sep { color: var(--text-dim); }

.deckreport-lead { color: var(--text-dim); font-size: 14px; margin: 14px 2px 18px; }

/* Top row: commander card preview + metadata grid */
.deckreport-top {
  display: grid; grid-template-columns: minmax(240px, 300px) 1fr; gap: 18px;
  align-items: start; margin-bottom: 22px;
}
.deckreport-cmdcard {
  background: var(--bg-elev-2); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden; box-shadow: 0 6px 22px rgba(0,0,0,0.3);
}
.deckreport-cmdcard-art {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
  background: var(--bg-elev); cursor: zoom-in;
}
.deckreport-cmdcard-art--ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 42px; color: var(--text-faint);
}
.deckreport-cmdcard-info { padding: 12px 14px 14px; }
.deckreport-cmdcard-eyebrow {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); font-weight: 700;
}
.deckreport-cmdcard-name {
  font-family: var(--font-display); font-size: 19px; font-weight: 700;
  color: var(--text); margin-top: 3px; cursor: zoom-in;
}
.deckreport-cmdcard-type {
  font-size: 12px; color: var(--text-dim); margin-top: 4px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

.deckreport-meta-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
}
.deckreport-meta-card {
  background: var(--bg-elev-2); border: 1px solid var(--border);
  border-radius: 11px; padding: 11px 13px;
}
.deckreport-meta-label {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 600;
}
.deckreport-meta-value {
  font-size: 17px; font-weight: 700; color: var(--text); margin-top: 4px;
}
/* Anticipated-scores box — full-width tile holding the standard score chips. */
.deckreport-scores-card { grid-column: 1 / -1; }
.deckreport-scores-card .deckreport-meta-label { margin-bottom: 7px; }
.deckreport-score-chips {
  width: 100%;            /* override the My-Decks fixed 200px width */
  justify-content: stretch;
  gap: 8px;
}
.deckreport-score-chips .mdr-score-chip {
  flex: 1 1 0;           /* three equal chips filling the box */
  flex-direction: row;   /* label + value on one line → shorter chips */
  gap: 7px;
  width: auto;
  padding: 4px 8px;
}
.deckreport-score-chips .mdr-score-chip-val { font-size: 17px; }

/* Sections */
.deckreport-section {
  background: var(--panel-bg); border: 1px solid var(--border);
  border-radius: 14px; padding: 18px 20px; margin-bottom: 16px;
}
.deckreport-section-title {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin-bottom: 12px;
}
.deckreport-strat-choice {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  color: var(--text);
}

/* Win-condition chips */
.deckreport-wins { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.deckreport-win {
  font-size: 12px; font-weight: 600; color: var(--accent);
  background: rgba(124,142,248,0.12); border: 1px solid rgba(124,142,248,0.3);
  padding: 4px 11px; border-radius: 999px;
}

/* Skeleton chips */
.deckreport-skel-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.deckreport-skel-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-elev-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 12px;
}
.deckreport-skel-icon { font-size: 14px; }
.deckreport-skel-label { font-size: 13px; color: var(--text-dim); }
.deckreport-skel-count {
  font-size: 15px; font-weight: 700; color: var(--text);
  background: rgba(124,142,248,0.14); border-radius: 7px; padding: 1px 8px;
}

/* Deck list by category */
.deckreport-decklist-sub { font-size: 13px; color: var(--text-dim); margin: -4px 0 14px; }
.deckreport-catgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px 22px;
}
.deckreport-cat { break-inside: avoid; }
.deckreport-cat-head {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid var(--border-strong); padding-bottom: 6px; margin-bottom: 7px;
  font-weight: 700; color: var(--text); font-size: 14px;
}
.deckreport-cat-count { font-size: 13px; color: var(--accent); font-weight: 700; }
.deckreport-cardlist { list-style: none; margin: 0; padding: 0; }
.deckreport-card {
  font-size: 13px; color: var(--text); padding: 2.5px 0; cursor: default;
}
.deckreport-card[data-card] { cursor: zoom-in; }
.deckreport-card:hover { color: var(--accent); }
.deckreport-card-qty { color: var(--text-dim); font-weight: 600; }
.deckreport-card--unres { color: var(--text-dim); font-style: italic; cursor: default; }

/* Compact Deck Check section */
.deckreport-dc-summary { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.deckreport-dc-line { font-size: 13.5px; color: var(--text); }
.deckreport-dc-breakdown { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.deckreport-dc-bit {
  font-size: 11.5px; color: var(--text-dim);
  background: var(--bg-elev-2); border: 1px solid var(--border);
  border-radius: 7px; padding: 3px 9px;
}
.deckreport-dc-accs { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.deckreport-dc-acc {
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-elev); overflow: hidden;
}
.deckreport-dc-acc--error { border-color: rgba(226,196,122,0.4); }
.deckreport-dc-acc--warn  { border-color: var(--border); }
.deckreport-dc-summaryrow {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 11px 14px; list-style: none; user-select: none;
}
.deckreport-dc-summaryrow::-webkit-details-marker { display: none; }
.deckreport-dc-acc-title { font-weight: 600; color: var(--text); font-size: 13.5px; }
.deckreport-dc-chevron { margin-left: auto; color: var(--text-dim); transition: transform 0.15s ease; }
.deckreport-dc-acc[open] .deckreport-dc-chevron { transform: rotate(180deg); }
.deckreport-dc-accbody { padding: 4px 14px 14px; border-top: 1px solid var(--border); }
.deckreport-dc-group { margin-top: 12px; }
.deckreport-dc-grouptitle {
  font-size: 12.5px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 8px; margin-bottom: 5px;
}
.deckreport-dc-more { margin-top: 4px; }
.deckreport-dc-more > summary {
  cursor: pointer; font-size: 12px; color: var(--accent);
  list-style: none; padding: 3px 0;
}
.deckreport-dc-more > summary::-webkit-details-marker { display: none; }

/* Actions row */
.deckreport-actions { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.deckreport-cancel { opacity: 0.85; }

@media (max-width: 720px) {
  .deckreport-top { grid-template-columns: 1fr; }
  .deckreport-cmdname { font-size: 27px; }
}

/* ============================================================
   Deck Report v2 — 3-column header band, art skeleton tiles,
   commander rules text, and print-to-PDF layout.
   ============================================================ */

/* Top band: commander image · rules text · metadata tiles */
.deckreport-top3 {
  display: grid;
  grid-template-columns: 250px minmax(220px, 1fr) minmax(330px, 1.25fr);
  gap: 16px; margin-bottom: 22px; align-items: stretch;
}
.deckreport-top3 > div { height: 270px; }

/* Col 1 — commander art + P/T overlay + name caption */
.deckreport-cmdimg {
  position: relative; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border); background: var(--bg-elev-2);
  box-shadow: 0 6px 22px rgba(0,0,0,0.3);
}
.deckreport-cmdimg-art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 18%; cursor: zoom-in;
}
.deckreport-cmdimg-art--ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 56px; color: var(--text-faint); background: var(--bg-elev);
}
.deckreport-cmdimg-pt {
  position: absolute; top: 9px; right: 9px; z-index: 3;
  background: rgba(12,9,19,0.82); border: 1px solid rgba(255,255,255,0.20);
  border-radius: 8px; padding: 4px 11px; font-weight: 800; font-size: 16px;
  color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.5); backdrop-filter: blur(3px);
}
.deckreport-cmdimg-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 12px 13px 11px;
  background: linear-gradient(180deg, rgba(12,9,19,0) 0%, rgba(12,9,19,0.55) 45%, rgba(12,9,19,0.94) 100%);
}
.deckreport-cmdimg-name {
  font-family: var(--font-display); font-size: 19px; font-weight: 700; color: #fff;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; line-height: 1.1;
}
.deckreport-cmdimg-type { font-size: 11px; color: var(--text-dim); margin-top: 3px; }

/* Col 2 — commander rules (oracle) text, scrolls to the band height */
.deckreport-instr {
  background: var(--bg-elev-2); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px 16px; overflow-y: auto;
}
.deckreport-instr-label {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin-bottom: 9px;
}
.deckreport-instr-body { font-size: 13.5px; line-height: 1.5; color: var(--text); }
.deckreport-instr-body p { margin: 0 0 8px; }
.deckreport-instr-body p:last-child { margin-bottom: 0; }
.deckreport-instr-empty { color: var(--text-dim); font-style: italic; }

/* Col 3 — metadata tiles, fit the band height, subtle commander-art behind */
.deckreport-top3 .deckreport-meta-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr; gap: 8px;
}
.deckreport-meta-card--art {
  background-size: cover; background-position: center;
  border-color: var(--border-strong);
}
.deckreport-meta-card--art .deckreport-meta-label { color: #cfc6e6; }

/* Skeleton tiles — match the Step-5 imagery, count overlaid, read-only */
.deckreport-skel-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px;
}
.deckreport-skeltile {
  position: relative; min-height: 96px; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background-color: rgba(255,255,255,0.03);
  background-size: cover; background-position: center 28%; background-repeat: no-repeat;
}
.deckreport-skeltile-fill {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-end; padding: 10px 12px;
  background: linear-gradient(180deg, rgba(12,9,19,0.10) 0%, rgba(12,9,19,0.45) 50%, rgba(12,9,19,0.88) 100%);
}
.deckreport-skeltile-count {
  font-family: var(--font-display); font-size: 30px; font-weight: 800; line-height: 1;
  color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.75);
}
.deckreport-skeltile-label {
  font-size: 11px; font-weight: 600; color: var(--text); margin-top: 3px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.85);
}

/* Responsive collapse for the top band */
@media (max-width: 900px) {
  .deckreport-top3 { grid-template-columns: 1fr 1fr; }
  .deckreport-top3 > .deckreport-meta-grid { grid-column: 1 / -1; height: auto; }
}
@media (max-width: 560px) {
  .deckreport-top3 { grid-template-columns: 1fr; }
  .deckreport-top3 > div { height: auto; }
  .deckreport-cmdimg { height: 230px; }
}

/* ── Print-to-PDF: page 1 = details, page 2 = deck list ── */
@media print {
  @page { size: letter portrait; margin: 0.5in; }   /* 8.5 × 11 */
  html, body { background: #0c0913 !important; }
  .topbar, #topbar-nav, .bg-decor, #progress-banner, .builder-rail-wrap,
  .deckreport-actions, .deckreport-lead, .deckreport-print-btn, .notif-wrap, #activity-wrap,
  #faq-wrap, #whatsnew-wrap, #feedback-wrap { display: none !important; }
  .builder-step-wrap.deckreport-wrap { max-width: none !important; margin: 0 !important; }
  /* force backgrounds/gradients/art to render without the dialog toggle */
  .deckreport-wrap, .deckreport-wrap * {
    -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
  }
  .deckreport-section, .deckreport-header, .deckreport-meta-card,
  .deckreport-skeltile, .deckreport-cat, .deckreport-cmdimg, .deckreport-instr {
    break-inside: avoid;
  }
  /* deck list starts a fresh page */
  .deckreport-decklist-section { break-before: page; }
  /* let the rules text + tiles flow at natural height in print */
  .deckreport-top3 > .deckreport-instr,
  .deckreport-top3 > .deckreport-meta-grid { height: auto !important; }
  .deckreport-instr { overflow: visible !important; }
  .deckreport-catgrid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* Phase 17 — skeleton: flex is the read-only auto-balancer */
.skel-total-sep { opacity: 0.4; margin: 0 4px; }
.skel-role-controls--flex { display: flex; align-items: center; justify-content: center; gap: 8px; }
.skel-flex-tag {
  font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent); opacity: 0.85; font-weight: 600;
}
.skel-role-card--flex { opacity: 0.92; }
.skel-role-card--flex .skel-count { color: var(--accent); }


/* Browse-by-commander: badge shows popularity rank (#N) instead of fit score */
.builder-cmd-score--rank { background: rgba(124,142,248,0.85); }

/* Ability filter menu — scrollable checklist (many categories) */
.card-add-chip-menu-abilities { min-width: 210px; }
.card-add-chip-menu-scroll { max-height: 280px; overflow-y: auto; }

/* Ability menu search box + no-result row */
.card-add-chip-menu-search {
  width: 100%; box-sizing: border-box; margin: 6px 0 4px;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 10px; color: var(--text); font-size: 13px;
}
.card-add-chip-menu-search:focus { outline: none; border-color: var(--accent); }
.card-add-chip-menu-noresult { color: var(--text-dim); font-size: 12px; padding: 8px 6px; }

/* Step 4: strategy-write failure notice + retry */
.builder-strat-error {
  background: rgba(226,196,122,0.10); border: 1px solid rgba(226,196,122,0.35);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 14px;
  color: var(--text); font-size: 13.5px; display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap;
}

/* Deck Report: Print Deck button (top-right of the header) */
.deckreport-header { position: relative; }
.deckreport-print-btn {
  position: absolute; top: 14px; right: 14px; z-index: 4;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(12,9,19,0.72); border: 1px solid rgba(255,255,255,0.20);
  color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 7px 13px; border-radius: 999px; backdrop-filter: blur(4px);
  transition: background 0.15s, border-color 0.15s;
}
.deckreport-print-btn:hover { background: rgba(124,142,248,0.30); border-color: var(--accent); }
.deckreport-recs-section .deckcheck-recgroup { margin-top: 10px; }

/* ── Battle Log (Admin turn-by-turn match viewer) ─────────────────────────── */
.bl-wrap { display: flex; flex-direction: column; gap: 16px; }
.bl-runbar { padding: 16px 20px; }
.bl-runbar-title, .bl-sidebar-title {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(216,121,91,0.8);
  margin-bottom: 10px;
}
.bl-runbar-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bl-select {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  color: var(--text); border-radius: 8px; padding: 7px 12px; font-size: 13px; min-width: 180px;
}
.bl-vs { color: var(--text-dim); font-size: 12px; font-style: italic; }
.bl-seed-lbl { color: var(--text-dim); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.bl-seed { width: 56px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  color: var(--text); border-radius: 6px; padding: 6px 8px; }
.bl-run-btn { padding: 8px 18px; }
.bl-run-status { color: var(--text-dim); font-size: 12px; }

.bl-layout { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start; }
.bl-sidebar { padding: 14px 14px; max-height: 70vh; overflow-y: auto; }
.bl-match-list { display: flex; flex-direction: column; gap: 6px; }
.bl-match-row {
  text-align: left; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; padding: 8px 10px; cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.bl-match-row:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); }
.bl-match-active { background: rgba(124,142,248,0.16); border-color: rgba(124,142,248,0.42); }
.bl-match-decks { font-size: 12px; color: var(--text); font-weight: 600; line-height: 1.3; }
.bl-match-meta { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

.bl-viewer { padding: 20px 22px; min-height: 200px; }
.bl-viewer-head { margin-bottom: 14px; }
.bl-matchup { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--text); }
.bl-result-line { font-size: 13px; color: rgba(216,121,91,0.95); margin-top: 4px; font-weight: 600; }

.bl-modebar { display: flex; gap: 8px; margin-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.07); padding-bottom: 12px; }
.bl-mode {
  font-size: 13px; font-weight: 600; padding: 7px 16px; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); color: var(--text-dim);
}
.bl-mode-active { background: rgba(124,142,248,0.18); border-color: rgba(124,142,248,0.45); color: #b0b8ff; }
.bl-chronicle { font-size: 14px; line-height: 1.7; color: var(--text); }

.bl-toolbar { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.bl-seg { display: inline-flex; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; overflow: hidden; }
.bl-seg-btn { font-size: 12px; padding: 6px 13px; cursor: pointer; background: transparent;
  border: none; color: var(--text-dim); transition: background 0.12s, color 0.12s; white-space: nowrap; }
.bl-seg-btn:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.bl-seg-active { background: rgba(124,142,248,0.22); color: #c2c8ff; font-weight: 600; }

.bl-turns { display: flex; flex-direction: column; gap: 8px; }
.bl-turn { border-radius: 8px; border: 1px solid rgba(255,255,255,0.06);
  background: rgba(20,15,30,0.4); overflow: hidden; }
.bl-turn.p1 { border-left: 3px solid var(--p1); }
.bl-turn.p2 { border-left: 3px solid var(--p2); }
.bl-turn-head { display: flex; align-items: baseline; gap: 12px; padding: 10px 14px; cursor: pointer;
  list-style: none; user-select: none; }
.bl-turn-head::-webkit-details-marker { display: none; }
.bl-turn-head::before { content: "▸"; color: rgba(216,121,91,0.6); font-size: 11px; transition: transform 0.15s; }
.bl-turn[open] > .bl-turn-head::before { transform: rotate(90deg); }
.bl-turn-num { font-family: var(--font-display); font-size: 15px; font-weight: 700;
  letter-spacing: 0.03em; color: rgba(216,121,91,0.95); white-space: nowrap; }
.bl-turn-player { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; }
.bl-turn-result { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-turn-body { padding: 4px 14px 12px; }

.bl-sub { margin-top: 8px; border: 1px solid rgba(255,255,255,0.05); border-radius: 6px; background: rgba(0,0,0,0.18); }
.bl-sub > summary { cursor: pointer; padding: 7px 12px; font-family: var(--font-display); font-size: 11px;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(216,121,91,0.7);
  list-style: none; user-select: none; }
.bl-sub > summary::-webkit-details-marker { display: none; }
.bl-sub > summary::before { content: "+ "; color: rgba(216,121,91,0.5); }
.bl-sub[open] > summary::before { content: "− "; }
.bl-startzones { margin: 8px 10px 10px; border: 1px dashed rgba(255,255,255,0.08); border-radius: 6px; background: transparent; }
.bl-startzones > summary { cursor: pointer; padding: 6px 10px; font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-dim); user-select: none; }

.bl-zones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 12px; }
.bl-pz { border-radius: 6px; padding: 8px 10px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.05); }
.bl-pz.p1 { border-left: 2px solid var(--p1); }
.bl-pz.p2 { border-left: 2px solid var(--p2); }
.bl-pz-head { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--text);
  margin-bottom: 6px; display: flex; align-items: baseline; gap: 8px; }
.bl-life { color: rgba(216,121,91,0.9); font-size: 12px; }
.bl-pz-when { color: var(--text-dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; margin-left: auto; }
.bl-zline { display: flex; flex-wrap: wrap; gap: 3px 5px; align-items: baseline; margin: 3px 0; }
.bl-zlabel { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-dim);
  min-width: 56px; flex-shrink: 0; }
.bl-card { font-size: 11px; padding: 1px 6px; border-radius: 4px; background: rgba(255,255,255,0.06); color: var(--text); }
.bl-card-cmdr { background: rgba(226,196,122,0.16); color: #e9d6a0; }
.bl-card-gy { background: rgba(255,255,255,0.03); color: var(--text-dim); }
.bl-pt { color: rgba(216,121,91,0.85); font-size: 10px; }
.bl-empty { color: var(--text-faint); font-size: 11px; font-style: italic; }

.bl-phase { padding: 4px 10px; }
.bl-phase-label { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(216,121,91,0.65); margin: 6px 0 3px; border-bottom: 1px solid rgba(216,121,91,0.1); }
.bl-play { font-size: 12px; color: var(--text); padding: 2px 0 2px 10px; line-height: 1.5; border-left: 2px solid transparent; }
.bl-play.p1 { border-left-color: rgba(124,142,248,0.4); }
.bl-play.p2 { border-left-color: rgba(226,196,122,0.4); }

@media (max-width: 860px) {
  .bl-layout { grid-template-columns: 1fr; }
  .bl-zones { grid-template-columns: 1fr; }
}

/* ── Battle Log v2: scoreboard, recent dropdown, round/player structure ────── */
.bl-runbar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.bl-recent-wrap { position: relative; }
.bl-recent-btn { font-size: 12px; padding: 6px 14px; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: var(--text-dim); }
.bl-recent-btn:hover { background: rgba(255,255,255,0.09); color: var(--text); }
.bl-recent-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 280px;
  max-height: 50vh; overflow-y: auto; background: #14101e; border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,0.5); padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.bl-recent-empty { color: var(--text-dim); font-size: 12px; padding: 10px; text-align: center; }
.bl-recent-row { text-align: left; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 7px; padding: 7px 9px; cursor: pointer; }
.bl-recent-row:hover { background: rgba(255,255,255,0.08); }
.bl-recent-active { background: rgba(124,142,248,0.16); border-color: rgba(124,142,248,0.42); }
.bl-recent-decks { font-size: 12px; color: var(--text); font-weight: 600; }
.bl-recent-meta { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

/* full-width viewer (sidebar removed) */
.bl-viewer { padding: 22px 24px; }

/* scoreboard / results header */
.bl-scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px;
  padding: 14px 18px; margin-bottom: 16px; border-radius: 10px;
  background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.07); }
.bl-score-team { position: relative; padding: 6px 12px; border-radius: 8px; }
.bl-score-team.p1 { border-left: 3px solid var(--p1); }
.bl-score-team.p2 { border-left: 3px solid var(--p2); text-align: right; }
.bl-score-team.p2 { border-left: none; border-right: 3px solid var(--p2); }
.bl-score-name { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--text); }
.bl-score-life { font-size: 22px; font-weight: 700; color: rgba(216,121,91,0.95); margin-top: 2px; }
.bl-score-lifelbl { font-size: 12px; font-weight: 400; color: var(--text-dim); }
.bl-score-badge { display: inline-block; margin-top: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  color: #e9d6a0; background: rgba(226,196,122,0.16); border-radius: 999px; padding: 2px 9px; }
.bl-score-win .bl-score-name { color: #e9d6a0; }
.bl-score-mid { text-align: center; }
.bl-score-vs { font-size: 12px; color: var(--text-dim); font-style: italic; }
.bl-score-result { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: rgba(216,121,91,0.95); margin: 2px 0; }
.bl-score-turns { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; }

/* rounds (a "Turn" = both players) */
.bl-round { border-radius: 8px; border: 1px solid rgba(255,255,255,0.07);
  background: rgba(20,15,30,0.4); overflow: hidden; }
.bl-round[open] > .bl-turn-head::before { transform: rotate(90deg); }
.bl-round-body { padding: 6px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.bl-pturn { border-radius: 7px; border: 1px solid rgba(255,255,255,0.05); background: rgba(0,0,0,0.16); padding: 8px 12px; }
.bl-pturn.p1 { border-left: 3px solid var(--p1); }
.bl-pturn.p2 { border-left: 3px solid var(--p2); }
.bl-pturn-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.bl-pturn-name { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--text); }
.bl-pturn-desc { font-size: 12px; color: var(--text-dim); }

/* ── Battle Log run bar: keep the Run button visible regardless of deck-name
   length; constrain the selects so two long names can't push it off-row. ──── */
.bl-runbar-row { align-items: center; }
.bl-select { flex: 1 1 150px; min-width: 120px; max-width: 280px;
  text-overflow: ellipsis; }
.bl-run-btn { flex: 0 0 auto; }
.bl-vs { flex: 0 0 auto; }

/* The .bl-recent-pop base rule sets display:flex, which beat the [hidden]
   attribute — so the dropdown was always open. Make [hidden] win. */
.bl-recent-pop[hidden] { display: none; }

/* ── Battle Log: mana ledger on plays + card-hover affordance ─────────────── */
.bl-play { display: flex; align-items: baseline; gap: 8px; }
.bl-play-text { flex: 1 1 auto; min-width: 0; }
.bl-ledger { flex: 0 0 auto; display: inline-flex; gap: 6px; align-items: baseline; }
.bl-cost { font-size: 11px; color: rgba(216,121,91,0.85); }
.bl-mana { font-size: 11px; color: #b8c0ff; background: rgba(124,142,248,0.14);
  border-radius: 4px; padding: 0 7px; font-weight: 600; white-space: nowrap; }
.bl-card[data-card], .bl-play[data-card] { cursor: help; }
.bl-card[data-card]:hover { background: rgba(124,142,248,0.22); }

/* ── Battle Log: Log Book (temp mechanics-audit grid) ─────────────────────── */
.lb-note { font-size: 12px; color: var(--text-dim); margin-bottom: 12px; font-style: italic; }
.lb-wrap { overflow-x: auto; border: 1px solid rgba(255,255,255,0.07); border-radius: 8px; }
.lb-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.lb-table thead th { position: sticky; top: 0; background: #1a1424; color: rgba(216,121,91,0.85);
  font-family: var(--font-display); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  text-align: left; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.1); white-space: nowrap; }
.lb-table td { padding: 5px 10px; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--text); white-space: nowrap; }
.lb-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.lb-c { text-align: center; }
.lb-dim { color: var(--text-dim); font-size: 11px; }
.lb-card [data-card] { cursor: help; }
.lb-card [data-card]:hover { color: #b8c0ff; }
.lb-neg { color: rgba(216,121,91,0.95); font-weight: 600; }
.lb-pos { color: #7fd6a0; font-weight: 600; }
.lb-pool { color: #b8c0ff; font-weight: 600; }
.lb-dmg { color: #e08a6a; font-weight: 700; }

/* ── Battle Log: SIM/LLM buttons, pilot badge, AI decision trace ──────────── */
.bl-run-llm { padding: 8px 18px; border-radius: 8px; cursor: pointer; font-weight: 600;
  background: rgba(124,142,248,0.16); border: 1px solid rgba(124,142,248,0.45); color: #c2c8ff; }
.bl-run-llm:hover { background: rgba(124,142,248,0.26); }
.bl-run-llm:disabled, .bl-run-btn:disabled { opacity: 0.5; cursor: default; }
.bl-pilot-badge { margin-top: 6px; display: inline-block; font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em; color: #c2c8ff; background: rgba(124,142,248,0.16);
  border: 1px solid rgba(124,142,248,0.4); border-radius: 999px; padding: 2px 10px; }
.bl-pilot-sim { color: var(--text-dim); background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }

.bl-ai { border-color: rgba(124,142,248,0.25) !important; }
.bl-ai > summary { color: #b0b8ff !important; }
.bl-aidec { padding: 6px 12px 10px; }
.bl-aidec-head { font-size: 12px; color: var(--text); margin: 4px 0 6px; }
.bl-aidec-fb .bl-aidec-head { color: rgba(216,121,91,0.9); }
.bl-aiopts { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 2px; }
.bl-aiopt { font-size: 12px; color: var(--text-dim); list-style: decimal; }
.bl-aiopt-chosen { color: #7fd6a0; font-weight: 600; list-style: none; margin-left: -22px; }