/* =========================================================
   JOOSY FANTASY FOOTBALL — DARK / JUICY THEME
   Replace the existing app.css with this file.
   ========================================================= */

:root {
    --bg: #0b0910;
    --surface: #14101c;
    --surface-2: #1b1525;
    --surface-3: #241b31;
    --border: #352a43;
    --border-bright: #49375a;
    --text: #f5f0fa;
    --muted: #9d91aa;
    --purple: #a855f7;
    --purple-light: #c084fc;
    --purple-dark: #7e22ce;
    --pink: #f472b6;
    --lime: #bef264;
    --cyan: #67e8f9;
    --orange: #fb923c;
    --danger: #fb7185;
    --shadow: 0 10px 30px rgba(0,0,0,.30);
    --glow: 0 0 24px rgba(168,85,247,.16);
    --radius: 12px;
}

* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: #4d3b60 transparent; }
html, body { margin:0; min-height:100%; background:radial-gradient(circle at 12% 0%,rgba(168,85,247,.13),transparent 30rem),radial-gradient(circle at 92% 8%,rgba(244,114,182,.07),transparent 25rem),var(--bg); color:var(--text); font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif; }
body { min-height:100vh; }
button,input,select,textarea { font:inherit; }
a { color:var(--purple-light); }
a:hover { color:#e9d5ff; }
::selection { background:rgba(168,85,247,.38); color:#fff; }

/* Mobile WebView safe area */
.status-bar-safe-area { display:block; width:100%; height:env(safe-area-inset-top,0px); background:var(--bg); }
.content { min-height:100vh; padding-top:1rem; }

/* Forms */
input,select,textarea,.form-control,.form-select { background:var(--surface); color:var(--text); border:1px solid var(--border-bright); border-radius:8px; }
input::placeholder,textarea::placeholder { color:var(--muted); }
input:focus,select:focus,textarea:focus,.form-control:focus,.form-select:focus { color:var(--text); background:#100c16; border-color:var(--purple); box-shadow:0 0 0 3px rgba(168,85,247,.18); outline:none; }
select option { background:var(--surface-2); color:var(--text); }

/* Generic cards/buttons */
.setup-section,.suggestion-board,.current-roster,.recent-picks,.draft-grid,.draft-header,.setup-header,.strategy-card,.setup-card,.team-card,.setup-team-card { box-shadow:var(--shadow); }
button { border-radius:8px; transition:.15s ease; }
button:hover { transform:translateY(-1px); }
button:active { transform:none; }

/* =========================================================
   DRAFT PAGE
   ========================================================= */
.draft-page { position:relative; width:100%; max-width:1800px; margin:auto; padding:20px 20px 36px; }
.draft-top-bar { display:flex; justify-content:flex-end; margin-bottom:10px; }
.exit-to-menu-button { padding:8px 16px; border:1px solid var(--border-bright); border-radius:6px; background:var(--surface); color:var(--muted); font-weight:700; cursor:pointer; }
.exit-to-menu-button:hover { border-color:var(--purple); color:#fff; }
.draft-complete-actions { display:flex; justify-content:center; gap:12px; }
.draft-header { display:flex; justify-content:space-between; align-items:stretch; gap:20px; margin-bottom:18px; overflow:hidden; border:1px solid var(--border-bright); border-radius:var(--radius); background:linear-gradient(135deg,rgba(168,85,247,.10),transparent 50%),var(--surface); }
.draft-header > div:first-child { padding:18px 22px; }
.draft-header h1 { margin:0 0 5px; font-size:1.5rem; }
.draft-header p { margin:0; color:var(--muted); }
.draft-header > div:last-child { min-width:190px; padding:18px 22px; text-align:center; border-left:1px solid var(--border); background:rgba(168,85,247,.05); }
.draft-header > div:last-child strong { display:block; margin-bottom:4px; color:var(--purple-light); font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; }
.draft-header > div:last-child div { font-size:1.15rem; font-weight:800; }

/* Tabs */
.draft-tabs { width:100%; }
.draft-tab-bar { display:flex; gap:5px; margin-bottom:18px; padding:5px; overflow-x:auto; border:1px solid var(--border); border-radius:10px; background:rgba(20,16,28,.94); }
.draft-tab { flex:1 1 0; min-width:0; min-height:40px; padding:9px 17px; border:1px solid transparent; border-radius:7px; background:transparent; color:var(--muted); font-size:.85rem; font-weight:700; cursor:pointer; white-space:nowrap; }
.draft-tab:hover { background:rgba(168,85,247,.09); color:var(--text); }
.draft-tab.active { background:linear-gradient(135deg,rgba(126,34,206,.78),rgba(168,85,247,.48)); border-color:rgba(168,85,247,.45); color:#fff; box-shadow:var(--glow); }

/* =========================================================
   SUGGESTIONS
   ========================================================= */
.suggestion-board { margin-bottom:18px; overflow:hidden; border:1px solid var(--border-bright); border-radius:var(--radius); background:var(--surface); }
.suggestion-board-actions { display:flex; justify-content:center; padding:12px 18px; border-top:1px solid var(--border); background:rgba(0,0,0,.10); }
.show-more-button { padding:8px 20px; border:1px solid var(--purple); border-radius:6px; background:transparent; color:var(--purple-light); font-weight:700; cursor:pointer; }
.show-more-button:hover { background:rgba(168,85,247,.10); }
.suggestion-board h3 { position:relative; margin:0; padding:14px 18px; border-bottom:1px solid var(--border); background:linear-gradient(90deg,rgba(168,85,247,.10),transparent),var(--surface); font-size:1rem; }
.player-filters { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:15px; }
.suggestion-board .player-filters { margin:0; padding:12px 18px; border-bottom:1px solid var(--border); background:rgba(0,0,0,.10); }
.suggestion-board .player-filters input { flex:1; min-width:200px; }
.suggestion-board .player-filters select { min-width:150px; }
.player-table-container { width:100%; overflow-x:auto; }
.player-table { width:100%; border-collapse:collapse; }
.player-table th,.player-table td { padding:8px 10px; text-align:left; white-space:nowrap; }
.player-table th { font-weight:700; }
.player-table th[onclick] { cursor:pointer; user-select:none; }
.player-table th[onclick]:hover { color:var(--purple-light); }
.player-table th span { display:inline-block; min-width:12px; margin-left:3px; }
.suggestion-board .player-table { min-width:850px; }
.suggestion-board .player-table th { background:#17121f; color:var(--muted); border-bottom:1px solid var(--border); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; }
.suggestion-board .player-table td { border-bottom:1px solid rgba(59,49,75,.55); }
.suggestion-board .player-table tbody tr:hover { background:rgba(168,85,247,.07); }
.suggestion-board .player-table button { min-width:62px; padding:5px 11px; border:1px solid var(--purple); background:linear-gradient(135deg,var(--purple-dark),var(--purple)); color:#fff; font-weight:700; cursor:pointer; }
.suggestion-board .player-table td:nth-child(n+4):nth-child(-n+9) { text-align:right; }
/* Suggestion table alignment */
.suggestion-board .player-table th,
.suggestion-board .player-table td {
    vertical-align: middle;
}

    .suggestion-board .player-table th:first-child,
    .suggestion-board .player-table td:first-child {
        text-align: left;
    }

    /* Position + NFL + Draft */
    .suggestion-board .player-table th:nth-child(2),
    .suggestion-board .player-table td:nth-child(2),
    .suggestion-board .player-table th:nth-child(3),
    .suggestion-board .player-table td:nth-child(3),
    .suggestion-board .player-table th:nth-child(10),
    .suggestion-board .player-table td:nth-child(10) {
        text-align: center;
    }

    /* Numeric columns */
    .suggestion-board .player-table th:nth-child(4),
    .suggestion-board .player-table td:nth-child(4),
    .suggestion-board .player-table th:nth-child(5),
    .suggestion-board .player-table td:nth-child(5),
    .suggestion-board .player-table th:nth-child(6),
    .suggestion-board .player-table td:nth-child(6),
    .suggestion-board .player-table th:nth-child(7),
    .suggestion-board .player-table td:nth-child(7),
    .suggestion-board .player-table th:nth-child(8),
    .suggestion-board .player-table td:nth-child(8),
    .suggestion-board .player-table th:nth-child(9),
    .suggestion-board .player-table td:nth-child(9) {
        text-align: right;
    }
/* Position badges */
.position-badge { display:inline-block; min-width:34px; padding:3px 7px; border:1px solid var(--border-bright); border-radius:5px; background:rgba(168,85,247,.08); text-align:center; font-size:.7rem; font-weight:800; }
.position-qb { color:var(--purple-light); }
.position-rb { color:var(--lime); }
.position-wr { color:var(--cyan); }
.position-te { color:var(--pink); }
.position-k { color:var(--orange); }

/* =========================================================
   LIVE LOWER PANELS
   ========================================================= */
.live-draft-lower { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; width:100%; }
/* =========================================================
   RECENT PICKS
   ========================================================= */

.recent-picks-table {
    width: 100%;
}

.recent-picks-row {
    display: grid;
    grid-template-columns: 58px 110px minmax(0, 1fr) 58px;
    align-items: center;
    width: 100%;
    min-height: 42px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(59, 49, 75, .55);
}

    .recent-picks-row > div {
        min-width: 0;
        box-sizing: border-box;
        padding: 8px 10px;
    }

/* Header uses EXACTLY the same grid as every pick */
.recent-picks-header-row {
    display: grid;
    grid-template-columns: 58px 110px minmax(0, 1fr) 58px;
    align-items: center;
    width: 100%;
    min-height: 34px;
    box-sizing: border-box;
    background: #17121f;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

    .recent-picks-header-row > div {
        min-width: 0;
        box-sizing: border-box;
        padding: 8px 10px;
    }

.recent-pick-number {
    text-align: center;
}

.recent-pick-team,
.recent-pick-player {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-pick-player {
    font-weight: 500;
}

.recent-pick-position {
    text-align: center;
}

/* User picks can be highlighted, but MUST NOT change dimensions */
.recent-picks-row.user-pick {
    font-weight: 700;
    background: rgba(168, 85, 247, .08);
}

.recent-picks-row.cpu-pick {
    font-weight: 400;
    background: transparent;
}

.recent-picks-row:hover {
    background: rgba(168, 85, 247, .07);
}
.draft-complete { position:relative; margin-bottom:18px; padding:32px 28px; overflow:hidden; border:1px solid rgba(168,85,247,.4); border-radius:var(--radius); background:radial-gradient(circle at 50% -20%,rgba(168,85,247,.25),transparent 20rem),var(--surface); text-align:center; }
.draft-complete h2 { margin:0 0 8px; }
.draft-complete p { margin:0 0 18px; color:var(--muted); }
.restart-draft-button { padding:10px 18px; border:1px solid var(--purple); background:linear-gradient(135deg,var(--purple-dark),var(--purple)); color:#fff; font-weight:800; cursor:pointer; }

/* =========================================================
   ALL PLAYERS
   ========================================================= */
.player-board { width:100%; }
/* Hidden by default (desktop) - only the @media(max-width:700px) block
   further down turns this back on. Without an explicit base rule here, the
   mobile hybrid grid has no display override at all on desktop and renders
   visibly below the desktop table when you scroll past it, since the only
   existing "display:none" for it sits nested inside that same mobile media
   query and never actually applies outside of it. */
.player-board-mobile { display:none; }
.player-board h2 { margin:0 0 14px; font-size:1.25rem; }
.player-board .player-filters { align-items:center; margin-bottom:14px; }
.player-board .player-filters input { flex:1; min-width:220px; padding:8px 10px; }
.player-board .player-filters select { min-width:140px; padding:8px 10px; }
.player-board .player-table-container { width:100%; overflow-x:auto; border:1px solid var(--border-bright); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }
.player-board .player-table { min-width:1500px; border-collapse:separate; border-spacing:0; }
.player-board .player-table th,.player-board .player-table td { padding:8px 10px; border-bottom:1px solid rgba(59,49,75,.55); }
.player-board .player-table thead th { position:sticky; top:0; z-index:4; background:#17121f; color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; }
.player-board .player-table tbody tr:hover { background:rgba(168,85,247,.07); }
.player-board .player-table th:first-child,.player-board .player-table td:first-child { position:sticky; left:0; z-index:5; }
.player-board .player-table thead th:first-child { z-index:7; background:#17121f; }
.player-board .player-table tbody td:first-child { background:var(--surface); font-weight:700; box-shadow:5px 0 10px rgba(0,0,0,.18); }
.player-board .player-table tbody tr:hover td:first-child { background:#21192c; }
.player-board .player-notes { width:300px; max-width:300px; white-space:normal!important; line-height:1.35; }
.player-board .player-table td:nth-child(4),.player-board .player-table td:nth-child(5),.player-board .player-table td:nth-child(6),.player-board .player-table td:nth-child(7),.player-board .player-table td:nth-child(8),.player-board .player-table td:nth-child(9),.player-board .player-table td:nth-child(10),.player-board .player-table td:nth-child(11),.player-board .player-table td:nth-child(13),.player-board .player-table td:nth-child(14) { text-align:right; }
.player-status { display:inline-block; padding:3px 7px; border-radius:5px; font-size:.7rem; font-weight:800; }
.player-status.available { border:1px solid rgba(190,242,100,.4); color:var(--lime); background:rgba(190,242,100,.07); }
.player-status.drafted { border:1px solid var(--border); color:var(--muted); }
.player-board .player-board-draft-cell { text-align:center; }
.player-board .player-board-draft-cell button { padding:6px 14px; border:1px solid var(--purple); border-radius:6px; background:linear-gradient(135deg,var(--purple-dark),var(--purple)); color:#fff; font-weight:800; cursor:pointer; white-space:nowrap; }
.player-board .player-board-draft-cell button:hover { filter:brightness(1.08); }

/* =========================================================
   ROSTERS
   ========================================================= */
.all-rosters { display:flex; align-items:flex-start; gap:12px; width:100%; overflow-x:auto; padding:3px 3px 16px; }
.roster-column { flex:0 0 220px; min-width:220px; overflow:hidden; border:1px solid var(--border-bright); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }
.roster-column.user-roster { border:2px solid rgba(168,85,247,.7); box-shadow:0 0 0 1px rgba(168,85,247,.12),var(--shadow); }
.roster-team-header { display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:52px; padding:10px 12px; border-bottom:1px solid var(--border); background:linear-gradient(90deg,rgba(168,85,247,.12),transparent),var(--surface-2); }
.roster-team-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:800; }
.roster-user-label { flex-shrink:0; color:var(--purple-light); font-size:.65rem; font-weight:800; letter-spacing:.06em; }
.roster-position { border-bottom:1px solid rgba(59,49,75,.55); }
.roster-position:last-child { border-bottom:none; }
.roster-position-header { padding:6px 9px; background:rgba(168,85,247,.055); color:var(--purple-light); font-size:.7rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.roster-player { display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:34px; padding:6px 9px; }
.roster-player-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.roster-player-team { flex-shrink:0; color:var(--muted); font-size:.7rem; }
.roster-empty,.rosters-empty { color:var(--muted); }
.roster-empty { min-height:34px; padding:6px 9px; }
.rosters-empty { padding:20px; }

/* =========================================================
   DRAFT GRID
   ========================================================= */
.draft-grid-container { width:100%; overflow-x:auto; padding-bottom:16px; }
.draft-grid { width:100%; min-width:1000px; border:1px solid var(--border-bright); border-collapse:separate; border-spacing:0; border-radius:var(--radius); overflow:hidden; background:var(--surface); }
.draft-grid th,.draft-grid td { padding:9px 10px; border-right:1px solid rgba(59,49,75,.55); border-bottom:1px solid rgba(59,49,75,.55); vertical-align:middle; }
.draft-grid th:last-child,.draft-grid td:last-child { border-right:none; }
.draft-grid tbody tr:last-child th,.draft-grid tbody tr:last-child td { border-bottom:none; }
.draft-grid thead th { min-width:145px; background:#17121f; color:var(--muted); text-align:center; font-size:.78rem; font-weight:800; }
.draft-grid .round-header,.draft-grid .round-label { width:65px; min-width:65px; text-align:center; }
.draft-grid .round-label { background:rgba(168,85,247,.055); color:var(--purple-light); }
.draft-grid td { height:55px; }
.draft-grid-player { display:flex; flex-direction:column; gap:2px; }
.draft-grid-player strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.draft-grid-player span { color:var(--muted); font-size:.72rem; }
.draft-grid td.user-pick { background:rgba(168,85,247,.08); font-weight:700; }
.draft-grid td.cpu-pick { opacity:.82; }
.draft-grid td.empty { opacity:.3; }

/* =========================================================
   SETUP
   ========================================================= */
.draft-setup { position:relative; width:100%; max-width:1400px; margin:auto; padding:20px 20px 40px; }
.setup-header { margin-bottom:20px; padding:22px 24px; border:1px solid var(--border-bright); border-radius:var(--radius); background:radial-gradient(circle at 90% 0%,rgba(168,85,247,.18),transparent 20rem),var(--surface); }
.setup-header h1 { margin:0 0 5px; font-size:1.7rem; }
.setup-header p { margin:0; color:var(--muted); }
.setup-section { position:relative; margin-bottom:18px; padding:20px; border:1px solid var(--border-bright); border-radius:var(--radius); background:var(--surface); }
.setup-section-header { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:16px; }
.setup-section-header h2 { margin:0 0 4px; font-size:1.05rem; }
.setup-section-header p,.setup-help { color:var(--muted); }
.setup-section-header p { margin:0; font-size:.85rem; }
.setup-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.setup-card { padding:16px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); }
.setup-label,.setup-field label { display:block; margin-bottom:7px; color:var(--muted); font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.setup-number-input,.setup-field input,.setup-select,.setup-field select { width:100%; min-height:40px; padding:8px 10px; }
.setup-secondary-button { width:100%; margin-top:10px; padding:9px 12px; border:1px solid var(--purple); background:linear-gradient(135deg,var(--purple-dark),var(--purple)); color:#fff; font-weight:700; cursor:pointer; }
.setup-help { margin:8px 0 0; font-size:.75rem; line-height:1.4; }
.setup-field label .slider-value { float:right; color:var(--purple-light); font-weight:800; letter-spacing:normal; text-transform:none; }
/* .setup-field input above forces width:100%/min-height:40px on every input in a
   field, which would stretch a bare checkbox into a full-width block - so the
   toggle has to opt back out of all three explicitly. */
.setup-field label.setup-toggle-label { display:flex; align-items:center; gap:8px; margin-bottom:10px; color:var(--text); cursor:pointer; }
.setup-field input.setup-toggle { width:auto; min-height:auto; padding:0; margin:0; accent-color:var(--purple); cursor:pointer; flex:0 0 auto; }
.setup-field label.setup-sublabel { margin-bottom:0; }
.setup-field label.is-disabled { opacity:.45; }

/* Roster settings */
.roster-settings-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.roster-setting {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

    .roster-setting label {
        display: block;
        margin: 0;
        color: var(--muted);
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .roster-setting input {
        width: 100%;
        min-width: 0;
        min-height: 40px;
        padding: 8px 10px;
        background: var(--surface);
        color: var(--text);
        border: 1px solid var(--border-bright);
        border-radius: 8px;
        text-align: center;
    }

        .roster-setting input:focus {
            color: var(--text);
            background: #100c16;
            border-color: var(--purple);
            box-shadow: 0 0 0 3px rgba(168,85,247,.18);
            outline: none;
        }
/* Toggles */
.toggle-group { display:flex; width:100%; overflow:hidden; border:1px solid var(--border-bright); border-radius:8px; }
.toggle-option { flex:1 1 0; min-width:0; text-align:center; white-space:nowrap; min-height:40px; padding:8px 10px; border:0; border-right:1px solid var(--border); border-radius:0; background:var(--bg-input,var(--surface)); color:var(--muted); font-weight:700; cursor:pointer; }
.toggle-option:last-child { border-right:0; }
.toggle-option:hover { background:rgba(168,85,247,.08); color:var(--text); }
.toggle-option.active { background:linear-gradient(135deg,rgba(126,34,206,.85),rgba(168,85,247,.55)); color:#fff; }

/* =========================================================
   TEAM CARDS
   ========================================================= */

.teams-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
}

.team-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    box-shadow: var(--shadow);
}


/* Clickable header */

.team-card-header {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 76px;
    margin: 0;
    padding: 12px 16px;
    border: 0;
    border-radius: 0;
    background: linear-gradient( 90deg, rgba(168, 85, 247, .13), transparent 70% ), var(--surface-2);
    color: var(--text);
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}


    /* Prevent the global button hover effect from moving this */

    .team-card-header:hover {
        transform: none;
        background: linear-gradient( 90deg, rgba(168, 85, 247, .22), transparent 75% ), #21192c;
    }

    .team-card-header:active {
        transform: none;
    }


/* Team heading */

.team-card-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.team-number {
    margin-bottom: 2px;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.team-card-title {
    overflow: hidden;
    max-width: 100%;
    color: var(--text);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-card-meta {
    display: flex;
    align-items: center;
    margin-top: 5px;
}


/* USER / CPU badge */

.team-control-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border: 1px solid rgba(168, 85, 247, .25);
    border-radius: 999px;
    background: rgba(168, 85, 247, .12);
    color: var(--purple-light);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .04em;
}

    .team-control-badge.user {
        background: rgba(168, 85, 247, .16);
        color: var(--purple-light);
    }

    .team-control-badge.cpu {
        background: rgba(103, 232, 249, .08);
        border-color: rgba(103, 232, 249, .18);
        color: var(--cyan);
    }


/* Expand / collapse indicator */

.team-expand-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border: 1px solid var(--border-bright);
    border-radius: 7px;
    background: rgba(168, 85, 247, .08);
    color: var(--purple-light);
    font-size: .7rem;
    font-weight: 900;
}

.team-card-header:hover .team-expand-icon {
    background: rgba(168, 85, 247, .18);
    border-color: rgba(168, 85, 247, .45);
}


/* Expanded body */

.team-card-body {
    padding: 16px;
    border-top: 1px solid var(--border);
    background: linear-gradient( 180deg, rgba(168, 85, 247, .035), transparent 45% ), var(--surface-2);
}

    .team-card-body .setup-field {
        margin-bottom: 14px;
    }

        .team-card-body .setup-field:last-child {
            margin-bottom: 0;
        }


/* Make the expanded state visually obvious */

.team-card.expanded {
    border-color: rgba(168, 85, 247, .38);
    box-shadow: 0 0 0 1px rgba(168, 85, 247, .06), var(--shadow);
}

    .team-card.expanded .team-card-header {
        background: linear-gradient( 90deg, rgba(168, 85, 247, .17), transparent 70% ), var(--surface-2);
    }


/* Collapsed cards stay compact */

.team-card.collapsed .team-card-header {
    min-height: 76px;
}

/* Strategies */
.strategy-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.strategy-card { padding:16px; border:1px solid var(--border); border-radius:10px; background:linear-gradient(135deg,rgba(168,85,247,.055),transparent 55%),var(--surface-2); }
.strategy-card-header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; }
.strategy-card-header h3 { margin:0; font-size:1rem; }
.strategy-weight-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.strategy-weight-grid .setup-field.full-width { grid-column:1 / -1; }
.delete-button { padding:6px 10px; border:1px solid rgba(251,113,133,.35); background:rgba(251,113,133,.07); color:#fda4af; cursor:pointer; }
.delete-button:hover { background:rgba(251,113,133,.15); }

.setup-error { margin-bottom:14px; padding:12px 14px; border:1px solid rgba(251,113,133,.35); border-radius:9px; background:rgba(251,113,133,.07); color:#fda4af; }
.setup-error p { margin:4px 0; color:inherit; }
.setup-empty,.setup-empty-section { padding:22px; color:var(--muted); }
.start-draft-section { display:flex; justify-content:center; margin:20px 0; }
.start-draft-button { min-width:180px; padding:12px 24px; border:1px solid var(--purple); background:linear-gradient(135deg,var(--purple-dark),var(--purple)); color:#fff; font-size:1rem; font-weight:800; cursor:pointer; }

/* Draft order */
.draft-order-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:8px; }
.draft-order-item { display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); }
.draft-order-position { display:grid; place-items:center; width:26px; height:26px; flex-shrink:0; border-radius:6px; background:rgba(168,85,247,.14); color:var(--purple-light); font-size:.75rem; font-weight:800; }
.draft-order-team { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.current-pick-preview { margin:14px 0 0; color:var(--muted); }

/* Blazor errors */
#blazor-error-ui { color:#fff; background:#5f1726; bottom:0; box-shadow:0 -1px 8px rgba(0,0,0,.4); box-sizing:border-box; display:none; left:0; padding:.75rem 1.25rem; position:fixed; width:100%; z-index:1000; }
#blazor-error-ui .dismiss { cursor:pointer; position:absolute; right:.75rem; top:.5rem; }
.blazor-error-boundary { padding:1rem 1rem 1rem 3.7rem; color:#fff; background:#8f1d35; }
.blazor-error-boundary::after { content:"An error has occurred."; }

/* Scrollbars */
*::-webkit-scrollbar { width:9px; height:9px; }
*::-webkit-scrollbar-track { background:transparent; }
*::-webkit-scrollbar-thumb { background:#4d3b60; border-radius:999px; }
*::-webkit-scrollbar-thumb:hover { background:#6d5385; }

/* Responsive */
@media (max-width:1100px) {
    .setup-card-grid,
    .team-settings-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .roster-settings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width:900px) {
    .live-draft-lower {
        grid-template-columns: minmax(0, 1fr);
    }

    .draft-header {
        flex-direction: column;
    }

        .draft-header > div:last-child {
            min-width: 0;
            border-left: 0;
            border-top: 1px solid var(--border);
            text-align: left;
        }

    .strategy-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (min-width:701px) {
    .suggestion-board .suggestion-draft-cell {
        display: table-cell;
    }

    .suggestion-board .suggestion-mobile-action-row {
        display: none !important;
    }
}
@media (max-width:700px) {
    .content {
        padding-top: 1.5rem;
    }

    .draft-page,
    .draft-setup {
        padding: 12px 8px 30px;
    }

    .setup-section {
        padding: 14px;
    }

    .setup-header {
        padding: 18px;
    }

    .setup-card-grid,
    .team-settings-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Keep the small roster controls in two columns */
    .roster-settings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .player-board .player-filters,
    .suggestion-board .player-filters {
        flex-direction: column;
        align-items: stretch;
    }

        .player-board .player-filters input,
        .player-board .player-filters select,
        .suggestion-board .player-filters input,
        .suggestion-board .player-filters select {
            width: 100%;
            min-width: 0;
        }

    .strategy-weight-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .draft-header > div:first-child {
        padding: 16px;
    }

        .draft-header > div:first-child h1 {
            font-size: 1.25rem;
        }

    .draft-tab-bar {
        margin-bottom: 12px;
    }


    .roster-column {
        flex-basis: 205px;
        min-width: 205px;
    }

    .cpu-pick {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .start-draft-button {
        width: 100%;
    }
    /* -----------------------------------------------------
       Suggestion Board
       ----------------------------------------------------- */

    .suggestion-board .player-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .suggestion-board .player-table {
        min-width: 850px;
    }

    /* Hide the desktop Draft button */
    .suggestion-board .suggestion-draft-cell {
        display: none;
    }

    /* Selected player gets a subtle highlight */
    .suggestion-board .suggestion-player-row.expanded {
        background: rgba(168, 85, 247, .10);
    }

    /* Show the action row only when selected */
    .suggestion-board .suggestion-mobile-action-row {
        display: table-row;
    }

        .suggestion-board .suggestion-mobile-action-row td {
            padding: 8px 12px 10px;
            border-bottom: 1px solid var(--border);
            background: rgba(168, 85, 247, .06);
        }

    .suggestion-board .mobile-draft-button {
        display: block;
    }
    /* =========================================================
   ALL PLAYERS - MOBILE HYBRID GRID
   ========================================================= */

    .player-board-mobile {
        display: none;
    }


    /* ---------------------------------------------------------
   Shared horizontal scrolling surface
   --------------------------------------------------------- */

    .mobile-player-scroll {
        width: 100%;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }


    /*
    Everything inside this element participates in the
    SAME horizontal scrolling area.

    The data columns are deliberately wider than the phone.
*/

    .mobile-player-grid {
        width: max-content;
        min-width: 100%;
    }


    /* ---------------------------------------------------------
   Data header
   --------------------------------------------------------- */

    .mobile-data-header,
    .mobile-player-data-row {
        display: grid;
        grid-template-columns: 58px 58px 72px 100px 110px 95px 100px 95px 95px 60px 60px 70px 70px 280px;
        width: max-content;
    }


    /* Header */

    .mobile-data-header {
        min-height: 34px;
        background: var(--surface-2);
        border-bottom: 1px solid var(--border);
        font-size: .62rem;
        font-weight: 800;
        letter-spacing: .04em;
        color: var(--muted);
    }


        .mobile-data-header .mobile-grid-stat {
            background: var(--surface-2);
        }


    /* ---------------------------------------------------------
   Player name
   --------------------------------------------------------- */

    /*
    THIS IS THE IMPORTANT PART.

    The name row is still physically inside the one shared
    horizontal scroller, but it is exactly viewport width.

    That means it doesn't have enough width to move
    horizontally with the data.
*/

    .mobile-player-name-row {
        position: sticky;
        left: 0;
        z-index: 5;
        width: 100vw;
        max-width: 100vw;
        box-sizing: border-box;
        min-height: 36px;
        padding: 7px 12px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 7px;
        background: var(--surface-2);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        font-size: .82rem;
        font-weight: 800;
        /*
        Prevent the name row from inheriting the width
        of the scrolling data grid.
    */
        margin-right: 0;
    }


    /* Player name */

    .mobile-player-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 0 1 auto;
    }


    /* Status stays immediately beside the name */

    .mobile-player-name-row .player-status {
        flex: 0 0 auto;
        margin: 0;
        white-space: nowrap;
        font-size: .62rem;
        padding: 3px 7px;
    }


    /* ---------------------------------------------------------
   Player data
   --------------------------------------------------------- */

    .mobile-player-data-row {
        min-height: 42px;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
    }


    /* Individual cells */

    .mobile-grid-stat {
        min-width: 0;
        box-sizing: border-box;
        padding: 7px 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: 1px solid var(--border);
        white-space: nowrap;
        font-size: .76rem;
    }


    /* Position badge */

    .mobile-player-data-row .position-badge {
        flex-shrink: 0;
    }


    /* Personal value */

    .mobile-player-data-row .mobile-grid-stat strong {
        color: var(--purple-light);
    }


    /* ---------------------------------------------------------
   Notes
   --------------------------------------------------------- */

    .mobile-grid-notes {
        min-width: 280px;
        justify-content: flex-start;
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
    }


    /* ---------------------------------------------------------
   Mobile activation
   --------------------------------------------------------- */

    @media (max-width: 700px) {

        .player-board-mobile {
            display: block;
        }

        /*
        Your existing desktop table should have whatever
        desktop class you're already using. If the table
        itself isn't hidden by your existing CSS, use:
    */

        .player-board > .player-table-container {
            display: none;
        }
    }

}

@media (max-width:420px) {
    .mobile-player-name-row {
        padding-left: 10px;
        padding-right: 10px;
    }

    .mobile-grid-stat {
        padding-left: 7px;
        padding-right: 7px;
    }
    .draft-page,
    .draft-setup {
        padding-left: 6px;
        padding-right: 6px;
    }

    .setup-section {
        padding: 11px;
    }
}
/* =========================================================
   LIVE DRAFT - FINAL FIXES
   ========================================================= */

/* ---------------------------------------------------------
   Current Roster
   --------------------------------------------------------- */

.current-roster {
    overflow: hidden;
}

.current-roster-header {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient( 90deg, rgba(168, 85, 247, .12), transparent ), var(--surface-2);
    color: var(--text);
    font-size: .95rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.current-roster-positions {
    width: 100%;
}

.current-roster-position {
    border-bottom: 1px solid rgba(59, 49, 75, .55);
}

    .current-roster-position:last-child {
        border-bottom: none;
    }

.current-roster-position-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 12px;
    background: rgba(168, 85, 247, .055);
    color: var(--purple-light);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.current-roster-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(168, 85, 247, .12);
    color: var(--muted);
    font-size: .65rem;
}

.current-roster-player {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 7px 12px;
}

.current-roster-player-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-size: .85rem;
}

.current-roster-player-team {
    flex-shrink: 0;
    color: var(--muted);
    font-size: .7rem;
}

.current-roster-empty,
.roster-empty-state {
    padding: 8px 12px;
    color: var(--muted);
    font-size: .8rem;
}

/* ---------------------------------------------------------
   Recent Picks
   --------------------------------------------------------- */

.recent-picks {
    overflow: hidden;
}

.recent-picks-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 48px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient( 90deg, rgba(168, 85, 247, .08), transparent ), var(--surface-2);
}

    .recent-picks-header h2 {
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        font-size: .92rem;
        text-transform: uppercase;
        letter-spacing: .05em;
    }

.recent-picks-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(168, 85, 247, .14);
    color: var(--purple-light);
    font-size: .65rem;
    font-weight: 800;
}

.recent-picks-table {
    width: 100%;
}

.recent-picks-row {
    display: grid;
    grid-template-columns: 52px minmax(90px, .8fr) minmax(140px, 1.5fr) 52px;
    align-items: center;
    min-height: 48px;
    border-bottom: 1px solid rgba(59, 49, 75, .55);
}

    .recent-picks-row:last-child {
        border-bottom: none;
    }

    .recent-picks-row > div {
        min-width: 0;
        padding: 8px 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.recent-picks-header-row {
    min-height: 34px;
    background: #17121f;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}

    .recent-picks-header-row > div {
        padding-top: 7px;
        padding-bottom: 7px;
    }

.recent-pick-number {
    text-align: center;
}

.recent-pick-position {
    text-align: center;
}

.recent-picks-row.user-pick {
    background: rgba(168, 85, 247, .055);
}

    .recent-picks-row.user-pick .recent-pick-player {
        color: var(--purple-light);
        font-weight: 800;
    }

.recent-picks-row.cpu-pick {
    opacity: .88;
}

.recent-pick-team {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-pick-player {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-picks-empty {
    padding: 20px;
    color: var(--muted);
    text-align: center;
}

/* ---------------------------------------------------------
   Player Board
   --------------------------------------------------------- */

/*
   PlayerBoard intentionally uses ONE horizontal table.
   The old mobile-player-list has been removed.
*/

.player-board .player-table-container {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.player-board .player-table {
    width: max-content;
    min-width: 1500px;
}

    .player-board .player-table th:first-child,
    .player-board .player-table td:first-child {
        position: sticky;
        left: 0;
    }

    .player-board .player-table tbody td:first-child {
        z-index: 5;
    }

    /* Keep the sticky player column visually above scrolling cells. */
    .player-board .player-table thead th:first-child {
        z-index: 8;
    }

/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 700px) {
    .app-brand {
        padding: 10px 12px 4px;
    }

        .app-brand img {
            width: 92vw;
            max-height: 90px;
        }
    .recent-picks-row {
        grid-template-columns: 42px minmax(75px, .8fr) minmax(120px, 1.5fr) 48px;
    }

        .recent-picks-row > div {
            padding-left: 7px;
            padding-right: 7px;
        }

    .current-roster-player {
        min-height: 36px;
    }
}
@media (max-width: 420px) {
    .app-brand img {
        width: 96vw;
        max-height: 75px;
    }
}
/* =========================================================
   FINAL TEAM CARD + RECENT PICKS FIX
   ========================================================= */


/* =========================================================
   TEAM CONFIGURATION
   ========================================================= */

.teams-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
}

.team-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
    box-shadow: var(--shadow);
}

/* The clickable header must be the entire card width. */
.team-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 74px;
    margin: 0;
    padding: 12px 15px;
    border: 0;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    background: linear-gradient( 90deg, rgba(168, 85, 247, .14), rgba(168, 85, 247, .03) 65%, transparent ), var(--surface-2) !important;
    color: var(--text) !important;
    text-align: left;
    cursor: pointer;
}

    .team-card-header:hover {
        background: linear-gradient( 90deg, rgba(168, 85, 247, .22), rgba(168, 85, 247, .05) 65%, transparent ), var(--surface-3) !important;
    }

    .team-card-header > div:first-child {
        min-width: 0;
        flex: 1;
    }

.team-number {
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .07em;
    line-height: 1;
    text-transform: uppercase;
}

.team-card-header h3 {
    margin: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-card-header-right {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
}

.team-control-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding: 4px 8px;
    border: 1px solid rgba(168, 85, 247, .25);
    border-radius: 999px;
    background: rgba(168, 85, 247, .12);
    color: var(--purple-light);
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

    .team-control-badge.cpu {
        background: rgba(103, 232, 249, .07);
        border-color: rgba(103, 232, 249, .18);
        color: var(--cyan);
    }

.team-expand-icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--border-bright);
    border-radius: 7px;
    background: rgba(168, 85, 247, .08);
    color: var(--purple-light);
    font-size: .7rem;
    line-height: 1;
}

.team-card-body {
    padding: 16px;
    border-top: 1px solid var(--border);
    background: linear-gradient( 180deg, rgba(168, 85, 247, .025), transparent 40% ), var(--surface);
}

    .team-card-body .setup-field {
        margin-bottom: 14px;
    }

        .team-card-body .setup-field:last-child {
            margin-bottom: 0;
        }


/* =========================================================
   TEAM CARD STATES
   ========================================================= */

/* Collapsed cards should be compact. */
.team-card.collapsed .team-card-header {
    min-height: 66px;
}

/* Expanded cards retain the same clean header. */
.team-card.expanded .team-card-header {
    border-bottom: 0;
}


/* =========================================================
   RECENT PICKS
   ========================================================= */

.recent-picks {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--border-bright);
    border-radius: var(--radius);
    background: var(--surface);
}

/* Header */

.recent-picks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient( 90deg, rgba(168, 85, 247, .10), transparent ), var(--surface-2);
}

    .recent-picks-header h2 {
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        color: var(--text);
        font-size: .92rem;
        font-weight: 800;
        letter-spacing: .05em;
        text-transform: uppercase;
    }

.recent-picks-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(168, 85, 247, .14);
    color: var(--purple-light);
    font-size: .65rem;
    font-weight: 800;
}


/* The header and every data row use EXACTLY the same grid. */

.recent-picks-table {
    width: 100%;
}

.recent-picks-row {
    display: grid;
    /*
       Fixed first/second/fourth columns + flexible player column.
       Every row uses this exact template so the headers line up.
    */
    grid-template-columns: 55px 105px minmax(0, 1fr) 55px;
    width: 100%;
    min-height: 48px;
    align-items: center;
    border-bottom: 1px solid rgba(59, 49, 75, .55);
}

    .recent-picks-row:last-child {
        border-bottom: none;
    }

    .recent-picks-row > div {
        min-width: 0;
        padding: 8px 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


/* Column alignment */

.recent-pick-number {
    text-align: center;
}

.recent-pick-team {
    text-align: left;
}

.recent-pick-player {
    text-align: left;
}

.recent-pick-position {
    text-align: center;
}


/* Column header */

.recent-picks-header-row {
    min-height: 34px;
    background: #17121f;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

    .recent-picks-header-row > div {
        padding-top: 7px;
        padding-bottom: 7px;
    }


/* Pick rows */

.recent-picks-row.user-pick {
    background: rgba(168, 85, 247, .055);
}

    .recent-picks-row.user-pick .recent-pick-player {
        color: var(--purple-light);
        font-weight: 800;
    }

.recent-picks-row.cpu-pick {
    opacity: .88;
}

.recent-picks-row:hover:not(.recent-picks-header-row) {
    background: rgba(168, 85, 247, .08);
}


/* Empty state */

.recent-picks-empty {
    padding: 20px;
    color: var(--muted);
    text-align: center;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

    .teams-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 700px) {
    .app-brand {
        padding: 10px 12px 4px;
    }

        .app-brand img {
            width: 92vw;
            max-height: 90px;
        }
}
@media (max-width: 600px) {

    .teams-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .team-card-header {
        min-height: 64px;
        padding: 11px 13px;
    }

        .team-card-header h3 {
            font-size: .98rem;
        }

    .team-card-body {
        padding: 13px;
    }

    .recent-picks-row {
        grid-template-columns: 48px 90px minmax(0, 1fr) 50px;
    }

        .recent-picks-row > div {
            padding-left: 7px;
            padding-right: 7px;
        }
}
@media (max-width: 420px) {
    .app-brand img {
        width: 96vw;
        max-height: 75px;
    }
}
/* =========================================================
   DRAFT GRID - PICK NUMBERS + POSITION COLORS
   ========================================================= */

.draft-grid-pick-number {
    margin-bottom: 4px;
    color: var(--muted);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1;
}

.draft-grid-player {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.draft-grid-player-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.draft-grid-player-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: .7rem;
}

/* Use the same position colors as All Players / Recent Picks */
.draft-grid .position-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 3px 7px;
    border: 1px solid var(--border-bright);
    border-radius: 5px;
    background: rgba(168, 85, 247, .08);
    font-size: .7rem;
    font-weight: 800;
    line-height: 1;
}

.draft-grid .position-qb {
    color: var(--purple-light);
}

.draft-grid .position-rb {
    color: var(--lime);
}

.draft-grid .position-wr {
    color: var(--cyan);
}

.draft-grid .position-te {
    color: var(--pink);
}

.draft-grid .position-k {
    color: var(--orange);
}
/* =========================================================
   JOOSYFF BRANDING
   ========================================================= */

.app-shell {
    min-height: 100vh;
}

.app-brand {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px 20px 6px;
}

    .app-brand img {
        display: block;
        width: min(620px, 90vw);
        height: auto;
        max-height: 120px;
        object-fit: contain;
    }
/* =========================================================
   SUGGESTION BOARD - MOBILE PLAYER ACTION
   ========================================================= */

.suggestion-player-row {
    cursor: pointer;
}

    .suggestion-player-row:hover {
        background: rgba(168, 85, 247, .07);
    }

.suggestion-mobile-action-row {
    display: none;
}

.mobile-draft-button {
    width: 100%;
    min-height: 42px;
    padding: 9px 14px;
    border: 1px solid var(--purple);
    border-radius: 8px;
    background: linear-gradient( 135deg, var(--purple-dark), var(--purple) );
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

    .mobile-draft-button:hover {
        filter: brightness(1.08);
    }

/* Advanced settings disclosure on strategy cards. Collapsed by default - the
   tuning sliders ship at calibrated values that most people never need to touch,
   and showing all seven up front made the page look far more complicated than the
   decision actually is. */
.advanced-toggle { display:flex; align-items:center; gap:8px; width:100%; margin:12px 0 0; padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); color:var(--muted); font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; }
.advanced-toggle:hover { color:var(--text); border-color:var(--purple); }
.advanced-toggle-caret { color:var(--purple-light); font-size:.9rem; line-height:1; }
.strategy-advanced { margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }

/* =========================================================
   PERSISTENT DRAFT STATUS BAR
   ========================================================= */
/* DraftHeader only renders inside the Live Draft tab, so whose pick it is used to
   vanish the moment you opened All Players / Rosters / Grid. This bar is sticky
   across every tab. A pick timer would slot in beside .draft-clock-team. */
.draft-top-bar { position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:rgba(20,16,28,.96); backdrop-filter:blur(8px); }
.draft-clock { display:flex; align-items:center; gap:9px; min-width:0; flex-wrap:wrap; }
.draft-clock-pick { color:var(--text); font-weight:800; font-size:.85rem; white-space:nowrap; }
.draft-clock-total { color:var(--muted); font-weight:600; }
.draft-clock-divider { width:1px; height:16px; background:var(--border-bright); }
.draft-clock-label { color:var(--muted); font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.draft-clock-team { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--purple-light); font-size:.92rem; font-weight:800; }
.draft-clock-team.is-you { color:var(--lime); }

/* =========================================================
   MOBILE ACTION SHELL
   ========================================================= */
/* Both mobile Draft buttons live inside horizontally scrolling surfaces - the
   suggestion table (min-width:850px) and the All Players grid (width:max-content).
   Without pinning, a button stretches to that full width and scrolls away with the
   columns. Sticky keeps it on screen; the viewport-derived width keeps it from
   running wider than the phone.

   The 42px inset is .draft-page's 8px side padding (x2), the board's 1px borders
   (x2), and the cell's 12px padding (x2). Adjust it if any of those change. */
.mobile-action-shell { position:sticky; left:0; width:calc(100vw - 42px); max-width:100%; box-sizing:border-box; }

.mobile-player-action-row { padding:8px 12px 10px; border-bottom:1px solid var(--border); background:rgba(168,85,247,.06); }
.mobile-player-name-row.is-tappable { cursor:pointer; }
.mobile-player-name-row.expanded { background:linear-gradient(90deg,rgba(168,85,247,.16),transparent),var(--surface-2); }
.mobile-player-caret { flex:0 0 auto; margin-left:auto; color:var(--purple-light); font-size:.8rem; }

@media (max-width:700px) {
    /* Bottom tab bar - the four tabs are the primary navigation during a draft and
       were pinned at the top, out of thumb reach on a large phone. env() keeps it
       clear of the iOS home indicator. */
    .draft-tab-bar {
        position: fixed;
        left: 8px;
        right: 8px;
        /* .draft-tabs sets width:100%, which fights the left/right offsets: the
           bar ends up a full container wide but starting 8px in, so it hangs 8px
           off the right edge and under the scrollbar. Let the offsets size it. */
        width: auto;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        z-index: 40;
        margin-bottom: 0;
        background: rgba(20,16,28,.98);
        backdrop-filter: blur(10px);
        box-shadow: 0 -6px 20px rgba(0,0,0,.35);
    }

    /* Room for the fixed bar so the last row of any tab stays reachable. */
    .draft-page {
        padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    }

    /* The status bar sits under the WebView status area, not the tab bar. */
    .draft-top-bar {
        padding: 7px 9px;
    }

    .draft-clock-label {
        display: none;
    }
}

/* =========================================================
   TOGGLE GROUP - MULTI-OPTION SCALES
   ========================================================= */
/* .toggle-option was written for two options (Snake/Standard). At five or seven the
   default button padding pushed the last label ("Chaotic") hard against the
   container edge, so options now share the row evenly and centre their own text.
   min-width:0 is what actually lets a flex item shrink below its content width. */
.toggle-group-compact .toggle-option { padding:8px 4px; font-size:.78rem; }

/* Checkboxes were a small default control in a large touch target - easy to miss on
   a phone. Sized up and given breathing room, with the whole label clickable. */
.setup-field label.setup-toggle-label { gap:11px; padding:4px 0; font-size:.78rem; }
.setup-field input.setup-toggle { width:20px; height:20px; }

@media (max-width:700px) {
    /* Labels are kept to four characters so they never need to wrap mid-word in a
       narrow card column - "Balanced" was breaking as "Bala/nced". nowrap on the
       base rule guarantees it, and the smaller type keeps five options fitting. */
    .toggle-option { padding:8px 5px; font-size:.76rem; }
    .toggle-group-compact .toggle-option { padding:8px 2px; font-size:.72rem; }

    /* Bigger still where it matters most. */
    .setup-field input.setup-toggle { width:22px; height:22px; }
    .setup-field label.setup-toggle-label { min-height:44px; }
}

/* =========================================================
   OVERFLOW CONTAINMENT
   ========================================================= */
/* Grid and flex children both default to a min-width of auto, meaning they refuse
   to shrink below their content. One wide child (the seven-step weight scale, a
   long unbreakable note) then forces its track wider than the track's own column,
   which cascades out through the card, the section and the page - which is what
   made Advanced Settings run off the side of the screen and clip.
   Every grid-template-columns here uses minmax(0, ...) for the same reason; these
   are the belt to that braces. */
.strategy-weight-grid > *,
.setup-card-grid > *,
.roster-settings-grid > *,
.team-settings-grid > *,
.strategy-grid > *,
.teams-grid > * { min-width: 0; }

.strategy-card,
.setup-card,
.setup-section { min-width: 0; overflow-wrap: anywhere; }

/* The tab labels are short and known, so they share the bar rather than overflow
   it. .draft-tab shipped as flex:1 0 auto - shrink 0 - with nowrap text, so four
   tabs simply could not fit a phone, and .draft-tab-bar's overflow-x:auto quietly
   turned them into a scroller with "Draft Grid" hidden off the edge. The shrink fix
   is applied at the base rule; this just tightens spacing on small screens. */

@media (max-width:700px) {
    .draft-tab-bar { overflow-x:hidden; gap:3px; padding:4px; }
    .draft-tab { padding:9px 4px; font-size:.72rem; }
}

/* =========================================================
   IN-APP CONFIRMATION MODAL
   ========================================================= */
/* Replaces window.confirm for the Exit prompt. A native script dialog is sized by
   the host rather than the app, and in the MAUI WebView it rendered wider than the
   window with OK/Cancel clipped off the right edge - the prompt was visible but
   unanswerable, so the button looked dead. Sizing this ourselves is the only way to
   guarantee the buttons are reachable at any window size. */
.modal-backdrop { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(6,4,10,.72); backdrop-filter:blur(3px); }
.modal-card { width:100%; max-width:420px; padding:20px; border:1px solid var(--border-bright); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }
.modal-card h3 { margin:0 0 8px; font-size:1.05rem; }
.modal-card p { margin:0 0 18px; color:var(--muted); font-size:.88rem; line-height:1.45; }
.modal-actions { display:flex; gap:10px; }
.modal-button { flex:1 1 0; min-width:0; min-height:44px; padding:10px 14px; border:1px solid var(--border-bright); border-radius:8px; background:var(--surface-2); color:var(--text); font-weight:700; cursor:pointer; }
.modal-button:hover { border-color:var(--purple); }
.modal-button.is-danger { border-color:var(--danger); background:linear-gradient(135deg,rgba(159,18,57,.55),rgba(251,113,133,.35)); color:#fff; }
.modal-button.is-danger:hover { filter:brightness(1.1); }

/* ===================================================================
   Weekly analysis screens (Shadow Report, Sit/Start).
   Reuses the existing tokens rather than introducing a second palette -
   these are pages in the same app, not a separate product.
   =================================================================== */

.weekly-page { padding:18px; max-width:1800px; margin:0 auto; }

.weekly-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.weekly-header h1 { margin:0 0 4px; }
.weekly-subtitle { margin:0; color:var(--muted); font-size:.92rem; }
.weekly-link { color:var(--purple-light); text-decoration:none; font-size:.92rem; white-space:nowrap; }
.weekly-link:hover { text-decoration:underline; }

/* The sample caveat is deliberately prominent: early in a season it is the
   single most important thing on the page. */
.weekly-sample { margin-bottom:14px; padding:10px 13px; border:1px solid rgba(250,204,21,.32); border-radius:9px; background:rgba(250,204,21,.07); color:#fde68a; font-size:.9rem; }

.weekly-note { color:var(--muted); font-size:.88rem; line-height:1.5; margin:10px 0; }
.weekly-dim { color:var(--muted); font-size:.85em; margin-left:6px; }

/* Injury designation, shown beside a name on every weekly screen.

   Reported, never priced: the projection beside it is identical whether or not the
   badge is there (a user decision), so it has to read as its own separate fact rather
   than as something already folded into the number.

   Out and Doubtful take the strong colour; Questionable is deliberately quieter,
   because a third of the league carries one in a given week and colouring them alike
   would make the strong ones stop registering. */
.injury-badge {
    display:inline-block;
    margin-left:6px;
    padding:1px 6px;
    border-radius:999px;
    font-size:.7em;
    font-weight:700;
    letter-spacing:.03em;
    vertical-align:middle;
    border:1px solid transparent;
    white-space:nowrap;
}
.injury-severe { color:var(--danger); border-color:rgba(251,113,133,.5); background:rgba(159,18,57,.22); }
.injury-minor  { color:var(--orange); border-color:rgba(251,146,60,.4); background:rgba(180,83,9,.18); }

/* Week navigation on the weekly screens.

   Arrows for the common move (next week) and a select for the occasional jump, with
   the current week marked in the list - the one a user needs to be able to get back
   to. Constrained rather than a typed number, matching the setup page: a typed week is
   a way to ask for week 0.

   .week-notice is the caveat that has to travel with a week that is not the current
   one: a future week's opponents are real, its player numbers are from games already
   played, and nothing on the page would otherwise say so. */
.week-picker { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:14px 0; }
.week-picker select {
    padding:8px 10px; border-radius:8px; border:1px solid var(--border);
    background:var(--surface-2); color:inherit; min-width:150px;
}
.week-step {
    min-width:38px; padding:8px 10px; border-radius:8px; border:1px solid var(--border);
    background:var(--surface-2); color:inherit; cursor:pointer; line-height:1;
}
.week-step:disabled { opacity:.4; cursor:default; }
.week-step:not(:disabled):hover { border-color:var(--purple-light); }
.week-now {
    padding:8px 12px; border-radius:8px; border:1px solid var(--border);
    background:transparent; color:var(--muted); cursor:pointer; font-size:.85rem;
}
.week-now:hover { color:inherit; border-color:var(--purple-light); }
.week-notice {
    margin:0 0 14px; padding:10px 12px; border-radius:9px;
    border:1px solid rgba(251,146,60,.35); background:rgba(180,83,9,.12);
    font-size:.9rem; line-height:1.5;
}

/* Thumb reach beats tidiness on a phone: the arrows grow and the select takes the
   rest of the row rather than everything shrinking to fit one line. */
@media (max-width:700px) {
    .week-picker select { flex:1 1 auto; min-width:0; }
    .week-step { min-width:44px; padding:10px; }
    .week-now { flex:1 1 100%; }
}

.weekly-controls { display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; margin:14px 0; }
.weekly-controls label { display:flex; flex-direction:column; gap:5px; font-size:.85rem; color:var(--muted); }
.weekly-controls select, .weekly-controls input { padding:8px 10px; border-radius:8px; border:1px solid var(--border); background:var(--surface-2); color:inherit; min-width:220px; }

.weekly-suggest { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:9px; overflow:hidden; margin-bottom:14px; max-width:520px; }
.weekly-suggest-item { text-align:left; padding:9px 12px; background:var(--surface-2); border:0; border-bottom:1px solid var(--border); color:inherit; cursor:pointer; }
.weekly-suggest-item:last-child { border-bottom:0; }
.weekly-suggest-item:hover { background:var(--surface-3, rgba(255,255,255,.05)); }

.weekly-game { border:1px solid var(--border); border-radius:11px; margin-bottom:16px; overflow:hidden; }
.weekly-game-head { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; background:var(--surface-2); border-bottom:1px solid var(--border); }
.weekly-matchup { font-weight:600; }
.weekly-date { color:var(--muted); font-size:.85rem; }

/* minmax(0,...) not 1fr - an auto minimum cannot shrink below its content, which
   is what makes wide tables push a grid past the viewport. */
.weekly-sides { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; }
.weekly-side { padding:12px 14px; min-width:0; }
.weekly-side + .weekly-side { border-left:1px solid var(--border); }
.weekly-side-head { display:flex; align-items:baseline; gap:8px; margin-bottom:9px; }
.weekly-team { font-weight:600; font-size:1.02rem; }
.weekly-vs { color:var(--muted); font-size:.82rem; }

.weekly-defense { padding:7px 10px; border-radius:7px; font-size:.86rem; margin-bottom:10px; }
.defense-tough { background:rgba(251,113,133,.09); border:1px solid rgba(251,113,133,.3); }
.defense-soft { background:rgba(74,222,128,.09); border:1px solid rgba(74,222,128,.3); }
.defense-mid { background:var(--surface-2); border:1px solid var(--border); }

.weekly-table { width:100%; border-collapse:collapse; font-size:.86rem; margin-bottom:10px; }
.weekly-table th { text-align:left; padding:6px 8px; color:var(--muted); font-weight:600; border-bottom:1px solid var(--border); white-space:nowrap; }
.weekly-table td { padding:6px 8px; border-bottom:1px solid rgba(255,255,255,.04); }
.weekly-table tbody tr:last-child td { border-bottom:0; }
.weekly-coverage { margin-bottom:14px; }

.rating-good { color:#86efac; }
.rating-bad { color:#fda4af; }

.weekly-verdict { padding:12px 14px; border-radius:9px; margin:14px 0; font-size:.98rem; }
.verdict-clear { background:rgba(74,222,128,.09); border:1px solid rgba(74,222,128,.32); }
.verdict-close { background:rgba(250,204,21,.08); border:1px solid rgba(250,204,21,.3); }

.weekly-compare { overflow-x:auto; }
.weekly-best td { background:rgba(74,222,128,.06); }
.weekly-remove { background:none; border:0; color:var(--muted); cursor:pointer; font-size:1.05rem; padding:0 5px; }
.weekly-remove:hover { color:#fda4af; }

.weekly-working { margin:8px 0; border:1px solid var(--border); border-radius:9px; background:var(--surface-2); }
.weekly-working summary { padding:9px 13px; cursor:pointer; font-size:.88rem; color:var(--purple-light); }
.weekly-working ol { margin:0; padding:0 18px 13px 32px; font-size:.87rem; line-height:1.65; color:var(--muted); }
.weekly-working strong { color:inherit; }

/* Below 1400px the two sides of a game stack, so each table gets the full width
   rather than a half it cannot fit in. The widest table (RB, once contact was split
   into his half and the defense's) needs ~650px even with wrapped headings, and a
   half-column only reaches that from about 1400px. Desktop should never scroll a
   matchup tile sideways - that is a phone behaviour. */
@media (max-width:1400px) {
    .weekly-sides { grid-template-columns:minmax(0,1fr); }
    .weekly-side + .weekly-side { border-left:0; border-top:1px solid var(--border); }
}

/* Desktop: headings wrap instead of forcing width. Long headings like "His yds
   before / after contact" were most of the table's width while the numbers under
   them are short. Phones keep single-line headings and scroll, which is the
   pattern the rest of the app uses there. */
@media (min-width:821px) {
    .weekly-sides .weekly-table th { white-space:normal; vertical-align:bottom; }
}

@media (max-width:820px) {
    .weekly-page { padding:12px; }
}

/* Route into the weekly applet from the draft shell. */
.setup-weekly-links { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }

/* The lane / depth matchup tables: many narrow numeric columns with a league
   comparison tucked under each one. */
.weekly-lanes { margin-top:10px; }
.weekly-lanes td, .weekly-lanes th { white-space:nowrap; }
.weekly-lanes .weekly-dim { display:block; margin-left:0; font-size:.78em; }

/* Opposing-defense columns. Tinted rather than only labelled, because which side a
   number belongs to was the single most common misreading on the weekly screens,
   and a tooltip cannot answer it on a phone. Orange so it cannot be confused with
   the green/red good-matchup colouring the same cells already carry. */
.weekly-table th.col-def,
.weekly-table td.col-def { background:rgba(251,146,60,.07); }
.weekly-table th.col-def { color:var(--orange); border-bottom-color:rgba(251,146,60,.45); }
.weekly-table th[title] { cursor:help; text-decoration:underline dotted rgba(157,145,170,.5); text-underline-offset:3px; }

.weekly-legend { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.85rem; margin:8px 0 12px; }
.weekly-legend-swatch { flex:0 0 auto; width:14px; height:14px; border-radius:3px; background:rgba(251,146,60,.18); border:1px solid rgba(251,146,60,.45); }

/* Each Shadow Report table scrolls inside its own half of the game card. Without
   this a table wider than its column - the RB table once contact was split into
   his half and the defense's - spilled across the divider and drew its last column
   (Lane fit) on top of the OTHER team's first column: missing on one side, doubled
   over a player's name on the other. The first column stays pinned so a row can
   still be read across to its far end. */
.weekly-scroll { overflow-x:auto; max-width:100%; margin-bottom:10px; }
.weekly-scroll > .weekly-table { margin-bottom:0; }
.weekly-scroll .weekly-table th:first-child,
.weekly-scroll .weekly-table td:first-child { position:sticky; left:0; z-index:1; background:var(--bg); }
/* A pinned column needs an opaque background, which would otherwise erase the
   defense tint - layer the tint over it instead. */
.weekly-scroll .weekly-table th.col-def:first-child,
.weekly-scroll .weekly-table td.col-def:first-child { background:linear-gradient(rgba(251,146,60,.07),rgba(251,146,60,.07)),var(--bg); }

/* ---- My League ------------------------------------------------------------
   Reuses the weekly screens' page, table and note styles; only the league
   picker, forms and roster list are new. Grids use minmax(0,1fr), never a bare
   1fr - see the mobile notes in CLAUDE.md for why that matters. */
.league-section { margin:14px 0; }
.league-list { display:flex; flex-wrap:wrap; gap:8px; }
.league-chip { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:9px 13px; border-radius:10px; border:1px solid var(--border); background:var(--surface-2); color:inherit; cursor:pointer; text-align:left; }
.league-chip.selected { border-color:var(--purple-light); box-shadow:var(--glow); }
.league-chip.add { color:var(--purple-light); justify-content:center; }
.league-panel { border:1px solid var(--border); border-radius:11px; padding:14px 16px; margin:14px 0; background:var(--surface); }
.league-panel h2 { margin:0 0 6px; font-size:1.15rem; }
.league-panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; }
.league-subhead { font-size:.95rem; margin:16px 0 8px; color:var(--muted); }
.league-status { color:var(--lime); font-size:.9rem; margin:8px 0; }
.league-badge { font-size:.72rem; font-weight:500; color:var(--muted); border:1px solid var(--border); border-radius:999px; padding:2px 8px; margin-left:8px; vertical-align:middle; }
.league-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.league-button { padding:8px 14px; border-radius:8px; border:1px solid var(--purple); background:var(--purple-dark); color:var(--text); cursor:pointer; font-weight:600; }
.league-button.secondary { background:transparent; border-color:var(--border-bright); }
.league-button:disabled { opacity:.5; cursor:default; }
.league-check { display:flex; align-items:center; gap:6px; font-size:.85rem; color:var(--muted); }
.league-form, .league-slot-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px 14px; }
.league-form label, .league-slot-grid label { display:flex; flex-direction:column; gap:5px; font-size:.85rem; color:var(--muted); min-width:0; }
.league-form input, .league-form select, .league-slot-grid select { padding:8px 10px; border-radius:8px; border:1px solid var(--border); background:var(--surface-2); color:inherit; min-width:0; }
.league-fixed-rules { margin-top:8px; }
.league-found { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--border); }
.league-roster { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px 18px; margin:8px 0 12px; }
.league-roster-group h4 { margin:0 0 4px; font-size:.8rem; color:var(--muted); letter-spacing:.05em; }
.league-roster-row { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:4px 0; border-bottom:1px solid rgba(255,255,255,.04); }
.league-results { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:6px; margin-top:6px; }
.league-result { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:8px 10px; border-radius:8px; border:1px solid var(--border); background:var(--surface-2); color:inherit; cursor:pointer; text-align:left; }
.league-result:disabled { opacity:.55; cursor:default; }
.league-result-add { font-size:.8rem; color:var(--purple-light); }

/* A gain from a trade. Green because it is the one number on these tables that is
   unambiguously good news; a loss never appears, since a trade that loses points is
   not offered at all. */
/* "RB4" beside a name. A league-wide fact about the player, so it is styled like a
   badge rather than like one of the team-specific numbers around it. */
.position-rank { display:inline-block; font-size:.72rem; font-weight:600; color:var(--purple-light); border:1px solid var(--border); border-radius:999px; padding:1px 7px; margin:0 6px; vertical-align:middle; white-space:nowrap; }

/* A buy/sell axis chip on the partner table. */
.trade-axis { display:inline-block; font-size:.72rem; border-radius:999px; padding:1px 8px; margin:2px 4px 2px 0; border:1px solid var(--border); white-space:nowrap; }
.trade-axis.buy { color:var(--lime); }
.trade-axis.sell { color:var(--orange, #fb923c); }

.trade-gain { color:var(--lime); }
/* Why a waiver move is suggested - wraps, unlike .weekly-range, because it is a sentence. */
.waiver-reason { display:block; font-size:.78em; color:var(--muted); white-space:normal; max-width:42ch; }
/* Who's out (AbsencePanel): one line per player, the action at the end. */
.absence-list { list-style:none; margin:.4rem 0; padding:0; display:grid; gap:.35rem; }
.absence-list li { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.absence-list li .league-button { margin-left:auto; }
.absence-roster { margin-top:.6rem; }
.absence-roster summary { cursor:pointer; color:var(--muted); }
/* A player who costs more than he is worth - the sell side, not an error. */
.trade-loss { color:var(--orange, #fb923c); }

/* Buy and sell side by side on desktop, stacked on a phone. Two short tables read
   as one comparison; one long one reads as a list. */
.trade-mispriced { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:10px 18px; margin:8px 0 4px; }
.trade-mispriced h4 { margin:0 0 6px; font-size:.85rem; color:var(--muted); }

/* ---- League pages: shared navigation and toolbar --------------------------
   One nav across My League, the three trade pages and the two weekly screens,
   so every page reaches every other the same way. */
.league-nav { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.league-nav-link { padding:6px 11px; border-radius:999px; border:1px solid transparent; color:var(--muted); text-decoration:none; font-size:.85rem; white-space:nowrap; }
.league-nav-link:hover { color:var(--text); border-color:var(--border); }
.league-nav-link.current { color:var(--text); border-color:var(--purple); background:var(--surface-2); }
.trade-toolbar { display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; margin:6px 0 12px; }
.trade-toolbar .basis-picker { margin:0; }
.league-picker { display:flex; align-items:center; gap:8px; }
.league-picker select { padding:7px 10px; border-radius:8px; border:1px solid var(--border); background:var(--surface-2); color:inherit; min-width:0; max-width:100%; }

/* ---- Trade Finder -----------------------------------------------------------
   Position cards are buttons: tapping one asks for an upgrade there. Colour says
   which side of average a position is on; "hole" is stronger than "upgrade"
   because a waiver pickup out-projects everyone the user rosters there. */
.trade-needs { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:10px; margin-top:10px; }
.trade-need { display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:var(--surface-2); color:inherit; text-align:left; cursor:pointer; min-width:0; }
.trade-need:hover { border-color:var(--border-bright); }
.trade-need.upgrade { border-color:rgba(251,146,60,.55); }
.trade-need.hole { border-color:var(--danger); background:linear-gradient(rgba(239,68,68,.07),rgba(239,68,68,.07)),var(--surface-2); }
.trade-need.chosen { box-shadow:var(--glow); border-color:var(--purple-light); }
.trade-need-pos { font-size:.78rem; color:var(--muted); letter-spacing:.06em; }
.trade-need-grade { font-size:1.35rem; line-height:1.1; }
.trade-need-say { font-size:.8rem; }

/* Roster beside results on a wide screen; stacked below 1100px so neither is
   squeezed into a column its table cannot fit. */
.trade-layout { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:14px; align-items:start; }
.trade-roster tbody tr { cursor:pointer; }
.trade-roster tbody tr.picked { background:rgba(168,85,247,.12); }

.trade-tag { display:inline-block; font-size:.72rem; border-radius:999px; padding:1px 8px; margin:1px 4px 1px 0; border:1px solid var(--border); white-space:nowrap; }
.trade-tag.tag-starter { color:var(--lime); }
.trade-tag.tag-chip { color:var(--cyan); }
.trade-tag.tag-sell { color:var(--orange); }
.trade-tag.tag-depth { color:var(--muted); }
.trade-tag.tag-upgrade { color:var(--orange); border-color:rgba(251,146,60,.55); }

.trade-ask { display:flex; flex-direction:column; gap:8px; padding-bottom:10px; border-bottom:1px solid var(--border); margin-bottom:6px; }
.trade-ask-constraints { display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-height:28px; }
.trade-chip { display:inline-flex; align-items:center; gap:6px; padding:3px 4px 3px 10px; border-radius:999px; border:1px solid var(--purple); background:var(--surface-2); font-size:.85rem; }
.trade-chip button { border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:1rem; line-height:1; padding:0 4px; }
.trade-chip button:hover { color:var(--text); }

.trade-card { border:1px solid var(--border); border-radius:10px; padding:11px 13px; margin:10px 0; background:var(--surface-2); }
.trade-card-head { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.trade-swap { display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); gap:10px; align-items:start; }
.trade-swap-label { display:block; font-size:.72rem; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; margin-bottom:2px; }
.trade-swap-arrow { color:var(--purple-light); font-size:1.2rem; align-self:center; }
.trade-card-numbers { display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:8px; font-size:.86rem; }
.trade-card-why { margin:6px 0 4px; font-size:.82rem; }
.trade-partner { display:block; width:100%; text-align:left; padding:7px 9px; margin:0 0 6px; border-radius:8px; border:1px solid var(--border); background:var(--surface-2); color:inherit; cursor:pointer; }
.trade-partner:hover { border-color:var(--border-bright); }
.trade-partner strong { margin-right:6px; }

/* ---- Trade Calculator -------------------------------------------------------- */
.trade-sides { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:14px; align-items:start; }
.trade-sends { display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-height:30px; margin:6px 0 10px; }
.trade-pick-list { display:flex; flex-wrap:wrap; gap:6px; max-height:220px; overflow-y:auto; padding:2px; }
.trade-pick { padding:5px 10px; border-radius:999px; border:1px solid var(--border); background:var(--surface-2); color:inherit; cursor:pointer; font-size:.84rem; }
.trade-pick.picked { border-color:var(--purple-light); background:rgba(168,85,247,.18); }
.trade-verdict p { margin:0 0 5px; }
.trade-verdict p:first-child { font-weight:600; font-size:1.02rem; }
.trade-compare th[scope="row"] { text-align:left; color:var(--muted); font-weight:500; white-space:nowrap; }

/* ---- Roster Grades ----------------------------------------------------------- */
.grade-row { cursor:pointer; }
.grade-row.open td { border-bottom-color:transparent; }
.grade-detail td { background:var(--surface-2); }
.grade-detail-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:10px 18px; padding:4px 2px; }
.grade-detail-grid h4 { margin:0 0 2px; font-size:.9rem; }
.grade-detail-grid p { margin:2px 0; }

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

@media (max-width:900px) {
    .trade-sides { grid-template-columns:minmax(0, 1fr); }
}

@media (max-width:700px) {
    .trade-needs { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
    .trade-swap { grid-template-columns:minmax(0, 1fr); }
    .trade-swap-arrow { transform:rotate(90deg); justify-self:start; }
}

/* The other teams in a league. A collapsed team is one line so a twelve-team
   league reads at a glance; one expands at a time for editing. */
.league-teams { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.league-team { border:1px solid var(--border); border-radius:9px; padding:9px 12px; background:var(--surface-2); min-width:0; }
.league-team.mine { border-color:var(--purple); }
.league-team.open { background:var(--surface); box-shadow:var(--glow); }
.league-team-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.league-team-name { flex:1 1 180px; min-width:0; font-size:.95rem; }
input.league-team-name { padding:6px 9px; border-radius:7px; border:1px solid var(--border); background:var(--surface); color:inherit; }
.league-team-actions { display:flex; align-items:center; gap:10px; margin-left:auto; }
/* Truncated rather than wrapped: the summary is a reminder of who is on a team,
   and a twelve-team league of full rosters would otherwise be a wall of names. */
.league-team-summary { margin:5px 0 0; font-size:.83rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media (max-width:700px) {
    .league-form, .league-slot-grid { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
    .league-roster, .league-results { grid-template-columns:minmax(0, 1fr); }
    /* The actions drop to their own row rather than squeezing the name field. */
    .league-team-actions { margin-left:0; width:100%; }
}

/* Floor / Projection / Ceiling picker on the weekly screens and My League. */
.basis-picker { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:10px 0; }
.basis-label { font-size:.85rem; color:var(--muted); }
.basis-picker .toggle-group { max-width:360px; }
.weekly-range { display:block; font-size:.78em; color:var(--muted); white-space:nowrap; }

/* Yahoo: the attribution its API terms require on every page showing its data. */
.yahoo-attribution { margin-top:28px; padding-top:12px; border-top:1px solid var(--border); color:var(--muted); font-size:.82rem; text-align:center; }
.yahoo-attribution a { color:var(--purple-light); }
.yahoo-steps { margin:10px 0 0; padding-left:20px; display:grid; gap:10px; }

/* Defense ranks on the Shadow Report: #1 is the stingiest. A small chip beside the number
   it ranks, coloured like the rates (red tough, green soft); "faced" ranks stay grey. */
.def-rank { display:inline-block; margin-left:4px; padding:0 5px; border-radius:4px; font-size:.72rem; font-weight:700; line-height:1.5; white-space:nowrap; vertical-align:baseline; color:var(--muted); background:var(--surface-2); border:1px solid var(--border); }
.def-rank.rating-good { color:#86efac; border-color:rgba(134,239,172,.45); }
.def-rank.rating-bad { color:#fda4af; border-color:rgba(253,164,175,.45); }
.weekly-legend.rank-legend { display:block; line-height:1.9; }
.defense-summary { margin-top:28px; }
.defense-summary h2 { margin:0 0 6px; font-size:1.15rem; }
.defense-summary-row { cursor:pointer; }
.defense-summary-row:hover td, .defense-summary-row.open td { background:var(--surface-2); }
.defense-summary-table .col-current { box-shadow:inset 0 -2px 0 var(--purple-light); }
.defense-summary-detail > td { padding:8px 4px 14px; }
.defense-summary-detail .weekly-scroll + .weekly-scroll { margin-top:10px; }

/* =========================================================
   APP SHELL - header menu, section tabs, phone tab bar
   One menu for every screen (Components/Navigation). Desktop links sit in the header;
   below 700px they move to a tab bar pinned to the bottom, within thumb reach. The mock
   draft hides both - it runs full screen with its own bottom tabs.
   ========================================================= */

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.app-header { position:sticky; top:0; z-index:100; display:flex; align-items:center; gap:18px; padding:8px 18px; background:rgba(11,9,16,.94); border-bottom:1px solid var(--border); }
.app-logo { display:flex; align-items:center; gap:8px; color:var(--text); text-decoration:none; font-weight:700; letter-spacing:.2px; flex-shrink:0; }
.app-logo img { width:30px; height:30px; object-fit:contain; }
.app-topnav { display:flex; gap:4px; min-width:0; }
.app-topnav-link { padding:7px 12px; border-radius:8px; color:var(--muted); text-decoration:none; font-size:.92rem; white-space:nowrap; }
.app-topnav-link:hover { color:var(--text); background:var(--surface-2); }
.app-topnav-link.active { color:var(--text); background:var(--surface-3); }

.league-switcher { margin-left:auto; min-width:0; }
.league-switcher select { max-width:240px; padding:6px 30px 6px 10px; border-radius:8px; border:1px solid var(--border-bright); background:var(--surface-2); color:var(--text); font-size:.88rem; text-overflow:ellipsis; }
.league-switcher-add { margin-left:auto; color:var(--purple-light); text-decoration:none; font-size:.88rem; white-space:nowrap; }

.section-tabs { display:flex; gap:4px; max-width:1800px; margin:0 auto; padding:12px 18px 0; overflow-x:auto; scrollbar-width:none; }
.section-tabs::-webkit-scrollbar { display:none; }
.section-tab { padding:7px 14px; border-radius:999px; border:1px solid var(--border); color:var(--muted); text-decoration:none; font-size:.88rem; white-space:nowrap; }
.section-tab:hover { color:var(--text); }
.section-tab.active { color:var(--text); border-color:var(--purple); background:var(--surface-2); }

.app-tabbar { display:none; }

a.league-button { display:inline-block; text-decoration:none; }

@media (max-width: 700px) {
    .app-header { gap:10px; padding:8px 12px; }
    .app-topnav { display:none; }
    .league-switcher select { max-width:55vw; }
    .section-tabs { padding:10px 12px 0; }
    .section-tab { flex:1 0 auto; text-align:center; padding:7px 10px; }

    .app-main { padding-bottom:calc(72px + env(safe-area-inset-bottom)); }
    .app-tabbar { position:fixed; left:0; right:0; bottom:0; z-index:150; display:flex; padding:4px 4px calc(4px + env(safe-area-inset-bottom)); background:rgba(17,13,24,.97); border-top:1px solid var(--border); }
    .app-tab { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 0 4px; border:none; background:none; color:var(--muted); text-decoration:none; font-size:.7rem; cursor:pointer; font-family:inherit; }
    .app-tab.active { color:var(--purple-light); }
}

/* =========================================================
   SHEET - detail that opens over the page (Components/Ui/Sheet)
   A bottom sheet on a phone, a centred dialog on a wider screen.
   ========================================================= */

body.sheet-open { overflow:hidden; }

.sheet-backdrop { position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(6,4,10,.72); }
.sheet { display:flex; flex-direction:column; width:100%; max-width:560px; max-height:86vh; border:1px solid var(--border-bright); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); outline:none; }
.sheet.sheet-wide { max-width:960px; }
.sheet-handle { display:none; }
.sheet-head { display:flex; align-items:center; gap:10px; padding:14px 16px 10px; border-bottom:1px solid var(--border); }
.sheet-title { margin:0; font-size:1.05rem; flex:1; min-width:0; }
.sheet-close { display:flex; padding:6px; border:none; border-radius:8px; background:none; color:var(--muted); cursor:pointer; }
.sheet-close:hover { color:var(--text); background:var(--surface-2); }
.sheet-body { padding:12px 16px 18px; overflow-y:auto; overscroll-behavior:contain; }

@media (max-width: 700px) {
    .sheet-backdrop { align-items:flex-end; padding:0; }
    .sheet, .sheet.sheet-wide { max-width:none; max-height:90vh; border-radius:18px 18px 0 0; border-bottom:none; padding-bottom:env(safe-area-inset-bottom); }
    .sheet-handle { display:block; width:38px; height:4px; margin:8px auto 0; border-radius:2px; background:var(--border-bright); }
    .sheet-head { padding-top:8px; }
}

.more-list { display:flex; flex-direction:column; }
.more-link { display:flex; align-items:center; justify-content:space-between; padding:14px 4px; color:var(--text); text-decoration:none; border-bottom:1px solid var(--border); }
.more-link:last-child { border-bottom:none; }

/* =========================================================
   HOME - the week for the league in the header, as cards
   ========================================================= */

.home-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }
.home-card { display:flex; flex-direction:column; gap:6px; padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--text); text-decoration:none; min-width:0; }
.home-card:hover { border-color:var(--border-bright); background:var(--surface-2); }
.home-card-label { color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; }
.home-card-big { font-size:1.6rem; font-weight:700; }
.home-card-line { display:flex; flex-wrap:wrap; gap:6px 12px; font-size:.88rem; }
.home-card-vs { display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap; }
.home-card-go { display:flex; align-items:center; gap:4px; margin-top:auto; padding-top:6px; color:var(--purple-light); font-size:.88rem; }
.home-flag { display:inline-flex; align-items:center; gap:4px; }
.home-card > .weekly-dim { margin-left:0; }
.home-welcome { max-width:640px; margin:12px auto; text-align:center; }
.home-welcome p { color:var(--muted); }
.home-welcome .league-actions { justify-content:center; }

@media (max-width: 700px) {
    .home-grid { grid-template-columns:minmax(0, 1fr); }
}

.empty-state { padding:16px; border:1px dashed var(--border-bright); border-radius:var(--radius); background:var(--surface); }
.empty-state p { margin:0 0 12px; color:var(--muted); }

/* =====================================================================
   PHONE / DESKTOP SPLIT
   A dense screen renders a card list for phones and its table for desktop, and these
   pick which one shows. 700px matches the app's other phone breakpoint.
   ===================================================================== */
.phone-only { display:none; }
@media (max-width:700px) {
    .phone-only { display:block; }
    .desktop-only { display:none !important; }
}

/* =====================================================================
   OPTIONS BAR - a screen's settings. Inline on desktop; on a phone a row of chips
   saying what is picked, opening the same controls in a panel from the bottom.
   ===================================================================== */
.options-bar { margin:12px 0; }
.options-chips, .options-backdrop, .options-panel-head, .options-done { display:none; }
.options-panel-body { display:flex; flex-wrap:wrap; align-items:center; gap:6px 22px; }
.options-panel-body .week-picker, .options-panel-body .basis-picker { margin:0; }
.option-field { display:flex; align-items:center; gap:10px; }
.option-label { display:none; }

@media (max-width:700px) {
    .options-chips { display:flex; flex-wrap:wrap; gap:6px; width:100%; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
    .options-chip { padding:6px 11px; border:1px solid var(--border-bright); border-radius:999px; background:var(--surface-2); font-size:.84rem; font-weight:600; white-space:nowrap; }
    .options-chip-more { display:inline-flex; align-items:center; gap:5px; color:var(--purple-light); }
    .options-panel { display:none; }
    .options-bar.open .options-backdrop { display:block; position:fixed; inset:0; z-index:300; background:rgba(6,4,10,.72); }
    .options-bar.open .options-panel { display:flex; flex-direction:column; position:fixed; left:0; right:0; bottom:0; z-index:301; max-height:90vh; border:1px solid var(--border-bright); border-bottom:none; border-radius:18px 18px 0 0; background:var(--surface); box-shadow:var(--shadow); padding-bottom:env(safe-area-inset-bottom); }
    .options-bar.open .options-panel-head { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; padding:0 16px 10px; border-bottom:1px solid var(--border); }
    .options-panel-head .sheet-handle { flex-basis:100%; }
    .options-panel-body { flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:16px; padding:14px 16px; overflow-y:auto; overscroll-behavior:contain; }
    .option-field { flex-direction:column; align-items:stretch; gap:6px; }
    .option-label { display:block; }
    .option-label, .options-panel-body .basis-label { font-size:.8rem; font-weight:600; color:var(--muted); }
    .options-panel-body .basis-picker { flex-direction:column; align-items:stretch; gap:6px; }
    .options-panel-body .basis-picker .toggle-group { max-width:none; }
    .options-bar.open .options-done { display:block; margin:0 16px 14px; padding:11px; }
}

/* =====================================================================
   INFO TIP - the method behind a screen, one tap away.
   ===================================================================== */
.info-tip { display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border:1px solid var(--border); border-radius:999px; background:none; color:var(--purple-light); font:inherit; font-size:.82rem; font-weight:600; cursor:pointer; }
.info-tip:hover { background:var(--surface-2); }
.info-tip-body p { margin:0 0 11px; font-size:.92rem; line-height:1.55; color:var(--muted); }
.info-tip-body strong { color:var(--text); }

/* =====================================================================
   START OR SIT
   ===================================================================== */
.sit-search label { width:100%; }
.sit-search input { width:100%; max-width:420px; min-width:0; }
.weekly-suggest-out { cursor:default; color:var(--muted); font-size:.88rem; }
.sit-help { margin:8px 0 12px; }

.sit-card { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.sit-card.best { border-color:rgba(74,222,128,.45); background:rgba(74,222,128,.05); }
.sit-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.sit-card-name { min-width:0; }
.sit-card-name .position-rank { margin:0 0 0 4px; }
.sit-card-points { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; }
.sit-card-big { font-size:1.6rem; font-weight:800; line-height:1.1; }
.sit-card-range { margin-left:auto; font-size:.85rem; color:var(--muted); }
.sit-card-line { font-size:.85rem; color:var(--muted); }
.sit-card-why { align-self:flex-start; display:inline-flex; align-items:center; gap:4px; padding:4px 0 0; border:0; background:none; color:var(--purple-light); font:inherit; font-weight:600; cursor:pointer; }

/* Floor to ceiling, drawn against the highest ceiling among the players compared. */
.range-bar { position:relative; height:8px; margin:2px 0; border-radius:4px; background:var(--surface-2); }
.range-bar-span { position:absolute; top:0; bottom:0; border-radius:4px; background:rgba(168,85,247,.45); }
.range-bar-mark { position:absolute; top:-3px; width:3px; height:14px; margin-left:-1px; border-radius:2px; background:var(--text); }

/* How a number was built - the same markup in the desktop rows and the phone sheet. */
.working .weekly-half { margin:14px 0 6px; font-size:.95rem; }
.working .weekly-half:first-child { margin-top:2px; }
.working ol { margin:0; padding:0 0 4px 20px; font-size:.88rem; line-height:1.6; color:var(--muted); }
.working li { margin-bottom:3px; }
.working strong { color:var(--text); }
.weekly-working > .working { padding:0 14px 12px; }
.weekly-depth { margin:10px 0; }
.weekly-depth > summary { padding:4px 0; font-size:.88rem; color:var(--purple-light); cursor:pointer; }

/* =====================================================================
   MATCHUPS
   ===================================================================== */
.match-positions { max-width:360px; margin:4px 0 10px; }
.match-legend { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:8px 0 14px; font-size:.85rem; color:var(--muted); }

.match-card { display:flex; flex-direction:column; gap:8px; width:100%; margin-bottom:10px; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:var(--surface); color:inherit; font:inherit; text-align:left; cursor:pointer; }
.match-card:hover { border-color:var(--border-bright); }
.match-card-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.match-card-side { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:8px; font-size:.9rem; }
.match-card-team { font-weight:800; }
.match-card-top { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.match-card-def { padding:2px 8px; border-radius:999px; font-size:.78rem; white-space:nowrap; }
.match-card .home-card-go { margin-top:0; }
.match-side-toggle { width:auto; flex:0 0 auto; }
.match-side-toggle .toggle-option { min-height:32px; padding:4px 12px; }

details.weekly-game > summary { list-style:none; cursor:pointer; }
details.weekly-game > summary::-webkit-details-marker { display:none; }
details.weekly-game:not([open]) > summary { border-bottom:0; }

.defense-summary > summary { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; padding:12px 14px; border:1px solid var(--border); border-radius:11px; background:var(--surface-2); cursor:pointer; }
.defense-summary[open] > summary { margin-bottom:10px; }
.defense-summary-title { font-size:1.02rem; font-weight:700; }

/* =====================================================================
   LINEUP - one row per slot; the same layout at every width, so no table to scroll.
   ===================================================================== */
.lineup-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:14px 0 10px; }
.lineup-head h2 { margin:0; font-size:1.15rem; }
.lineup-total { margin-left:6px; font-size:.9rem; font-weight:600; color:var(--muted); }
.lineup-subhead { margin:18px 0 8px; font-size:.95rem; color:var(--muted); }
.lineup-list { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--surface); }
.lineup-row { display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--border); }
.lineup-row:last-child { border-bottom:0; }
.lineup-slot { justify-self:start; padding:3px 7px; border-radius:6px; background:var(--surface-2); font-size:.75rem; font-weight:800; color:var(--purple-light); }
.lineup-list.bench .lineup-slot { color:var(--muted); }
.lineup-player { display:flex; flex-direction:column; min-width:0; gap:2px; }
.lineup-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lineup-player > .weekly-dim { font-size:.82rem; }
.lineup-pts { text-align:right; white-space:nowrap; }
.lineup-pts strong { font-size:1.05rem; }
.lineup-out { margin:0; padding-left:18px; font-size:.9rem; line-height:1.7; }
.roster-actions { margin-top:14px; }

/* Rows read badly stretched across a wide screen: slot on the far left, points on the far right. */
.lineup-head, .lineup-list, .lineup-subhead, .lineup-out { max-width:760px; }

/* =====================================================================
   MOVES - waiver add/drop cards, trade tags on a phone, grades on a phone.
   ===================================================================== */
.move-list { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.move-card { display:flex; flex-direction:column; gap:4px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); }
.move-card-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.move-card-head .trade-gain { font-size:1.1rem; white-space:nowrap; }
.move-card-add { min-width:0; }
.move-card > .weekly-dim { font-size:.83rem; }
.move-verb { display:inline-block; min-width:36px; font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.move-drop { font-size:.88rem; }
.move-card .waiver-reason { max-width:none; }

.trade-tags-inline { display:none; }
@media (max-width:700px) {
    .trade-roster .col-tag { display:none; }
    .trade-tags-inline { display:block; margin-top:3px; }
}

.grade-mine { margin-bottom:14px; padding:12px 14px; border:1px solid var(--purple); border-radius:12px; background:var(--surface); }
.grade-mine-head { display:flex; align-items:baseline; gap:10px; margin-bottom:10px; }
.grade-mine-head strong { font-size:1.5rem; }
.grade-chips { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; }
.grade-chip { display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 4px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); color:inherit; font:inherit; cursor:pointer; }
.grade-chip strong { font-size:1.25rem; line-height:1.1; }
.grade-list { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--surface); }
.grade-list-row { display:grid; grid-template-columns:22px minmax(0, 1fr) auto 30px; align-items:center; gap:8px; padding:10px 12px; border:0; border-bottom:1px solid var(--border); background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.grade-list-row:last-child { border-bottom:0; }
.grade-list-row.mine { background:rgba(168,85,247,.1); }
.grade-list-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.grade-list-letters { display:flex; gap:2px; font-size:.8rem; }
.grade-list-letters span { width:20px; text-align:center; }
.grade-list-row > strong { text-align:right; font-size:1.1rem; }
.grade-list-key { margin:6px 2px 0; font-size:.8rem; }

/* Data sources: one row per provider - who, what it is used for, the licence. */
.credit-list { display:flex; flex-direction:column; gap:10px; max-width:760px; margin-top:12px; }
.credit-row { display:flex; flex-direction:column; gap:4px; padding:12px 14px; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.credit-name { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; }
.credit-name .weekly-link { font-weight:700; }

/* =====================================================================
   PLAYER SHEET - one per app, opened from any PlayerName.
   ===================================================================== */
.player-link { display:inline; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.player-link:hover { color:var(--purple-light); text-decoration:underline; text-underline-offset:2px; }
.player-link:focus-visible { outline:2px solid var(--purple-light); outline-offset:2px; border-radius:3px; }

.player-sheet { display:flex; flex-direction:column; gap:12px; }
.player-head { display:flex; align-items:flex-start; gap:14px; }
.player-photo { flex:0 0 auto; width:84px; height:84px; border-radius:50%; object-fit:cover; object-position:top; background:var(--surface-2); border:1px solid var(--border); }
.player-photo-empty { display:flex; align-items:center; justify-content:center; font-size:1.4rem; font-weight:800; color:var(--muted); }
.player-head-text { display:flex; flex-direction:column; gap:3px; min-width:0; }
.player-head-line { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.player-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:4px; font-size:.88rem; }
.player-injury { margin:0; padding:9px 12px; border:1px solid rgba(250,204,21,.32); border-radius:9px; background:rgba(250,204,21,.07); font-size:.88rem; }

.player-tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:10px; }
.player-tile { display:flex; flex-direction:column; gap:3px; padding:11px 13px; border:1px solid var(--border); border-radius:11px; background:var(--surface-2); min-width:0; }
.player-tile .weekly-dim { font-size:.82rem; }

.player-upcoming { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; }
.player-upcoming-week { display:flex; flex-direction:column; align-items:center; gap:1px; padding:8px 4px; border:1px solid var(--border); border-radius:9px; background:var(--surface-2); font-size:.85rem; }

.player-log { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:11px; overflow:hidden; }
.player-log-row { display:grid; grid-template-columns:44px minmax(0, 1fr) auto; align-items:baseline; gap:10px; padding:8px 12px; border-bottom:1px solid var(--border); font-size:.88rem; }
.player-log-row:last-child { border-bottom:0; }
.player-log-pts { text-align:right; }
.player-scoring { margin:0; font-size:.8rem; }

@media (max-width:700px) {
    .player-tiles { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
    .player-tiles .player-tile:last-child:nth-child(odd) { grid-column:1 / -1; }
}

/* ---- linking another device ---- */
.link-device { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:14px; }
.link-device-code { font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-size:1.6rem; font-weight:800; letter-spacing:.12em; }
.link-device input { text-transform:uppercase; letter-spacing:.08em; }

/* ---- lineup photos ---- */
.lineup-row { grid-template-columns:44px 36px minmax(0,1fr) auto; }
.lineup-photo { width:36px; height:36px; border-radius:50%; object-fit:cover; object-position:top; background:var(--surface-2); border:1px solid var(--border); }
.lineup-photo-empty { display:block; }

/* ---- player sheet: tappable weeks, ranks and the working ---- */
.player-tile-button { color:inherit; font:inherit; text-align:left; cursor:pointer; }
.player-tile-button:hover, .player-tile-button.open { border-color:var(--purple-light); }
.player-tile-more { margin-top:2px; font-size:.8rem; font-weight:600; color:var(--purple-light); }
button.player-upcoming-week { color:inherit; font:inherit; cursor:pointer; }
button.player-upcoming-week:hover, button.player-upcoming-week.open { border-color:var(--purple-light); }

.player-metrics { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:6px 14px; }
.player-metric { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--border); font-size:.88rem; }
.player-metric-label { min-width:0; color:var(--muted); }
.player-metric .def-rank { white-space:nowrap; }
.player-metric-unranked { font-size:.75rem; white-space:nowrap; }

button.player-log-row { width:100%; border:0; border-bottom:1px solid var(--border); background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
button.player-log-row:hover, button.player-log-row.open { background:var(--surface-2); }
.player-log-detail { padding:6px 12px 10px 56px; border-bottom:1px solid var(--border); background:var(--surface-2); }

.player-working { padding:10px 12px; border:1px solid var(--purple); border-radius:11px; background:var(--surface-2); }
.player-working-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:6px; }
.working-part, .working-step, .working-total { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:3px 0; font-size:.87rem; }
.working-part > span:last-child, .working-step > span:last-child { white-space:nowrap; font-variant-numeric:tabular-nums; }
.working-step { color:var(--text); }
.working-total { margin-top:2px; padding-top:5px; border-top:1px solid var(--border); }
.working-total.final { font-size:.95rem; }