.clock { font-weight: 700; font-size: 15px; }
.clock .mine { color: var(--accent); }
#undoBtn { border-color: #5a3030; }
#captureBtn { border-color: var(--accent); }

/* connection status badge */
.conn { font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); }
.conn.off    { color: var(--muted); }
.conn.linked { color: #e9c46a; border-color: #5a4d1f; }
.conn.live   { color: #4ade80; border-color: #1f7a4d; animation: pulse 1.6s infinite; }
.conn.err    { color: #f87171; border-color: #5a3030; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .55 } }

.dlayout { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 10px; align-items: start; }
.boardwrap { min-height: 200px; }
/* topbar Byes dropdown */
.topbar .brandwrap { display: inline-flex; flex-direction: column; justify-content: center; line-height: 1.05; }
.topbar .brandwrap .subtitle { font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: .3px; margin-top: 1px; }
.topbar #draftSel { max-width: 240px; }
.topbar .dd { position: relative; display: inline-block; }
.topbar .ddpanel { position: absolute; top: 100%; right: 0; margin-top: 6px; z-index: 60; min-width: 200px; max-height: 340px;
  overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.55); }
.topbar .ddpanel .row { display: flex; justify-content: space-between; gap: 14px; padding: 2px 0; }
.topbar .ddpanel .row .mu { color: var(--muted); }
/* assign-tournament bar for generic "Underdog Draft" imports */
.assignbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #3a2f10; border: 1px solid #6b5a1f; border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; font-size: 13px; }
.assignbar select { padding: 4px 6px; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; }
.assignbar .primary { background: var(--accent); color: #11181f; border-color: var(--accent); font-weight: 600; padding: 5px 12px; }
.empty { padding: 36px; text-align: center; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }

/* drafter-column board */
#boardScroll { overflow: auto; max-height: calc(100vh - 68px); border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.bhead, .bgrid { display: grid; }            /* grid-template-columns set inline by JS (N teams) */
.bhead {
  position: sticky; top: 0; z-index: 3; background: var(--panel2); border-bottom: 1px solid var(--line);
}
.bhead .col { padding: 7px 8px; font-weight: 700; font-size: 13px; text-align: center; border-left: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.bhead .col:hover { background: #243; }
.bhead .col.sel { outline: 2px solid var(--accent); outline-offset: -2px; }
#teamsList { max-height: 52vh; overflow-y: auto; }
#teamsList .tnrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0; font-size: 13px; }
#teamsList .tnrow span { color: var(--muted); flex: 0 0 auto; }
#teamsList .tninp { flex: 1 1 auto; max-width: 220px; padding: 6px 8px; }
.bhead .col .renm { opacity: 0; cursor: pointer; margin-left: 5px; font-size: 11px; color: var(--muted); }
.bhead .col:hover .renm { opacity: .6; }
.bhead .col .renm:hover { opacity: 1; color: #fff; }
.bhead .col .sub { display: block; color: var(--muted); font-weight: 400; font-size: 11px; }
.bhead .col .sub .faced { color: var(--accent); font-weight: 700; cursor: help; }   /* # of your drafts you've faced this owner */
.bhead .col .tvar { display: block; font-weight: 600; font-size: 10.5px; }
.bhead .col .tvar.pos { color: #4ade80; } .bhead .col .tvar.neg { color: #f87171; }
.bhead .col .tpos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; justify-items: center; margin-top: 2px; }
.bhead .col .tpos b { font-size: 10px; padding: 0 4px; border-radius: 3px; color: #0b0f12; font-weight: 700; min-width: 14px; text-align: center; }
.bhead .col .tpos b.QB { background: var(--qb); } .bhead .col .tpos b.RB { background: var(--rb); }
.bhead .col .tpos b.WR { background: var(--wr); } .bhead .col .tpos b.TE { background: var(--te); }
/* avg draft cost (ADP) per position, aligned under the counts, same position colors */
.bhead .col .tcost { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; text-align: center; margin-top: 1px; font-size: 9px; font-weight: 700; line-height: 1.25; }
.bhead .col .tcost b.QB { color: var(--qb); } .bhead .col .tcost b.RB { color: var(--rb); }
.bhead .col .tcost b.WR { color: var(--wr); } .bhead .col .tcost b.TE { color: var(--te); }
.bhead .col.mycol, .cell.mycol { background: rgba(245,166,35,.12); }
.bhead .col.mycol { border-left: 2px solid var(--accent); border-right: 2px solid var(--accent); }

.bgrid { gap: 0; }
.cell {
  border-left: 1px solid #20272e; border-bottom: 1px solid #20272e; min-height: 96px;
  font-size: 13px; position: relative; display: flex; flex-direction: column;
}
.cell .upper { padding: 4px 6px 2px; flex: 1 1 auto; cursor: pointer; }
.cell .lower { border-top: 1px dashed #2c3a45; padding: 2px 6px; font-size: 11px; color: var(--muted); cursor: pointer; }
.cell .lower:hover { background: #1c252d; }
.cell.sugg { background: #10161b; }
.cell.sugg .upper { opacity: .85; }
.cell.deep { opacity: .92; }
.cell .chead .avtag { font-size: 9px; background: #20303a; color: #8fd; padding: 0 4px; border-radius: 3px; margin: 0 2px; }
.cell.mycol { border-left: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.cell.empty { color: var(--muted); }
.cell.draftable { cursor: pointer; }
/* player cell colored by position; drafted = lighter shade, available (projected) = fuller */
.cell.QB:not(.empty) { background: color-mix(in oklab, var(--qb) 15%, #11181f); }
.cell.RB:not(.empty) { background: color-mix(in oklab, var(--rb) 15%, #11181f); }
.cell.WR:not(.empty) { background: color-mix(in oklab, var(--wr) 15%, #11181f); }
.cell.TE:not(.empty) { background: color-mix(in oklab, var(--te) 15%, #11181f); }
.cell.DST:not(.empty) { background: color-mix(in oklab, #7a8794 15%, #11181f); }
.cell.K:not(.empty)   { background: color-mix(in oklab, #b98a4b 15%, #11181f); }
.cell.sugg.DST { background: color-mix(in oklab, #7a8794 40%, #11181f); }
.cell.sugg.K   { background: color-mix(in oklab, #b98a4b 40%, #11181f); }
.cell.sugg.QB { background: color-mix(in oklab, var(--qb) 42%, #11181f); }
.cell.sugg.RB { background: color-mix(in oklab, var(--rb) 42%, #11181f); }
.cell.sugg.WR { background: color-mix(in oklab, var(--wr) 42%, #11181f); }
.cell.sugg.TE { background: color-mix(in oklab, var(--te) 42%, #11181f); }
.cell.onclock { outline: 2px solid #fde047; outline-offset: -2px; box-shadow: 0 0 8px rgba(253,224,71,.45); }   /* on the clock = yellow */
.bhead .col.ownerhi { outline: 2px solid #22d3ee; outline-offset: -2px; background: rgba(34,211,238,.20); }   /* owner holding the hovered player's stack counterpart */
.cell .chead { display: flex; align-items: center; font-size: 11.5px; color: var(--muted); }
.cell .chead .ctag { flex: 0 0 auto; }
.cell .chead .pk { flex: 1 1 auto; text-align: center; color: var(--accent); font-weight: 700; }   /* pick# top-center */
.cell .chead .pk .dir { color: var(--muted); font-weight: 400; opacity: .75; margin: 0 2px; font-size: 10px; }   /* snake direction */
.cell .chead .cdh { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }   /* stack compare diffs top-right */
.cell .chead .cdh .cdrow { display: flex; gap: 3px; align-items: baseline; justify-content: flex-end; }   /* one compare: "WR25  +12" */
.cell .chead .cdh .cpr { font-size: 9px; font-weight: 700; color: var(--muted, #94a3b8); opacity: .85; }   /* expert's position rank */
.cell .chead .cdh .cpr.up { color: #4ade80; opacity: 1; }    /* expert ranks them earlier at the position than Season */
.cell .chead .cdh .cpr.down { color: #f87171; opacity: 1; }  /* expert ranks them later */
.cell .chead .cdh .cdiff { font-size: 10.5px; font-weight: 700; }
.cell .chead .cdiff.pos { color: #4ade80; } .cell .chead .cdiff.neg { color: #f87171; }
.cell .row2 .ca { font-weight: 600; color: var(--text); }                /* ADP, sits directly above projected pts */
.cell.sugg .row2 .ca { color: var(--accent); }
.cell .row2 .ca .myrk { color: #f5a623; font-weight: 700; margin-left: 3px; }   /* your rank in a custom list — shows as marketADP (yourRank) */
.cell .nm { font-weight: 700; font-size: 15px; line-height: 1.12; margin: 1px 0; }
.cell .tm { color: var(--text); font-weight: 700; font-size: 12px; }   /* team·bye white+bold like proj pts */
/* PPR mini-line: tgt/rec per game, tier-colored (only shown in PPR tourneys, pass-catchers) */
.cell .ppr { display: flex; align-items: baseline; gap: 3px; font-size: 12px; font-weight: 700; line-height: 1.1; margin: 1px 0; }
.cell .ppr .pl { color: var(--muted); font-weight: 700; font-size: 9px; letter-spacing: .4px; }
.cell .ppr .sl { color: var(--muted); font-weight: 400; }
.cell .ppr .mu { color: var(--muted); font-weight: 400; }
.cell .ppr .rt1 { color: #2ecc71; }   /* elite  (tier 1) */
.cell .ppr .rt2 { color: #86d95b; }   /* good   */
.cell .ppr .rt3 { color: #e6c84f; }   /* avg    */
.cell .ppr .rt4 { color: #e5943a; }   /* below  */
.cell .ppr .rt5 { color: #e0553a; }   /* low    (tier 5) */
/* strength-of-schedule boxes live in the lower bar (overall | position season + playoff) */
.cell .sosrow { display: flex; align-items: center; gap: 3px; }
.cell .sosrow .sl { color: var(--muted); font-size: 10px; letter-spacing: .5px; margin-right: 1px; }
.cell .sosrow .sos { flex: 0 0 auto; min-width: 17px; text-align: center; font-size: 10px; font-weight: 700;
  color: #eaf2f8; padding: 0 3px; border-radius: 3px; border: 1px solid rgba(255,255,255,.10); }
.cell .sosrow .ssep { width: 1px; align-self: stretch; background: rgba(255,255,255,.16); margin: 1px 1px; }
.cell .sosrow .sos.conf { border-color: rgba(0,0,0,.65); }   /* playoff roster head-to-head: black text (set inline) + dark edge */
.cell .lower .tstar { color: inherit; font-weight: 700; margin-right: 1px; }
.cell .sosrow { overflow: hidden; }                                   /* contain a tight row instead of spilling out of the cell */
.cell .sosrow .favstar { flex: 0 0 auto; color: #f5c518; font-size: 12px; line-height: 1; margin-right: 1px; }   /* favorite: far-left gold star */
.cell .sosrow .wbadge { flex: 0 0 auto; font-size: 10px; font-weight: 800; line-height: 1; margin-right: 1px; }   /* compact ⚠ (was a wide BYE/TEAM pill) */
.cell .sosrow .wbadge.bye { color: #ff5252; } .cell .sosrow .wbadge.team { color: #a78bfa; }
.cell .row2 { display: flex; justify-content: space-between; font-size: 12px; margin-top: 2px; }
.cell .row2 .l { color: var(--text); font-weight: 700; }   /* depth & pos-rank white+bold like proj pts */
.cell .row2 .l.exp { color: var(--muted); font-weight: 400; }   /* keep exposure muted */
.cell .row2 .l.dmv-up { color: #4ade80; }   /* depth riser (last 2 wks) */
.cell .row2 .l.dmv-dn { color: #f87171; }   /* depth faller */
.cell .row2 .l.dmv-up::after { content: "\2191"; margin-left: 2px; font-weight: 800; }   /* ↑ arrow beside the depth label */
.cell .row2 .l.dmv-dn::after { content: "\2193"; margin-left: 2px; font-weight: 800; }   /* ↓ arrow */
.cell .row2 b.imp { font-size: 11px; }   /* roster impact score, to the right of exposure % */
.cell .row2 b.imp.pos { color: #4ade80; } .cell .row2 b.imp.neg { color: #f87171; } .cell .row2 b.imp.mu { color: var(--muted); }
.cell .strip { display: flex; gap: 1px; margin-top: 3px; }
.cell .strip i { flex: 1; text-align: center; font-style: normal; font-size: 10px; border-radius: 2px; color: #11181f; }
.cell .strip i.flat { background: #2a333b; color: var(--muted); }

/* available list (compact, click/double-click to draft) */
/* right-side panels are no longer docked: a far-right toolbar dropdown (paneldrop) + a roster hover popup (rosterpop) */
.paneldrop { position: fixed; top: 46px; right: 8px; width: 322px; max-height: calc(100vh - 56px); overflow-y: auto;
             z-index: 70; background: var(--bg, #0d1218); border: 1px solid var(--line); border-radius: 8px; padding: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.55); }
.rosterpop { position: fixed; width: 380px; max-height: calc(100vh - 58px); overflow-y: auto;
             z-index: 65; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.55); }
.rosterpop .panel { background: transparent; border: 0; margin: 0; }
.rp-x { position: absolute; top: 2px; right: 5px; z-index: 2; background: transparent; border: 0; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.rp-x:hover { color: var(--text, #e6edf3); }
.rosterpop .rp-stack { margin: 8px 10px 4px; border-top: 1px solid var(--line); padding-top: 7px; }
.rosterpop .rp-stackhd { font-weight: 700; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.side2 .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; }
.side2 .panel h3 { margin: 0; padding: 8px 10px 8px 24px; font-size: 14px; border-bottom: 1px solid var(--line);
  cursor: pointer; user-select: none; position: relative; }
.side2 .panel h3:hover { background: #1c252d; }
.side2 .panel h3 .hdr-chk { float: right; font-weight: 400; font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
.side2 .panel h3 .hdr-chk input { cursor: pointer; }
.side2 .panel h3::before { content: "▾"; position: absolute; left: 9px; color: var(--muted); font-size: 11px;
  transition: transform .12s; }
.side2 .panel.collapsed h3 { border-bottom: none; }

/* pairing exposure ("With your core") */
#pairx { padding: 3px 0; }
.pxrow { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 10px; font-size: 12px; overflow: hidden; }
.pxbar { position: absolute; left: 0; top: 0; bottom: 0; z-index: 0; background: rgba(255,255,255,.06); }
.pxrow.QB .pxbar { background: color-mix(in oklab, var(--qb) 38%, transparent); }
.pxrow.RB .pxbar { background: color-mix(in oklab, var(--rb) 38%, transparent); }
.pxrow.WR .pxbar { background: color-mix(in oklab, var(--wr) 38%, transparent); }
.pxrow.TE .pxbar { background: color-mix(in oklab, var(--te) 38%, transparent); }
.pxname { position: relative; z-index: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pxadp { color: var(--muted); font-size: 10px; margin-left: 4px; }
.pxpct { position: relative; z-index: 1; font-weight: 700; white-space: nowrap; }
.pxn { color: var(--muted); font-weight: 400; font-size: 10px; }
.pxsmall .pxpct { color: var(--muted); font-weight: 400; }
.pxnote { padding: 8px 10px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.side2 .panel.collapsed h3::before { transform: rotate(-90deg); }
.side2 .panel.collapsed > :not(h3) { display: none; }
.side2 .panel .body { padding: 6px 10px; }
.availbar { padding: 6px 10px; } .availbar #search { width: 100%; }
.availlist { max-height: 320px; overflow-y: auto; }   /* ~10 rows + scroll */
.arow { display: grid; grid-template-columns: 42px 1fr auto; gap: 6px; align-items: center; padding: 5px 10px; border-bottom: 1px solid #20272e; cursor: pointer; }
.arow:hover { background: #1c252d; }
.arow.drafted { background: #3f464d; color: #aab2b9; cursor: default; }
.arow.drafted .nm, .arow.drafted .adp { color: #aab2b9; }
.arow.drafted .nm { text-decoration: line-through; }
.arow.drafted:hover { background: #3f464d; }
.arow .pos { min-width: 34px; text-align: center; padding: 1px 4px; border-radius: 4px; font-weight: 700; font-size: 11px; color: #0b0f12; }
.pos.QB { background: var(--qb); } .pos.RB { background: var(--rb); } .pos.WR { background: var(--wr); } .pos.TE { background: var(--te); }
.arow .nm { font-weight: 600; } .arow .nm small { color: var(--muted); font-weight: 400; }
.arow .adp { font-weight: 700; }
/* stacking suggestion rows (QBs-to-stack / pass-catchers-to-stack) */
.stacklist { max-height: 200px; overflow-y: auto; padding: 0; }
.stacklist .muted { display: block; padding: 8px 10px; font-size: 12px; }
.srow { display: grid; grid-template-columns: 42px 1fr auto; gap: 6px; align-items: center; padding: 5px 10px; border-bottom: 1px solid #20272e; cursor: pointer; }
.srow:hover { background: #1c252d; }
.srow .pos { min-width: 34px; text-align: center; padding: 1px 4px; border-radius: 4px; font-weight: 700; font-size: 11px; color: #0b0f12; }
.srow .nm { font-weight: 600; font-size: 13px; line-height: 1.2; } .srow .nm small { color: var(--muted); font-weight: 400; }
.srow .nm .with { display: block; color: #e9c46a; font-size: 11px; }
.srow .adp { font-weight: 700; }
.srow.target { box-shadow: inset 3px 0 0 #d9a400; }
.srow.target .nm { color: #e9c46a; }
.side2 .row { display: flex; justify-content: space-between; padding: 2px 0; border-bottom: 1px solid #20272e; font-size: 13px; }
.side2 .row .mu { color: var(--muted); }
/* roster panel grouped by position (like the Drafts form) */
.side2 .prow { display: grid; grid-template-columns: 1fr 28px 38px 42px 40px; gap: 4px; font-size: 12px; padding: 2px 0; border-bottom: 1px solid #20272e; }
.side2 .prow .right { text-align: right; }
.side2 .prow .mu { color: var(--muted); }
.side2 .grp { display: grid; grid-template-columns: 1fr 28px 38px 42px 40px; gap: 4px; font-weight: 700; font-size: 12px;
  margin: 8px 0 1px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.08); }
.side2 .grp .gname { font-weight: 800; }
.side2 .grp .gcap { text-align: right; font-weight: 800; }     /* Draft Capital Rank in the ADP column */
.side2 .grp.QB { color: var(--qb); } .side2 .grp.RB { color: var(--rb); }
.side2 .grp.WR { color: var(--wr); } .side2 .grp.TE { color: var(--te); }
.side2 .cost.pos { color: #4ade80; } .side2 .cost.neg { color: #f87171; }
.conn.linked a { color: #e9c46a; text-decoration: none; }
.conn.linked a:hover { text-decoration: underline; }

/* loading spinner (shown while a draft loads) */
.loading { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 44px; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.spinner { width: 22px; height: 22px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* QB-stack highlight: available teammates of a QB on my roster -> SOS box NEON pink */
.cell .lower.stack { background: #ff1e9a; box-shadow: inset 0 0 0 1px #ff8fd0, 0 0 9px rgba(255,30,154,.85); }
.cell .lower.stack .sl { color: #2a0413; font-weight: 700; }

/* draft target highlight (yellow until the player is drafted) */
.cell .lower.target { background: #d9a400; color: #1a1205; font-weight: 700; }
.cell .lower.target:hover { background: #e8b71a; }
.cell .lower.target .sl { color: #1a1205; }
/* QB bye collision: a candidate QB on the same bye as a QB you already own — very visible BLACK warning */
.cell .lower.byewarn { background: #000; box-shadow: inset 0 0 0 1px #444; }
.cell .lower.byewarn:hover { background: #0a0a0a; }
.cell .lower.byewarn .sl { color: #888; }
.cell.byewarn { box-shadow: inset 0 0 0 2px #000, 0 0 0 1px #ff4d4d; }
.byebadge { background: #ff2d2d; color: #fff; font-weight: 800; font-size: 9px; padding: 0 4px; border-radius: 3px; margin-right: 3px; letter-spacing: .2px; white-space: nowrap; }
/* ESPN injury — red cross on the board cell + banner in the info popup (sev3 solid red, sev2 lighter red) */
.injx { float: right; color: #ff3b3b; font-weight: 800; font-size: 12px; line-height: 1; cursor: help; }   /* sits at the right of the team·bye line, directly above the ADP */
.injx.sev2 { color: #ff8079; }
.newsdot { float: right; margin-right: 3px; font-size: 9px; line-height: 1.3; cursor: help; }   /* recent-news flag next to the injury cross */
.newsdot.unread { color: #38bdf8; text-shadow: 0 0 5px rgba(56,189,248,.7); }   /* bright/glow = unread */
.newsdot.read { color: #55606c; }                                              /* dim = already opened */
.injbanner { margin: 7px 0 3px; padding: 6px 9px; border-radius: 6px; font-size: 12.5px; line-height: 1.35;
             background: rgba(255,45,45,.12); border: 1px solid rgba(255,45,45,.45); color: #f3b4b0; }
.injbanner.sev2 { background: rgba(255,128,121,.10); border-color: rgba(255,128,121,.4); }
.injbanner .ix { color: #ff3b3b; font-weight: 800; }
.injbanner b { color: #ff6a62; }
.injbanner .inote { color: #cdbcbc; }
/* nflverse durability + injury history (info popup) */
.durhead { margin: 9px 0 4px; font-weight: 700; font-size: 13px; }
.durhead small { color: var(--muted); font-weight: 400; margin-left: 5px; }
.durtier { font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 4px; margin-left: 3px; }
.durtier.t0 { background: rgba(74,222,128,.18); color: #6ee79a; }    /* Iron Man */
.durtier.t1 { background: rgba(74,222,128,.12); color: #9be3b4; }    /* Durable */
.durtier.t2 { background: rgba(245,200,80,.16); color: #f0c84f; }    /* Some risk */
.durtier.t3 { background: rgba(255,128,80,.18); color: #ff9d6b; }    /* Injury-prone */
.durtier.t4 { background: rgba(255,45,45,.20); color: #ff6a62; }     /* Fragile */
.durhist { font-size: 12px; line-height: 1.5; }
.durseason b { color: var(--text); margin-right: 4px; }
.durseason .irtag { background: #ff2d2d; color: #fff; font-weight: 800; font-size: 9px; padding: 0 4px; border-radius: 3px; margin-right: 3px; }
.durseason .dw { color: var(--muted); }
.durseason .dmiss { color: #ff8079; font-weight: 700; }
/* recent player news blurbs (info popup), color-coded by best-ball sentiment */
.newshd { margin: 0 0 8px; font-weight: 700; font-size: 13px; }
.newslist .newshd { margin: 2px 0 0; }   /* header now sits between the pinned Outlook and the news list */
.newshd small { color: var(--muted); font-weight: 400; margin-left: 5px; font-size: 11px; }
.newslist { display: flex; flex-direction: column; gap: 8px; }
.newsitem { font-size: 12px; line-height: 1.5; padding: 7px 9px; border-left: 3px solid #6b7682; background: rgba(255,255,255,.03); border-radius: 5px; color: var(--text, #e6edf3); }
.newsitem.pos { border-left-color: #4ade80; }
.newsitem.neg { border-left-color: #ff6a62; }
.newsitem.outlook { border-left-color: var(--accent); background: color-mix(in oklab, var(--accent) 9%, rgba(255,255,255,.03)); }
.newsitem .obadge { color: #0b0f12; background: var(--accent); font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 1px 6px; border-radius: 3px; white-space: nowrap; }
.newsitem .nih { display: flex; gap: 7px; align-items: baseline; margin-bottom: 3px; }
.newsitem .nsdate { color: var(--muted); font-size: 11px; white-space: nowrap; }
.newsitem .nsrc { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; padding: 1px 5px; border-radius: 8px; white-space: nowrap; }
.newsitem .nsrc-underdog { background: #2e2140; color: #c9a6ff; }   /* Underdog purple — credits the source */
.newsitem .nsrc-espn { background: #2a2f36; color: #9fb0c0; }
.newsitem .nsrc-bbt { background: #1f3a2a; color: #7fdca0; }
.newsitem .nhead { font-weight: 700; }
.newsitem .nblurb { color: #c2cad4; }
/* News panel (header News ▾): recent stories across the whole board, sorted by ADP, click to read */
.ddpanel.newsdrop { width: 470px; max-width: 92vw; max-height: 74vh; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.newsdrop .newsctrl { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--panel2); flex: 0 0 auto; }
.newsdrop .nchk { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.newsdrop select { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 5px; font-size: 12px; padding: 2px 4px; }
.newsdrop .nmarkbtn { margin-left: auto; font-size: 11.5px; cursor: pointer; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; }
.newsdrop .nmarkbtn:hover { border-color: var(--accent); }
.newsdrop #newsFeed { overflow-y: auto; flex: 1 1 auto; padding: 0; }
.nrow { padding: 7px 11px; border-bottom: 1px solid #20272e; border-left: 3px solid transparent; cursor: pointer; }
.nrow:hover { background: #1c252d; }
.nrow.pos { border-left-color: #4ade80; } .nrow.neg { border-left-color: #ff6a62; }
.nrow.unread { background: rgba(58,160,200,.06); }
.nrhead { display: flex; align-items: baseline; gap: 6px; font-size: 12px; }
.nrp { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nradp { color: var(--accent); font-size: 11px; margin-left: 4px; }
.nrdate { font-size: 11px; white-space: nowrap; }
.nrsrc { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; padding: 1px 5px; border-radius: 8px; white-space: nowrap; }
.nrsrc.nsrc-underdog { background: #2e2140; color: #c9a6ff; } .nrsrc.nsrc-espn { background: #2a2f36; color: #9fb0c0; } .nrsrc.nsrc-bbt { background: #1f3a2a; color: #7fdca0; }
.nrhl { font-size: 13px; margin-top: 2px; color: var(--text); }
.nrow.read .nrhl { color: var(--muted); font-weight: 400; }
.nrow.unread .nrhl { font-weight: 600; }
.nrblurb { font-size: 12.5px; color: #c2cad4; margin-top: 6px; line-height: 1.5; }
/* two-column info popup: details define the height on the left; news scrolls to match on the right.
   The news column is absolutely positioned (top:0/bottom:0) so it fills exactly the left column's height
   and scrolls internally -- long news never grows the popup. */
.info-cols { position: relative; min-height: 300px; }
.info-left { margin-right: 424px; min-width: 0; }
.info-right { position: absolute; top: 0; right: 0; bottom: 0; width: 400px; text-align: left;
  overflow-y: auto; border-left: 1px solid var(--line); padding-left: 18px; padding-right: 12px; }
@media (max-width: 800px) {
  .info-cols { min-height: 0; }
  .info-left { margin-right: 0; }
  .info-right { position: static; width: auto; border-left: 0; border-top: 1px solid var(--line);
    padding: 12px 0 0; margin-top: 12px; max-height: 46vh; }
}
/* Underdog-style per-season stat grid (info popup) */
.ust { width: 100%; border-collapse: collapse; font-size: 11.5px; margin-top: 5px; }
.ust th, .ust td { padding: 3px 5px; text-align: right; white-space: nowrap; }
.ust .grp th { color: var(--muted); font-weight: 700; font-size: 9.5px; text-transform: uppercase; letter-spacing: .4px; text-align: center; padding-bottom: 1px; }
.ust .hdr th { color: var(--muted); font-weight: 600; font-size: 10px; border-bottom: 1px solid var(--border); }
.ust .hdr th:first-child, .ust td.yr { text-align: left; }
.ust td.yr { font-weight: 700; color: var(--text); }
.ust td.tot { font-weight: 800; color: var(--text); }
.ust td.avg { font-weight: 800; color: var(--accent); }   /* fantasy pts per game */
.ust td.gp { color: var(--text); }
.ust tbody tr:nth-child(even) { background: rgba(255,255,255,.03); }
.ust tbody td { color: var(--muted); }
/* draft button inside the info popup (drafts the next pick for whoever is on the clock) */
.info-actions { display: flex; gap: 8px; margin: 8px 0 4px; }
.info-actions .info-draft { margin: 0; flex: 1 1 auto; }
.info-draft { width: 100%; margin: 8px 0 4px; padding: 9px; border: 0; border-radius: 7px; background: #2ea043; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.info-draft:hover { background: #36b24a; }
.info-match { flex: 0 0 auto; padding: 9px 14px; border: 1px solid var(--accent); border-radius: 7px; background: transparent; color: var(--accent); font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.info-match:hover { background: color-mix(in oklab, var(--accent) 18%, transparent); }
.info-fav { float: right; margin-top: -2px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; }
.info-fav:hover { border-color: #f5c518; color: #f5c518; }
.info-fav.on { border-color: #f5c518; color: #f5c518; background: color-mix(in oklab, #f5c518 16%, transparent); }
.info-taken { margin: 7px 0 3px; color: var(--muted); font-size: 12px; font-style: italic; }
/* same-team / same-position warning (violet) */
.cell .lower.teamwarn { background: #4c1d95; box-shadow: inset 0 0 0 1px #6d28d9; }
.cell .lower.teamwarn:hover { background: #571fa6; }
.cell .lower.teamwarn .sl { color: #c4b5fd; }
.cell.teamwarn { box-shadow: inset 0 0 0 2px #6d28d9, 0 0 0 1px #a78bfa; }
.teambadge { background: #7c3aed; color: #fff; font-weight: 800; font-size: 9px; padding: 0 4px; border-radius: 3px; margin-right: 3px; letter-spacing: .2px; white-space: nowrap; }

/* fast-draft "pick flies to its slot" animation */
.pickfly { border-radius: 6px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.55); will-change: transform; }
@keyframes justpicked { 0% { box-shadow: 0 0 0 3px #ffd34d, 0 0 18px rgba(255,211,77,.9); } 100% { box-shadow: 0 0 0 0 transparent; } }
.cell.justpicked { animation: justpicked .85s ease-out; }
@media (prefers-reduced-motion: reduce) { .pickfly { display: none; } .cell.justpicked { animation: none; } }
.arow.target { box-shadow: inset 3px 0 0 #d9a400; }
.arow.target .nm { color: #e9c46a; }
/* My Draft stacks: with one of my QBs = grey; not-QB-related (no QB on that team) = light blue */
.side2 .prow.stacked { background: #38414c; border-radius: 3px; }
.side2 .prow.stacked.nonqb { background: #1f4a6b; }

/* hover bio tooltip */
.hovertip { position: fixed; z-index: 50; background: #0c1116; border: 1px solid var(--accent); border-radius: 8px;
  padding: 8px 10px; font-size: 12px; min-width: 150px; box-shadow: 0 6px 24px rgba(0,0,0,.55); pointer-events: none; }
.hovertip .ht-name { font-weight: 700; font-size: 13px; margin-bottom: 4px; color: var(--accent); }
.hovertip > div { display: flex; justify-content: space-between; gap: 16px; padding: 1px 0; }
.hovertip > div span { color: var(--muted); }
.hovertip .ht-stack { display: block; margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--line); }
.hovertip .ht-stack > b { color: #67e8f9; display: block; margin-bottom: 2px; }
.hovertip .ht-stack .ht-own { padding: 1px 0; font-size: 11.5px; }
.hovertip .ht-stack .ht-own .o { color: var(--accent); font-weight: 700; margin-right: 4px; }
.hovertip .ht-po { display: flex; gap: 8px; align-items: center; margin: 2px 0 5px; padding-bottom: 5px; border-bottom: 1px solid var(--line); font-size: 11.5px; }
.hovertip .ht-po > b { color: #67e8f9; }
.hovertip .ht-po > span { color: var(--text); }
/* hovering a player outlines the upcoming players who share one of his wk15-17 opponents */
.cell.poshare { outline: 2px solid #22d3ee; outline-offset: -2px; }
/* hovering a player highlights his NFL teammates on the board (light red) */
.cell.teammate-hl { outline: 2px solid #fca5a5; outline-offset: -2px; box-shadow: inset 0 0 14px rgba(252,165,165,.28); }

/* player info / schedule popup */
.dlg.info { width: 900px; max-width: 96vw; position: relative; max-height: 90vh; overflow-y: auto; }
#draftModal .dlg.info { width: fit-content; min-width: 760px; max-width: 95vw; }   /* grows with the schedule grid */
.dlg-x { position: absolute; top: 8px; right: 10px; background: none; border: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
.dlg-x:hover { color: var(--text); }
.dlg.info h3 { margin: 0 0 12px; padding-right: 24px; }
.dlg.info h3 small { color: var(--muted); font-weight: 400; font-size: 13px; }
.istats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3px 14px; margin-bottom: 14px; }
.istats > div { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; border-bottom: 1px solid #20272e; padding: 2px 0; }
.istats > div span { color: var(--muted); }
.schedhead { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.schedhead small { display: block; color: var(--muted); font-weight: 400; font-size: 11px; }
.stattbl { width: 100%; border-collapse: collapse; font-size: 12px; margin: 0 0 14px; }
.stattbl td { padding: 3px 6px; border-bottom: 1px solid #20272e; vertical-align: top; }
.stattbl .yr { font-weight: 700; color: var(--accent); width: 38px; }
.stattbl .gp { color: var(--muted); width: 34px; text-align: right; }
.stattbl .pass { color: var(--qb); } .stattbl .rush { color: var(--rb); } .stattbl .rec { color: var(--wr); }
.schedgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.swk { border-radius: 5px; padding: 4px 2px; text-align: center; color: #eaf2f8; border: 1px solid rgba(255,255,255,.08); }
.swk .wk { display: block; font-size: 9.5px; color: rgba(255,255,255,.7); }
.swk .op { display: block; font-size: 12px; font-weight: 700; }
.swk.bye { background: #2a333b; color: var(--muted); }
.swk.po { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
/* rich draft-confirm popup */
.dc-clock { font-weight: 700; margin: -4px 0 12px; }
.dc-clock .mine { color: var(--accent); }
.dc-clock .dc-not { color: #f5a623; font-weight: 600; }
/* warning chips, stacked just above the Draft button (bottom-right) */
.dc-warns { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; margin: 10px 0 6px; }
.dc-warns:empty { margin: 0; }
.dc-warn { font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 6px; }
.dc-warn.bye { background: #d9a400; color: #1a1205; }
.dc-warn.team { background: #e67e22; color: #1a0e02; }
.dc-empty { margin: 8px 0 14px; }
.dctbl { width: 100%; border-collapse: collapse; margin-bottom: 10px; font-size: 12.5px; }
.dctbl th { text-align: left; color: var(--muted); font-weight: 600; font-size: 11px; padding: 3px 6px; border-bottom: 1px solid var(--line); }
.dctbl td { padding: 4px 6px; border-bottom: 1px solid #20272e; }
.dctbl td small { color: var(--muted); }
.dctbl td .mbub { display: inline-block; min-width: 40px; text-align: center; border-radius: 4px; padding: 2px 5px;
  font-size: 10.5px; font-weight: 700; line-height: 1.15; color: #eaf2f8; border: 1px solid rgba(255,255,255,.10); }
.dctbl td .mbub.bye { background: #2a333b; color: var(--muted); }
.dctbl td .mbub.na { background: transparent; border: none; color: var(--muted); }
.dctbl tr.byeclash td { background: rgba(217,164,0,.30); }       /* shares the candidate's bye */
.dctbl tr.sameteam td { background: rgba(230,126,34,.28); }      /* same NFL team as the candidate */
.dctbl tr.byeclash td small, .dctbl tr.sameteam td small { color: #e6edf3; }
.dc-legend { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.dc-legend .sw { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; margin-right: 2px; }
.dc-legend .sw.byeclash { background: rgba(217,164,0,.6); }
.dc-legend .sw.sameteam { background: rgba(230,126,34,.6); }
.dc-section { font-size: 13px; font-weight: 700; margin: 0 0 6px; }
.dc-section small { color: var(--muted); font-weight: 400; }
.impact-head { font-size: 13px; margin: 2px 0 6px; }
.impact-head b { font-size: 15px; } .impact-head small { color: var(--muted); }
table.impact { width: 100%; border-collapse: collapse; font-size: 12px; }
table.impact th { text-align: left; color: var(--muted); font-weight: 400; border-bottom: 1px solid var(--line); padding: 2px 6px; }
table.impact td { padding: 2px 6px; border-bottom: 1px solid #20272e; }
table.impact td.r, table.impact th.r { text-align: right; }
table.impact td small { color: var(--muted); }
table.impact tr.tot td { font-weight: 700; border-top: 1px solid var(--line); border-bottom: none; }
table.impact .pos { color: #4ade80; } table.impact .neg { color: #f87171; } table.impact .mu { color: var(--muted); }
/* two-column popup body: left = whole team, right = roster/bye + schedule */
.dc-cols { display: grid; grid-template-columns: 320px max-content; gap: 16px; align-items: start; }   /* left = team list (depth+proj), right grows with the grid */
/* draft-popup multi-player weekly schedule grid (candidate + same-position roster) */
.posgridwrap { margin-top: 4px; }   /* no inner scroll — let the grid widen its column so the popup grows */
.posgrid { border-collapse: collapse; font-size: 11px; }
.posgrid th { padding: 3px 5px; text-align: center; vertical-align: top; border-bottom: 1px solid var(--line); font-size: 11px; color: var(--text); white-space: nowrap; }
.posgrid th.cand { color: var(--accent); }
.posgrid th small { display: block; color: var(--muted); font-weight: 400; font-size: 9.5px; }
.posgrid th .ss { display: inline-block; margin-top: 2px; min-width: 16px; padding: 0 4px; border-radius: 3px; color: #fff; font-weight: 700; font-size: 10px; }
.posgrid td { padding: 2px 5px; text-align: center; color: #eef5fb; font-size: 10.5px; border: 1px solid rgba(0,0,0,.3); white-space: nowrap; }
.posgrid td b { font-weight: 700; }
.posgrid td.bye { background: #0b0f12; color: var(--muted); font-size: 9px; }
.posgrid .wk { color: var(--muted); background: transparent; border: none; font-size: 10px; padding: 2px 5px; }
.posgrid tr.po .wk { color: var(--accent); font-weight: 700; }
.posgrid tr.po td:not(.wk) { box-shadow: inset 0 -2px 0 rgba(245,166,35,.35); }
/* separator column between position groups (leaves room for a future score metric) */
.posgrid td.sep, .posgrid th.sep { border: none; background: transparent; min-width: 16px; padding: 0; }
/* two of your players facing each other in a playoff week (15–17) */
.posgrid td.vs { outline: 2px solid #fff; outline-offset: -2px; font-weight: 700; }
.dc-left, .dc-right { min-width: 0; }
.dc-team { max-height: 300px; overflow-y: auto; }   /* ~10 rows, then scroll */
.dc-team .tp { display: grid; grid-template-columns: 32px 1fr 46px 42px 40px; gap: 6px; align-items: center;
  padding: 3px 7px; border-radius: 4px; margin-bottom: 2px; font-size: 12.5px; border: 1px solid rgba(255,255,255,.06); }
.dc-team .tp .pr { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); }
.dc-team .tp .nm small { color: var(--muted); }
.dc-team .tp .dc { text-align: center; font-size: 11px; opacity: .85; white-space: nowrap; }   /* depth chart */
.dc-team .tp .pj { text-align: right; font-weight: 700; }                                       /* projected pts */
.dc-team .tp .adp { font-weight: 700; text-align: right; }
.dc-team .tp .dpick { color: var(--muted); font-weight: 700; text-align: right; }
.dc-team .tp.hdr { background: none; border: none; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 0; }
.dc-team .tp.mine .dc, .dc-team .tp.mine .pj { color: #fff; }
.dc-team .tp.cand { outline: 2px solid var(--accent); outline-offset: -1px; }
.dc-team .tp.drafted .nm { text-decoration: line-through; color: #aeb6bd; }
/* position shades, matching the board: available fuller, drafted lighter */
.dc-team .tp.QB.avail { background: color-mix(in oklab, var(--qb) 42%, #11181f); } .dc-team .tp.QB.drafted { background: color-mix(in oklab, var(--qb) 15%, #11181f); }
.dc-team .tp.RB.avail { background: color-mix(in oklab, var(--rb) 42%, #11181f); } .dc-team .tp.RB.drafted { background: color-mix(in oklab, var(--rb) 15%, #11181f); }
.dc-team .tp.WR.avail { background: color-mix(in oklab, var(--wr) 42%, #11181f); } .dc-team .tp.WR.drafted { background: color-mix(in oklab, var(--wr) 15%, #11181f); }
.dc-team .tp.TE.avail { background: color-mix(in oklab, var(--te) 42%, #11181f); } .dc-team .tp.TE.drafted { background: color-mix(in oklab, var(--te) 15%, #11181f); }
/* players I drafted on this team -> brightest, so they stand out from everyone else */
.dc-team .tp.QB.mine { background: color-mix(in oklab, var(--qb) 70%, #11181f); }
.dc-team .tp.RB.mine { background: color-mix(in oklab, var(--rb) 70%, #11181f); }
.dc-team .tp.WR.mine { background: color-mix(in oklab, var(--wr) 70%, #11181f); }
.dc-team .tp.TE.mine { background: color-mix(in oklab, var(--te) 70%, #11181f); }
.dc-team .tp.mine { box-shadow: inset 3px 0 0 #fff; }
.dc-team .tp.mine .nm { color: #fff; font-weight: 700; text-decoration: none; }
.dc-team .tp.mine .pr, .dc-team .tp.mine .dpick { color: #f0f4f8; }
.dc-mates { max-height: 170px; overflow-y: auto; }
.dc-mates .mrow { display: grid; grid-template-columns: 42px 1fr auto; gap: 6px; align-items: center; padding: 3px 2px; border-bottom: 1px solid #20272e; font-size: 12.5px; }
.dc-mates .mrow .pos { min-width: 34px; text-align: center; padding: 1px 4px; border-radius: 4px; font-weight: 700; font-size: 11px; color: #0b0f12; }
.dc-mates .mrow .nm small { color: var(--muted); }
.dc-mates .mrow .adp { font-weight: 700; }
/* dialog */
.dlg-back { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 20; }
.dlg { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 20px; width: 360px; }
.dlg h3 { margin: 0 0 14px; }
.dlg label { display: block; margin-bottom: 12px; color: var(--muted); font-size: 13px; }
.dlg label input, .dlg label select { display: block; width: 100%; margin-top: 4px; }
.dlg-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.dlg-btns .primary { background: var(--accent); color: #11181f; border-color: var(--accent); font-weight: 600; }

/* ---- draft notes (top-bar dropdown) ---- */
#notesBtn.has { background: #fde68a; border-color: #f59e0b; color: #7c2d12; font-weight: 700; }
.notesdrop { width: 320px; max-height: 60vh; overflow-y: auto; }
.notesdrop textarea { width: 100%; box-sizing: border-box; resize: vertical; font: 13px system-ui, sans-serif;
  background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 6px; }
.noteadd { margin: 6px 0 8px; text-align: right; }
.noteitem { border-top: 1px solid var(--line); padding: 6px 0; }
.notemeta { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--muted); }
.notedel { border: 0; background: none; cursor: pointer; color: #ef6a6a; font-size: 12px; padding: 0 2px; }
.notetext { font-size: 13px; color: var(--text); white-space: pre-wrap; word-break: break-word; margin-top: 2px; }

/* ---- field combos panel (mirrors .pxrow; rows tinted by position) ---- */
#combos { padding: 3px 0; }
.cbsec { margin-bottom: 8px; }
.cbhead { font-size: 11px; font-weight: 700; padding: 5px 10px 5px 24px; color: var(--text);
  cursor: pointer; position: relative; user-select: none; }
.cbhead:hover { background: rgba(255,255,255,.04); }
.cbhead::before { content: "▾"; position: absolute; left: 9px; top: 5px; color: var(--muted); font-size: 10px; transition: transform .12s; }
.cbsec.collapsed .cbhead::before { transform: rotate(-90deg); }
.cbsec.collapsed .cblist { display: none; }
.cbden { color: var(--muted); font-weight: 400; }
.cblist { max-height: 186px; overflow-y: auto; }   /* ~7 rows + scroll */
.cbrow.cbzero { opacity: .5; }
.cbrow.cbzero .cbpct { color: var(--muted); font-weight: 400; }
.cbrow { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 4px 10px; font-size: 12px; overflow: hidden; }
.cbrow.QB { background: color-mix(in oklab, var(--qb) 10%, transparent); }
.cbrow.RB { background: color-mix(in oklab, var(--rb) 10%, transparent); }
.cbrow.WR { background: color-mix(in oklab, var(--wr) 10%, transparent); }
.cbrow.TE { background: color-mix(in oklab, var(--te) 10%, transparent); }
.cbbar { position: absolute; left: 0; top: 0; bottom: 0; z-index: 0; background: rgba(255,255,255,.06); }
.cbrow.QB .cbbar { background: color-mix(in oklab, var(--qb) 38%, transparent); }
.cbrow.RB .cbbar { background: color-mix(in oklab, var(--rb) 38%, transparent); }
.cbrow.WR .cbbar { background: color-mix(in oklab, var(--wr) 38%, transparent); }
.cbrow.TE .cbbar { background: color-mix(in oklab, var(--te) 38%, transparent); }
.cbname { position: relative; z-index: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cbpos { color: var(--muted); font-size: 10px; margin-left: 4px; }
.cbpct { position: relative; z-index: 1; font-weight: 700; white-space: nowrap; }
.cbrow.mine { outline: 1px solid color-mix(in oklab, var(--accent) 55%, transparent); outline-offset: -1px; }
.cbrow.mine .cbname { color: var(--accent); }

/* power-rank box in the SOS row (replaces the old "SOS" label) */
.sos.pr { font-weight: 800; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); margin-right: 1px; }