/* ══════════════════════════════════════════════════════════════
   WEEKLY WONDERS — 4th Edition
   Design system: "Midnight & Brass"
   Near-black ink, brass accents, editorial serif, tabular figures.
   ══════════════════════════════════════════════════════════════ */

/* ─────────────────────────── TOKENS ─────────────────────────── */
:root {
  /* surfaces */
  --ink:        #0B0E14;   /* page */
  --surface:    #141922;   /* card */
  --surface-2:  #1B212C;   /* raised / hover */
  --surface-3:  #232A37;   /* input, chip */
  --rule:       #262E3B;   /* hairline */
  --rule-soft:  #1E2530;

  /* brand */
  --brass:      #C9A227;
  --brass-dim:  #9C7D1C;
  --brass-glow: rgba(201, 162, 39, 0.12);
  --slate:      #8A94A6;

  /* text */
  --text:       #E6E9EF;
  --text-2:     #AEB6C4;
  --muted:      #7C8697;
  --faint:      #565F6E;

  /* semantic — deliberately quiet */
  --pos:        #4FA97F;
  --pos-bg:     rgba(79, 169, 127, 0.10);
  --neg:        #C1554F;
  --neg-bg:     rgba(193, 85, 79, 0.10);
  --live:       #D97757;
  --info:       #6B8CAE;

  /* medals */
  --gold:       #C9A227;
  --silver:     #9BA3AF;
  --bronze:     #A9743F;

  /* type */
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* metrics */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.25);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.5), 0 12px 40px rgba(0,0,0,.4);
  --header-h: 68px;
  --maxw: 1280px;
}

/* ─────────────────────────── RESET ──────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  font-feature-settings: 'tnum' 1, 'cv05' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

/* subtle vignette so the near-black doesn't read as flat */
body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(201,162,39,.045), transparent 70%),
    radial-gradient(900px 500px at 100% 100%, rgba(107,140,174,.035), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: var(--brass); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

/* numerals line up in every table, always */
table, .num, .stat-value, .money { font-variant-numeric: tabular-nums; }

::selection { background: var(--brass-glow); color: var(--text); }

/* scrollbars */
::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #2E3644; }

/* ────────────────────────── UTILITIES ───────────────────────── */
.eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.serif { font-family: var(--serif); font-optical-sizing: auto; }
.mono  { font-family: var(--mono); }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.dim { color: var(--muted); }
.right { text-align: right; }
.center { text-align: center; }
.hidden { display: none !important; }
.nowrap { white-space: nowrap; }

/* ─────────────────────────── HEADER ─────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 60;
  height: var(--header-h);
  display: flex; align-items: center; gap: 20px;
  padding: 0 24px;
  background: rgba(11, 14, 20, 0.86);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--rule);
}
.header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass-dim) 25%, var(--brass) 50%, var(--brass-dim) 75%, transparent);
  opacity: .5;
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* WW4 monogram — the SVG draws its own ring, so no CSS circle here */
.brand-mark {
  width: 38px; height: 38px; flex-shrink: 0;
  color: var(--brass);
  transition: transform .25s ease;
}
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand:hover .brand-mark { transform: rotate(-6deg) scale(1.04); }
.brand-text h1 {
  font-family: var(--serif);
  font-size: 19px; font-weight: 600; letter-spacing: -.01em;
  color: var(--text); line-height: 1.15;
  white-space: nowrap;
}
.brand-text p { font-size: 11px; color: var(--muted); letter-spacing: .02em; }

.header-spacer { flex: 1; }

/* season switch */
.season-switch {
  display: flex; align-items: center;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 999px; padding: 3px;
}
.season-switch button {
  padding: 6px 15px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
  color: var(--muted); transition: color .18s, background .18s;
  white-space: nowrap;
}
.season-switch button:hover { color: var(--text-2); }
.season-switch button[aria-selected="true"] {
  background: var(--brass); color: #14100A;
}

/* live pill */
.live-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--rule);
  font-size: 12px; font-weight: 500; color: var(--text-2);
  white-space: nowrap;
}
.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--muted); flex-shrink: 0;
}
.live-pill.is-live { border-color: rgba(217,119,87,.4); color: var(--live); }
.live-pill.is-live .live-dot { background: var(--live); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse {
  0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(217,119,87,.45); }
  50%     { opacity: .65; box-shadow: 0 0 0 5px rgba(217,119,87,0); }
}

.icon-btn {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--rule); border-radius: 50%;
  color: var(--muted); background: var(--surface);
  transition: all .18s;
}
.icon-btn:hover { color: var(--brass); border-color: var(--brass-dim); }
.icon-btn.spinning svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.viewer-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 5px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--rule);
  font-size: 12px; font-weight: 600; color: var(--text-2);
  transition: border-color .18s;
}
.viewer-chip:hover { border-color: var(--brass-dim); }
.viewer-chip .avatar {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brass-glow); color: var(--brass);
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
}

/* ──────────────────────────── TABS ──────────────────────────── */
.tabbar {
  position: sticky; top: var(--header-h); z-index: 50;
  display: flex; gap: 2px; overflow-x: auto;
  padding: 0 24px;
  background: rgba(11,14,20,.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
  scrollbar-width: none;
}
.tabbar::-webkit-scrollbar { display: none; }
.tabbar button {
  position: relative;
  padding: 13px 15px 12px;
  font-size: 13px; font-weight: 500; white-space: nowrap;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  transition: color .18s;
}
.tabbar button:hover { color: var(--text-2); }
.tabbar button[aria-selected="true"] {
  color: var(--text); border-bottom-color: var(--brass);
}
.tabbar .tab-badge {
  margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: var(--surface-3); color: var(--muted);
  font-size: 10px; font-weight: 600;
}
.tabbar button[aria-selected="true"] .tab-badge { background: var(--brass-glow); color: var(--brass); }

/* ─────────────────────────── LAYOUT ─────────────────────────── */
.main {
  position: relative; z-index: 1;
  max-width: var(--maxw); margin: 0 auto;
  padding: 26px 24px 80px;
}
.panel { display: none; animation: fade .3s ease; }
.panel.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* ──────────────────────────── CARD ──────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.card + .card, .grid + .card, .card + .grid { margin-top: 16px; }

.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--rule-soft);
}
.card-head h2 {
  font-family: var(--serif);
  font-size: 15px; font-weight: 600; letter-spacing: -.005em;
  color: var(--text);
  display: flex; align-items: center; gap: 9px;
}
.card-head h2::before {
  content: ''; width: 3px; height: 15px; border-radius: 2px;
  background: var(--brass); flex-shrink: 0;
}
.card-head .sub { font-size: 11px; color: var(--muted); }
.card-body { padding: 18px; }
.card-body.flush { padding: 0; }

/* section heading between cards */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin: 30px 0 14px;
}
.section-head:first-child { margin-top: 0; }
.section-head h2 {
  font-family: var(--serif);
  font-size: 20px; font-weight: 600; letter-spacing: -.015em;
}
.section-head p { font-size: 12px; color: var(--muted); }

/* ───────────────────────── STAT TILES ───────────────────────── */
.stat {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 15px 16px;
  position: relative; overflow: hidden;
}
.stat-label { font-size: 10px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.stat-value {
  font-family: var(--serif);
  font-size: 27px; font-weight: 600; letter-spacing: -.02em;
  color: var(--text); margin-top: 7px; line-height: 1.1;
}
.stat-meta { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.stat.accent .stat-value { color: var(--brass); }
.stat.accent::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--brass);
}

/* ─────────────────────────── TABLES ─────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }

thead th {
  position: sticky; top: 0;
  padding: 10px 12px;
  text-align: left;
  font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
thead th.right { text-align: right; }
thead th.center { text-align: center; }
thead th.sortable { cursor: pointer; user-select: none; }
thead th.sortable:hover { color: var(--text-2); }
thead th[aria-sort] { color: var(--brass); }

tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .14s; }
tbody tr:hover { background: var(--surface-2); }

/* rank column */
.rank {
  font-family: var(--serif);
  font-size: 15px; font-weight: 600;
  color: var(--muted);
  width: 38px;
}
tr.r1 .rank { color: var(--gold); }
tr.r2 .rank { color: var(--silver); }
tr.r3 .rank { color: var(--bronze); }
tr.last  .rank { color: var(--neg); }

/* the viewer's own row */
tr.is-me {
  background: var(--brass-glow);
  box-shadow: inset 2px 0 0 var(--brass);
}
tr.is-me:hover { background: rgba(201,162,39,.16); }

/* manager cell */
.mgr { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mgr .avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--text-2);
  font-size: 10px; font-weight: 700;
}
.mgr-name { font-weight: 600; color: var(--text); white-space: nowrap; }
.mgr-team { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }

.total { font-family: var(--serif); font-size: 16px; font-weight: 600; }

/* movement arrows */
.mv { font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 2px; }
.mv.up { color: var(--pos); }
.mv.down { color: var(--neg); }
.mv.same { color: var(--faint); }

/* small pills */
.pill {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  background: var(--surface-3); color: var(--text-2);
}
.pill.pos { background: var(--pos-bg); color: var(--pos); }
.pill.neg { background: var(--neg-bg); color: var(--neg); }
.pill.brass { background: var(--brass-glow); color: var(--brass); }
.pill.live { background: rgba(217,119,87,.12); color: var(--live); }

/* money figures */
.money { font-weight: 600; }
.money.zero { color: var(--faint); }

/* form dots */
.form-row { display: inline-flex; gap: 3px; }
.form-dot {
  width: 22px; height: 22px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700;
  background: var(--surface-3); color: var(--text-2);
}
.form-dot.hot  { background: var(--pos-bg); color: var(--pos); }
.form-dot.cold { background: var(--neg-bg); color: var(--neg); }

/* chips grid */
.chip-cell { text-align: center; font-size: 12px; }
.chip-used { color: var(--text-2); font-weight: 600; }
.chip-free { color: var(--faint); }
.chip-div  { width: 1px; padding: 0 !important; background: var(--rule); }

/* ───────────────────────── BAR / METER ──────────────────────── */
.meter { height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--brass); border-radius: 3px; }
.meter.pos > span { background: var(--pos); }
.meter.neg > span { background: var(--neg); }

/* ───────────────────────── EMPTY STATE ──────────────────────── */
.empty {
  padding: 48px 24px; text-align: center;
}
.empty .mark { font-size: 26px; color: var(--faint); margin-bottom: 10px; font-family: var(--serif); }
.empty h3 { font-family: var(--serif); font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.empty p { font-size: 13px; color: var(--muted); max-width: 380px; margin: 0 auto; }

/* skeleton loading */
.skel {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--r-sm);
  height: 12px;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ──────────────────────── WELCOME / LOGIN ───────────────────── */
.welcome {
  position: fixed; inset: 0; z-index: 200;
  background: var(--ink);
  display: grid; place-items: center;
  padding: 28px;
  overflow-y: auto;
}
.welcome::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(700px 400px at 50% 22%, rgba(201,162,39,.09), transparent 68%);
  pointer-events: none;
}
.welcome-inner { position: relative; width: 100%; max-width: 660px; text-align: center; }
.welcome-mark {
  width: 82px; height: 82px; margin: 0 auto 24px;
  color: var(--brass);
  filter: drop-shadow(0 0 24px rgba(201,162,39,.22));
  animation: markIn .55s cubic-bezier(.2,.7,.3,1) both;
}
.welcome-mark svg { width: 100%; height: 100%; display: block; }
@keyframes markIn {
  from { opacity: 0; transform: scale(.86) translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.welcome h1 {
  font-family: var(--serif);
  font-size: clamp(30px, 6vw, 42px); font-weight: 600; letter-spacing: -.025em;
  margin-bottom: 8px;
}
.welcome .sub { font-size: 13px; color: var(--muted); letter-spacing: .04em; margin-bottom: 34px; }
.welcome .ask { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); margin-bottom: 18px; font-weight: 600; }

.who-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 9px;
}
.who {
  padding: 13px 10px;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r);
  text-align: center;
  transition: all .16s;
}
.who:hover {
  border-color: var(--brass-dim); background: var(--surface-2);
  transform: translateY(-1px);
}
.who .n { font-size: 13px; font-weight: 600; color: var(--text); }
.who .t { font-size: 10.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who.guest { border-style: dashed; }
.who.guest .n { color: var(--muted); }

/* ───────────────────────── RESPONSIVE ───────────────────────── */
@media (max-width: 820px) {
  .header { padding: 0 14px; gap: 12px; }
  .brand-text p { display: none; }
  .tabbar { padding: 0 14px; }
  .main { padding: 18px 14px 64px; }
  .season-switch button { padding: 6px 11px; font-size: 11px; }
  .mgr-team { display: none; }
  .stat-value { font-size: 23px; }
}
@media (max-width: 560px) {
  .brand-text h1 { font-size: 16px; }
  .live-pill .live-text { display: none; }
  .viewer-chip { padding: 4px; }
  .viewer-chip .label { display: none; }
  thead th, tbody td { padding: 9px 8px; }

  /* The header is a single flex row with five things in it. On a
     phone there is not enough width, and flex was shrinking the
     controls rather than the text: the wordmark clipped to
     "Weekly" and the refresh button was squashed from 34px to 17.
     Protect the controls, and let the WW4 monogram carry the
     branding on its own at this width. */
  .brand-text { display: none; }
  .season-switch,
  .live-pill,
  .viewer-chip,
  .icon-btn { flex-shrink: 0; }

  /* and give the season switch a real tap target */
  .season-switch button { padding: 8px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media print {
  .header, .tabbar, .welcome, .icon-btn { display: none !important; }
  body { background: #fff; color: #000; }
  .card { border-color: #ccc; break-inside: avoid; }
}