/* Chat Draft — overlay (OBS browser source), viewer vote page, host panel.
   Single committed dark world. The overlay composites over a video scene, so
   its ground is transparent and every panel paints its own. */

:root{
  --cd-ink:#08060F; --cd-panel:#13101F; --cd-panel2:#1B1730; --cd-raise:#241E3D;
  --cd-line:#2E2750; --cd-line2:#413876;
  --cd-text:#EFEBFA; --cd-dim:#9A92BC; --cd-faint:#6B6490;
  --qb:#3DDC97; --rb:#3B8CFF; --wr:#FF2E97; --te:#A97BFF; --dst:#F5A524;
  --cd-live:#FF2E97; --cd-cyan:#00E5FF;
  --cd-disp:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --cd-body:"Barlow","Helvetica Neue",system-ui,sans-serif;
}

.cd-overlay-body,.cd-vote-body,.cd-host-body{margin:0;font-family:var(--cd-body);color:var(--cd-text)}
.cd-overlay-body *,.cd-vote-body *,.cd-host-body *{box-sizing:border-box}

/* =====================================================================
   OVERLAY — OBS browser source at 1920x1080.
   All interior sizing is in cqw against the stage, so the layout is
   identical at 1280, 1600 or 1920 and nothing reflows on resize.
   ===================================================================== */
.cd-overlay-body{background:transparent}
.cd-overlay-body .stage{position:fixed;inset:0;container-type:inline-size;overflow:hidden}

.stage .cam{position:absolute;right:2.2cqw;bottom:2.2cqw;width:23cqw;aspect-ratio:4/3;
  border:1px solid var(--cd-line2);border-radius:8px;background:linear-gradient(160deg,#241E3D,#120F20);
  display:flex;align-items:center;justify-content:center;color:var(--cd-faint);
  font-family:var(--cd-disp);font-size:1.5cqw;letter-spacing:.14em;text-transform:uppercase}

.stage .bar{position:absolute;top:2.2cqw;left:2.2cqw;right:2.2cqw;display:flex;align-items:stretch;gap:1cqw}
.stage .brand{display:flex;align-items:center;gap:.8cqw;background:rgba(19,16,31,.92);border:1px solid var(--cd-line);
  border-left:3px solid var(--cd-live);border-radius:6px;padding:.7cqw 1.1cqw}
.stage .brand b{font-family:var(--cd-disp);font-size:1.75cqw;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1}
.stage .brand span{color:var(--cd-dim);font-size:1.05cqw;letter-spacing:.1em;text-transform:uppercase;line-height:1}
.stage .onair{display:flex;align-items:center;gap:.45cqw;background:var(--cd-live);color:#14030C;border-radius:4px;
  padding:.28cqw .6cqw;font-family:var(--cd-disp);font-weight:700;font-size:1.05cqw;letter-spacing:.12em}
.stage .onair i{width:.55cqw;height:.55cqw;border-radius:50%;background:#14030C;animation:cdBlip 1.6s infinite}
@keyframes cdBlip{0%,100%{opacity:1}50%{opacity:.25}}

.stage .capbox{margin-left:auto;display:flex;gap:1cqw;background:rgba(19,16,31,.92);border:1px solid var(--cd-line);
  border-radius:6px;padding:.7cqw 1.2cqw}
.stage .stat{display:flex;flex-direction:column;gap:.15cqw;min-width:7.5cqw}
.stage .stat u{text-decoration:none;color:var(--cd-dim);font-size:.95cqw;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.stage .stat b{font-family:var(--cd-disp);font-size:2cqw;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.stage .stat.warn b{color:var(--dst)}

.stage .rail{position:absolute;left:2.2cqw;top:7.8cqw;width:38cqw;
  display:flex;flex-direction:column;gap:.38cqw}
.stage .slot{display:flex;align-items:center;gap:.9cqw;background:rgba(19,16,31,.9);border:1px solid var(--cd-line);
  border-radius:6px;padding:.36cqw .9cqw;flex:0 0 auto;transition:background .25s}
.stage .slot .pos{font-family:var(--cd-disp);font-weight:700;font-size:1.15cqw;letter-spacing:.1em;
  width:3.4cqw;flex:0 0 3.4cqw;text-align:center;border-radius:3px;padding:.2cqw 0;color:#0B0713}
.stage .slot .who{font-size:1.25cqw;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage .slot .team{color:var(--cd-faint);font-size:1.05cqw;font-weight:500;flex:0 0 auto}
.stage .slot .sal{margin-left:auto;font-family:var(--cd-disp);font-size:1.3cqw;font-weight:600;color:var(--cd-dim);
  font-variant-numeric:tabular-nums;flex:0 0 auto}
.stage .slot.pending{background:rgba(19,16,31,.72);border-color:rgba(46,39,80,.75)}
.stage .slot.pending .pos{filter:saturate(.35) brightness(.7)}
.stage .slot.pending .who{color:var(--cd-faint);font-style:italic}
.stage .slot.live{background:linear-gradient(90deg,rgba(255,46,151,.16),rgba(19,16,31,.94) 60%);
  border-color:var(--cd-live);box-shadow:0 0 0 1px rgba(255,46,151,.28),0 .6cqw 2cqw rgba(255,46,151,.16)}
.pos.QB{background:var(--qb)} .pos.RB{background:var(--rb)} .pos.WR{background:var(--wr)}
.pos.TE{background:var(--te)} .pos.DST{background:var(--dst)} .pos.FLEX{background:#CFC7EE}

.stage .vote{margin-top:.3cqw;background:rgba(27,23,48,.96);border:1px solid var(--cd-live);border-radius:7px;
  padding:.72cqw .85cqw;flex:0 0 auto}
.stage .vote.done{border-color:var(--qb)}
.stage .vhead{display:flex;align-items:baseline;gap:.7cqw;margin-bottom:.45cqw}
.stage .vhead h3{font-family:var(--cd-disp);font-size:1.5cqw;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin:0}
.stage .vhead .clock{margin-left:auto;font-family:var(--cd-disp);font-size:2cqw;font-weight:700;color:var(--cd-live);
  font-variant-numeric:tabular-nums;line-height:1}
.stage .vhead .tot{color:var(--cd-dim);font-size:1.05cqw;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.stage .cand{display:grid;grid-template-columns:1fr auto;gap:.16cqw .8cqw;align-items:center;padding:.2cqw 0}
.stage .cand .nm{font-size:1.25cqw;font-weight:600;display:flex;align-items:center;gap:.5cqw;min-width:0}
.stage .cand .nm .num{font-family:var(--cd-disp);background:var(--cd-raise);border:1px solid var(--cd-line2);
  border-radius:3px;width:1.8cqw;flex:0 0 1.8cqw;text-align:center;font-size:1.05cqw;color:var(--cd-cyan)}
.stage .cand .nm em{font-style:normal;color:var(--cd-faint);font-size:1.02cqw;font-weight:500;white-space:nowrap}
.stage .cand .pct{font-family:var(--cd-disp);font-size:1.45cqw;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.stage .track{grid-column:1/-1;height:.46cqw;background:#0D0A18;border-radius:99px;overflow:hidden}
.stage .fill{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#8A1D5C,var(--wr));
  transition:width .5s cubic-bezier(.22,1,.36,1)}
.stage .cand.lead .fill{background:linear-gradient(90deg,#B4206E,#FF52A8);box-shadow:0 0 1.4cqw rgba(255,46,151,.45)}
.stage .cand.lead .pct{color:var(--cd-live)}
/* The leader's badge: the rows never reorder, so this is what tells a 40% at
   #4 from a 10% at #1. */
.stage .cand .pct .ldr{font-style:normal;font-size:.9cqw;letter-spacing:.12em;font-weight:700;
  background:var(--cd-live);color:#14030C;border-radius:3px;padding:.08cqw .35cqw;vertical-align:.18cqw}
/* [hidden] must win over the display:flex above, or hiding the cam box does nothing. */
.stage .cam[hidden]{display:none!important}
.stage .narrow{display:none}
@media (max-width:1279px){
  .stage .narrow{display:block;position:absolute;left:50%;top:1cqw;transform:translateX(-50%);z-index:50;
    background:var(--dst);color:#1A1204;font:700 14px/1.3 var(--cd-body);padding:6px 12px;border-radius:6px;
    white-space:nowrap}
}
.stage .fin{font-size:1.2cqw;color:var(--cd-dim)}

.stage .cta{position:absolute;right:2.2cqw;top:7.8cqw;width:26cqw;background:rgba(19,16,31,.94);
  border:1px solid var(--cd-line2);border-radius:7px;padding:1.1cqw}
.stage .cta u{text-decoration:none;display:block;color:var(--cd-cyan);font-size:1cqw;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;margin-bottom:.5cqw}
.stage .cta .url{font-family:var(--cd-disp);font-size:2.4cqw;font-weight:700;line-height:1.05}
.stage .cta .code{font-family:var(--cd-disp);font-size:3.6cqw;font-weight:700;letter-spacing:.14em;color:var(--cd-live);
  line-height:1;margin-top:.35cqw}
.stage .cta p{color:var(--cd-dim);font-size:1.02cqw;line-height:1.45;margin:.7cqw 0 0}
.stage .cta p b{color:var(--cd-text);font-weight:600}

.stage .tick{position:absolute;left:2.2cqw;bottom:2cqw;width:38cqw;height:2.8cqw;overflow:hidden;
  background:rgba(19,16,31,.9);border:1px solid var(--cd-line);border-radius:6px;display:flex;align-items:center;padding:0 .9cqw}
.stage .tick .lbl{font-family:var(--cd-disp);font-size:1cqw;font-weight:700;letter-spacing:.14em;color:var(--cd-faint);
  text-transform:uppercase;margin-right:.9cqw;flex:0 0 auto}
.stage .tick .feed{display:flex;gap:1.4cqw;font-size:1.08cqw;white-space:nowrap;overflow:hidden}
.stage .tick .feed span{flex:0 0 auto;color:var(--cd-dim)}
.stage .tick .feed b{color:var(--cd-text);font-weight:600}

/* Connection state. Visible on stream on purpose: a stalled overlay that still
   looks live is worse than one that admits it. */
.stage .conn{position:absolute;left:50%;top:2.2cqw;transform:translateX(-50%);display:flex;align-items:center;gap:.6cqw;
  background:rgba(8,6,15,.94);border:1px solid var(--dst);border-radius:5px;padding:.5cqw 1cqw;
  font-family:var(--cd-disp);font-size:1.2cqw;letter-spacing:.1em;text-transform:uppercase;color:var(--dst)}
.stage .conn i{width:.6cqw;height:.6cqw;border-radius:50%;background:var(--dst);animation:cdBlip 1s infinite}
.stage .conn[hidden]{display:none!important}

/* =====================================================================
   VOTE PAGE — phone first. This is ~all of the traffic.
   ===================================================================== */
.cd-vote-body{background:var(--cd-ink);min-height:100%;
  background-image:radial-gradient(120% 60% at 10% 0%,#1B0F2E 0%,transparent 55%)}
.cd-wrap{max-width:520px;margin:0 auto;padding-block:20px;padding-left:16px;padding-right:16px;
  display:flex;flex-direction:column;gap:14px}
.cd-head{display:flex;align-items:center;gap:10px}
.cd-head h1{font-family:var(--cd-disp);font-size:24px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;margin:0}
.cd-head .room{margin-left:auto;font-family:var(--cd-disp);font-size:20px;letter-spacing:.16em;color:var(--cd-live)}
.cd-sub{color:var(--cd-dim);font-size:14px;line-height:1.5;margin:0}

.cd-card{background:var(--cd-panel);border:1px solid var(--cd-line);border-radius:10px;padding:14px}
.cd-card h2{font-family:var(--cd-disp);font-size:17px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;margin:0 0 4px}
.cd-meta{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--cd-dim);font-size:13px;
  font-variant-numeric:tabular-nums}
.cd-meta b{color:var(--cd-text);font-weight:600}
.cd-clock{font-family:var(--cd-disp);font-size:30px;font-weight:700;color:var(--cd-live);
  font-variant-numeric:tabular-nums;line-height:1}

.cd-opts{display:flex;flex-direction:column;gap:8px}
/* Explicit areas, not auto-flow: the number reads first, then the name, then
   the price on the right. Auto-placement with row-spanning cells puts the
   price where the name belongs. */
.cd-opt{display:grid;grid-template-columns:34px minmax(0,1fr) auto;
  grid-template-areas:"num name sal" "num sub sal";
  gap:2px 10px;align-items:center;width:100%;text-align:left;
  background:var(--cd-panel2);color:var(--cd-text);border:1px solid var(--cd-line2);border-radius:9px;
  padding:12px;font:inherit;cursor:pointer;min-height:56px}
.cd-opt:hover{background:var(--cd-raise)}
.cd-opt:focus-visible{outline:2px solid var(--cd-cyan);outline-offset:2px}
.cd-opt[aria-pressed="true"]{border-color:var(--cd-live);background:linear-gradient(90deg,rgba(255,46,151,.18),var(--cd-panel2) 70%)}
/* Voting closed (between slots, paused, clock run out): inert and visibly so. */
.cd-opts.is-closed .cd-opt,.cd-opt:disabled{opacity:.42;filter:saturate(.35);cursor:not-allowed;background:var(--cd-panel2)}
.cd-opt:disabled:hover{background:var(--cd-panel2)}
.cd-opt .n{grid-area:num;font-family:var(--cd-disp);font-size:18px;font-weight:700;color:var(--cd-cyan);
  background:var(--cd-ink);border:1px solid var(--cd-line2);border-radius:5px;text-align:center;padding:4px 0}
.cd-opt .nm{grid-area:name;font-size:16px;font-weight:600;line-height:1.2;min-width:0}
.cd-opt .sub{grid-area:sub;color:var(--cd-faint);font-size:12.5px;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cd-opt .sal{grid-area:sal;font-family:var(--cd-disp);font-size:18px;font-weight:700;color:var(--cd-dim);
  font-variant-numeric:tabular-nums;text-align:right}
/* No share bar on the vote page: shares stay hidden until the slot locks (the
   overlay shows the split on stream). */

.cd-code-in{display:flex;gap:8px}
.cd-code-in input{flex:1;min-width:0;background:var(--cd-panel2);color:var(--cd-text);
  border:1px solid var(--cd-line2);border-radius:9px;padding:14px;font-family:var(--cd-disp);
  font-size:26px;letter-spacing:.24em;text-align:center;text-transform:uppercase}
.cd-code-in input:focus-visible{outline:2px solid var(--cd-cyan);outline-offset:2px}
.cd-btn{font-family:var(--cd-disp);font-size:15px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:var(--cd-live);color:#14030C;border:0;border-radius:9px;padding:12px 18px;cursor:pointer}
.cd-btn.ghost{background:var(--cd-panel2);color:var(--cd-text);border:1px solid var(--cd-line2)}
.cd-btn:focus-visible{outline:2px solid var(--cd-cyan);outline-offset:2px}
.cd-btn[disabled]{opacity:.45;cursor:not-allowed}

.cd-toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
  background:var(--qb);color:#04140C;font-weight:700;padding:10px 18px;border-radius:99px;font-size:14px;
  box-shadow:0 8px 28px rgba(0,0,0,.5);z-index:20}
.cd-toast[hidden]{display:none!important}
.cd-note{color:var(--cd-faint);font-size:12.5px;line-height:1.5}
.cd-err{color:var(--dst);font-size:13.5px}

/* =====================================================================
   HOST PANEL — second screen, never on stream.
   ===================================================================== */
.cd-host-body{background:var(--cd-ink)}
.cd-host-body .cd-wrap{max-width:720px}
.cd-row{display:flex;flex-wrap:wrap;gap:8px}
.cd-kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:13.5px;color:var(--cd-dim)}
.cd-kv b{color:var(--cd-text);font-weight:600;font-variant-numeric:tabular-nums}
.cd-src-row{display:flex;gap:8px;align-items:stretch;margin-top:6px}
.cd-src-row .cd-src{flex:1 1 auto;min-width:0}
.cd-src-row .cd-btn{flex:0 0 auto;min-height:44px}
.cd-src{font-family:var(--cd-disp);background:var(--cd-panel2);border:1px solid var(--cd-line);
  border-radius:5px;padding:8px 10px;color:var(--cd-cyan);font-size:14px;word-break:break-all;user-select:all}

@media (prefers-reduced-motion:reduce){
  .stage *,.cd-opt{animation:none!important;transition:none!important}
}

/* A missing room is not a fault: it is the ordinary state of a fixed-code OBS
   source before the host opens the room. It waits calmly rather than blinking
   the amber alarm a dropped connection uses. */
.stage .conn.wait{border-color:var(--cd-line2);color:var(--cd-dim)}
.stage .conn.wait i{background:var(--cd-cyan);animation:cdBlip 2.4s infinite}

/* The payoff under a finished lineup. */
.stage .pay{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.3cqw .9cqw;margin:.15cqw 0 .35cqw}
.stage .pay.one{grid-template-columns:minmax(0,1fr)}
.stage .pay u{text-decoration:none;display:block;color:var(--cd-dim);font-size:.9cqw;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;white-space:nowrap}
.stage .pay b{font-family:var(--cd-disp);font-size:1.95cqw;font-weight:700;line-height:1.05;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.stage .pay b small{font-size:.95cqw;color:var(--cd-dim);font-weight:600;margin-left:.2cqw}
.stage .pay b.ownv{font-size:1.45cqw}
/* The percentile band. Colour carries direction only; the word carries the
   meaning, so the band still reads without it. Average stays neutral. */
/* Chalk is not a verdict, so it stays neutral: text colour, the word says it. */
/* A points figure built from fewer of the nine than a normal draft: amber,
   the same colour the panel uses for its own caveats, with the count beside it. */
.stage .pay b.thin, .stage .pay b.thin small{color:var(--dst)}
.stage .pay b.chalk{text-transform:uppercase;letter-spacing:.02em}
.stage .pay b.band{text-transform:uppercase;letter-spacing:.02em}
.stage .pay b.band-rough{color:var(--dst)}
.stage .pay b.band-shaky{color:var(--cd-dim)}
.stage .pay b.band-strong{color:var(--cd-cyan)}
.stage .pay b.band-elite{color:var(--cd-live)}
.stage .fin-src{font-size:.88cqw;color:var(--cd-faint);letter-spacing:.03em;line-height:1.35}
.stage .fin.un{color:var(--dst);font-size:1.1cqw;line-height:1.35;margin-bottom:.3cqw}