:root {
    --bg: #0e1116;
    --panel: #161b22;
    --border: #30363d;
    --text: #e6edf3;
    --muted: #8b949e;
    --accent: #58a6ff;
    --t1: #2ea043;
    --t2: #3fb950;
    --t3: #d29922;
    --t4: #db6d28;
    --t5: #f85149;
    --t6: #6e7681;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
}

h1 { margin: 0 0 1rem 0; font-size: 1.4rem; }
h2 { margin: 1rem 0 0.5rem 0; font-size: 1.1rem; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.page { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
    display: flex; align-items: center; gap: 0.75rem 2rem; flex-wrap: wrap;
    padding: 0.75rem 1.25rem;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
}
.brand { font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: 0.55rem; }
.brand-logo { height: 1.9rem; width: 1.9rem; border-radius: 6px; object-fit: cover; vertical-align: middle; }
.nav { display: flex; gap: 0.5rem 0.75rem; flex-wrap: wrap; }
.nav a {
    color: var(--muted);
    padding: 0.35rem 0.6rem;
    border-radius: 4px;
}
.nav a.active, .nav a:hover { color: var(--text); background: rgba(255,255,255,0.05); }

main { padding: 1.25rem; flex: 1; }

.toolbar {
    display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.toolbar label { display: flex; align-items: center; gap: 0.4rem; }
.toolbar select, .toolbar input {
    background: var(--bg); color: var(--text);
    border: 1px solid var(--border); border-radius: 4px;
    padding: 0.25rem 0.5rem;
}
.toolbar .hint { color: var(--muted); margin-left: auto; }
.toolbar label.cb { gap: 0.3rem; }

.board {
    width: 100%; border-collapse: collapse;
    background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
    overflow: hidden;
}
.board th, .board td { padding: 0.4rem 0.7rem; text-align: left; border-bottom: 1px solid var(--border); }
.board th { background: rgba(255,255,255,0.03); font-weight: 600; color: var(--muted); position: sticky; top: 0; }
.board th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.board th.sortable:hover { color: var(--text); }

/* On-the-clock pick panel on /board — bottom sheet so the header clock stays visible.
   z-index 60 sits above .pick-reveal (50) so it stays usable during the reveal animation. */
.board-picker {
    position: fixed; z-index: 60;
    left: 50%; transform: translateX(-50%);
    bottom: 0; width: min(720px, 100%); max-height: 68vh;
    display: flex; flex-direction: column;
    background: var(--panel); border: 1px solid var(--border);
    border-bottom: none; border-radius: 12px 12px 0 0;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.55);
    animation: bpSlideUp 0.18s ease-out;
}
@keyframes bpSlideUp { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }
.bp-head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--border);
}
.bp-title { font-size: 0.95rem; }
.bp-close {
    background: transparent; color: var(--muted); border: 1px solid var(--border);
    border-radius: 6px; padding: 0.15rem 0.5rem; cursor: pointer; font-size: 0.9rem;
}
.bp-close:hover { color: var(--text); }
.bp-note { padding: 0.4rem 0.85rem; font-size: 0.82rem; color: var(--muted); background: rgba(255,255,255,0.03); }
.bp-filters { display: flex; gap: 0.5rem; padding: 0.6rem 0.85rem; }
.bp-filters select { flex: none; }
.bp-filters input { flex: 1; min-width: 0; }
.bp-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 0.5rem 0.6rem; }
.bp-row {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.4rem 0.35rem; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.bp-row.armed { background: rgba(88,166,255,0.12); border-radius: 6px; }
.bp-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-meta { font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.bp-select, .bp-cancel {
    background: transparent; color: var(--muted); border: 1px solid var(--border);
    border-radius: 6px; padding: 0.25rem 0.6rem; cursor: pointer; font: inherit; font-size: 0.8rem;
}
.bp-select:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
.bp-select:disabled { opacity: 0.35; cursor: not-allowed; }
.bp-confirm { font-size: 0.8rem; padding: 0.25rem 0.7rem; }
.bp-empty { padding: 1rem; text-align: center; color: var(--muted); font-size: 0.85rem; }
.open-picker {
    background: var(--accent); color: #0a0f1d; border: none; border-radius: 6px;
    padding: 0.35rem 0.7rem; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.open-picker.my-turn { background: var(--t1); color: #06210d; animation: yourTurnPulse 1.6s ease-in-out infinite; }
/* Shorter on narrow screens: the nav wraps to two rows there, pushing the board header (and
   the live pick clock) down — the sheet must stay clear of it. */
@media (max-width: 1100px) { .board-picker { width: 100%; max-height: 62vh; } }

/* Per-team login: who you're drafting as, and whether it's your turn */
.team-badge {
    background: rgba(88,166,255,0.15); color: var(--accent);
    border: 1px solid rgba(88,166,255,0.4); border-radius: 6px;
    padding: 0.25rem 0.6rem; font-size: 0.85rem; white-space: nowrap;
}
.your-turn {
    background: var(--t1); color: #06210d; font-weight: 800;
    border-radius: 6px; padding: 0.25rem 0.6rem; font-size: 0.85rem;
    animation: yourTurnPulse 1.6s ease-in-out infinite;
}
@keyframes yourTurnPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.65; } }

/* Team access codes on /teams */
.code-cell { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 0.04em; }
.code-regen {
    background: transparent; color: var(--muted); border: 1px solid var(--border);
    border-radius: 4px; padding: 0.1rem 0.4rem; font-size: 0.7rem; cursor: pointer; margin-left: 0.4rem;
}
.code-regen:hover { color: var(--text); border-color: var(--accent); }

/* Injury badge (FantasyPros injury report) */
.inj-badge { display: inline-block; margin-left: 0.35rem; font-size: 0.6rem; font-weight: 800; padding: 0.05rem 0.3rem; border-radius: 4px; vertical-align: middle; cursor: help; letter-spacing: 0.02em; }
.inj-badge.inj-out { background: #f85149; color: #fff; }
.inj-badge.inj-d { background: #db6d28; color: #fff; }
.inj-badge.inj-q { background: #d29922; color: #0a0f1d; }
.inj-badge.inj-note { background: #3d5a80; color: #fff; }

/* Rosters page — one card per team (keepers + draft picks) */
.rosters { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; align-items: start; }
.roster-card { background: var(--panel); border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: 10px; overflow: hidden; }
.roster-card.mine { box-shadow: 0 0 0 1px var(--accent); }
.roster-card-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--border); }
.roster-avatar { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: none; }
.roster-avatar.placeholder { display: flex; align-items: center; justify-content: center; font-weight: 800; color: #0a0f1d; }
.roster-name { font-weight: 700; }
.roster-owner { font-size: 0.78rem; color: var(--muted); }
.roster-counts { opacity: 0.85; }
.roster-list { padding: 0.35rem 0.5rem; display: flex; flex-direction: column; gap: 0.1rem; }
.roster-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.22rem 0.15rem; font-size: 0.9rem; }
.roster-row.keeper { opacity: 0.92; }
.roster-row .rp-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roster-row .rp-pick { font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.roster-empty { color: var(--muted); font-size: 0.85rem; padding: 0.4rem 0.2rem; }
.pp { font-size: 0.62rem; font-weight: 800; padding: 0.12rem 0.35rem; border-radius: 4px; color: #fff; min-width: 32px; text-align: center; }
.pp.pos-QB { background: #2c7fb8; }
.pp.pos-RB { background: #3fb950; color: #0a0f1d; }
.pp.pos-WR { background: #f85149; }
.pp.pos-TE { background: #db6d28; }
.pp.pos-K { background: #6e7681; }
.pp.pos-DST { background: #8957e5; }
.board tbody tr:hover { background: rgba(255,255,255,0.03); }

.tier-1 td:first-child { border-left: 3px solid var(--t1); }
.tier-2 td:first-child { border-left: 3px solid var(--t2); }
.tier-3 td:first-child { border-left: 3px solid var(--t3); }
.tier-4 td:first-child { border-left: 3px solid var(--t4); }
.tier-5 td:first-child { border-left: 3px solid var(--t5); }
.tier-6 td:first-child { border-left: 3px solid var(--t6); }

.tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}
.tier-col h2 { color: var(--accent); }
.tier {
    background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
    margin-bottom: 0.75rem; overflow: hidden;
}
.tier-header {
    padding: 0.4rem 0.7rem;
    font-weight: 600;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid var(--border);
}
.tier ol { margin: 0; padding: 0.3rem 0.7rem 0.5rem 2rem; }
.tier ol li { display: grid; grid-template-columns: 1fr auto auto; gap: 0.5rem; padding: 0.15rem 0; }
.pname { font-weight: 500; }
.pteam { color: var(--muted); font-size: 0.85rem; }
.ppts { color: var(--muted); font-variant-numeric: tabular-nums; }

.tier.tier-1 { border-left: 3px solid var(--t1); }
.tier.tier-2 { border-left: 3px solid var(--t2); }
.tier.tier-3 { border-left: 3px solid var(--t3); }
.tier.tier-4 { border-left: 3px solid var(--t4); }
.tier.tier-5 { border-left: 3px solid var(--t5); }
.tier.tier-6 { border-left: 3px solid var(--t6); }

button.btn-primary {
    background: var(--accent); color: #0d1117; border: none;
    padding: 0.4rem 0.9rem; border-radius: 4px; font-weight: 600; cursor: pointer;
    margin-left: 0.5rem;
}
button.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.add-actions { display: flex; gap: 0.35rem; justify-content: flex-end; }
.over-keepers { color: var(--t5); font-weight: 700; }
details.bulk-add { margin: 0.75rem 0; }
details.bulk-add > summary { cursor: pointer; }
.msg { padding: 0.5rem 0.75rem; border-radius: 4px; }
.msg.ok { background: rgba(46, 160, 67, 0.15); border: 1px solid var(--t1); }
.msg.err { background: rgba(248, 81, 73, 0.15); border: 1px solid var(--t5); }

code {
    background: rgba(255,255,255,0.05);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-size: 0.85rem;
}

pre.raw {
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border);
    padding: 0.5rem;
    border-radius: 4px;
    max-height: 320px;
    overflow: auto;
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-word;
}
details > summary { cursor: pointer; }

.board tr.kept-row { opacity: 0.35; text-decoration: line-through; }
.board tr.kept-row.drafted { opacity: 0.25; }
.board tr.mine { background: rgba(88, 166, 255, 0.08); }
.board tr.kept td { color: var(--muted); }

.form-row { display: flex; gap: 0.75rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 0.75rem; }
.form-row textarea {
    background: var(--bg); color: var(--text);
    border: 1px solid var(--border); border-radius: 4px;
    padding: 0.4rem 0.6rem; min-width: 260px; font-family: inherit;
}
.form-row input[type="text"], .form-row input:not([type]) {
    background: var(--bg); color: var(--text);
    border: 1px solid var(--border); border-radius: 4px;
    padding: 0.35rem 0.6rem;
}
.form-row label { display: flex; align-items: center; gap: 0.4rem; }
.form-row label.cb { gap: 0.3rem; }
.form-row button {
    background: transparent; color: var(--text);
    border: 1px solid var(--border); border-radius: 4px;
    padding: 0.35rem 0.7rem; cursor: pointer;
}
.form-row input[type="color"] {
    width: 3rem; height: 2rem; padding: 0; border: 1px solid var(--border); border-radius: 4px;
}
.team-avatar-preview {
    width: 60px; height: 60px; border-radius: 50%;
    object-fit: cover;
}
.team-avatar-preview.placeholder {
    color: #0a0f1d; font-weight: 800; font-size: 1.6rem;
    display: flex; align-items: center; justify-content: center;
}

.keeper-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}
.keeper-card {
    background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
    overflow: hidden;
}
.keeper-card.mine { border-color: var(--accent); }
.keeper-card header {
    padding: 0.5rem 0.75rem; background: rgba(255,255,255,0.03);
    border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: baseline;
}
.keeper-card h2 { margin: 0; font-size: 1rem; }
.keeper-card ol { margin: 0; padding: 0.5rem 0.75rem 0.6rem 2rem; }
.keeper-card ol li {
    display: grid; grid-template-columns: 1fr auto auto auto;
    gap: 0.5rem; padding: 0.2rem 0; align-items: baseline;
}
.keeper-card li.confirmed { color: var(--t2); }
.keeper-card li.predicted { color: var(--text); }
.keeper-card .badge { color: var(--t2); font-weight: 600; }

.draft-status {
    display: flex; align-items: center; gap: 1rem;
    padding: 0.75rem 1rem; margin-bottom: 1rem;
    background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
}
.draft-status .pick-info { display: flex; flex-direction: column; gap: 0.15rem; }
.draft-status .round { color: var(--muted); font-size: 0.9rem; }
.draft-status .onclock { color: var(--accent); }
.draft-status .draft-actions { margin-left: auto; display: flex; gap: 0.5rem; }
.draft-status .draft-actions button {
    background: transparent; color: var(--text);
    border: 1px solid var(--border); border-radius: 4px;
    padding: 0.35rem 0.7rem; cursor: pointer;
}
.draft-status .draft-actions button:disabled { opacity: 0.4; cursor: not-allowed; }
.run-alert {
    background: rgba(248, 81, 73, 0.15);
    border: 1px solid var(--t5);
    color: var(--t5);
    padding: 0.4rem 0.75rem; border-radius: 4px;
    font-weight: 600;
}

.draft-layout { display: grid; grid-template-columns: 1fr 320px; gap: 1rem; }
.draft-side h2 { margin-top: 0; }
.draft-side h3 { margin: 0.75rem 0 0.25rem 0; font-size: 0.95rem; color: var(--accent); }
.best-avail {
    background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
    padding: 0.4rem 0.75rem 0.5rem 0.75rem; margin-bottom: 0.5rem;
}
.best-avail ol { margin: 0; padding-left: 1.4rem; }
.best-avail li {
    display: grid; grid-template-columns: 1fr auto auto; gap: 0.5rem;
    padding: 0.1rem 0;
}
.recent {
    background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
    padding: 0.5rem 0.75rem 0.75rem 1.75rem; margin: 0;
    list-style: none;
}
.recent li {
    display: grid; grid-template-columns: 2rem 1fr auto auto; gap: 0.4rem; align-items: center;
    padding: 0.15rem 0;
}
.recent li.fixing { background: rgba(210,153,34,0.18); border-radius: 4px; }
.recent .rp-no { color: var(--muted); font-variant-numeric: tabular-nums; }
.recent .rp-fix {
    background: transparent; border: none; color: var(--muted); cursor: pointer;
    padding: 0 0.25rem; font-size: 0.9rem; line-height: 1;
}
.recent .rp-fix:hover { color: #d29922; }
.correcting-banner {
    background: rgba(210,153,34,0.15); border: 1px solid #d29922; border-radius: 6px;
    padding: 0.5rem 0.75rem; margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.6rem;
}
.correcting-banner button {
    margin-left: auto; background: transparent; color: var(--text);
    border: 1px solid var(--border); border-radius: 4px; padding: 0.2rem 0.6rem; cursor: pointer;
}

@media (max-width: 1100px) {
    .draft-layout { grid-template-columns: 1fr; }
}

/* ===== Draft Party Board ===== */
.party-shell {
    display: flex; flex-direction: column;
    min-height: 100vh; padding: 0.75rem;
    background: radial-gradient(circle at top, #14213d 0%, #0a0f1d 60%);
    color: #f6f8fa;
    gap: 0.75rem;
    position: relative;
    overflow: hidden;
}

.party-header {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: 0.5rem 1rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
}
.party-header .banner { display: flex; gap: 0.75rem; align-items: baseline; flex: 1; flex-wrap: wrap; }
.party-header .pill {
    padding: 0.3rem 0.7rem; border-radius: 999px;
    background: rgba(88,166,255,0.18); color: #79b8ff;
    font-weight: 700; font-size: 0.85rem; letter-spacing: 0.05em;
}
.party-header .onclock { font-size: 1.1rem; color: #c9d1d9; }
.party-actions { display: flex; gap: 0.5rem; align-items: center; }
.enable-sound {
    background: #d29922; color: #1c1300; font-weight: 800;
    border: none; border-radius: 6px; padding: 0.35rem 0.75rem;
    cursor: pointer; animation: enable-sound-pulse 1.6s ease-in-out infinite;
}
.enable-sound:hover { background: #e3a92b; }
@keyframes enable-sound-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(210,153,34,0.5); }
    50% { box-shadow: 0 0 0 6px rgba(210,153,34,0); }
}
.party-actions .nick {
    background: rgba(0,0,0,0.3); color: #f6f8fa;
    border: 1px solid rgba(255,255,255,0.1); border-radius: 6px;
    padding: 0.3rem 0.6rem; width: 10rem;
}

/* Pick clock + draft status badges */
.clock {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 0.2rem 0.7rem;
    border-radius: 8px;
    background: rgba(88,166,255,0.18);
    color: #79b8ff;
}
.clock.big { font-size: 1.6rem; padding: 0.25rem 0.9rem; }
.clock.warning { background: rgba(210,153,34,0.2); color: #ffd93d; }
.clock.expired {
    background: rgba(248,81,73,0.22); color: #ff7b72;
    animation: clockFlash 0.7s steps(1) infinite;
}
@keyframes clockFlash {
    0%, 100% { background: rgba(248,81,73,0.22); }
    50% { background: rgba(248,81,73,0.5); }
}
.status-badge {
    padding: 0.2rem 0.7rem; border-radius: 999px;
    font-weight: 700; font-size: 0.9rem; letter-spacing: 0.04em;
}
.status-badge.paused { background: rgba(210,153,34,0.18); color: #ffd93d; }
.status-badge.notstarted { background: rgba(255,255,255,0.08); color: var(--muted); }

.setup-order .setup-input {
    width: 100%;
    background: var(--bg); color: var(--text);
    border: 1px solid var(--border); border-radius: 4px;
    padding: 0.3rem 0.5rem;
}
.setup-order .setup-moves { white-space: nowrap; }
.setup-order .setup-moves button {
    background: transparent; color: var(--text);
    border: 1px solid var(--border); border-radius: 4px;
    padding: 0.2rem 0.5rem; cursor: pointer; margin-left: 0.2rem;
}
.setup-order .setup-moves button:disabled { opacity: 0.3; cursor: not-allowed; }

.run-banner {
    background: linear-gradient(90deg, #d29922, #f85149);
    color: #0a0f1d; font-weight: 800;
    padding: 0.4rem 1rem; border-radius: 8px;
    animation: slideIn 0.4s ease-out;
    font-size: 1.05rem;
}
@keyframes slideIn { from { transform: translateY(-30px); opacity: 0; } to { transform: none; opacity: 1; } }

.last-pick-card {
    display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px; padding: 0.5rem 1rem;
}
.lp-head { color: #c9d1d9; }
.grade {
    font-weight: 800; font-size: 0.95rem; padding: 0.2rem 0.6rem; border-radius: 6px;
    color: #0a0f1d;
}
.grade-aplus { background: #00e676; }
.grade-a { background: #3fb950; }
.grade-b { background: #58a6ff; color: white; }
.grade-c { background: #d29922; }
.grade-d { background: #f85149; color: white; }
.grade-f { background: #6e7681; color: white; }
.adp-grade { font-weight: 800; font-size: 0.9rem; padding: 0.2rem 0.6rem; border-radius: 6px; }
.adp-steal { background: rgba(0,230,118,0.18); color: #00e676; border: 1px solid #00e676; }
.adp-reach { background: rgba(248,81,73,0.15); color: #ff7b72; border: 1px solid #f85149; }
.award {
    padding: 0.2rem 0.6rem; border-radius: 6px;
    background: rgba(255,221,87,0.15); color: #ffd93d;
    font-weight: 600;
}

.party-body { display: grid; grid-template-columns: 1fr 320px; gap: 0.75rem; flex: 1; min-height: 0; }

/* The big snake board */
.snake-board {
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 0.5rem;
    overflow: auto;
    min-width: 0;   /* let the 1fr grid track shrink so overflow:auto actually scrolls */
    min-height: 0;
}
.snake-board .grid { display: grid; gap: 4px; }
.team-head {
    position: sticky; top: 0; z-index: 2;
    background: #111a2b;
    border-bottom: 3px solid;
    padding: 0.45rem 0.3rem;
    text-align: center;
    border-radius: 6px 6px 0 0;
}
.team-head .avatar {
    width: clamp(34px, 3vw, 46px); height: clamp(34px, 3vw, 46px);
    border-radius: 50%; object-fit: cover;
    margin: 0 auto 0.3rem auto; display: block;
    box-shadow: 0 0 0 2px var(--team-accent, #58a6ff), 0 0 0 4px rgba(0,0,0,0.4);
}
.team-head .avatar.placeholder {
    color: #0a0f1d; font-weight: 800; font-size: 1.2rem;
    display: flex; align-items: center; justify-content: center;
}
.team-head .tname { font-weight: 700; font-size: clamp(0.8rem, 0.9vw, 1rem); line-height: 1.1; }
.team-head .tname-owner { font-size: 0.68rem; color: var(--muted); margin-top: 0.05rem; }
.team-head .tname-sub { font-size: 0.68rem; color: #8b949e; margin-top: 0.1rem; }
.corner { position: sticky; left: 0; top: 0; z-index: 3; background: #0c1320; border-radius: 6px; }
.round-label {
    position: sticky; left: 0; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    background: #0c1320;
    border-radius: 6px;
    font-weight: 800; color: #79b8ff;
    font-size: 0.95rem;
}
.cell {
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
    padding: 0.4rem 0.3rem;
    min-height: clamp(76px, 8vh, 104px);
    display: flex; flex-direction: column; justify-content: center; align-items: stretch;
    position: relative;
    transition: transform 0.2s ease;
}
.cell.empty { background: rgba(255,255,255,0.02); }
.cell.empty .cell-overall {
    color: rgba(255,255,255,0.14);
    font-weight: 700; text-align: center;
    font-size: 1.15rem;
}
.cell .pick-overall { font-size: 0.65rem; color: rgba(255,255,255,0.5); text-align: right; }
.cell .pick-name {
    font-weight: 700; font-size: clamp(0.85rem, 0.95vw, 1.05rem); line-height: 1.1;
    word-break: break-word; margin: 0.15rem 0;
}
.cell .pick-meta { display: flex; align-items: center; justify-content: space-between; }
.cell .pos-tag { font-size: 0.7rem; opacity: 0.85; font-weight: 700; }
.cell .nfl-logo { width: 24px; height: 24px; }

.cell.pos-QB  { background: linear-gradient(135deg, #1e6091, #2c7fb8); }
.cell.pos-RB  { background: linear-gradient(135deg, #2e8b57, #3fb950); }
.cell.pos-WR  { background: linear-gradient(135deg, #c43c3c, #f85149); }
.cell.pos-TE  { background: linear-gradient(135deg, #c2691b, #db6d28); }
.cell.pos-K   { background: linear-gradient(135deg, #4d4d4d, #6e7681); }
.cell.pos-DST { background: linear-gradient(135deg, #6f42c1, #8957e5); }

.cell.on-clock {
    background: rgba(255, 217, 61, 0.12);
    border: 2px solid #ffd93d;
    animation: pulseClock 1.4s ease-in-out infinite;
}
@keyframes pulseClock {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,217,61,0.6); }
    50% { box-shadow: 0 0 0 14px rgba(255,217,61,0); }
}
.cell.on-clock .onclock-pulse {
    text-align: center; font-weight: 800; color: #ffd93d;
    font-size: 0.85rem;
}

.cell-owner { font-size: 0.62rem; font-weight: 600; text-align: center; opacity: 0.45; }
.traded-badge { font-size: 0.7rem; margin-left: 0.2rem; }

/* Pre-draft "ready" state */
.draft-ready {
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 1.5rem;
    overflow: auto;
    min-width: 0; min-height: 0;
    display: flex; flex-direction: column; gap: 1.25rem;
}
.ready-hero { text-align: center; }
.ready-hero .ready-title { font-size: clamp(1.4rem, 2.4vw, 2.2rem); font-weight: 800; }
.ready-hero .ready-sub { color: var(--muted); margin-top: 0.35rem; }
.ready-order {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.6rem;
}
.ready-team {
    display: flex; align-items: center; gap: 0.6rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-left: 4px solid #58a6ff;
    border-radius: 8px; padding: 0.5rem 0.7rem;
}
.ready-team .ready-pick {
    font-weight: 800; font-size: 1.1rem; color: var(--muted);
    width: 1.6rem; text-align: center; flex: 0 0 auto;
}
.ready-team .ready-avatar {
    width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
}
.ready-team .ready-avatar.placeholder {
    color: #0a0f1d; font-weight: 800; font-size: 1.2rem;
    display: flex; align-items: center; justify-content: center;
}
.ready-team .ready-info { min-width: 0; }
.ready-team .ready-name { font-weight: 700; }
.ready-team .ready-owner { font-size: 0.78rem; color: var(--muted); }

/* Pick-reveal full-screen takeover */
.pick-reveal {
    position: fixed; inset: 0; z-index: 50;
    display: flex; align-items: center; justify-content: center;
    background: rgba(5,8,15,0.82);
    pointer-events: none;
    animation: revealBackdrop 15s ease forwards;
}
@keyframes revealBackdrop {
    0% { opacity: 0; }
    3% { opacity: 1; }
    94% { opacity: 1; }
    100% { opacity: 0; }
}
.reveal-card {
    text-align: center; color: #f6f8fa;
    padding: 2rem 2.5rem;
    border-radius: 18px;
    background: radial-gradient(circle at top, rgba(255,255,255,0.08), rgba(0,0,0,0.2));
    border: 2px solid var(--accent, #58a6ff);
    box-shadow: 0 0 60px color-mix(in srgb, var(--accent, #58a6ff) 45%, transparent);
    animation: revealCard 15s cubic-bezier(0.2,0.9,0.2,1) forwards;
    max-width: min(92vw, 560px);
}
@keyframes revealCard {
    0% { transform: scale(0.6) translateY(40px); opacity: 0; }
    4% { transform: scale(1.04); opacity: 1; }
    7% { transform: scale(1); }
    94% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.96); opacity: 0; }
}
.reveal-pickno {
    font-weight: 800; letter-spacing: 0.12em; font-size: 0.95rem;
    color: var(--accent, #79b8ff); margin-bottom: 1rem;
}
.reveal-photo {
    width: clamp(140px, 18vw, 200px); height: clamp(140px, 18vw, 200px);
    margin: 0 auto 1rem auto; position: relative;
}
.reveal-photo img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
    background: #0c1320;
    box-shadow: 0 0 0 4px var(--accent, #58a6ff), 0 0 0 8px rgba(0,0,0,0.4);
    animation: revealPhoto 15s cubic-bezier(0.2,0.9,0.2,1) forwards;
}
.reveal-photo-fallback {
    width: 100%; height: 100%; border-radius: 50%;
    align-items: center; justify-content: center;
    font-size: 2.2rem; font-weight: 800; color: var(--accent, #58a6ff);
    background: #0c1320; box-shadow: 0 0 0 4px var(--accent, #58a6ff);
}
@keyframes revealPhoto {
    0% { transform: scale(0.3) rotate(-12deg); }
    6% { transform: scale(1.08) rotate(4deg); }
    9% { transform: scale(1) rotate(0); }
}
.reveal-name { font-size: clamp(1.6rem, 3vw, 2.6rem); font-weight: 800; line-height: 1.1; }
.reveal-meta {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    margin: 0.4rem 0 1rem 0; color: #c9d1d9; font-weight: 600;
}
.reveal-meta .reveal-pos {
    background: rgba(255,255,255,0.1); padding: 0.1rem 0.5rem; border-radius: 6px; font-weight: 800;
}
.reveal-meta .reveal-nfl { width: 26px; height: 26px; }
.reveal-team {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    font-size: 1.15rem;
}
.reveal-team .reveal-by { color: var(--muted); }
.reveal-team .reveal-team-avatar {
    width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
    display: inline-flex; align-items: center; justify-content: center;
    color: #0a0f1d; font-weight: 800;
}
.reveal-badges {
    display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem;
}
.reveal-badges .award {
    padding: 0.2rem 0.6rem; border-radius: 6px;
    background: rgba(255,221,87,0.15); color: #ffd93d; font-weight: 600;
}
.reveal-analysis {
    margin-top: 1rem; max-width: 42rem; margin-left: auto; margin-right: auto;
    font-size: 1.1rem; font-style: italic; line-height: 1.4;
    color: #e8edf3;
}

.cell.just-landed {
    animation: pickPop 0.7s ease-out;
    box-shadow: 0 0 0 3px #ffd93d, 0 0 28px rgba(255,217,61,0.5);
}
@keyframes pickPop {
    0% { transform: scale(0.4) rotateY(90deg); opacity: 0; }
    60% { transform: scale(1.1) rotateY(-10deg); opacity: 1; }
    100% { transform: scale(1) rotateY(0); opacity: 1; }
}

/* Sidebar — reactions + chat */
.party-side { display: flex; flex-direction: column; gap: 0.5rem; min-height: 0; }
.reactions-bar {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px; padding: 0.4rem;
}
.emoji-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: white; font-size: 1.6rem;
    padding: 0.4rem; border-radius: 8px; cursor: pointer;
    transition: transform 0.1s;
}
.emoji-btn:hover { transform: scale(1.15); background: rgba(255,255,255,0.12); }

.chat {
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    display: flex; flex-direction: column;
    flex: 1; min-height: 0;
    overflow: hidden;
}
.chat-head {
    padding: 0.4rem 0.75rem; background: rgba(255,255,255,0.05);
    font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.chat-clear {
    background: transparent; color: rgba(255,255,255,0.6);
    border: 1px solid rgba(255,255,255,0.2); border-radius: 6px;
    padding: 0.1rem 0.5rem; font-size: 0.72rem; font-weight: 700;
    cursor: pointer; text-transform: uppercase; letter-spacing: 0.03em;
}
.chat-clear:hover { color: #ff6b6b; border-color: #ff6b6b; }
.chat-msgs {
    flex: 1; padding: 0.4rem 0.75rem; overflow-y: auto;
    display: flex; flex-direction: column; gap: 0.2rem;
    font-size: 0.85rem;
}
.chat-msg .nick { font-weight: 700; color: #79b8ff; margin-right: 0.25rem; }
.chat-input {
    display: flex; gap: 0.3rem; padding: 0.4rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.chat-input input {
    flex: 1; background: rgba(0,0,0,0.3); color: white;
    border: 1px solid rgba(255,255,255,0.1); border-radius: 6px;
    padding: 0.35rem 0.6rem;
}
.chat-input button {
    background: #58a6ff; color: #0a0f1d; border: none;
    padding: 0.35rem 0.8rem; border-radius: 6px; font-weight: 700; cursor: pointer;
}
.chat-input button:disabled { opacity: 0.4; cursor: not-allowed; }

.ticker {
    overflow: hidden; white-space: nowrap;
    background: rgba(0,0,0,0.4);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    padding: 0.4rem 0;
}
.ticker-track {
    display: inline-block;
    animation: ticker 60s linear infinite;
    color: #c9d1d9; font-weight: 600;
}
.t-item { margin-right: 1rem; }
.t-logo {
    display: inline-block; vertical-align: middle;
    width: 1.1rem; height: 1.1rem; border-radius: 50%;
    object-fit: cover; margin: 0 0.2rem;
}
.t-logo.placeholder {
    text-align: center; line-height: 1.1rem;
    font-size: 0.7rem; font-weight: 700; color: #fff;
}
.onclock-logo {
    display: inline-block; vertical-align: middle;
    width: 1.6rem; height: 1.6rem; border-radius: 50%;
    object-fit: cover; margin: 0 0.25rem;
}
.onclock-logo.placeholder {
    text-align: center; line-height: 1.6rem;
    font-size: 0.9rem; font-weight: 700; color: #fff;
}
@keyframes ticker {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Floating reactions */
.reaction-layer {
    position: fixed; inset: 0; pointer-events: none;
    overflow: hidden;
}
.floating-emoji {
    position: absolute;
    animation: floatUp 3.4s ease-out forwards;
    pointer-events: none;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
@keyframes floatUp {
    0%   { transform: translateY(0) translateX(0) scale(0.6); opacity: 0; }
    10%  { opacity: 1; transform: translateY(-30px) translateX(0) scale(1); }
    100% { opacity: 0; transform: translateY(-92vh) translateX(var(--drift, 0)) scale(1.1); }
}

@media (max-width: 1100px) {
    .party-body { grid-template-columns: 1fr; }
}

.login-shell {
    min-height: 80vh;
    display: flex; align-items: center; justify-content: center;
}
.login-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 2rem;
    max-width: 380px;
    width: 100%;
}
.login-card h1 { margin-top: 0; }
.login-field { display: flex; flex-direction: column; gap: 0.35rem; margin: 1rem 0; }
.login-field input {
    background: var(--bg); color: var(--text);
    border: 1px solid var(--border); border-radius: 4px;
    padding: 0.5rem 0.6rem; font-size: 1rem;
}
.login-btn { width: 100%; padding: 0.55rem; font-size: 1rem; }
.login-foot { margin-top: 1.25rem; text-align: center; }

.nav .logout-form { display: inline; margin: 0; }
.nav .logout-btn {
    background: transparent; color: var(--muted);
    border: 1px solid var(--border); border-radius: 4px;
    padding: 0.35rem 0.6rem; cursor: pointer; font: inherit;
}
.nav .logout-btn:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.nav .login-link { color: var(--accent); }

#blazor-error-ui {
    background: var(--t5); color: white; bottom: 0; left: 0; right: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); display: none;
    padding: 0.6rem 1.25rem; position: fixed;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1.25rem; top: 0.5rem; }

/* Draft advisor — site-owner-only "suggested picks" panel in the /draft sidebar */
.advisor {
    background: rgba(88,166,255,0.06);
    border: 1px solid rgba(88,166,255,0.28);
    border-radius: 10px; padding: 0.5rem 0.6rem; margin-bottom: 0.9rem;
}
.advisor-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.advisor-head h2 { margin: 0; font-size: 1rem; }
.advice-refresh {
    background: transparent; border: 1px solid var(--border); border-radius: 6px;
    padding: 0.1rem 0.45rem; cursor: pointer; font-size: 0.85rem; line-height: 1.4;
}
.advice-refresh:hover:not(:disabled) { border-color: var(--accent); }
.advice-refresh:disabled { opacity: 0.4; cursor: not-allowed; }
.advisor-sub { margin: 0.3rem 0 0.5rem; display: flex; flex-direction: column; gap: 0.1rem; }
.advisor-roster { font-size: 0.72rem; opacity: 0.8; }
.advisor-list { list-style: decimal; margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.55rem; }
.advisor-item { border-left: 3px solid transparent; padding-left: 0.45rem; }
.advisor-player { display: flex; flex-direction: column; }
.advisor-player .pname { font-weight: 700; font-size: 0.9rem; }
.advisor-player .pteam { font-size: 0.72rem; color: var(--muted); }
.advisor-reasons { list-style: none; margin: 0.2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.advisor-reasons li { font-size: 0.74rem; color: var(--muted); }
.advisor-ai { font-size: 0.76rem; color: var(--text); margin-top: 0.25rem; font-style: italic; opacity: 0.9; }
.advisor-draft { margin-top: 0.35rem; font-size: 0.75rem; padding: 0.2rem 0.6rem; }

/* ===== Write-in picks ===== */
/* Compact enough to sit in the /draft toolbar and in the board's pick sheet footer. */
.write-in { display: flex; flex-direction: column; gap: 0.25rem; }
.write-in-toggle {
    background: transparent; color: var(--muted); border: 1px dashed var(--border);
    border-radius: 6px; padding: 0.3rem 0.6rem; cursor: pointer; font: inherit; font-size: 0.8rem;
}
.write-in-toggle:hover { color: var(--text); border-color: var(--accent); }
.write-in-form { display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; }
.write-in-form .wi-name { flex: 1; min-width: 9rem; }
.write-in-form .wi-team { width: 4.5rem; text-transform: uppercase; }
.write-in-form .wi-go { font-size: 0.8rem; padding: 0.25rem 0.7rem; }
.wi-cancel {
    background: transparent; color: var(--muted); border: 1px solid var(--border);
    border-radius: 6px; padding: 0.2rem 0.5rem; cursor: pointer; font: inherit;
}
.wi-hint { font-size: 0.72rem; color: var(--muted); }
.wi-error { font-size: 0.75rem; color: #ff7b72; }

/* Pick-sheet footer — the write-in row lives here, pinned under the scrolling list so it's
   reachable without hunting for it at the end of 100 rows. */
.bp-foot { padding: 0.5rem 0.85rem; border-top: 1px solid var(--border); background: rgba(255,255,255,0.02); }

/* While a position/NFL/search filter is active the sheet grows: the point of filtering is to
   read the results, and a 62vh sheet strands them in the bottom third of the screen. It
   covers the board header when it does, which is why the sheet carries its own copy of
   the pick clock. The band left at the top is in px, not vh — the topbar is pixel-sized,
   and its nav wraps to two rows on tablets. */
.board-picker.filtering { height: calc(100dvh - 110px); max-height: calc(100dvh - 110px); }

/* The board is a fixed-viewport app screen: the snake grid and the chat each scroll inside
   their own pane. Without this the shell is a full 100vh *below* the topbar, so the whole
   document scrolls and the chat composer sits off the bottom of the screen — you had to
   scroll away from the board to type. Scoped with :has() so every other page keeps normal
   document scrolling. */
.page:has(.party-shell) { height: 100dvh; min-height: 0; }
.page:has(.party-shell) main { padding: 0; min-height: 0; overflow: hidden; }
.party-shell { min-height: 0; height: 100%; }

@media (max-width: 1100px) {
    .board-picker.filtering { height: calc(100dvh - 130px); max-height: calc(100dvh - 130px); }
    /* Stacked layout: board on top, chat underneath, each scrolling in its own row so the
       composer stays on screen instead of falling below a 16-round board. */
    .party-body { grid-template-rows: minmax(120px, 1.5fr) minmax(230px, 1fr); }
    /* One row of emoji instead of two — the chat needs the height more than they do. */
    .reactions-bar { grid-template-columns: repeat(8, 1fr); }
    .emoji-btn { font-size: 1.3rem; padding: 0.25rem; }
    .party-side { min-height: 0; }
}

/* The pick reveal used to black out the entire screen for 15s on every pick, which killed the
   trash talk at exactly the moment there was something to talk about. It now covers the board
   column only, and nothing behind it is dimmed at all, so the chat stays readable and
   typeable while a pick is announced. (.pick-reveal is pointer-events:none, so everything
   underneath stays clickable.) */
.pick-reveal { right: calc(320px + 1.5rem); background: none; }
/* No scrim any more, so the card carries its own opaque backing — it has to read against
   whatever part of the board it lands on. */
.reveal-card {
    max-width: min(88%, 460px); padding: 1.4rem 1.6rem;
    background: radial-gradient(circle at top, rgba(255,255,255,0.10), rgba(255,255,255,0) 65%), #0d1524;
    box-shadow: 0 0 60px color-mix(in srgb, var(--accent, #58a6ff) 45%, transparent),
                0 18px 50px rgba(0,0,0,0.65);
}
.reveal-card .reveal-pickno { margin-bottom: 0.6rem; }

@media (max-width: 1100px) {
    /* Stacked layout — the chat is a row under the board, so clear the bottom of the screen. */
    .pick-reveal { right: 0; bottom: 34%; }
}

/* The expanded sheet covers the board header, so it shows the countdown itself. */
.bp-clock { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; margin-left: auto; margin-right: 0.5rem; }