.training-home .league-panel { width: min(1000px, 100%); display: flex; flex-direction: column; gap: 12px; padding: clamp(12px, 2vh, 24px); background: #fffcf5; }
.league-panel [hidden] { display: none !important; }
.league-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex: none; }
.league-eyebrow { color: #8b7343; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; }
.league-heading h2 { margin: 3px 0; color: #244436; font: 500 clamp(22px, 3vw, 30px)/1.15 'Playfair Display', Georgia, serif; }
.league-heading p { margin: 4px 0 0; color: #738071; font-size: 11px; }
.league-season-label { display: grid; gap: 5px; width: 200px; min-width: 0; color: #61705f; font-size: 10px; }
.league-heading > div { min-width: 0; }
.league-formats { display: flex; gap: 4px; flex: none; padding: 3px; border: 1px solid #e5dece; border-radius: 9px; background: #f3efe4; }
.league-formats button { flex: 1; min-width: 0; border: 0; border-radius: 6px; padding: 7px 10px; background: transparent; color: #63705c; font: 600 12px 'DM Sans', sans-serif; cursor: pointer; }
.league-formats button[aria-pressed="true"] { color: #fff9e9; background: #284f3d; box-shadow: 0 1px 3px #183b2420; }
.league-season-label select { width: 100%; min-width: 0; max-width: 100%; border: 1px solid #d9d1be; border-radius: 7px; background: #fff; padding: 8px; color: #334e3c; font: 12px 'DM Sans', sans-serif; }
.league-summary { display: flex; align-items: center; gap: 20px; flex: none; padding: 18px 24px; border: 1px solid #60725a; border-radius: 12px; background: radial-gradient(ellipse at 0 0, #52644a, transparent 80%), #163e32; color: #fff9e9; }
.league-emblem { display: grid; place-items: center; width: 74px; height: 82px; flex: none; }
.league-logo { display: block; flex: none; overflow: visible; }
.league-logo-large { width: 72px; height: 80px; filter: drop-shadow(0 3px 3px #081f1840); }
.league-logo-small { width: 24px; height: 28px; }
.league-logo-rule { width: 29px; height: 34px; }
.league-logo-shield { fill: #775035; stroke: #d8aa78; stroke-width: 1.5; stroke-linejoin: round; }
.league-logo-inset { fill: none; stroke: #f1d5a6; stroke-opacity: .7; stroke-width: .8; }
.league-logo-mark { fill: #f4dfb1; stroke: #60412c; stroke-width: .8; stroke-linejoin: round; }
.league-logo-line { fill: none; stroke: #f4dfb1; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.league-logo-cut { fill: #80573a; stroke: #f4dfb1; stroke-width: 1; }
.league-logo-gem { fill: #f4dfb1; stroke: #60412c; stroke-width: .6; }
.league-logo[data-division="Argent"] .league-logo-shield { fill: #56636b; stroke: #dce4e7; }
.league-logo[data-division="Argent"] .league-logo-mark { fill: #e5edf0; stroke: #43525a; }
.league-logo[data-division="Argent"] .league-logo-inset { stroke: #f6fbfc; }
.league-logo[data-division="Argent"] .league-logo-line { stroke: #e5edf0; }
.league-logo[data-division="Or"] .league-logo-shield { fill: #8c6728; stroke: #f2d27e; }
.league-logo[data-division="Or"] .league-logo-mark { fill: #ffe49a; stroke: #72501c; }
.league-logo[data-division="Or"] .league-logo-inset { stroke: #fff0bc; }
.league-logo[data-division="Platine"] .league-logo-shield { fill: #4b6570; stroke: #d8edf0; }
.league-logo[data-division="Platine"] .league-logo-mark { fill: #d8f0f2; stroke: #405760; }
.league-logo[data-division="Platine"] .league-logo-inset { stroke: #f2ffff; }
.league-logo[data-division="Platine"] .league-logo-line { stroke: #e8f9f9; }
.league-logo[data-division="Diamant"] .league-logo-shield { fill: #394d70; stroke: #c3d9ff; }
.league-logo[data-division="Diamant"] .league-logo-mark { fill: #ecf3ff; stroke: #334366; }
.league-logo[data-division="Diamant"] .league-logo-inset { stroke: #fff; }
.league-logo[data-division="Diamant"] .league-logo-line { stroke: #f3f7ff; }
.league-logo[data-division="Émeraude"] .league-logo-shield { fill: #15533f; stroke: #7ce1ad; }
.league-logo[data-division="Émeraude"] .league-logo-inset { stroke: #c8ffe0; }
.league-logo[data-division="Émeraude"] .league-logo-mark { fill: #82e6b2; stroke: #124a36; }
.league-logo[data-division="Émeraude"] .league-logo-cut { fill: #269568; stroke: #d7ffe8; }
.league-logo[data-division="Émeraude"] .league-logo-line { stroke: #e0ffec; }
.league-logo[data-division="Maître"] .league-logo-shield { fill: #533563; stroke: #dfbaff; }
.league-logo[data-division="Maître"] .league-logo-inset { stroke: #e9d2ff; }
.league-logo[data-division="Maître"] .league-logo-mark { fill: #f3dca0; stroke: #704a20; }
.league-logo[data-division="Maître"] .league-logo-line { stroke: #e7c683; }
.league-logo[data-division="Maître"] .league-logo-gem { fill: #8153a6; stroke: #fff2bf; }
.league-logo[data-division="Grand Maître"] .league-logo-shield { fill: #6b283b; stroke: #f3ce7e; }
.league-logo[data-division="Grand Maître"] .league-logo-inset { stroke: #ffe5ad; }
.league-logo[data-division="Grand Maître"] .league-logo-mark { fill: #ffe2a0; stroke: #8c5729; }
.league-logo[data-division="Grand Maître"] .league-logo-line { stroke: #f5d591; }
.league-logo[data-division="Grand Maître"] .league-logo-cut { fill: #b64160; stroke: #fff0c8; }
.league-logo[data-division="Grand Maître"] .league-logo-gem { fill: #ffe8aa; stroke: #8c5729; }
.league-progress { flex: 1; min-width: 0; }
.league-progress > span { font-size: 10px; color: #d7dfcb; }
.league-progress h3 { margin: 3px 0 0; font: 500 27px/1.1 'Playfair Display', Georgia, serif; color: #f0d9a5; }
.league-progress p { margin: 3px 0; font-size: 12px; }
.league-progress progress { display: block; width: 100%; height: 5px; margin: 8px 0 5px; border: 0; border-radius: 10px; overflow: hidden; background: #ffffff25; accent-color: #d9bb79; }
.league-progress progress::-webkit-progress-bar { background: #ffffff25; }
.league-progress progress::-webkit-progress-value { background: #d9bb79; }
.league-progress progress::-moz-progress-bar { background: #d9bb79; }
.league-progress small, .league-summary-actions small { font-size: 10px; color: #cbd6c5; }
.league-summary-actions { display: grid; gap: 9px; text-align: center; flex: none; }
.league-summary-actions button { min-height: 40px; padding: 9px 15px; border: 1px solid #dfc283; border-radius: 7px; background: #f0dfa9; color: #213c2d; font: 700 12px 'DM Sans', sans-serif; cursor: pointer; }
.league-views { display: flex; gap: 4px; flex: none; border-bottom: 1px solid #e4dece; }
.league-views button { border: 0; border-bottom: 2px solid transparent; padding: 9px 12px; background: none; color: #77816e; font: 600 12px 'DM Sans', sans-serif; cursor: pointer; white-space: nowrap; }
.league-views [aria-pressed="true"] { color: #284d3b; border-bottom-color: #bda169; }
#league-refresh { margin-left: auto; font-size: 18px; padding: 3px 10px; }
.league-body { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.league-body::-webkit-scrollbar { display: none; }
.league-list { display: grid; gap: 5px; }
.league-row { display: flex; align-items: center; gap: 9px; padding: 6px 12px; border: 1px solid #e8e3d6; border-radius: 8px; background: #fbf9f2; }
.league-row.is-me { background: #edf2e7; border-color: #9eb58d; }
#league-leaders .league-row { height: 48px; box-sizing: border-box; border-left-width: 4px; }
.league-division-nav { flex: none; display: grid; gap: 7px; }
.league-division-choice { display: flex; align-items: center; gap: 10px; min-width: 0; }
.league-division-choice label { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #5b6b5d; font-weight: 700; }
.league-division-choice select { max-width: 100%; min-width: 0; background: #fff; border: 1px solid #d9d1be; border-radius: 7px; padding: 7px; color: #294b37; font: 600 12px 'DM Sans', sans-serif; }
.league-division-choice small { margin-left: auto; font-size: 10px; color: #6c7564; }
#league-my-division { border: 1px solid #bac9af; border-radius: 6px; background: #eef3e8; color: #31573e; padding: 6px; font-size: 11px; cursor: pointer; }
.league-zones { display: flex; gap: 6px; }
.league-zone-key { flex: 1; padding: 6px 8px; border-radius: 5px; text-align: center; font-size: 11px; font-weight: 600; }
.league-zone-key[data-zone="promotion"] { background: #e4efdf; color: #2c633c; }
.league-zone-key[data-zone="stay"] { background: #efece2; color: #68634c; }
.league-zone-key[data-zone="relegation"] { background: #f6e6df; color: #974c39; }
#league-leaders [data-zone="promotion"] { border-left-color: #4e8759; }
#league-leaders [data-zone="stay"] { border-left-color: #b8aa7a; }
#league-leaders [data-zone="relegation"] { border-left-color: #b5654d; }
.league-row-zone { width: 78px; font-size: 10px; color: #6d6d56; white-space: nowrap; }
[data-zone="promotion"] .league-row-zone { color: #32693f; }
[data-zone="relegation"] .league-row-zone { color: #a04c37; }
.league-row-points { min-width: 55px; text-align: right; }
@media (max-width: 760px) {
  .league-division-choice { flex-wrap: wrap; gap: 5px; }
  .league-division-choice small { width: 100%; margin: 0; font-size: 9px; }
  .league-division-choice select { font-size: 11px; padding: 5px; }
  .league-zone-key { padding: 5px 2px; font-size: 10px; }
  .league-row-zone { width: 62px; font-size: 9px; }
  #league-leaders .league-logo-small { display: none; }
  .league-row-points { min-width: 42px; }
}
@media (max-height: 500px) and (min-width: 480px) {
  .league-division-nav { grid-column: 2; grid-row: 4; gap: 3px; }
  .training-home .league-panel { grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto; }
  .league-summary { grid-row: 3 / 7; }
  .league-division-choice small { display: none; }
  .league-zone-key { padding: 3px; font-size: 9px; }
}
#league-leaders .league-identity strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.league-rank { width: 28px; flex: none; color: #9d854f; font-weight: 700; font-size: 15px; }
.league-identity { flex: 1; min-width: 0; display: grid; gap: 2px; line-height: 1.3; }
.league-identity strong { color: #344f3f; font-size: 12px; overflow-wrap: anywhere; }
.league-identity small { font-size: 10px; color: #7b8274; }
.league-row-points { font-size: 13px; color: #385f47; white-space: nowrap; }
.league-empty { padding: 25px 12px; text-align: center; color: #7b8576; font-size: 12px; line-height: 1.6; }
.league-footer { display: flex; justify-content: space-between; align-items: center; color: #78806e; font-size: 10px; flex: none; }
.league-footer button { width: 32px; height: 28px; margin-left: 4px; border: 1px solid #dfdacb; border-radius: 6px; background: #fff; color: #355942; cursor: pointer; }
.league-panel button:disabled { opacity: .4; cursor: default; }
.league-panel :is(button, select):focus-visible { outline: 2px solid #bd9c52; outline-offset: 2px; }
.league-status { min-height: 14px; margin: 0; font-size: 11px; color: #9c613e; flex: none; }
.league-status:empty { visibility: hidden; }
#league-rules p { color: #62735f; font-size: 12px; line-height: 1.6; margin: 9px 0; }
.league-rule-points { display: flex; gap: 24px; color: #315642; }
.league-rule-points strong { font-size: 22px; }
.league-rule-points small { font-size: 11px; font-weight: 400; }
.league-divisions { display: flex; gap: 7px; flex-wrap: wrap; }
.league-division-badge { display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 5px; border: 1px solid #e5ddca; border-radius: 7px; background: #f8f4e9; color: #66573a; font-size: 10px; white-space: nowrap; }
@media (max-width: 760px) {
  .training-home .league-panel { gap: 8px; padding: 12px; }
  .league-heading { align-items: flex-start; }
  .league-eyebrow { display: none; }
  .league-heading h2 { font-size: 21px; }
  .league-formats button { padding: 7px 3px; font-size: 11px; }
  .league-heading p { font-size: 9px; }
  .league-season-label { width: 120px; flex: none; font-size: 9px; }
  .league-season-label select { padding: 6px 3px; font-size: 10px; }
  .league-summary { gap: 12px; padding: 12px; flex-wrap: wrap; }
  .league-emblem { width: 44px; height: 54px; font-size: 28px; }
  .league-logo-large { width: 44px; height: 52px; }
  .league-progress h3 { font-size: 23px; }
  .league-summary-actions { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .league-summary-actions button { min-height: 34px; padding: 7px 9px; font-size: 11px; }
  .league-summary-actions small { text-align: right; font-size: 9px; }
  .league-views button { padding: 7px; font-size: 11px; }
  .league-row { padding: 7px 8px; gap: 6px; }
  .league-identity strong { font-size: 11px; }
  .league-row-points { font-size: 11px; }
}
@media (max-height: 650px) {
  .training-home .league-panel { gap: 6px; }
  .league-summary { padding: 9px 12px; }
  .league-emblem { display: none; }
  .league-progress h3 { font-size: 20px; }
  .league-progress progress { margin: 4px 0; }
  .league-heading p { margin-top: 2px; }
  .league-row { padding-top: 5px; padding-bottom: 5px; }
}
@media (max-height: 500px) and (min-width: 480px) {
  .training-home .league-panel { display: grid; grid-template-columns: minmax(190px, .7fr) minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr) auto auto; gap: 6px 16px; }
  .league-heading { grid-column: 1 / -1; }
  .league-heading h2 { font-size: 22px; }
  .league-eyebrow { display: none; }
  .league-formats { grid-column: 1 / -1; }
  .league-formats button { padding-top: 4px; padding-bottom: 4px; }
  .league-summary { grid-column: 1; grid-row: 3 / 6; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; }
  .league-summary-actions { display: grid; width: 100%; }
  .league-summary-actions small { text-align: center; }
  .league-views, .league-body, .league-footer { grid-column: 2; }
  .league-status { grid-column: 1 / -1; }
  .league-row { padding: 4px 6px; }
}
@media (max-height: 360px) and (min-width: 480px) {
  .training-home .league-panel { padding: 8px 12px; }
  .league-heading h2 { margin: 0; font-size: 20px; }
  .league-heading p { display: none; }
  .league-season-label { font-size: 0; gap: 0; }
  .league-summary { padding: 6px 8px; gap: 5px; }
  .league-progress progress, .league-progress > small, .league-summary-actions small { display: none; }
  .league-summary-actions button { min-height: 28px; padding: 5px 9px; }
}

.league-status:empty { display: none; }
.league-search { display: flex; align-items: center; gap: 3px; margin: 0; min-width: 0; flex: 1; max-width: 280px; }
.league-search input { min-width: 0; width: 100%; height: 31px; border: 1px solid #d9d1be; border-radius: 6px; background: #fff; padding: 5px 7px; color: #294b37; font: 11px 'DM Sans', sans-serif; }
.league-search button, .league-locate { height: 28px; min-width: 26px; padding: 2px 5px; border: 1px solid #d9d1be; border-radius: 5px; background: #f4f0e5; color: #31573e; cursor: pointer; }
.league-locate { flex: none; }
.league-row.is-found { outline: 2px solid #a58237; outline-offset: -2px; background: #faf1d6; }
@media (max-width: 760px) {
  .league-search { flex-basis: 100%; max-width: none; }
  .league-search input { height: 28px; }
  .league-locate { min-width: 22px; padding: 2px; }
}
@media (max-height: 650px) and (max-width: 479px) {
  .training-home .league-panel { gap: 5px; padding: 8px 10px; }
  .league-heading { height: 35px; align-items: center; }
  .league-heading p, .league-eyebrow { display: none; }
  .league-season-label { font-size: 0; gap: 0; }
  .league-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; padding: 8px; }
  .league-emblem, .league-summary-actions small { display: none; }
  .league-progress > span { display: none; }
  .league-progress h3 { font-size: 20px; }
  .league-progress p { font-size: 11px; }
  .league-progress > small { font-size: 9px; }
  .league-summary-actions { width: auto; }
  .league-summary-actions button { max-width: 96px; min-height: 30px; font-size: 10px; padding: 5px; }
  .league-division-nav { gap: 4px; }
  .league-division-choice small { display: none; }
  .league-zone-key { font-size: 9px; padding: 4px 1px; }
  .league-row-zone { width: 60px; }
}
@media (max-height: 500px) and (min-width: 480px) {
  .training-home .league-panel { grid-template-columns: minmax(140px, .55fr) minmax(0, 1fr); grid-template-rows: 28px 28px 48px minmax(48px, 1fr) 24px; gap: 4px 10px; padding: 8px; }
  .league-heading { grid-column: 1; grid-row: 1; }
  .league-heading > div { display: none; }
  .league-season-label { width: 100%; font-size: 0; gap: 0; }
  .league-formats { grid-column: 2; grid-row: 1; }
  .league-formats button { padding: 3px 1px; font-size: 10px; }
  .league-summary { grid-column: 1; grid-row: 2 / 6; padding: 8px; gap: 6px; }
  .league-summary-actions small { display: none; }
  .league-views { grid-column: 2; grid-row: 2; }
  .league-views button { padding: 4px; font-size: 10px; }
  .league-division-nav { grid-column: 2; grid-row: 3; gap: 2px; }
  .league-division-choice { flex-wrap: nowrap; gap: 4px; }
  .league-division-choice label { gap: 4px; }
  .league-division-choice select { font-size: 10px; padding: 3px; }
  .league-division-choice label { max-width: 105px; min-width: 0; font-size: 0; }
  .league-division-choice select { width: 105px; }
  .league-search { flex-basis: auto; max-width: none; gap: 1px; }
  .league-search input { height: 24px; padding: 2px 4px; font-size: 9px; }
  .league-search button { height: 24px; min-width: 20px; padding: 1px; }
  #league-my-division { font-size: 9px; padding: 2px; }
  .league-division-choice small { display: none; }
  .league-zone-key { padding: 3px 1px; font-size: 9px; }
  .league-body { grid-column: 2; grid-row: 4; }
  .league-footer { grid-column: 2; grid-row: 5; }
  .league-footer button { height: 24px; width: 27px; }
  .league-status { grid-column: 1 / -1; grid-row: 6; }
  .league-row-zone { width: 58px; }
}
