:root{
  /* base palette (Tecmo theme = default) */
  --navy:#0b2545; --steel:#13315c; --accent:#0a8754; --accent2:#1b6ca8;
  --gold:#caa42a; --red:#b3261e; --bg:#f4f6f9; --card:#fff; --line:#dde3ea;
  --text:#1b2430; --muted:#667085;
  /* semantic win/loss (kept correct across themes) */
  --win:#0a8754; --lose:#b3261e;
  /* header */
  --header-bg:#0b2545; --header-fg:#ffffff; --header-link:#cfe3ff; --header-dim:#9fb6d6;
  /* surfaces / controls */
  --th-bg:#f7f9fc; --ghost-bg:#eef2f7; --ghost-fg:#13315c;
  --input-bg:#ffffff; --input-fg:#1b2430; --builder-bg:#fbfcfe;
}

/* ===================== THEMES ===================== */
[data-theme="plain"]{
  --accent:#2563eb; --accent2:#2563eb; --gold:#b8860b; --red:#dc2626;
  --bg:#f4f5f7; --card:#ffffff; --line:#e3e7ec; --text:#1f2733; --muted:#6b7280; --steel:#374151;
  --win:#15803d; --lose:#dc2626;
  --header-bg:#2b3442; --header-fg:#ffffff; --header-link:#d7deea; --header-dim:#9aa6b6;
  --th-bg:#f3f5f8; --ghost-bg:#eef1f5; --ghost-fg:#374151;
  --input-bg:#ffffff; --input-fg:#1f2733; --builder-bg:#fafbfc;
}
[data-theme="midnight"]{
  --accent:#22b07a; --accent2:#5aa9e6; --gold:#ffce4d; --red:#ff6b6b;
  --bg:#0f1420; --card:#1a2233; --line:#2a3550; --text:#e7edf5; --muted:#94a0b3; --steel:#cdd6e3;
  --win:#22b07a; --lose:#ff6b6b;
  --header-bg:#0a0f1a; --header-fg:#e7edf5; --header-link:#9fc4ff; --header-dim:#7f8da3;
  --th-bg:#202a3d; --ghost-bg:#243049; --ghost-fg:#dbe3ee;
  --input-bg:#0f1726; --input-fg:#e7edf5; --builder-bg:#141c2b;
}
[data-theme="gridiron"]{
  --accent:#15803d; --accent2:#b45309; --gold:#ca8a04; --red:#b91c1c;
  --bg:#eef3ee; --card:#ffffff; --line:#d6e2d6; --text:#1c2a1c; --muted:#5b6b5b; --steel:#1f3d29;
  --win:#15803d; --lose:#b91c1c;
  --header-bg:#14532d; --header-fg:#ffffff; --header-link:#cfe9d6; --header-dim:#9ec6a9;
  --th-bg:#eef5ef; --ghost-bg:#e7efe7; --ghost-fg:#1f3d29;
  --input-bg:#ffffff; --input-fg:#1c2a1c; --builder-bg:#f7faf7;
}
[data-theme="sunset"]{
  --accent:#e0529c; --accent2:#f59e0b; --gold:#f59e0b; --red:#e11d48;
  --bg:#faf6fb; --card:#ffffff; --line:#ecdcef; --text:#2a1f33; --muted:#7c6b85; --steel:#5b2a6b;
  --win:#16a34a; --lose:#e11d48;
  --header-bg:#3b1d5e; --header-fg:#ffffff; --header-link:#f3d4ff; --header-dim:#c8a6dd;
  --th-bg:#f7eefa; --ghost-bg:#f2e6f6; --ghost-fg:#5b2a6b;
  --input-bg:#ffffff; --input-fg:#2a1f33; --builder-bg:#fdf8fe;
}
/* ================================================= */

*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.5}
a{color:var(--accent2);text-decoration:none}
a:hover{text-decoration:underline}
header.top{background:var(--header-bg);color:var(--header-fg);padding:.7rem 1rem;display:flex;
  align-items:center;gap:1rem;flex-wrap:wrap}
header.top .brand{font-weight:700;font-size:1.15rem;color:var(--header-fg)}
header.top nav{display:flex;gap:1rem;flex-wrap:wrap;margin-left:auto;align-items:center}
header.top nav a{color:var(--header-link)}
header.top nav .who{color:var(--header-dim);font-size:.85rem}
.themeSel{width:auto;padding:.2rem .45rem;border-radius:6px;font-size:.8rem}
.container{max-width:1000px;margin:1.2rem auto;padding:0 1rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:1.1rem 1.2rem;margin-bottom:1.1rem;box-shadow:0 1px 2px rgba(16,24,40,.04)}
h1{font-size:1.5rem;margin:.2rem 0 1rem}
h2{font-size:1.15rem;margin:.1rem 0 .8rem}
h3{font-size:1rem;margin:.2rem 0 .5rem}
.muted{color:var(--muted)}
.pill{display:inline-block;padding:.12rem .55rem;border-radius:999px;font-size:.75rem;
  font-weight:600}
.pill.open{background:#e7f6ed;color:var(--accent)}
.pill.locked{background:#fdeceb;color:var(--red)}
.pill.scored{background:#eaf1fb;color:var(--accent2)}
.pill.setup{background:#f1f1f4;color:var(--muted)}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{padding:.5rem .55rem;border-bottom:1px solid var(--line);text-align:left;
  vertical-align:top}
th{background:var(--th-bg);font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;
  color:var(--muted)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.btn{display:inline-block;background:var(--accent);color:#fff;border:none;
  padding:.5rem .9rem;border-radius:7px;font-size:.9rem;cursor:pointer;font-weight:600}
.btn:hover{filter:brightness(1.05);text-decoration:none}
.btn.secondary{background:var(--accent2)}
.btn.ghost{background:var(--ghost-bg);color:var(--ghost-fg)}
.btn.danger{background:var(--red)}
.btn.small{padding:.3rem .6rem;font-size:.8rem}
input,select,textarea{font:inherit;padding:.45rem .55rem;border:1px solid #c6cfdb;
  border-radius:6px;background:var(--input-bg);color:var(--input-fg);width:100%}
/* Radios/checkboxes shouldn't stretch like text inputs do. */
input[type=radio],input[type=checkbox]{width:auto;padding:0;margin:0;flex:0 0 auto}
textarea{min-height:120px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem}
label{font-size:.82rem;color:var(--muted);display:block;margin:.5rem 0 .2rem}
.row{display:flex;gap:.8rem;flex-wrap:wrap}
.row>div{flex:1;min-width:140px}
.flash{padding:.6rem .9rem;border-radius:7px;margin-bottom:.8rem;font-size:.92rem}
.flash.ok{background:#e7f6ed;color:#0a5d3a;border:1px solid #b7e0c7}
.flash.error{background:#fdeceb;color:#8a1c16;border:1px solid #f2c4c0}
.win{color:var(--win);font-weight:600}
.loss{color:var(--lose);font-weight:600}
.push{color:#3b82f6;font-weight:600}   /* pushes read as blue everywhere */
.big{font-size:1.6rem;font-weight:700}
.kpi{display:flex;gap:1.5rem;flex-wrap:wrap}
.kpi .k{background:var(--th-bg);border:1px solid var(--line);border-radius:8px;
  padding:.6rem .9rem;min-width:130px}
.kpi .k .lbl{font-size:.72rem;color:var(--muted);text-transform:uppercase}
.kpi .k .val{font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums}
.login-wrap{max-width:360px;margin:5rem auto}
.bet-builder{border:1px solid var(--line);border-radius:8px;padding:.7rem;margin-bottom:.7rem;
  background:var(--builder-bg)}
.legcheck{display:flex;align-items:center;gap:.4rem;font-size:.85rem;margin:.1rem 0}
.legcheck input{width:auto}
.hint{font-size:.8rem;color:var(--muted)}
.right{text-align:right}
.flex-between{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  flex-wrap:wrap}
.tier1{color:#6b7280}.tier2{color:#b07d0a}.tier3{color:#0a8754}
.linebox{border:1px solid var(--line);border-radius:7px;padding:.5rem .7rem;margin:.35rem 0}
.linebox .opts{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:.2rem}
ul.clean{list-style:none;padding:0;margin:0}
ul.clean li{padding:.3rem 0;border-bottom:1px solid var(--line)}

/* ---- Print: clean, easy-to-digest pick monitor ---- */
.print-title{display:none}
@media print{
  header.top, .noprint, .btn{display:none !important}
  body{background:#fff;color:#000}
  .container{margin:0;max-width:100%}
  .print-title{display:block;font-size:1.3rem;font-weight:700;margin:0 0 .4rem}
  .card{box-shadow:none;border:1px solid #bbb;border-radius:0;padding:.45rem .6rem;
    margin-bottom:.4rem;break-inside:avoid;background:#fff}
  .pick-block{break-inside:avoid}
  table{font-size:.8rem}
  th{background:#eee !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .win,.loss,.push{color:#000 !important}
  @page{margin:1.2cm}
}

/* disabled buttons (e.g. Save picks until chips are fully allocated) */
.btn:disabled,.btn[disabled]{background:#c2c8d0;color:#fff;cursor:not-allowed;filter:none}
.bet-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.4rem 0 .2rem}

/* ---- Pixel-style countdown clock (stays retro across themes) ---- */
.countdown{background:#0b2545;border:4px solid #13315c;border-radius:12px;padding:1rem 1rem .8rem;
  text-align:center;margin-bottom:1.1rem;image-rendering:pixelated}
.countdown .cd-label{color:#9fb6d6;font-size:.78rem;text-transform:uppercase;letter-spacing:.18em}
.countdown .cd-clock{display:flex;justify-content:center;gap:.9rem;flex-wrap:wrap;margin-top:.5rem}
.countdown .seg{min-width:78px}
.countdown .seg .v{font-family:'Courier New',ui-monospace,monospace;font-weight:800;font-size:3rem;
  line-height:1;color:#ffd23f;letter-spacing:3px;text-shadow:3px 3px 0 #000,0 0 8px rgba(255,210,63,.45)}
.countdown .seg .u{color:#7fa6d6;font-size:.68rem;text-transform:uppercase;letter-spacing:.2em;margin-top:.35rem}
.countdown.ended .seg .v{color:#ff6b6b;text-shadow:3px 3px 0 #000,0 0 8px rgba(255,107,107,.5)}
.countdown.compact{padding:.5rem .8rem .45rem;margin:.55rem 0 0;display:inline-block;border-width:3px}
.countdown.compact .cd-clock{gap:.55rem;margin-top:.3rem}
.countdown.compact .seg{min-width:46px}
.countdown.compact .seg .v{font-size:1.6rem;text-shadow:2px 2px 0 #000,0 0 6px rgba(255,210,63,.4)}
.countdown.compact .seg .u{font-size:.6rem;margin-top:.15rem}

/* ---- Role chip + admin/player view toggle ---- */
.rolechip{display:inline-block;background:var(--gold);color:#1b2430;font-size:.62rem;
  font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:.08rem .4rem;
  border-radius:999px;vertical-align:middle;margin-left:.25rem}
.modeToggle{background:var(--accent);color:#fff !important;padding:.2rem .55rem;border-radius:6px;
  font-weight:700;font-size:.82rem}
.modeToggle:hover{filter:brightness(1.08)}

/* Push (refund) - neutral, distinct from win/loss/undecided */
.push{color:var(--accent2);font-weight:600}