/* Shared surfaces beyond the draft desk. Pitch and shot geometry stay with their components. */
html:has(body[data-draft-ui="true"]) { background: #f4f1e8; color-scheme: light; }
body[data-draft-ui="true"] {
  --text: var(--fg);
  --surface-soft: #eef1e7;
  --surface-selected: #e6f0dd;
  --border-strong: #87968b;
  --floating-footer-space: 0px;
}
body[data-draft-ui="true"]:not([data-phase="menu"]):not(.has-signbar):not(:has(.ha-selection:not([hidden]))) { --floating-footer-space: 80px; }
body[data-draft-ui="true"].has-signbar { --floating-footer-space: 90px; }
body[data-draft-ui="true"]:not([data-phase="menu"]):has(.game-policy-links) .wrap { padding-bottom: 28px; }
body[data-draft-ui="true"] .game-policy-links { padding-bottom: calc(20px + var(--floating-footer-space) + env(safe-area-inset-bottom,0px)); }
body[data-draft-ui="true"] :is(.fantasy-shell,.fm-overlay) {
  --fm-ink: #20372f;
  --fm-muted: #657068;
  --fm-lime: #2d7451;
  --fm-line: #c7cec3;
}
body[data-draft-ui="true"] :is(.stage,.stage.solo) { min-width: 0; }
body[data-draft-ui="true"] .stage.solo { grid-template-columns: minmax(0,1fr); max-width: 1100px; margin-inline: auto; }
body[data-draft-ui="true"][data-phase="leaderboard"] .stage,
body[data-draft-ui="true"][data-phase^="passplay"] .stage { display: block; max-width: 1100px; margin-inline: auto; }
body[data-draft-ui="true"].is-fantasy #panel { padding: 0; border: 0; background: transparent; box-shadow: none; }
body[data-draft-ui="true"] :is(.panel,.fantasy-shell,.ha-shell,.fm-sheet,.ladder-dashboard) { min-width: 0; }
body[data-draft-ui="true"] :is(.ha-shell,.fm-overlay) :is(h2,h3,h4) { color: var(--fg); font-family: var(--display); }
body[data-draft-ui="true"] :is(.ha-shell,.fm-overlay) h2 { font-size: clamp(30px,4vw,40px); line-height: 1.1; }
body[data-draft-ui="true"] :is(.ha-shell,.fm-overlay) h3 { font-size: 25px; line-height: 1.2; }

/* Header and navigation keep their position and colour during phase changes. */
body[data-draft-ui="true"] .wrap>header { margin-bottom: 0; }
body[data-draft-ui="true"] .wrap>header .hub-actions :is(#hub-profile,#hub-leaderboard,#hub-stats) { background: #fff; color: var(--fg); border: 1.5px solid var(--fg); border-radius: 5px; min-height: 44px; box-shadow: none; backdrop-filter: none; }
body[data-draft-ui="true"] .matchday-dock { max-width: calc(100vw - 32px); }
body[data-draft-ui="true"]:has(.ha-selection:not([hidden])) .matchday-dock { display: none!important; }
body[data-draft-ui="true"] .matchday-dock button[aria-current="page"] { color: var(--accent); background: var(--surface-selected); border-bottom-color: var(--accent); }
body[data-draft-ui="true"] :is(.competition-control select,.language-nav a) { min-height: 44px; }
body[data-draft-ui="true"] .language-nav a { min-width: 44px; }
body[data-draft-ui="true"] :is(.fm-btn,.ha-add,.ha-selected-chips>button,.ladder-period button,.hub-switch button,.pass-pagination button,.calendar-views button) {
  min-height: 44px; border-radius: 5px; border: 1.5px solid var(--border-strong); background: #fff; color: var(--fg); box-shadow: none;
}
body[data-draft-ui="true"] :is(.fm-btn,.ha-add,.ladder-period button,.hub-switch button):hover:not(:disabled) { background: var(--surface-soft); color: var(--fg); border-color: var(--accent); }
body[data-draft-ui="true"] :is(.fm-btn.primary,.ha-add[aria-pressed="true"],.ladder-period button[aria-pressed="true"],.hub-switch button[aria-pressed="true"]) { background: var(--accent); color: #fff; border-color: var(--fg); }
body[data-draft-ui="true"] .fm-btn.primary { box-shadow: 2px 2px 0 var(--fg); }
body[data-draft-ui="true"] .fm-btn.primary:hover:not(:disabled) { background: #245e42; color: #fff; }
body[data-draft-ui="true"] :is(.fm-btn,.ha-add,.ha-inspect,.ha-workspace-nav>button) { font-family: var(--body); }
body[data-draft-ui="true"] :is(.fm-btn.icon,.ha-add,.pass-remove) { min-width: 44px; min-height: 44px; }
body[data-draft-ui="true"] .caps button { min-height: 44px; }
body[data-draft-ui="true"] :is(.fantasy-shell,.fm-sheet) :is(input:not([type="range"]):not([type="checkbox"]),select) { background: #fff; color: var(--fg); color-scheme: light; border-color: var(--border-strong); }
body[data-draft-ui="true"] :is(.fantasy-shell,.fm-sheet) label { color: var(--fg); }
body[data-draft-ui="true"] :is(.fantasy-shell,.fm-overlay) :focus-visible { outline: 3px solid var(--star); outline-offset: 4px; }

/* Historical Arena: the same paper surfaces around the green squad pitch. */
body[data-draft-ui="true"] :is(.ha-your-team,.ha-format-panel,.ha-catalog,.ha-squad-empty,.ha-squad-bench,.ha-tournament-top,.ha-match,.fm-card,.fm-stat,.fm-path,.fm-club-tile,.fm-club-header,.fm-empty,.fm-market-player,.fm-player-row,.fm-week) {
  background: #fff; color: var(--fg); border-color: var(--line); border-radius: 7px; box-shadow: none;
}
body[data-draft-ui="true"] :is(.ha-your-team,.ha-format-panel,.ha-catalog,.ha-squad-empty,.ha-tournament-top) { border: 1.5px solid var(--border-strong); }
body[data-draft-ui="true"] :is(.ha-workspace-identity>svg,.ha-your-team>.fm-badge) { color: var(--accent); background: var(--surface-selected); border-color: var(--line); }
body[data-draft-ui="true"] :is(.ha-workspace-meta b,.ha-selection-head b,.ha-inspect,.ha-modes>button>b,.fm-stat strong,.fm-trophy-art>b) { color: var(--fg); }
body[data-draft-ui="true"] :is(.ha-shell,.fm-overlay) .fm-badge b { color: #f4f1e8; }
body[data-draft-ui="true"] .fm-duel-center>span { color: var(--muted); }
body[data-draft-ui="true"] :is(.ha-workspace-head .fm-eyebrow,.ha-workspace-meta>span,.ha-local-status,.ha-your-team>p:not(.fm-eyebrow),.ha-setup-note,.ha-catalog-tools #ha-count,.ha-inspect>span>small,.ha-row-formation,.ha-stars>span:not(.fm-photo),.ha-selection-head small,.ha-selection>p,.ha-bench-mini small,.ha-squad-empty p,.ha-shell .fm-hint,.ha-shell .fm-eyebrow,.ha-modes>button>small,.fm-stat small,.ha-resume small) { color: var(--muted); }
body[data-draft-ui="true"] :is(.ha-workspace-nav,.fm-sheet-head,.fm-help,.fm-sidebar-foot) { border-color: var(--line); }
body[data-draft-ui="true"] .ha-workspace-nav>button { color: var(--muted); min-height: 44px; }
body[data-draft-ui="true"] .ha-workspace-nav>button[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
body[data-draft-ui="true"] .ha-workspace-nav>button:hover:not(:disabled) { color: var(--fg); }
body[data-draft-ui="true"] :is(.ha-squad-ready,.ha-nav-dot) { color: var(--accent); }
body[data-draft-ui="true"] .ha-nav-dot { background: var(--accent); }
body[data-draft-ui="true"] .ha-modes>button { background: #fff; color: var(--fg); border-color: var(--line); border-radius: 5px; }
body[data-draft-ui="true"] .ha-modes>button>svg { color: var(--muted); }
body[data-draft-ui="true"] .ha-modes>button[aria-pressed="true"] { background: var(--surface-selected); border-color: var(--accent); }
body[data-draft-ui="true"] .ha-modes>button[aria-pressed="true"] :is(svg,i) { color: var(--accent); }
body[data-draft-ui="true"] .ha-resume { background: var(--surface-selected); border-color: var(--accent); color: var(--fg); border-radius: 5px; }
body[data-draft-ui="true"] .ha-archive-label { background: var(--surface-soft); color: var(--muted)!important; }
body[data-draft-ui="true"] .fm-search { background: #fff; border-color: var(--border-strong); border-radius: 5px; }
body[data-draft-ui="true"] .fm-search svg { color: var(--muted); }
body[data-draft-ui="true"] .ha-catalog-tools #ha-champions[aria-pressed="true"] { background: #fff1ce; color: #795516; border-color: #b79a52; }
body[data-draft-ui="true"] .ha-table-labels { background: var(--surface-soft); color: var(--muted); border-color: var(--line); }
body[data-draft-ui="true"] :is(.ha-opponents,.ha-opponent) { border-color: var(--line); }
body[data-draft-ui="true"] .ha-opponent { background: #fff; box-shadow: none; }
body[data-draft-ui="true"] .ha-opponent:nth-child(even) { background: #f7f8f1; }
body[data-draft-ui="true"] .ha-opponent:hover { background: var(--surface-soft); }
body[data-draft-ui="true"] .ha-opponent.selected { background: var(--surface-selected); box-shadow: inset 3px 0 var(--accent); }
body[data-draft-ui="true"] .ha-inspect:hover>span>b { color: var(--accent); }
body[data-draft-ui="true"] .ha-inspect small :is(i,em) { color: var(--muted); }
body[data-draft-ui="true"] .ha-stars .fm-photo { border-color: var(--line); background: var(--surface-soft); }
body[data-draft-ui="true"] .ha-selection { background: #fffef8; color: var(--fg); border: 2px solid var(--fg); border-radius: 7px; box-shadow: 3px 3px 0 var(--fg); }
body[data-draft-ui="true"] .ha-selected-chips>button { background: var(--surface-selected); color: var(--fg); border-color: var(--line); }
body[data-draft-ui="true"] .ha-squad-header { background: var(--surface-selected); color: var(--fg); border-color: var(--border-strong); }
body[data-draft-ui="true"] .ha-squad-header p:not(.fm-eyebrow) { color: var(--muted); }
body[data-draft-ui="true"] :is(.opponent-roster,.ha-squad-board .opponent-roster,.fm-sheet .opponent-roster) { background: #fff; color: var(--fg); border-color: var(--line); border-radius: 6px; }
body[data-draft-ui="true"] :is(.ha-squad-board,.fm-sheet) .opponent-roster>summary { background: var(--surface-soft); color: var(--fg); }
body[data-draft-ui="true"] :is(.ha-squad-board,.fm-sheet) .roster-list>div { background: #fff; border-color: var(--line); }
body[data-draft-ui="true"] :is(.ha-squad-board,.fm-sheet) .roster-list>div:nth-child(even) { background: #f7f8f1; }
body[data-draft-ui="true"] :is(.ha-squad-board,.fm-sheet) .roster-list .chip { background: var(--surface-selected); color: var(--accent); }
body[data-draft-ui="true"] :is(.ha-squad-board,.fm-sheet) .roster-list small { color: var(--muted); }
body[data-draft-ui="true"] .ha-bench-mini>div { background: var(--surface-soft); }
body[data-draft-ui="true"] :is(.fm-match-footer,.fm-details,.fm-week summary,.ha-fixture) { background: var(--surface-soft); color: var(--fg); border-color: var(--line); }
body[data-draft-ui="true"] .fm-stats { background: transparent; border-color: var(--line); border-radius: 7px; }
body[data-draft-ui="true"] :is(.fm-week summary b,.ha-fixture strong) { color: var(--accent); }
body[data-draft-ui="true"] .ha-fixture.mine { background: var(--surface-selected); }
body[data-draft-ui="true"] .fm-photo.av { background: var(--surface-soft); color: var(--accent); border-color: var(--line); }
body[data-draft-ui="true"] .fm-inline-error { color: var(--bad)!important; }
body[data-draft-ui="true"] .fm-toast { background: var(--fg); color: #fff; border-color: var(--accent); }
body[data-draft-ui="true"] .fm-toast.error { background: #fff0e8; color: var(--bad); border-color: #bd8876; }

/* Standings and competition summaries share one table treatment. */
body[data-draft-ui="true"] :is(.ladder-overview,.ladder-table-wrap,.ladder-movement,.ladder-entry,.ladder-placement,.ladder-finished,.ladder-mover-hero,.ladder-podium-card,.rank-table,.pass-table-wrap,.pass-fixtures) { background: #fff; color: var(--fg); border-color: var(--line); border-radius: 7px; box-shadow: none; }
body[data-draft-ui="true"] .ladder-podium-card.place-1 { background: #fff5d9; border-color: #bea360; }
body[data-draft-ui="true"] .ladder-podium-card.place-3 { background: #f7ece3; border-color: #c8a68a; }
body[data-draft-ui="true"] :is(.ladder-period,.hub-switch) { background: var(--surface-soft); border-radius: 6px; }
body[data-draft-ui="true"] :is(.ladder-table-scroll thead,.ladder-table th,.fm-table th,.pass-table th,.rank-table th) { background: var(--surface-soft); color: var(--muted); }
body[data-draft-ui="true"] :is(.ladder-table,.fm-table,.pass-table,.rank-table) :is(td,th) { border-color: var(--line); }
body[data-draft-ui="true"] :is(.ladder-table,.fm-table,.rank-table) tbody tr { background: #fff; }
body[data-draft-ui="true"] :is(.ladder-table,.fm-table,.rank-table) tbody tr:nth-child(even) { background: #f7f8f1; }
body[data-draft-ui="true"] :is(.fm-table tr.mine,.ladder-table tr.mine,.pass-table .leading) { background: var(--surface-selected); }
body[data-draft-ui="true"] :is(.fm-table td:last-child,.scored>strong,.active-stat) { color: var(--accent); }
body[data-draft-ui="true"] :is(.ladder-history li,.ladder-overview>div+div,.ladder-rules,.ladder-movement-head,.pass-fixture) { border-color: var(--line); }
body[data-draft-ui="true"] :is(.ladder-range-track,.ladder-attributes i) { background: #dfe6d8; }
body[data-draft-ui="true"] :is(.ladder-podium-label,.ladder-mover-hero small,.ladder-movement-rank,.ladder-movement-note,.ladder-movement-head .eyebrow) { color: var(--muted); }
body[data-draft-ui="true"] :is(.ladder-podium-emblem,.ladder-trend-mark,.ladder-mover-hero.newcomer>strong,.ladder-mover-hero.newcomer>strong small) { color: var(--accent); }
body[data-draft-ui="true"] .ladder-podium-card.place-1 .ladder-podium-emblem { color: #8a671c; }
body[data-draft-ui="true"] .ladder-podium-card.place-3 .ladder-podium-emblem { color: #9b6444; }
body[data-draft-ui="true"] .ladder-movement-list .new { color: var(--accent); background: var(--surface-selected); }
body[data-draft-ui="true"] .ladder-movement-list .down { color: var(--bad); }
body[data-draft-ui="true"] :is(.ladder-aggregate,.ladder-tactics,.ladder-tactics>div) { background: var(--surface-soft); color: var(--fg); border-color: var(--line); }
body[data-draft-ui="true"] .ladder-roster-detail .bench-list>.ladder-player-button { background: #fff; color: var(--fg); border-color: var(--line); }
body[data-draft-ui="true"] .ladder-roster-detail .bench-list>.ladder-player-button:hover { border-color: var(--accent); }

/* Pass-and-play, friend rooms and challenges. */
body[data-draft-ui="true"] :is(.pass-handoff,.pass-budget,.pass-tactics,.pass-roster,.pass-lock-summary,.pass-league-banner,.challenge-splash,.challenge-history,.rivalry-score,.friend-home-card,.duel-home-card,.last-match-tile) { background: #fff; color: var(--fg); border-color: var(--line); border-radius: 7px; box-shadow: none; }
body[data-draft-ui="true"] :is(.pass-handoff-number,.pass-budget strong,.pass-card-top strong,.rivalry-score>div:last-of-type b,.friend-home-card svg,.duel-home-card svg,.friend-home-card>span) { color: var(--accent); }
body[data-draft-ui="true"] :is(.pass-handoff>small,.pass-budget small,.pass-bench-divider,.friend-home-card>small,.pass-roster-row>button:first-child>span) { color: var(--muted); }
body[data-draft-ui="true"] :is(.pass-order span,.pass-roster-row,.pass-card-price,.pass-lock-bar,.challenge-join,.challenge-ribbon>span) { border-color: var(--line); }
body[data-draft-ui="true"] .pass-order .current { background: var(--surface-selected); color: var(--accent); border-color: var(--accent); }
body[data-draft-ui="true"] .pass-order .done { color: var(--accent); border-color: var(--line); }
body[data-draft-ui="true"] .pass-budget-track { background: #dfe6d8; }
body[data-draft-ui="true"] .pass-budget-track i { background: var(--accent); }
body[data-draft-ui="true"] .pass-roster-row { background: #fff; }
body[data-draft-ui="true"] .pass-roster-row.selected { background: var(--surface-selected); box-shadow: inset 3px 0 var(--accent); }
body[data-draft-ui="true"] .pass-bench-divider { background: var(--surface-soft); }
body[data-draft-ui="true"] .pass-card { background: #fff; border-color: var(--line); border-top-color: var(--club); border-radius: 6px; color: var(--fg); }
body[data-draft-ui="true"] .pass-card.legend { background: #fff5d9; border-top-color: #b79a52; }
body[data-draft-ui="true"] .pass-card:hover:not(:disabled) { border-color: var(--accent); }
body[data-draft-ui="true"] .pass-remove:hover { color: var(--bad); }
body[data-draft-ui="true"] .challenge-splash>span { background: var(--surface-selected); color: var(--accent); border-radius: 6px; }
body[data-draft-ui="true"] .challenge-ribbon>span { background: var(--surface-soft); color: var(--muted); }

/* Match broadcast: white score and event surfaces, green playing field. */
body[data-draft-ui="true"] .live-field-wrap { background: #fffef8; border-color: var(--line); border-radius: 7px; box-shadow: none; }
body[data-draft-ui="true"] .live-field .field-player small { color: #fff; }
body[data-draft-ui="true"] .broadcast-score { background: #fffef8; color: var(--fg); border-color: var(--line); }
body[data-draft-ui="true"] .broadcast-score .sc { color: var(--fg); background: transparent; }
body[data-draft-ui="true"] :is(.broadcast-tag,.field-caption b) { color: var(--fg); }
body[data-draft-ui="true"] .moment-chip { background: #fff; color: var(--muted); border-color: var(--line); }
body[data-draft-ui="true"] .moment-chip.goal { background: var(--surface-selected); color: var(--accent); border-color: var(--accent); }
body[data-draft-ui="true"] :is(.match-squads,.match-controls,.moment-strip,.mstats,.feed li) { border-color: var(--line); }
body[data-draft-ui="true"] :is(.mstats,.feed li,.moment-strip) { background: #f1f4eb; color: var(--fg); border-radius: 6px; }
body[data-draft-ui="true"] .feed li.goal { background: var(--surface-selected); }
body[data-draft-ui="true"] .feed li.phase { background: transparent; color: var(--muted); }
body[data-draft-ui="true"] :is(.result-token.L,.result-token.D) { background: #f4e7df; color: #8b4734; }
body[data-draft-ui="true"] .result-token.D { background: #e9ede5; color: #52644f; }
body[data-draft-ui="true"] .result-token.W { background: var(--surface-selected); color: var(--accent); }

/* Profile, career, calendar and squad inspection stay light from every entry point. */
body[data-draft-ui="true"] .hub-dialog-top h2 { font: 800 32px/1.1 var(--display); letter-spacing: -.025em; text-transform: none; color: var(--fg); }
body[data-draft-ui="true"] .hub-dialog :is(.hub-profile-banner,.hub-stat-grid,.hub-stat-grid>div,.record-tile,.career-facts>div,.career-leaders>div) { border-radius: 7px; }
body[data-draft-ui="true"] .fm-overlay { background: #20372f80; backdrop-filter: blur(3px); }
body[data-draft-ui="true"] .fm-sheet { background: #fffef8; color: var(--fg); border: 2px solid var(--fg); border-radius: 8px; box-shadow: 5px 5px 0 var(--fg); }
body[data-draft-ui="true"] .fm-sheet :is(.fm-player-row,.fm-details) { background: var(--surface-soft); border-color: var(--line); }
body[data-draft-ui="true"] :is(.calendar-week,.calendar-day,.calendar-plan .calendar-note,.career-facts>div,.career-leaders>div,.record-tile,.recent-results>div) { border-color: var(--line); }
body[data-draft-ui="true"] .calendar-views button[aria-pressed="true"] { background: var(--surface-selected); color: var(--accent); border-color: var(--accent); }
body[data-draft-ui="true"] .hub-dialog :is(.hub-close,.hub-day,.career-tabs .hub-btn) { min-height: 44px; }
body[data-draft-ui="true"] .hub-dialog .hub-close { min-width: 44px; }
body[data-draft-ui="true"] .rank-avatar { background: var(--surface-soft); border-color: var(--line); color: var(--accent); }
body[data-draft-ui="true"] .medal { color: var(--muted); }
body[data-draft-ui="true"] .medal>span { background: var(--surface-soft); }
body[data-draft-ui="true"] .medal.earned { color: var(--accent); }
body[data-draft-ui="true"] .medal.earned>span { background: var(--surface-selected); color: var(--accent); }
body[data-draft-ui="true"] :is(.hub-badge.earned,.hub-result,.hub-rules span) { background: var(--surface-selected); color: var(--fg); border-color: var(--line); }
body[data-draft-ui="true"] .hub-dialog .hub-day.done { background: var(--surface-selected); color: var(--accent); border-color: var(--accent); }
body[data-draft-ui="true"] .hub-dialog .hub-day.cup { background: var(--accent); color: #fff; border-color: var(--accent); }
body[data-draft-ui="true"] .player-report-traits>span { background: var(--surface-selected); color: var(--accent); border-color: var(--line); }
body[data-draft-ui="true"] .player-report-traits>span.is-negative { background: #f9ebe5; color: var(--bad); border-color: #d3a28f; }
body[data-draft-ui="true"] .performance-meter { background: #dfe6d8; }
body[data-draft-ui="true"] .contribution-ring { background: conic-gradient(#2d7451 var(--goals),#b75b3b 0); }
body[data-draft-ui="true"] .contribution-ring:before { background: #fffef8; }
body[data-draft-ui="true"] .goal-dot { background: var(--accent); }
body[data-draft-ui="true"] .assist-dot { background: var(--star); }
body[data-draft-ui="true"] .player-match-rating[data-performance="excellent"] { color: var(--accent); }
body[data-draft-ui="true"] .player-match-rating[data-performance="good"] { color: #436357; }
body[data-draft-ui="true"] .player-match-rating[data-performance="low"] { color: var(--bad); }

@media (max-width: 860px) {
  body[data-draft-ui="true"] .stage { grid-template-columns: minmax(0,1fr); }
  body[data-draft-ui="true"] .ha-workspace-head { flex-wrap: wrap; }
  body[data-draft-ui="true"] .ha-workspace-meta { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  body[data-draft-ui="true"] .wrap>header { flex-wrap: wrap; }
  body[data-draft-ui="true"] .wrap>header .brand { margin-right: auto; }
  body[data-draft-ui="true"] .wrap>header .hub-actions { gap: 6px; }
  body[data-draft-ui="true"] .wrap>header .hub-actions :is(#hub-profile,#hub-leaderboard,#hub-stats) { width: 44px!important; min-width: 44px!important; padding: 10px!important; }
  body[data-draft-ui="true"] .wrap>header .hub-actions :is(.hub-name,.hub-stat-label) { display: none; }
  body[data-draft-ui="true"] :is(.ha-shell,.fm-overlay) h2 { font-size: 30px; }
  body[data-draft-ui="true"] .ha-selection { max-width: calc(100vw - 32px); }
  body[data-draft-ui="true"] :is(.ha-workspace-nav,.calendar-views) { overflow-x: auto; max-width: 100%; }
  body[data-draft-ui="true"] .ha-workspace-nav>button { flex-shrink: 0; }
}