.knockout-page { min-height: 100vh; padding-bottom: 0; }
.knockout-page .app-shell { display: block; }
.knockout-page .main-column { width: 100%; margin-left: 0; padding: 0 clamp(16px, 5vw, 72px); }
.knockout-main { width: min(100%, 1900px); margin: 0 auto; padding: 43px 0 110px; }
.league-season { display: inline-flex; align-items: center; gap: 9px; padding: 10px 13px; border: 1px solid rgba(183,205,232,.14); border-radius: 999px; background: linear-gradient(145deg,rgba(18,29,45,.8),rgba(10,17,28,.66)); font-family:'Space Grotesk',sans-serif; font-size:12px; font-weight:600; letter-spacing:.1em; line-height:1; white-space:nowrap; }
.league-season span { color:#95a3b7; }
.league-season strong { color:#eaf1fb; font:inherit; letter-spacing:inherit; }
.knockout-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin:0 0 25px; padding:0 0 22px; border-bottom:1px solid var(--line); }
.knockout-eyebrow,.knockout-section-heading .section-kicker { display:flex; align-items:center; gap:10px; margin:0 0 10px; color:#8492a7; font-size:9px; font-weight:700; letter-spacing:.18em; }
.knockout-eyebrow span { display:grid; width:25px; height:25px; place-items:center; border:1px solid rgba(98,224,226,.3); border-radius:50%; color:var(--cyan); font-family:'Space Grotesk',sans-serif; font-size:10px; letter-spacing:0; }
.knockout-heading h1 { margin:0; font-family:'Space Grotesk',sans-serif; font-size:clamp(38px,5vw,62px); font-weight:500; letter-spacing:-.065em; line-height:1; }
.knockout-heading h1 span { color:var(--blue); background:linear-gradient(100deg,#9ac3ff 4%,#6e9cf5 54%,#91dbe7 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.knockout-summary { display:flex; align-items:baseline; gap:8px; padding-bottom:4px; color:#8492a7; font-size:8px; font-weight:700; letter-spacing:.13em; }
.knockout-summary strong { color:#e4edf8; font-family:'Space Grotesk',sans-serif; font-size:15px; letter-spacing:0; }
.knockout-summary i { width:1px; height:14px; margin:0 5px; background:rgba(188,208,237,.18); }
.knockout-loading { display:flex; min-height:46px; align-items:center; gap:12px; margin-bottom:18px; color:#b3c3d8; font-size:11px; }
.knockout-loading[hidden],.knockout-error[hidden] { display:none; }
.loading-spinner { width:20px; height:20px; border:2px solid rgba(118,168,255,.18); border-top-color:var(--cyan); border-radius:50%; animation:knockout-spin .8s linear infinite; }
.knockout-error { display:grid; justify-items:start; gap:10px; margin-bottom:22px; padding:20px; border:1px solid rgba(244,132,132,.28); border-radius:12px; color:#aebbd0; background:rgba(68,27,34,.28); font-size:12px; }
.knockout-error strong { color:#ffe3e3; font-size:15px; }
.knockout-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:14px; }
.knockout-section-heading .section-kicker { margin-bottom:6px; color:#718097; }
.knockout-section-heading h2 { margin:0; color:#e5edf7; font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:500; letter-spacing:-.045em; }
.bracket-section { margin-bottom:34px; }
.bracket-note,.leader-scope { color:#8797ad; font-size:8px; font-weight:700; letter-spacing:.1em; }
.bracket-frame { position:relative; min-width:0; }
.bracket-scroll { overflow-x:auto; padding:10px 0 14px; overscroll-behavior-x:contain; scrollbar-color:rgba(123,150,185,.35) transparent; scrollbar-width:thin; }
.bracket-scroll-cues { position:absolute; z-index:2; inset:10px 0 14px; display:flex; justify-content:space-between; overflow:hidden; opacity:0; pointer-events:none; transition:opacity 180ms ease; }
.bracket-frame.has-overflow .bracket-scroll-cues { opacity:1; }
.bracket-scroll-cue { display:grid; width:36px; flex:0 0 36px; place-items:center; background:linear-gradient(90deg,rgba(7,12,21,.96),rgba(7,12,21,.52) 58%,transparent); transition:opacity 180ms ease; }
.bracket-scroll-cue.is-right { background:linear-gradient(270deg,rgba(7,12,21,.96),rgba(7,12,21,.52) 58%,transparent); }
.bracket-scroll-cue::before { width:11px; height:11px; border-top:2px solid rgba(167,196,234,.78); border-right:2px solid rgba(167,196,234,.78); content:''; filter:drop-shadow(0 1px 3px rgba(0,0,0,.7)); transform:rotate(45deg); }
.bracket-scroll-cue.is-left::before { transform:rotate(225deg); }
.bracket-frame:not(.can-scroll-left) .bracket-scroll-cue.is-left,.bracket-frame:not(.can-scroll-right) .bracket-scroll-cue.is-right { opacity:0; }
.bracket-grid { position:relative; display:grid; width:100%; min-width:1380px; grid-template-columns:minmax(160px,1.25fr) minmax(150px,1.18fr) minmax(132px,1fr) minmax(132px,1fr) minmax(150px,1.1fr) minmax(132px,1fr) minmax(132px,1fr) minmax(150px,1.18fr) minmax(160px,1.25fr); grid-template-rows:26px repeat(8,48px); align-items:center; column-gap:clamp(12px,1.2vw,24px); row-gap:7px; margin:0 auto; padding:5px 4px 8px; }
.bracket-connectors { position:absolute; z-index:0; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.bracket-column-label { position:relative; z-index:1; justify-self:stretch; align-self:center; overflow:hidden; color:#8494aa; font-size:8px; font-weight:800; letter-spacing:.12em; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.bracket-column-label.is-final { color:#f4cb78; text-align:center; }
.bracket-cup { width:clamp(78px,6vw,96px); height:108px; align-self:start; justify-self:center; margin-top:14px; object-fit:contain; filter:drop-shadow(0 5px 12px rgba(244,203,120,.24)); }
.bracket-cell { position:relative; z-index:1; display:flex; width:100%; height:66px; min-width:0; align-self:center; flex-direction:column; justify-content:center; gap:3px; padding:5px 7px; border:1px solid rgba(188,208,237,.15); border-radius:6px; background:linear-gradient(145deg,rgba(18,29,45,.82),rgba(9,16,26,.95)); box-shadow:0 5px 14px rgba(0,0,0,.12); }
.bracket-cell.is-reviewable { cursor:pointer; transition:border-color 150ms ease,box-shadow 150ms ease,transform 150ms ease; }
.bracket-cell.is-reviewable:hover,.bracket-cell.is-reviewable:focus-visible { z-index:2; border-color:rgba(98,224,226,.58); box-shadow:0 0 0 2px rgba(98,224,226,.12),0 8px 20px rgba(0,0,0,.25); outline:none; }
.bracket-cell.is-final { height:76px; align-items:stretch; border-color:rgba(244,203,120,.32); background:radial-gradient(ellipse at 50% 0,rgba(244,203,120,.12),transparent 78%),linear-gradient(145deg,rgba(31,30,28,.9),rgba(12,16,22,.96)); }
.bracket-cell.is-playoff { padding:6px; border-color:rgba(107,157,255,.2); background:linear-gradient(145deg,rgba(18,31,53,.84),rgba(9,16,26,.94)); }
.bracket-cell.is-playoff .bracket-team { font-size:8px; }
.bracket-cell.is-playoff .bracket-team img { width:19px; height:19px; }
.bracket-team { display:flex; min-width:0; min-height:24px; align-items:center; gap:6px; color:#dce6f2; font-size:9px; font-weight:600; }
.bracket-team img { width:21px; height:21px; flex:0 0 auto; object-fit:contain; }
.bracket-team span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bracket-team.is-tbd { color:#627188; }
.bracket-team.is-winner { color:#f4cb78; }
.bracket-score { display:grid; min-width:24px; height:22px; place-items:center; margin-left:auto; padding:0 4px; border:1px solid rgba(188,208,237,.15); border-radius:6px; color:#f0f5fc; background:rgba(255,255,255,.045); font-family:'Space Grotesk',sans-serif; font-size:10px; font-weight:700; font-variant-numeric:tabular-nums; }
.bracket-score.is-recorded { border-color:rgba(118,168,255,.35); color:#d9e8ff; background:linear-gradient(145deg,rgba(80,125,194,.27),rgba(47,76,119,.3)); box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 2px 6px rgba(0,0,0,.16); }
.bracket-score.is-pending { border-color:rgba(188,208,237,.08); color:#627188; background:rgba(255,255,255,.015); font-size:9px; }
.bracket-cell.is-final .bracket-team { font-size:10px; }
.bracket-cell.is-final .bracket-team img { width:22px; height:22px; }
.bracket-champion { position:relative; z-index:1; display:flex; min-height:48px; align-items:center; justify-self:center; gap:10px; padding:10px 18px; border:1px solid rgba(244,203,120,.38); border-radius:9px; color:#f4cb78; background:linear-gradient(145deg,rgba(67,51,25,.42),rgba(18,24,34,.9)); box-shadow:0 6px 20px rgba(0,0,0,.22); font:inherit; font-size:11px; font-weight:800; letter-spacing:.07em; text-align:left; white-space:nowrap; cursor:pointer; transition:border-color 150ms ease,background 150ms ease,transform 150ms ease,box-shadow 150ms ease; }
.bracket-champion:hover { transform:translateY(-2px); border-color:rgba(244,203,120,.72); background:linear-gradient(145deg,rgba(92,69,32,.5),rgba(22,29,40,.96)); box-shadow:0 9px 24px rgba(0,0,0,.28),0 0 16px rgba(244,203,120,.12); }
.bracket-champion:focus-visible { outline:2px solid #f4cb78; outline-offset:3px; }
.bracket-champion img { width:30px; height:30px; object-fit:contain; }
.leaders-section { margin-bottom:36px; }
.team-of-season-section { margin-bottom:36px; }
.team-of-season-section[hidden] { display:none; }
.team-of-season-formation { position:relative; display:grid; gap:20px; overflow:hidden; padding:26px 18px; border:1px solid rgba(115,190,154,.25); border-radius:14px; background:radial-gradient(ellipse at 50% 0,rgba(71,151,108,.2),transparent 72%),linear-gradient(180deg,rgba(19,63,48,.7),rgba(9,35,30,.8)); }
.team-of-season-formation::before { position:absolute; inset:12px; border:1px solid rgba(173,220,186,.14); border-radius:10px; content:''; pointer-events:none; }
.team-of-season-row { position:relative; z-index:1; display:grid; justify-items:center; gap:12px; }
.team-of-season-row.is-attacking-midfield { grid-template-columns:repeat(3,minmax(0,1fr)); }
.team-of-season-row.is-striker,.team-of-season-row.is-goalkeeper { grid-template-columns:minmax(0,1fr); }
.team-of-season-row.is-defensive-midfield { grid-template-columns:repeat(4,minmax(0,1fr)); }
.team-of-season-row.is-defensive-midfield .team-of-season-player:first-child { grid-column:2; }
.team-of-season-row.is-defensive-midfield .team-of-season-player:last-child { grid-column:3; }
.team-of-season-row.is-defense { grid-template-columns:repeat(4,minmax(0,1fr)); }
.team-of-season-player { display:grid; width:min(100%,160px); justify-items:center; gap:5px; padding:10px 8px; border:1px solid rgba(196,225,202,.13); border-radius:11px; background:linear-gradient(145deg,rgba(8,24,24,.82),rgba(7,18,24,.88)); box-shadow:0 7px 20px rgba(0,0,0,.18); text-align:center; }
.team-of-season-position { color:#b5e3bd; font-size:8px; font-weight:800; letter-spacing:.14em; }
.team-of-season-face { width:48px; height:48px; border:1px solid rgba(198,223,204,.18); border-radius:50%; object-fit:cover; background:rgba(255,255,255,.05); }
.team-of-season-face.is-fallback { display:grid; place-items:center; color:#d5ead8; font-size:12px; font-weight:700; }
.team-of-season-name { max-width:100%; overflow:hidden; color:#f0f5f0; font-size:10px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.team-of-season-club { display:flex; min-width:0; max-width:100%; align-items:center; gap:5px; color:#9cafac; font-size:8px; }
.team-of-season-badge { width:14px; height:14px; flex:0 0 auto; object-fit:contain; }
.team-of-season-club span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.team-of-season-empty { position:relative; z-index:1; margin:0; padding:24px 14px; color:#bdcbbb; font-size:11px; line-height:1.6; text-align:center; }
.round-section { margin-bottom:20px; }
.round-heading { align-items:flex-end; margin-bottom:14px; }
.round-controls { display:flex; align-items:center; gap:10px; color:#b8c5d6; font-size:8px; font-weight:700; letter-spacing:.11em; }
.round-arrow { display:grid; width:31px; height:31px; place-items:center; border:1px solid rgba(188,208,237,.16); border-radius:8px; color:#dce6f2; background:rgba(18,29,45,.72); font-size:20px; cursor:pointer; }
.round-arrow:hover:not(:disabled) { border-color:rgba(98,224,226,.42); color:var(--cyan); }
.round-arrow:disabled { color:#59677a; cursor:not-allowed; opacity:.5; }
.round-status { min-height:18px; margin:-4px 0 12px; color:#8292a8; font-size:9px; }
.tie-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.tie-list.is-final-round { grid-template-columns:minmax(0,1fr); }
.tie-card { min-width:0; padding:14px; border:1px solid rgba(188,208,237,.11); border-radius:11px; background:linear-gradient(145deg,rgba(18,29,45,.78),rgba(9,16,26,.92)); }
.tie-list.is-final-round .tie-card { width:min(100%,780px); justify-self:center; padding:24px clamp(20px,5vw,44px); border-color:rgba(244,203,120,.32); background:radial-gradient(ellipse at 50% 0,rgba(244,203,120,.1),transparent 74%),linear-gradient(145deg,rgba(18,29,45,.9),rgba(9,16,26,.96)); }
.tie-list.is-final-round .tie-topline { margin-bottom:16px; font-size:10px; }
.tie-list.is-final-round .leg-section { gap:12px; padding:16px 0; }
.tie-list.is-final-round .leg-label { color:#b5c5d9; font-size:9px; text-align:center; }
.tie-list.is-final-round .leg-teams { gap:10px; }
.tie-list.is-final-round .leg-team { gap:11px; font-size:14px; }
.tie-list.is-final-round .leg-team img { width:30px; height:30px; }
.tie-list.is-final-round .leg-team-score { min-width:30px; font-size:20px; }
.tie-list.is-final-round .tie-leg-action { min-height:42px; font-size:11px; }
.tie-list.is-final-round .tie-winner { gap:10px; font-size:12px; }
.tie-list.is-final-round .tie-winner img { width:28px; height:28px; }
.tie-card.is-complete { border:2px solid rgba(92,190,148,.68); box-shadow:0 0 0 1px rgba(92,190,148,.16),0 0 12px rgba(92,190,148,.1); }
.tie-card.is-selected { border-color:rgba(98,224,226,.52); box-shadow:inset 0 0 0 1px rgba(98,224,226,.1); }
.tie-card.is-complete.is-selected { border-color:rgba(92,190,148,.72); box-shadow:0 0 0 1px rgba(98,224,226,.24),0 0 0 3px rgba(92,190,148,.12),inset 0 0 0 1px rgba(92,190,148,.16); }
.tie-topline { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:11px; color:#8492a7; font-size:8px; font-weight:700; letter-spacing:.08em; }
.tie-topline .tie-state { color:#72cba8; }
.tie-topline .tie-state.is-in-progress { color:#91baff; }
.tie-topline .tie-state:not(:first-child) { text-align:right; }
.tie-aggregate { display:grid; grid-template-columns:minmax(0,1fr); gap:5px; margin-bottom:11px; padding:9px 10px 9px 12px; border:1px solid rgba(112,164,255,.28); border-left:3px solid #78a8ff; border-radius:7px; color:#cbd8e8; background:linear-gradient(105deg,rgba(49,83,133,.25),rgba(24,43,69,.42)); box-shadow:inset 0 1px 0 rgba(255,255,255,.035); font-size:8px; }
.tie-aggregate-label { color:#a9c8f6; font-size:7px; font-weight:800; letter-spacing:.12em; }
.tie-aggregate-rows { display:grid; gap:4px; }
.tie-aggregate-team { display:flex; min-width:0; align-items:center; gap:8px; color:#cbd7e6; font-size:10px; font-weight:600; }
.tie-aggregate-team img { width:22px; height:22px; flex:0 0 auto; object-fit:contain; }
.tie-aggregate-team span { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tie-aggregate-team strong { display:grid; min-width:24px; height:22px; place-items:center; padding:0 5px; border:1px solid rgba(188,208,237,.17); border-radius:5px; color:#f0f5fc; background:rgba(5,12,22,.48); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); font-family:'Space Grotesk',sans-serif; font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; }
.tie-aggregate-team.is-tbd { color:#64738a; }
.leg-section { display:grid; grid-template-columns:minmax(0,1fr); align-items:center; gap:8px; padding:10px 0; border-top:1px solid rgba(188,208,237,.07); }
.leg-section:first-of-type { border-top:0; }
.leg-label { grid-column:1/-1; color:#8595aa; font-size:7px; font-weight:800; letter-spacing:.12em; }
.leg-teams { display:grid; gap:5px; min-width:0; }
.leg-team { display:flex; min-width:0; align-items:center; gap:7px; color:#cbd7e6; font-size:9px; font-weight:600; }
.leg-team img { width:20px; height:20px; flex:0 0 auto; object-fit:contain; }
.leg-team span { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.leg-team.is-tbd { color:#64738a; }
.leg-team-score { min-width:18px; color:#fff; font-family:'Space Grotesk',sans-serif; font-size:12px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }
.leg-team-score.is-pending { color:#63738a; font-size:10px; }
.leg-extra { grid-column:1/-1; display:flex; align-items:center; gap:7px; color:#e4c46f; font-size:8px; font-weight:700; }
.leg-extra.is-penalties { color:#a9c9ff; }
.leg-extra[hidden] { display:none; }
.tie-winner { display:flex; align-items:center; gap:7px; padding-top:8px; border-top:1px solid rgba(244,203,120,.18); color:#f4cb78; font-size:9px; font-weight:700; }
.tie-winner img { width:20px; height:20px; object-fit:contain; }
.tie-winner-penalties { color:#a9c9ff; font-size:8px; font-weight:600; }
.tie-leg-action { display:flex; width:100%; min-height:32px; align-items:center; justify-content:center; padding:0 10px; border:1px solid rgba(98,224,226,.3); border-radius:7px; color:#a9e7e4; background:rgba(40,103,108,.13); font:inherit; font-size:8px; font-weight:700; cursor:pointer; transition:background 150ms ease,border-color 150ms ease,opacity 150ms ease; }
.tie-leg-action:hover:not(:disabled) { border-color:rgba(98,224,226,.52); background:rgba(40,103,108,.28); }
.tie-leg-action[data-action="review"] { border-color:rgba(130,159,199,.16); color:#899bb3; background:rgba(45,69,101,.12); }
.tie-leg-action[data-action="review"]:hover:not(:disabled) { border-color:rgba(130,159,199,.24); color:#9aacc4; background:rgba(45,69,101,.2); }
.tie-leg-action:disabled { border-color:rgba(188,208,237,.1); color:#64738a; background:rgba(255,255,255,.018); opacity:.58; cursor:not-allowed; }
.simulation-dock { position:fixed; z-index:5; right:0; bottom:0; left:0; display:flex; min-height:76px; align-items:center; justify-content:flex-end; gap:10px; padding:12px clamp(16px,5vw,72px); border-top:1px solid rgba(188,208,237,.14); background:rgba(7,12,21,.94); box-shadow:0 -12px 40px rgba(0,0,0,.27); backdrop-filter:blur(18px); }
.simulation-dock-status { min-width:0; flex:1; overflow:hidden; color:#90a0b5; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.simulation-button { display:inline-flex; min-height:39px; align-items:center; justify-content:center; padding:0 14px; border:1px solid rgba(188,208,237,.17); border-radius:8px; color:#dce6f2; background:rgba(23,35,52,.88); font-size:10px; font-weight:700; text-decoration:none; white-space:nowrap; cursor:pointer; transition:border-color 150ms ease,background 150ms ease,opacity 150ms ease; }
.simulation-button:hover:not(:disabled) { border-color:rgba(98,224,226,.52); background:rgba(35,61,75,.88); }
.simulation-button:disabled { opacity:.42; cursor:not-allowed; }
.simulation-button-primary { border-color:rgba(117,168,255,.52); color:#091421; background:linear-gradient(112deg,#b4d6ff,#7eabff 58%,#89c9f3); }
.simulation-button-primary:hover:not(:disabled) { background:linear-gradient(112deg,#c4e0ff,#91b7ff 58%,#9bd5f5); }
.simulation-button-knockout { border-color:rgba(244,203,120,.25); color:#f4cb78; background:rgba(67,51,25,.34); }
.match-modal-shell { grid-template-rows:auto auto auto auto auto minmax(0,1fr) auto; }
.match-modal-shell:has(.match-aggregate[hidden]) { grid-template-rows:auto auto auto auto minmax(0,1fr) auto; }
.match-modal-shell:has(.match-modal-footer[hidden]) { grid-template-rows:auto auto auto auto auto minmax(0,1fr); }
.match-modal-shell:has(.match-modal-footer[hidden]):has(.match-aggregate[hidden]) { grid-template-rows:auto auto auto auto minmax(0,1fr); }
.match-leg-toggle { display:flex; justify-self:center; gap:4px; margin:9px 16px 3px; padding:3px; border:1px solid rgba(188,208,237,.12); border-radius:8px; background:rgba(9,17,29,.72); }
.match-leg-option { min-width:88px; padding:7px 12px; border:1px solid transparent; border-radius:6px; color:#91a1b7; background:transparent; font:inherit; font-size:9px; font-weight:700; cursor:pointer; transition:color 150ms ease,border-color 150ms ease,background 150ms ease,opacity 150ms ease; }
.match-leg-option.is-active { border-color:rgba(98,224,226,.24); color:#c8f4ef; background:rgba(40,103,108,.25); }
.match-leg-option:disabled { color:#526178; opacity:.5; cursor:not-allowed; }
.match-leg-option:focus-visible { outline:2px solid rgba(98,224,226,.7); outline-offset:2px; }
.match-aggregate { padding:8px 26px 8px; color:#91a5bf; font-size:9px; font-weight:600; letter-spacing:.04em; text-align:center; }
.match-aggregate[hidden] { display:none; }
.match-aggregate strong { margin-left:8px; color:#eef4fc; font-family:'Space Grotesk',sans-serif; font-size:11px; letter-spacing:0; }
.timeline-period.is-penalty svg { color:#9cc8ff; }
.timeline-period.is-penalty .period-score { font-size:9px; }
.leader-row.is-tournament-leader { position:relative; margin-inline:-13px; padding-inline:13px; border-bottom-color:rgba(244,203,120,.28); background:linear-gradient(90deg,rgba(244,203,120,.12),rgba(244,203,120,.035) 68%,transparent); }
.leader-row.is-tournament-leader .leader-rank,.leader-row.is-tournament-leader .leader-value { color:#f4cb78; font-weight:800; }
.leader-row.is-tournament-leader .leader-player { color:#fff4d7; }
.champion-dialog { position:fixed; inset:0; width:min(540px,calc(100% - 28px)); max-width:540px; max-height:calc(100vh - 32px); margin:auto; padding:0; overflow:auto; border:1px solid rgba(244,203,120,.35); border-radius:20px; color:#fff; background:radial-gradient(ellipse at 50% 0,rgba(244,203,120,.23),transparent 65%),linear-gradient(145deg,#172033,#080d17); box-shadow:0 30px 100px rgba(0,0,0,.75); }
.champion-dialog::backdrop { background:rgba(1,4,10,.82); backdrop-filter:blur(8px); }
.champion-content { position:relative; z-index:1; display:grid; justify-items:center; padding:42px 28px 34px; text-align:center; animation:champion-rise .7s cubic-bezier(.2,.8,.2,1) both; }
.champion-cup { font-size:66px; filter:drop-shadow(0 0 22px rgba(244,203,120,.42)); animation:champion-bounce 1.8s ease-in-out infinite; }
.champion-kicker { margin:17px 0 8px; color:#f4cb78; font-size:9px; font-weight:800; letter-spacing:.2em; }
.champion-content h2 { margin:0; color:#fff; font-family:'Space Grotesk',sans-serif; font-size:clamp(34px,8vw,52px); letter-spacing:-.06em; }
.champion-team { display:flex; align-items:center; gap:12px; margin-top:19px; color:#f4cb78; font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:700; }
.champion-team img { width:40px; height:40px; object-fit:contain; }
.champion-copy { margin:10px 0 0; color:#a9b6c8; font-size:11px; }
.champion-confetti { position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(circle,#f4cb78 1.5px,transparent 2px),radial-gradient(circle,#8fc4ff 2px,transparent 3px),radial-gradient(circle,#7ad4b3 1.5px,transparent 2px); background-size:92px 110px,131px 140px,170px 130px; animation:confetti-fall 5s linear infinite; opacity:.5; }
@keyframes knockout-spin { to { transform:rotate(360deg); } }
@keyframes champion-rise { from { opacity:0; transform:translateY(24px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes champion-bounce { 0%,100% { transform:translateY(0) rotate(-3deg); } 50% { transform:translateY(-8px) rotate(3deg); } }
@keyframes confetti-fall { from { background-position:0 -160px,20px -240px,60px -120px; } to { background-position:40px 560px,90px 720px,10px 680px; } }
@media (max-width:800px) { .bracket-grid { min-width:1380px; } .leaders-grid { gap:9px; } }
@media (max-width:760px) { .knockout-main { padding-top:30px; padding-bottom:130px; } .knockout-heading { align-items:flex-start; flex-direction:column; gap:14px; padding-bottom:18px; } .knockout-heading h1 { font-size:clamp(39px,11vw,52px); } .knockout-section-heading h2 { font-size:20px; } .leaders-grid { grid-template-columns:1fr; } .tie-list { grid-template-columns:1fr; } .team-of-season-formation { gap:13px; padding:18px 8px; } .team-of-season-row { gap:5px; } .team-of-season-player { padding:8px 4px; } .team-of-season-face { width:38px; height:38px; } .team-of-season-name { font-size:8px; } .team-of-season-club { font-size:7px; } .round-heading { align-items:flex-start; flex-direction:column; } .simulation-dock { flex-wrap:wrap; justify-content:stretch; gap:7px; padding:9px 12px; } .simulation-dock-status { min-width:0; flex:1 1 120px; } .simulation-dock-actions { display:grid; flex:1 0 100%; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; } .simulation-dock-actions .simulation-button { width:100%; min-width:0; padding:0 8px; font-size:9px; } .timeline-period.is-penalty { grid-template-columns:22px minmax(0,1fr); } .timeline-period.is-penalty .period-score { overflow:visible; text-overflow:clip; white-space:normal; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }