/* ff.boxware.net — shared styles for index.php (draft board) + matchups.php */

:root{
  --bg:#0d0f14;
  --bg2:#151823;
  --panel:#1b1f2c;
  --line:#2b3042;
  --text:#eef0f6;
  --muted:#9aa1b6;
  --accent:#4da3ff;
  --gold:#ffd166;
  --ok:#3ddc84;
  --bad:#ff5d6c;
  /* position colors — muted but distinct, readable from across a room */
  --qb:#71293a;
  --rb:#22593b;
  --wr:#28496e;
  --te:#6e5222;
  --k:#54306b;
  --dst:#31555c;
  --pos-other:#3a3f52;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
[hidden]{display:none!important} /* author display rules must not defeat the hidden attribute */
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.35;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit}

/* ---------- top bar ---------- */
.topbar{
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:20px;
  padding:10px 18px;
  background:var(--bg2);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
.brand{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap} /* league name + pills on one line */
.brand h1{
  margin:0;
  font-size:clamp(15px,1.5vw,22px);
  font-weight:800;
  letter-spacing:.02em;
  white-space:nowrap;
}
.pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 10px;border-radius:999px;
  border:1px solid var(--line);color:var(--muted);background:transparent;
}
.pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.live{color:var(--ok);border-color:rgba(61,220,132,.45)}
.pill.live .dot{animation:blink 1.2s infinite}
.pill.done{color:var(--accent);border-color:rgba(77,163,255,.45)}
.pill.env{color:var(--gold);border-color:rgba(255,209,102,.45)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- team logo w/ initials fallback ---------- */
.logo{
  position:relative;flex-shrink:0;
  border-radius:50%;overflow:hidden;
  background:#262c40;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
.logo-initials{
  font-weight:800;color:var(--muted);letter-spacing:.02em;
  user-select:none;
}
.logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#262c40}

/* ---------- past-champion chip (pre-draft list + matchup cards) ---------- */
.champ{
  display:inline-flex;align-items:center;flex-shrink:0;
  font-size:11px;font-weight:800;letter-spacing:.04em;white-space:nowrap;
  padding:2px 8px;border-radius:999px;
  color:var(--gold);border:1px solid rgba(255,209,102,.45);
  background:rgba(255,209,102,.08);
}

/* ---------- footer nav ---------- */
.foot{
  flex-shrink:0;
  display:flex;justify-content:center;gap:24px;
  padding:8px 16px;
  border-top:1px solid var(--line);
  background:var(--bg2);
  font-size:13px;color:var(--muted);
}

/* ---------- toast + error screens ---------- */
#toast{
  position:fixed;right:16px;bottom:52px;z-index:50;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:10px 16px;font-size:14px;font-weight:600;color:var(--muted);
  box-shadow:0 6px 24px rgba(0,0,0,.5);
  max-width:min(480px,80vw);
}
#toast.err{color:var(--bad);border-color:rgba(255,93,108,.5)}
.error-screen{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:40px 24px;gap:12px;
}
.error-screen h2{margin:0;font-size:clamp(22px,3vw,40px)}
.error-screen .err-msg{
  color:var(--bad);font-size:clamp(16px,2vw,26px);font-weight:700;
  max-width:900px;overflow-wrap:anywhere;
}
.error-screen .err-sub{color:var(--muted);font-size:15px}

/* ============================================================
   DRAFT BOARD (index.php)
   ============================================================ */
body.page-draft{
  height:100vh;height:100dvh;
  display:flex;flex-direction:column;
  overflow:hidden;
}
.latest{
  flex:1;min-width:0;
  display:flex;align-items:center;justify-content:flex-end;gap:16px;
  text-align:right;overflow:hidden;
}
.hdr-note{color:var(--muted);font-size:14px;font-weight:600;white-space:nowrap}
.lp{display:flex;align-items:center;gap:10px;min-width:0}
.lp-img{
  width:52px;height:52px;flex-shrink:0;
  border-radius:10px;object-fit:cover;object-position:top;
  background:#262c40;border:1px solid var(--line);
}
.lp-txt{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:0}
.oc{
  flex-shrink:0;
  display:flex;flex-direction:column;align-items:flex-end;gap:1px;
  background:rgba(77,163,255,.1);border:1px solid var(--accent);border-radius:10px;
  padding:6px 14px;
  animation:pulse 1.5s ease-in-out infinite;
}
.oc-label{
  font-size:clamp(9px,.8vw,12px);font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
}
.oc-team{
  font-size:clamp(16px,2vw,28px);font-weight:800;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38vw;
}
.oc-owner{color:var(--muted);font-size:clamp(10px,1vw,13px);font-weight:600;text-transform:capitalize}
.oc-timer{
  font-size:clamp(22px,2.8vw,44px);font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--accent);
}
.oc-timer:empty{display:none}
.oc-timer.low{color:var(--bad)}
.lp-label{
  font-size:clamp(10px,.9vw,13px);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.lp-main{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.lp-player{font-size:clamp(18px,2.4vw,34px);font-weight:800;color:var(--gold)}
.lp-meta{font-size:clamp(13px,1.4vw,20px);font-weight:600;color:var(--muted);margin-left:10px}

.done-banner{
  flex-shrink:0;
  text-align:center;padding:6px 12px;
  font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  font-size:clamp(13px,1.4vw,18px);color:var(--gold);
  background:rgba(255,209,102,.08);border-bottom:1px solid rgba(255,209,102,.3);
}

/* board grid — only this container scrolls, never the page */
.board-wrap{flex:1;overflow:auto;padding:8px 10px 10px}
.board{
  display:grid;
  grid-template-columns:40px repeat(var(--cols,10),minmax(0,1fr));
  gap:4px;
  min-width:calc(var(--cols,10) * 74px + 44px);
  /* cell type scales with column width; clamped for sanity */
  --cellname:clamp(10px,calc((100vw - 60px) / var(--cols,10) * .115),18px);
}
.corner,.tcol{position:sticky;top:0;z-index:5}
.corner{left:0;z-index:6;background:var(--bg)}
.tcol{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:5px 4px;min-width:0;
}
.tcol-top{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;max-width:100%}
.tcol-owner{
  color:var(--muted);font-weight:600;text-transform:capitalize;
  font-size:clamp(9px,calc((100vw - 60px) / var(--cols,10) * .09),13px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.tcol .tabb{
  font-weight:800;letter-spacing:.04em;
  font-size:clamp(13px,calc((100vw - 60px) / var(--cols,10) * .17),24px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tcol-slot{
  font-weight:800;line-height:1;color:var(--muted);
  font-size:clamp(10px,calc((100vw - 60px) / var(--cols,10) * .1),14px);
  font-variant-numeric:tabular-nums;
}
.tcol.onclock .tcol-slot{color:var(--accent)}
.tcol .tchamp{flex-shrink:0;font-size:clamp(10px,.9vw,14px);font-weight:800;color:var(--gold)}
.tcol.onclock{
  background:#1d3a5f;border-color:var(--accent);
  animation:pulse 1.5s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(77,163,255,.65)}
  50%{box-shadow:0 0 0 7px rgba(77,163,255,0)}
}
.rlabel{
  position:sticky;left:0;z-index:4;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);color:var(--muted);
  font-weight:800;font-size:clamp(11px,1vw,15px);
}
.cell{
  border-radius:6px;padding:4px 6px;min-height:3.4em;min-width:0;
  display:flex;flex-direction:column;justify-content:center;gap:1px;
}
.cell.empty{background:transparent;border:1px dashed var(--line)}
.cell.p-QB{background:var(--qb)}
.cell.p-RB{background:var(--rb)}
.cell.p-WR{background:var(--wr)}
.cell.p-TE{background:var(--te)}
.cell.p-K{background:var(--k)}
.cell.p-DST{background:var(--dst)}
.cell.p-other{background:var(--pos-other)}
/* live-draft focus: the on-the-clock team's whole column stays lit, everything
   else recedes; the latest pick keeps its gold ring. The .dim class comes off
   when the draft completes, restoring every cell to full strength. */
.board.dim .cell.filled{opacity:.35;filter:saturate(.7)}
.board.dim .cell.empty{opacity:.55}
.board.dim .cell.oncol{opacity:1;filter:none}
.board.dim .tcol:not(.onclock){opacity:.6}
.board.dim .cell.filled.latest{opacity:1;filter:none;outline:2px solid var(--gold);outline-offset:-2px}
.cell.next{
  border:2px solid var(--accent);background:rgba(77,163,255,.08);
  animation:pulse 1.5s ease-in-out infinite;
}
.pname{
  font-weight:700;font-size:var(--cellname);line-height:1.12;
  overflow-wrap:anywhere;
}
.pmeta{
  font-size:calc(var(--cellname) * .78);
  color:rgba(255,255,255,.72);
  text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.kbadge{
  display:inline-block;margin-left:5px;padding:0 4px;border-radius:3px;
  background:var(--gold);color:#211a05;
  font-size:calc(var(--cellname) * .7);font-weight:800;line-height:1.3;
  vertical-align:baseline;
}

/* pre-draft waiting screen */
.pre-screen{
  flex:1;overflow:auto;
  display:flex;flex-direction:column;align-items:center;
  padding:32px 20px;gap:20px;
}
.pre-screen h2{
  margin:0;font-size:clamp(22px,3vw,40px);font-weight:800;letter-spacing:.02em;
}
.pre-screen .pre-sub{color:var(--muted);font-size:clamp(14px,1.4vw,18px);margin-top:-12px}
.pre-list{
  width:min(680px,100%);display:flex;flex-direction:column;gap:8px;
}
.pre-team{
  display:flex;align-items:center;gap:14px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:10px 16px;
}
.pre-slot{
  width:2.2em;text-align:center;flex-shrink:0;
  font-weight:800;font-size:clamp(16px,1.8vw,24px);color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.pre-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pre-line{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
.pre-name{font-weight:700;font-size:clamp(15px,1.7vw,22px);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pre-owner{color:var(--muted);font-size:clamp(12px,1.2vw,15px);font-weight:600;text-transform:capitalize}
.pre-abbrev{margin-left:auto;color:var(--muted);font-weight:700;letter-spacing:.08em}

/* pre-draft countdown */
.countdown{display:flex;flex-direction:column;align-items:center;gap:12px;padding:6px 0 2px}
.cd-label{color:var(--muted);font-weight:800;letter-spacing:.22em;text-transform:uppercase;font-size:clamp(12px,1.3vw,17px)}
.cd-digits{display:flex;gap:clamp(8px,1.2vw,16px)}
.cd-cell{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:clamp(10px,1.4vw,18px) clamp(12px,1.8vw,26px);
  min-width:clamp(64px,9vw,140px);
}
.cd-num{font-size:clamp(34px,6.5vw,96px);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.cd-unit{color:var(--muted);font-size:clamp(10px,1vw,14px);font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.cd-when{color:var(--gold);font-weight:700;font-size:clamp(14px,1.7vw,22px)}

/* ============================================================
   MATCHUPS (matchups.php)
   ============================================================ */
body.page-matchups{
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
}
.weeknav{
  display:flex;align-items:center;gap:10px;
  margin:0 auto;
}
.weeknav h2{
  margin:0;font-size:clamp(18px,2.2vw,30px);font-weight:800;
  min-width:6.5ch;text-align:center;white-space:nowrap;
}
.weeknav .wk-cur{
  display:block;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);text-align:center;
}
.weeknav button{
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  width:40px;height:40px;cursor:pointer;
  font-size:22px;line-height:1;padding:0 0 3px;
}
.weeknav button:hover:not(:disabled){border-color:var(--accent)}
.weeknav button:disabled{opacity:.3;cursor:default}
.topbar .bal{flex:1}

.mu-main{flex:1;width:100%}
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(400px,100%),1fr));
  gap:14px;
  width:100%;max-width:1500px;margin:0 auto;
  padding:16px;
}
.cards .none{grid-column:1/-1;text-align:center;color:var(--muted);
  padding:48px 16px;font-size:clamp(16px,2vw,24px)}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:12px 16px 14px;
}
.badges{display:flex;justify-content:flex-end;gap:6px;margin-bottom:2px;min-height:0}
.badge{
  font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:2px 8px;border-radius:999px;
  border:1px solid var(--line);color:var(--muted);
}
.badge.playoff{color:var(--gold);border-color:rgba(255,209,102,.45)}
.badge.final{color:var(--ok);border-color:rgba(61,220,132,.4)}
.badge.tie{color:var(--accent);border-color:rgba(77,163,255,.4)}
.side{display:flex;align-items:center;gap:12px;padding:6px 0}
.side .who{flex:1;min-width:0}
.side .tline{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.side .tname{
  font-weight:700;font-size:clamp(15px,1.5vw,21px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.side .towner{color:var(--muted);font-size:clamp(12px,1.1vw,14px);font-weight:600;text-transform:capitalize}
.side .trec{color:var(--muted);font-size:clamp(11px,1vw,13px)}
.scorebox{text-align:right;flex-shrink:0}
.score{
  font-size:clamp(26px,2.8vw,42px);font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;
}
.proj{color:var(--muted);font-size:clamp(11px,1vw,13px);margin-top:3px;
  font-variant-numeric:tabular-nums}
.side.lose{opacity:.55}
.side.win .score{color:var(--gold)}
.bar{height:6px;border-radius:3px;background:var(--bg);overflow:hidden;margin:4px 0}
.bar i{display:block;height:100%;background:var(--accent);transition:width .6s ease}
.bye-label{
  text-align:center;color:var(--muted);
  font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  font-size:12px;padding:10px 0 4px;
}

@media (max-width:560px){
  .topbar{flex-wrap:wrap;gap:10px;padding:10px 12px}
  .topbar .bal{display:none}
  .weeknav{margin:0 auto}
  .brand{flex-basis:100%;flex-direction:row;align-items:center;gap:10px;justify-content:center}
  .cards{padding:12px}
}