/* The school's shared look (Lee 2026-08-23: "motivating and easy to read").
   Loaded AFTER each page's own style block, so equal-specificity rules here
   win: clean white cards on a cool ground, slate text, one confident blue,
   green for progress and wins, red only for misses. Boards get real size. */

:root {
  --ground: #f4f6f9;
  --card: #ffffff;
  --line: #e2e8f0;
  --ink: #1e293b;
  --muted: #64748b;
  --accent: #2563eb;
  --accent-dark: #1e40af;
  --win: #16a34a;
  --miss: #dc2626;
}

body { background: var(--ground); color: var(--ink); }

/* headings and body text — no more brown-on-cream */
#go-title, #su-title, #fs-title, #dp-title, #gs-players,
#su-name, #go-name, #dp-headline, #gs-end-line { color: var(--ink); }
#go-sub, #su-sub, #fs-sub, #su-blurb, #gs-meta, #dp-credit,
#go-why, #su-count, #fs-meta, #dp-stats, #go-day, #gs-progress { color: var(--muted); }
#go-kind { color: var(--accent); }
#dp-step, #gs-say { color: var(--accent-dark); font-weight: 800; }

/* cards */
#go-card, .su-unit, .fs-row, .fs-count, #dp-verdict, #gs-note, #gs-end {
  background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 1px 4px rgba(15, 23, 42, .06);
}
#gs-note { color: var(--ink); font-size: 15px; line-height: 1.55; }

/* buttons — one blue, larger targets */
.go-big, .go-small, .su-go, .fs-go, .dp-btn, .gs-btn {
  background: var(--accent); color: #fff; border: 0; border-radius: 12px;
  font-weight: 800;
}
.go-big { font-size: 18px; padding: 15px 36px; }
.go-small { background: none; color: var(--accent); }
.dp-btn.alt { background: var(--accent-dark); }
.su-go:disabled, .dp-btn:disabled, .gs-btn:disabled { background: #cbd5e1; }

/* progress and verdicts */
.su-fill { background: var(--win); }
.gs-ok { color: var(--win); } .gs-bad { color: var(--miss); }
.dp-clean #dp-headline { color: var(--win); }
.dp-ghost #dp-headline { color: var(--miss); }
#su-proof { background: #f8fafc; border: 1px dashed var(--line); color: var(--ink); }

/* boards: real size, centered pages */
#gs-board, #dp-board { width: min(74vh, 580px); }
#gs-wrap, #dp-wrap { max-width: 1080px; align-items: flex-start; }
#gs-side, #dp-side { padding-top: 6px; }