/* pages/css/most-wanted.css
   Most Wanted ladder + public event tabs. Themed to the site tokens (style.css):
   the ladder is a WWM feature, so its accent is the WWM "bounty gold" (--wwm-color),
   never the generic --orange warning hue. All colours resolve from tokens; the
   literal fallbacks match the real token values so an unstyled load still looks right. */

:root {
  --mw-gold: var(--wwm-color, #D4A843);
  --mw-gold-strong: #E6BC57;
  --mw-gold-soft: var(--wwm-soft, rgba(212, 168, 67, 0.12));
  --mw-gold-line: rgba(212, 168, 67, 0.35);
  --mw-gold-glow: var(--wwm-glow, rgba(212, 168, 67, 0.25));
  --mw-pos: var(--green, #34D399);
  --mw-ink: #1a1305; /* readable text on a gold fill */
}

.mw-container { max-width: 1100px; margin: 1rem auto; padding: 1rem; }
.mw-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.mw-week-pill {
  background: var(--mw-gold-soft); color: var(--mw-gold-strong, #E6BC57);
  border: 1px solid var(--mw-gold-line); padding: 0.22rem 0.8rem; border-radius: 999px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap;
}
.mw-countdown { color: var(--text-secondary, #9B95A8); font-size: 0.9rem; }

.mw-tabs { display: flex; gap: 0.5rem; border-bottom: 1px solid var(--border, rgba(255,255,255,0.1)); margin-bottom: 1rem; }
.mw-tab { background: transparent; color: var(--text-secondary, #9B95A8); border: none; padding: 0.5rem 1rem; cursor: pointer; font-weight: 600; }
.mw-tab.active { color: var(--text, #F0EDF6); border-bottom: 2px solid var(--mw-gold); }

.mw-panel.hidden { display: none; }

.mw-leaderboard-toggle { display: flex; gap: 0.25rem; margin-bottom: 0.5rem; }
.mw-leaderboard-toggle button { background: var(--bg-card, #141416); color: var(--text-secondary, #9B95A8); border: 1px solid var(--border, rgba(255,255,255,0.1)); padding: 0.28rem 0.6rem; border-radius: 7px; cursor: pointer; font-weight: 600; }
.mw-leaderboard-toggle button.active { background: var(--mw-gold); color: var(--mw-ink); border-color: var(--mw-gold); }

.mw-leaderboard { width: 100%; border-collapse: collapse; }
.mw-leaderboard th, .mw-leaderboard td { padding: 0.5rem; border-bottom: 1px solid var(--border, rgba(255,255,255,0.08)); text-align: left; }
.pts-pos { color: var(--mw-pos); font-weight: 800; font-variant-numeric: tabular-nums; font-size: 0.86rem; }

.mw-avatar { width: 20px; height: 20px; border-radius: 50%; vertical-align: middle; margin-right: 0.5rem; }

.mw-result-card, .mw-roster-card, .mw-dispute-card {
    background: var(--bg-card, #141416); border: 1px solid var(--border, rgba(255,255,255,0.1)); border-radius: var(--radius-md, 12px);
    padding: 0.75rem 1rem; margin-bottom: 0.5rem;
    display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
}

/* ── Versus card (active matches) ───────────────────────── */
.mw-vs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.6rem; margin-bottom: 0.5rem;
}
.mw-vs-card {
    background: var(--bg-card, #141416); border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: var(--radius-md, 12px); padding: 0.85rem 1.1rem 1rem;
    display: flex; flex-direction: column; gap: 0.7rem;
    box-shadow: var(--shadow-1, 0 1px 3px rgba(0,0,0,0.3));
}
.mw-vs-pts {
    font-size: 0.72rem; font-weight: 700; color: var(--mw-pos);
    font-variant-numeric: tabular-nums;
}
.mw-vs-meta { display: flex; align-items: center; gap: 0.5rem; }
.mw-vs-layout {
    display: grid; grid-template-columns: 1fr 64px 1fr;
    align-items: center; gap: 0.5rem;
}
.mw-vs-player {
    display: flex; flex-direction: column; align-items: center;
    gap: 0.4rem; text-align: center; overflow: hidden; min-width: 0;
}
.mw-vs-avatar {
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--bg-elevated, #18181B); object-fit: cover; flex-shrink: 0;
}
.mw-vs-avatar-blank {
    display: block; width: 52px; height: 52px; border-radius: 50%;
    background: var(--bg-elevated, #18181B); flex-shrink: 0;
}
.mw-vs-name {
    font-weight: 700; font-size: 0.88rem; color: var(--text, #F0EDF6);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.mw-vs-center { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.mw-vs-label {
    font-size: 0.95rem; font-weight: 800; color: var(--mw-gold);
    letter-spacing: 0.12em;
}
.mw-forfeit-timer {
    margin-left: auto; font-size: 0.72rem; color: var(--text-muted, #5C576A);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mw-timer-urgent { color: var(--red, #F87171) !important; font-weight: 600; }
.mw-timer-expired { color: var(--red, #F87171) !important; font-weight: 700; }

/* ── History card (completed matches) ───────────────────── */
.mw-history-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.28rem;
}
.mw-history-filter { margin-bottom: 0.5rem; }
.mw-filter-input {
  width: 100%; padding: 0.38rem 0.65rem; background: var(--bg-elevated, #18181B);
  color: var(--text, #F0EDF6); border: 1px solid var(--border, rgba(255,255,255,0.14));
  border-radius: var(--radius-sm, 8px); font-size: 0.83rem; outline: none;
  transition: border-color .12s ease;
}
.mw-filter-input:focus { border-color: var(--mw-gold-line); }
.mw-history-card {
    background: #161619; border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 6px; padding: 0.24rem 0.45rem; margin-bottom: 0.18rem;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.35rem;
}
.mw-history-player { display: flex; align-items: center; gap: 0.35rem; overflow: hidden; min-width: 0; }
.mw-history-player--right { flex-direction: row-reverse; text-align: right; }
.mw-history-avatar {
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--bg-elevated, #18181B); object-fit: cover; flex-shrink: 0;
}
.mw-history-avatar-blank {
    display: block; width: 18px; height: 18px; border-radius: 50%;
    background: var(--bg-elevated, #18181B); flex-shrink: 0;
}
.mw-history-name {
    font-size: 0.76rem; color: var(--text-secondary, #9B95A8);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mw-history-name--winner { color: var(--text, #F0EDF6); font-weight: 700; }
.mw-history-score-col {
    display: flex; flex-direction: column; align-items: center;
    gap: 0.05rem; min-width: 44px;
}
.mw-history-score { font-size: 0.76rem; font-weight: 800; color: var(--text, #F0EDF6); letter-spacing: 0.03em; }
.mw-section-head {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.09em; color: var(--text-muted, #5C576A);
    padding: 0.55rem 0 0.3rem; margin-bottom: 0.3rem;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}
.mw-section-head:first-child { padding-top: 0; }

.mw-score { font-weight: 700; color: var(--text, #F0EDF6); padding: 0 0.5rem; font-size: 1.05rem; }
.mw-result-name { color: var(--text-secondary, #9B95A8); }
.mw-week-badge { background: var(--bg-elevated, #18181B); color: var(--text-muted, #8b8597); font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.mw-state-badge { font-size: 0.72rem; padding: 0.15rem 0.55rem; border-radius: 999px; border: 1px solid var(--border, rgba(255,255,255,0.1)); color: var(--text-secondary, #9B95A8); white-space: nowrap; }
.mw-state-locked { border-color: var(--mw-gold-line); color: var(--mw-gold-strong); }
.mw-state-submitted { border-color: rgba(52,211,153,0.4); color: var(--green, #34D399); }
.mw-state-forfeit { border-color: rgba(248,113,113,0.4); color: var(--red, #F87171); }
.mw-proof-link { font-size: 0.75rem; color: var(--mw-gold); text-decoration: underline; }
.mw-ign { font-size: 0.75rem; color: var(--text-muted, #5C576A); }
.mw-rank-cell { color: var(--text-muted, #5C576A); font-size: 0.85rem; width: 2ch; text-align: right; }
.mw-empty { color: var(--text-muted, #5C576A); padding: 2rem; text-align: center; font-size: 0.9rem; }
.mw-empty-cell { color: var(--text-muted, #5C576A); text-align: center; padding: 1.5rem; font-size: 0.9rem; }

.mw-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.72); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.mw-modal-card { background: var(--bg-card, #141416); padding: 1.5rem; border: 1px solid var(--border, rgba(255,255,255,0.1)); border-radius: var(--radius-lg, 16px); min-width: 320px; display: flex; flex-direction: column; gap: 0.5rem; box-shadow: var(--shadow-elevated, 0 12px 40px rgba(0,0,0,0.65)); }

.mw-cooldown-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.5rem; }
.mw-cooldown-chips .chip { background: var(--bg-hover, #1C1C1F); color: var(--text-secondary, #9B95A8); padding: 0.25rem 0.5rem; border-radius: 999px; font-size: 0.8rem; }

.mw-bracket-placeholder { color: var(--text-muted, #5C576A); font-style: italic; padding: 2rem; text-align: center; }
.hidden { display: none; }

/* The player HUD, the Stage (active contracts / next challenge), the standings
   "bounty board" and the reference drawers are all styled in the "Ladder layout"
   section near the end of this file - Most Wanted's in-dashboard view is now a
   native part of the design system (it used to be injected from JS). */

.mw-hint { color: var(--text-muted, #6f6a7e); font-size: 0.8rem; margin-top: 0.4rem; line-height: 1.4; }
.mw-cooldown-label { color: var(--text-secondary, #9B95A8); font-size: 0.8rem; margin-top: 0.6rem; }
.mw-modal-card h3 { margin: 0 0 0.25rem; }
.mw-modal-card select, .mw-modal-card input { background: var(--bg-elevated, #18181B); color: var(--text, #F0EDF6); border: 1px solid var(--border, rgba(255,255,255,0.14)); border-radius: var(--radius-sm, 8px); padding: 0.45rem 0.5rem; }
.mw-modal-card input:focus, .mw-modal-card select:focus { outline: none; border-color: var(--mw-gold-line); box-shadow: 0 0 0 3px var(--mw-gold-soft); }
.mw-modal-card button { background: linear-gradient(135deg, var(--mw-gold-strong), var(--mw-gold)); color: var(--mw-ink); border: none; padding: 0.5rem 0.95rem; border-radius: var(--radius-sm, 8px); font-weight: 700; cursor: pointer; }
.mw-modal-card button#mw-cancel-challenge, .mw-modal-card button#mw-submit-cancel { background: var(--bg-hover, #1C1C1F); color: var(--text, #F0EDF6); }
.mw-game-row { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; }
.mw-game-row select { background: var(--bg-elevated, #18181B); color: var(--text, #F0EDF6); border: 1px solid var(--border, rgba(255,255,255,0.14)); border-radius: var(--radius-sm, 8px); padding: 0.45rem 0.5rem; }

/* ── Standings table ──────────────────────────────────────────────────────
   Fixed column widths so the table always fits - no horizontal scroll.
   Cols: 1=#, 2=Player(flex), 3=IGN, 4=Pts, 5=W-L, 6=GP, 7=Open, 8=action. */
.mw-standings-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.8rem; table-layout: fixed; }
.mw-standings-table th, .mw-standings-table td { padding: 0.2rem 0.28rem; text-align: left; vertical-align: middle; overflow: hidden; }
.mw-standings-table thead th { position: sticky; top: 0; z-index: 1; background: #161619; color: var(--text-muted, #6f6a7e); font-weight: 700; font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; padding-top: 0.3rem; padding-bottom: 0.3rem; box-shadow: inset 0 -1px 0 var(--border, rgba(255,255,255,0.14)); }
/* Row divider as a full-width inset shadow on the row itself (per-cell borders
   left sub-pixel gaps that read as broken lines). */
.mw-standings-table tbody tr { transition: background .12s ease; box-shadow: inset 0 -1px 0 var(--border, rgba(255,255,255,0.07)); }
.mw-standings-table tbody tr:hover { background: rgba(255,255,255,0.025); }
.mw-standings-table th:nth-child(1), .mw-standings-table td:nth-child(1) { width: 2.5rem; text-align: right; color: var(--text-muted, #6f6a7e); font-variant-numeric: tabular-nums; font-weight: 700; }
.mw-standings-table th:nth-child(3), .mw-standings-table td:nth-child(3) { width: 14%; white-space: nowrap; text-overflow: ellipsis; color: var(--text-secondary, #9B95A8); }
.mw-standings-table th:nth-child(4), .mw-standings-table td:nth-child(4) { width: 8ch; text-align: right; }
.mw-standings-table th:nth-child(5), .mw-standings-table td:nth-child(5) { width: 8.5ch; white-space: nowrap; text-align: center; font-variant-numeric: tabular-nums; }
.mw-standings-table th:nth-child(6), .mw-standings-table td:nth-child(6) { width: 4ch; text-align: center; font-variant-numeric: tabular-nums; color: var(--text-secondary, #9B95A8); }
.mw-standings-table th:nth-child(7), .mw-standings-table td:nth-child(7) { width: 6ch; text-align: center; }
.mw-standings-table th:nth-child(8), .mw-standings-table td:nth-child(8) { width: 5.6rem; text-align: right; }
/* Top-3 rank medals - leans into the "Most Wanted" bounty-board framing. */
.mw-standings-table tbody tr:nth-child(1) td:first-child { color: #E6BC57; }
.mw-standings-table tbody tr:nth-child(2) td:first-child { color: #C9CDD6; }
.mw-standings-table tbody tr:nth-child(3) td:first-child { color: #D29A6E; }
/* Edge breathing room (the standings widget body is flush so the header pins). */
.mw-standings-table th:first-child, .mw-standings-table td:first-child { padding-left: 9px; }
.mw-standings-table th:last-child, .mw-standings-table td:last-child { padding-right: 9px; }
.mw-cell-player { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.mw-avatar-blank { display: inline-block; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-hover, #1C1C1F); border: 1px solid var(--border, rgba(255,255,255,0.08)); }
.mw-row-me { background: var(--mw-gold-soft); box-shadow: inset 3px 0 0 var(--mw-gold); }
.mw-row-me:hover { background: var(--mw-gold-soft) !important; }
.mw-row-me .mw-player-name-line { color: var(--mw-gold-strong); font-weight: 700; }
.mw-row-challenge {
  background: linear-gradient(135deg, var(--mw-gold-strong, #E6BC57), var(--mw-gold, #D4A843)); color: var(--mw-ink); border: none;
  border-radius: 7px; padding: 0.28rem 0.55rem; font-size: 0.74rem; font-weight: 800; cursor: pointer; white-space: nowrap; width: 100%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); transition: transform .12s ease, filter .12s ease;
}
.mw-row-challenge:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
.mw-row-challenge:disabled { opacity: 0.5; cursor: not-allowed; }
/* Season-standings caption + finals qualification cutoff. The top N (mw_finals_size)
   sit above a dashed gold divider; the qualifying zone gets a faint gold wash that
   never fights the gold/silver/bronze rank colours or the "you" row highlight. */
/* Standings view bar: the Overall/per-week selector + a caption (gold cutoff
   note on Overall, muted view label otherwise). */
.mw-standings-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px 4px; }
.mw-week-select { background: #161619; color: var(--text, #F0EDF6); border: 1px solid var(--border, rgba(255,255,255,0.14)); border-radius: 6px; padding: 3px 8px; font-size: 0.72rem; font-weight: 700; font-family: inherit; cursor: pointer; }
.mw-week-select:focus-visible { outline: 2px solid var(--mw-gold, #D4A843); outline-offset: 1px; }
.mw-standings-cap { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mw-gold-strong, #E6BC57); }
.mw-standings-cap--week { color: var(--text-muted, #6f6a7e); }
.mw-standings-table tbody tr.mw-qualifying:not(.mw-row-me) { background: rgba(212,168,67,0.06); }
.mw-standings-table tbody tr.mw-cutoff-row, .mw-standings-table tbody tr.mw-cutoff-row:hover { box-shadow: none; background: transparent; }
.mw-standings-table tbody tr.mw-cutoff-row td { padding: 0; border-top: 2px dashed var(--mw-gold-line, rgba(212,168,67,0.45)); }
.mw-cutoff-label { display: block; padding: 2px 9px; font-size: 0.56rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mw-gold, #D4A843); background: rgba(212,168,67,0.09); }
.mw-chal-left { display: inline-block; min-width: 1.4em; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--mw-pos); }
.mw-chal-full { color: var(--text-muted, #6f6a7e); }
.mw-lo-lock { font-size: 0.9rem; }
/* Shown in the action cell when an opponent is at the 2-unresolved-match cap, so
   the missing Challenge button reads as "they're busy", not a glitch. */
.mw-row-busy { display: inline-block; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted, #6f6a7e); border: 1px solid var(--border, rgba(255,255,255,0.1)); border-radius: 999px; padding: 0.1rem 0.45rem; white-space: nowrap; }

/* ── Challenge lock-out (player side) ───────────────────── */
.mw-secondary-btn {
    background: transparent; color: var(--text-secondary, #9B95A8);
    border: 1px solid var(--border, rgba(255,255,255,0.14)); border-radius: var(--radius-sm, 8px);
    padding: 0.42rem 0.9rem; font-size: 0.82rem; font-weight: 600;
    cursor: pointer; margin-top: 0.5rem; transition: border-color .12s ease, color .12s ease;
}
.mw-secondary-btn:hover { border-color: var(--mw-gold-line); color: var(--mw-gold-strong); }
.mw-lockout-block { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.4rem; }
.mw-lo-active-note { color: var(--mw-gold-strong) !important; }
.mw-lockout-list { display: flex; flex-direction: column; gap: 0.3rem; }
.mw-lockout-list-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted, #6f6a7e); margin-top: 0.3rem; }
.mw-lockout-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.8rem; }
.mw-lo-dates { color: var(--text-secondary, #9B95A8); font-variant-numeric: tabular-nums; }
.mw-lo-status { font-size: 0.68rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 999px; border: 1px solid var(--border, rgba(255,255,255,0.1)); }
.mw-lo-pending { color: var(--mw-gold-strong); border-color: var(--mw-gold-line); }
.mw-lo-approved { color: var(--green, #34D399); border-color: rgba(52,211,153,0.4); }
.mw-lo-denied { color: var(--red, #F87171); border-color: rgba(248,113,113,0.4); }
.mw-lo-cancelled { color: var(--text-muted, #6f6a7e); }
.mw-lo-note { color: var(--text-muted, #6f6a7e); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem; }

/* ── Player availability ────────────────────────────────── */
.mw-player-name-line { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Player names link to their profile; read as the name, gold on hover. */
.mw-player-link { color: inherit; text-decoration: none; cursor: pointer; }
.mw-player-link:hover { text-decoration: underline; color: var(--mw-gold-strong); }
/* Availability is a compact clock icon (hover for the hours) so every standings
   row stays a single line and the columns line up with the avatars. */
.mw-avail-icon { flex: 0 0 auto; font-size: 0.74rem; line-height: 1; opacity: 0.7; cursor: default; }
.mw-avail-block { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.4rem; }
.mw-avail-current { font-size: 0.8rem; color: var(--text-secondary, #9B95A8); }
/* Availability modal: timezone dropdown + from/to time pickers. */
.mw-av-times { display: flex; align-items: center; gap: 0.5rem; }
.mw-av-sep { color: var(--text-muted, #6f6a7e); font-size: 0.85rem; }
.mw-modal-card input[type="time"] { color-scheme: dark; flex: 1 1 0; min-width: 0; }
.mw-modal-card select#mw-av-tz { width: 100%; }

/* Active matchups (who challenged who). */
.mw-matchups { display: flex; flex-direction: column; gap: 0.2rem; max-height: 220px; overflow-y: auto; overflow-x: hidden; }
.mw-matchup { display: flex; align-items: center; gap: 0.5rem; padding: 0.22rem 0.45rem; background: #161619; border: 1px solid var(--border, rgba(255,255,255,0.08)); border-radius: 6px; font-size: 0.78rem; min-width: 0; }
.mw-matchup-name { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-matchup .mw-vs { color: var(--text-muted, #6f6a7e); font-size: 0.72rem; flex: 0 0 auto; text-transform: lowercase; }
/* State pill: colour-coded so LOCKED / SUBMITTED / DISPUTED read at a glance. */
.mw-matchup-state { flex: 0 0 auto; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 999px; padding: 0.12rem 0.5rem; white-space: nowrap; border: 1px solid var(--border, rgba(255,255,255,0.1)); color: var(--text-secondary, #9B95A8); }
.mw-st-locked { color: var(--mw-gold-strong); border-color: var(--mw-gold-line); background: var(--mw-gold-soft); }
.mw-st-submitted { color: var(--green, #34D399); border-color: rgba(52,211,153,0.4); background: rgba(52,211,153,0.1); }
.mw-st-disputed { color: var(--red, #F87171); border-color: rgba(248,113,113,0.4); background: rgba(248,113,113,0.1); }
.mw-st-confirmed { color: var(--text-secondary, #9B95A8); }

#mw-active-challenges { overflow-x: hidden; }

/* Ladder mounted into the bracket stage area: dimmed/blurred backdrop instead
   of flat black. */
.mw-ladder-stage { position: relative; }
.mw-ladder-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/assets/bg.webp') center / cover no-repeat;
  filter: blur(8px) brightness(0.2) saturate(0.85);
  z-index: 0;
  pointer-events: none;
}
.mw-ladder-stage > * { position: relative; z-index: 1; }

/* ── Widget board (wwm-status bracket-stage mount) ────────────────────────────
   Most Wanted takes over the WWM dashboard's bracket area as a board of widgets
   the player arranges: drag to reorder / move between up to four full-height
   columns, drag the splitters to resize, drag a widget's handle up to the dock
   (or hit ✕) to minimise it, drag the chip back out to restore. The board fills
   the bracket area exactly (full height) and tall widgets (standings / history /
   matchups) scroll INSIDE their own card, so the page itself never scrolls. The
   layout persists per season; the 12s poll only swaps widget bodies in place. */
.bracket-stage:has(#bracketContent.mw-ladder) { height: 100%; min-height: 0; padding: 4px !important; }
#bracketContent.mw-ladder {
  height: 100% !important; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px; padding: 6px; text-align: left;
}

/* Dock: a topbar where minimised widgets live as chips (drag them back out). */
#bracketContent.mw-ladder .mw-dock {
  flex-shrink: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 28px;
  padding: 5px 9px; background: var(--bg-card, #141416); border: 1px solid var(--border, rgba(255,255,255,0.1)); border-radius: 7px;
}
#bracketContent.mw-ladder .mw-dock.drag-target { outline: 2px dashed var(--mw-gold); outline-offset: 2px; }
.mw-dock-lead { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted, #6f6a7e); }
.mw-dock-hint { color: var(--text-muted, #6f6a7e); font-size: 0.76rem; font-style: italic; }
.mw-dock-tools { margin-left: auto; }
.mw-tool-btn { background: var(--bg-elevated, #18181B); color: var(--text-secondary, #9B95A8); border: 1px solid var(--border, rgba(255,255,255,0.1)); border-radius: 6px; padding: 4px 10px; font-size: 0.72rem; font-weight: 600; cursor: pointer; }
.mw-tool-btn:hover { border-color: var(--mw-gold-line); color: var(--mw-gold-strong, #E6BC57); }
.mw-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-elevated, #18181B); border: 1px solid var(--border, rgba(255,255,255,0.1)); border-radius: 6px; padding: 4px 10px; cursor: grab; font-size: 0.72rem; font-weight: 700; color: var(--text-secondary, #9B95A8); }
/* Dashboard scale stepper in the dock toolbar. */
.mw-scale-ctl { display: inline-flex; align-items: center; gap: 2px; margin-right: 8px; }
.mw-scale-label { font-size: 0.62rem; font-weight: 700; color: var(--text-muted, #6f6a7e); min-width: 4ch; text-align: center; font-variant-numeric: tabular-nums; }
.mw-chip:hover { border-color: var(--mw-gold-line); color: var(--mw-gold-strong, #E6BC57); }

/* Board: a vertical stack of dock AREAS. Each area is a ROW (widgets side by
   side) or a COLUMN (stacked); a bar above it flips the orientation. The board
   scrolls when the areas are taller than the panel. */
/* The board fills the panel and never scrolls itself; list widgets scroll inside. */
#bracketContent.mw-ladder .mw-board { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
/* Areas of only compact widgets stay content-height (no empty padding); an area
   that holds a list (fill) widget grows to absorb the spare height so the board
   fills the panel without page scroll. */
.mw-area { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; min-height: 0; }
.mw-area:has(.mw-widget.is-fill) { flex: 1 1 0; }
/* The orientation control is a small icon-only toggle, tucked to the right. */
.mw-area-bar { display: flex; align-items: center; justify-content: flex-end; }
.mw-area-toggle { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; color: var(--text-muted, #6f6a7e); border-radius: 5px; padding: 1px 4px; cursor: pointer; line-height: 0; opacity: 0.5; transition: opacity .12s ease, color .12s ease; }
.mw-area:hover .mw-area-toggle { opacity: 0.85; }
.mw-area-toggle:hover { opacity: 1; color: var(--mw-gold-strong, #E6BC57); border-color: var(--mw-gold-line); background: var(--bg-elevated, #18181B); }
.mw-area-body { display: flex; gap: 4px; min-height: 0; flex: 1 1 auto; }
/* Rows lay out by content height (no stretch = no empty padding); a row holding a
   list widget stretches so the list fills the area's height. */
.mw-area.is-row > .mw-area-body { flex-direction: row; align-items: flex-start; flex-wrap: wrap; }
.mw-area.is-row:has(.mw-widget.is-fill) > .mw-area-body { align-items: stretch; flex-wrap: nowrap; overflow-x: auto; }
.mw-area.is-col > .mw-area-body { flex-direction: column; overflow-y: auto; }
.mw-area-body.drag-target { outline: 2px dashed var(--border-hover, rgba(157,135,200,0.35)); outline-offset: 2px; border-radius: 8px; }
.mw-area-empty { flex: 1; padding: 10px; text-align: center; color: var(--text-muted, #6f6a7e); font-size: 0.72rem; border: 1px dashed var(--border, rgba(255,255,255,0.12)); border-radius: 8px; }
/* Row area: widgets share the width. Column area: widgets fill it. A list widget
   grows to fill its area's height; its body scrolls inside. */
.mw-area.is-row > .mw-area-body > .mw-widget { flex: 1 1 0; min-width: 200px; }
.mw-area.is-col > .mw-area-body > .mw-widget { width: 100%; }
.mw-area.is-col > .mw-area-body > .mw-widget.is-fill { flex: 1 1 0; min-height: 0; }
/* The "+ Row" / "+ Column" drop targets at the foot of the board. */
.mw-area-adds { display: flex; gap: 6px; flex-shrink: 0; padding-top: 1px; }
.mw-area-new { display: inline-flex; align-items: center; gap: 4px; border: 1px dashed var(--border, rgba(255,255,255,0.14)); border-radius: 7px; padding: 4px 9px; color: var(--text-muted, #6f6a7e); font-size: 0.56rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.6; cursor: pointer; }
.mw-area-new:hover { opacity: 1; }
.mw-area-new.drag-target { opacity: 1; border-color: var(--mw-gold); color: var(--mw-gold-strong, #E6BC57); }

/* A widget = a distinct module. "fill" list widgets scroll inside a bounded body. */
/* max-width caps a hand-sized widget (explicit px width persisted from a wider
   screen) to the board so it can't push content off-screen and clip it. */
.mw-widget { position: relative; background: #0e0e11; border: 1px solid var(--border, rgba(255,255,255,0.08)); border-radius: 7px; box-shadow: var(--shadow-1, 0 1px 3px rgba(0,0,0,0.3)); display: flex; flex-direction: column; overflow: hidden; min-width: 0; min-height: 0; max-width: 100%; }
/* A hand-sized widget's flex/size is set inline by applyWidgetSizes (row = fixed
   width + stretch height; column = fixed height + full width). */
.mw-widget-head { flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 2px 6px; border-bottom: 1px solid var(--border, rgba(255,255,255,0.08)); background: #161619; }
.mw-widget-grip { cursor: grab; color: var(--text-muted, #6f6a7e); font-size: 12px; line-height: 1; padding: 2px; user-select: none; flex-shrink: 0; }
.mw-widget-grip:active { cursor: grabbing; }
.mw-widget-title { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary, #9B95A8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-widget-badge { font-size: 0.6rem; font-weight: 800; color: var(--mw-gold-strong, #E6BC57); background: var(--mw-gold-soft); border: 1px solid var(--mw-gold-line); border-radius: 4px; padding: 0.04rem 0.4rem; }
.mw-widget-tools { margin-left: auto; display: flex; gap: 1px; flex-shrink: 0; }
.mw-widget-tools button { background: none; border: none; color: var(--text-muted, #6f6a7e); cursor: pointer; padding: 3px; border-radius: 4px; display: flex; line-height: 0; }
.mw-widget-tools button:hover { background: var(--bg-hover, #1C1C1F); color: var(--text, #F0EDF6); }
.mw-widget-tools button.is-on { color: var(--mw-gold-strong, #E6BC57); }
.mw-widget-tools button:focus-visible { outline: 2px solid var(--mw-gold, #D4A843); outline-offset: 1px; }
.mw-widget-body { padding: 5px; min-height: 0; }
.mw-widget.is-fill > .mw-widget-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
/* A hand-sized widget's body fills (and scrolls within) the height it was given. */
.mw-widget.is-sized > .mw-widget-body { flex: 1 1 auto; overflow: auto; max-height: none; }
.mw-widget.is-collapsed > .mw-widget-body { display: none; }
.mw-w-chevron { transition: transform .15s ease; }
.mw-widget.is-collapsed .mw-w-chevron { transform: rotate(-90deg); }
/* Per-widget resize grip, on the edge that matches the area's axis: the RIGHT
   edge in a row (drag width), the BOTTOM edge in a column (drag height).
   Double-click clears the hand-set size. Hidden when collapsed. */
.mw-widget-resize { position: absolute; z-index: 4; opacity: 0; transition: opacity .12s ease; background: var(--mw-gold, #D4A843); }
.mw-area.is-row .mw-widget-resize { top: 8px; bottom: 8px; right: 0; width: 5px; border-radius: 3px 0 0 3px; cursor: ew-resize; }
.mw-area.is-col .mw-widget-resize { left: 8px; right: 8px; bottom: 0; height: 5px; border-radius: 3px 3px 0 0; cursor: ns-resize; }
.mw-widget:hover .mw-widget-resize { opacity: 0.4; }
.mw-widget-resize:hover, .mw-widget-resize.resizing { opacity: 0.95; }
.mw-widget.is-collapsed .mw-widget-resize { display: none; }
.mw-widget.resizing { user-select: none; }
.mw-drag.dragging { opacity: 0.4; }
/* Standings widget: flush body so its sticky header pins to the very top edge. */
.mw-widget[data-w="standings"] > .mw-widget-body { padding: 0; }
/* The list widgets fill their card body (which provides the single scroll). */
#bracketContent.mw-ladder .mw-standings-scroll,
#bracketContent.mw-ladder .mw-history-scroll,
#bracketContent.mw-ladder .mw-matchups { max-height: none; overflow: visible; }
/* The standings table drops columns by its OWN widget width (container query),
   so it stays legible no matter how narrow the player makes that column. */
.mw-widget[data-w="standings"] { container-type: inline-size; }
@container (max-width: 560px) {
  .mw-standings-table th:nth-child(3), .mw-standings-table td:nth-child(3) { display: none; } /* IGN */
}
@container (max-width: 440px) {
  .mw-standings-table th:nth-child(6), .mw-standings-table td:nth-child(6),  /* GP */
  .mw-standings-table th:nth-child(7), .mw-standings-table td:nth-child(7) { display: none; } /* Open */
}

/* Mobile: stack everything into one natural-scroll flow. */
@media (max-width: 760px) {
  #bracketContent.mw-ladder { height: auto !important; overflow: visible; }
  /* Every area is content-height and stacks its widgets vertically on a phone;
     the page scrolls naturally instead of each widget scrolling internally. */
  .mw-area, .mw-area:has(.mw-widget.is-fill) { flex: none; }
  .mw-area.is-row > .mw-area-body { flex-direction: column; }
  .mw-area.is-col > .mw-area-body { overflow: visible; }
  .mw-area-body > .mw-widget { width: 100%; min-width: 0; flex: none; }
  .mw-widget-resize { display: none; }
  .mw-widget.is-fill > .mw-widget-body { overflow: visible; max-height: none; flex: none; }
  /* Hand-sized widths/heights don't apply on a stacked single-column phone view. */
  .mw-widget.is-sized { width: auto !important; height: auto !important; align-self: stretch; }
  /* The per-area orientation toggle and the "+ Row / + Column" drop targets only
     steer the desktop drag board; on a single-column phone they do nothing, so
     hide them. The dock stays (it holds minimized widgets + Reset layout). */
  .mw-area-bar, .mw-area-adds { display: none; }
  /* Readable type + finger-sized targets. The standings table already sheds
     columns by widget width (container queries above); here we just scale the
     surviving cells and the row action up for touch. */
  .mw-hud { gap: 6px; }
  .mw-hud-chip { flex: 1 1 calc(33.333% - 6px); min-width: 88px; }
  .mw-hud-k { font-size: 0.6rem; }
  .mw-hud-v { font-size: 1rem; }
  .mw-standings-table { font-size: 0.95rem; }
  .mw-standings-table th, .mw-standings-table td { padding: 0.5rem 0.4rem; }
  .mw-standings-table thead th { font-size: 0.62rem; }
  .mw-row-challenge { min-height: 36px; padding: 0.42rem 0.8rem; font-size: 0.82rem; }
  .mw-avatar { width: 26px; height: 26px; }
}
/* Phones: drop to two HUD chips per row so the values aren't cramped. */
@media (max-width: 460px) {
  .mw-hud-chip { flex-basis: calc(50% - 6px); }
}

/* HUD: always-on vital stats (rank, points, matches left, slots, deadline). */
.mw-hud { display: flex; flex-wrap: wrap; gap: 4px; }
.mw-hud-chip {
  display: flex; flex-direction: column; gap: 0; padding: 3px 7px; min-width: 56px;
  background: #161619; border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 7px; box-shadow: var(--shadow-1, 0 1px 3px rgba(0,0,0,0.3));
}
.mw-hud-k { font-size: 0.54rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary, #9B95A8); white-space: nowrap; }
.mw-hud-v { font-size: 0.85rem; font-weight: 800; color: var(--text, #F0EDF6); font-variant-numeric: tabular-nums; line-height: 1.15; }
/* Data tones: value coloured by what it means (rank position, point sign, caps). */
.mw-hud-v.is-green { color: var(--mw-pos, #4ADE80); }
.mw-hud-v.is-gold { color: var(--mw-gold-strong, #E6BC57); }
.mw-hud-v.is-red { color: var(--mw-neg, #F87171); }
.mw-hud-timer { border-color: var(--mw-gold-line); background: var(--mw-gold-soft); }
.mw-hud-timer .mw-hud-v { color: var(--mw-gold-strong, #E6BC57); }

/* The Stage: one compact action ROW per match (state chip · title · timer ·
   buttons on a single line). The how-to copy lives in the tile's title
   attribute - hover for it - so three pending matches no longer stack three
   paragraphs. Challenge / muted tiles keep their explainer line below. */
.mw-stage { display: flex; flex-direction: column; gap: 4px; }
.mw-stage-tile {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 4px 8px; border-radius: 7px; min-width: 0;
  background: #161619; border: 1px solid var(--border, rgba(255,255,255,0.08));
  box-shadow: var(--shadow-1, 0 1px 3px rgba(0,0,0,0.3));
}
.mw-stage-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mw-stage-title { font-size: 0.78rem; font-weight: 800; color: var(--text, #F0EDF6); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-stage-sub { font-size: 0.7rem; color: var(--text-secondary, #9B95A8); line-height: 1.3; }
.mw-stage-actions { display: flex; gap: 5px; flex-wrap: nowrap; flex-shrink: 0; }
.mw-stage-tile.is-challenge, .mw-stage-tile.is-muted { flex-direction: column; align-items: flex-start; gap: 3px; }
/* Play + waiting tiles carry an AC warning, a hint line, or the live scorecard
   below the main row. Stack them so that content wraps within the column width
   instead of forcing the whole widget (and the page) to scroll sideways. */
.mw-stage-tile.is-play, .mw-stage-tile.is-waiting { flex-direction: column; align-items: stretch; gap: 4px; }
.mw-stage-warn { font-size: 0.66rem; line-height: 1.3; color: #fca5a5; background: rgba(248,113,113,0.12); border: 1px solid rgba(248,113,113,0.5); border-radius: 6px; padding: 3px 7px; }
.mw-stage-btn {
  border: none; border-radius: 6px; padding: 0.22rem 0.5rem; font-weight: 800; font-size: 0.7rem;
  cursor: pointer; transition: transform .12s ease, filter .12s ease, border-color .12s ease, color .12s ease;
  white-space: nowrap;
}
.mw-stage-btn--primary {
  background: linear-gradient(135deg, var(--mw-gold-strong, #E6BC57), var(--mw-gold, #D4A843));
  color: var(--mw-ink, #1a1407);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 2px 10px var(--mw-gold-glow, rgba(212,168,67,0.35));
}
.mw-stage-btn--primary:hover { transform: translateY(-1px); filter: brightness(1.06); }
.mw-stage-btn--ghost { background: transparent; color: var(--text-secondary, #9B95A8); border: 1px solid var(--border, rgba(255,255,255,0.14)); }
.mw-stage-btn--ghost:hover { border-color: var(--mw-gold-line); color: var(--mw-gold-strong, #E6BC57); }
.mw-stage-btn:focus-visible { outline: 2px solid var(--mw-gold, #D4A843); outline-offset: 2px; }
.mw-stage-timer-wrap { font-size: 0.75rem; color: var(--text-muted, #6f6a7e); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mw-stage-timer-wrap .mw-countdown { font-weight: 700; color: var(--text-secondary, #9B95A8); }
.mw-countdown.mw-timer-urgent { color: var(--mw-gold-strong, #E6BC57); }
.mw-countdown.mw-timer-expired { color: var(--red, #F87171); }
.mw-stage-tile.is-confirm { border-color: rgba(52,211,153,0.5); box-shadow: inset 3px 0 0 var(--green, #34D399), var(--shadow-1, 0 1px 3px rgba(0,0,0,0.3)); }
.mw-stage-tile.is-play { border-color: var(--mw-gold-line); box-shadow: inset 3px 0 0 var(--mw-gold, #D4A843), var(--shadow-1, 0 1px 3px rgba(0,0,0,0.3)); }
.mw-stage-tile.is-disputed { border-color: rgba(248,113,113,0.45); }
.mw-stage-tile.is-challenge { border-style: dashed; background: transparent; }
.mw-stage-tile.is-muted { opacity: 0.72; }
/* Dynamic importance: when you have a live match to act on, the Stage's urgent
   tile escalates with a gold glow so the next move visually dominates. */
.mw-stage:has(.mw-stage-tile.is-play, .mw-stage-tile.is-confirm) .mw-stage-tile.is-play {
  box-shadow: inset 3px 0 0 var(--mw-gold, #D4A843), 0 0 0 1px var(--mw-gold-line), 0 8px 26px var(--mw-gold-glow, rgba(212,168,67,0.35));
}

/* Narrow widget: let an action row wrap its buttons under the title. */
@media (max-width: 640px) {
  .mw-stage-tile { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .mw-stage-btn, .mw-w-chevron, .mw-row-challenge, .mw-standings-table tbody tr { transition: none; }
}