/* draft.css — Arena Draft module · own token set
 * F1 default theme · variants: worldcup, nfl, fantasy
 * Fonts: Fraunces (display) · Inter (body) · JetBrains Mono (mono)
 */

/* ── Tokens ── */
:root{
  --s0:oklch(13% .012 250);--s1:oklch(17% .014 250);--s2:oklch(21% .016 250);--s3:oklch(26% .018 250);
  --i1:oklch(97% .005 250);--i2:oklch(76% .010 250);--i3:oklch(56% .012 250);--i4:oklch(42% .014 250);
  --line:oklch(30% .014 250);--line-soft:oklch(24% .012 250);
  /* theme: F1 default */
  --brand:oklch(62% .24 22);--brand-ink:oklch(99% .01 22);--brand-soft:oklch(28% .14 22);--brand-hi:oklch(76% .20 60);
  --ok:oklch(66% .16 152);--wn:oklch(74% .14 75);
  --f-d:'Fraunces',Georgia,serif;--f-b:'Inter',system-ui,sans-serif;--f-m:'JetBrains Mono',ui-monospace,monospace;
  --r-s:6px;--r-m:10px;--r-l:14px;--r-p:999px;
}
[data-theme="worldcup"]{--brand:oklch(64% .18 152);--brand-ink:oklch(99% .01 152);--brand-soft:oklch(28% .10 152);--brand-hi:oklch(78% .18 90)}
[data-theme="nfl"]{--brand:oklch(54% .18 264);--brand-ink:oklch(99% .01 264);--brand-soft:oklch(26% .10 264);--brand-hi:oklch(76% .18 40)}
[data-theme="fantasy"]{--brand:oklch(62% .20 295);--brand-ink:oklch(99% .01 295);--brand-soft:oklch(28% .12 295);--brand-hi:oklch(78% .16 85)}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--f-b);font-size:14px;line-height:1.5;color:var(--i1);background:var(--s0);min-height:100vh;overflow-x:hidden}

/* ── App shell ── */
.draft-app { max-width: 1680px; margin: 0 auto; padding: 0 40px 120px; }
.draft-nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--s0); border-bottom: 1px solid var(--line);
  padding: 12px 0; display: flex; gap: 6px;
  backdrop-filter: blur(12px);
}
.draft-nav button {
  padding: 10px 18px; border: 1px solid transparent; background: none;
  color: var(--i3); font-family: var(--f-b); font-size: 13px; font-weight: 600;
  cursor: pointer; border-radius: var(--r-s); letter-spacing: .02em; transition: all .15s;
}
.draft-nav button:hover { border-color: var(--brand); color: var(--i1); }
.draft-nav button.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.draft-section { padding-top: 32px; margin-bottom: 48px; }
.draft-section h2 {
  font-family: var(--f-d); font-weight: 500; font-size: 26px;
  letter-spacing: -.015em; margin-bottom: 16px; display: flex; gap: 14px; align-items: baseline;
}
.draft-section h2 .num {
  font-family: var(--f-m); font-size: 11px; letter-spacing: .14em;
  color: var(--brand); text-transform: uppercase;
}

/* ── Document layout ── */
.doc{max-width:1680px;margin:0 auto;padding:36px 40px 120px}
.dh{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:40px}
.dh h1{font-family:var(--f-d);font-weight:500;font-size:42px;letter-spacing:-.02em;line-height:1}
.dh h1 em{font-style:italic;color:var(--brand)}
.dh .eye{font-family:var(--f-m);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--i3);margin-bottom:6px}
.dh .meta{text-align:right;font-family:var(--f-m);font-size:11px;color:var(--i3);letter-spacing:.08em;text-transform:uppercase;line-height:1.8}
.lede{color:var(--i2);font-size:17px;max-width:82ch;margin-bottom:48px;line-height:1.55;text-wrap:pretty}
.lede b{color:var(--i1);font-weight:600}
.lede code{font-family:var(--f-m);font-size:.9em;color:var(--brand)}

.sec{margin-top:72px}
.sh{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line-soft);padding-bottom:12px;margin-bottom:24px}
.sh h2{font-family:var(--f-d);font-weight:500;font-size:26px;letter-spacing:-.015em;display:flex;gap:14px;align-items:baseline}
.sh .num{font-family:var(--f-m);font-size:11px;letter-spacing:.14em;color:var(--brand);text-transform:uppercase}
.sh .note{font-family:var(--f-m);font-size:11px;color:var(--i3);letter-spacing:.08em;text-transform:uppercase}
.lede-sub{color:var(--i2);max-width:86ch;margin-bottom:24px;text-wrap:pretty}
.lede-sub b{color:var(--i1)}
.lede-sub code{color:var(--brand);font-family:var(--f-m);font-size:.92em}
.sec-foot{margin-top:72px;border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;font-family:var(--f-m);font-size:11px;color:var(--i3);letter-spacing:.08em;text-transform:uppercase}

/* ── Mechanic / flow timeline ── */
.mech{display:grid;grid-template-columns:repeat(6,1fr);gap:0;background:var(--s1);border:1px solid var(--line);border-radius:var(--r-l);padding:22px 24px;margin-bottom:10px}
.mech .st{padding:0 12px;position:relative}
.mech .st:not(:last-child)::after{content:"";position:absolute;right:0;top:24px;bottom:20px;width:2px;background:repeating-linear-gradient(to bottom,var(--line) 0 4px,transparent 4px 8px)}
.mech .idx{font-family:var(--f-m);font-size:10px;letter-spacing:.14em;color:var(--brand);text-transform:uppercase;margin-bottom:4px;font-weight:700}
.mech h4{font-family:var(--f-d);font-weight:500;font-size:15px;letter-spacing:-.005em;margin-bottom:6px}
.mech p{font-family:var(--f-m);font-size:10.5px;color:var(--i3);line-height:1.55;letter-spacing:.01em}

/* ── Draft Room ── */
.room{background:linear-gradient(180deg,var(--s1),var(--s0));border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;position:relative}
.room::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 100% 0%,rgb(from var(--brand) r g b / .12),transparent 60%),radial-gradient(circle at 0% 100%,rgb(from var(--brand-hi) r g b / .08),transparent 60%);pointer-events:none}
.room > *{position:relative}

/* top bar */
.bar{display:grid;grid-template-columns:auto 1fr auto;gap:24px;padding:16px 24px;background:rgb(0 0 0 /.3);border-bottom:1px solid var(--line);align-items:center;backdrop-filter:blur(8px)}
.bar .brand{display:flex;align-items:center;gap:14px}
.bar .brand .lg{width:36px;height:36px;border-radius:var(--r-s);background:linear-gradient(135deg,var(--brand),var(--brand-hi));display:flex;align-items:center;justify-content:center;font-family:var(--f-d);font-weight:700;font-size:20px;color:var(--brand-ink);letter-spacing:-.02em}
/* renamed: .bar .brand .tx → .bar .brand .btx (avoids collision with theme card .tx) */
.bar .brand .btx b{font-family:var(--f-d);font-size:20px;font-weight:600;letter-spacing:-.01em;display:block;line-height:1}
.bar .brand .btx span{font-family:var(--f-m);font-size:10px;color:var(--i3);letter-spacing:.14em;text-transform:uppercase;font-weight:600}

.bar .clock{justify-self:center;display:flex;align-items:center;gap:18px}
.bar .clock .ph{font-family:var(--f-m);font-size:10px;color:var(--i3);letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.bar .clock .ct{background:var(--brand);color:var(--brand-ink);padding:8px 18px;border-radius:var(--r-s);font-family:var(--f-d);font-size:30px;font-weight:600;letter-spacing:-.01em;line-height:1;display:flex;align-items:baseline;gap:4px;box-shadow:0 0 24px rgb(from var(--brand) r g b / .35)}
.bar .clock .ct small{font-family:var(--f-m);font-size:11px;letter-spacing:.08em;font-weight:600;opacity:.7}
.bar .clock .pill{font-family:var(--f-m);font-size:11px;color:var(--i1);letter-spacing:.06em;padding:4px 10px;background:var(--s2);border:1px solid var(--line);border-radius:var(--r-p);font-weight:600}
.bar .clock .pill em{font-style:normal;color:var(--brand);font-weight:700;margin-right:4px}
.bar .clock .pill.live{color:var(--brand);border-color:var(--brand)}
.bar .clock .pill.live::before{content:"●";margin-right:4px;animation:pulse 1.2s infinite}

.bar .me{display:flex;align-items:center;gap:12px;font-family:var(--f-m);font-size:11px;color:var(--i2);letter-spacing:.04em}
.bar .me .av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-hi));display:flex;align-items:center;justify-content:center;font-family:var(--f-b);font-weight:800;color:var(--brand-ink);font-size:12px}
.bar .me b{color:var(--i1);font-family:var(--f-b);font-weight:700;font-size:12px;letter-spacing:0}
.bar .me span{display:block;font-family:var(--f-m);font-size:9.5px;color:var(--i3);letter-spacing:.08em;text-transform:uppercase;margin-top:1px}

/* ── Grid / Order / Pool / Crew / Ticker ── */
.grid3{display:grid;grid-template-columns:300px 1fr 340px;min-height:720px}

/* left — order of picks */
.ord{background:rgb(0 0 0 /.18);border-right:1px solid var(--line);display:flex;flex-direction:column}
.ord .hd{padding:16px 18px;border-bottom:1px solid var(--line-soft);display:flex;justify-content:space-between;align-items:baseline}
.ord .hd b{font-family:var(--f-b);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.ord .hd span{font-family:var(--f-m);font-size:10px;color:var(--i3);letter-spacing:.06em;text-transform:uppercase}
.ord .rounds{padding:14px 18px;overflow-y:auto;flex:1}
.rd{margin-bottom:18px}
.rd .rh{font-family:var(--f-m);font-size:9px;letter-spacing:.14em;color:var(--i3);text-transform:uppercase;margin-bottom:8px;font-weight:700;display:flex;justify-content:space-between}
.rd .rh b{color:var(--i2)}
.rd.active .rh b{color:var(--brand)}
.rd .picks{display:flex;flex-direction:column;gap:4px}
.pk{padding:8px 10px;border-radius:var(--r-s);background:var(--s1);border:1px solid var(--line-soft);display:grid;grid-template-columns:20px 1fr auto;gap:8px;align-items:center;font-size:11.5px;transition:background .2s}
.pk .n{font-family:var(--f-m);font-size:9px;color:var(--i4);letter-spacing:.04em;font-weight:700}
.pk .tm{font-weight:600;color:var(--i2);letter-spacing:-.005em}
/* renamed: .pk .st → .pk .pst (pick status, avoids ambiguity with mechanic .st) */
.pk .pst{font-family:var(--f-m);font-size:9px;color:var(--i4);letter-spacing:.06em;text-transform:uppercase}
.pk.done{background:var(--s1);border-color:var(--line-soft)}
.pk.done .tm{color:var(--i3)}
.pk.done .pick{font-family:var(--f-m);font-size:9.5px;color:var(--brand);letter-spacing:.02em;font-weight:700}
.pk.now{background:linear-gradient(90deg,var(--brand-soft),transparent);border:1px solid var(--brand);box-shadow:0 0 0 2px rgb(from var(--brand) r g b / .15)}
.pk.now .tm{color:var(--brand-ink)}
.pk.now .pst{color:var(--brand);animation:pulse 1.4s infinite}
.pk.me{border-left:3px solid var(--brand-hi)}
.pk.me .tm::after{content:" ← you";font-family:var(--f-m);font-size:9px;color:var(--brand-hi);letter-spacing:.06em;font-weight:700}

/* center — pool of available players */
.pool{display:flex;flex-direction:column;background:var(--s0)}
.pool .ph{padding:18px 24px 12px;border-bottom:1px solid var(--line-soft);display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}
.pool .ph h3{font-family:var(--f-d);font-weight:500;font-size:22px;letter-spacing:-.01em;margin-bottom:4px}
.pool .ph h3 em{font-style:italic;color:var(--brand)}
.pool .ph .yourturn{font-family:var(--f-m);font-size:10px;letter-spacing:.12em;color:var(--brand-hi);text-transform:uppercase;font-weight:700;display:flex;align-items:center;gap:6px;padding:5px 12px;background:rgb(from var(--brand-hi) r g b / .15);border-radius:var(--r-p);border:1px solid rgb(from var(--brand-hi) r g b / .35)}
.pool .ph .yourturn::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand-hi);box-shadow:0 0 10px var(--brand-hi);animation:pulse 1.2s infinite}
.pool .ph .filter{display:flex;gap:4px;background:var(--s1);border:1px solid var(--line);border-radius:var(--r-s);padding:3px}
.pool .ph .filter button{padding:6px 12px;border:none;background:none;color:var(--i3);font-family:var(--f-m);font-size:10px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border-radius:3px;font-weight:700}
.pool .ph .filter button.on{background:var(--brand);color:var(--brand-ink)}
.pool .ph input{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-s);color:var(--i1);padding:7px 12px;font-family:var(--f-b);font-size:12px;width:200px}
.pool .ph .right{display:flex;gap:10px;align-items:center}

.plist{padding:18px 24px;overflow-y:auto;flex:1;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;align-content:start}
.card{background:linear-gradient(160deg,var(--s1),var(--s2));border:1px solid var(--line);border-radius:var(--r-m);padding:14px 16px;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;position:relative;transition:all .2s;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 40%,rgb(from var(--brand-hi) r g b /.06) 50%,transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.card:hover{border-color:var(--brand);transform:translateY(-1px);box-shadow:0 8px 24px rgb(0 0 0 /.3)}
.card:hover::before{opacity:1}
.card.taken{opacity:.35;filter:saturate(.3)}
.card.taken:hover{transform:none;border-color:var(--line)}
.card .pf{position:relative}
.card .av{width:52px;height:52px;border-radius:12px;background:linear-gradient(135deg,var(--b1,var(--brand)),var(--b2,var(--brand-hi)));display:flex;align-items:center;justify-content:center;font-family:var(--f-d);font-weight:700;font-size:19px;color:#fff;letter-spacing:-.01em;box-shadow:0 2px 8px rgb(0 0 0 /.3)}
.card .rk{position:absolute;top:-4px;right:-4px;background:var(--s0);border:1.5px solid var(--brand);color:var(--brand);font-family:var(--f-m);font-size:9px;font-weight:800;padding:1px 5px;border-radius:var(--r-p);letter-spacing:.04em}
.card.hot .rk{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.card .body b{font-family:var(--f-b);font-weight:700;font-size:14px;letter-spacing:-.005em;display:block;line-height:1.2}
.card .body .sub{font-family:var(--f-m);font-size:10px;color:var(--i3);letter-spacing:.02em;margin-top:2px;display:flex;gap:8px;flex-wrap:wrap}
.card .body .sub span::before{content:"· ";color:var(--i4)}
.card .body .sub span:first-child::before{content:""}
.card .stats{display:flex;gap:10px;margin-top:6px;align-items:center}
.card .stats .st{display:flex;flex-direction:column;align-items:flex-start}
.card .stats .st .l{font-family:var(--f-m);font-size:8px;color:var(--i4);letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.card .stats .st .v{font-family:var(--f-d);font-size:15px;font-weight:600;color:var(--i1);line-height:1;font-variant-numeric:tabular-nums}
.card .stats .st .v small{font-size:9px;color:var(--i3);font-family:var(--f-m);font-weight:500;margin-left:2px}
.card .stats .chip{font-family:var(--f-m);font-size:9px;padding:3px 7px;background:var(--s0);border:1px solid var(--line);border-radius:var(--r-p);color:var(--i2);letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.card .stats .chip.hot{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
/* renamed: .card .draft → .card .draft-btn (clearer naming for the button) */
.card .draft-btn{padding:9px 14px;border-radius:var(--r-s);background:var(--brand);color:var(--brand-ink);font-family:var(--f-b);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;border:none;cursor:pointer;white-space:nowrap}
.card .draft-btn:hover{background:var(--brand-hi)}
.card.taken .draft-btn{background:var(--s3);color:var(--i3);cursor:not-allowed}
.card.taken .draft-btn::before{content:"✓ "}

/* right — my crew */
.crew{background:rgb(0 0 0 /.18);border-left:1px solid var(--line);display:flex;flex-direction:column}
.crew .hd{padding:16px 18px;border-bottom:1px solid var(--line-soft)}
.crew .hd b{font-family:var(--f-b);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.08em;display:block;margin-bottom:2px}
.crew .hd span{font-family:var(--f-m);font-size:10px;color:var(--i3);letter-spacing:.06em}
.crew .hd span b{color:var(--brand);font-weight:700}
.crew .teamname{padding:14px 18px;border-bottom:1px solid var(--line-soft);display:flex;gap:10px;align-items:center}
.crew .teamname .crest{width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,var(--brand),var(--brand-hi));display:flex;align-items:center;justify-content:center;font-family:var(--f-d);font-weight:700;color:var(--brand-ink);font-size:16px;letter-spacing:-.01em}
.crew .teamname .nm{font-family:var(--f-d);font-size:17px;font-weight:500;letter-spacing:-.005em;line-height:1.1}
.crew .teamname .nm em{font-style:italic;color:var(--brand)}
.crew .teamname .mt{font-family:var(--f-m);font-size:9px;color:var(--i3);letter-spacing:.08em;text-transform:uppercase;margin-top:2px;font-weight:600}
.crew .slots{padding:14px 18px;flex:1;display:flex;flex-direction:column;gap:8px}
.slot{background:var(--s1);border:1px dashed var(--line);border-radius:var(--r-m);padding:12px 14px;min-height:72px;display:flex;align-items:center;gap:12px;position:relative}
.slot.empty{background:transparent;border:1.5px dashed var(--line-soft)}
.slot.empty .lbl{color:var(--i4);font-family:var(--f-m);font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.slot.next{border:1.5px dashed var(--brand-hi);background:rgb(from var(--brand-hi) r g b / .06)}
.slot.next .lbl{color:var(--brand-hi)}
.slot.filled{border:1px solid var(--line);background:linear-gradient(120deg,var(--s1),var(--s2))}
.slot .av{width:40px;height:40px;border-radius:8px;background:linear-gradient(135deg,var(--b1,var(--brand)),var(--b2,var(--brand-hi)));display:flex;align-items:center;justify-content:center;font-family:var(--f-d);font-weight:700;color:#fff;font-size:14px}
.slot .meta b{font-family:var(--f-b);font-weight:700;font-size:13px;display:block;line-height:1.2}
.slot .meta .sub{font-family:var(--f-m);font-size:10px;color:var(--i3);letter-spacing:.02em;margin-top:2px}
.slot .badge{position:absolute;top:-6px;right:10px;font-family:var(--f-m);font-size:8.5px;padding:2px 7px;border-radius:var(--r-p);background:var(--brand);color:var(--brand-ink);letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.slot.cap{border-color:var(--brand-hi)}
.slot.cap .badge{background:var(--brand-hi);color:#1a0f05}
.crew .foot{padding:14px 18px;border-top:1px solid var(--line);background:var(--s1)}
.crew .foot .pr{font-family:var(--f-m);font-size:10px;color:var(--i3);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;display:flex;justify-content:space-between}
.crew .foot .pr b{color:var(--brand-hi);font-family:var(--f-d);font-size:18px;font-weight:600;letter-spacing:-.005em}
.crew .foot button{width:100%;padding:11px;border-radius:var(--r-s);background:var(--s2);border:1px solid var(--line);color:var(--i3);font-family:var(--f-b);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.crew .foot button.ready{background:var(--brand);color:var(--brand-ink);border-color:var(--brand);box-shadow:0 0 24px rgb(from var(--brand) r g b / .35)}

/* pick-made ticker */
.ticker{display:flex;gap:14px;padding:10px 24px;background:rgb(0 0 0 /.22);border-top:1px solid var(--line-soft);overflow:hidden;font-family:var(--f-m);font-size:11px;color:var(--i2);letter-spacing:.02em;align-items:center}
.ticker .tk{font-family:var(--f-m);font-size:9px;color:var(--brand-hi);letter-spacing:.14em;text-transform:uppercase;font-weight:700;white-space:nowrap}
.ticker .it{display:flex;gap:6px;align-items:baseline;white-space:nowrap}
.ticker .it b{font-family:var(--f-b);font-weight:700;color:var(--i1)}
.ticker .it em{color:var(--brand);font-style:normal;font-weight:700}
.ticker .it span{color:var(--i4)}

/* ── States ── */
.states{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
.mini{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.mini .mh{padding:14px 16px;background:var(--s2);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline}
.mini .mh b{font-family:var(--f-b);font-weight:700;font-size:12px;letter-spacing:.02em}
.mini .mh span{font-family:var(--f-m);font-size:9px;color:var(--i3);letter-spacing:.1em;text-transform:uppercase}
.mini .mb{padding:20px 18px;min-height:260px;display:flex;flex-direction:column;gap:14px;justify-content:center;align-items:center}
.mini .mb.pre{justify-content:flex-start;align-items:stretch}
.mini .mb p{color:var(--i2);font-size:12.5px;line-height:1.5;text-wrap:pretty;text-align:center}
.mini .mb h5{font-family:var(--f-d);font-weight:500;font-size:18px;letter-spacing:-.005em;text-align:center;line-height:1.2}
.mini .mb h5 em{font-style:italic;color:var(--brand)}

.big-ct{font-family:var(--f-d);font-size:56px;font-weight:600;letter-spacing:-.02em;color:var(--brand);line-height:1;text-align:center}
.big-ct small{font-family:var(--f-m);font-size:11px;color:var(--i3);letter-spacing:.1em;display:block;margin-top:4px;font-weight:600;text-transform:uppercase}
.pre-list{display:flex;flex-direction:column;gap:6px}
.pre-list .rw{display:flex;justify-content:space-between;padding:6px 10px;background:var(--s0);border:1px solid var(--line-soft);border-radius:var(--r-s);font-family:var(--f-m);font-size:11px;color:var(--i2);letter-spacing:.02em}
.pre-list .rw b{color:var(--i1);font-family:var(--f-b);font-weight:700}
.pre-list .rw.me{background:rgb(from var(--brand) r g b /.1);border-color:var(--brand)}

.lock-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
.lock-grid .lc{aspect-ratio:1;border-radius:8px;background:linear-gradient(135deg,var(--b1,var(--brand)),var(--b2,var(--brand-hi)));display:flex;align-items:center;justify-content:center;font-family:var(--f-d);font-weight:700;color:#fff;font-size:16px;letter-spacing:-.005em;position:relative;overflow:hidden}
.lock-grid .lc::after{content:"✓";position:absolute;top:4px;right:6px;font-family:var(--f-b);font-size:10px;color:#fff;opacity:.7}
.lock-grid .lc.cap{background:linear-gradient(135deg,var(--brand-hi),var(--brand));box-shadow:0 0 16px rgb(from var(--brand-hi) r g b /.5)}
.lock-grid .lc.cap::after{content:"★";color:#ffd066;font-size:12px;opacity:1}

/* ── Scoring panel ── */
.scor{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
.sc-card{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-l);padding:20px 24px}
.sc-card h4{font-family:var(--f-d);font-weight:500;font-size:18px;letter-spacing:-.005em;margin-bottom:10px;display:flex;align-items:baseline;gap:10px}
.sc-card h4 .tg{font-family:var(--f-m);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);font-weight:700}
.sc-card p{color:var(--i2);font-size:13px;line-height:1.55;margin-bottom:14px}
.sc-card p code{font-family:var(--f-m);font-size:.9em;color:var(--brand)}
.eq{background:var(--s0);border:1px solid var(--line);border-radius:var(--r-s);padding:14px 16px;font-family:var(--f-m);font-size:12px;color:var(--i2);line-height:1.9;letter-spacing:.02em}
.eq .r{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line-soft);padding:4px 0}
.eq .r:last-child{border-bottom:none;padding-top:10px;margin-top:6px;border-top:1.5px solid var(--brand);color:var(--brand-hi);font-weight:700;font-size:13px}
.eq .r span{color:var(--i3)}
.eq .r b{color:var(--i1);font-family:var(--f-m);font-weight:700}

.tm-card{background:var(--s0);border:1px solid var(--line);border-radius:var(--r-s);padding:12px 14px;margin-top:10px}
.tm-card .tr{display:flex;justify-content:space-between;padding:5px 0;font-family:var(--f-m);font-size:11px;color:var(--i2);letter-spacing:.02em;border-bottom:1px solid var(--line-soft)}
.tm-card .tr:last-child{border-bottom:none;padding-top:8px;margin-top:4px;border-top:1px solid var(--brand)}
.tm-card .tr b{color:var(--i1);font-family:var(--f-m);font-weight:700}
.tm-card .tr.tot b{color:var(--brand);font-size:14px}

/* ── Theme re-skin ── */
.tx-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:8px}
.tx{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-l);padding:18px 18px 16px;position:relative;overflow:hidden}
.tx::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgb(from var(--tc) r g b /.2),transparent 60%);pointer-events:none}
.tx > *{position:relative}
.tx .tg{font-family:var(--f-m);font-size:10px;letter-spacing:.12em;color:var(--tc);text-transform:uppercase;font-weight:700;margin-bottom:6px}
.tx h5{font-family:var(--f-d);font-weight:500;font-size:17px;letter-spacing:-.005em;margin-bottom:4px}
.tx p{font-family:var(--f-m);font-size:10.5px;color:var(--i3);line-height:1.55;letter-spacing:.02em;margin-bottom:10px}
.tx ul{list-style:none;font-family:var(--f-m);font-size:10.5px;color:var(--i2);line-height:1.8;letter-spacing:.02em}
.tx ul li::before{content:"▸ ";color:var(--tc)}
.tx ul li b{color:var(--i1);font-family:var(--f-b);font-weight:700}

/* ── Tweak panel ── */
.tweak{position:fixed;right:20px;bottom:20px;background:var(--s1);border:1px solid var(--line);border-radius:var(--r-l);padding:14px;box-shadow:0 18px 40px rgb(0 0 0/.4);display:none;z-index:9000;width:280px}
.tweak h5{font-family:var(--f-b);font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--i3);margin:0 0 8px}
.tweak h5+h5{margin-top:12px}
.tweak .row{display:flex;gap:6px;flex-wrap:wrap}
.tweak button{background:var(--s2);border:1px solid var(--line);color:var(--i2);padding:6px 10px;border-radius:var(--r-s);font-family:var(--f-m);font-size:10px;letter-spacing:.04em;cursor:pointer;flex:1 1 auto;text-transform:uppercase}
.tweak button.active{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}

/* ── Animations ── */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

.draft-pick-entry{
  position:relative;
  overflow:hidden;
  border:1px solid color-mix(in oklch, var(--line) 80%, transparent);
  background:color-mix(in oklch, var(--surface-raised, var(--s1)) 78%, transparent);
}
.draft-pick-entry::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:linear-gradient(110deg,transparent 0%,color-mix(in oklch, var(--accent, var(--brand)) 32%, white 68%) 48%,transparent 100%);
  opacity:0;
  pointer-events:none;
}

.draft-new-member{
  position:relative;
  border-color:color-mix(in oklch, var(--accent, var(--brand)) 44%, white 56%) !important;
  box-shadow:0 0 0 1px color-mix(in oklch, var(--accent, var(--brand)) 20%, transparent);
}

.draft-timer-urgent{
  padding:12px 14px;
  border-radius:18px;
  background:linear-gradient(180deg,color-mix(in oklch, var(--danger) 10%, transparent),transparent);
  border:1px solid color-mix(in oklch, var(--danger) 34%, var(--line));
}

.draft-your-turn{
  position:relative;
  transform-origin:center top;
}

.draft-player-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.draft-player-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,transparent 22%,color-mix(in oklch, var(--accent, var(--brand)) 18%, white 82%) 40%,transparent 58%);
  background-size:220% 100%;
  background-position:-180% 0;
  opacity:0;
  pointer-events:none;
  z-index:0;
}
.draft-player-card > *{
  position:relative;
  z-index:1;
}

.draft-confetti{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:80;
}
.draft-confetti-piece{
  position:absolute;
  top:-14vh;
  width:10px;
  height:22px;
  border-radius:999px;
  opacity:0;
  filter:drop-shadow(0 0 10px color-mix(in oklch, var(--accent, var(--brand)) 30%, transparent));
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes draft-slide-in{
    0%{transform:translateX(-24px) scale(.98);opacity:0}
    70%{transform:translateX(3px) scale(1.01);opacity:1}
    100%{transform:translateX(0) scale(1);opacity:1}
  }

  @keyframes draft-entry-glow{
    0%{opacity:0}
    35%{opacity:.95}
    100%{opacity:0}
  }

  @keyframes draft-member-flash{
    0%{box-shadow:0 0 0 0 color-mix(in oklch, var(--accent, var(--brand)) 0%, transparent),0 0 0 1px color-mix(in oklch, var(--accent, var(--brand)) 0%, transparent)}
    35%{box-shadow:0 0 0 1px color-mix(in oklch, var(--accent, var(--brand)) 40%, transparent),0 0 32px color-mix(in oklch, var(--accent, var(--brand)) 34%, transparent)}
    100%{box-shadow:0 0 0 1px color-mix(in oklch, var(--accent, var(--brand)) 0%, transparent),0 0 0 color-mix(in oklch, var(--accent, var(--brand)) 0%, transparent)}
  }

  @keyframes draft-urgent-pulse{
    0%,100%{box-shadow:0 0 0 0 color-mix(in oklch, var(--danger) 0%, transparent);transform:scale(1)}
    50%{box-shadow:0 0 30px color-mix(in oklch, var(--danger) 28%, transparent);transform:scale(1.01)}
  }

  @keyframes draft-turn-in{
    0%{transform:scale(.95);opacity:.72;filter:brightness(.94)}
    60%{transform:scale(1.015);opacity:1;filter:brightness(1.04)}
    100%{transform:scale(1);opacity:1;filter:brightness(1)}
  }

  .draft-pick-entry.is-new{
    animation:draft-slide-in .4s ease-out both;
  }
  .draft-pick-entry.is-new::after{
    animation:draft-entry-glow .55s ease-out both;
  }

  .draft-new-member{
    animation:scale-in .28s ease-out, draft-member-flash 1.1s ease-out both;
  }

  .draft-timer-urgent{
    animation:draft-urgent-pulse .9s ease-in-out infinite;
  }

  .draft-your-turn{
    animation:draft-turn-in .45s cubic-bezier(.22,1,.36,1) both;
  }

  .draft-player-card{
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .draft-player-card:hover,
  .draft-player-card:focus-visible{
    transform:translateY(-2px) scale(1.02);
    box-shadow:0 18px 40px rgba(0,0,0,.28),0 0 0 1px color-mix(in oklch, var(--accent, var(--brand)) 38%, transparent);
    border-color:color-mix(in oklch, var(--accent, var(--brand)) 72%, white 28%) !important;
  }
  .draft-player-card:hover::before,
  .draft-player-card:focus-visible::before{
    opacity:1;
    animation:shimmer 1.1s linear 1;
  }

  .draft-confetti-piece{
    animation:confetti-fall 2.6s linear forwards;
  }
}

/* ─── Mobile / phone draft layout ─────────────────────────────────────── */
/* Inline styles in screens.jsx set grid-template-columns; we override with
   !important inside the media query so phones don't horizontal-scroll. */
@media (max-width: 720px) {
  /* The .lobby container ships with `height: 100%; overflow: hidden;` which
     clips the tall draft block on mobile. Allow page-level scroll instead. */
  .screen .lobby {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    /* Extra bottom padding so the last player card isn't hidden behind
       iOS Safari's bottom toolbar / home-indicator area. */
    padding: 24px 16px calc(48px + env(safe-area-inset-bottom)) !important;
    grid-template-rows: auto !important;
    display: block !important;
  }
  .draft-board-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .draft-available-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    /* IMPORTANT: no internal scroll on mobile. iOS Safari nested-scroll is
       unreliable (touch swipes get trapped, momentum dies). Let the outer
       .screen-inner scroll the whole page instead. */
    max-height: none !important;
    overflow: visible !important;
  }
  .draft-bottom-split {
    grid-template-columns: 1fr !important;
  }
  .draft-hero-title {
    font-size: 22px !important;
  }
  .draft-timer-block {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  .draft-header-row {
    gap: 12px !important;
  }
  .draft-on-clock-pill {
    width: 100%;
    justify-content: flex-start;
  }
}
@media (max-width: 480px) {
  .draft-board-grid {
    grid-template-columns: 1fr !important;
  }
  .draft-hero-title {
    font-size: 19px !important;
  }
}