/* ============================================================
   PSIA — CAPTAIN AUCTION ROOM (draft.css)
   ------------------------------------------------------------
   "Dark stadium. Neon lines." — the design of the club's own
   psia-draft app, brought onto the members' site so the auction
   looks and reads the same in both places. Tokens, type scale and
   motion are its tokens.css and index.css, not an impression of
   them: #080808 turf, #00FF87 under floodlights, Barlow Condensed
   for every number that matters.

   SCOPED, AND DELIBERATELY SINGLE-THEME. Everything lives under
   #dftRoot.dft-room and paints its own ground, so the auction is
   the same black room whether the member has the site in light or
   dark. That is a choice: the room is a broadcast surface read
   across a table, and a light version of it would be a different
   product. Nothing here leaks out — every selector is scoped, so
   the rest of the site keeps its own theme untouched.

   SIDE COLOURS ARE THE CLUB'S KITS, not psia-draft's orange/blue/
   teal/violet. That app names its teams after cities and has no
   kit to draw on; ours are Merah, Biru, Hijau and Putih, and the
   colour a captain sees here is the bib he will actually wear.
   The four below are only the fallback when a side has no kit.
   ============================================================ */

#dftRoot.dft-room{
  --bg-base:#080808; --bg-surface:#111111; --bg-elevated:#1A1A1A; --bg-subtle:#222222;
  --accent:#00FF87; --accent-dim:rgba(0,255,135,.12); --accent-border:rgba(0,255,135,.35);
  --warn:#FFB800; --danger:#FF3B3B; --info:#3B82F6;
  --t-primary:#FFFFFF; --t-secondary:#888888; --t-dim:#444444;
  --bd:rgba(255,255,255,.07); --bd-strong:rgba(255,255,255,.15);
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-pill:999px;
  --shadow-card:0 1px 0 rgba(255,255,255,.07), 0 4px 24px rgba(0,0,0,.4);
  --glow:0 0 0 1px var(--accent-border), 0 0 20px rgba(0,255,135,.2);
  --fd:'Barlow Condensed','Arial Narrow',sans-serif;
  --fb:'DM Sans',system-ui,-apple-system,sans-serif;
  --k1:#FF7A1A; --k2:#2D9CFF; --k3:#19E3CF; --k4:#C77DFF;

  background:var(--bg-base);color:var(--t-primary);font-family:var(--fb);
  display:block;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--bd);
}
#dftRoot.dft-room *{box-sizing:border-box}
#dftRoot.dft-room h1,#dftRoot.dft-room h2,#dftRoot.dft-room h3{margin:0;color:var(--t-primary)}
#dftRoot.dft-room button{font-family:var(--fb);cursor:pointer}
#dftRoot.dft-room button:disabled{cursor:not-allowed}
#dftRoot.dft-room .num{font-family:var(--fd);font-variant-numeric:tabular-nums;font-weight:700}
#dftRoot.dft-room .lbl{font-family:var(--fb);font-weight:700;font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--t-secondary)}

/* ---- motion (≤200ms, per the spec) ---- */
@keyframes dftFlash{0%{color:#fff;text-shadow:0 0 18px rgba(0,255,135,.85)}100%{color:var(--accent);text-shadow:none}}
@keyframes dftSlideIn{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}
@keyframes dftPulse{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){
  #dftRoot.dft-room *,#dftRoot.dft-room *::before,#dftRoot.dft-room *::after{
    animation:none !important;transition:none !important}
}

/* ---- phase header (sticky) ---- */
.dft-phase{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;
  flex-wrap:wrap;padding:10px 16px;background:rgba(8,8,8,.94);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--bd);font-family:var(--fd);font-weight:700;
  font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--t-primary)}
.dft-phase .sep{color:var(--t-dim)}
.dft-phase .nom{color:var(--accent)}
.dft-phase .grow{flex:1}
.dft-phase .live{font-family:var(--fb);font-size:9px;letter-spacing:.16em;font-weight:700;
  color:var(--accent);display:inline-flex;align-items:center;gap:5px}
.dft-phase .live i{width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 7px var(--accent);animation:dftPulse 2s infinite}
.dft-phase .live.off{color:var(--t-dim)}
.dft-phase .live.off i{background:var(--t-dim);box-shadow:none;animation:none}
.dft-paused{background:rgba(255,184,0,.14);border-bottom:1px solid rgba(255,184,0,.4);
  color:var(--warn);font-family:var(--fd);font-weight:700;font-size:15px;letter-spacing:.1em;
  text-transform:uppercase;text-align:center;padding:9px 16px;animation:dftPulse 2s infinite}

/* ---- my strip (captain) ---- */
.dft-me{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 16px;
  border-bottom:1px solid var(--bd);background:var(--bg-surface)}
.dft-me-nm{font-family:var(--fd);font-weight:700;font-size:20px;letter-spacing:-.01em;
  text-transform:uppercase;display:flex;align-items:center;gap:9px}
.dft-me-fig{display:flex;gap:18px;margin-left:auto;flex-wrap:wrap}
.dft-me-fig div{display:flex;flex-direction:column;gap:1px}
.dft-me-fig .v{font-family:var(--fd);font-weight:700;font-size:19px;line-height:1;
  font-variant-numeric:tabular-nums}
.dft-me-fig .v.acc{color:var(--accent)}

/* ---- scarcity ---- */
.dft-scarcity{margin:12px 16px 0;padding:9px 13px;border-radius:var(--r-md);
  background:rgba(255,184,0,.12);border:1px solid rgba(255,184,0,.4);color:var(--warn);
  font-size:13px;line-height:1.5}
.dft-scarcity b{color:#fff}

/* ---- layout: one column on a phone, three for the operator on desktop ---- */
.dft-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:14px 16px 18px}
.dft-cols.ops{grid-template-columns:minmax(0,1fr)}
@media(min-width:1000px){
  .dft-cols.ops{grid-template-columns:250px minmax(0,1fr) 300px;align-items:start}
  .dft-cols.ops .col-pool{grid-column:1}
  .dft-cols.ops .col-bid{grid-column:2}
  .dft-cols.ops .col-caps{grid-column:3}
}
.col{display:flex;flex-direction:column;gap:14px;min-width:0}

/* ---- bid area ---- */
.dft-bid{background:var(--bg-surface);border:1px solid var(--bd);border-radius:var(--r-lg);
  padding:18px 16px;box-shadow:var(--shadow-card)}
.dft-bid-empty{display:flex;align-items:center;justify-content:center;min-height:150px;
  font-family:var(--fd);font-size:16px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t-secondary);text-align:center;animation:dftPulse 2.4s infinite}
.dft-bid-empty b{color:var(--accent);font-weight:700}
.dft-player{text-align:center;margin-bottom:14px}
.dft-player h3{font-family:var(--fd);font-weight:800;letter-spacing:-.01em;text-transform:uppercase;
  font-size:clamp(30px,7vw,46px);line-height:1;color:var(--accent);
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.dft-player .sub{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t-secondary);margin-top:7px}
.dft-keeper{font-family:var(--fb);font-weight:700;font-size:10px;letter-spacing:.14em;
  color:var(--warn);border:1px solid rgba(255,184,0,.45);background:rgba(255,184,0,.12);
  border-radius:var(--r-sm);padding:3px 7px;vertical-align:middle}
.dft-cur{display:flex;flex-direction:column;align-items:center;gap:5px;padding:20px 12px;
  background:rgba(0,0,0,.45);border:1px solid var(--bd);border-radius:var(--r-md)}
.dft-cur .amt{font-family:var(--fd);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(52px,14vw,86px);line-height:.92;color:var(--accent);
  font-variant-numeric:tabular-nums}
.dft-cur .amt.flash{animation:dftFlash .15s ease-out}
.dft-cur .holder{font-family:var(--fd);font-weight:700;font-size:17px;letter-spacing:.04em;
  text-transform:uppercase;color:#fff;background:rgba(255,255,255,.06);
  border:1px solid var(--bd-strong);border-radius:var(--r-pill);padding:3px 13px}
.dft-waiting{text-align:center;margin-top:14px;font-family:var(--fd);font-weight:700;
  font-size:16px;letter-spacing:.12em;text-transform:uppercase;color:var(--warn)}

/* ---- turn timer ---- */
.dft-timer{display:block;margin:8px auto 0;width:max-content;font-family:var(--fd);
  font-weight:700;font-size:26px;line-height:1;font-variant-numeric:tabular-nums;
  color:var(--t-primary);border:1px solid var(--bd-strong);border-radius:var(--r-md);
  padding:5px 14px}
.dft-timer.low{color:var(--warn);border-color:rgba(255,184,0,.5);animation:dftPulse 1s infinite}
.dft-timer.out{color:var(--danger);border-color:rgba(255,59,59,.5)}
.dft-timer.none{font-family:var(--fb);font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--t-dim);border-color:var(--bd)}

/* ---- turn prompt + controls ---- */
.dft-prompt{text-align:center;margin:16px 0 12px}
.dft-prompt .yours{font-family:var(--fd);font-weight:800;font-size:30px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);text-shadow:0 0 12px rgba(0,255,135,.5);
  animation:dftSlideIn .2s ease-out}
.dft-prompt .other{font-family:var(--fd);font-size:17px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--t-secondary)}
.dft-prompt .other b{color:var(--accent);font-weight:700}
.dft-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.dft-btn{min-height:52px;border-radius:var(--r-md);border:1px solid var(--bd-strong);
  background:transparent;color:var(--t-primary);font-family:var(--fd);font-weight:700;
  font-size:19px;letter-spacing:.05em;text-transform:uppercase;padding:8px 12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  transition:border-color .15s,background .15s}
.dft-btn small{font-family:var(--fb);font-weight:500;font-size:10px;letter-spacing:.1em;
  color:var(--t-secondary);text-transform:uppercase}
.dft-btn:hover:not(:disabled){border-color:var(--bd-strong);background:rgba(255,255,255,.04)}
.dft-btn:disabled{opacity:.4}
.dft-btn.go{border-color:var(--accent-border);background:var(--accent-dim);color:var(--accent)}
.dft-btn.go:hover:not(:disabled){background:rgba(0,255,135,.2);box-shadow:var(--glow)}
.dft-btn.wide{grid-column:1/-1}
.dft-btn.warn{border-color:rgba(255,184,0,.45);color:var(--warn)}
.dft-btn.danger{border-color:rgba(255,59,59,.4);color:var(--danger)}
.dft-blocked{grid-column:1;min-height:52px;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:8px 12px;border-radius:var(--r-md);
  border:1px solid rgba(255,59,59,.4);background:rgba(255,59,59,.1);color:var(--danger);
  font-family:var(--fd);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 0 0 1px rgba(255,59,59,.15)}
.dft-blocked.budget{border-color:var(--bd-strong);background:rgba(255,255,255,.04);
  color:var(--t-secondary);box-shadow:none}

/* ---- bid log ---- */
.dft-log{margin-top:14px;border-top:1px solid var(--bd);padding-top:10px;
  display:flex;flex-direction:column;gap:2px}
.dft-logrow{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:10px;
  align-items:center;padding:4px 0;font-size:12.5px;color:var(--t-secondary)}
.dft-logrow .a{font-family:var(--fd);font-weight:700;font-size:16px;color:#fff;
  font-variant-numeric:tabular-nums}
.dft-logrow .t{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-dim)}
.dft-logrow.new .a{animation:dftFlash .15s ease-out}

/* ---- captain cards ---- */
.dft-caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.dft-cols.ops .col-caps .dft-caps{grid-template-columns:minmax(0,1fr)}
.dft-cap{border:1px solid var(--bd);border-radius:var(--r-lg);overflow:hidden;
  background:var(--bg-surface);transition:border-color .2s,box-shadow .2s}
.dft-cap.leading{border-color:var(--accent-border);box-shadow:0 0 16px rgba(0,255,135,.16)}
.dft-cap.mine{border-color:var(--bd-strong)}
.dft-cap-h{position:relative;padding:14px 14px 13px;
  background:linear-gradient(180deg,#0c0c0c,#060606);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.dft-cap-stripe{position:absolute;top:0;left:0;right:0;height:3px}
.dft-cap-ph{position:absolute;top:3px;right:0;background:var(--warn);color:#241900;
  font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 7px;border-radius:0 0 0 var(--r-md)}
.dft-cap-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:11px}
.dft-cap-nm{display:flex;align-items:center;gap:9px;min-width:0}
.dft-cap-nm h3{font-family:var(--fd);font-weight:700;font-size:19px;letter-spacing:-.01em;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dft-dot{width:10px;height:10px;border-radius:2px;flex-shrink:0}
.dft-on{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
  font-size:8px;font-weight:700;letter-spacing:.16em;color:var(--accent)}
.dft-on i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent)}
.dft-on.off{color:rgba(136,136,136,.6)}
.dft-on.off i{background:#444;box-shadow:none}
.dft-cap-figs{display:flex;align-items:stretch;gap:12px}
.dft-cap-figs > div{flex:1}
.dft-cap-figs > div + div{border-left:1px solid rgba(255,255,255,.1);padding-left:12px}
.dft-cap-figs .v{font-family:var(--fd);font-weight:700;font-size:27px;line-height:1;
  font-variant-numeric:tabular-nums;margin-top:2px}
.dft-cap-figs .v.acc{color:var(--accent);text-shadow:0 0 14px rgba(0,255,135,.25)}
.dft-pips{margin-top:13px}
.dft-pips-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.dft-pips-h .n{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;
  color:var(--t-secondary);font-variant-numeric:tabular-nums}
.dft-pips-bar{display:flex;gap:2px}
.dft-pip{flex:1;height:3px;border-radius:1px;background:rgba(255,255,255,.08)}
.dft-cap-squad{background:var(--bg-elevated)}
.dft-cap-squad summary{list-style:none;cursor:pointer;padding:11px 14px;display:flex;
  justify-content:space-between;align-items:center;font-size:9px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--t-secondary)}
.dft-cap-squad summary::-webkit-details-marker{display:none}
.dft-cap-squad summary:hover{color:#fff}
.dft-cap-list{padding:0 14px 12px;display:flex;flex-direction:column;gap:1px}
.dft-cap-row{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:8px;
  align-items:center;padding:5px 0;font-size:13px;border-top:1px solid rgba(255,255,255,.04)}
.dft-cap-row:first-child{border-top:0}
.dft-cap-row .p{font-size:9px;letter-spacing:.08em;color:var(--t-dim)}
.dft-cap-row .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dft-cap-row .pr{font-family:var(--fd);font-weight:700;font-size:15px;color:var(--accent);
  font-variant-numeric:tabular-nums}
.dft-cap-row .pr.free{color:var(--t-dim)}

/* ---- player pool ---- */
.dft-pool{background:var(--bg-surface);border:1px solid var(--bd);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-card);display:flex;flex-direction:column}
.dft-pool-h{padding:12px 14px 10px;border-bottom:1px solid var(--bd);display:flex;
  justify-content:space-between;align-items:center;gap:10px}
.dft-pool-tools{padding:10px 14px;display:flex;gap:8px;border-bottom:1px solid var(--bd)}
.dft-in{flex:1;min-width:0;background:var(--bg-base);border:1px solid var(--bd-strong);
  border-radius:var(--r-md);padding:9px 11px;color:#fff;font-family:var(--fb);font-size:14px}
.dft-in::placeholder{color:var(--t-dim)}
.dft-in:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.dft-filter{display:flex;gap:4px;flex-shrink:0}
.dft-fbtn{padding:0 11px;min-height:38px;border-radius:var(--r-md);border:1px solid var(--bd-strong);
  background:transparent;color:var(--t-secondary);font-family:var(--fd);font-weight:700;
  font-size:14px;letter-spacing:.06em}
.dft-fbtn.on{border-color:var(--accent-border);background:var(--accent-dim);color:var(--accent)}
.dft-pool-list{max-height:min(52vh,440px);overflow-y:auto;padding:6px}
.dft-pl{width:100%;display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:9px;
  align-items:center;min-height:44px;padding:6px 9px;border-radius:var(--r-md);
  border:1px solid transparent;background:transparent;color:#fff;text-align:left;font-size:14px}
.dft-pl .p{font-family:var(--fd);font-weight:700;font-size:13px;color:var(--t-secondary)}
.dft-pl .k{font-size:12px}
.dft-pl:hover:not(:disabled){background:rgba(255,255,255,.05);border-color:var(--bd-strong)}
.dft-pl.sel{border-color:var(--accent-border);background:var(--accent-dim)}
.dft-pl:disabled{cursor:default}
.dft-pool-empty{padding:22px 12px;text-align:center;color:var(--t-dim);font-size:13px}

/* ---- nominate bar ---- */
.dft-nom{display:flex;gap:8px;align-items:stretch;padding:12px 14px;border-top:1px solid var(--bd);
  background:var(--bg-elevated);flex-wrap:wrap}
.dft-nom .dft-in{flex:0 0 96px}
.dft-nom .dft-btn{flex:1;min-width:150px;min-height:44px;font-size:16px}

/* ---- final squads ---- */
.dft-final{padding:18px 16px}
.dft-final-h{text-align:center;margin-bottom:18px}
.dft-final-h h2{font-family:var(--fd);font-weight:800;font-size:clamp(28px,6vw,42px);
  letter-spacing:.04em;text-transform:uppercase;color:var(--accent);
  text-shadow:0 0 18px rgba(0,255,135,.35)}
.dft-final-h p{margin:6px 0 0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t-secondary)}
.dft-final-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.dft-final-col{border:1px solid var(--bd);border-radius:var(--r-lg);overflow:hidden;
  background:var(--bg-surface)}
.dft-final-top{padding:12px 14px;border-bottom:1px solid var(--bd);position:relative}
.dft-final-top .stripe{position:absolute;top:0;left:0;right:0;height:3px}
.dft-final-top h3{font-family:var(--fd);font-weight:700;font-size:20px;letter-spacing:-.01em;
  text-transform:uppercase;margin-top:4px}
.dft-final-top .spent{font-family:var(--fd);font-weight:700;font-size:25px;color:var(--accent);
  font-variant-numeric:tabular-nums;line-height:1.1}
.dft-highs{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.dft-high{display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding:11px 14px;
  border-radius:var(--r-md);border:1px solid var(--bd);background:var(--bg-surface);font-size:14px}
.dft-high .ic{font-size:16px}
.dft-high .tt{font-family:var(--fb);font-weight:700;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--warn)}
.dft-high.steal .tt{color:var(--accent)}
.dft-high .nm{font-family:var(--fd);font-weight:700;font-size:18px;text-transform:uppercase}
.dft-high .v{font-family:var(--fd);font-weight:700;font-size:18px;color:var(--accent);
  margin-left:auto;font-variant-numeric:tabular-nums}

/* ---- setup / release (kept plain, same room) ---- */
.dft-panel{background:var(--bg-surface);border:1px solid var(--bd);border-radius:var(--r-lg);
  padding:16px;box-shadow:var(--shadow-card)}
.dft-panel + .dft-panel{margin-top:14px}
.dft-panel.dim{opacity:.5}
.dft-steph{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.dft-stepn{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  font-family:var(--fd);font-weight:700;font-size:13px;color:var(--bg-base);background:var(--accent)}
.dft-steph.done .dft-stepn{background:rgba(0,255,135,.2);color:var(--accent)}
.dft-steph h3{font-family:var(--fd);font-weight:700;font-size:19px;letter-spacing:-.01em;
  text-transform:uppercase}
.dft-steph .hint{margin-left:auto;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--t-dim)}
.dft-note{font-size:13.5px;line-height:1.55;color:var(--t-secondary);margin:0 0 12px}
.dft-note b{color:#fff}
.dft-list{max-height:300px;overflow-y:auto;border:1px solid var(--bd);border-radius:var(--r-md);
  padding:5px;background:var(--bg-base);display:flex;flex-direction:column;gap:2px}
.dft-tick{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 10px;
  border-radius:var(--r-sm);cursor:pointer;font-size:14px}
.dft-tick:hover{background:rgba(255,255,255,.04)}
.dft-tick.on{background:var(--accent-dim)}
.dft-tick input{accent-color:var(--accent);width:16px;height:16px;flex-shrink:0}
.dft-tick .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dft-tick .p{font-family:var(--fd);font-weight:700;font-size:13px;color:var(--t-secondary)}
.dft-tick .tag{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-dim);
  border:1px solid var(--bd);border-radius:var(--r-sm);padding:2px 5px}
.dft-tick .tag.up{color:var(--accent);border-color:var(--accent-border)}
.dft-bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:11px 0}
.dft-grow{flex:1}
.dft-count{font-family:var(--fd);font-weight:700;font-size:16px;color:var(--t-secondary)}
.dft-count.over{color:var(--danger)}
.dft-sm{min-height:38px;padding:0 12px;font-size:14px}
.dft-sides{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.dft-side-set{display:flex;flex-direction:column;gap:7px;padding:11px;border:1px solid var(--bd);
  border-radius:var(--r-md);background:var(--bg-base)}
.dft-side-set .hd{display:flex;align-items:center;gap:8px;font-family:var(--fd);font-weight:700;
  font-size:15px;text-transform:uppercase}
.dft-x{width:22px;height:22px;border-radius:var(--r-sm);border:1px solid var(--bd-strong);
  background:transparent;color:var(--t-secondary);font-size:11px;padding:0;margin-left:auto}
.dft-x:hover{color:var(--danger);border-color:rgba(255,59,59,.4)}
.dft-cfg{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:9px;margin-top:12px}
.dft-cfg label{display:flex;flex-direction:column;gap:5px}
.dft-msg{margin:12px 16px 0;padding:10px 13px;border-radius:var(--r-md);font-size:13.5px}
.dft-msg.ok{background:var(--accent-dim);border:1px solid var(--accent-border);color:var(--accent)}
.dft-msg.err{background:rgba(255,59,59,.1);border:1px solid rgba(255,59,59,.4);color:var(--danger)}
.dft-empty{padding:26px 14px;text-align:center;color:var(--t-dim);font-size:13.5px;line-height:1.6}
.dft-gate{padding:40px 22px;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:14px}
.dft-gate p{color:var(--t-secondary);font-size:14px;max-width:44ch;margin:0;line-height:1.6}
.dft-pick{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--bd);
  font-size:12px;color:var(--t-secondary)}
.dft-pick select{flex:1;background:var(--bg-base);border:1px solid var(--bd-strong);
  border-radius:var(--r-md);padding:9px 11px;color:#fff;font-family:var(--fb);font-size:14px}

#dftRoot.dft-room :focus-visible{outline:2px solid var(--accent);outline-offset:2px}

@media(max-width:600px){
  .dft-cols{padding:12px}
  .dft-me{gap:10px}
  .dft-me-fig{gap:14px}
  .dft-acts{gap:8px}
  .dft-caps{grid-template-columns:minmax(0,1fr)}
}

/* ---- bid graph (psia-draft spectator/BidGraph) ---------------------
   The shape of the bidding on the current lot. Inline SVG: one path, a few
   dots, redrawn inside a repaint that already happens on every bid — a chart
   library would cost more than the rest of the page. The dots are DOM
   elements over the SVG rather than <circle>s, because preserveAspectRatio
   ="none" stretches the viewBox and would turn every circle into an ellipse. */
.dft-graph{margin-top:14px;border-top:1px solid var(--bd);padding-top:11px}
.dft-graph-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
.dft-graph-n{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;
  color:var(--t-secondary)}
.dft-graph-box{position:relative;height:92px}
.dft-graph-box.empty{display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--bd-strong);border-radius:var(--r-md)}
.dft-graph-box.empty span{font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;color:var(--t-dim)}
.dft-graph-box svg{position:absolute;inset:0;overflow:visible}
.dft-grid{stroke:rgba(255,255,255,.05);stroke-width:1;vector-effect:non-scaling-stroke}
.dft-gline{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;
  stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 4px var(--accent))}
.dft-gdot{position:absolute;border-radius:50%;pointer-events:none}
.dft-gval{position:absolute;font-family:var(--fd);font-weight:700;font-size:14px;
  color:#fff;white-space:nowrap;background:rgba(8,8,8,.7);border-radius:var(--r-sm);
  padding:0 5px;font-variant-numeric:tabular-nums;pointer-events:none}
.dft-gopen{position:absolute;left:0;bottom:0;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:9px;color:var(--t-dim)}

/* ============================================================
   THE FORMAT PICKER (setup)
   Two big targets rather than a select: the choice shapes every
   screen after it, so it should look like a decision.
   ============================================================ */
.dft-fmtrow{display:flex;flex-direction:column;gap:7px;margin:2px 0 12px}
.dft-fmtrow>.lbl{display:block}
.dft-fmt{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dft-fmtbtn{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;
  padding:10px 12px;border-radius:var(--r-md);border:1px solid var(--bd-strong);
  background:var(--bg-elevated);color:var(--t-secondary);transition:border-color .15s,background .15s}
.dft-fmtbtn .t{font-family:var(--fd);font-weight:700;font-size:16px;letter-spacing:.03em;
  text-transform:uppercase;color:var(--t-primary)}
.dft-fmtbtn .d{font-size:11px;line-height:1.3;color:var(--t-secondary)}
.dft-fmtbtn.on{border-color:var(--accent);background:var(--accent-dim)}
.dft-fmtbtn.on .t{color:var(--accent)}
.dft-fmtbtn.sm .t{font-size:14px}

/* a pool row this side may not legally take */
.dft-pl.no{opacity:.4}
.dft-pl.no .p{text-decoration:line-through}
.dft-nom.one{grid-template-columns:1fr}

/* ============================================================
   PIECES BOTH ROOMS USE
   ============================================================ */
.dft-pos{display:inline-block;border:1px solid rgba(255,255,255,.10);border-radius:4px;
  background:rgba(255,255,255,.04);padding:1px 6px;font-family:var(--fb);font-weight:700;
  font-size:10px;letter-spacing:.08em;line-height:1.5}
.dft-pos.fill{border-width:1px}

/* the clock, as the scoreboard draws it */
.dft-clock{width:86px;flex:0 0 86px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;padding:8px 4px;background:rgba(0,0,0,.32);
  border-left:1px solid var(--bd)}
.dft-clock .lbl{font-size:8px}
.dft-clock b{font-family:var(--fd);font-weight:700;font-size:27px;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--accent);text-shadow:0 0 14px currentColor}
.dft-clock i{font-style:normal;font-family:var(--fb);font-weight:700;font-size:7px;
  letter-spacing:.11em;color:var(--accent)}
.dft-clock.warn b,.dft-clock.warn i{color:var(--warn)}
.dft-clock.danger b,.dft-clock.danger i{color:var(--danger)}
.dft-clock.none b{font-size:18px;color:var(--t-secondary);text-shadow:none}
.dft-clock.none i{color:var(--t-dim)}
.dft-clockbar{display:block;height:3px;background:rgba(255,255,255,.05)}
.dft-clockbar>i{display:block;height:100%;background:var(--accent);
  box-shadow:0 0 8px var(--accent);transition:width .3s linear}
.dft-clockbar.warn>i{background:var(--warn);box-shadow:0 0 8px var(--warn)}
.dft-clockbar.danger>i{background:var(--danger);box-shadow:0 0 8px var(--danger)}

/* the scoreboard — the price is the biggest thing on the screen */
.dft-sb{margin:10px 12px;border-radius:14px;overflow:hidden;border:1px solid var(--bd-strong);
  background:linear-gradient(180deg,#0f0f0f,#060606);box-shadow:0 8px 32px rgba(0,0,0,.4)}
.dft-sb.mine{border-color:var(--accent);box-shadow:0 0 24px rgba(0,255,135,.16)}
.dft-sb-row{display:flex;align-items:stretch}
.dft-sb-bid{flex:1;min-width:0;padding:11px 14px}
.dft-sb-bid .amt{font-family:var(--fd);font-weight:700;font-size:50px;line-height:.95;
  font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 0 24px rgba(255,255,255,.10)}
.dft-sb-bid .amt.sm{font-size:30px;text-transform:uppercase;letter-spacing:.03em}
.dft-sb-bid .amt.flash{animation:dftFlash .22s ease-out}
.dft-sb-bid .lead{display:flex;align-items:center;gap:8px;margin-top:7px;min-width:0}
.dft-sb-bid .lead .dot{width:9px;height:9px;border-radius:2px;flex:0 0 auto}
.dft-sb-bid .lead b{font-family:var(--fd);font-weight:700;font-size:17px;letter-spacing:.04em;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dft-sb-bid .lead .tag{font-family:var(--fb);font-weight:700;font-size:8px;letter-spacing:.12em;
  border-left:1px solid var(--bd-strong);padding-left:8px;color:var(--t-secondary);flex:0 0 auto}
.dft-sb-bid .lead .tag.me{color:var(--accent)}

/* the stage: floodlights and a hint of a pitch */
.dft-stage{position:relative;padding:18px 16px 16px;overflow:hidden;
  background:radial-gradient(80% 55% at 50% 0%,rgba(0,255,135,.08),transparent 60%),
             radial-gradient(120% 80% at 50% 120%,rgba(0,0,0,.6),transparent),var(--bg-base)}
.dft-stage.sm{padding:14px 16px 12px}
.dft-stage.big{min-height:250px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.dft-pitch{position:absolute;inset:0;opacity:.5;pointer-events:none}
.dft-pitch .l{position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.06)}
.dft-pitch .c{position:absolute;left:50%;top:42%;width:230px;height:230px;border-radius:50%;
  border:1px solid rgba(255,255,255,.06);transform:translate(-50%,-50%)}
.dft-pitch .s{position:absolute;left:50%;top:42%;width:5px;height:5px;border-radius:50%;
  background:rgba(255,255,255,.12);transform:translate(-50%,-50%)}
.dft-stage-in{position:relative;z-index:1;text-align:center;max-width:520px;margin:0 auto}
.dft-rise{animation:dftSlideIn .18s ease-out}
.dft-eyebrow{font-family:var(--fb);font-weight:700;font-size:9px;letter-spacing:.16em;
  color:var(--t-secondary);margin-bottom:14px}
.dft-ring{width:80px;height:80px;margin:0 auto 16px;border-radius:50%;
  border:2px dashed rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center}
.dft-ring>span{width:14px;height:14px;border-radius:3px}
.dft-face{width:84px;height:84px;margin:0 auto 13px;border-radius:18px;position:relative;
  display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:700;
  font-size:32px;color:var(--t-secondary);border:2px solid rgba(255,255,255,.15);
  background:linear-gradient(160deg,#262626,#101010);box-shadow:0 14px 44px rgba(0,0,0,.5)}
.dft-face .gk{position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--warn);
  border-radius:0 0 16px 16px}
.dft-bigname{font-family:var(--fd);font-weight:700;font-size:34px;line-height:1;
  letter-spacing:.03em;text-transform:uppercase}
.dft-substage{font-size:13px;color:var(--t-secondary);margin-top:8px}
.dft-nomby{display:flex;align-items:center;justify-content:center;gap:7px;margin-bottom:12px;
  font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--t-secondary)}
.dft-nomby .dot{width:6px;height:6px;border-radius:2px;flex:0 0 auto}
.dft-postags{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px}
.dft-keepword{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--warn)}
.dft-cue{display:inline-block;margin-top:16px;padding:8px 18px;border-radius:var(--r-md);
  background:var(--accent-dim);border:1px solid var(--accent-border);color:var(--accent);
  font-family:var(--fb);font-weight:700;font-size:11px;letter-spacing:.09em}
.dft-ft{font-family:var(--fd);font-weight:700;font-size:52px;line-height:1;letter-spacing:.04em;
  color:var(--accent)}
.dft-graph-wrap{max-width:520px;margin:0 auto;width:100%;position:relative;z-index:1}

/* ============================================================
   THE CAPTAIN'S ROOM — one column, thumb first
   ============================================================ */
.dft-cr{display:flex;flex-direction:column;min-height:60vh}
.dft-cr-top{display:flex;align-items:center;gap:10px;padding:0 14px;height:46px;flex:0 0 46px;
  border-bottom:1px solid var(--bd);background:var(--bg-base);position:sticky;top:0;z-index:6}
.dft-cr-top .side{display:flex;align-items:center;gap:8px;font-family:var(--fd);font-weight:700;
  font-size:16px;letter-spacing:.1em;text-transform:uppercase;flex:1;min-width:0}
.dft-cr-top .side .dot{width:9px;height:9px;border-radius:2px;flex:0 0 auto}
.dft-cr-top .live{font-family:var(--fb);font-size:9px;letter-spacing:.16em;font-weight:700;
  color:var(--accent);display:inline-flex;align-items:center;gap:5px}
.dft-cr-top .live i{width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 8px var(--accent);animation:dftPulse 1.6s infinite}
.dft-cr-top .live.off{color:var(--t-secondary)}
.dft-cr-top .live.off i{background:var(--t-dim);box-shadow:none;animation:none}
.dft-cr-round{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 14px;height:34px;flex:0 0 34px;background:var(--bg-surface);
  border-bottom:1px solid var(--bd)}
.dft-cr-round .ph{font-family:var(--fb);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--t-secondary)}
.dft-cr-round .ph .acc{color:var(--accent)}
.dft-cr-round .up{display:flex;align-items:center;gap:6px}
.dft-cr-round .up .dot{width:6px;height:6px;border-radius:2px}
.dft-cr-round .up b{font-family:var(--fd);font-weight:700;font-size:13px;letter-spacing:.04em;
  text-transform:uppercase}
.dft-cr-tabs,.dft-sp-tabs{display:flex;background:var(--bg-surface);border-bottom:1px solid var(--bd)}
.dft-cr-tabs button,.dft-sp-tabs button{flex:1;position:relative;padding:11px 4px;background:none;
  border:0;font-family:var(--fd);font-weight:700;font-size:15px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--t-secondary)}
.dft-cr-tabs button.on,.dft-sp-tabs button.on{color:var(--accent)}
.dft-cr-tabs button.on::after,.dft-sp-tabs button.on::after{content:'';position:absolute;
  left:22%;right:22%;bottom:0;height:2px;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.dft-cr-strip{display:flex;background:var(--bg-surface);border-bottom:1px solid var(--bd)}
.dft-cr-strip>div{flex:1;min-width:0;padding:8px 10px;display:flex;flex-direction:column;gap:3px}
.dft-cr-strip>div+div{border-left:1px solid var(--bd)}
.dft-cr-strip b{font-family:var(--fd);font-weight:700;font-size:15px;line-height:1;
  letter-spacing:.02em;font-variant-numeric:tabular-nums}
.dft-cr-strip b.acc{color:var(--accent)}
.dft-cr-body{flex:1;min-height:0}
.dft-cr-body.pad{padding:12px}
.dft-cr-pool{padding:0 12px 12px}
.dft-cr-pool .dft-pool{border:0;background:none;padding:0}

/* status + the last three bids */
.dft-status{border-top:1px solid var(--bd)}
.dft-status-row{display:flex;align-items:center;gap:8px;padding:7px 14px}
.dft-status-row .bar{width:3px;height:18px;border-radius:2px;flex:0 0 auto}
.dft-status-row .bar.acc{background:var(--accent)}
.dft-status-row .txt.acc{font-family:var(--fb);font-weight:700;font-size:9px;letter-spacing:.12em;
  color:var(--accent)}
.dft-status-row b{font-family:var(--fd);font-weight:700;font-size:15px;letter-spacing:.04em;
  text-transform:uppercase}
.dft-feeds{padding:2px 14px 8px;display:flex;flex-direction:column;gap:4px;
  border-top:1px solid var(--bd)}
.dft-feed{display:flex;align-items:center;gap:8px;font-size:11px}
.dft-feed .ts{font-family:ui-monospace,Menlo,monospace;font-size:10px;color:var(--t-dim);
  width:56px;flex:0 0 56px}
.dft-feed .dot{width:6px;height:6px;border-radius:2px;flex:0 0 auto}
.dft-feed .nm{font-family:var(--fd);font-weight:700;font-size:13px;letter-spacing:.04em}
.dft-feed .v{margin-left:auto;font-family:ui-monospace,Menlo,monospace;color:var(--t-secondary)}

/* the action bar — sticky, so the thumb never has to hunt for it */
.dft-act{position:sticky;bottom:0;z-index:7;padding:10px 12px 14px;background:var(--bg-base);
  border-top:1px solid var(--bd);display:flex;flex-direction:column;gap:8px}
.dft-act.on{border-color:var(--accent-border);
  background:linear-gradient(180deg,rgba(0,255,135,.055),var(--bg-base))}
.dft-yourturn{text-align:center;font-family:var(--fd);font-weight:700;font-size:15px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);animation:dftPulse 1.8s infinite}
.dft-act-btns{display:flex;gap:10px}
.dft-act-btns .dft-btn.big{flex:1}
.dft-btn.big{padding:14px 12px;font-family:var(--fd);font-weight:700;font-size:19px;
  letter-spacing:.06em;text-transform:uppercase;border-radius:11px}
.dft-btn.go.big{box-shadow:0 0 28px rgba(0,255,135,.32),inset 0 1px 0 rgba(255,255,255,.18)}
.dft-btn.go.big:disabled{box-shadow:none}
.dft-btn.pass{width:88px;flex:0 0 88px;padding:14px 6px;font-family:var(--fd);font-weight:700;
  font-size:19px;letter-spacing:.06em;text-transform:uppercase;border-radius:11px}
.dft-act-wait{text-align:center;font-family:var(--fd);font-weight:700;font-size:14px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--t-secondary);padding:6px 0}
.dft-act-lead{text-align:center;padding:8px;border-radius:var(--r-md);background:var(--accent-dim);
  border:1px solid var(--accent-border);color:var(--accent);font-family:var(--fd);font-weight:700;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.dft-more{background:none;border:0;color:var(--t-secondary);font-size:12px;
  text-decoration:underline;text-underline-offset:3px;padding:2px}

/* ---- the bid sheet ---- */
.dft-sheet-wrap{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.66);
  display:flex;align-items:flex-end;justify-content:center;animation:dftSlideIn .15s ease-out}
.dft-sheet{width:100%;max-width:460px;background:var(--bg-surface);border:1px solid var(--bd-strong);
  border-radius:16px 16px 0 0;padding:14px 16px 20px;display:flex;flex-direction:column;gap:10px}
.dft-sheet-h{display:flex;align-items:center;justify-content:space-between}
.dft-sheet-h h3{font-family:var(--fd);font-weight:700;font-size:22px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--accent)}
.dft-sheet-sub{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-secondary)}
.dft-sheet-amt{display:flex;justify-content:center}
.dft-bigin{width:170px;height:66px;text-align:center;font-family:var(--fd);font-weight:700;
  font-size:40px;color:var(--accent);background:var(--bg-base);
  border:1px solid var(--accent-border);border-radius:var(--r-md)}
.dft-sheet-lim{text-align:center;font-size:11px;color:var(--t-secondary)}
.dft-sheet-err{text-align:center;font-size:11px;color:var(--danger);font-weight:700}
.dft-sheet-step{display:flex;align-items:center;gap:12px}
.dft-sheet-step>span{flex:1;text-align:center;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--t-secondary)}
.dft-round{width:54px;height:54px;border-radius:50%;border:1px solid var(--bd-strong);
  background:var(--bg-elevated);color:var(--t-primary);font-size:24px;line-height:1}
.dft-round:disabled{opacity:.35}
.dft-sheet-jumps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}

/* ============================================================
   THE SPECTATOR ROOM
   ============================================================ */
.dft-sp{display:flex;flex-direction:column}
.dft-sp-top{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 14px;height:48px;border-bottom:1px solid var(--bd);position:sticky;top:0;z-index:6;
  background:rgba(8,8,8,.94);backdrop-filter:blur(6px)}
.dft-sp-top .ttl{font-family:var(--fd);font-weight:700;font-size:16px;letter-spacing:.12em;
  text-transform:uppercase}
.dft-sp-top .live{font-family:var(--fb);font-size:8px;letter-spacing:.24em;font-weight:700;
  color:var(--accent);display:inline-flex;align-items:center;gap:5px}
.dft-sp-top .live i{width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 6px var(--accent);animation:dftPulse 1.6s infinite}
.dft-sp-top .live.off{color:var(--t-secondary)}
.dft-sp-top .live.off i{background:var(--t-dim);box-shadow:none;animation:none}
.dft-ann{display:flex;align-items:center;gap:10px;height:40px;padding:0 14px;
  border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);background:var(--bg-base);
  overflow:hidden}
.dft-ann .bar{width:4px;height:22px;border-radius:2px;flex:0 0 auto}
.dft-ann .lbl{flex:0 0 auto;font-size:8px;letter-spacing:.2em}
.dft-ann .txt{font-family:var(--fd);font-weight:700;font-size:17px;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:dftSlideIn .2s ease-out}
.dft-ann .txt.acc{color:var(--accent)}
.dft-kits{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px}
.dft-kit{position:relative;border-radius:10px;overflow:hidden;padding:10px;
  background:var(--bg-surface);border:1px solid var(--bd)}
.dft-kit.lead{border-color:var(--accent-border);box-shadow:0 0 16px rgba(0,255,135,.16)}
.dft-kit .top{position:absolute;top:0;left:0;right:0;height:4px}
.dft-kit .hd{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.dft-kit .hd b{font-family:var(--fd);font-weight:700;font-size:16px;letter-spacing:.02em}
.dft-kit .pulse{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 8px var(--accent);animation:dftPulse 1.4s infinite}
.dft-kit .nom{font-family:var(--fb);font-weight:700;font-size:7px;letter-spacing:.1em;
  color:var(--warn);border:1px solid rgba(255,184,0,.4);border-radius:3px;padding:1px 4px}
.dft-kit .on{width:6px;height:6px;border-radius:50%;background:rgba(0,255,135,.5)}
.dft-kit .on.off{background:var(--t-dim)}
.dft-kit .big{font-family:var(--fd);font-weight:700;font-size:19px;line-height:1;margin-top:6px;
  font-variant-numeric:tabular-nums}
.dft-kit .row{display:flex;align-items:center;justify-content:space-between;margin-top:3px}
.dft-kit .row .lbl{font-size:8px}
.dft-kit .row .v{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--accent)}
.dft-kit .pips{display:flex;gap:2px;margin-top:7px}
.dft-kit .pips i{flex:1;height:3px;border-radius:1px;background:rgba(255,255,255,.08)}

/* ---- the scout sheet ---- */
.dft-scout{display:flex;flex-direction:column}
.dft-scout-h{padding:12px 14px;background:var(--bg-surface);border-bottom:1px solid var(--bd)}
.dft-scout-h .t{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-bottom:10px}
.dft-scout-h h3{font-family:var(--fd);font-weight:700;font-size:20px;letter-spacing:.03em}
.dft-scout-h .n{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--t-secondary)}
.dft-scout-h .n b{color:var(--accent);font-weight:400}
.dft-scout-f{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.dft-scout-f button{padding:9px 4px;border-radius:var(--r-sm);border:0;background:var(--bg-base);
  color:var(--t-secondary);font-family:var(--fb);font-weight:700;font-size:11px;letter-spacing:.08em}
.dft-scout-f button.on{background:var(--bg-subtle);color:var(--t-primary);
  box-shadow:inset 0 0 0 1px var(--bd-strong)}
.dft-scout-list{padding:10px;display:flex;flex-direction:column;gap:7px}
.dft-srow{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;
  background:var(--bg-surface);border:1px solid var(--bd)}
.dft-srow.out{opacity:.62;background:rgba(255,255,255,.015)}
.dft-srow.gk{border-left:3px solid var(--warn)}
.dft-srow.live{border-color:var(--accent-border);box-shadow:0 0 18px rgba(0,255,135,.12)}
.dft-srow .face{width:38px;height:38px;flex:0 0 38px;border-radius:8px;display:flex;
  align-items:center;justify-content:center;font-family:var(--fd);font-weight:700;font-size:15px;
  color:var(--t-secondary);border:1.5px solid rgba(255,255,255,.12);
  background:linear-gradient(155deg,#232323,#131313)}
.dft-srow .who{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.dft-srow .who b{font-family:var(--fd);font-weight:600;font-size:16px;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dft-srow.out .who b{color:var(--t-secondary);text-decoration:line-through}
.dft-srow .to{text-align:right;flex:0 0 auto}
.dft-srow .to .tm{display:flex;align-items:center;justify-content:flex-end;gap:6px;
  font-family:var(--fd);font-weight:700;font-size:13px;color:var(--t-secondary)}
.dft-srow .to .tm i{width:8px;height:8px;border-radius:2px}
.dft-srow .to .pr{font-family:ui-monospace,Menlo,monospace;font-size:13px}
.dft-srow .st{font-family:var(--fb);font-weight:700;font-size:10px;letter-spacing:.1em;
  color:var(--t-dim);flex:0 0 auto}
.dft-srow .st.live{color:var(--accent)}

/* ---- wider than a phone ----
   MAX-WIDTH ALONE DID NOTHING HERE. Auto margins on the CROSS axis of a
   column flex container cancel the stretch and the item shrink-wraps to its
   content — so `max-width:560px;margin:auto` inside .dft-cr and .dft-stage.big
   left the scoreboard 232px wide in a 1280px window and the seat's body 264px,
   with the chrome above it still stretched edge to edge. width:100% restores
   the stretch; the max-width then bites and the auto margins centre it.

   THE SEAT IS A PHONE-SHAPED PANEL, CENTRED. psia-draft's captain room is one
   column and stays one — the honest thing on a laptop is to centre the whole
   room, chrome and all, and let its own dark ground fill the rest, rather than
   stretch a four-figure strip across 1280px above a 560px stage.

   THE STANDS STAY FULL-BLEED. A spectator screen is a broadcast surface: the
   kit bars belong across the bottom and the announcer across the width. Only
   what has to stay readable — the stage, the scoreboard, the graph — is
   held to a column. */
@media (min-width:760px){
  .dft-cr{max-width:640px;margin:0 auto;
    border-left:1px solid var(--bd);border-right:1px solid var(--bd)}
  .dft-cr .dft-sb,.dft-cr .dft-status{width:auto;max-width:none;margin:10px 12px}
  .dft-sp .dft-sb,.dft-graph-wrap{width:100%;max-width:560px;margin-left:auto;margin-right:auto}
  .dft-stage-in{width:100%;max-width:560px}
  .dft-act{border-radius:12px 12px 0 0}
  .dft-kits{grid-template-columns:repeat(4,1fr)}
  .dft-scout-list{width:100%;max-width:820px;margin:0 auto}
  .dft-scout-f{grid-template-columns:repeat(7,1fr)}
}

/* the straight draft's clock strip — the stage above already says who is up,
   so this carries only the time and what is still on the board */
.dft-sb.slim .dft-sb-bid{display:flex;flex-direction:column;justify-content:center;gap:4px}
.dft-sb-bid .sub{font-size:12px;color:var(--t-secondary)}

/* the compact header that replaces the stage when the pool is the action */
.dft-stage.acthead{padding:13px 16px 11px;text-align:center}
.dft-stage.acthead .t{font-family:var(--fd);font-weight:700;font-size:23px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--accent)}
.dft-stage.acthead .s{margin:2px 0 0;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--t-secondary)}

/* ============================================================
   STEP 1, AS A MIRROR of the Matchday Squad page — read-only,
   because that page is where the squad is picked.
   ============================================================ */
.dft-sq{border:1px solid var(--bd);border-radius:var(--r-md);background:var(--bg-base);
  padding:10px 11px;display:flex;flex-direction:column;gap:7px;margin:2px 0 12px}
.dft-sq-h{display:flex;align-items:baseline;gap:8px}
.dft-sq-h .lbl{flex:1}
.dft-sq-h .dft-count{margin-left:0}
.dft-sq-list{display:flex;flex-wrap:wrap;gap:5px}
.dft-sq-list.dim{opacity:.55}
.dft-sq-list + .dft-sq-h{margin-top:4px;padding-top:8px;border-top:1px solid var(--bd)}
.dft-sq-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 9px 4px 5px;
  border-radius:var(--r-pill);background:var(--bg-elevated);border:1px solid var(--bd);
  font-size:12px;color:var(--t-primary);white-space:nowrap}
.dft-sq-chip i{font-family:var(--fd);font-weight:700;font-size:10px;letter-spacing:.06em;
  font-style:normal;color:var(--t-secondary);background:var(--bg-subtle);
  border-radius:4px;padding:2px 5px}
.dft-sq-chip.gk i{color:var(--warn);background:rgba(255,184,0,.12)}
.dft-sq-none{font-size:12px;color:var(--t-secondary)}

/* an admin sitting in his own captain seat keeps one way back */
.dft-backop{flex-shrink:0;background:var(--bg-elevated);border:1px solid var(--bd-strong);
  color:var(--t-secondary);border-radius:var(--r-sm);font-family:var(--fb);font-weight:600;
  font-size:11px;letter-spacing:.04em;padding:5px 9px}
.dft-backop:hover{color:var(--t-primary);border-color:var(--accent-border)}

/* WHICH ROOM YOU ARE IN. Three screens behind one route, so each says so:
   the committee's console, a captain's seat, or the stands. */
.dft-who{flex-shrink:0;font-family:var(--fb);font-weight:700;font-size:8px;
  letter-spacing:.18em;text-transform:uppercase;padding:4px 7px;border-radius:var(--r-sm);
  color:var(--t-secondary);background:var(--bg-elevated);border:1px solid var(--bd)}
.dft-who.seat{color:var(--accent);background:var(--accent-dim);border-color:var(--accent-border)}
.dft-who.room{color:var(--warn);background:rgba(255,184,0,.1);border-color:rgba(255,184,0,.32)}

/* A POSITION TAG IS A TAG, NOT A BAR. .dft-srow .who is a flex column, so the
   tag stretched to the row's full width on any screen wide enough to have
   room — the pill only looked like a pill on a phone. */
.dft-srow .who > .dft-pos{align-self:flex-start}
@media (min-width:760px){
  /* the sheet's header band stays full width; what it holds lines up with
     the rows underneath it */
  .dft-scout-h > *{width:100%;max-width:820px;margin-left:auto;margin-right:auto}
}

/* ---- the stands before anyone opens a room ---- */
.dft-spin{width:38px;height:38px;margin:0 auto 16px;border-radius:50%;
  border:3px solid var(--bd-strong);border-top-color:var(--accent);
  animation:dftSpin 1s linear infinite}
@keyframes dftSpin{to{transform:rotate(360deg)}}
/* WAITING FILLS THE ROOM. With no lot to show, the stage came out 250px tall
   and left the rest of the screen black — 560px of it on a laptop, 500 on a
   phone. Growing the stage into that space is a flex job, not a min-height
   one: a hardcoded height would clip the message on a short screen, whereas
   a flex item that grows still falls back to its own content. */
.dft-sp.wait{min-height:100vh;display:flex;flex-direction:column}
.dft-sp.wait .dft-stage.wait{flex:1 1 auto}
.dft-waitcount{margin-top:14px;font-family:var(--fd);font-weight:700;font-size:15px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--t-secondary)}
.dft-waitcount b{color:var(--accent)}
@media (prefers-reduced-motion:reduce){ .dft-spin{animation:none} }