:root { color-scheme: dark; font-family: "Yu Gothic UI", "Hiragino Sans", system-ui, sans-serif; color: #f7f7f7; background: #030714; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: radial-gradient(ellipse at top left, #15203b 0, transparent 60%); min-height: 100svh; }
button, select { font: inherit; }
a { color: inherit; }
.league-app { width: min(2112px, calc(100vw - 16px), calc((100svh - 24px) * 16 / 9)); aspect-ratio: 16 / 9; margin: max(4px, calc((100svh - min(1188px, (100vw - 16px) * 9 / 16, 100svh - 24px)) / 2)) auto; padding: 0 18px 18px; border: 1px solid #354469; background: #04091d; position: relative; display: flex; flex-direction: column; }
.embedded .league-app { width: 100%; height: 100svh; aspect-ratio: auto; margin: 0; border: 0; }
.embedded footer { display: none; }
.league-app > footer { position: absolute; top: 100%; right: 0; margin-top: 4px; }
.page-header { display: flex; align-items: center; gap: 24px; padding: 12px 24px; margin: 0 -18px; background: linear-gradient(110deg, #13213b, #060c20 58%); border-bottom: 1px solid #30415e; min-height: 70px; box-shadow: inset 0 1px #ffffff08; }
.eyebrow { margin: 0 0 8px; color: #99a9c9; font: 700 11px/1.4 Arial, sans-serif; letter-spacing: .15em; }
h1 { margin: 0; font: 800 clamp(22px, 2.4vw, 34px)/1.2 Arial, sans-serif; letter-spacing: .12em; }
nav { display: flex; gap: 8px; flex-wrap: wrap; }
nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border: 1px solid #354469; border-radius: 4px; background: linear-gradient(#19243b, #101a31); box-shadow: inset 0 1px #ffffff08; text-decoration: none; font-size: 13px; font-weight: 700; transition: background .2s ease, border-color .2s ease; }
nav a:hover { background: #202e4b; }
.league-tabs { display: flex; gap: 4px; padding: 4px; border: 1px solid #293650; border-radius: 6px; background: #080f24; margin-right: auto; }
.league-tabs button { padding: 9px 16px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: #9cabc6; font-size: 12px; font-weight: 800; cursor: pointer; letter-spacing: .08em; }
.league-tabs button:hover { background: #ffffff08; }
.league-tabs [data-league="A"][aria-selected="true"] { color: #f18a92; background: #d8687218; border-color: #d8687255; }
.league-tabs [data-league="B"][aria-selected="true"] { color: #91b9ff; background: #689bff18; border-color: #689bff55; }
html:not([data-league="A"]) .overview { border-image: linear-gradient(90deg, #689bff, #689bff30 65%, #689bff08) 1; background: radial-gradient(ellipse at left bottom, #689bff09, transparent 65%); }
html:not([data-league="A"]) .overview h2 { color: #91b9ff; }
html:not([data-league="A"]) progress { accent-color: #689bff; }
:focus-visible { outline: 2px solid #b8c9ef; outline-offset: 3px; }
.overview { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 4px 12px; border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, #d86872, #d8687230 65%, #d8687208) 1; background: radial-gradient(ellipse at left bottom, #d8687209, transparent 65%); }
.overview h2 { color: #f18a92; font: 800 26px/1.4 Arial, sans-serif; letter-spacing: .08em; margin: 0; }
.overview h2 span { color: #bcc6db; font-size: 15px; margin-left: 16px; font-weight: 500; }
.progress { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 5px 12px; min-width: 180px; }
.progress strong { font: 800 28px Arial, sans-serif; font-variant-numeric: tabular-nums; }
.progress span { font-size: 12px; color: #b1bbd0; }
progress { grid-column: 1 / -1; width: 100%; height: 5px; accent-color: #dd7782; }
.notice { min-height: 16px; margin: 10px 0; color: #9caccc; font-size: 12px; }
.notice.error { color: #ffb5ad; }
.content { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 16px; flex: 1; min-height: 0; overflow: auto; margin-top: 16px; }
.standings-panel, .matches-panel { min-width: 0; padding: clamp(10px, 1.2vw, 22px); background: linear-gradient(155deg, #101a30, #080f24 45%); border: 1px solid #293650; border-radius: 6px; box-shadow: inset 0 1px #ffffff05, 0 8px 24px #00000016; }
.section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.section-heading h2 { margin: 0; font-size: 19px; display: flex; align-items: center; gap: 10px; }
.section-heading h2::before { content: ''; width: 3px; height: 16px; border-radius: 2px; background: #8299bd; }
.section-heading::after { content: ''; height: 1px; background: linear-gradient(90deg, #7189af30, transparent); flex: 1; }
.section-heading span { order: 1; }
#standings tr { background: linear-gradient(90deg, color-mix(in srgb, var(--team-color) 7%, transparent), transparent 65%); }
#standings tr:hover { background-color: #a4bce608; }
#standings td:nth-child(2) { border-left: 2px solid color-mix(in srgb, var(--team-color) 50%, transparent); padding-left: 14px; }
.section-heading span { color: #94a4c5; font-size: 12px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
th { color: #95a5c7; font-size: 11px; font-weight: 600; white-space: nowrap; text-align: center; padding: 10px 8px; }
th:nth-child(2) { text-align: left; }
td { border-top: 1px solid #202b44; padding: clamp(8px, 1.1vh, 16px) 8px; text-align: center; }
td:nth-child(2) { text-align: left; min-width: 130px; }
.rank { font: 700 23px Arial, sans-serif; color: #b3c0dd; }
.team-id { color: var(--team-color); font: 800 11px Arial, sans-serif; letter-spacing: .08em; }
.team-name { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.wins { font: 800 26px Arial, sans-serif; }
.help { color: #96a6c5; font-size: 12px; line-height: 1.8; }
.matches { display: grid; gap: 12px; }
.match { padding: 14px 16px; border: 1px solid #28334c; background: #0b142a; border-radius: 4px; }
.match.is-complete { border-color: #3d5961; }
.match-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 8px; color: #93a4c5; font-size: 11px; }
.match-state { color: #bdc8df; }
.is-complete .match-state { color: #9ed9c6; }
.match-body { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
.match-team:last-child { text-align: right; }
.match-team .team-name { font-size: 13px; }
.score { display: flex; gap: 8px; align-items: center; }
.score span { color: #71829f; }
.score strong { min-width: 28px; text-align: center; font: 800 30px/1.3 Arial, sans-serif; font-variant-numeric: tabular-nums; }
.match-life { margin-top: 12px; color: #8e9fbe; text-align: center; font-size: 11px; }
.match-life span { color: #c2cde1; font-variant-numeric: tabular-nums; }
.team-faces { display: flex; gap: 12px; margin-top: 10px; }
.team-faces a { position: relative; display: block; width: clamp(26px, 2.2vw, 42px); aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 2px color-mix(in srgb, var(--team-color) 55%, white); transition: box-shadow .24s ease, transform .24s ease; }
.team-faces a:hover { box-shadow: 0 0 0 2px var(--team-color), 0 0 10px color-mix(in srgb, var(--team-color) 45%, transparent); transform: scale(1.04); }
.team-faces img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.team-faces svg { position: absolute; width: 16px; height: 12px; right: -4px; bottom: -2px; }
.matrix { table-layout: fixed; height: min(49vh, 550px); }
.matrix th { white-space: normal; padding: 8px 4px; }
.matrix th:nth-child(2) { text-align: center; }
.matrix .team-name { font-size: clamp(10px, .85vw, 14px); }
.matrix td { min-width: 0; border: 1px solid #26314a; padding: 8px 3px; text-align: center; }
.matrix .diagonal { background: repeating-linear-gradient(135deg, #0a1224, #0a1224 8px, #121d3055 8px, #121d3055 9px); color: #43526d; }
.matrix thead th:not(:first-child) { border-bottom: 2px solid color-mix(in srgb, var(--team-color) 55%, transparent); }
.matrix tbody tr:hover td:not(.diagonal) { background-color: #a4bce606; }
.result strong { display: block; font: 800 clamp(22px, 2vw, 36px)/1.3 Arial, sans-serif; }
.result span, .result small { display: block; margin-top: 4px; font-size: 11px; color: #9caecb; }
.result.complete { background: #121f35; }
.result.complete span { color: #dce6f8; }
footer { color: #7785a2; font-size: 11px; text-align: right; margin-top: 18px; }
@media (max-width: 1100px) { .league-app { width: 100%; height: 100svh; aspect-ratio: auto; margin: 0; } .content { grid-template-columns: 1fr; } .matrix { height: 440px; } }
@media (max-width: 600px) {
  .league-app { padding: 0 12px 12px; }
  .page-header { align-items: start; flex-direction: column; padding: 14px; gap: 10px; margin: 0 -12px; }
  .overview { align-items: start; flex-direction: column; }
  .progress { width: 100%; }
  .standings-panel, .matches-panel { padding: 14px; }
  .section-heading { flex-wrap: wrap; gap: 6px; }
  .match { padding: 12px 10px; }
  .match-body { gap: 6px; }
  .score { gap: 4px; }
  .match-team .team-name { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .team-faces a, nav a { transition: none; } }