:root {
  --bg: #090713;
  --bg2: #17112b;
  --card: rgba(255,255,255,.075);
  --card2: rgba(255,255,255,.12);
  --line: rgba(255,255,255,.15);
  --text: #faf7ff;
  --muted: #bdb2d7;
  --purple: #8b5cf6;
  --pink: #ec4899;
  --green: #34d399;
  --gold: #fbbf24;
  --red: #fb7185;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--text); min-height: 100vh;
  background: radial-gradient(circle at 12% 0%, rgba(139,92,246,.38), transparent 31rem), radial-gradient(circle at 90% 8%, rgba(236,72,153,.24), transparent 28rem), linear-gradient(135deg, var(--bg), var(--bg2));
}
.app { width: min(1240px, calc(100% - 32px)); margin: 0 auto; padding: 32px 0 56px; }
.hero { display:grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: stretch; margin-bottom: 14px; }
.hero h1 { margin: 0; font-size: clamp(2.15rem, 5vw, 4.8rem); letter-spacing: -.07em; line-height: .92; }
.subhead { max-width: 780px; color: var(--muted); line-height: 1.55; font-size: 1.05rem; }
.eyebrow { color:#c4b5fd; text-transform:uppercase; letter-spacing:.18em; font-size:.72rem; font-weight:850; margin:0 0 8px; }
.hero-card, .panel, .stat, .notice { border:1px solid var(--line); background:linear-gradient(180deg, var(--card2), var(--card)); border-radius:24px; box-shadow:0 24px 80px rgba(0,0,0,.30); backdrop-filter: blur(16px); }
.hero-card { padding:24px; display:flex; flex-direction:column; justify-content:center; }
.hero-card strong { font-size:3rem; letter-spacing:-.06em; }
.label, .muted { color:var(--muted); }
.notice { padding: 16px 18px; margin-bottom: 14px; line-height: 1.45; background: rgba(251,191,36,.12); }
.stats-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.stat { padding:17px; }
.stat span, .stat small { display:block; color:var(--muted); font-size:.82rem; }
.stat strong { display:block; margin:6px 0; font-size:1.45rem; letter-spacing:-.04em; }
.layout { display:grid; grid-template-columns: minmax(0, 1fr) 360px; gap:14px; align-items:start; }
.wide { grid-column: 1 / 2; }
.panel { padding:22px; }
.sticky { position: sticky; top: 16px; grid-column: 2; grid-row: span 3; }
.panel-head, .card-head { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:16px; }
h2 { margin:0; font-size:1.5rem; letter-spacing:-.04em; }
h3 { margin:0; letter-spacing:-.025em; }
.pill, .status { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; padding:7px 10px; font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.pill { color:#ddd6fe; background: rgba(139,92,246,.15); text-transform:none; letter-spacing:0; }
.admin-grid { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:12px; }
label { display:grid; gap:7px; color:var(--muted); font-size:.82rem; font-weight:750; }
input, select { width:100%; border:1px solid var(--line); background:rgba(0,0,0,.22); color:var(--text); border-radius:13px; padding:10px 11px; font:inherit; }
.ghost { border:1px solid var(--line); color:var(--text); background:rgba(255,255,255,.06); border-radius:999px; padding:9px 13px; cursor:pointer; }
.cards { display:grid; gap:14px; }
.card { border:1px solid var(--line); border-radius:20px; padding:18px; background:rgba(255,255,255,.055); }
.metrics { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:10px; margin:12px 0; }
.metrics > div, .metrics label { border-radius:15px; background:rgba(255,255,255,.065); padding:12px; }
.metrics span { display:block; color:var(--muted); font-size:.75rem; }
.metrics strong { font-size:1.05rem; }
em { font-style:normal; font-size:.84rem; margin-left:6px; }
.good { color:#a7f3d0; } .bad { color:#fecdd3; }
.status.healthy, .status.low, .card.low { color:#a7f3d0; background:rgba(52,211,153,.12); }
.status.swing, .status.medium, .card.medium { color:#fde68a; background:rgba(251,191,36,.12); }
.status.danger, .status.high, .card.high { color:#fecdd3; background:rgba(251,113,133,.12); }
.card.danger { border-color:rgba(251,113,133,.35); }
.card.swing { border-color:rgba(251,191,36,.35); }
ol, ul { margin: 10px 0 0; padding-left: 21px; line-height: 1.65; }
.filters { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.filter { cursor:pointer; color:var(--text); border:1px solid var(--line); border-radius:999px; padding:8px 11px; background:rgba(255,255,255,.06); }
.filter.active { background:var(--purple); border-color:transparent; }
.legs { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
.leg { border:1px solid var(--line); border-radius:16px; padding:14px; background:rgba(255,255,255,.055); display:flex; justify-content:space-between; gap:12px; }
.leg p { color:var(--muted); margin:.35rem 0 0; line-height:1.4; }
.recommendation { color:#efe9ff; line-height:1.55; }
.callout { border-left:3px solid var(--pink); padding-left:12px; color:#fff; }
.rules { columns:2; color:#eee9ff; }
/* ---------- Game campaigns: tabs + phase timeline ---------- */
.game-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.game-tab { display:flex; flex-direction:column; align-items:flex-start; gap:2px; cursor:pointer; color:var(--text); background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:14px; padding:10px 14px; font:inherit; min-width:200px; text-align:left; }
.game-tab strong { font-size:.92rem; letter-spacing:-.01em; }
.game-tab .muted { font-size:.74rem; }
.game-tab.active { background:linear-gradient(135deg, rgba(139,92,246,.30), rgba(236,72,153,.18)); border-color:rgba(167,139,250,.42); }
.game-tab.add { color:var(--muted); border-style:dashed; min-width:auto; align-items:center; justify-content:center; }
.game-tab:disabled { cursor:not-allowed; }
.campaign-head { margin-bottom:14px; }
.phase-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
.phase-card { border:1px solid var(--line); border-radius:20px; padding:18px; background:rgba(255,255,255,.05); display:flex; flex-direction:column; gap:12px; }
.phase-card.phase-pre  { border-color:rgba(167,139,250,.28); background:linear-gradient(180deg, rgba(139,92,246,.10), rgba(255,255,255,.04)); }
.phase-card.phase-half { border-color:rgba(251,191,36,.30); background:linear-gradient(180deg, rgba(251,191,36,.10), rgba(255,255,255,.04)); }
.phase-card.phase-q4   { border-color:rgba(251,113,133,.32); background:linear-gradient(180deg, rgba(251,113,133,.10), rgba(255,255,255,.04)); }
.phase-head .phase-label { margin:0; font-weight:900; letter-spacing:.04em; text-transform:uppercase; font-size:.78rem; color:#FDE68A; }
.phase-head .phase-meta { margin:4px 0 0; font-size:.84rem; }
.live-tag { display:inline-block; margin-left:6px; padding:2px 7px; border-radius:999px; font-size:.62rem; background:rgba(251,113,133,.28); color:#fecdd3; letter-spacing:.12em; }
.phase-snapshot { margin:0; font-size:.9rem; line-height:1.5; color:#E8EDFA; padding:10px 12px; background:rgba(0,0,0,.22); border-radius:12px; border:1px solid var(--line); }
.phase-plans { display:grid; gap:10px; }
.phase-plan { padding:12px; border-radius:14px; background:rgba(0,0,0,.22); border:1px solid var(--line); }
.phase-plan.plan-allin { border-color:rgba(52,211,153,.32); }
.phase-plan.plan-save  { border-color:rgba(139,92,246,.38); }
.phase-plan-tag  { margin:0 0 6px; font-size:.68rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.plan-allin .phase-plan-tag { color:#a7f3d0; }
.plan-save  .phase-plan-tag { color:#ddd6fe; }
.phase-plan-head { margin:4px 0; font-weight:700; line-height:1.4; font-size:.94rem; }
.phase-plan-math { margin:6px 0; padding:8px 10px; border-radius:10px; background:rgba(255,255,255,.04); font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.78rem; line-height:1.55; color:#eee9ff; }
.phase-plan-risk { margin:6px 0 0; font-size:.82rem; line-height:1.5; }

@media (max-width: 960px) {
  .hero, .layout { grid-template-columns:1fr; }
  .sticky, .wide { grid-column:auto; }
  .sticky { position: static; }
  .stats-grid, .admin-grid, .metrics, .legs { grid-template-columns:1fr; }
  .rules { columns:1; }
  .phase-grid { grid-template-columns:1fr; }
  .game-tab { min-width:auto; flex:1; }
}

/* =====================================================================
   ACCESSIBILITY — Uncle Dale mode (low vision, close-to-screen reading)
   Bumps base font size, raises contrast on muted text, enlarges every
   small label/pill/input/button, widens line-height. A11y toolbar lets
   any user crank it further with A · A+ · A++.
   ===================================================================== */
html { font-size: 18px; }
html[data-zoom="lg"] { font-size: 22px; }
html[data-zoom="xl"] { font-size: 26px; }

:root {
  /* Higher-contrast muted that still reads as secondary */
  --muted: #dcd5f0;
}
body { line-height: 1.55; }

/* Toolbar */
.a11y-toolbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 12px 16px;
  background: rgba(8,5,20,.86); backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.a11y-toolbar .a11y-label { color: var(--muted); font-weight: 800; font-size: 1rem; letter-spacing: .04em; }
.a11y-toolbar button {
  cursor: pointer; min-width: 56px; min-height: 44px;
  padding: 8px 14px; border-radius: 12px;
  background: rgba(255,255,255,.07); color: var(--text);
  border: 2px solid var(--line); font: inherit; font-weight: 900;
}
.a11y-toolbar button:focus-visible { outline: 3px solid #FDE68A; outline-offset: 2px; }
.a11y-toolbar button[data-zoom=""]  { font-size: 1rem; }
.a11y-toolbar button[data-zoom="lg"] { font-size: 1.15rem; }
.a11y-toolbar button[data-zoom="xl"] { font-size: 1.35rem; }
.a11y-toolbar button.active { background: linear-gradient(135deg, var(--purple), var(--pink)); border-color: transparent; color: #fff; }

/* Make every tiny class readable from 6 inches away */
.eyebrow            { font-size: .95rem !important; letter-spacing: .14em; }
.pill, .status      { font-size: .92rem !important; padding: 8px 12px !important; }
.status-pill        { font-size: .82rem !important; padding: 5px 11px !important; letter-spacing: .06em; }
.muted, .label      { color: var(--muted) !important; }
small               { font-size: .92rem !important; }
.stat span, .stat small { font-size: .95rem !important; }
.stat strong        { font-size: 1.8rem !important; }
.metrics span       { font-size: .9rem !important; }
.metrics strong     { font-size: 1.2rem !important; }
em                  { font-size: 1rem !important; }
.subhead            { font-size: 1.2rem !important; line-height: 1.55; }

/* Inputs and selects — bigger targets, bigger text */
input, select, button { font-size: 1.05rem; }
input, select         { padding: 12px 14px !important; border-radius: 14px !important; border-width: 2px !important; min-height: 48px; }
input:focus-visible, select:focus-visible, button:focus-visible {
  outline: 3px solid #FDE68A; outline-offset: 2px;
}
.ghost                { padding: 12px 18px !important; font-size: 1.05rem !important; min-height: 48px; }
label                 { font-size: 1rem !important; gap: 9px !important; }

/* Filter chips — bigger tap targets */
.filter { padding: 10px 16px !important; font-size: 1rem !important; min-height: 44px; }

/* Headings: stronger hierarchy at close-up distance */
h1 { line-height: .96; }
h2 { font-size: 1.85rem !important; line-height: 1.05; }
h3 { font-size: 1.3rem !important; line-height: 1.2; }

/* Notice banner — make the live game info impossible to miss */
.notice            { padding: 18px 22px !important; font-size: 1.05rem; line-height: 1.6; }
.notice strong     { font-size: 1.18rem; display: block; margin-bottom: 6px; }
.notice em         { display: inline-block; margin-top: 6px; }

/* Recommendation panel — Dale reads this most */
.recommendation         { font-size: 1.08rem; line-height: 1.65; }
.recommendation strong  { color: #fff; }
.recommendation ul      { margin-top: 10px; }
.recommendation li      { margin-bottom: 8px; }
.callout                { padding: 14px 16px; border-radius: 14px; background: rgba(236,72,153,.10); border-left-width: 4px; font-size: 1.05rem; }

/* Card content */
.card                   { padding: 22px !important; }
.card-head h3           { font-size: 1.3rem !important; }
.card p, .card li       { line-height: 1.6; }

/* Phase timeline — bump everything one tier */
.phase-card             { padding: 22px !important; gap: 14px !important; }
.phase-head .phase-label{ font-size: 1rem !important; }
.phase-head .phase-meta { font-size: 1rem !important; }
.phase-snapshot         { font-size: 1.02rem !important; line-height: 1.6; padding: 14px 16px !important; }
.phase-plan             { padding: 16px !important; }
.phase-plan-tag         { font-size: .92rem !important; }
.phase-plan-head        { font-size: 1.08rem !important; line-height: 1.5; }
.phase-plan-math        { font-size: .94rem !important; line-height: 1.65; padding: 12px 14px !important; }
.phase-plan-risk        { font-size: .98rem !important; line-height: 1.55; }
.live-tag               { font-size: .78rem !important; padding: 3px 9px !important; }

/* Game tabs — bigger tappable cards */
.game-tab               { padding: 14px 18px !important; min-height: 60px; }
.game-tab strong        { font-size: 1.05rem !important; }
.game-tab .muted        { font-size: .88rem !important; }

/* Legs grid */
.leg                    { padding: 16px !important; }
.leg strong             { font-size: 1.05rem; }
.leg p                  { font-size: .98rem !important; line-height: 1.55; }

/* Operating rules */
.rules                  { font-size: 1.05rem; line-height: 1.7; }

/* Stats / mini cards: bigger numbers */
.hero-card strong       { font-size: 3.4rem !important; }
.stat                   { padding: 22px !important; }

/* Game lines list inside game-context aside */
.line-list li           { font-size: 1rem !important; padding: 10px 14px !important; }
.line-list strong       { font-size: 1.05rem !important; }

/* ---------- Hero post-game CTA ---------- */
.postgame-cta { gap: 6px; }
.postgame-cta .cta-link {
  display: inline-block; margin-top: 14px; padding: 12px 16px;
  background: linear-gradient(135deg, var(--purple), var(--pink));
  color: #fff; font-weight: 900; border-radius: 14px;
  text-decoration: none; text-align: center;
  font-size: 1.05rem; min-height: 48px; line-height: 1.4;
  border: 2px solid transparent;
}
.postgame-cta .cta-link:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(139,92,246,.4); }
.postgame-cta .cta-link:focus-visible { outline: 3px solid #FDE68A; outline-offset: 3px; }

/* ---------- Post-Game Results section ---------- */
.postgame {
  border-color: rgba(251,191,36,.32);
  background: linear-gradient(180deg, rgba(251,191,36,.08), rgba(255,255,255,.04));
  scroll-margin-top: 90px;
}
.postgame h2 { font-size: 2rem !important; }
.postgame-block { margin: 22px 0; }
.postgame-block h3 { font-size: 1.35rem !important; margin: 0 0 14px; color: #FDE68A; }
.postgame-block h3 .muted { font-size: 1rem; font-weight: 600; color: var(--muted); }

/* Result tables — bigger numbers, clearer rows for Dale-mode */
.result-table { width: 100%; border-collapse: separate; border-spacing: 0; background: rgba(0,0,0,.22); border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.result-table thead th {
  text-align: left; padding: 14px 16px;
  background: rgba(255,255,255,.05); color: var(--muted);
  font-size: .92rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.result-table tbody td {
  padding: 16px; border-bottom: 1px solid var(--line);
  font-size: 1.02rem; line-height: 1.5; vertical-align: top;
}
.result-table tbody tr:last-child td { border-bottom: 0; }
.result-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.result-table .small { font-size: .9rem !important; }
.result-table .neg { color: #fecdd3; }
.result-table .neg-small { color: #fde68a; }
.result-table .zero { color: #a7f3d0; }
.row-loss   { background: rgba(251,113,133,.08); }
.row-win    { background: rgba(52,211,153,.08); }
.row-total  { background: rgba(251,113,133,.14); border-top: 2px solid rgba(251,113,133,.32); }
.row-actual { background: rgba(251,113,133,.18); border-top: 2px solid rgba(251,113,133,.4); }

.badge-loss {
  display: inline-flex; align-items: center; padding: 6px 12px;
  border-radius: 999px; font-size: .88rem; font-weight: 900;
  background: rgba(251,113,133,.16); color: #fecdd3;
  border: 1px solid rgba(251,113,133,.32); letter-spacing: .06em;
}

.leg-detail { margin: 12px 0 0; font-size: 1rem; line-height: 1.6; }

/* Bottom-line summary grid */
.postgame-summary { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.summary-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px;
}
.summary-grid > div {
  padding: 16px 18px; border-radius: 16px;
  background: rgba(255,255,255,.06); border: 1px solid var(--line);
}
.summary-grid span { display: block; color: var(--muted); font-size: .92rem; margin-bottom: 6px; letter-spacing: .04em; text-transform: uppercase; font-weight: 800; }
.summary-grid strong { display: block; font-size: 2rem; letter-spacing: -.04em; margin-bottom: 4px; }
.summary-grid strong.neg { color: #fecdd3; }
.summary-grid small { display: block; color: var(--muted); font-size: .9rem; }

@media (max-width: 960px) {
  .summary-grid { grid-template-columns: 1fr 1fr; }
  .result-table thead { display: none; }
  .result-table tbody td { display: block; padding: 12px 16px; border-bottom: 0; }
  .result-table tbody td.num { text-align: left; }
  .result-table tbody tr { display: block; border-bottom: 1px solid var(--line); padding: 8px 0; }
}