/* Perfect Lineup V2 — Extras components (uses tokens.css). P1 per LAYOUT-SPEC Extras. */
.games{height:48px;display:flex;gap:8px;align-items:center;padding:0 16px;overflow-x:auto;background:var(--surface-1);border-bottom:1px solid var(--border)}
.game{flex:none;display:flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:var(--radius-pill);background:var(--surface-2);border:1px solid var(--border);font-size:13px;font-weight:700;color:var(--text);cursor:pointer}
.game .meta{font-family:var(--font-mono);font-size:11px;font-weight:400;color:var(--text-muted)} /* spread/total: low-key, no CTA */
.game .time{font-family:var(--font-mono);font-weight:600;color:var(--text-2)}
.game .wx{font-size:12px}.game .wx.warn{color:var(--warn)}
.game.live{border-color:rgba(198,244,50,.5)}
.game.live .dot{width:8px;height:8px;border-radius:50%;background:var(--pl-lime);animation:pl-pulse 1.4s infinite}
.game.live .score{font-family:var(--font-mono);color:var(--pl-lime)}
.game.final{opacity:.6}.game.final .score{font-family:var(--font-mono);color:var(--text-2)}
.game.selected{background:var(--pl-lime);border-color:var(--pl-lime);color:var(--text-on-accent)}
.game.selected .meta,.game.selected .time{color:var(--text-on-accent)}
.game:focus-visible{outline:none;box-shadow:var(--glow-lime)}
@keyframes pl-pulse{0%{box-shadow:0 0 0 0 rgba(198,244,50,.7)}70%{box-shadow:0 0 0 8px rgba(198,244,50,0)}100%{box-shadow:0 0 0 0 rgba(198,244,50,0)}}
@media (prefers-reduced-motion:reduce){.game.live .dot{animation:none}}
/* Injury pills (text label, not color only) */
.inj{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.5px;padding:1px 6px;border-radius:4px;margin-left:6px;vertical-align:middle}
.inj.q{color:var(--warn);border:1px solid var(--warn)}.inj.d{color:#0A2A21;background:var(--warn)}
.inj.out{color:#fff;background:var(--danger)}
.row.is-out{opacity:.5}.row.is-out b{text-decoration:line-through}
/* Late-swap: game started */
.started{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:var(--text-muted);border:1px dashed var(--text-muted);border-radius:4px;padding:1px 6px;margin-left:6px}
.row.is-started{opacity:.65}.row.is-started .ic{pointer-events:none;opacity:.3}
/* Breaking news feed: right-rail drawer (desktop 360px) / bottom-sheet tab (mobile). Text only, no avatars or logos. */
.news{position:absolute;top:0;right:0;bottom:0;width:360px;background:var(--surface-1);border-left:1px solid var(--border);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;z-index:20}
.news-h{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--border)}
.news-h b{font-size:13px;letter-spacing:2px;text-transform:uppercase}.news-h .count{font-family:var(--font-mono);font-size:11px;background:var(--pl-lime);color:var(--text-on-accent);border-radius:999px;padding:1px 7px}
.news-h .mark{margin-left:auto;background:none;border:0;color:var(--pl-lime);font-weight:700;font-size:12px;cursor:pointer}
.news-item{position:relative;padding:12px 16px 12px 28px;border-bottom:1px solid var(--grid-line)}
.news-item .new{position:absolute;left:12px;top:17px;width:8px;height:8px;border-radius:50%;background:var(--pl-lime)}
.news-item .src{font-size:12px;color:var(--text-muted)}.news-item .src time{font-family:var(--font-mono);margin-left:6px}
.news-item .hl{font-size:14px;font-weight:600;margin:4px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.news-item.read{opacity:.6}
.ptag{font-size:11px;font-weight:700;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:2px 8px;text-decoration:none}
.ptag:hover,.ptag:focus-visible{border-color:var(--pl-lime);outline:none}
.cat{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;border-radius:4px;padding:2px 6px;margin-left:6px}
.cat.injury{color:var(--danger);border:1px solid var(--danger)}.cat.trade{color:var(--info);border:1px solid var(--info)}.cat.depth{color:var(--warn);border:1px solid var(--warn)}
.toast{position:absolute;left:50%;bottom:56px;transform:translateX(-50%);background:var(--surface-3);border:1px solid var(--pl-orange);border-radius:12px;padding:12px 16px;box-shadow:var(--shadow-lg);font-weight:600;display:flex;gap:12px;align-items:center;z-index:30}
.toast button{background:var(--pl-orange);color:var(--text-on-accent);border:0;border-radius:8px;padding:6px 10px;font-weight:800}
@media (max-width:639px){.news{top:auto;left:0;width:auto;height:70%;border-left:0;border-top:1px solid var(--border);border-radius:var(--radius-xl) var(--radius-xl) 0 0}}
/* Matchup pill 1-5. Always number + dots + word, not color alone. Tokens --mu-1..5 in tokens.css */
.mu{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:800;border:1px solid currentColor;background:rgba(0,0,0,.15);white-space:nowrap}
.mu .n{font-family:var(--font-mono)}.mu .dots{letter-spacing:1px;font-size:9px}
.mu[data-m="1"]{color:var(--mu-1)}.mu[data-m="2"]{color:var(--mu-2)}.mu[data-m="3"]{color:var(--mu-3);border-style:dashed}
.mu[data-m="4"]{color:var(--mu-4)}.mu[data-m="5"]{color:var(--text-on-accent);background:var(--mu-5);border-color:var(--mu-5);box-shadow:var(--mu-5-glow)}
.mu.compact .w{display:none}
.tip{position:absolute;background:var(--surface-3);border:1px solid var(--border);border-radius:10px;padding:8px 10px;font-size:12px;box-shadow:var(--shadow-lg);max-width:240px;color:var(--text-2)}
/* Sortable headers */
.th-sort{display:inline-flex;align-items:center;gap:4px;cursor:pointer;color:var(--text-muted);font-size:11px;letter-spacing:1px;font-weight:700;background:none;border:0;padding:4px 6px;border-radius:6px}
.th-sort .ar{opacity:.35;font-size:10px}.th-sort:hover{color:var(--text)}
.th-sort[aria-sort="ascending"],.th-sort[aria-sort="descending"]{color:var(--pl-lime);background:rgba(198,244,50,.08)}
.th-sort[aria-sort="ascending"] .ar,.th-sort[aria-sort="descending"] .ar{opacity:1}
/* Value graph (salary $K vs proj), dots tinted by matchup */
.vg{background:var(--surface-1);border:1px solid var(--border);border-radius:16px;padding:16px;position:relative}
.vg .axis{stroke:var(--border)}.vg .gridl{stroke:var(--grid-line)}.vg .lbl{fill:var(--text-muted);font:11px var(--font-mono)}
.vg .vline{stroke:var(--value-line);stroke-dasharray:6 5;stroke-width:1.5}.vg .vline.smash{stroke:var(--pl-lime);stroke-dasharray:2 4}
.vg .dot{stroke:var(--bg);stroke-width:1.5}.vg .dot.hl{stroke:#fff;stroke-width:2.5}
.vg .hover{position:absolute;background:var(--surface-3);border:1px solid var(--pl-lime);border-radius:12px;padding:10px 12px;box-shadow:var(--shadow-lg);font-size:12px;min-width:190px}