/* Dark is the default; light follows the device, or the ☀️/🌙 toggle (data-theme on <html>). */
:root { color-scheme: dark; --bg: #0b0906; --ink: #f5efe3; --muted: #b9ae97; --soft: #e7dcc5; --gold: #fcd116; --gold-ink: #fcd116; --green: #3bd17f; --card: #17130c; --line: rgba(252,209,22,.18);
  --glow: rgba(252,209,22,.14); --hero-a: #2a2112; --hero-b: #15110a; --hero-line: rgba(252,209,22,.45); --chart-label: #9b927f; --chart-value: #ffffff; }
:root[data-theme="light"] { color-scheme: light; --bg: #fbf7ee; --ink: #1d1708; --muted: #6f6551; --soft: #3d3420; --gold: #fcd116; --gold-ink: #a87700; --green: #0b8a4a; --card: #ffffff; --line: rgba(168,119,0,.2);
  --glow: rgba(252,209,22,.25); --hero-a: #fff6d6; --hero-b: #ffffff; --hero-line: rgba(168,119,0,.35); --chart-label: #8a7f69; --chart-value: #1d1708; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { color-scheme: light; --bg: #fbf7ee; --ink: #1d1708; --muted: #6f6551; --soft: #3d3420; --gold: #fcd116; --gold-ink: #a87700; --green: #0b8a4a; --card: #ffffff; --line: rgba(168,119,0,.2);
    --glow: rgba(252,209,22,.25); --hero-a: #fff6d6; --hero-b: #ffffff; --hero-line: rgba(168,119,0,.35); --chart-label: #8a7f69; --chart-value: #1d1708; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 Inter, system-ui, sans-serif; color: var(--ink);
  background: radial-gradient(80% 40% at 50% 0%, var(--glow), transparent 70%), var(--bg); min-height: 100vh; transition: background-color .2s, color .2s; }
body::before { content: ''; display: block; height: 6px; background: linear-gradient(90deg, #ce1126 33.3%, #fcd116 33.3% 66.6%, #006b3f 66.6%); }
.wrap { max-width: 1040px; margin: 0 auto; padding: 20px 16px 40px; display: grid; gap: 16px; }
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand b { display: block; font: 800 26px 'Bricolage Grotesque', sans-serif; }
.brand small { color: var(--muted); }
.flag { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(#ce1126 33.3%, #fcd116 33.3% 66.6%, #006b3f 66.6%); position: relative; }
.flag::after { content: '★'; position: absolute; inset: 0; display: grid; place-items: center; color: #111; font-size: 16px; }
.live { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(59,209,127,.12); border: 1px solid rgba(59,209,127,.4); font-weight: 600; }
.live i { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(59,209,127,.7); animation: pulse 1.6s infinite; }
@keyframes pulse { to { box-shadow: 0 0 0 10px rgba(59,209,127,0); } }
.hero { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; padding: 26px; border-radius: 22px;
  background: radial-gradient(90% 120% at 0% 0%, var(--glow), transparent 60%), linear-gradient(135deg, var(--hero-a), var(--hero-b)); border: 1px solid var(--hero-line); }
.kicker { text-transform: uppercase; letter-spacing: 2px; font-size: 12px; color: var(--muted); font-weight: 600; }
.big { display: block; font: 800 clamp(56px, 14vw, 104px)/1 'Bricolage Grotesque', sans-serif; color: var(--gold-ink); margin: 4px 0; }
.hero p { margin: 0; color: var(--soft); }
.hero-side { display: grid; grid-template-columns: auto auto; gap: 2px 10px; align-items: baseline; }
.hero-side b { font: 800 30px 'Bricolage Grotesque', sans-serif; color: var(--green); text-align: right; }
.hero-side span { color: var(--muted); }
.grid { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); }
.card { display: grid; align-content: start; gap: 2px; padding: 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.card .ic { font-size: 22px; }
.card b { font: 800 32px/1.1 'Bricolage Grotesque', sans-serif; margin-top: 6px; }
.card.green b { color: var(--green); } .card.gold b { color: var(--gold-ink); }
.card .lb { font-weight: 600; }
.card small { color: var(--muted); font-size: 12.5px; }
.panel { padding: 16px 16px 10px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.panel h2 { margin: 0 0 8px; font: 700 18px 'Bricolage Grotesque', sans-serif; }
.panel h2 small { font: 500 12.5px Inter, sans-serif; color: var(--muted); margin-left: 6px; }
.panel canvas { width: 100%; display: block; }
#signups { height: 220px; } #time { height: 200px; }
.share { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.share button { font: 700 16px Inter, sans-serif; padding: 12px 22px; border-radius: 999px; border: 0; cursor: pointer; background: var(--gold); color: #2a1700; box-shadow: 0 6px 0 #a88a08; }
.share button:active { transform: translateY(3px); box-shadow: 0 3px 0 #a88a08; }
.share span { color: var(--muted); font-size: 13px; }
footer { text-align: center; color: var(--muted); font-size: 13px; }
footer a { color: var(--gold-ink); }
@media (max-width: 760px) { .grid { grid-template-columns: repeat(2, 1fr); } .card b { font-size: 26px; } .hero { padding: 20px; } }
.live.snap { background: rgba(252,209,22,.12); border-color: rgba(252,209,22,.45); }
.days { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: var(--muted); }
.days a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; background: var(--card); }
.days a.on { background: var(--gold); color: #2a1700; border-color: var(--gold); font-weight: 700; }
.top-right { display: flex; align-items: center; gap: 8px; }
.theme { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 18px; cursor: pointer; }
:root[data-theme="light"] .card, :root[data-theme="light"] .panel { box-shadow: 0 6px 18px rgba(80,60,10,.07); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .card, :root:not([data-theme="dark"]) .panel { box-shadow: 0 6px 18px rgba(80,60,10,.07); } }