/* Match of the Day — styles (see docs/design-system.md). Dark is the default. */
:root{
  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --fs-display:clamp(1.5rem,1.2rem+1.6vw,2rem);
  --fs-h2:1.25rem; --fs-body:1rem; --fs-sm:.875rem; --fs-xs:.75rem;
  --lh-tight:1.15; --lh-base:1.45;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-full:999px;
  --ease:cubic-bezier(.2,.7,.2,1);--dur-fast:120ms;--dur-base:200ms;

  /* Neutrals: DARK (default) */
  --bg:#0B0E12;--surface:#0B0E12;--card:#171B22;--border:#232A33;
  --text-1:#F2F4F7;--text-2:#A7B0BC;--text-3:#6B7480;
  --ink:#F2F4F7;--ink-contrast:#0B0E12;--focus:#3B82F6;
  --shadow-card:0 1px 2px rgba(0,0,0,.4);--shadow-pop:0 8px 24px rgba(0,0,0,.5);
  --rate-must:#22C55E;--rate-must-bg:#11271A;--rate-must-on:#6EE7A0;
  --rate-worth:#3B82F6;--rate-worth-bg:#14213D;--rate-worth-on:#93B4FB;
  --rate-decent:#F59E0B;--rate-decent-bg:#3A2A0E;--rate-decent-on:#F9C969;
  --rate-skip:#94A3B8;--rate-skip-bg:#1C232C;--rate-skip-on:#C2CBD6;
  --blur-amount:10px;
  --logo-bg:var(--bg);
}
[data-theme="light"]{
  --bg:#FFFFFF;--surface:#F7F8FA;--card:#FFFFFF;--border:#E6E8EC;
  --text-1:#0F1419;--text-2:#5B6470;--text-3:#8A929E;
  --ink:#0F1419;--ink-contrast:#FFFFFF;--focus:#2563EB;
  --shadow-card:0 1px 2px rgba(15,20,25,.06),0 1px 3px rgba(15,20,25,.04);
  --shadow-pop:0 8px 24px rgba(15,20,25,.12);
  --rate-must:#16A34A;--rate-must-bg:#E7F6EC;--rate-must-on:#0B5C2B;
  --rate-worth:#2563EB;--rate-worth-bg:#E8EFFD;--rate-worth-on:#1A3F9E;
  --rate-decent:#D97706;--rate-decent-bg:#FBEFD9;--rate-decent-on:#8A4B05;
  --rate-skip:#64748B;--rate-skip-bg:#EEF1F4;--rate-skip-on:#3E4651;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-sans);background:var(--surface);color:var(--text-1);
  line-height:var(--lh-base);-webkit-font-smoothing:antialiased;}
.tnum{font-variant-numeric:tabular-nums}
a{color:inherit}

/* Header + day strip */
.header{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--border)}
.header-inner{max-width:720px;margin:0 auto;padding:var(--sp-4) var(--sp-4) var(--sp-3)}
.brandrow{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:var(--sp-3)}
.motd-logo{flex:0 0 auto;display:block}
.motd-logo--lg{margin:0 auto}
.wordmark{font-size:var(--fs-display);font-weight:700;letter-spacing:-.02em;margin:0}
.theme-toggle{font:inherit;font-size:var(--fs-xs);font-weight:600;cursor:pointer;
  border:1px solid var(--border);background:transparent;color:var(--text-2);
  border-radius:var(--r-full);padding:6px 12px}
.daystrip{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-4)}
.chev{flex:0 0 auto;width:36px;height:36px;border-radius:var(--r-full);
  border:1px solid var(--border);background:transparent;color:var(--text-2);
  font-size:1rem;cursor:pointer;display:grid;place-items:center;text-decoration:none}
.chev[aria-disabled="true"]{opacity:.35;pointer-events:none}
.days{display:flex;gap:var(--sp-2);overflow-x:auto;scrollbar-width:none;flex:1}
.days::-webkit-scrollbar{display:none}
.day{flex:0 0 auto;min-width:52px;padding:var(--sp-2);border-radius:var(--r-md);
  border:1px solid transparent;text-align:center;cursor:pointer;color:var(--text-2);text-decoration:none}
.day .dow{font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.day .dnum{font-size:var(--fs-body);font-weight:700}
.day:hover{background:var(--surface)}
.day.is-today{color:var(--text-1)}
.day.is-today .dow{color:var(--rate-worth)}
.day.is-selected{background:var(--ink);color:var(--ink-contrast)}
.day.is-selected .dow{color:var(--ink-contrast);opacity:.7}

/* Main / group */
main{max-width:720px;margin:0 auto;padding:var(--sp-6) var(--sp-4) var(--sp-12)}
.daynote{max-width:720px;margin:0 auto;padding:var(--sp-3) var(--sp-4) 0;color:var(--text-3);font-size:var(--fs-sm);text-align:center}
.group{margin-bottom:var(--sp-8)}
.group-head{display:flex;align-items:center;gap:var(--sp-3);padding-bottom:var(--sp-3);
  margin-bottom:var(--sp-4);border-bottom:1px solid var(--border)}
.crest{width:28px;height:28px;border-radius:var(--r-sm);background:var(--surface);
  display:grid;place-items:center;font-size:1.1rem;border:1px solid var(--border);overflow:hidden}
.crest img{width:100%;height:100%;object-fit:contain}
.group-title{font-size:var(--fs-h2);font-weight:600;margin:0}
.group-sub{font-size:var(--fs-sm);color:var(--text-3);margin-left:auto}

/* Card */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);padding:var(--sp-4);margin-bottom:var(--sp-3)}
.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-3)}
.time{font-size:var(--fs-sm);font-weight:600;color:var(--text-2)}
.tz{font-weight:500;color:var(--text-3)}
.pill{font-size:var(--fs-xs);font-weight:600;border-radius:var(--r-full);
  padding:4px 10px;display:inline-flex;align-items:center;gap:6px}
.pill--sched{border:1px solid var(--border);color:var(--text-2)}
.pill--live{background:var(--ink);color:var(--ink-contrast)}
.pill--other{border:1px solid var(--border);color:var(--text-3)}
.dot-live{width:7px;height:7px;border-radius:50%;background:#ff5b5b;
  box-shadow:0 0 0 0 rgba(255,91,91,.6);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,91,91,.55)}70%{box-shadow:0 0 0 6px rgba(255,91,91,0)}100%{box-shadow:0 0 0 0 rgba(255,91,91,0)}}
.teams{display:flex;flex-direction:column;gap:var(--sp-2)}
.team{display:flex;align-items:center;gap:var(--sp-3)}
.team .flag{font-size:1.1rem;width:28px;height:20px;text-align:center;display:inline-flex;align-items:center;justify-content:center;overflow:hidden}
.team .flag img{max-width:100%;max-height:100%;object-fit:contain}
.team .name{font-size:var(--fs-body);font-weight:600}

.rating-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--border)}
.rating{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-sm);
  padding:5px 10px;font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.chip .cdot{width:8px;height:8px;border-radius:50%}
.meter{display:inline-flex;gap:3px}
.seg{width:14px;height:7px;border-radius:3px;background:var(--border)}
.pending{font-size:var(--fs-xs);color:var(--text-3);font-weight:600}
.chip--must{background:var(--rate-must-bg);color:var(--rate-must-on)}
.chip--must .cdot{background:var(--rate-must)}
.must .seg.on{background:var(--rate-must)}
.chip--worth{background:var(--rate-worth-bg);color:var(--rate-worth-on)}
.chip--worth .cdot{background:var(--rate-worth)}
.worth .seg.on{background:var(--rate-worth)}
.chip--decent{background:var(--rate-decent-bg);color:var(--rate-decent-on)}
.chip--decent .cdot{background:var(--rate-decent)}
.decent .seg.on{background:var(--rate-decent)}
.chip--skip{background:var(--rate-skip-bg);color:var(--rate-skip-on)}
.chip--skip .cdot{background:var(--rate-skip)}
.skip .seg.on{background:var(--rate-skip)}

.btn-reveal{flex:0 0 auto;font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;
  background:transparent;border:1px solid var(--border);color:var(--text-1);
  border-radius:var(--r-sm);padding:8px 12px;display:inline-flex;align-items:center;gap:6px}
.btn-reveal:hover{background:var(--surface)}

/* Revealed block (injected by JS) */
.revealed{margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px dashed var(--border)}
.score{display:flex;align-items:baseline;gap:var(--sp-3)}
.score .big{font-size:1.75rem;font-weight:700}
.decider{font-size:var(--fs-sm);color:var(--text-2);font-weight:600}
.timeline{margin-top:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2)}
.ev{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-sm)}
.ev .min{width:46px;color:var(--text-3);font-weight:600}
.ev .ico{width:18px;text-align:center}
.why{margin-top:var(--sp-4);background:var(--surface);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4)}
.why h4{margin:0 0 var(--sp-2);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--text-3)}
.why ul{margin:0;padding-left:1.1em;font-size:var(--fs-sm);color:var(--text-2)}
.why li{margin:2px 0}
.why .pos{color:var(--text-1)}

/* Confirm popover */
.confirm{margin-top:var(--sp-3);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:var(--sp-3);display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.confirm p{margin:0;font-size:var(--fs-sm);color:var(--text-2);flex:1}
.confirm .btn{font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;border-radius:var(--r-sm);padding:6px 12px;border:1px solid var(--border);background:transparent;color:var(--text-1)}
.confirm .btn--go{background:var(--ink);color:var(--ink-contrast);border-color:var(--ink)}

/* Empty state */
.empty{--logo-bg:var(--surface);display:flex;flex-direction:column;align-items:center;
  gap:var(--sp-4);text-align:center;padding:var(--sp-12) var(--sp-4)}
.empty-msg{color:var(--text-2);font-weight:600;font-size:var(--fs-h2);margin:0}
.empty-sub{color:var(--text-3);font-size:var(--fs-sm);margin:calc(-1 * var(--sp-2)) 0 0}

/* Empty-board ring rotation (play triangle stays static) */
@keyframes ring-spin{to{transform:rotate(360deg)}}
.ring-spin{transform-origin:50px 50px;animation:ring-spin 10s linear infinite}

@media (prefers-reduced-motion:reduce){.dot-live,.ring-spin{animation:none}}

/* Version footer */
.app-footer{text-align:center;padding:var(--sp-6) var(--sp-4) var(--sp-8);
  font-size:var(--fs-xs);color:var(--text-3);font-variant-numeric:tabular-nums;
  display:flex;flex-direction:column;gap:var(--sp-2)}
.app-footer__disclaimer{opacity:.5}