/* FPL Live — dark sports-stats aesthetic
   Display: Archivo Black (manager names, scores, title)
   Body:    IBM Plex Sans
   Numbers: IBM Plex Mono (tabular)
*/

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:          #0a0b0f;
    --bg-grad-1:   #0d0f16;
    --bg-grad-2:   #07080c;
    --surface:     #13161f;
    --surface-2:   #181c27;
    --border:      #21262f;
    --border-strong: #2e3441;

    --text:        #f1f2f5;
    --text-muted:  #8a91a2;
    --text-dim:    #5b6274;

    --lime:        #00ff85;
    --lime-soft:   rgba(0, 255, 133, 0.12);
    --amber:       #ffc93c;
    --red:         #ff4d6d;
    --red-soft:    rgba(255, 77, 109, 0.12);
    --blue:        #3a86ff;
    --purple:      #b388ff;

    --gold:        #ffd166;
    --silver:      #c9cdd6;
    --bronze:      #e08b4a;

    --font-display: "Archivo Black", "Archivo", system-ui, sans-serif;
    --font-body:    "IBM Plex Sans", system-ui, sans-serif;
    --font-mono:    "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;

    --fs-h1:        clamp(1.05rem, 2.5vw, 1.35rem);
    --fs-hero:      clamp(2.4rem, 5vw, 3.2rem);
    --fs-body:      0.875rem;
    --fs-xs:        0.72rem;
}

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--text);
    background: var(--bg);
    background-image:
        radial-gradient(1200px 600px at 72% -220px, rgba(0, 255, 133, 0.045), transparent 55%),
        radial-gradient(900px 500px at -10% 40%, rgba(179, 136, 255, 0.035), transparent 55%),
        linear-gradient(180deg, var(--bg-grad-1), var(--bg-grad-2));
    min-height: 100vh;
}

/* ── Top bar ── */
#top-bar {
    background: rgba(10, 11, 15, 0.82);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.top-bar-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 24px;
    flex-wrap: wrap;
}

.top-bar-inner h1 {
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    letter-spacing: -0.015em;
    text-transform: uppercase;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1;
}

.top-bar-inner h1::before {
    content: "";
    width: 4px;
    height: 1.1em;
    background: var(--lime);
    border-radius: 2px;
    box-shadow: 0 0 14px rgba(0, 255, 133, 0.55);
}

#gameweek-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    flex-wrap: wrap;
}

.gw-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text-muted);
}

.gw-pill.gw-id { color: var(--text); font-weight: 700; }

.gw-pill.gw-status-active {
    background: var(--lime-soft);
    border-color: transparent;
    color: var(--lime);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.gw-pill.gw-status-active::before {
    content: "";
    width: 6px; height: 6px;
    background: var(--lime);
    border-radius: 50%;
    margin-right: 7px;
    box-shadow: 0 0 6px rgba(0, 255, 133, 0.8);
    animation: pulse-dot 2s ease-in-out infinite;
}

.gw-pill.gw-status-finished {
    background: transparent;
    color: var(--text-dim);
    border-color: var(--border);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.gw-pill.gw-stat {
    background: transparent;
    border-color: transparent;
    color: var(--text-muted);
    padding: 4px 4px;
}

#update-indicator {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-dim);
    margin-left: auto;
    white-space: nowrap;
}

.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.dot-idle { background: var(--text-dim); }
.dot-live {
    background: var(--lime);
    box-shadow: 0 0 8px rgba(0, 255, 133, 0.8);
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.38; }
}

#error-banner {
    display: none;
    background: var(--red-soft);
    border-bottom: 1px solid var(--red);
    color: var(--red);
    text-align: center;
    padding: 8px 16px;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ── Tab strip (segmented control) ── */
#view-tabs {
    display: flex;
    gap: 3px;
    max-width: 1400px;
    margin: 12px auto 0;
    padding: 3px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    width: max-content;
}
#view-tabs .tab {
    font-family: var(--font-display);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    padding: 7px 16px;
    cursor: pointer;
    border-radius: 7px;
    transition: color 0.15s, background 0.15s;
    line-height: 1;
}
#view-tabs .tab:hover {
    color: var(--text);
    background: var(--surface-2);
}
#view-tabs .tab.is-active {
    background: var(--lime);
    color: var(--bg);
    box-shadow: 0 0 18px rgba(0, 255, 133, 0.25);
}
#view-tabs .tab.is-active:hover {
    background: var(--lime);
    color: var(--bg);
}
#view-tabs .tab:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 3px;
}

.view { display: none; }
.view.is-active { display: block; }

/* ── Compare view ── */
.compare-grid {
    max-width: 1400px;
    margin: 20px auto;
    padding: 0 16px;
    display: grid;
    grid-template-columns: 1fr minmax(110px, 140px) 1fr;
    gap: 14px;
    align-items: start;
}

.compare-side {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.compare-picker {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    background: var(--surface-2);
    color: var(--text);
    border: 0;
    border-bottom: 1px solid var(--border);
    padding: 14px 18px;
    font-family: var(--font-display);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 22px) 50%,
        calc(100% - 16px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 40px;
}
.compare-picker:hover { background-color: var(--surface); }
.compare-picker:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }

#view-tabs .tab:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 4px;
    border-radius: 4px;
}
.manager-header:focus-visible,
.player-row:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: -2px;
    border-radius: 4px;
}

.compare-column { padding: 12px 16px 18px; }

.cmp-header {
    padding: 12px 2px 6px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
}
.cmp-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.cmp-chip-spacer { display: inline-block; width: 0; }
.cmp-header-top .chip-badge { align-self: center; }
.cmp-mgr-score {
    font-family: var(--font-display);
    font-size: 1.9rem;
    color: var(--text);
    line-height: 0.9;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
}
.cmp-gross { color: var(--text-muted); font-size: 1.1rem; }
.cmp-hit { color: var(--red); font-size: 1.1rem; }
.cmp-eq { color: var(--text-dim); font-size: 1.1rem; }
.cmp-net { color: var(--text); }

.cmp-header-sub {
    display: flex;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-dim);
    margin-top: 6px;
    letter-spacing: 0.02em;
    flex-wrap: wrap;
}
.cmp-sep { color: var(--border-strong); }

.cmp-section-label {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--text-dim);
    padding: 10px 0 4px;
}

.cmp-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    min-height: 34px;
}
.cmp-row:last-child { border-bottom: none; }
.cmp-row.is-common { opacity: 0.32; }

.cmp-row .pos-tag { margin-right: 4px; }
.cmp-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    font-size: 0.86rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cmp-mult {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--amber);
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(255, 201, 60, 0.14);
    letter-spacing: 0.02em;
}
.cmp-bench-tag {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--text-dim);
    letter-spacing: 0.1em;
}
.cmp-pts {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.95rem;
    min-width: 28px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.cmp-pts-pos { color: var(--lime); }
.cmp-pts-zero { color: var(--text-dim); }

.cmp-empty {
    padding: 20px 0;
    text-align: center;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
}

/* Center column: delta */
.compare-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 6px;
    position: sticky;
    top: 90px;
}
.compare-delta {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    padding: 18px 14px;
    text-align: center;
    width: 100%;
    transition: border-color 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.cmp-delta-name {
    font-family: var(--font-display);
    font-size: 0.9rem;
    text-transform: uppercase;
    color: var(--text);
    letter-spacing: -0.005em;
    line-height: 1;
}
.compare-delta.left-leads { border-color: rgba(0, 255, 133, 0.4); }
.compare-delta.right-leads { border-color: rgba(0, 255, 133, 0.4); }

.cmp-delta-label {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-dim);
    margin-bottom: 4px;
}
.cmp-delta-value {
    font-family: var(--font-display);
    font-size: 2.2rem;
    color: var(--text);
    line-height: 0.9;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}
.compare-delta.left-leads .cmp-delta-value,
.compare-delta.right-leads .cmp-delta-value { color: var(--lime); }

.cmp-delta-sub {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.cmp-diff-l, .cmp-diff-r { color: var(--text); font-weight: 700; }
.cmp-diff-sep { color: var(--text-dim); }
.cmp-delta-foot {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-dim);
    margin-top: 4px;
}

/* ── Manager grid ── */
#managers-container {
    max-width: 1400px;
    margin: 20px auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
    padding: 0 16px;
}

/* ── Manager card ── */
.manager-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: visible;
    transition: border-color 0.2s ease, transform 0.2s ease;
    position: relative;
}
.manager-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    border-radius: 14px 0 0 14px;
    background: transparent;
    transition: background 0.2s;
    pointer-events: none;
}
.manager-card.rank-1::before { background: var(--gold); box-shadow: 0 0 16px rgba(255, 209, 102, 0.4); }
.manager-card.rank-2::before { background: var(--silver); }
.manager-card.rank-3::before { background: var(--bronze); }
.manager-card:hover { border-color: var(--border-strong); }

.manager-header {
    padding: 18px 20px 14px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    cursor: pointer;
}

.rank-badge {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: var(--bg);
    background: var(--text-dim);
    flex-shrink: 0;
}
.rank-badge.r1 { background: var(--gold); box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.15); }
.rank-badge.r2 { background: var(--silver); }
.rank-badge.r3 { background: var(--bronze); }
.rank-badge.r-default { background: var(--text-dim); }

.manager-info { min-width: 0; }

.manager-name {
    font-family: var(--font-display);
    font-size: 1.12rem;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
    margin-bottom: 7px;
}

.chip-badge {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--red);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
}

.manager-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.manager-meta .total-label {
    color: var(--silver);
    font-weight: 700;
    letter-spacing: 0.01em;
}
.manager-meta .total-label::before {
    content: "TOT ";
    color: var(--text-dim);
    font-weight: 500;
    margin-right: 1px;
}
.manager-meta .total-gap {
    color: var(--text-dim);
    font-weight: 500;
    margin-left: 5px;
    font-size: 0.88em;
}
.manager-meta .bench-pts { color: var(--purple); font-size: 0.92em; }

/* Transfer badge */
.transfer-badge {
    position: relative;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--text);
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}
.transfer-badge.hit {
    color: var(--red);
    background: var(--red-soft);
    border-color: transparent;
}
.transfer-tooltip {
    display: none;
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 10px 12px;
    min-width: 240px;
    max-width: 340px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55);
    z-index: 200;
    color: var(--text);
    font-size: var(--fs-xs);
    font-weight: 400;
}
.transfer-badge:hover .transfer-tooltip,
.transfer-badge:focus .transfer-tooltip { display: block; }

.transfer-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    white-space: nowrap;
}
.t-out { color: var(--red); }
.t-arrow { color: var(--text-dim); }
.t-in { color: var(--lime); }
.t-diff { font-weight: 700; margin-left: auto; padding-left: 10px; font-family: var(--font-mono); }
.t-diff-pos { color: var(--lime); }
.t-diff-neg { color: var(--red); }
.t-diff-zero { color: var(--text-muted); }
.t-hit-line { border-top: 1px dashed var(--border); margin-top: 4px; padding-top: 4px; }
.t-net-line { border-top: 1px solid var(--border-strong); margin-top: 3px; padding-top: 4px; font-weight: 700; }

/* Score hero */
.manager-score {
    text-align: right;
    flex-shrink: 0;
}
.gw-points {
    font-family: var(--font-display);
    font-size: var(--fs-hero);
    color: var(--text);
    line-height: 0.85;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}
.played-counter {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--lime);
    margin-top: 6px;
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
}

/* ── Team details ── */
.team-details { padding: 0 20px 16px; }

.section-label {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-dim);
    font-weight: 600;
    padding: 12px 0 6px;
    border-top: 1px solid var(--border);
    display: block;
}
.section-label:first-child { border-top: none; padding-top: 2px; }

/* Player rows */
.player-row {
    display: flex;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
    min-height: 36px;
}
.player-row:hover { background: var(--surface-2); }
.player-row:last-of-type { border-bottom: none; }

.player-row.bench { opacity: 0.55; }
.player-row.bench-boost-active { opacity: 1; }

.pos-tag {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 700;
    width: 32px;
    text-align: center;
    padding: 3px 0;
    border-radius: 4px;
    color: var(--bg);
    flex-shrink: 0;
    margin-right: 10px;
    letter-spacing: 0.08em;
}
.pos-gk  { background: #f1c40f; }
.pos-def { background: #4fc3f7; }
.pos-mid { background: #66bb6a; }
.pos-fwd { background: #ff6b6b; }

.player-name-col { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; }
.player-web-name {
    font-weight: 600;
    font-size: 0.86rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
}

.captain-badge {
    font-family: var(--font-display);
    font-size: 0.6rem;
    width: 18px; height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.captain-badge.cap { background: var(--red); color: #fff; }
.captain-badge.vc  { background: var(--amber); color: var(--bg); }

.player-icons { font-size: 0.8rem; margin: 0 6px; white-space: nowrap; }

.live-dot-player {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--lime);
    display: inline-block;
    margin-right: 4px;
    box-shadow: 0 0 6px rgba(0, 255, 133, 0.8);
    animation: pulse-dot 2s ease-in-out infinite;
}

.player-pts {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.92rem;
    min-width: 32px;
    text-align: right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.prov-bonus-tag {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--purple);
    font-style: italic;
    margin-right: 3px;
}

.pts-played   { color: var(--blue); }
.pts-live     { color: var(--lime); }
.pts-out      { color: var(--red); opacity: 0.55; }
.pts-upcoming { color: var(--text-dim); }

/* ── Inline breakdown ── */
.breakdown {
    max-height: 0;
    overflow: hidden;
    padding: 0 8px 0 42px;
    background: rgba(255, 255, 255, 0.015);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    transition: max-height 0.25s ease-out, padding 0.25s ease-out;
}
.breakdown.open {
    max-height: 340px;
    padding: 8px 8px 8px 42px;
    border-bottom: 1px solid var(--border);
}
.breakdown-row {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    font-variant-numeric: tabular-nums;
}
.breakdown-row .stat-pts { font-weight: 700; }
.breakdown-row .stat-pts.negative { color: var(--red); }
.breakdown-row .stat-pts.positive { color: var(--lime); }
.breakdown-row.prov-line { color: var(--purple); font-style: italic; }

/* ── Accessibility ── */
:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Tablet ── */
@media (min-width: 641px) and (max-width: 960px) {
    #managers-container { grid-template-columns: repeat(2, 1fr); }
}

/* ── Mobile ── */
@media (max-width: 640px) {
    .top-bar-inner {
        padding: 10px 14px;
        gap: 10px;
        align-items: center;
    }
    .top-bar-inner h1 { font-size: 0.95rem; order: 1; }
    #update-indicator {
        order: 2;
        margin-left: auto;
        font-size: 0.62rem;
    }
    /* On phones just show the live dot — the minute is noise on a live feed. */
    #last-updated { display: none; }
    #gameweek-summary {
        order: 3;
        flex-basis: 100%;
        gap: 6px;
    }
    .gw-pill { padding: 3px 9px; font-size: 0.65rem; }
    .gw-pill.gw-stat { padding: 3px 2px; }

    #managers-container {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 0 10px;
        margin-top: 14px;
    }

    /* Collapsed cards: kill ALL vertical space from team-details,
       including section-label border/padding that would otherwise bleed. */
    .manager-card .team-details {
        max-height: 0;
        overflow: hidden;
        padding-top: 0;
        padding-bottom: 0;
        transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    }
    .manager-card.expanded .team-details {
        max-height: 1600px;
        padding-bottom: 16px;
        transition: max-height 0.4s ease-in, padding 0.3s ease-in;
    }

    .manager-header { padding: 14px 16px; }
    .gw-points { font-size: 2.1rem; }
    .manager-name { font-size: 1rem; }

    .player-row { padding: 9px 0; min-height: 40px; }

    .transfer-tooltip {
        left: auto;
        right: -8px;
        min-width: 0;
        width: calc(100vw - 28px);
        max-width: none;
        white-space: normal;
    }
    .transfer-row { flex-wrap: wrap; }

    /* Compare view on mobile — use CSS grid with explicit 50/50 track sizing
       and force the container to actual viewport width (some layouts above
       were causing compare-grid's resolved width to be wider than expected). */
    html, body { overflow-x: hidden; width: 100%; }
    main { overflow-x: hidden; width: 100%; }
    #compare-view { width: 100%; overflow-x: hidden; }
    .compare-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto auto;
        gap: 8px;
        padding: 0 8px;
        margin: 12px 0 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .compare-divider {
        grid-column: 1 / 3;
        grid-row: 1;
        position: static;
        padding: 0;
        min-width: 0;
    }
    .compare-side {
        grid-row: 2;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }
    .compare-side[data-side="left"]  { grid-column: 1; }
    .compare-side[data-side="right"] { grid-column: 2; }
    .compare-column { overflow: hidden; min-width: 0; max-width: 100%; }
    .cmp-header-top,
    .cmp-header-sub,
    .cmp-mgr-name,
    .cmp-mgr-score,
    .cmp-name { min-width: 0; }
    .cmp-header-sub {
        flex-wrap: wrap;
        white-space: normal;
        word-break: break-word;
    }

    /* Delta = just the big number, centered. No label, no sub, no foot. */
    .compare-delta {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px;
    }
    .cmp-delta-value { font-size: 1.9rem; line-height: 1; }

    /* Tight column sizing so everything fits at 390 px */
    .compare-picker {
        font-size: 0.82rem;
        padding: 10px 32px 10px 12px;
        background-position:
            calc(100% - 18px) 50%,
            calc(100% - 12px) 50%;
    }
    .compare-column { padding: 8px 10px 14px; }

    .cmp-header { padding: 8px 0 6px; margin-bottom: 6px; }
    .cmp-header-top { gap: 6px; }
    .cmp-mgr-name { font-size: 0.82rem; gap: 5px; }
    .cmp-mgr-score { font-size: 1.45rem; gap: 3px; }
    .cmp-gross,
    .cmp-hit,
    .cmp-eq { font-size: 0.8rem; }
    .cmp-header-sub { font-size: 0.56rem; gap: 4px; }

    .cmp-section-label {
        font-size: 0.52rem;
        letter-spacing: 0.12em;
        padding: 8px 0 3px;
    }

    .cmp-row { padding: 5px 0; min-height: 28px; gap: 5px; }
    .cmp-row .pos-tag {
        width: 26px;
        font-size: 0.5rem;
        padding: 2px 0;
        margin-right: 4px;
    }
    .cmp-name { font-size: 0.72rem; gap: 3px; }
    .cmp-pts { font-size: 0.78rem; min-width: 20px; }
    .cmp-mult { font-size: 0.52rem; padding: 0 3px; }
    .cmp-bench-tag { display: none; }

    #view-tabs { margin: 10px 14px 0; }
    #view-tabs .tab { padding: 7px 14px; font-size: 0.68rem; }
}