.cup-tie-dialog.android-browser-gate { width: min(560px, calc(100% - 28px)); padding: 50px clamp(22px, 5vw, 40px) 28px; text-align: center; }
.android-browser-gate h2 { margin: 14px 0; font-size: clamp(26px, 5vw, 36px); line-height: 1.15; }
.android-browser-gate > p:not(.overline) { color: var(--muted); line-height: 1.6; }
.android-browser-gate .android-app-close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; font-size: 28px; }
.android-app-actions { display: grid; gap: 12px; margin-top: 24px; }
.android-app-actions .action-button { display: inline-flex; justify-content: center; text-decoration: none; }
.android-browser-gate .tour-note { margin-bottom: 0; font-size: 12px; }
.game-header-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; min-width: 0; }
.game-header-actions > button { flex-shrink: 0; letter-spacing: 0; }
.achievements-button { display: inline-flex; align-items: center; gap: 8px; }
.achievement-button-icon { color: var(--acid); font-size: 21px; }
.achievements-button small { min-width: 5ch; color: var(--acid); font-size: 11px; font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; }
.settings-button-icon { display: none; }
.cup-tie-dialog.achievements-dialog { width: min(960px, calc(100% - 24px)); max-width: 960px; }
.achievements-dialog .cup-tie-heading { position: sticky; top: 0; z-index: 2; background: #1c122e; }
.achievements-dialog .cup-tie-heading h2 { margin: 6px 0 0; font-size: 29px; }
.achievements-dialog .icon-button { flex-shrink: 0; width: 44px; height: 44px; }
.achievement-hero { display: flex; align-items: center; justify-content: center; margin: 0 24px; padding: 24px; border: 1px solid rgba(217,255,88,.22); border-radius: 16px; background: radial-gradient(ellipse at 100% 0, rgba(217,255,88,.10), transparent 60%), #171122; }
.achievement-tally { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.achievement-tally strong { font-size: 64px; font-weight: 850; line-height: 1; letter-spacing: -.06em; color: var(--acid); }
.achievement-tally span { color: var(--muted); font-size: 28px; font-weight: 650; }
.achievement-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 24px 24px 0; }
.achievement-filters button { min-height: 42px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); background: transparent; font: inherit; font-size: 13px; font-weight: 700; }
.achievement-filters button[aria-pressed="true"] { color: var(--text); background: #392454; border-color: #8658ff; }
.achievement-list { padding: 0 24px 24px; }
.achievement-section h3 { margin: 26px 0 12px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .15em; }
.achievement-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.achievement-card { display: flex; align-items: flex-start; gap: 16px; min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: rgba(10,6,18,.24); }
.achievement-card.is-unlocked { border-color: rgba(217,255,88,.35); background: linear-gradient(120deg, rgba(217,255,88,.055), rgba(134,88,255,.07)); }
.achievement-emblem { display: grid; place-items: center; width: 50px; height: 58px; flex: 0 0 50px; color: #bcaad2; font-size: 18px; font-weight: 850; background: #2f2240; clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.is-unlocked .achievement-emblem { color: #1a2310; background: var(--acid); }
.achievement-copy { min-width: 0; }
.achievement-state { display: block; color: var(--muted); font-size: 9px; letter-spacing: .12em; font-weight: 750; }
.is-unlocked .achievement-state { color: var(--acid); }
.achievement-copy h4 { margin: 7px 0 8px; font-size: 17px; line-height: 1.3; letter-spacing: -.015em; }
.achievement-copy p { margin: 0; color: #bfb3ce; font-size: 13px; line-height: 1.6; }
.achievement-career-note { color: var(--muted); font-size: 14px; line-height: 1.5; }
.career-achievement-card .achievement-copy p { font-size: 16px; }
.career-achievement-card :is(.achievement-date, .achievement-evidence) { font-size: 14px; }
.career-achievement-card .achievement-state { font-size: 12px; }
.career-achievement-card .achievement-copy .achievement-reward { margin-top: 8px; color: var(--acid); font-size: 14px; font-weight: 700; }
.career-achievements summary { cursor: pointer; min-height: 44px; font-size: 16px; }
.career-achievements ul { list-style: none; padding: 0; margin: 0; }
.career-achievements li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 20px; padding: 16px 0; border-top: 1px solid var(--line); }
.career-achievements li > div { min-width: 0; }
.career-achievements li p { margin: 4px 0 0; font-size: 16px; }
.career-achievement-reward { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.career-achievement-reward strong { color: var(--acid); }
.achievement-disciplines { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.achievement-disciplines span { padding: 4px 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-size: 10px; font-weight: 700; }
.achievement-disciplines .is-complete { color: var(--acid); border-color: rgba(217,255,88,.35); }
.achievement-date { display: block; margin-top: 14px; color: var(--acid); font-size: 11px; }
.achievement-evidence { margin-top: 8px; font-size: 12px; color: var(--muted); }
.achievement-evidence summary { cursor: pointer; }
.achievement-evidence p { margin-top: 8px; overflow-wrap: anywhere; }
.achievement-empty { padding: 32px 0; color: var(--muted); line-height: 1.6; }
.achievement-storage-error { margin: 0 24px 20px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.play-games-panel { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin: 20px 24px 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #171122; }
.play-games-panel > div { flex: 1 1 220px; }
.play-games-panel strong { font-size: 14px; }
.play-games-panel p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.play-games-panel[hidden] { display: none; }
.achievement-toast { position: fixed; inset: auto 20px 20px auto; z-index: 1000; margin: 0; display: flex; align-items: flex-start; gap: 14px; max-width: min(430px, calc(100vw - 32px)); padding: 20px; border: 1px solid rgba(217,255,88,.55); border-radius: 16px; background: #21172f; color: var(--text); box-shadow: 0 18px 70px #0008; }
.achievement-toast-star { color: var(--acid); font-size: 30px; }
.achievement-toast small { display: block; color: var(--acid); font-size: 10px; letter-spacing: .1em; }
.achievement-toast strong { display: block; margin: 7px 0; line-height: 1.5; font-size: 15px; }
.achievement-toast button:not(.icon-button) { padding: 6px 0; border: 0; background: none; color: var(--acid); font: inherit; font-size: 13px; cursor: pointer; }
.achievement-toast .icon-button { flex-shrink: 0; width: 32px; height: 32px; }
@media (max-width: 640px) {
  .achievement-grid { grid-template-columns: minmax(0, 1fr); }
  .achievement-hero { margin: 0 16px; padding: 20px; }
  .achievement-tally strong { font-size: 48px; }
  .achievement-list { padding: 0 16px 20px; }
  .achievement-filters { padding: 18px 16px 0; }
  .achievement-filters button { font-size: 12px; padding: 8px 12px; }
  .achievement-card { padding: 16px; gap: 12px; }
  .achievement-toast { right: 16px; bottom: 16px; }
}
.settings-dialog { max-width: 540px; }
.settings-actions { display: grid; gap: 8px; padding: 18px; }
.settings-actions > a, .settings-actions > button { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 68px; padding: 14px 16px; color: var(--text); text-align: left; text-decoration: none; font: inherit; font-size: 16px; font-weight: 750; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
.settings-actions > a:hover, .settings-actions > button:hover { border-color: var(--violet); background: rgba(134,88,255,.1); }
.settings-actions small { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.5; font-weight: 400; }
.settings-actions > a:focus-visible, .onboarding-content a:focus-visible { outline: 3px solid var(--acid); outline-offset: 2px; }
.settings-actions > a > span:last-child, .settings-actions > button > span:last-child { color: var(--acid); }
.app-status { margin: 0 18px 18px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.share-app-actions { margin-top: 24px; }
.onboarding-dialog { max-width: 620px; }
.onboarding-content { padding: 4px 24px 20px; font-size: 15px; line-height: 1.7; }
.onboarding-content section > p { color: #d5cbe5; }
.onboarding-content a { color: var(--acid); }
.onboarding-content ul { padding-left: 22px; color: #d5cbe5; }
.onboarding-content li + li { margin-top: 12px; }
.onboarding-content .tour-footnote { color: var(--muted); font-size: 12px; }
.tour-example-card { display: grid; grid-template-columns: 1fr auto; gap: 6px 20px; margin: 20px 0; padding: 20px; border: 1px solid rgba(134,88,255,.6); border-radius: 14px; background: linear-gradient(135deg, #2a1b41, #171024); }
.tour-example-card > span { grid-column: 1 / -1; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.tour-example-card > strong { grid-column: 1; font-size: 28px; letter-spacing: -.04em; }
.tour-example-card > small { grid-column: 1; align-self: end; color: var(--muted); font-size: 10px; }
.tour-example-card > b { grid-column: 2; grid-row: 2 / 4; align-self: center; color: var(--acid); font-size: 42px; }
.tour-options { display: flex; flex-wrap: wrap; gap: 8px; }
.tour-options button { flex: 1; min-height: 44px; padding: 10px 12px; color: var(--text); font: inherit; font-size: 13px; font-weight: 700; background: #211633; border: 1px solid var(--line); border-radius: 10px; }
.tour-options button[aria-pressed="true"] { color: var(--acid); border-color: var(--acid); background: rgba(217,255,88,.06); }
.tour-demo-hint { min-height: 52px; font-size: 14px; }
.tour-format-preview { margin-top: 24px; padding: 24px; border: 1px solid var(--line); border-radius: 14px; text-align: center; }
.tour-format-preview > span { color: var(--acid); font-size: 28px; letter-spacing: .12em; }
.tour-draft-preview { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; margin: 22px 0; }
.tour-draft-preview span { display: grid; place-items: center; min-height: 58px; color: var(--acid); border: 1px solid var(--violet); border-radius: 10px; background: #211633; font-size: 22px; font-weight: 800; }
.tour-save-note { padding: 16px; border-left: 3px solid var(--acid); border-radius: 8px; background: rgba(217,255,88,.05); color: #d5cbe5; font-size: 14px; }
.onboarding-controls { position: sticky; bottom: 0; display: flex; justify-content: space-between; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--line); background: #1c122e; }
.onboarding-controls .action-button { width: auto; min-height: 46px; padding: 12px 24px; font-size: 14px; }
.onboarding-dialog .cup-tie-heading h2 { font-size: 23px; }
.settings-dialog .icon-button, #shareAppDialog .icon-button { width: 44px; height: 44px; }
@media (max-width: 480px) {
  .onboarding-dialog .cup-tie-heading { align-items: flex-start; padding: 16px; gap: 10px; }
  .onboarding-dialog .cup-tie-heading h2 { font-size: 21px; }
  .onboarding-dialog .cup-tie-heading .secondary-button { padding: 10px; font-size: 12px; white-space: nowrap; }
  .onboarding-content { padding: 4px 16px 16px; }
  .onboarding-controls { padding: 12px 16px; }
  .settings-actions { padding: 14px; }
}
.career-tutorial .onboarding-content { font-size: 16px; }
.career-tutorial .cup-tie-heading .overline { font-size: 12px; }
.career-tutorial :is(.tour-options, .cup-tie-heading, .onboarding-controls) button { min-height: 44px; font-size: 14px; }
.career-tutorial .cup-tie-heading .secondary-button { font-size: 14px; }
.feedback-form { padding: 20px 22px; }
.feedback-form > p:first-child { margin: 0 0 22px; color: var(--muted); line-height: 1.6; }
.feedback-form label { display: block; margin: 18px 0 8px; font-size: 14px; font-weight: 750; }
.feedback-form label span { color: var(--muted); font-weight: 400; }
.feedback-form textarea { display: block; width: 100%; min-height: 120px; padding: 12px 14px; resize: vertical; color: var(--text); background: #100a1b; border: 1px solid var(--line); border-radius: 12px; font: inherit; font-size: 16px; line-height: 1.6; }
.feedback-form textarea:focus, .feedback-form a:focus-visible { outline: 3px solid rgba(217,255,88,.28); outline-offset: 2px; border-color: var(--acid); }
.feedback-form .feedback-hint, .feedback-count, .feedback-delivery, .feedback-draft-note { color: var(--muted); font-size: 13px; line-height: 1.6; }
.feedback-form .feedback-hint { margin: 0 0 8px; }
.feedback-form input + .feedback-hint { margin-top: 8px; }
.feedback-count { display: block; margin-top: 5px; text-align: right; }
.feedback-delivery { margin: 22px 0 16px; overflow-wrap: anywhere; }
.feedback-delivery a { color: var(--acid); }
.feedback-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.feedback-actions .action-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: auto; min-height: 46px; padding: 12px 18px; font-size: 14px; text-decoration: none; }
.feedback-status { margin: 16px 0 0; color: var(--acid); font-size: 14px; line-height: 1.6; }
.feedback-draft-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 20px; }
.feedback-draft-note .text-button { min-height: 44px; }
.feedback-dialog .icon-button { width: 44px; height: 44px; }
@media (max-width: 650px) {
  .site-header:has(.game-header-actions) { flex-wrap: wrap; gap: 8px; height: auto; min-height: 72px; padding: 8px 0; }
  .site-header:has(.game-header-actions) > .brand { flex-shrink: 0; }
  .game-header-actions { display: grid; grid-template-columns: max-content 44px; flex-shrink: 0; gap: 4px 6px; margin-left: auto; }
  .game-header-actions .header-mode { grid-column: 1 / -1; justify-self: end; font-size: 0; }
  .game-header-actions .header-mode:not(:has(span)) { display: none; }
  .game-header-actions .header-mode span { display: inline-block; margin: 0; }
  .game-header-actions > button { position: relative; min-height: 44px; padding: 8px; line-height: 1; }
  .game-header-actions .achievements-button { gap: 6px; }
  .game-header-actions .settings-button { display: grid; place-items: center; }
  .settings-button-icon { display: block; width: 20px; height: 20px; }
  .game-header-actions .header-button-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}
@media (max-width: 480px) {
  .site-header:has(.game-header-actions) .brand-mark { width: 72px; height: 40px; }
}
@media (max-width: 360px) {
  .site-header:has(.game-header-actions) { column-gap: 6px; }
  .site-header:has(.game-header-actions) .brand-mark { width: 60px; height: 36px; }
}
@media (max-width: 640px) {
  .feedback-form { padding: 16px; }
  .feedback-actions > * { flex: 1 1 100%; }
  .feedback-form select, .feedback-form input { font-size: 16px; }
}
.game-shell { width: min(1080px, calc(100% - 32px)); margin: 0 auto 70px; }
.mode-screen { padding: 64px 0 10px; }
.saved-game-card { display: flex; align-items: center; gap: 18px; margin: 0 0 36px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 16px; background: rgba(23, 16, 36, .72); }
.saved-game-icon { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; color: var(--acid); border-radius: 12px; background: rgba(217, 255, 88, .08); }
.saved-game-icon svg { width: 24px; height: 24px; }
.saved-game-copy { flex: 1; min-width: 0; }
.saved-game-copy h2 { margin: 0 0 5px; font-size: 17px; font-weight: 750; line-height: 1.35; letter-spacing: -.025em; }
.saved-game-copy p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.saved-game-action { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 16px; min-height: 46px; padding: 10px 16px; color: var(--acid); border: 1px solid rgba(217, 255, 88, .22); border-radius: 10px; background: rgba(217, 255, 88, .07); font-size: 13px; font-weight: 750; line-height: 1.4; transition: background .18s, border-color .18s; }
.saved-game-action > span:last-child { font-size: 20px; line-height: 1; }
.saved-game-action:hover:not(:disabled) { background: rgba(217, 255, 88, .14); border-color: rgba(217, 255, 88, .5); }
@media (max-width: 640px) {
  .saved-game-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px 12px; margin-bottom: 28px; padding: 18px; }
  .saved-game-icon { width: 40px; height: 40px; }
  .saved-game-copy h2 { font-size: 16px; }
  .saved-game-action { grid-column: 1 / -1; width: 100%; font-size: 14px; }
}
.mode-intro { max-width: 690px; margin-bottom: 46px; }
.mode-intro h1 { margin: 0; font-size: clamp(48px, 8vw, 86px); line-height: .9; letter-spacing: -.075em; }
.mode-intro h1 em { color: var(--muted); font-style: normal; }
.mode-intro > p:last-child { max-width: 600px; margin: 22px 0 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.mode-section { margin-top: 30px; }
.mode-section-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.mode-section-title span { font-size: 13px; font-weight: 900; letter-spacing: .12em; }
.mode-section-title small { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.mode-grid { display: grid; gap: 10px; }
.team-modes { grid-template-columns: repeat(3, 1fr); }
.individual-modes { grid-template-columns: repeat(5, 1fr); }
.mode-card { min-height: 185px; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; padding: 20px; color: var(--text); text-align: left; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(145deg, var(--surface-2), #120b1f); transition: transform .18s, border-color .18s; }
.mode-card::after { content: ""; position: absolute; width: 130px; height: 130px; right: -45px; bottom: -55px; border: 24px solid rgba(134,88,255,.13); border-radius: 50%; }
.mode-card:hover { transform: translateY(-4px); border-color: var(--violet); }
.mode-card .mode-code { width: 39px; height: 39px; display: grid; place-items: center; margin-bottom: 21px; color: #170b29; border-radius: 10px; background: var(--acid); font-size: 11px; font-weight: 950; }
.mode-card strong { position: relative; z-index: 1; font-size: 21px; letter-spacing: -.035em; }
.mode-card small { position: relative; z-index: 1; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.mode-card b { position: relative; z-index: 1; margin-top: auto; color: var(--acid); font-size: 18px; }
.individual-modes .mode-card { min-height: 155px; padding: 17px; }
.individual-modes .mode-code { margin-bottom: 17px; }
.individual-modes .mode-card strong { font-size: 15px; }
.draft-screen { padding-top: 52px; }
.draft-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.draft-head h1 { margin: 0; font-size: clamp(38px, 6vw, 68px); line-height: .94; letter-spacing: -.065em; }
.draft-head h1 em { color: var(--muted); font-style: normal; }
.back-button { margin: 0 0 16px; padding: 0; color: var(--muted); border: 0; background: transparent; font-size: 11px; font-weight: 850; letter-spacing: .1em; }
.back-button:hover { color: var(--acid); }
.pick-counter { min-width: 126px; display: flex; align-items: center; justify-content: flex-end; gap: 11px; }
.pick-counter strong { font-size: 54px; line-height: .8; letter-spacing: -.08em; }
.pick-counter span { color: var(--muted); font-size: 11px; font-weight: 800; line-height: 1.2; letter-spacing: .1em; }

.draft-layout { display: grid; grid-template-columns: 292px minmax(0, 1fr); gap: 14px; align-items: stretch; }
.game-shell:has(.draft-screen:not([hidden])) { width: min(1320px, calc(100% - 32px)); }
.squad-card, .pick-stage, .route-panel, .match-panel, .result-panel {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(23, 16, 36, .88);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}
.squad-card { padding: 20px; }
.squad-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.squad-card-head > div { display: grid; gap: 3px; }
.squad-card-head span, .select-label, .seed-control span, .team-rating span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}
.squad-card-head strong { font-size: 21px; letter-spacing: -.03em; }
.icon-button { width: 38px; height: 38px; color: var(--text); border: 1px solid var(--line); border-radius: 50%; background: transparent; font-size: 20px; }
.icon-button:hover { color: var(--acid); border-color: var(--acid); }
.select-label { display: block; margin-bottom: 7px; }
.nation-button { width: 100%; min-height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; color: var(--acid); border: 1px solid rgba(217,255,88,.25); border-radius: 11px; background: rgba(217,255,88,.055); font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.nation-button:hover:not(:disabled) { border-color: var(--acid); background: rgba(217,255,88,.1); }
.nation-button span { font-size: 16px; }
.lineup-slots { display: grid; gap: 8px; margin: 20px 0; }
.lineup-order-hint { margin: -9px 2px 16px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.lineup-slot { min-height: 58px; display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px dashed rgba(255,255,255,.13); border-radius: 12px; color: #71677f; background: rgba(255,255,255,.018); }
.lineup-slot.filled { color: var(--text); border-style: solid; border-color: rgba(134,88,255,.34); background: rgba(134,88,255,.1); }
.lineup-slot.reorderable { cursor: grab; transition: border-color .15s ease, background .15s ease, opacity .15s ease, transform .15s ease; }
.lineup-slot.reorderable:active { cursor: grabbing; }
.lineup-slot.dragging { opacity: .42; transform: scale(.985); }
.lineup-slot.drag-over { border-color: var(--acid); background: rgba(217,255,88,.1); }
.slot-code { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: inherit; background: rgba(255,255,255,.06); font-size: 11px; font-weight: 900; }
.filled .slot-code { color: #170b29; background: var(--acid); }
.slot-copy { min-width: 0; display: grid; gap: 2px; }
.slot-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.slot-copy small { color: var(--muted); font-size: 10px; }
.slot-actions { display: flex; align-items: center; gap: 7px; }
.slot-drag-handle { width: 17px; color: var(--muted); font-size: 16px; line-height: 1; text-align: center; cursor: grab; user-select: none; }
.slot-drag-handle:active { cursor: grabbing; }
.slot-order-controls { display: flex; gap: 3px; }
.slot-order-button { width: 22px; height: 25px; padding: 0; color: var(--text); border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.035); font-size: 12px; font-weight: 900; }
.slot-order-button:hover:not(:disabled) { color: var(--acid); border-color: rgba(217,255,88,.5); }
.slot-order-button:disabled { opacity: .22; cursor: default; }
.slot-rating { font-size: 17px; font-weight: 900; }
.team-rating { min-height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-radius: 12px; background: #100a1b; }
.team-rating strong { color: var(--acid); font-size: 24px; }
.seed-control { display: grid; gap: 7px; margin-top: 16px; }

.pick-stage { min-height: 610px; overflow: hidden; position: relative; }
.discipline-banner { height: 76px; display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 0 24px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.018); }
.discipline-banner > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; color: #180d29; background: var(--acid); font-size: 13px; font-weight: 950; }
.discipline-banner > div:nth-child(2) { display: grid; gap: 2px; }
.discipline-banner small { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.discipline-banner strong { font-size: 16px; }
.draft-progress { display: flex; gap: 5px; }
.progress-dot { width: 22px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.12); }
.progress-dot.done { background: var(--acid); }
.progress-dot.current { background: var(--violet); box-shadow: 0 0 12px rgba(134,88,255,.7); }

.spin-panel, .ready-panel { min-height: 533px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 38px; text-align: center; }
.country-panel { min-height: 533px; padding: 28px; }
.country-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 10px; }
.country-heading p { margin: 0 0 9px; color: var(--violet); font-size: 11px; font-weight: 850; letter-spacing: .13em; }
.country-heading h2 { margin: 0; font-size: 34px; letter-spacing: -.05em; }
.country-hint { max-width: 620px; margin: 0 0 24px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.country-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.country-card { min-width: 0; min-height: 230px; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; padding: 15px; color: var(--text); text-align: left; border: 1px solid var(--line); border-radius: 15px; background: radial-gradient(circle at 90% 0, rgba(255,79,179,.2), transparent 46%), linear-gradient(155deg, var(--surface-3), #120b1f 76%); transition: transform .18s, border-color .18s; }
.country-card:hover { transform: translateY(-5px); border-color: var(--acid); }
.country-code { min-width: 66px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin-bottom: 28px; padding: 7px 9px; color: #160b26; border-radius: 12px; background: var(--acid); font-size: 12px; font-weight: 950; letter-spacing: .06em; }
.country-choice-badge .country-flag { width: 24px; height: 18px; border-color: rgba(22,11,38,.25); }
.country-card strong { overflow-wrap: anywhere; font-size: 18px; line-height: 1.05; letter-spacing: -.035em; }
.country-card small { margin-top: 8px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.country-pick { width: 100%; margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; color: var(--acid); border-top: 1px solid var(--line); font-size: 9px; font-weight: 900; letter-spacing: .07em; }
.country-pick b { font-size: 18px; }
.shuttle-orbit { position: relative; width: 116px; height: 116px; display: grid; place-items: center; margin-bottom: 25px; border: 1px solid rgba(134,88,255,.35); border-radius: 50%; background: radial-gradient(circle, rgba(134,88,255,.35), rgba(134,88,255,.05) 55%, transparent 56%); }
.shuttle-orbit::before, .shuttle-orbit::after { content: ""; position: absolute; inset: -13px; border: 1px solid rgba(255,79,179,.2); border-radius: 50%; }
.shuttle-orbit::after { inset: 14px; border-style: dashed; animation: orbit 12s linear infinite; }
.shuttle-orbit span { color: var(--acid); font-size: 34px; filter: drop-shadow(0 0 14px rgba(217,255,88,.55)); }
@keyframes orbit { to { rotate: 360deg; } }
.spin-panel > p:first-of-type, .choice-heading p, .ready-panel > p { margin: 0 0 11px; color: var(--violet); font-size: 12px; font-weight: 850; letter-spacing: .13em; }
.ready-panel h2 { margin: 0; font-size: clamp(38px, 6vw, 62px); line-height: .95; letter-spacing: -.06em; }
.spin-panel .action-button { margin-top: 16px; }
.action-button { min-width: 240px; min-height: 52px; display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; padding: 0 18px 0 21px; color: #140a24; border: 0; border-radius: 13px; background: var(--acid); font-size: 13px; font-weight: 950; letter-spacing: .04em; box-shadow: 0 12px 30px rgba(217,255,88,.12); transition: transform .18s, filter .18s; }
.action-button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.06); }
.action-button b { font-size: 20px; }

.choice-panel { padding: 26px; }
.choice-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.choice-heading h2 { margin: 0; font-size: 31px; letter-spacing: -.045em; }
.reroll-button, .text-button { color: var(--muted); border: 0; background: transparent; font-size: 12px; font-weight: 800; letter-spacing: .07em; }
.reroll-button:hover, .text-button:hover { color: var(--acid); }
.choice-hint { margin: -10px 0 18px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.choice-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.player-card { min-width: 0; min-height: 368px; padding: 0; overflow: hidden; position: relative; display: flex; flex-direction: column; color: var(--text); text-align: left; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(155deg, var(--surface-3), #120b1f 74%); box-shadow: 0 14px 34px rgba(0,0,0,.18); transition: transform .18s, border-color .18s, box-shadow .18s; }
.player-card::before { content: ""; position: absolute; z-index: 2; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--acid), var(--violet) 58%, var(--pink)); opacity: .8; }
.player-card:hover { transform: translateY(-5px); border-color: rgba(217,255,88,.46); box-shadow: 0 20px 42px rgba(0,0,0,.3), 0 0 0 1px rgba(217,255,88,.06); }
.card-top { min-height: 132px; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 22px 18px 18px; background: radial-gradient(circle at 90% 0, rgba(255,79,179,.2), transparent 56%), linear-gradient(140deg, rgba(134,88,255,.36), rgba(134,88,255,.08) 65%, transparent); }
.card-rating { min-width: 0; max-width: 100%; display: flex; flex-direction: column; align-items: flex-start; flex-shrink: 0; padding: 9px 13px 10px 14px; white-space: normal; border-left: 3px solid var(--acid); border-radius: 0 12px 12px 0; background: linear-gradient(110deg, rgba(8,5,16,.62), rgba(8,5,16,.18)); box-shadow: inset 0 1px rgba(255,255,255,.06); transition: border-color .18s ease, background .18s ease; }
.player-card:hover .card-rating { border-left-color: #fff; background: linear-gradient(110deg, rgba(8,5,16,.76), rgba(8,5,16,.22)); }
.card-rating strong { color: #fff; font-size: 53px; line-height: .78; letter-spacing: -.075em; text-shadow: 0 3px 18px rgba(0,0,0,.28); }
.card-rating span { margin-top: 11px; color: var(--acid); font-size: 8px; font-weight: 950; letter-spacing: .13em; }
.card-year { flex-shrink: 0; padding: 8px 11px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; font-size: 18px; font-weight: 950; line-height: 1; letter-spacing: -.02em; }
.card-body { flex: 1; display: flex; flex-direction: column; padding: 19px 17px 16px; }
.card-body small { color: var(--violet); font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.card-meta { min-height: 24px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--violet); font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.card-country-badge { display: inline-flex; align-items: center; gap: 5px; max-width: 118px; padding: 4px 7px; color: var(--text); border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.045); font-size: 9px; letter-spacing: .07em; }
.card-country-badge > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-player-flags .country-flag { width: 28px; height: 21px; }
.card-body h3 { margin: 10px 0 7px; overflow-wrap: anywhere; font-size: 18px; line-height: 1.08; letter-spacing: -.035em; }
.card-body p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.card-pick { margin-top: auto; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; color: var(--acid); border-top: 1px solid var(--line); font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.card-pick b { font-size: 20px; }
.ready-panel { background: radial-gradient(circle at 50% 40%, rgba(134,88,255,.2), transparent 52%); }
.ready-record { display: flex; align-items: center; gap: 13px; margin-bottom: 22px; }
.ready-record span { font-size: 66px; line-height: .8; font-weight: 950; letter-spacing: -.09em; }
.ready-record i { color: var(--pink); font-size: 30px; font-style: normal; }
.ready-panel .action-button { margin-top: 28px; }
.error-message { min-height: 20px; margin: -32px 30px 20px; color: #ff91a9; font-size: 13px; text-align: center; }

.game-shell:has(.arena:not([hidden])) { width: calc(100% - 32px); }
.arena { padding-top: 22px; --draw-height: max(300px, calc(100dvh - 290px)); }
.arena-topline { display: flex; justify-content: space-between; align-items: end; margin-bottom: 18px; }
.arena-topline .overline { margin-bottom: 5px; }
.arena-topline h2 { margin: 0; font-size: clamp(22px, 2.6vw, 36px); letter-spacing: -.045em; }
.arena-workspace { display: grid; grid-template-columns: minmax(0,1fr) clamp(250px, 21vw, 320px); grid-template-areas: "draw match"; gap: 16px; align-items: start; }
.match-sidebar { grid-area: match; min-width: 0; display: grid; gap: 12px; }
.route-panel { padding: 15px; }
.route-panel summary { cursor: pointer; margin: 0; font-size: 11px; }
.route-panel summary span { margin-left: 10px; color: var(--muted); font-size: 9px; }
.route-panel[open] summary { margin-bottom: 10px; }
.route { display: grid; gap: 7px; }
.route-item { min-height: 54px; display: grid; grid-template-columns: 28px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 8px; color: #746985; border-radius: 11px; }
.route-item.current { color: var(--text); background: rgba(134,88,255,.14); }
.route-item.done { color: #bbb2ca; }
.route-index { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 11px; font-weight: 900; }
.route-item.current .route-index { color: #170c28; border-color: var(--acid); background: var(--acid); }
.route-item.win .route-index { color: #10091d; border-color: var(--green); background: var(--green); }
.route-item.loss .route-index { color: #fff; border-color: var(--red); background: var(--red); }
.route-item strong { display: block; font-size: 13px; }
.route-item small { color: inherit; font-size: 10px; font-weight: 750; letter-spacing: .05em; }
.route-score { font-size: 12px; font-weight: 900; }
.route-games { grid-column: 2 / -1; }
.match-panel { min-width: 0; padding: 20px; }
.match-intro { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.stage-tag { display: inline-block; padding: 6px 9px; color: #170c28; border-radius: 6px; background: var(--acid); font-size: 10px; font-weight: 950; letter-spacing: .1em; }
.match-intro p { margin: 18px 0 3px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.match-intro h3 { margin: 0; font-size: 25px; letter-spacing: -.045em; overflow-wrap: anywhere; }
.match-intro .entry-label { white-space: normal; }
.tie-expectation { margin-top: 10px; color: var(--muted); font-size: 13px; }
.scoreboard { display: flex; align-items: end; gap: 23px; margin: 24px 0 4px; }
.scoreboard div { display: grid; }
.scoreboard small { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.scoreboard strong { font-size: 46px; line-height: 1; }
.scoreboard > span { color: #5c516a; font-size: 26px; }
.rubber-feed { display: grid; gap: 10px; margin: 16px 0 0; max-height: 390px; overflow: auto; overscroll-behavior: contain; padding-right: 4px; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: #66517f transparent; }
.rubber-feed:empty { display: none; }
.rubber-result { display: grid; grid-template-columns: 27px 25px minmax(0,1fr); gap: 8px; align-items: start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(135deg, rgba(255,255,255,.035), transparent); animation: card-in .32s ease both; }
.rubber-result.win { border-left: 3px solid var(--green); }
.rubber-result.loss { border-left: 3px solid var(--red); }
.rubber-result .slot { padding-top: 6px; color: var(--muted); font-size: 10px; font-weight: 900; }
.rubber-result .outcome { width: 26px; height: 26px; display: grid; place-items: center; color: #10091d; border-radius: 50%; background: var(--green); font-size: 10px; font-weight: 950; }
.rubber-result.loss .outcome { color: #fff; background: var(--red); }
.rubber-entries { min-width: 0; }
.rubber-entries strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 1.4; }
.rubber-entries small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.game-score-strip { display: flex; flex-wrap: wrap; gap: 6px; font-variant-numeric: tabular-nums; }
.rubber-score { grid-column: 1 / -1; padding-top: 9px; margin-top: 2px; border-top: 1px solid rgba(255,255,255,.07); }
.game-score { min-width: 55px; display: grid; justify-items: center; gap: 3px; padding: 5px 8px 6px; border: 1px solid rgba(255,255,255,.1); border-radius: 7px; background: rgba(255,255,255,.035); }
.game-score.won { border-color: rgba(87,231,160,.25); background: rgba(87,231,160,.06); }
.game-score.lost { border-color: rgba(255,87,135,.2); background: rgba(255,87,135,.04); }
.game-number { color: var(--muted); font-size: 8px; font-weight: 850; letter-spacing: .08em; }
.game-points { display: flex; align-items: baseline; gap: 4px; color: #aaa0b7; font-size: 13px; line-height: 1; }
.game-points b { font-weight: 700; }
.game-points .high-score { color: var(--text); font-weight: 950; }
.game-score.won .high-score { color: var(--green); }
.score-dash { color: #716580; font-weight: 500; }
.route-games .game-score { min-width: 46px; padding: 4px 5px; }
.route-games .game-points { font-size: 11px; }
.tie-complete { padding: 10px 2px 1px; color: var(--muted); font-size: 13px; }
.tie-complete strong { color: var(--text); }
.play-controls { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.play-controls .action-button { width: 100%; min-width: 0; min-height: 54px; padding: 12px 16px; font-size: 12px; text-align: left; }
.play-controls .action-button b { margin-left: 8px; }
@keyframes card-in { from { opacity: 0; transform: translateY(8px); } }

.result-panel { margin-top: 14px; overflow: hidden; }
.result-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(32px,6vw,62px); background: radial-gradient(circle at 8% 10%, rgba(134,88,255,.26), transparent 42%); }
.result-hero > :not(.champion-celebration) { position: relative; z-index: 2; }
.result-hero h2 { margin: 0; font-size: clamp(44px,8vw,82px); line-height: .95; letter-spacing: -.07em; }
.result-hero > p:not(.overline) { margin: 13px 0 26px; color: var(--muted); font-size: 16px; }
.result-actions { display: flex; align-items: center; gap: 12px; }
.result-actions .action-button { min-width: 210px; }
.champion-celebration { position: absolute; z-index: 0; inset: 0; opacity: 0; pointer-events: none; }
.champion-rays { width: 520px; aspect-ratio: 1; position: absolute; top: 50%; right: -95px; border-radius: 50%; background: repeating-conic-gradient(from 8deg, rgba(217,255,88,.13) 0 8deg, transparent 8deg 20deg); filter: blur(.2px); transform: translateY(-50%) scale(.65); }
.champion-confetti { position: absolute; inset: 0; overflow: hidden; }
.champion-confetti-piece { width: 7px; height: 14px; position: absolute; top: -22px; left: var(--x); border-radius: 1px; background: var(--color); box-shadow: 0 0 8px color-mix(in srgb, var(--color) 55%, transparent); opacity: 0; will-change: transform, opacity; }
.champion-confetti-piece.is-round { width: 8px; height: 8px; border-radius: 50%; }
.champion-mark { display: none; align-items: center; gap: 11px; margin-bottom: 17px; color: var(--acid); font-size: 11px; font-weight: 950; letter-spacing: .18em; }
.champion-trophy { width: 52px; height: 52px; overflow: visible; fill: rgba(217,255,88,.15); stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 13px rgba(217,255,88,.32)); }
.result-panel.is-champion { border-color: rgba(217,255,88,.42); box-shadow: 0 24px 80px rgba(91,52,149,.28), 0 0 0 1px rgba(217,255,88,.08); }
.result-panel.is-champion .result-hero { background: radial-gradient(circle at 80% 50%, rgba(217,255,88,.14), transparent 31%), radial-gradient(circle at 8% 10%, rgba(134,88,255,.34), transparent 45%), linear-gradient(135deg, rgba(29,16,48,.98), rgba(13,8,23,.98)); }
.result-panel.is-champion .champion-celebration { opacity: 1; }
.result-panel.is-champion .champion-rays { animation: champion-rays-in 1.2s cubic-bezier(.2,.85,.25,1) both, champion-rays-turn 18s linear 1.2s infinite; }
.result-panel.is-champion .champion-mark { display: flex; animation: champion-mark-in .72s cubic-bezier(.18,.88,.3,1.2) .12s both; }
.result-panel.is-champion .result-hero h2 { color: var(--acid); text-shadow: 0 0 30px rgba(217,255,88,.2); animation: champion-title-in .75s cubic-bezier(.18,.88,.3,1.12) .22s both; }
.result-panel.is-champion .champion-confetti-piece { animation: champion-confetti-fall var(--duration) cubic-bezier(.22,.7,.35,1) var(--delay) both; }
@keyframes champion-mark-in { from { opacity: 0; transform: translateY(18px) scale(.86); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes champion-title-in { from { opacity: 0; transform: translateY(20px); letter-spacing: -.03em; } to { opacity: 1; transform: translateY(0); letter-spacing: -.07em; } }
@keyframes champion-rays-in { from { opacity: 0; transform: translateY(-50%) scale(.45) rotate(-18deg); } to { opacity: 1; transform: translateY(-50%) scale(1) rotate(0); } }
@keyframes champion-rays-turn { to { transform: translateY(-50%) scale(1) rotate(360deg); } }
@keyframes champion-confetti-fall { 0% { opacity: 0; transform: translate3d(0,-18px,0) rotate(0); } 12% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; transform: translate3d(var(--drift),460px,0) rotate(var(--spin)); } }
.secondary-button { min-height: 44px; padding: 0 16px; color: var(--text); border: 1px solid var(--line); border-radius: 11px; background: transparent; font-size: 12px; font-weight: 900; letter-spacing: .06em; }
.secondary-button:hover { color: var(--acid); border-color: var(--acid); }
.tournament-data { padding: clamp(24px,5vw,52px); border-top: 1px solid var(--line); }
.data-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 15px; }
.data-heading h3 { margin: 0; font-size: 24px; letter-spacing: -.03em; }
.data-heading span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .07em; }
.standings-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.group-table, .bracket-stage { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.018); }
.group-table h4, .bracket-stage h4 { margin: 0 0 10px; color: var(--violet); font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.table-row { display: grid; grid-template-columns: 18px minmax(0,1fr) 27px 33px 33px 38px; gap: 6px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.06); color: #7f758c; font-size: 11px; }
.table-row.header { color: var(--muted); border: 0; font-size: 9px; font-weight: 800; }
.table-row.qualifier { color: var(--text); }
.table-row .team { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.table-row .number { text-align: right; font-variant-numeric: tabular-nums; }
.bracket-heading { margin-top: 36px; }
.bracket { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.bracket-tie { margin-top: 7px; padding: 10px; border-radius: 8px; background: #100a1b; font-size: 11px; }
.bracket-tie div { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; }
.bracket-tie .winner { color: var(--acid); font-weight: 850; }

/* Live tournament draw */
.draw-panel {
  grid-area: draw;
  min-width: 0;
  margin-top: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    radial-gradient(circle at 88% 0, rgba(134,88,255,.16), transparent 28rem),
    rgba(17, 10, 28, .94);
  box-shadow: var(--shadow);
}
.draw-heading {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
}
.draw-heading .overline { margin-bottom: 5px; }
.draw-heading h3 { margin: 0; font-size: 23px; letter-spacing: -.045em; }
.draw-heading > :first-child { min-width: 0; margin-right: auto; }
.draw-heading > button { flex-shrink: 0; }
.draw-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .06em; }
.draw-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; background: #51465f; }
.legend-dot.user { background: var(--acid); box-shadow: 0 0 11px rgba(217,255,88,.55); }
.legend-dot.winner { background: var(--green); }
.legend-dot.locked { border: 1px solid #62576e; background: transparent; }
.section-kicker { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 24px 10px; color: var(--text); font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.section-kicker small { color: var(--muted); font-size: 11px; letter-spacing: .1em; }
.bracket-kicker { border-top: 1px solid var(--line); }
.bracket-kicker span { font-size: 10px; color: var(--muted); letter-spacing: .04em; }
.draw-navigation { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.draw-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 20px; }
.draw-tabs { display: flex; gap: 5px; }
.draw-tabs button, .focus-draw-button { min-height: 32px; border: 1px solid transparent; border-radius: 7px; padding: 7px 10px; background: transparent; color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .06em; }
.draw-tabs button[aria-pressed="true"] { color: var(--acid); background: rgba(217,255,88,.09); border-color: rgba(217,255,88,.22); }
.draw-tabs button:hover, .focus-draw-button:hover { color: var(--text); background: rgba(255,255,255,.07); }
.draw-toolbar button:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }
.draw-zoom { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 10px; flex-shrink: 0; }
.draw-zoom button { min-width: 44px; min-height: 44px; border-color: var(--line); }
.draw-zoom output { min-width: 48px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); }
.draw-panel:not(.is-round-view) .bracket-viewport { touch-action: pan-x pan-y; }

.cup-group-stage { height: calc(var(--draw-height) + 41px); overflow: auto; padding-bottom: 20px; border-top: 1px solid var(--line); }
.live-groups { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; padding: 0 20px; }
.live-group-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.025); }
.live-group-card.is-user-group { border-color: rgba(217,255,88,.38); box-shadow: inset 0 0 0 1px rgba(217,255,88,.06); }
.live-group-card header { min-height: 55px; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.025); }
.group-letter { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; color: #160b27; border-radius: 9px; background: var(--violet); font-size: 12px; font-weight: 950; }
.is-user-group .group-letter { background: var(--acid); }
.live-group-card header div { min-width: 0; display: grid; gap: 1px; }
.live-group-card header strong { font-size: 12px; letter-spacing: .08em; }
.live-group-card header small { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.live-group-row { min-height: 43px; display: grid; grid-template-columns: 22px minmax(0,1fr) 28px; align-items: center; gap: 7px; padding: 6px 10px; color: #92879f; border-top: 1px solid rgba(255,255,255,.055); }
.live-group-row:first-of-type { border-top: 0; }
.live-group-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.group-rank { width: 20px; height: 20px; display: grid; place-items: center; color: var(--muted); border: 1px solid rgba(255,255,255,.1); border-radius: 6px; font-size: 10px; font-weight: 900; }
.group-record { color: var(--muted); font-size: 11px; font-weight: 900; text-align: right; font-variant-numeric: tabular-nums; }
.live-group-row.qualifier { color: var(--text); }
.live-group-row.is-opponent { background: rgba(134,88,255,.1); color: var(--text); }
.live-group-row.is-user { color: #170b29; background: var(--acid); }
.live-group-row.is-user .group-rank { color: #170b29; border-color: rgba(23,11,41,.25); }
.live-group-row.is-user .group-record { color: #170b29; }
.group-tie-results { border-top: 1px solid var(--line); padding: 0 10px 8px; }
.group-tie-results summary { padding: 12px 0 5px; color: var(--acid); cursor: pointer; font-size: 10px; font-weight: 850; letter-spacing: .06em; }
.group-tie-button { display: grid; width: 100%; gap: 7px; margin-top: 8px; padding: 10px; color: var(--muted); text-align: left; border: 1px solid var(--line); border-radius: 8px; background: #100a1b; }
.group-tie-button:hover { border-color: var(--violet); background: rgba(134,88,255,.08); }
.group-tie-team { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; }
.group-tie-team.is-winner { color: var(--green); }
.group-tie-team b { font-size: 14px; font-variant-numeric: tabular-nums; }
.group-tie-team .country-flag { width: 17px; height: 13px; }
.has-tie-detail { cursor: pointer; }
.has-tie-detail:hover { border-color: var(--violet); }
.has-tie-detail:focus-visible, .group-tie-button:focus-visible, .group-tie-results summary:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }
.tie-detail-hint { position: absolute; top: calc(100% + 2px); right: 2px; color: var(--muted); font-size: 8px; font-weight: 850; letter-spacing: .07em; }
.draw-round.is-right .tie-detail-hint { right: auto; left: 2px; }

/* Completed Cup ties: all rubbers, with scores in fixed team order. */
body:has(.cup-tie-dialog[open]) { overflow: hidden; }
.cup-tie-dialog { width: min(660px, calc(100vw - 28px)); max-height: calc(100dvh - 40px); margin: auto; padding: 0; color: var(--text); border: 1px solid rgba(134,88,255,.5); border-radius: 18px; background: #140d22; box-shadow: 0 24px 100px rgba(0,0,0,.65); overflow: auto; scrollbar-color: var(--violet) #140d22; scrollbar-width: thin; }
.cup-tie-dialog::backdrop { background: rgba(6,3,12,.78); backdrop-filter: blur(5px); }
.cup-tie-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 2; padding: 18px 22px; border-bottom: 1px solid var(--line); background: #1c122e; }
.cup-tie-heading .overline { font-size: 10px; margin-bottom: 5px; }
.cup-tie-heading h2 { margin: 0; font-size: 25px; letter-spacing: -.03em; }
.cup-tie-heading .icon-button { flex-shrink: 0; font-size: 26px; }
.cup-tie-summary { display: grid; gap: 10px; padding: 18px 22px; background: linear-gradient(120deg, rgba(134,88,255,.1), transparent); border-bottom: 1px solid var(--line); }
.cup-tie-team { display: flex; justify-content: space-between; align-items: center; gap: 15px; color: var(--muted); }
.cup-tie-team .entry-label { white-space: normal; }
.cup-tie-team > b { width: 35px; padding: 4px; flex-shrink: 0; border-radius: 7px; text-align: center; font-size: 24px; background: rgba(255,255,255,.05); font-variant-numeric: tabular-nums; }
.cup-tie-team.is-winner { color: var(--green); }
.cup-tie-team.is-winner > b { background: rgba(87,231,160,.09); }
.cup-tie-matches { padding: 0 22px 20px; }
.cup-tie-reading-order { margin: 14px 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.cup-rubber-detail { margin-top: 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.02); overflow: hidden; }
.cup-rubber-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.025); }
.cup-rubber-heading .stage-tag { margin: 0; min-height: 24px; padding: 5px 7px; font-size: 9px; }
.cup-rubber-heading strong { font-size: 12px; }
.clincher-badge { margin-left: auto; color: var(--green); font-size: 8px; font-weight: 850; letter-spacing: .06em; }
.cup-rubber-table { padding: 10px 12px; gap: 7px; }
.cup-rubber-table .draw-score-row { grid-template-columns: minmax(0,1fr) repeat(var(--game-count), 29px) 30px; gap: 6px; }
.cup-rubber-table .draw-score-name { display: flex; align-items: center; overflow-wrap: anywhere; }
.cup-rubber-table .rubber-game-total { background: transparent; font-weight: 950; font-size: 15px; border-left: 1px solid var(--line); border-radius: 0; }
.cup-rubber-unplayed { display: flex; gap: 12px; align-items: center; margin-top: 12px; padding: 14px 12px; color: var(--muted); border: 1px dashed var(--line); border-radius: 10px; font-size: 11px; }
.cup-rubber-unplayed strong { font-size: 10px; }

.bracket-viewport {
  height: var(--draw-height);
  min-height: 0;
  overflow: auto;
  overscroll-behavior-x: contain;
  scrollbar-color: var(--violet) #100a1b;
  scrollbar-width: thin;
  background:
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px),
    #100a1b;
  background-size: 220px 100%, 100% 38px, auto;
}
.bracket-viewport:focus-visible { outline: 2px solid var(--acid); outline-offset: -3px; }
.bracket-canvas {
  --bracket-height: 310px;
  width: max-content;
  min-width: max-content;
  margin-inline: auto;
  min-height: calc(var(--bracket-height) + 58px);
  display: flex;
  align-items: flex-start;
  gap: 38px;
  padding: 0 28px 34px 24px;
}
.draw-round { width: 260px; flex: 0 0 260px; position: relative; }
.draw-round.is-right .draw-round-header { flex-direction: row-reverse; text-align: right; }
.draw-round.is-final .draw-round-header strong { color: var(--acid); }
.draw-round.is-final .draw-match { border-color: rgba(217,255,88,.4); box-shadow: 0 0 32px rgba(134,88,255,.14); }
.draw-round-header {
  height: 58px;
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  background: linear-gradient(180deg, #100a1b 78%, transparent);
}
.draw-round-header div { display: grid; gap: 1px; }
.draw-round-header strong { font-size: 13px; letter-spacing: .08em; }
.draw-round-header small { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .09em; }
.round-status { padding: 4px 6px; color: #81758f; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; font-size: 9px; font-weight: 950; letter-spacing: .09em; }
.round-status.current { color: #170b29; border-color: var(--acid); background: var(--acid); }
.round-status.complete { color: var(--green); border-color: rgba(87,231,160,.3); background: rgba(87,231,160,.08); }
.draw-round-lane { display: flex; flex-direction: column; gap: var(--round-gap); padding-top: var(--round-offset); }
.draw-match {
  width: 260px;
  height: 74px;
  flex: 0 0 74px;
  position: relative;
  z-index: 2;
  overflow: visible;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(42,27,65,.95), rgba(20,12,32,.98));
  box-shadow: 0 8px 18px rgba(0,0,0,.16);
}
.draw-match.locked { border-style: dashed; background: rgba(255,255,255,.018); box-shadow: none; }
.draw-match.current { border-color: rgba(134,88,255,.48); }
.draw-match.is-active-match { z-index: 4; border-color: var(--acid); box-shadow: 0 0 0 1px rgba(217,255,88,.14), 0 10px 30px rgba(134,88,255,.28); }
.draw-match.is-active-match::before { content: "SELECTED"; position: absolute; z-index: 5; top: -8px; right: 8px; padding: 2px 5px; color: #170b29; border-radius: 4px; background: var(--acid); font-size: 9px; font-weight: 950; letter-spacing: .1em; }
.draw-match.has-score-detail { cursor: pointer; }
.draw-match.has-score-detail:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }
.bracket-entrant { height: 36px; display: grid; grid-template-columns: 20px minmax(0,1fr) 27px; grid-template-areas: "seed name score"; align-items: center; gap: 6px; padding: 0 7px; color: #b2a8be; border-bottom: 1px solid rgba(255,255,255,.07); }
.bracket-entrant:first-child { border-radius: 9px 9px 0 0; }
.bracket-entrant:nth-child(2) { border-radius: 0 0 9px 9px; }
.draw-round.is-right .bracket-entrant { grid-template-columns: 27px minmax(0,1fr) 20px; grid-template-areas: "score name seed"; }
.draw-round.is-right .entrant-name { flex-direction: row-reverse; text-align: right; }
.draw-round.is-right .draw-match.is-active-match::before { right: auto; left: 8px; }
.bracket-entrant:nth-child(2) { border-bottom: 0; }
.bracket-entrant.is-loser { color: #8e839a; }
.bracket-entrant.is-winner { color: var(--green); font-weight: 850; }
.bracket-entrant.is-user { color: #170b29; background: var(--acid); }
.bracket-entrant.is-user.is-loser { opacity: .72; }
.bracket-entrant.is-tbd { color: #665b73; }
.entrant-seed { grid-area: seed; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 5px; background: rgba(255,255,255,.07); font-size: 9px; font-weight: 900; }
.bracket-entrant.is-user .entrant-seed { background: rgba(23,11,41,.13); }
.entrant-name { grid-area: name; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 760; }
.flagged-entry { display: flex; align-items: center; gap: 7px; min-width: 0; }
.entry-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-flags { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; }
.entry-flags:empty { display: none; }
.country-flag { width: 20px; height: 15px; display: block; object-fit: cover; flex-shrink: 0; border-radius: 2px; box-shadow: 0 0 0 1px rgba(128,128,128,.3); }
.unknown-flag { display: grid; place-items: center; color: var(--muted); background: rgba(128,128,128,.15); font-size: 9px; }
.arena-topline .country-flag { width: 28px; height: 21px; }
.arena-topline .entry-label { white-space: normal; }
.entrant-state { grid-area: score; min-height: 25px; display: grid; place-items: center; border-radius: 5px; font-size: 10px; font-weight: 950; font-variant-numeric: tabular-nums; }
.entrant-state.is-score { background: rgba(255,255,255,.07); font-size: 15px; }
.is-winner .entrant-state.is-score { background: rgba(87,231,160,.12); }
.is-user .entrant-state.is-score { color: #170b29; background: rgba(23,11,41,.12); }
.draw-score-detail {
  width: min(340px, calc(100vw - 60px));
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 0;
  padding: 11px;
  color: var(--text);
  border: 1px solid rgba(217,255,88,.35);
  border-radius: 10px;
  background: rgba(14,8,24,.98);
  box-shadow: 0 18px 45px rgba(0,0,0,.55);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5px);
  transition: opacity .14s ease, transform .14s ease;
}
.draw-score-detail::before { content: ""; position: absolute; bottom: 100%; left: 28px; border: 6px solid transparent; border-bottom-color: rgba(217,255,88,.35); }
.draw-round.is-right .draw-score-detail { left: auto; right: 0; }
.draw-round.is-right .draw-score-detail::before { left: auto; right: 28px; }
.draw-match.score-above .draw-score-detail { top: auto; bottom: calc(100% + 8px); }
.draw-match.score-above .draw-score-detail::before { bottom: auto; top: 100%; border-bottom-color: transparent; border-top-color: rgba(217,255,88,.35); }
.draw-score-detail > small { display: block; margin-bottom: 8px; color: var(--acid); font-size: 9px; font-weight: 950; letter-spacing: .1em; }
.draw-score-table { display: grid; gap: 5px; }
.draw-score-row { display: grid; grid-template-columns: minmax(0,1fr) repeat(var(--game-count, 3), 29px); align-items: center; gap: 5px; color: #a99db5; }
.draw-score-heading { font-size: 8px; letter-spacing: .08em; color: var(--muted); }
.draw-score-heading > span:not(:first-child) { text-align: center; }
.draw-score-row.is-winner { color: var(--green); }
.draw-score-name { min-height: 32px; font-size: 11px; font-weight: 750; line-height: 1.4; }
.draw-score-name .entry-label { white-space: normal; }
.draw-score-row b { display: grid; height: 24px; place-items: center; border-radius: 5px; background: rgba(255,255,255,.065); font-size: 11px; }
.draw-score-row b.high-score { color: var(--text); background: rgba(87,231,160,.15); box-shadow: inset 0 -2px 0 rgba(87,231,160,.55); }
.draw-score-detail em { display: block; margin-top: 8px; color: #776b84; font-size: 9px; font-style: normal; text-align: right; }
.draw-match.has-score-detail:hover,
.draw-match.has-score-detail:focus-visible,
.draw-match.has-score-detail.score-open { z-index: 20; }
.draw-match.has-score-detail:hover .draw-score-detail,
.draw-match.has-score-detail:focus-visible .draw-score-detail,
.draw-match.has-score-detail.score-open .draw-score-detail { opacity: 1; transform: translateY(0); }
.draw-connector {
  --branch: calc((74px + var(--round-gap)) / 2);
  width: 18px;
  position: absolute;
  left: 100%;
  border-color: rgba(134,88,255,.38);
  border-style: solid;
  pointer-events: none;
}
.draw-connector.down { top: 50%; height: var(--branch); border-width: 1px 1px 0 0; border-radius: 0 7px 0 0; }
.draw-connector.up { bottom: 50%; height: var(--branch); border-width: 0 1px 1px 0; border-radius: 0 0 7px 0; }
.draw-connector::after { content: ""; width: 18px; position: absolute; right: -18px; border-top: 1px solid rgba(134,88,255,.38); }
.draw-connector.down::after { bottom: 0; }
.draw-connector.up::after { top: 0; }
.draw-connector.straight { width: 38px; top: 50%; height: 0; border-width: 1px 0 0; }
.draw-connector.straight::after { display: none; }
.draw-round.is-right .draw-connector { left: auto; right: 100%; transform: scaleX(-1); }
.draw-match.locked .draw-connector, .draw-round.locked .draw-connector { border-color: rgba(255,255,255,.1); }
.draw-match.locked .draw-connector::after, .draw-round.locked .draw-connector::after { border-color: rgba(255,255,255,.1); }


@media (max-width: 820px) {
  .team-modes { grid-template-columns: 1fr; }
  .individual-modes { grid-template-columns: repeat(3, 1fr); }
  .draft-layout { grid-template-columns: 1fr; }
  .squad-card { order: 2; }
  .pick-stage { order: 1; min-height: 570px; }
  .lineup-slots { grid-template-columns: repeat(5, 1fr); }
  .lineup-slot { min-width: 0; grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .slot-copy strong { max-width: 100%; }
  .slot-rating { display: none; }
  .arena { --draw-height: clamp(220px, calc(100dvh - 420px), 450px); }
  .arena-workspace { grid-template-columns: minmax(0,1fr); grid-template-areas: "match" "draw" "history"; gap: 12px; }
  .match-sidebar { display: contents; }
  .match-panel { grid-area: match; padding: 14px; display: grid; grid-template-columns: minmax(0,1fr) 170px; column-gap: 16px; align-items: center; }
  .match-intro { border: 0; padding: 0; }
  .match-intro p { display: inline; margin-left: 7px; font-size: 9px; }
  .match-intro h3 { margin-top: 5px; font-size: 18px; }
  .tie-expectation { margin-top: 5px; font-size: 11px; }
  .play-controls { margin-top: 0; grid-column: 2; grid-row: 1; }
  .scoreboard { grid-column: 1 / -1; margin: 10px 0 0; }
  .scoreboard strong { font-size: 28px; }
  .rubber-feed { grid-column: 1 / -1; max-height: 115px; margin-top: 10px; }
  .route-panel { grid-area: history; }
  .route { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

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

@media (max-width: 900px) {
  .country-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
  .cup-tie-heading { padding: 14px; }
  .cup-tie-summary { padding: 14px; }
  .cup-tie-matches { padding: 0 12px 14px; }
  .cup-rubber-table { padding: 9px; }
  .cup-rubber-table .draw-score-row { grid-template-columns: minmax(0,1fr) repeat(var(--game-count), 24px) 25px; gap: 4px; }
  .cup-rubber-table .draw-score-name { font-size: 10px; }
  .header-mode { font-size: 0; }
  .header-mode span { margin: 0; font-size: 9px; }
  .game-shell { width: min(100% - 20px, 1080px); }
  .draft-screen { padding-top: 30px; }
  .mode-screen { padding-top: 38px; }
  .mode-intro { margin-bottom: 32px; }
  .mode-intro h1 { font-size: 51px; }
  .mode-section-title small { display: none; }
  .individual-modes { grid-template-columns: repeat(2, 1fr); }
  .mode-card { min-height: 145px; }
  .draft-head { align-items: center; }
  .draft-head > div:first-child { min-width: 0; }
  .draft-head h1 { font-size: clamp(28px, 8vw, 39px); }
  .pick-counter { min-width: auto; }
  .pick-counter strong { font-size: 43px; }
  .pick-counter span { display: none; }
  .discipline-banner { grid-template-columns: 42px 1fr; padding: 0 15px; }
  .draft-progress { grid-column: 1 / -1; display: none; }
  .spin-panel, .ready-panel { min-height: 480px; padding: 28px 18px; }
  .choice-panel { padding: 17px; }
  .choice-heading { align-items: flex-start; }
  .country-panel { padding: 18px; }
  .country-heading { align-items: flex-start; }
  .country-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .country-card { min-height: 190px; }
  .country-code { margin-bottom: 18px; }
  .choice-grid { grid-template-columns: 1fr; }
  .player-card { min-height: 0; display: grid; grid-template-columns: 112px minmax(0, 1fr); }
  .card-top { min-width: 0; min-height: 174px; padding: 18px 10px; }
  .card-rating { min-width: 0; width: 100%; padding: 9px 5px 10px 10px; white-space: normal; }
  .card-rating span { line-height: 1.5; }
  .card-body { min-width: 0; }
  .card-rating strong { font-size: 36px; }
  .card-body h3 { font-size: 18px; }
  .lineup-slots { grid-template-columns: 1fr; }
  .lineup-slot { grid-template-columns: 40px minmax(0,1fr) auto; justify-items: stretch; text-align: left; }
  .slot-rating { display: block; }
  .standings-grid, .bracket { grid-template-columns: 1fr; }
  .game-shell:has(.arena:not([hidden])) { width: calc(100% - 20px); }
  .arena { padding-top: 14px; }
  .arena-topline { margin-bottom: 12px; }
  .arena-topline h2 { font-size: 20px; }
  .arena-topline .overline { font-size: 9px; }
  .match-panel { grid-template-columns: minmax(0,1fr) 123px; column-gap: 10px; padding: 12px; }
  .play-controls .action-button { font-size: 10px; padding: 10px; min-height: 50px; }
  .play-controls .action-button b { font-size: 18px; }
  .draw-heading { padding: 12px 14px; gap: 8px; min-height: 60px; }
  .draw-heading h3 { font-size: 18px; }
  .draw-heading .overline { font-size: 9px; }
  .draw-legend { justify-content: flex-start; }
  .draw-legend span:not(:first-child) { display: none; }
  .draw-toolbar { padding: 7px 10px; gap: 3px; flex-wrap: wrap; }
  .draw-tabs button, .focus-draw-button { font-size: 9px; padding: 7px; }
  .live-groups { grid-template-columns: 1fr; padding: 0 14px; }
  .section-kicker { padding-inline: 14px; }
  .bracket-kicker { padding: 10px 14px; }
  .bracket-kicker small { display: none; }
  .bracket-canvas { padding-left: 14px; }
  .rubber-result { grid-template-columns: 30px 28px minmax(0,1fr); }
  .rubber-score { grid-column: 1 / -1; }
  .play-controls { align-items: stretch; flex-direction: column; }
  .result-actions { align-items: stretch; flex-direction: column; }
  .result-actions .action-button, .result-actions .secondary-button { width: 100%; }
  .action-button { width: 100%; }
  .data-heading { align-items: flex-start; flex-direction: column; }
  .route { grid-template-columns: 1fr; }
  footer { flex-direction: column; }
}


/* Expanded draw uses the available viewport, including mobile browser chrome. */
.focus-draw-button[aria-pressed="true"] { color: var(--acid); background: rgba(217,255,88,.09); }
body:has(.draw-panel.is-expanded) { overflow: hidden; }
.draw-panel.is-expanded { position: fixed; inset: 8px 8px auto; height: calc(100dvh - 16px); z-index: 50; display: flex; flex-direction: column; border-radius: 14px; background-color: #110a1c; }
.draw-panel.is-expanded .draw-heading, .draw-panel.is-expanded .draw-toolbar, .draw-panel.is-expanded .bracket-kicker { flex-shrink: 0; }
.draw-panel.is-expanded #knockoutDraw { display: flex; flex: 1; min-height: 0; flex-direction: column; }
.draw-panel.is-expanded .bracket-viewport { height: auto; flex: 1; }
.draw-panel.is-expanded .cup-group-stage { height: auto; flex: 1; min-height: 0; }
@media (max-width: 600px) {
  .draw-panel.is-expanded { inset: 0; height: 100dvh; border-radius: 0; }
  .draw-toolbar { flex-wrap: wrap; }
  .draw-navigation { gap: 2px; }
}

.country-option-note { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; }

.selection-options { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
@media (max-width: 420px) { .selection-options { grid-template-columns: 1fr; } }

.selection-options .mode-card { min-height: 200px; padding: 26px; }
.selection-options .mode-card strong { font-size: clamp(30px, 4vw, 42px); line-height: 1.15; }
.selection-options .mode-card small { margin-top: 12px; font-size: 16px; line-height: 1.5; }
.selection-options .mode-card b { font-size: 26px; }

.circuit-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.circuit-options .mode-card { min-height: 115px; }
.circuit-options .mode-card[aria-pressed="true"] { border-color: var(--acid); background: #292b1d; }
.circuit-options .mode-card strong { font-size: clamp(20px, 2.5vw, 28px); }
.circuit-options .mode-card small { font-size: 14px; }
.world-tour-panel { padding: 16px 20px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.cup-location { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; line-height: 1.5; margin: 12px 0 0; }
.cup-location .entry-flags { flex-shrink: 0; }
.result-hero .cup-location { justify-content: center; }
.tour-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tour-heading h3 { font-size: clamp(20px, 2vw, 28px); margin: 0; }
.tour-heading p { margin: 7px 0; }
#tourLocation, .tour-location { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
#tourPosition, .tour-position { color: var(--acid); font-size: 14px; line-height: 1.7; text-align: right; }
.season-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.season-workspace:has(.season-navigation:not([hidden])) { grid-template-columns: 190px minmax(0, 1fr); }
.season-content, #seasonTournament { min-width: 0; }
.season-navigation { position: sticky; top: 16px; display: grid; gap: 8px; padding: 16px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.season-navigation > p { margin: 0 10px 8px; color: var(--muted); font-size: 10px; }
.season-navigation button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 66px; padding: 12px 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--muted); text-align: left; font-size: 14px; font-weight: 750; }
.season-navigation button:hover { background: var(--surface-2); color: var(--text); }
.season-navigation button[aria-current="page"] { color: var(--acid); border-color: rgba(217,255,88,.25); background: rgba(217,255,88,.07); }
.season-nav-icon { flex-shrink: 0; width: 22px; font-size: 24px; text-align: center; }
.season-navigation small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.4; }
.season-navigation button:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }
.season-view { min-width: 0; padding: clamp(14px, 2vw, 24px); border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.season-view-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.season-view-heading .overline { margin: 0 0 6px; }
.season-view-heading h3 { margin: 0; font-size: clamp(24px, 3vw, 32px); letter-spacing: -.03em; }
.season-view-heading .secondary-button { min-height: 44px; padding: 10px 12px; font-size: 11px; }
.season-content > [tabindex="-1"] { scroll-margin-top: 16px; }
.season-content > [tabindex="-1"]:focus { outline: none; }
@media (max-width: 1100px) {
  .season-workspace:has(.season-navigation:not([hidden])) { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .season-navigation { top: 0; z-index: 30; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
  .season-navigation > p, .season-navigation small { display: none; }
  .season-navigation button { justify-content: center; gap: 8px; min-height: 48px; padding: 10px 4px; font-size: 13px; }
  .season-nav-icon { width: 18px; font-size: 20px; }
  .season-content > [tabindex="-1"] { scroll-margin-top: 76px; }
}
@media (max-width: 380px) {
  .season-nav-icon { display: none; }
}
.season-filters { display: flex; gap: 6px; flex-wrap: wrap; border-top: 1px solid var(--line); padding: 16px 0 4px; }
.season-filter { cursor: pointer; font: inherit; color: var(--muted); background: transparent; border: 1px solid transparent; padding: 8px 12px; border-radius: 8px; font-size: 12px; font-weight: 650; }
.season-filter[aria-pressed="true"] { color: var(--acid); border-color: rgba(217,255,88,.3); background: rgba(217,255,88,.07); }
.season-filter:hover { background: var(--surface-2); }
.tour-calendar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 12px; padding: 0 5px 2px 0; list-style: none; max-height: 480px; overflow: auto; scrollbar-color: var(--surface-3) transparent; }
.tour-calendar li { display: grid; align-content: start; gap: 10px; padding: 17px; border: 1px solid var(--line); border-radius: 12px; font-size: 13px; background: var(--surface); }
.tour-calendar .is-current { border-color: rgba(217,255,88,.65); background: linear-gradient(145deg, rgba(217,255,88,.07), var(--surface) 65%); }
.tour-calendar .is-current .calendar-event-status { color: var(--acid); }
.tour-calendar .is-inactive { opacity: .6; }
.tour-calendar strong { color: var(--text); font-size: 16px; line-height: 1.4; }
.calendar-event-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.calendar-date { font-variant-numeric: tabular-nums; font-weight: 600; }
.tour-tier-badge { color: #cbb8ff; background: rgba(134,88,255,.12); border: 1px solid rgba(134,88,255,.2); border-radius: 5px; font-size: 10px; font-weight: 750; padding: 4px 7px; white-space: nowrap; }
.calendar-location { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.calendar-location .entry-flags { flex-shrink: 0; }
.calendar-event-status { padding-top: 10px; border-top: 1px solid var(--line); }
.calendar-empty { grid-column: 1 / -1; color: var(--muted); }
.tour-calendar small, .tour-note { color: var(--muted); font-size: 12px; line-height: 1.6; }
.tour-standings { width: 100%; min-width: 0; max-height: min(70dvh, 800px); overflow: auto; container-type: inline-size; border: 1px solid var(--line); border-radius: 10px; scrollbar-color: var(--surface-3) transparent; }
.tour-standings table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.tour-standings th, .tour-standings td { padding: 13px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.tour-standings th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); color: var(--muted); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.tour-standings th:first-child { width: 112px; }
.tour-standings th:nth-child(3) { width: 106px; }
.tour-standings th:nth-child(n+4) { width: 76px; }
.tour-standings .entry-label { white-space: normal; overflow-wrap: anywhere; }
.standings-mobile-sort, .standings-column-label { display: none; }
.standings-sort { display: flex; align-items: center; justify-content: space-between; gap: 5px; width: 100%; min-height: 36px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-transform: inherit; text-align: left; }
.standings-sort:hover, th[aria-sort="ascending"] .standings-sort, th[aria-sort="descending"] .standings-sort { color: var(--acid); }
.standings-sort:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; border-radius: 3px; }
.sort-arrow { flex-shrink: 0; font-size: 13px; }
.standings-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; margin: 10px 0 16px; }
.standings-toolbar .secondary-button { min-height: 40px; padding: 8px 12px; font-size: 11px; }
.tour-standings tr:hover { background-color: rgba(255,255,255,.04); }
.tour-standings td:nth-child(2) { min-width: 0; }
.tour-standings .standings-rank { font-size: 17px; font-weight: 800; white-space: nowrap; }
.standings-points { font-weight: 750; white-space: nowrap; }
.standings-you { display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .06em; margin-left: 8px; color: var(--acid); }
.rank-movement { display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 750; margin-left: 9px; padding: 3px 6px; border-radius: 5px; vertical-align: middle; white-space: nowrap; }
.rank-up { color: var(--green); background: rgba(87,231,160,.1); }
.rank-down { color: var(--red); background: rgba(255,102,133,.1); }
.rank-new { color: #cbb8ff; background: rgba(134,88,255,.13); font-size: 9px; }
.rank-same { color: var(--muted); }
.standings-explainer { display: flex; flex-wrap: wrap; column-gap: 24px; justify-content: space-between; }
.ranking-movement-note { font-size: 11px; }
.tour-standings .is-selected { color: var(--acid); }
.tour-result-rankings { margin: 24px auto; padding: clamp(14px, 2vw, 24px); width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-align: left; }
.result-hero:has(.tour-result-rankings:not([hidden])) { padding-inline: clamp(12px, 3vw, 36px); }
.standings-dialog { width: calc(100vw - 32px); max-width: 1800px; height: calc(100dvh - 40px); max-height: calc(100dvh - 40px); }
.standings-dialog[open] { display: flex; flex-direction: column; }
.standings-dialog > header { flex-shrink: 0; }
.standings-dialog-note { margin: 0; padding: 0 24px 16px; }
.standings-dialog .tour-standings { flex: 1; min-height: 0; width: auto; max-height: none; margin: 0 20px 20px; }
.tour-result-rankings h3 { margin: 0; font-size: 24px; }
.tour-finals-result { margin: 26px auto; padding: clamp(18px, 3vw, 28px); border: 1px solid rgba(217,255,88,.35); border-radius: 16px; background: linear-gradient(130deg, rgba(217,255,88,.08), var(--surface)); text-align: left; overflow-wrap: anywhere; }
.tour-finals-result h3 { margin: 0 0 20px; font-size: clamp(22px, 3vw, 30px); letter-spacing: -.025em; }
.tour-finals-champion { display: flex; align-items: center; gap: 10px; color: var(--acid); font-size: clamp(19px, 3vw, 27px); line-height: 1.4; }
.tour-finals-champion .entry-label { white-space: normal; overflow-wrap: anywhere; }
.tour-finals-score { font-size: 14px; line-height: 1.7; color: var(--text); }
.tour-finals-result .secondary-button { margin-top: 8px; white-space: normal; }
.tour-finals-groups.live-groups { padding: 0; margin: 20px 0; }
.tour-finals-groups .live-group-card { min-width: 0; overflow-x: auto; }
#tourResultsDialog:has(.tour-finals-groups) { width: min(1040px, calc(100vw - 28px)); }
.tour-finals-groups .finals-group-table { table-layout: fixed; }
.tour-finals-groups .finals-group-table th:first-child { width: 28px; }
.tour-finals-groups .finals-group-table th:nth-child(n+3) { width: 40px; white-space: nowrap; }
.tour-finals-groups .finals-group-table th, .tour-finals-groups .finals-group-table td { padding: 10px 5px; }
.tour-finals-groups .entry-label { white-space: normal; overflow-wrap: anywhere; }
.tour-result-rankings .tour-result-position { color: var(--acid); font-weight: 700; padding: 14px 16px; border: 1px solid rgba(217,255,88,.2); border-radius: 10px; background: rgba(217,255,88,.045); line-height: 1.8; }
.tour-result-rankings .tour-standings .is-selected { background: rgba(217, 255, 88, 0.08); }
.tour-standings tr.is-finals-qualifier { background: rgba(104, 225, 161, 0.10); }
.tour-standings .is-finals-qualifier td:first-child { box-shadow: inset 3px 0 #68e1a1; }
.finals-place { white-space: nowrap; }
.finals-badge { display: inline-block; padding: 3px 7px; border: 1px solid rgba(104, 225, 161, 0.5); border-radius: 5px; color: #9ef2c3; font-weight: 800; font-size: 11px; }
/* Compact leaderboard rows follow the panel width, including expanded standings. */
@container (max-width: 740px) {
  .standings-mobile-sort { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
  .standings-mobile-sort label { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; color: var(--muted); font-size: 12px; white-space: nowrap; }
  .standings-mobile-sort select { flex: 1; width: 0; min-width: 0; min-height: 44px; padding: 8px 10px; border-radius: 8px; font-size: 16px; }
  .standings-mobile-sort button { flex: 0 0 44px; height: 44px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--acid); font-size: 22px; }
  .standings-mobile-sort :is(select, button):focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }
  .tour-standings table, .tour-standings tbody { display: block; }
  /* Retain column headers for assistive technology without hidden tab stops. */
  .tour-standings thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tour-standings .standings-sort { display: none; }
  .standings-column-label { display: inline; }
  .tour-standings tbody tr { display: grid; grid-template-columns: 36px repeat(8, minmax(0, 1fr)) repeat(3, minmax(26px, 1fr)); align-items: center; row-gap: 12px; padding: 14px 12px 12px; border-bottom: 1px solid var(--line); }
  .tour-standings tbody tr:last-child { border-bottom: 0; }
  .tour-standings td { display: block; min-width: 0; padding: 0; border: 0; font-size: 14px; }
  .tour-standings .standings-rank { grid-column: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 22px; line-height: 1.2; }
  .tour-standings .rank-movement { margin: 0; padding: 2px 3px; font-size: 10px; }
  .tour-standings .standings-entry { grid-column: 2 / 10; padding: 0 10px 0 2px; font-size: 14px; font-weight: 700; line-height: 1.45; }
  .tour-standings .flagged-entry { align-items: flex-start; }
  .tour-standings .entry-flags { flex-direction: column; gap: 4px; margin-top: 3px; }
  .tour-standings .standings-you { margin: 5px 0 0 27px; padding: 2px 5px; border-radius: 4px; background: rgba(217,255,88,.12); font-size: 10px; letter-spacing: .06em; }
  .tour-standings .standings-points { grid-column: 10 / -1; align-self: center; text-align: right; font-size: 16px; letter-spacing: -.04em; }
  .tour-standings .standings-points::after { content: 'PTS'; display: block; margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: .08em; }
  .tour-standings td:nth-child(n+4) { grid-column: span 3; align-self: stretch; padding: 9px 4px 0; border-top: 1px solid var(--line); text-align: center; font-weight: 650; }
  .tour-standings td:nth-child(n+4)::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
  .tour-standings .finals-badge { padding: 1px 6px; font-size: 11px; }
  .tour-standings tr.is-finals-qualifier { background: rgba(104,225,161,.035); }
  .tour-standings .is-finals-qualifier td:first-child { box-shadow: none; }
  .tour-standings tbody tr.is-selected { color: var(--text); background: rgba(217,255,88,.07); box-shadow: inset 3px 0 var(--acid); }
  .tour-standings .is-selected :is(.standings-rank, .standings-entry, .standings-points) { color: var(--acid); }
}
@container (max-width: 300px) {
  .tour-standings tbody tr { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 8px; }
  .tour-standings .standings-rank { grid-column: 1 / 3; grid-row: 1 / 3; align-self: start; }
  .tour-standings .standings-entry { grid-column: 3 / -1; grid-row: 1; padding-right: 0; }
  .tour-standings .standings-points { grid-column: 3 / -1; grid-row: 2; display: flex; align-items: baseline; gap: 6px; padding-left: 2px; text-align: left; }
  .tour-standings .standings-points::after { margin: 0; }
}
.finals-legend::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; background: #68e1a1; }
.finals-group-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.finals-group-table th, .finals-group-table td { padding: 10px 8px; text-align: left; border-top: 1px solid var(--line); }
.finals-group-table th { font-size: 11px; color: var(--muted); }
.finals-group-table td:nth-child(n+3) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.finals-group-table .is-user { color: var(--acid); }
.finals-group-table .qualifier td:first-child { font-weight: 900; color: var(--acid); }
.finals-group-match { display: grid; gap: 4px; padding: 10px; border-top: 1px solid var(--line); font-size: 12px; }
.finals-group-match small { color: var(--muted); }
.tour-next { display: grid; gap: 12px; max-width: 900px; margin: 24px auto; padding: 24px; text-align: left; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(150deg, rgba(134,88,255,.1), var(--surface) 55%); }
.tour-next-preview { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--muted); }
.entry-status { display: inline-block; font-size: 10px; font-weight: 750; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 4px 7px; }
.entry-status.is-required { color: #f3cb82; border-color: rgba(243,203,130,.3); background: rgba(243,203,130,.055); }
.tour-result-button { justify-self: start; padding: 7px 10px; font-size: 11px; }
.tour-current-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.tour-current-choice select { flex: 1; min-width: 180px; }
.tour-fatigue { display: grid; gap: 8px; padding: 12px 14px; margin: 12px 0; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); }
.tour-fatigue strong { font-size: 13px; }
.tour-fatigue small { color: var(--muted); font-size: 12px; line-height: 1.6; }
.fatigue-meter { width: 100%; height: 10px; accent-color: var(--acid); }
.fatigue-meter::-webkit-meter-bar { background: #32283f; border: 0; }
.fatigue-meter::-webkit-meter-optimum-value { background: #9ee2b0; }
.fatigue-meter::-webkit-meter-suboptimum-value { background: #e5ca79; }
.fatigue-meter::-webkit-meter-even-less-good-value { background: #ef948d; }
.tour-fatigue[data-level="high"] strong, .tour-fatigue[data-level="exhausted"] strong { color: #efb1a2; }
.tour-recovery { display: grid; gap: 10px; padding: 14px; margin: 12px 0; border: 1px solid #639eaa; border-radius: 10px; background: rgba(93,182,195,.08); }
.tour-recovery[hidden] { display: none; }
.tour-recovery strong { font-size: 14px; }
.tour-recovery p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.tour-recovery button { min-height: 44px; white-space: normal; }
.tour-recovery .recovery-status { font-size: 12px; }
.injury-notice { display: block; color: #efb1a2; font-size: 12px; line-height: 1.6; }
.rally-dialog { width: min(740px, calc(100vw - 24px)); height: min(820px, calc(100dvh - 24px)); max-height: calc(100dvh - 24px); overflow: hidden; border-color: rgba(173,145,230,.25); border-radius: 22px; background: linear-gradient(155deg, #1c142b, #110c1c 65%); box-shadow: 0 32px 120px rgba(0,0,0,.7); }
.rally-dialog[open] { display: flex; flex-direction: column; }
.rally-dialog > header { display: flex; flex-shrink: 0; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.015); }
.rally-dialog > header .overline { margin: 0 0 6px; color: #b3a4c9; font-size: 10px; letter-spacing: .18em; }
.rally-dialog h3 { margin: 0; font-size: 21px; letter-spacing: -.025em; }
.rally-header-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.rally-status { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 92px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: #c2b3d7; background: rgba(255,255,255,.035); font-size: 11px; font-weight: 650; }
.rally-status > span { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.rally-status.is-playing { color: var(--acid); border-color: rgba(217,255,88,.18); background: rgba(217,255,88,.055); }
.rally-status.is-complete { color: #9be2bd; border-color: rgba(155,226,189,.2); background: rgba(155,226,189,.05); }
.rally-dialog .icon-button { min-width: 44px; min-height: 44px; font-size: 24px; color: var(--muted); border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); cursor: pointer; }
.rally-dialog .icon-button:hover { color: var(--text); background: rgba(255,255,255,.07); }
.rally-content { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 16px; padding: 20px 24px; }
.rally-main { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
.rally-final-score { flex-shrink: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(120deg, #d9ff5809, #ffffff03); }
.rally-final-heading { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
.rally-final-heading > strong { text-transform: uppercase; letter-spacing: .06em; }
.rally-final-players { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px; margin: 12px 0; }
.rally-final-players > div { display: grid; gap: 4px; min-width: 0; }
.rally-final-players > div:last-child { text-align: right; }
.rally-final-players > div > span { color: var(--muted); font-size: 12px; }
.rally-final-players > div > strong, .rally-final-players .rally-player-heading > strong { font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.rally-player-heading { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.rally-player-heading.is-opponent { justify-content: flex-end; }
.rally-player-heading.is-centered { justify-content: center; min-height: 40px; }
.rally-final-games { display: flex; grid-column: 1 / -1; grid-row: 2; align-items: center; justify-content: center; gap: 12px; font-size: 32px; line-height: 1; font-variant-numeric: tabular-nums; }
.rally-final-games b { font-weight: 650; }
.rally-final-games b:first-child { color: var(--acid); }
.rally-final-games > span { color: var(--muted); font-size: 20px; }
.rally-final-score .game-score-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; max-width: 340px; margin: 0 auto; }
.rally-final-score .game-score { min-width: 0; display: grid; align-items: center; gap: 5px; padding: 6px; border-radius: 6px; }
.rally-final-score .game-number { margin: 0; font-size: 12px; }
.rally-final-score .game-points { font-size: 16px; }
.rally-main, .rally-history ol { scrollbar-color: #4c3d62 transparent; scrollbar-width: thin; }
.rally-fatigue { margin-bottom: 16px; }
.rally-actions { flex-shrink: 0; padding-top: 16px; border-top: 1px solid var(--line); }
.rally-main:focus-visible, .rally-history ol:focus-visible { outline: 2px solid var(--acid); outline-offset: -2px; }
.rally-court { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: linear-gradient(125deg, rgba(217,255,88,.035), transparent 45%), rgba(255,255,255,.015); }
.rally-meta { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.rally-meta #rallyStage { color: #ded6e9; }
.rally-meta #rallyStage > span { margin: 0 8px; color: #6d5d83; }
.rally-scoreboard { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; padding: 20px 0 16px; text-align: center; }
.rally-scoreboard > .rally-side { display: grid; grid-template-rows: auto 1fr auto; gap: 10px; min-width: 0; padding: 0 24px; }
.rally-side + .rally-divider + .rally-side { border-left: 1px solid var(--line); }
.rally-side-label { color: #b4a6c8; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.is-player .rally-side-label { color: var(--acid); }
.rally-player-name { display: flex; align-items: center; justify-content: center; min-height: 40px; font-size: 14px; font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; }
.rally-scoreboard strong { font-size: clamp(54px, 11vw, 76px); font-weight: 650; letter-spacing: -.06em; line-height: 1; font-variant-numeric: tabular-nums; color: #f1ebfa; }
.rally-side.is-player strong { color: var(--acid); text-shadow: 0 0 36px rgba(217,255,88,.1); }
.rally-scoreboard small { color: var(--muted); font-size: 11px; }
.rally-divider { position: absolute; left: 50%; top: 60%; transform: translate(-50%,-50%); padding: 5px; background: #1b1526; color: #746589; font-size: 22px; }
.rally-games { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 9px 12px; border-top: 1px solid var(--line); background: rgba(0,0,0,.1); }
.rally-games .game-score { display: flex; align-items: center; gap: 9px; padding: 4px 10px; border-radius: 6px; }
.rally-games .game-number { margin: 0; font-size: 10px; }
.rally-games-note { color: #ac9bbe; font-size: 11px; }
.rally-commentary-card { margin-top: 16px; padding: 17px 18px; border: 1px solid rgba(167,136,229,.19); border-radius: 14px; background: linear-gradient(110deg, rgba(134,88,255,.10), rgba(134,88,255,.035)); }
.rally-commentary-label { display: flex; align-items: center; gap: 8px; color: #c7aff3; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rally-commentary-label svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.rally-commentary { margin: 10px 0 0; color: #ede6f5; font-size: 16px; line-height: 1.6; }
.rally-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-auto-rows: 48px; gap: 12px; }
.rally-after-match { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-auto-rows: 48px; gap: 12px; }
.rally-actions .action-button, .rally-actions .secondary-button { display: inline-flex; align-items: center; width: 100%; min-width: 0; min-height: 48px; justify-content: center; gap: 8px; padding: 8px 12px; border-radius: 11px; font-size: 11px; letter-spacing: .04em; }
.rally-after-match .action-button, .rally-after-match .secondary-button { font-size: 14px; letter-spacing: 0; }
.rally-actions .action-button { box-shadow: 0 4px 16px rgba(217,255,88,.08); }
.rally-actions .secondary-button { background: rgba(255,255,255,.035); }
.rally-actions svg { width: 16px; height: 16px; flex-shrink: 0; fill: currentColor; }
.rally-actions .secondary-button svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.rally-actions .action-button:hover:not(:disabled) { transform: none; }
.rally-controls label { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; padding-left: 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(0,0,0,.1); font-size: 12px; color: var(--muted); }
.rally-controls select { width: auto; min-height: 44px; padding: 8px; color: var(--text); background: transparent; border: 0; border-radius: 8px; }
.rally-controls select:focus-visible, .rally-history summary:focus-visible { outline: 2px solid var(--acid); outline-offset: -2px; }
.rally-hint { margin: 14px 8px 0; color: #a89bb8; font-size: 11px; line-height: 1.6; text-align: center; }
.rally-history { margin-top: 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.015); overflow: hidden; }
.rally-history summary { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 14px 16px; list-style: none; cursor: pointer; font-size: 16px; font-weight: 650; color: #e2d9ed; }
.rally-history summary::-webkit-details-marker { display: none; }
.rally-history summary:hover { background: rgba(255,255,255,.025); }
.rally-log-count { margin-left: auto; padding: 3px 8px; border-radius: 6px; background: #ffffff06; color: #bbaeC9; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.rally-log-chevron { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: #b4a0ce; stroke-width: 1.5; }
.rally-history[open] .rally-log-chevron { transform: rotate(180deg); }
.rally-history[open] summary { border-bottom: 1px solid var(--line); }
.rally-history ol { max-height: min(380px, 45vh); overflow-y: auto; scrollbar-gutter: stable; margin: 0; padding: 12px; list-style: none; }
.rally-history .rally-log-entry { margin: 0 0 10px; padding: 14px 16px; border: 1px solid #ffffff0d; border-left: 3px solid #756383; border-radius: 10px; background: #ffffff03; color: #e5daef; font-size: 16px; line-height: 1.55; }
.rally-history .rally-log-entry:last-child { margin-bottom: 0; }
.rally-history .rally-log-entry.is-own-point { border-left-color: var(--acid); }
.rally-log-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.rally-log-filters button { min-height: 40px; padding: 6px 12px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; }
.rally-log-filters button[aria-pressed=true] { color: var(--text); background: #ffffff09; border-color: var(--line); }
.rally-log-filters button:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }
.rally-score-order { margin-left: auto; color: var(--muted); font-size: 12px; }
.rally-entry-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 14px; }
.rally-entry-score { display: flex; align-items: center; gap: 8px; font-size: 18px; font-variant-numeric: tabular-nums; }
.rally-entry-score b { font-weight: 600; color: var(--muted); }
.rally-entry-score .point-winner { color: var(--text); }
.is-own-point .rally-entry-score .point-winner { color: var(--acid); }
.rally-entry-labels { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; font-size: 12px; }
.rally-point-winner { font-weight: 650; color: var(--muted); }
.is-own-point .rally-point-winner { color: var(--acid); }
.rally-moment { padding: 1px 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--text); }
.rally-entry-commentary { margin: 8px 0 0; overflow-wrap: anywhere; }
.rally-commentary.is-affected, .rally-entry-commentary.is-affected { color: #ffb66c; }
.rally-log-empty { margin: 0; padding: 16px; color: var(--muted); font-size: 14px; }
@media (max-width: 480px) {
  .rally-content { padding: 14px; gap: 12px; }
  .rally-header-actions { gap: 8px; }
  .rally-status { min-width: 80px; padding: 6px 8px; font-size: 10px; }
  .rally-meta { padding: 10px 12px; gap: 8px; }
  .rally-meta #rallyStage > span { margin: 0 3px; }
  .rally-scoreboard > .rally-side { padding: 0 12px; gap: 8px; }
  .rally-player-name { font-size: 13px; }
  .rally-commentary-card { padding: 14px; }
  .rally-actions .secondary-button { gap: 5px; padding: 8px; }
  .rally-actions .secondary-button svg { display: none; }
}
.tour-archive-content { padding: 0 20px 20px; }
.tour-archive-round { border-top: 1px solid var(--line); padding: 12px 0; }
.tour-archive-round summary { cursor: pointer; color: var(--acid); }
.tour-archive-match { display: grid; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.tour-archive-match small { color: var(--muted); }
@media (max-width: 600px) { .circuit-options { grid-template-columns: 1fr; } .tour-heading { align-items: flex-start; flex-direction: column; gap: 4px; } .world-tour-panel { padding: 14px; } }
@media (max-width: 600px) {
  #tourPosition, .tour-position { text-align: left; }
  .season-filter { padding: 7px 8px; font-size: 11px; }
  .tour-next, .tour-result-rankings { padding: 14px; }
  .tour-next .action-button, .tour-next .secondary-button { white-space: normal; }
}

.arena:has(#worldTourPanel:not([hidden])) { --draw-height: max(240px, calc(100dvh - 490px)); }

/* On phones, give each round the panel's full width and keep scores in flow. */
.is-round-view .bracket-viewport { height: clamp(340px, 62dvh, 620px); }
.is-round-view .bracket-canvas { display: block; width: 100%; min-width: 0; min-height: 0; padding: 0 14px 24px; }
.draw-round-navigation { position: sticky; top: 0; z-index: 25; display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; align-items: center; gap: 12px; padding: 14px 0 12px; background: #100a1b; border-bottom: 1px solid var(--line); }
.draw-round-navigation button { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: rgba(255,255,255,.045); font-size: 22px; }
.draw-round-navigation button:disabled { opacity: .3; cursor: default; }
.draw-round-navigation label { min-width: 0; display: grid; gap: 4px; }
.draw-round-navigation label > span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.draw-round-navigation select { width: 100%; min-width: 0; min-height: 44px; padding: 8px; font-size: 16px; font-weight: 800; }
.draw-round-navigation :is(button, select):focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }
.is-round-view .draw-round { width: 100%; }
.is-round-view .draw-round-header { position: static; height: 52px; background: none; }
.is-round-view .draw-round-lane { gap: 16px; padding-top: 4px; }
.is-round-view .draw-match { width: 100%; height: auto; flex: none; }
.is-round-view .bracket-entrant { height: auto; min-height: 54px; grid-template-columns: 22px minmax(0,1fr) 30px; gap: 8px; padding: 10px; }
.is-round-view .entrant-name { font-size: 14px; line-height: 1.5; }
.is-round-view .entrant-name .entry-label { white-space: normal; overflow-wrap: anywhere; }
.is-round-view .entrant-state { font-size: 14px; }
.is-round-view .entrant-state.is-score { font-size: 18px; }
.is-round-view .draw-score-detail { position: static; width: 100%; padding: 14px 10px; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; opacity: 1; transform: none; box-shadow: none; }
.is-round-view .draw-score-detail::before { display: none; }
.is-round-view .draw-score-name .entry-label { overflow-wrap: anywhere; }
.is-round-view .tie-detail-hint { position: static; display: block; padding: 4px 10px 10px; text-align: right; }

/* Keep phone controls comfortable without shrinking the information to fit. */
@media (max-width: 820px), (pointer: coarse) {
  .back-button, .text-button, .reroll-button, .nation-button,
  .draw-tabs button, .focus-draw-button, .season-filter, .standings-sort,
  .standings-toolbar .secondary-button, .tour-result-button {
    min-height: 44px;
    min-width: 44px;
    font-size: 14px;
  }
  .back-button { padding: 10px 4px; margin-bottom: 8px; }
  .icon-button, .slot-order-button { width: 44px; height: 44px; flex-shrink: 0; }
  .slot-order-button { font-size: 18px; }
  .slot-order-controls { gap: 8px; }
  .route-panel summary, .group-tie-results summary, .rally-history summary { min-height: 44px; padding-block: 12px; font-size: 14px; }
  .site-footer nav a, .home-guide-links a, .site-play-link { display: inline-flex; align-items: center; min-height: 44px; }
  .article-jump-links a { min-height: 44px; display: inline-flex; align-items: center; }
}

@media (max-width: 820px) {
  .lineup-slots { grid-template-columns: 1fr; }
  .lineup-slot { grid-template-columns: 40px minmax(0,1fr) auto; justify-items: stretch; text-align: left; }
  .lineup-slot.reorderable { grid-template-columns: 40px minmax(0,1fr); }
  .lineup-slot.reorderable .slot-actions { grid-column: 2 / -1; justify-content: space-between; }
  .slot-drag-handle { display: none; }
  .slot-copy strong { white-space: normal; overflow-wrap: anywhere; }
  .slot-rating { display: block; }
  .pick-stage { min-height: 0; scroll-margin-top: 12px; }
  .spin-panel, .ready-panel { min-height: 300px; padding: 24px 16px; }
  .shuttle-orbit { width: 72px; height: 72px; margin-bottom: 18px; }
  .draw-toolbar, .draw-navigation, .draw-tabs { gap: 6px; flex-wrap: wrap; }
  .draw-tabs button, .focus-draw-button { padding: 10px; letter-spacing: 0; }
  .draw-toolbar { padding: 12px 14px; gap: 12px; }
  .draw-navigation { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); width: 100%; gap: 8px; }
  .draw-navigation button { border-color: var(--line); }
  .draw-panel.is-expanded { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .cup-tie-dialog > header { position: sticky; top: 0; z-index: 2; background: #1c122e; }
}

@media (max-width: 650px) {
  .game-shell:has(.draft-screen:not([hidden])) { width: calc(100% - 20px); }
  .mode-intro h1 { font-size: clamp(36px, 10vw, 51px); overflow-wrap: anywhere; }
  .action-button, .secondary-button { min-width: 0; max-width: 100%; font-size: 14px; letter-spacing: .02em; }
  .secondary-button { padding: 10px 14px; }
  select, input, .rally-controls select { font-size: 16px; }
  .mode-card small, .country-hint, .choice-hint, .lineup-order-hint,
  .slot-copy strong, .rubber-entries strong, .tie-expectation,
  .rally-hint, .rally-history li, .tour-note, .tour-calendar small,
  .calendar-location,
  .tour-fatigue small, .injury-notice, .cup-tie-reading-order { font-size: 14px; line-height: 1.5; }
  .mode-card .mode-code, .country-pick, .card-rating span, .card-meta,
  .card-country-badge, .card-pick, .slot-copy small, .slot-code,
  .squad-card-head span, .team-rating span, .discipline-banner small,
  .route-panel summary span, .route-item small, .rubber-entries small,
  .stage-tag, .match-intro p, .scoreboard small, .arena-topline .overline,
  .draw-heading .overline, .draw-legend, .draw-round-header small,
  .round-status, .bracket-kicker span, .live-group-card header small,
  .group-record, .group-rank, .group-tie-team, .tie-detail-hint,
  .calendar-event-status,
  .entry-status, .standings-you, .rank-new, .finals-badge,
  .rally-meta, .rally-controls label { font-size: 12px; letter-spacing: .03em; }
  .individual-modes .mode-card strong { font-size: 17px; }
  .country-grid { grid-template-columns: 1fr; }
  .country-card { display: grid; grid-template-columns: 66px minmax(0,1fr); gap: 8px 12px; align-content: center; min-height: 110px; padding: 14px; }
  .country-code { grid-row: 1 / 3; min-height: 36px; margin: 0; }
  .country-card strong { line-height: 1.2; }
  .country-pick { grid-column: 2; padding-top: 8px; margin: 0; }
  .country-card .country-option-note { grid-column: 2; margin: 0; font-size: 14px; }
  .choice-panel { padding: 12px; }
  .player-card { grid-template-columns: 100px minmax(0,1fr); }
  .card-top { min-height: 148px; padding: 14px 8px; gap: 8px; }
  .card-rating { padding: 8px 4px 8px 7px; }
  .card-rating span { margin-top: 8px; line-height: 1.35; }
  .card-body { padding: 14px 12px; }
  .card-meta { flex-wrap: wrap; gap: 5px; }
  .card-body h3 { line-height: 1.2; }
  .card-pick { padding-top: 12px; }
  .discipline-banner { height: auto; min-height: 76px; padding-block: 12px; }
  .squad-card-head > div, .cup-tie-dialog > header > div { min-width: 0; overflow-wrap: anywhere; }
  .pick-counter span { display: block; font-size: 12px; }
  .pick-counter { flex-shrink: 0; gap: 6px; }
  .pick-counter strong { font-size: 32px; }
  .match-panel { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .match-intro h3 { font-size: 20px; }
  .play-controls { grid-column: 1; grid-row: auto; }
  .play-controls .action-button { font-size: 14px; padding: 14px; }
  .rubber-feed { max-height: none; overflow: visible; }
  .draw-heading { flex-wrap: wrap; }
  .draw-heading .draw-legend { display: none; }
  .draw-navigation { width: 100%; }
  .draw-round-header strong, .entrant-name, .live-group-row strong { font-size: 14px; }
  .game-number, .entrant-seed, .draw-score-heading,
  .draw-score-detail > small, .draw-score-detail em { font-size: 12px; letter-spacing: .03em; }
  .draw-score-name, .draw-score-row b { font-size: 14px; }
  .live-group-row { min-height: 48px; }
  .rally-dialog > header { padding: 14px 16px; gap: 12px; }
  .rally-dialog .icon-button { width: 44px; }
  .rally-commentary { font-size: 16px; }
  .rally-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rally-controls .action-button { grid-column: 1 / -1; }
  .rally-after-match { grid-template-columns: minmax(0, 1fr); }
  .site-footer nav { gap: 6px 20px; }
}

/* Leave room for matches on short landscape screens, including large phones. */
@media (orientation: landscape) and (max-height: 600px) {
  .rally-dialog > header { padding: 8px 14px; }
  .rally-dialog > header .overline { display: none; }
  .rally-content { padding: 8px 14px; gap: 8px; }
  .rally-final-score { padding: 8px 12px; }
  .rally-final-heading > strong { display: none; }
  .rally-final-players { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; margin: 6px 0; }
  .rally-final-games { grid-column: auto; grid-row: auto; }
  .rally-final-score .game-score { display: flex; justify-content: center; padding: 4px 6px; }
  .rally-actions { padding-top: 8px; }
  .rally-after-match { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .draw-panel.is-expanded { inset: 0; height: 100dvh; border-radius: 0; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .is-expanded .draw-heading { min-height: 48px; padding: 2px 12px; flex-wrap: nowrap; gap: 12px; }
  .is-expanded .draw-heading .overline, .is-expanded .draw-legend { display: none; }
  .is-expanded .draw-heading h3 { font-size: 18px; }
  .is-expanded .draw-toolbar { padding: 4px 12px; flex-wrap: nowrap; gap: 12px; overflow-x: auto; flex-shrink: 0; }
  .is-expanded .draw-tabs, .is-expanded .draw-navigation { display: flex; flex-wrap: nowrap; width: auto; flex-shrink: 0; gap: 6px; }
  .is-expanded .draw-toolbar button { white-space: nowrap; padding: 6px 10px; }
  .is-expanded .bracket-kicker { padding-block: 4px; }
  .is-expanded .draw-round-navigation { padding-block: 4px; }
  .is-expanded .draw-round-navigation label > span { display: none; }
  .is-expanded .draw-round-header { height: 36px; }
}

/* Shared web and Android season entry and personal record. */
.tour-entry-dialog { max-width: 620px; }
.tour-entry-dialog h2 { overflow-wrap: anywhere; }
.tour-entry-body { padding: clamp(16px, 4vw, 26px); }
.tour-entry-body label { display: block; margin-bottom: 8px; color: var(--muted); }
.tour-entry-body select { width: 100%; margin-bottom: 16px; }
.tour-entry-question { font-weight: 750; margin: 24px 0 14px; }
.tour-entry-actions { display: grid; gap: 12px; }
.tour-entry-actions button { width: 100%; }
.player-profile { display: grid; gap: 24px; }
.profile-identity h4 { margin: 24px 0 4px; font-size: clamp(22px, 3vw, 30px); overflow-wrap: anywhere; }
.profile-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
.profile-stats > div { display: flex; flex-direction: column-reverse; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.profile-stats dt { color: var(--muted); font-size: 13px; }
.profile-stats dd { margin: 0; color: var(--acid); font-size: 30px; font-weight: 800; }
.player-profile section > h4 { margin: 0 0 14px; font-size: 17px; }
.profile-fatigue, .profile-commitments { padding: clamp(16px, 3vw, 24px); border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.025); }
.profile-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.profile-section-heading h4 { margin: 0; font-size: 18px; }
.profile-section-heading .tour-note { margin: 6px 0 0; }
.profile-status { padding: 6px 10px; border-radius: 20px; background: rgba(158,226,176,.1); color: #9ee2b0; font-size: 12px; font-weight: 750; white-space: nowrap; }
.profile-status[data-level="moderate"] { background: rgba(229,202,121,.1); color: #e5ca79; }
.profile-status[data-level="high"], .profile-status[data-level="exhausted"] { background: rgba(239,148,141,.1); color: #ef948d; }
.profile-fatigue-score { display: flex; align-items: baseline; gap: 0; margin: 0 0 8px; }
.profile-fatigue-score strong { font-size: 40px; line-height: 1; }
.profile-fatigue-score span { color: var(--muted); font-size: 17px; }
.profile-fatigue meter { width: 100%; height: 14px; }
.profile-fatigue-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.profile-fatigue-details dt { color: var(--muted); font-size: 12px; line-height: 1.5; }
.profile-fatigue-details dd { margin: 6px 0 0; font-size: 24px; font-weight: 750; }
.profile-fatigue > .tour-note { margin: 14px 0 0; }
.profile-rest-note, .profile-injury-note { margin: 16px 0 0; padding: 12px 14px; border-radius: 8px; font-size: 14px; line-height: 1.5; }
.profile-rest-note { color: #e5ca79; background: rgba(229,202,121,.08); }
.profile-injury-note { color: #efb1a2; background: rgba(239,148,141,.08); }
.profile-fatigue.is-injured { border-color: #ef948d; }
.commitment-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 0; }
.commitment-card { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(0,0,0,.12); }
.commitment-card h5, .commitment-extras h5 { margin: 0; font-size: 14px; font-weight: 750; }
.commitment-count { display: flex; align-items: baseline; gap: 6px; margin: 18px 0 3px; font-variant-numeric: tabular-nums; }
.commitment-count strong { color: var(--acid); font-size: 36px; line-height: 1; }
.commitment-count > span { color: var(--muted); font-size: 18px; }
.commitment-label { color: var(--muted); font-size: 12px; line-height: 1.5; }
.commitment-card progress { display: block; width: 100%; height: 6px; margin: 16px 0 12px; border: 0; border-radius: 8px; overflow: hidden; appearance: none; background: #32283f; accent-color: var(--acid); }
.commitment-card progress::-webkit-progress-bar { background: #32283f; border-radius: 8px; }
.commitment-card progress::-webkit-progress-value { background: var(--acid); border-radius: 8px; }
.commitment-card progress::-moz-progress-bar { background: var(--acid); border-radius: 8px; }
.commitment-remaining { display: block; color: var(--muted); font-size: 12px; line-height: 1.5; }
.commitment-card.is-complete { border-color: rgba(158,226,176,.4); }
.commitment-card.is-complete .commitment-remaining { color: #9ee2b0; }
.commitment-extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; margin-top: 16px; }
.commitment-extras > div { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 12px; background: rgba(255,255,255,.035); }
.commitment-extras p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.commitment-skip > strong, .commitment-finals-icon { min-width: 34px; text-align: center; color: var(--acid); font-size: 30px; font-weight: 750; }
.commitment-finals-icon { color: #b8a4ff; }
.profile-results { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; }
.profile-results li { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; overflow-wrap: anywhere; }
.profile-results li > div { display: grid; gap: 6px; min-width: 0; flex: 1; }
.profile-results small { color: var(--muted); line-height: 1.5; }
.profile-outcome { flex-shrink: 0; min-width: 42px; padding: 8px 4px; border-radius: 8px; text-align: center; font-size: 12px; font-weight: 750; }
.profile-outcome.is-win { color: #9ef2c3; background: rgba(93,195,145,.12); }
.profile-outcome.is-loss { color: #ffb3c3; background: rgba(255,93,132,.12); }
@media (max-width: 650px) {
  .season-nav-icon { display: none; }
  .season-navigation button { font-size: 12px; }
  .profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .commitment-grid { grid-template-columns: 1fr; }
  .commitment-card { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 16px; }
  .commitment-count { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; }
  .commitment-count strong { font-size: 30px; }
  .commitment-label { grid-column: 1; }
  .commitment-card progress { grid-column: 1 / -1; margin: 10px 0 4px; }
  .commitment-remaining { grid-column: 1 / -1; }
  .profile-fatigue-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-fatigue-details > div:last-child:nth-child(3) { grid-column: 1 / -1; }
  .profile-results li { flex-wrap: wrap; }
  .profile-results li > small { flex-basis: 100%; }
}
.career-mode-card { border-color: #b4e754; }
.career-workspace { padding: 32px 0 64px; }
.career-workspace h1 { max-width: 760px; font-size: clamp(28px, 4vw, 36px); line-height: 1.2; letter-spacing: -.025em; margin: 14px 0; }
.career-intro { color: var(--muted); max-width: 680px; line-height: 1.7; margin-bottom: 32px; }
.career-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: 24px; align-items: start; }
.career-panel { background: #1c142b; border: 1px solid var(--line); border-radius: 18px; padding: clamp(20px, 3vw, 32px); margin-bottom: 20px; }
.career-panel h2 { font-size: 22px; margin: 0 0 18px; overflow-wrap: anywhere; }
.career-panel p { color: var(--muted); line-height: 1.6; }
.career-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.career-fields label { display: grid; gap: 10px; font-size: 14px; }
.career-fields input, .career-fields select { width: 100%; min-width: 0; padding: 13px; background: #100b1a; color: var(--text); border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 16px; }
.career-slider { display: block; margin: 24px 0; }
.career-slider > span, .career-scale { display: flex; justify-content: space-between; gap: 12px; }
.career-slider output { color: var(--acid); font-variant-numeric: tabular-nums; }
.career-slider small { color: var(--muted); font-size: 14px; line-height: 1.6; }
.career-slider input { display: block; width: 100%; min-height: 32px; margin: 8px 0; accent-color: var(--acid); cursor: pointer; }
.career-panel .career-budget { color: var(--acid); font-weight: 700; }
.career-preview { position: sticky; top: 24px; text-align: left; background: linear-gradient(145deg, #30213f, #191225 75%); border-color: #594266; }
.career-profile-country { display: flex; align-items: center; gap: 12px; color: #d0c3dc; font-size: 14px; }
.career-profile-country img { flex-shrink: 0; object-fit: contain; border-radius: 3px; }
.career-preview h2 { margin: 24px 0 16px; font-size: 28px; line-height: 1.25; letter-spacing: -.025em; }
.career-profile-details { display: flex; flex-wrap: wrap; gap: 8px; }
.career-profile-details span { padding: 7px 10px; border: 1px solid #ffffff16; border-radius: 6px; background: #ffffff05; color: #c2b5cf; font-size: 14px; }
.career-profile-rating { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-top: 1px solid #ffffff18; margin-top: 28px; padding-top: 22px; }
.career-profile-rating > span { color: #c2b5cf; font-size: 14px; }
.career-elo { display: block; font-size: 40px; line-height: 1; color: var(--acid); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.career-stats { margin: 0 0 30px; }
.career-stats div { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.career-stats dd { margin: 0; white-space: nowrap; color: var(--acid); }
.career-workspace form > button { margin: 0 12px 12px 0; }
.career-workspace button:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 720px) { .career-layout { grid-template-columns: minmax(0, 1fr); } .career-preview { position: static; } .career-fields { grid-template-columns: minmax(0, 1fr); } }

.career-country-select { display: flex; align-items: center; gap: 10px; min-width: 0; }
.career-name-field { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
.career-name-field input { flex: 1; }
.career-name-field .secondary-button { flex-shrink: 0; min-height: 46px; padding: 0 14px; font-size: 14px; }
.career-country-select img { flex-shrink: 0; object-fit: contain; }

.career-home-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin: 24px 0 32px; }
.career-home-heading h1 { margin: 10px 0 18px; overflow-wrap: anywhere; }
.career-home-elo { text-align: right; }
.career-home-elo span { display: block; color: var(--muted); font-size: 14px; }
.career-home-elo strong { color: var(--acid); font-size: 40px; letter-spacing: -.04em; }
.career-home-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 28px; }
.career-home-summary > div { padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: #21172f; }
.career-home-summary span { display: block; color: var(--muted); font-size: 14px; margin-bottom: 12px; }
.career-home-summary strong { font-size: 22px; }
.career-home-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.career-rating-list > div { padding: 16px 0; }
.career-rating-list > div > div { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.career-rating-list small { color: var(--muted); font-weight: 400; }
.career-rating-list meter { width: 100%; height: 10px; display: block; }
.career-rating-list meter::-webkit-meter-bar { background: #100b1a; border: none; }
.career-rating-list meter::-webkit-meter-optimum-value { background: #c4ef62; border-radius: 5px; }
.career-training-label { display: grid; min-width: 0; gap: 10px; font-size: 14px; }
.career-training-label select { padding: 12px; width: 100%; min-width: 0; max-width: 100%; color: var(--text); background: #100b1a; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 16px; }
.career-home .action-button { margin-right: 10px; margin-bottom: 10px; }
.career-practice-result { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 18px; margin-top: 10px; border-top: 1px solid var(--line); }
.career-practice-result strong { color: var(--acid); }
.career-home-note { color: var(--muted); font-size: 14px; }
@media (max-width: 720px) { .career-home-grid { grid-template-columns: minmax(0, 1fr); } .career-home-summary { gap: 8px; } .career-home-summary > div { padding: 12px; } .career-home-summary strong { font-size: 16px; } .career-home-heading { align-items: flex-start; } .career-home-elo strong { font-size: 38px; } }

.career-view-tabs { display: flex; gap: 8px; margin: 0 0 24px; border-bottom: 1px solid var(--line); }
.career-view-tabs button { padding: 14px 24px; color: var(--muted); background: transparent; border: 0; border-bottom: 3px solid transparent; font: inherit; cursor: pointer; }
.career-view-tabs button[aria-current] { color: var(--acid); border-bottom-color: var(--acid); }
.career-calendar-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 20px 0; }
.career-calendar-toolbar h2 { margin: 0; }
.career-calendar-toolbar p, .career-calendar-note { color: var(--muted); font-size: 14px; line-height: 1.6; }
.career-calendar-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(270px, 1fr); gap: 24px; align-items: start; }
.career-month-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.career-month-heading h3 { margin: 0; font-size: 20px; }
.career-tier-filter { margin-bottom: 24px; }
.career-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.career-weekday { color: var(--muted); text-align: center; font-size: 12px; padding: 8px 0 12px; }
.career-calendar-day { min-width: 0; height: 72px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 10px 8px; background: #130d20; border: 1px solid #ffffff0a; color: var(--text); border-radius: 8px; cursor: pointer; font: inherit; font-size: 14px; }
.career-calendar-day small { font-size: 12px; color: #c2b5cf; }
.career-calendar-day.outside-month { opacity: .45; }
.career-calendar-day.selected-week { background: #342345; }
.career-calendar-day[aria-pressed="true"] { border-color: var(--acid); }
.career-calendar-day[aria-current="date"] > span { color: var(--acid); font-weight: 800; }
.career-calendar-day:hover { background: #44305a; }
.career-week-panel h3 { margin: 14px 0; font-size: 20px; }
.career-week-events { display: grid; gap: 12px; }
.career-calendar-event { padding: 16px; background: #130d20; border: 1px solid var(--line); border-radius: 10px; }
.career-calendar-event h4 { margin: 12px 0 8px; line-height: 1.4; font-size: 15px; }
.career-calendar-event p { display: flex; align-items: center; gap: 7px; font-size: 14px; margin: 0 0 8px; }
.career-calendar-event img { flex-shrink: 0; }
.career-calendar-event small { font-size: 12px; color: var(--muted); }
.career-tier-label { color: #d2b9f7; background: #362448; border-radius: 4px; padding: 4px 7px; font-size: 12px; }
.career-tier-label.lower-tier { color: #ceee94; background: #293323; }
.career-week-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.career-week-actions h3 { margin: 0 0 14px; }
.career-week-actions p { font-size: 14px; }
.career-week-actions small { display: block; color: var(--muted); font-size: 12px; margin-top: 8px; }
@media (max-width: 900px) { .career-calendar-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .career-week-actions { grid-template-columns: minmax(0, 1fr); gap: 0; } .career-calendar-day { height: 60px; padding: 8px 5px; } .career-event-count-label { display: none; } .career-month-grid { gap: 3px; } .career-calendar-toolbar { align-items: flex-start; } }

.career-continue-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 22px; margin: 0 0 24px; background: #30213f; border: 1px solid var(--line); border-radius: 12px; }
.career-continue-bar > span { color: var(--muted); font-size: 14px; }
.career-continue-bar .action-button { margin: 0; }
.career-week-dialog { box-sizing: border-box; width: min(960px, calc(100% - 32px)); max-width: calc(100% - 32px); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 24px; border: 1px solid #594266; border-radius: 18px; background: #1c142b; color: var(--text); }
.career-week-dialog::backdrop { background: #090511cc; backdrop-filter: blur(5px); }
.career-dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.career-dialog-heading h2 { min-width: 0; margin: 0; font-size: 22px; }
.career-dialog-heading > button { flex-shrink: 0; }
.career-save-status { display: inline-flex; align-items: center; gap: 6px; color: #9ee2b0; font-size: 14px; line-height: 1.5; }
.career-save-status.is-error { color: #ff879b; }
.career-playback-save { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 0 24px 10px; font-size: 14px; }
.career-action-fatigue { display: grid; gap: 8px; margin: 18px 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: #ffffff03; }
.career-action-fatigue > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 16px; }
.career-action-fatigue strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.career-action-fatigue small { font-size: 14px; font-weight: 400; color: var(--muted); }
.career-week-choices > .career-action-upgrade { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: #130d20; }
.career-week-choices > .career-action-upgrade.is-ready { border-color: var(--acid); background: #d8ff5810; }
.career-action-upgrade > div { flex: 1 1 180px; }
.career-week-choices .career-action-upgrade h3 { margin: 0; font-size: 18px; line-height: 1.3; }
.career-week-choices .career-action-upgrade.is-ready h3 { color: var(--acid); }
.career-week-choices .career-action-upgrade p { margin: 4px 0 0; font-size: 14px; color: var(--muted); line-height: 1.4; }
.career-week-choices .career-action-upgrade button { width: auto; min-width: 140px; }
.career-week-dialog p { color: var(--muted); font-size: 16px; line-height: 1.6; }
.career-week-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.career-week-choices section { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: #130d20; }
.career-week-choices .action-button { width: 100%; min-width: 0; }
.career-week-choices h3 { margin: 0 0 16px; font-size: 20px; line-height: 1.3; }
@media (max-width: 760px) {
  .career-week-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
  .career-week-choices section { padding: 14px; }
  .career-week-choices section:last-child { grid-column: 1 / -1; }
  .career-week-choices h3 { margin-bottom: 12px; }
  .career-week-choices p { margin: 10px 0; }
  .career-action-fatigue { margin: 14px 0; }
  .career-week-dialog { padding: 20px; }
  .career-continue-bar { align-items: flex-start; flex-direction: column; }
}

.career-top-ratings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.career-rating-list > .career-rating-item { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #130d20; }
.career-rating-list > .career-rating-item.is-upgradeable { border-color: var(--acid); background: #d8ff5810; }
.career-rating-list > .career-rating-item.is-upgradeable > div:first-child > strong { color: var(--acid); }
.career-rating-list .career-coached-rating { font-size: inherit; white-space: nowrap; }
.career-rating-list .career-coached-rating[data-change="increase"] { color: #8fe0ad; }
.career-rating-list .career-coached-rating[data-change="decrease"] { color: #ff8f9e; }
.career-rating-list > .career-rating-item.is-upgradeable .career-xp-controls > small { color: var(--acid); font-weight: 600; }
@media (max-width: 900px) { .career-top-ratings { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .career-top-ratings { grid-template-columns: minmax(0, 1fr); gap: 0; } }

.career-event-options { margin: 24px 0; padding: 0; min-inline-size: 0; border: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.career-event-options legend { color: var(--muted); font-size: 14px; margin-bottom: 12px; }
.career-event-option { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; min-width: 0; gap: 14px; border: 1px solid var(--line); border-radius: 12px; background: #130d20; padding: 20px; cursor: pointer; }
.career-event-option.is-selected { border-color: var(--acid); background: #292638; }
.career-event-option.is-locked { border-style: dashed; cursor: not-allowed; }
.career-event-option.is-locked strong { color: var(--muted); }
.career-entry-requirement { display: block; font-size: 14px; line-height: 1.4; }
.career-event-option.is-locked .career-entry-requirement { color: #ffc4d2; }
.career-event-option.is-locked input[type="radio"] { cursor: not-allowed; }
.career-event-option input[type="radio"] { appearance: auto; accent-color: var(--acid); width: 20px; height: 20px; min-width: 20px; min-height: 20px; padding: 0; margin: 2px 0 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.career-event-option > span { min-width: 0; overflow-wrap: anywhere; }
.career-event-option:focus-within { outline: 2px solid var(--acid); outline-offset: 2px; }
.career-event-option strong { display: block; margin: 12px 0 10px; line-height: 1.4; }
.career-event-location { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.career-event-location img { flex-shrink: 0; }
.career-event-option small { display: block; color: var(--muted); margin-top: 10px; font-size: 14px; }

.career-xp-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.career-xp-heading > div { display: flex; align-items: baseline; gap: 12px; }
.career-xp-heading span { color: var(--muted); font-size: 14px; }
.career-xp-heading strong { color: var(--acid); font-size: 30px; }
.career-rating-list progress { display: block; width: 100%; height: 8px; border: 0; border-radius: 8px; overflow: hidden; background: #100b1a; }
.career-rating-list progress::-webkit-progress-bar { background: #100b1a; }
.career-rating-list progress::-webkit-progress-value { background: var(--acid); border-radius: 8px; }
.career-rating-list progress::-moz-progress-bar { background: var(--acid); }
.career-rating-list .career-xp-controls { margin: 12px 0 0; align-items: center; }
.career-xp-controls button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 12px; min-width: 0; min-height: 38px; border-radius: 9px; }

.career-xp-controls button small { font-size: 12px; }
.career-xp-controls .action-button small { color: #140a24; font-weight: 700; opacity: .85; }
.career-xp-controls button:disabled { opacity: .38; background: #ffffff04; border-color: #ffffff14; color: var(--muted); }

.career-injury { padding: 16px; border: 1px solid #dca25b; border-radius: 10px; color: #f0c99a; }
@media (max-width: 480px) { .career-xp-heading { align-items: flex-start; flex-direction: column; } }

.career-profile-rating .career-rating-scale, .career-home-elo .career-rating-scale { font-size: 16px; color: var(--muted); font-weight: 500; letter-spacing: 0; }

.career-ranking-scroll { max-height: 360px; overflow: auto; }
.career-ranking-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.career-ranking-table th, .career-ranking-table td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.career-ranking-table thead { position: sticky; top: 0; background: #211633; }
.career-ranking-you { color: var(--acid); background: #292638; }
.career-next-match { padding: 18px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 16px; }

/* Career uses the World Tour arena, navigation and shared draw/standings styles. */
.career-season .season-content { min-width: 0; }
.career-season .draw-panel.is-expanded .career-knockout-draw { display: flex; flex: 1; min-height: 0; flex-direction: column; }
.career-season .profile-identity .entry-flags { vertical-align: middle; margin-right: 8px; }

/* Career menu and overwrite confirmation. */
.career-entry { max-width: 760px; margin: 0 auto; }
.career-entry-actions, .career-confirm-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.career-entry-actions { margin: 24px 0; }
.career-entry-actions > button { flex: 1 1 230px; padding: 16px 20px; }
.career-saved-summary { margin-top: 24px; }
.career-saved-summary h2 { margin: 0; font-size: 24px; }
.career-saved-summary p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.career-confirm { width: min(540px, calc(100vw - 32px)); }
.career-confirm-actions { justify-content: flex-end; margin-top: 24px; }
.career-create-fields { border: 0; padding: 0; margin: 0; min-width: 0; }


/* Career uses the shared tournament layout with a consistent type scale. */
.career-workspace, .career-season, .career-week-dialog { font-size: 16px; line-height: 1.5; }
:is(.career-workspace, .career-season, .career-week-dialog) :is(.action-button, .secondary-button, .back-button) {
  font-size: 14px; font-weight: 700; line-height: 1.4; letter-spacing: .02em;
  min-height: 44px; white-space: normal;
}
:is(.career-workspace, .career-season, .career-week-dialog) .overline { font-size: 12px; line-height: 1.5; font-weight: 700; letter-spacing: .08em; }
.career-season .arena-topline h2 { font-size: clamp(26px, 3vw, 32px); line-height: 1.25; }
.career-season :is(.season-view-heading h3, .tour-heading h3, .match-intro h3) { font-size: 24px; line-height: 1.3; }
.career-season .profile-identity h4 { font-size: 24px; line-height: 1.3; }
.career-profile-identity { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.career-season .career-profile-identity h4 { margin: 0 0 4px; }
.career-profile-identity .tour-note { margin: 0; }
.career-profile-overall { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.career-profile-overall > span { color: var(--muted); font-size: 14px; line-height: 1.5; }
.career-profile-overall strong { color: var(--acid); font-size: 32px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.career-profile-overall small { color: var(--muted); font-size: 14px; font-weight: 400; }
.career-season .season-navigation button { font-size: 15px; line-height: 1.4; }
.career-season .season-navigation small { font-size: 12px; line-height: 1.5; }
.career-season :is(.tour-note, .tour-location, .tour-position, .profile-stats dt, .calendar-date, .calendar-location, .calendar-event-status) { font-size: 14px; line-height: 1.5; }
.career-season .tour-standings table { font-size: 14px; }
.career-season .tour-standings th { font-size: 12px; }
.career-season .tour-standings td { line-height: 1.5; }
.career-season .tour-standings :is(.rank-movement, .finals-badge) { font-size: 12px; }
.career-season :is(.standings-sort, .standings-mobile-sort, .season-filter) { font-size: 14px; line-height: 1.5; }
.career-season :is(.stage-tag, .tour-tier-badge, .match-intro > p, .standings-you) { font-size: 12px; }
.career-season .calendar-event > strong { font-size: 16px; line-height: 1.4; }
.career-season .calendar-event > small { font-size: 14px; }
.career-season .tour-standings td::before, .career-season .standings-points::after { font-size: 12px; }
.career-week-dialog h2 { font-size: 24px; line-height: 1.3; margin-top: 0; }
.career-week-dialog .icon-button { flex-shrink: 0; }
.career-rating-list small { font-size: 14px; line-height: 1.5; }
.career-rating-list > div > div:first-child { align-items: baseline; }
.career-rating-list > div > div:first-child > strong { font-size: 20px; white-space: nowrap; }
.career-rating-list > div > div:first-child > span { font-size: 14px; font-weight: 600; }
@media (max-width: 650px) {
  .career-season .season-navigation button { font-size: 14px; padding: 12px 8px; }
  .career-season :is(.season-view-heading h3, .tour-heading h3, .match-intro h3) { font-size: 22px; }
}

:is(.career-workspace, .career-season, .career-week-dialog) button:disabled { opacity: .45; cursor: not-allowed; }
:is(.career-workspace, .career-season, .career-week-dialog) button[aria-busy="true"] { cursor: progress; }

.player-rating-badge { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; padding: 3px 9px 3px 7px; border: 1px solid #d9ff5859; border-radius: 8px; background: linear-gradient(135deg, #d9ff5829, #d9ff580f); box-shadow: inset 0 1px 0 #ffffff1f; color: var(--acid); font-size: 14px; font-weight: 800; line-height: 1.35; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.player-rating-badge svg { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linejoin: round; }
.player-rating-badge .rating-badge-shield { fill: currentColor; fill-opacity: .16; }
.player-rating-badge .rating-badge-star { fill: currentColor; stroke: none; }
.career-home-player > .player-rating-badge { gap: 7px; padding: 5px 12px 5px 10px; border-radius: 10px; font-size: 20px; }
.career-home-player > .player-rating-badge svg { width: 20px; height: 20px; }
.career-opponent-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.career-home-player { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.career-home-player h3 { min-width: 0; overflow-wrap: anywhere; }
.career-opponent-heading h3 { min-width: 0; }
.standings-player-details { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.standings-player-details > .flagged-entry { max-width: 100%; }
.career-player-details { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.career-player-age { color: var(--muted); font-size: 14px; font-weight: 400; }
.tour-standings .standings-player-details .standings-you { margin: 0; }

.career-week-result { margin-bottom: 20px; padding: 24px; }
.career-result-heading { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; }
.career-result-heading h3 { margin: 0; font-size: 22px; }
.career-result-heading p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.career-earned-xp { color: var(--acid); font-size: 20px; white-space: nowrap; }
.career-result-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin: 20px 0; }
.career-result-metrics dt { font-size: 14px; color: var(--muted); }
.career-result-metrics dd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 4px 0 0; font-size: 22px; font-weight: 700; }
.career-value-change { font-variant-numeric: tabular-nums; white-space: nowrap; }
.career-value-change > span { color: var(--muted); font-size: 14px; font-weight: 400; }
.career-result-delta { font-size: 14px; color: var(--muted); font-weight: 400; }
.career-training-progress { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.career-training-progress > div { min-width: 0; padding: 12px 0 0; }
.career-training-progress .career-training-progress-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.career-year-review { width: min(900px, calc(100% - 32px)); }
.career-year-champions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-bottom: 20px; }
.career-year-champions > section { min-width: 0; padding: 14px 16px; background: #100b1a66; border: 1px solid var(--line); border-radius: 12px; }
.career-year-champions h3 { margin: 0 0 8px; color: var(--muted); font-size: 14px; font-weight: 500; }
.career-year-champions strong { display: flex; align-items: center; gap: 8px; font-size: 18px; line-height: 1.4; overflow-wrap: anywhere; }
.career-champion-venue { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--muted); font-size: 14px; }
.career-year-champions .entry-flags, .career-year-standings .entry-flags { flex-shrink: 0; }
.career-year-standings-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.career-year-standings h3 { margin: 0; font-size: 18px; }
.career-year-standings table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.career-year-standings th, .career-year-standings td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: right; }
.career-year-standings th:first-child, .career-year-standings td:first-child { width: 52px; text-align: left; }
.career-year-standings th:nth-child(2), .career-year-standings th[scope="row"] { text-align: left; font-weight: 500; }
.career-year-standings thead th { color: var(--muted); font-size: 12px; font-weight: 500; }
.career-year-standings th[scope="row"] > span { display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.career-year-standings .is-player { background: #d9ff5810; color: var(--acid); }
.career-year-personal { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.career-year-personal summary { cursor: pointer; font-size: 16px; font-weight: 600; }
@media (max-width: 600px) {
  .career-year-champions { grid-template-columns: minmax(0,1fr); }
  .career-year-standings th, .career-year-standings td { padding: 7px 4px; }
  .career-year-standings th:first-child, .career-year-standings td:first-child { width: auto; }
}
.career-year-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.career-review-rating { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding-top: 16px; }
.career-review-rating h3 { margin: 0; font-size: 18px; }
.career-review-rating > strong { font-size: 26px; color: var(--acid); }
.career-review-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin-top: 16px; }
.career-review-stats > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.career-review-xp-title { margin: 20px 0 -8px; font-size: 16px; }
.career-review-footer { display: flex; justify-content: flex-end; width: 100%; margin: 20px 0 0; padding: 16px 0 0; }
.career-review-footer .action-button { min-width: 180px; }
.career-review-history { display: flex; flex-wrap: wrap; gap: 10px; }
.career-ending header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; }
.career-ending header h3 { margin: 0; font-size: 24px; }
.career-ending header p { display: flex; align-items: center; gap: 8px; }
.career-ending header > span { color: var(--muted); font-size: 14px; }
.career-ending-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); padding: 20px 0; border-block: 1px solid var(--line); }
.career-ending h4 { font-size: 18px; margin: 20px 0 12px; }
.career-major-history { margin: 0; padding: 0; list-style: none; }
.career-major-history li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 600px) { .career-ending-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.career-activity-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 32px; }
.career-result-metrics.career-activity-metrics { display: flex; flex-wrap: wrap; gap: 20px 28px; margin: 0; }
.career-activity-metrics > div { padding-left: 24px; border-left: 1px solid var(--line); }
.career-xp-metric dd { color: var(--acid); }
.career-fatigue-metric { min-width: 148px; }
.career-fatigue-metric dd { justify-content: space-between; }
.career-fatigue-metric dd > strong { font-size: 24px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.career-fatigue-metric strong small { color: var(--muted); font-size: 14px; font-weight: 400; }
.career-fatigue-change { padding: 2px 6px; border-radius: 4px; font-size: 14px; font-weight: 600; line-height: 1.4; }
.career-fatigue-change.increased { color: #ff9aad; background: #ff668510; }
.career-fatigue-change.decreased { color: var(--green); background: #57e7a010; }
.career-fatigue-metric progress { display: block; width: 100%; height: 4px; margin-top: 10px; border: 0; border-radius: 4px; overflow: hidden; background: #ffffff0d; }
.career-fatigue-metric progress::-webkit-progress-bar { background: #ffffff0d; }
.career-fatigue-metric progress::-webkit-progress-value { background: #b9abc9; border-radius: 4px; }
.career-fatigue-metric progress::-moz-progress-bar { background: #b9abc9; border-radius: 4px; }
.career-week-result .career-training-progress { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 4px; }
.career-tournament-result { padding: clamp(20px, 3vw, 32px); background: radial-gradient(ellipse at top left, #8658ff14, transparent 65%), var(--surface); }
.career-outcome-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.career-outcome-heading h2 { margin: 0; font-size: clamp(28px, 4vw, 38px); line-height: 1.2; letter-spacing: -.03em; }
.career-result-event { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.career-total-xp { flex-shrink: 0; text-align: right; }
.career-total-xp > span { display: block; color: var(--muted); font-size: 14px; }
.career-total-xp > strong { display: block; color: var(--acid); font-size: 36px; font-variant-numeric: tabular-nums; line-height: 1.3; }
.career-tournament-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 20px 0; margin: 20px 0 0; border-top: 1px solid var(--line); }
.career-tournament-metrics dd { font-size: 20px; }
.career-tournament-metrics dd > span { color: var(--muted); }
.career-recovery { display: grid; gap: 12px; min-width: 0; padding: 20px; margin-top: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.career-recovery-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.career-recovery h4 { margin: 0; font-size: 16px; }
.career-recovery-heading span { color: var(--muted); font-size: 14px; }
.career-recovery-heading strong { margin-left: 8px; color: var(--text); }
.career-recovery button { width: 100%; min-width: 0; font-size: 14px; white-space: normal; }
.career-recovery small { color: var(--muted); font-size: 14px; }
.career-recovery p { margin: 0; font-size: 14px; }
.career-weather { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.career-weather > svg { width: 28px; height: 28px; color: var(--acid); }
.career-weather svg, .career-match-conditions svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.career-weather > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; }
.career-weather span { font-size: 14px; color: var(--muted); }
.career-weather small { margin-left: 6px; font-size: 12px; }
.career-weather strong { font-size: 16px; }
.career-match-conditions { grid-column: 1 / -1; min-width: 0; margin-top: 10px; border-block: 1px solid var(--line); font-size: 14px; }
.career-match-conditions summary { min-height: 44px; padding: 12px 4px; cursor: pointer; color: var(--muted); }
.career-match-conditions[open] { padding-bottom: 12px; }
.match-intro:has(+ .career-match-conditions) { border-bottom: 0; padding-bottom: 0; }
.career-conditions-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.career-conditions-line svg { width: 20px; height: 20px; color: var(--acid); }
.career-conditions-line > span, .career-conditions-detail { color: var(--muted); }
.career-conditions-line strong { color: var(--text); font-size: 14px; }
.career-conditions-line .career-wind-effect { font-size: 16px; }
.career-conditions-line.is-helping .career-wind-effect, .career-conditions-line.is-helping svg { color: var(--green); }
.career-conditions-line.is-against .career-wind-effect, .career-conditions-line.is-against svg { color: var(--red); }
.career-conditions-line.is-neutral .career-wind-effect, .career-conditions-line.is-neutral svg { color: var(--muted); }
.career-wind-strength { padding: 3px 7px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; }
.career-conditions-detail { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; font-size: 14px; }
.career-conditions-detail strong { margin-left: 4px; font-weight: 600; color: var(--text); }
.career-match-rewards { display: grid; gap: 12px; min-width: 0; }
.career-match-rewards > .career-recovery { margin-top: 0; }
@media (max-width: 820px) {
  .arena-workspace.has-career-recovery { grid-template-areas: "match" "recovery" "draw" "history"; }
  .match-sidebar > .career-match-rewards { grid-area: recovery; }
}
.career-performance-bonus { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; font-size: 16px; }
.career-performance-bonus strong, .career-junior-rewards { color: var(--acid); }
.career-tournament-stat-xp { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.career-tournament-stat-xp > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: #ffffff03; font-size: 14px; }
.career-tournament-stat-xp strong { margin-left: auto; color: var(--acid); white-space: nowrap; }
.career-tournament-stat-xp small { flex-basis: 100%; color: var(--muted); font-size: 14px; }
.career-event-champion { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 18px; font-size: 14px; }
.career-event-champion > span:first-child { color: var(--muted); }
.career-result-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--line); }
.career-result-actions .action-button { min-width: 220px; }
.career-last-tournament { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; }
.career-last-tournament > div { flex: 1; min-width: min(100%, 240px); }
.career-last-tournament h3 { margin: 0; font-size: 20px; }
.career-last-tournament p { margin: 6px 0 0; font-size: 14px; }
@media (max-width: 600px) {
  .career-year-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .career-review-stats, .career-training-progress { grid-template-columns: minmax(0, 1fr); }
  .career-activity-top { align-items: stretch; flex-direction: column; gap: 16px; }
  .career-result-metrics.career-activity-metrics { gap: 16px 24px; padding-top: 16px; border-top: 1px solid var(--line); }
  .career-activity-metrics > div { padding-left: 0; border-left: 0; }
  .career-activity-metrics dd { font-size: 20px; }
  .career-outcome-heading { gap: 12px; }
  .career-total-xp > strong { font-size: 30px; }
  .career-tournament-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .career-result-actions { flex-direction: column-reverse; align-items: stretch; }
  .career-result-actions button { width: 100%; min-width: 0; }
}

/* Career: allow content to shrink on phones without clipping controls or dialogs. */
:is(.career-workspace, .career-season) { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
:is(.career-workspace, .career-season) :is(input:not([type="range"]), select, textarea) { min-width: 0; max-width: 100%; font-size: 16px; }
:is(.career-workspace, .career-season) :is(.season-workspace, .arena-workspace, .match-panel, .draw-panel, .player-profile, .career-panel) { min-width: 0; }
.career-week-dialog { overscroll-behavior: contain; overflow-wrap: anywhere; }
body:has(.career-week-dialog[open]) { overflow: hidden; }
.career-ad-reward { display: grid; gap: 12px; margin: 16px 0; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.career-ad-reward :is(h3,p) { margin: 0; }
.career-ad-reward p { font-size: 16px; }
.career-ad-reward button { justify-self: start; max-width: 100%; }
.career-tournament-ad { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 440px; margin: 12vh auto; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.career-tournament-ad strong { display: block; color: var(--acid); font-size: 28px; }
.career-tournament-ad span { font-size: 16px; color: var(--muted); }
.career-tournament-ad button { min-height: 44px; font-size: 16px; }
.career-rally-dialog .rally-court { flex: none; }
.career-rally-dialog .rally-main { overscroll-behavior-y: contain; }
.career-rally-dialog .rally-history ol { max-height: none; overflow: visible; }
.career-rally-dialog .rally-commentary-card { margin-top: 0; }
.career-rally-dialog .rally-side-label, .career-rally-dialog .rally-status, .career-rally-dialog .overline { font-size: 12px; }
.career-rally-dialog .rally-actions button { font-size: 14px; letter-spacing: 0; }
.career-rally-dialog [hidden] { display: none; }
/* Finished matches use one scroll surface, so the recovery button is never
   squeezed into a small pane behind the next-round controls. */
.career-rally-dialog.is-finished[open] { display: block; overflow-y: auto; overscroll-behavior: contain; }
.career-rally-dialog.is-finished > header { padding: 12px; }
.career-rally-dialog.is-finished .rally-content { display: flex; }
.career-rally-dialog.is-finished .rally-main { overflow: visible; scrollbar-gutter: auto; }
.career-rally-dialog.is-finished .rally-final-score { padding: 10px 12px; margin-bottom: 10px; }
.career-rally-dialog.is-finished .rally-final-players { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 8px; margin: 6px 0; }
.career-rally-dialog.is-finished .rally-final-players > div > span { display: none; }
.career-rally-dialog.is-finished .rally-final-games { grid-area: auto; gap: 6px; font-size: 24px; }
.career-rally-dialog.is-finished .rally-final-score .game-score { display: flex; justify-content: center; gap: 6px; padding: 4px; }
.career-rally-dialog.is-finished .game-number { display: none; }
.career-rally-dialog.is-finished .career-recovery { padding: 12px; gap: 8px; margin: 0 0 12px; }
.career-rally-dialog.is-finished .career-recovery button { min-height: 48px; }
.career-rally-dialog.is-finished .rally-actions { margin-bottom: 12px; }
@media (max-width: 650px) {
  .career-rally-dialog .rally-content { padding: 12px; gap: 10px; }
  .career-rally-dialog .rally-scoreboard { padding: 10px 0; }
  .career-rally-dialog .rally-scoreboard > .rally-side { padding: 0 8px; gap: 4px; }
  .career-rally-dialog .rally-controls { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 6px; }
  .career-rally-dialog .rally-controls .action-button { grid-column: auto; }
  .career-rally-dialog .rally-controls button { padding: 4px; }
  .career-rally-dialog .rally-controls svg { display: none; }
}
@media (min-width: 600px) and (max-height: 560px) {
  .career-rally-dialog .rally-content { display: grid; grid-template: minmax(0,1fr) auto / minmax(0,1fr) minmax(0,1.1fr); }
  .career-rally-dialog :is(.rally-court,.rally-final-score) { align-self: start; }
  .career-rally-dialog .rally-scoreboard { padding: 8px 0; }
  .career-rally-dialog .rally-scoreboard strong { font-size: 42px; }
  .career-rally-dialog .rally-scoreboard > .rally-side { gap: 2px; padding: 0 6px; }
  .career-rally-dialog .rally-actions { grid-column: 1 / -1; }
  .career-rally-dialog.is-finished .rally-main { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); align-items: start; gap: 12px; }
  .career-rally-dialog.is-finished .rally-main > :not(.rally-final-score):not(.career-recovery) { grid-column: 1 / -1; }
}
@media (max-height: 480px) and (max-width: 599px), (max-height: 340px) {
  .career-rally-dialog[open] { display: block; overflow-y: auto; overscroll-behavior: contain; }
  .career-rally-dialog .rally-content { display: flex; }
  .career-rally-dialog .rally-main { overflow: visible; }
}
.career-season .rally-controls label { white-space: nowrap; overflow-wrap: normal; padding-left: 8px; }
@media (max-width: 600px) {
  .career-season :is(.arena-topline, .season-view-heading, .career-outcome-heading, .career-opponent-heading) { flex-wrap: wrap; }
  .career-season .arena-topline > div, .career-profile-identity > div { min-width: 0; max-width: 100%; }
  .career-workspace .career-panel, .career-season .career-week-result { padding: 16px; }
  .career-week-dialog { width: calc(100% - 24px); max-width: calc(100% - 24px); max-height: calc(100dvh - 24px); padding: 16px; }
  .career-confirm-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
  .career-confirm-actions button, .career-ad-reward button { width: 100%; min-width: 0; }
  .career-total-xp { text-align: left; }
  .career-calendar-toolbar { flex-wrap: wrap; }
  .career-year-standings { overflow-x: auto; }
  .career-season .career-rating-list > div > div { flex-wrap: wrap; }
  .career-season :is(.career-result-metrics, .profile-stats) > div { min-width: 0; }
}
@media (max-width: 380px) {
  .career-season .season-navigation { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .career-season .career-tournament-metrics { grid-template-columns: minmax(0,1fr); }
  .career-calendar-day { padding: 6px 2px; }
  .career-month-grid { gap: 2px; }
}

/* Seasonal coaching. */
.career-coaches { font-size: 16px; }
.career-coaches > h4 { margin: 24px 0 12px; font-size: 18px; }
.career-coach-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: 14px; }
.career-coach-card { display: flex; flex-direction: column; min-width: 0; padding: 18px; gap: 12px; border: 1px solid var(--line); border-radius: 12px; background: #ffffff03; }
.career-coach-card.is-hired { border-color: #c4f24e66; }
.career-coach-title { display: flex; align-items: center; gap: 10px; }
.career-coach-title > div { min-width: 0; }
.career-coach-title h4 { margin: 0 0 4px; font-size: 18px; }
.career-coach-title span, .career-coach-note { font-size: 14px; color: var(--muted); }
.career-coach-strengths { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.career-coach-strengths li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.career-coach-strengths strong { color: var(--acid); }
.career-coach-strengths strong.is-negative { color: #ffc4ad; }
.career-coach-grade { flex: 0 0 auto; align-self: flex-start; margin-left: auto; color: #aab3c5; font-size: 52px; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.career-coach-grade[data-grade="A"] { color: var(--acid); }
.career-coach-grade[data-grade="B"] { color: #c4b5fd; }
.career-coach-confirm .career-coach-strengths { margin-block: 20px; }
.career-coach-confirm .career-coach-chemistry { margin-bottom: 20px; }
.career-coach-chemistry { display: flex; flex-wrap: wrap; gap: 8px 12px; font-size: 14px; }
.career-coach-card button { margin-top: auto; min-height: 44px; font-size: 14px; }
.career-training-allocation .career-coach-note { display: block; margin-top: 4px; }
.career-coach-adjustment .is-active { color: #8fe0ad; font-weight: 600; }
@media (min-width:601px) and (max-width:1100px) {
  .career-season .season-navigation { grid-template-columns: repeat(5,minmax(0,1fr)); }
}
@media (max-width:600px) {
  .career-season .season-navigation { display: flex; position: static; overflow-x: auto; gap: 4px; padding: 6px; overscroll-behavior-x: contain; }
  .career-season .season-navigation button { flex: 0 0 auto; width: auto; min-height: 44px; padding: 10px 12px; font-size: 14px; white-space: nowrap; }
  .career-season .season-navigation .season-nav-icon { display: none; }
  .career-season .arena-topline { flex-wrap: wrap; gap: 12px; }
  .career-season .arena-topline > div { min-width: 0; flex: 1 1 180px; }
  .career-season .arena-topline .back-button { flex-shrink: 0; }
  .career-coach-card { padding: 14px; }
}

/* Career menu and weekly training flow. */
.career-workspace.career-entry { width: 100%; max-width: 760px; margin-inline: auto; }
.career-saved-heading, .career-saved-player, .career-saved-footer { display: flex; align-items: center; gap: 16px; }
.career-saved-heading, .career-saved-footer { justify-content: space-between; }
.career-saved-player, .career-saved-player > div { min-width: 0; }
.career-saved-player > .entry-flags { flex-shrink: 0; }
.career-saved-player .country-flag { width: 36px; height: 27px; border-radius: 4px; object-fit: cover; }
.career-saved-heading > .player-rating-badge { flex-shrink: 0; gap: 8px; padding: 8px 16px 8px 13px; border-radius: 12px; font-size: 26px; line-height: 1.1; }
.career-saved-heading > .player-rating-badge svg { width: 24px; height: 24px; }
.career-saved-details { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin: 24px 0; padding: 18px 0; border-block: 1px solid var(--line); }
.career-saved-details dt { color: var(--muted); font-size: 14px; }
.career-saved-details dd { margin: 4px 0 0; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.career-saved-footer .action-button { min-width: 0; }
.career-entry-actions { margin: 16px 0; }
.career-week-option { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.career-week-option > div { flex: 1 1 100px; }
.career-week-choices .career-week-option h3 { margin: 0; }
.career-week-choices .career-week-option p { margin: 6px 0 0; font-size: 14px; }
.career-week-option button { min-width: 88px; }
.career-training-choice { grid-column: 1 / -1; }
.career-training-choice > header { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.career-training-choice > header h3 { margin: 0; }
.career-camp-xp { color: var(--acid); font-size: 20px; white-space: nowrap; }
.career-training-choice > .action-button { margin-top: 0; }
.career-training-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; padding: 14px 0; margin-top: 18px; border-block: 1px solid var(--line); font-size: 16px; }
.career-training-total > span { color: var(--muted); }
.career-progress-before { color: var(--muted); }
.career-xp-metric > small { display: block; font-size: 14px; color: var(--muted); margin-top: 4px; }
.career-training-review { width: min(720px,calc(100% - 24px)); padding: 0; }
.career-training-review[open] { display: flex; flex-direction: column; overflow: hidden; }
.career-training-review-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px; }
.career-training-review .career-week-result { margin: 0; padding: 0; border: 0; background: none; }
.career-training-review .career-activity-top { display: block; }
.career-training-review .career-result-heading { margin-bottom: 20px; }
.career-training-review .career-activity-metrics { display: grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap: 12px; width: 100%; margin: 0; }
.career-training-review .career-activity-metrics > div { min-width: 0; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #ffffff03; }
.career-training-review .career-xp-metric dd { font-size: 30px; }
.career-training-review .career-week-result .career-training-progress { border-top: 0; margin-top: 12px; padding-top: 0; }
.career-training-review .career-ad-reward { margin-bottom: 0; }
.career-training-review-footer { flex-shrink: 0; padding: 16px 24px; border-top: 1px solid var(--line); }
.career-training-review-footer button { width: 100%; min-width: 0; }
@media (max-width: 600px) {
  .career-saved-heading { align-items: flex-start; gap: 12px; }
  .career-saved-player { gap: 12px; align-items: flex-start; }
  .career-saved-summary h2 { font-size: 22px; }
  .career-saved-footer { flex-wrap: wrap; }
  .career-saved-footer .action-button { width: 100%; }
  .career-training-review { padding: 0; }
  .career-training-review-body { padding: 16px; }
  .career-training-review-footer { padding: 12px 16px; }
}
@media (max-width: 380px) {
  .career-saved-player { flex-wrap: wrap; }
  .career-training-choice > header { flex-wrap: wrap; gap: 8px; }
}

/* Make training costs and rewards comparable before committing a week. */
.career-training-allocation { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 10px; margin: 12px 0 18px; }
.career-training-allocation > div { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.career-training-allocation dt { font-size: 14px; color: var(--muted); }
.career-training-allocation dd { margin: 0; font-weight: 700; font-size: 16px; color: var(--acid); white-space: nowrap; }
.career-intensities { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 0; margin: 0 0 18px; min-width: 0; border: 0; }
.career-intensities legend { padding: 0; margin-bottom: 10px; font-size: 14px; font-weight: 600; }
.career-intensity { display: grid; align-content: start; gap: 6px; min-width: 0; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #ffffff03; cursor: pointer; font-size: 14px; }
.career-intensity.is-selected { border-color: var(--acid); background: #d8ff5810; }
.career-intensity:focus-within { outline: 2px solid var(--acid); outline-offset: 3px; }
.career-intensity.is-unavailable { opacity: .55; cursor: not-allowed; }
.career-intensity-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; font-size: 16px; }
.career-intensity-heading input[type="radio"] { width: 16px; height: 16px; min-height: 16px; margin: 0; padding: 0; accent-color: var(--acid); }
.career-intensity-xp { color: var(--acid); font-size: 20px; font-weight: 700; }
.career-training-outcome { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; padding: 12px 0; margin-bottom: 8px; border-top: 1px solid var(--line); font-size: 16px; }
@media (max-width: 600px) {
  .career-action-dialog { width: calc(100% - 16px); max-width: calc(100% - 16px); max-height: calc(100dvh - 16px); padding: 12px; }
  .career-action-dialog .career-dialog-heading { gap: 8px; }
  .career-action-dialog .career-dialog-heading h2 { font-size: 20px; }
  .career-action-dialog .career-action-fatigue { gap: 4px; padding: 8px 10px; margin: 10px 0; }
  .career-action-dialog .career-action-upgrade { gap: 8px; padding: 10px 12px; margin: 0 0 10px; }
  .career-action-upgrade > div { flex-basis: 100%; }
  .career-week-choices .career-action-upgrade button { width: 100%; min-width: 0; }
  .career-action-dialog .career-week-choices { gap: 10px; margin-top: 10px; }
  .career-action-dialog .career-week-choices section { padding: 12px; }
  .career-week-choices .career-week-option { gap: 8px; align-content: start; }
  .career-week-option > div { flex-basis: 100%; }
  .career-week-option button { width: 100%; min-width: 0; }
  .career-week-choices .career-week-option h3 { font-size: 18px; }
  .career-week-choices .career-week-option p { margin-top: 2px; line-height: 1.4; }
  .career-training-choice > header { margin-bottom: 10px; }
  .career-training-label { gap: 4px; }
  .career-training-label select { min-height: 44px; padding: 8px 10px; }
  .career-training-allocation { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 10px 0 12px; }
  .career-training-allocation > div { display: grid; align-content: start; gap: 2px; padding: 0; border: 0; }
  .career-intensities { grid-template-columns: minmax(0,1fr); gap: 6px; margin-bottom: 10px; }
  .career-intensities legend { margin-bottom: 6px; }
  .career-intensity { grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 8px; min-height: 44px; padding: 8px; }
  .career-intensity-heading { gap: 6px; margin: 0; font-size: 14px; flex-wrap: nowrap; }
  .career-intensity-heading input[type="radio"] { flex-shrink: 0; }
  .career-intensity-xp { text-align: right; font-size: 16px; }
  .career-intensity > span:last-child { text-align: right; white-space: nowrap; }
  .career-training-outcome { padding: 8px 0; margin-bottom: 6px; font-size: 14px; }
  .career-training-review .career-result-heading { margin-bottom: 12px; }
  .career-training-review .career-result-heading h2 { margin-bottom: 0; }
  .career-training-review .career-activity-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .career-training-review .career-activity-metrics > div { padding: 10px; }
  .career-training-review .career-activity-metrics > div:nth-child(3) { grid-column: 1 / -1; }
  .career-training-review .career-training-total { padding: 10px 0; margin-top: 12px; }
  .career-training-review .career-training-progress { gap: 8px; }
  .career-season .career-rating-list > .career-rating-item { padding: 12px; }
  .career-season .career-rating-list > div > div { margin-bottom: 8px; }
  .career-season .career-rating-list .career-xp-controls { margin: 8px 0 0; }
  .career-training-review .career-training-progress .career-training-progress-label { margin: 6px 0 0; gap: 4px; }
  .career-training-review .career-ad-reward { padding: 12px; gap: 8px; margin-top: 12px; }
}
@media (max-width: 380px) {
  .career-intensity { gap: 6px; padding-inline: 6px; }
  .career-intensity-heading { gap: 4px; }
  .career-intensity-xp { font-size: 14px; white-space: nowrap; }
}