/* Public presentation only. Every result, route and queue still comes from the server. */
.tournament-page { position: relative; isolation: isolate; }
.tournament-heading { position: relative; }
.tournament-atmosphere { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.tournament-atmosphere > span { position: absolute; width: 640px; height: 440px; top: 30px; right: -230px; border: 1px solid #afd8c10d; background: radial-gradient(ellipse, #afd8c105, transparent 65%); animation: court-drift 28s ease-in-out infinite alternate paused; }
.tournament-atmosphere > span::before { content: ''; position: absolute; inset: 18%; border: 1px solid #afd8c110; }
.tournament-atmosphere > span::after { content: ''; position: absolute; inset: 0 50% 0 auto; border-left: 1px solid #afd8c112; }
.tournament-atmosphere > i { position: absolute; top: 160px; left: 8%; width: 3px; height: 3px; border-radius: 50%; background: #d9c58b; opacity: .22; animation: atmosphere-float 18s ease-in-out infinite alternate paused; }
.tournament-atmosphere > i:nth-of-type(2) { top: 470px; left: 87%; animation-delay: -8s; background: #bde5ce; }
.tournament-atmosphere > i:nth-of-type(3) { top: 720px; left: 65%; animation-delay: -13s; }
.tournament-atmosphere > .motion-visible { animation-play-state: running; }

.tournament-champion { position: relative; isolation: isolate; padding: 34px 24px 32px; border: 1px solid #d1b1739c; border-radius: 22px; background: radial-gradient(ellipse at 50% 5%, #dec48a14, transparent 68%), linear-gradient(160deg, #203e33, #132a24 80%); box-shadow: 0 24px 60px #0003, inset 0 1px #fff1cf12; }
.tournament-champion::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 22%, #e8cf8b23, transparent 62%); opacity: .4; }
.tournament-champion::after { content: none; animation: none; }
.champion-court { position: absolute; inset: 38px -6%; border: 1px solid #d6c3900f; transform: rotate(-13deg); pointer-events: none; z-index: -1; }
.champion-court::before { content: ''; position: absolute; inset: 24% 14%; border: 1px solid #d6c39013; }
.champion-court::after { content: ''; position: absolute; inset: 0 50% 0 auto; border-left: 1px solid #c5dfc91c; }
.champion-court span { position: absolute; inset: 50% 0 auto; border-top: 1px solid #c5dfc914; }
.champion-trophy { display: block; width: 94px; height: 106px; margin: 0 auto 22px; overflow: visible; }
.tournament-champion .champion-brand { color: #e1c78f; font-size: 14px; letter-spacing: .24em; margin: 0 0 16px; }
.tournament-champion h2 { max-width: 21ch; margin: 0 auto 26px; font-size: clamp(25px, 4.3vw, 44px); line-height: 1.15; letter-spacing: -.025em; text-wrap: balance; }
.tournament-champion .champion-team { position: relative; color: #fff1cc; font-size: clamp(30px, 5.2vw, 56px); font-weight: 750; line-height: 1.15; letter-spacing: -.03em; margin: 0 0 14px; text-wrap: balance; }
.champion-players { color: #d5e7d9; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.5; margin: 0 auto; max-width: 36ch; }
.champion-sweep { position: absolute; pointer-events: none; top: -30%; left: -45%; width: 34%; height: 160%; background: linear-gradient(90deg, transparent, #e8d6a318, transparent); opacity: 0; transform: rotate(18deg); }
.champion-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.champion-particles i { position: absolute; top: 26%; left: calc(7% + var(--particle) * 9%); width: 3px; height: 7px; background: #d5b879; border-radius: 1px; opacity: 0; }
.champion-particles i:nth-child(even) { background: #b7dfc8; width: 4px; height: 4px; border-radius: 50%; }
.champion-reveal::before { animation: champion-light 2600ms ease-out both; }
.champion-reveal .champion-trophy { animation: trophy-arrive 700ms cubic-bezier(.2,.7,.3,1) 80ms both; }
.champion-reveal .champion-brand { animation: podium-copy 500ms ease-out 150ms both; }
.champion-reveal h2 { animation: podium-copy 600ms ease-out 230ms both; }
.champion-reveal .champion-team { animation: podium-name 650ms cubic-bezier(.2,.7,.3,1) 330ms both; }
.champion-reveal .champion-players { animation: podium-copy 600ms ease-out 480ms both; }
.champion-reveal .champion-sweep { animation: podium-sweep 1700ms ease-out 220ms both; }
.champion-reveal .champion-particles i { animation: celebration-fall 1600ms ease-out calc(700ms + var(--particle) * 28ms) both; }

.bracket-match.inprogress { animation: none; border-color: #a7e9c9; box-shadow: 0 0 0 1px #9ee8cb10, 0 6px 22px #082a1d33; }
.bracket-match.inprogress::before { content: ''; position: absolute; inset: 0; border: 1px solid #c0f4d8; border-radius: inherit; pointer-events: none; opacity: .35; animation: live-halo 3600ms ease-in-out infinite paused; z-index: 2; }
.bracket-match.inprogress header { position: relative; overflow: hidden; }
.bracket-match.inprogress header::after { content: ''; position: absolute; top: 0; bottom: 0; width: 32%; left: -36%; background: linear-gradient(90deg, transparent, #b5ebcd12, transparent); pointer-events: none; animation: live-edge 7s ease-in-out infinite paused; }
.inprogress.motion-visible::before, .inprogress.motion-visible header::after { animation-play-state: running; }
.match-status { display: inline-flex; align-items: center; gap: 6px; }
.live-court-marker { flex: 0 0 auto; width: 25px; height: 21px; fill: none; stroke: #b6e7cb; stroke-width: .9; }
.live-court-marker circle { fill: #e1efac; stroke: none; animation: live-ball 3600ms ease-in-out infinite paused; transform-origin: center; }
.motion-visible .live-court-marker circle { animation-play-state: running; }
.tournament-live > section:first-child > h2 { display: flex; align-items: center; gap: 12px; }
.tournament-live > section:first-child > h2::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #b4e8ca; box-shadow: 0 0 0 5px #b4e8ca0c; flex: 0 0 auto; }
.tournament-live > section:nth-child(2) > h2 { color: #c1cec6; }
.tournament-live .bracket-match.inprogress { background: linear-gradient(150deg, #203d36, #172c2c); }

.bracket-connectors path { stroke: #6f8c82; stroke-width: 1.7; opacity: .7; stroke-linejoin: round; }
.bracket-connectors path.route-waiting { stroke: #6f8c82; opacity: .6; }
.bracket-connectors path.route-ready { stroke: #acc9b8; opacity: .85; }
.bracket-connectors path.route-resolved { stroke: #a6d8bb; opacity: .95; stroke-width: 2; }
.bracket-connectors path.loser-path { stroke: #ad997b; stroke-dasharray: 4 5; }
.bracket-connectors path.loser-path.route-resolved { stroke: #cbb692; }
.bracket-connectors path.route-live { stroke: #c6f1d7; opacity: 1; stroke-width: 2.1; }
.bracket-connectors path.route-travel { stroke: #edffe9; stroke-width: 3; opacity: 0; stroke-dasharray: 10 122; stroke-linecap: round; animation: route-travel 1700ms linear both; }
.bracket-connectors path.route-travel.loser-travel { stroke: #e9cf9f; stroke-width: 2.5; stroke-dasharray: 4 4 4 120; }
.result-arrived .winner { animation: winner-settle 2100ms ease-out both; }
.result-arrived .match-score { animation: score-settle 650ms cubic-bezier(.2,.7,.3,1) both; }
.result-arrived .loser { animation: loser-settle 1500ms ease-out both; }
.destination-arrived::after, .loser-arrived::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: #b3e8c413; border: 1px solid #b3e8c4; opacity: 0; animation: destination-settle 1900ms ease-out both; }
.loser-arrived::after { background: #dfc08e0e; border-color: #dfc08e; border-style: dashed; }

.bracket-frame { position: relative; isolation: isolate; max-width: 100%; }
.bracket-frame::before, .bracket-frame::after { content: ''; position: absolute; top: 1px; bottom: 17px; width: 19px; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 180ms; }
.bracket-frame::before { left: 1px; border-radius: 15px 0 0 15px; background: linear-gradient(90deg, #071711b0, transparent); }
.bracket-frame::after { right: 1px; border-radius: 0 15px 15px 0; background: linear-gradient(270deg, #071711b0, transparent); }
.bracket-frame.more-left::before, .bracket-frame.more-right::after { opacity: 1; }
.bracket-scroll { scroll-padding-inline: 24px; }
.bracket-round { scroll-snap-align: start; scroll-snap-stop: normal; }
.bracket-round > h3 { position: relative; padding: 0 0 14px; border-bottom: 1px solid #d7bf7c3b; color: #e0ca94; line-height: 1.4; min-height: 44px; }
.bracket-nav a, .bracket-nav button { min-height: 54px; font-size: 17px; transition: background-color 180ms, border-color 180ms; }
.bracket-nav a:hover, .bracket-nav button:hover { background: #224c3d; border-color: #c7e2c2; }
.bracket-nav [data-view-current] { gap: 12px; background: #244e3c; border-color: #b5ddbd; }
.bracket-nav a:focus-visible, .bracket-nav button:focus-visible { outline: 3px solid #e5cb8d; outline-offset: 4px; }
.bracket-finals { margin-top: 52px; padding-top: 30px; border-top: 1px solid #cbb17740; }
.bracket-finals .bracket-round { flex-basis: 300px; width: 300px; }
.bracket-finals .bracket-match { background: linear-gradient(150deg, #31382a, #1a2d29); border-color: #c6ac73; }
.final-match .match-team { min-height: 82px; font-size: 18px; }
.final-treatment { display: block; color: #e5ca90; font-size: 12px; letter-spacing: .1em; margin-top: 6px; line-height: 1.5; }
.reset-explanation { margin: 0; padding: 14px; font-size: 16px; line-height: 1.6; color: #e7dec5; border-block: 1px solid #dcc18b25; background: #ddc28b08; }
.reset-reveal { animation: final-reset-arrive 1200ms ease-out both; }
.match-team.eliminated-history:not(.winner) { color: #b0c0b7; background: #12271f; }
.match-team.winner.eliminated-history { background: #2a493b; }
.match-team .team-eliminated-label { color: #cbbd9e; font-size: 11px; letter-spacing: .04em; margin-top: 9px; }
.team-standings .eliminated { border-color: #607466; background: #14271f; color: #bdcbc1; }

.draw-reveal .bracket-round { animation: round-enter 320ms ease-out var(--round-entry, 0ms) both; }
.draw-reveal .bracket-match { animation: draw-card-enter 320ms ease-out var(--card-entry, 0ms) both; }
.draw-reveal .bracket-connectors path { animation: connector-draw 650ms ease-out 180ms both; }
.draw-reveal [data-bracket="Losers"] .bracket-connectors path { animation-duration: 500ms; animation-delay: 700ms; }
.draw-reveal [data-bracket="Finals"] .bracket-connectors path { animation-duration: 350ms; animation-delay: 1050ms; }
.motion-suspended [data-continuous]::before, .motion-suspended [data-continuous] header::after, .motion-suspended [data-continuous] circle, .motion-suspended .tournament-atmosphere > * { animation-play-state: paused !important; }

@keyframes court-drift { from { transform: translate(-8px, -5px) rotate(-16deg); } to { transform: translate(7px, 8px) rotate(-13deg); } }
@keyframes atmosphere-float { from { transform: translateY(0); opacity: .15; } to { transform: translateY(-16px); opacity: .28; } }
@keyframes champion-light { 0% { opacity: .2; } 35% { opacity: .9; } 100% { opacity: .4; } }
@keyframes trophy-arrive { from { opacity: .4; transform: translateY(6px) scale(.91); } to { opacity: 1; transform: none; } }
@keyframes podium-copy { from { opacity: .6; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes podium-name { from { opacity: .72; transform: translateY(7px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes podium-sweep { 0% { transform: translateX(0) rotate(18deg); opacity: 0; } 25% { opacity: .65; } 100% { transform: translateX(470%) rotate(18deg); opacity: 0; } }
@keyframes celebration-fall { 0% { opacity: 0; transform: translateY(-12px) rotate(0); } 20% { opacity: .7; } 100% { opacity: 0; transform: translateY(110px) rotate(150deg); } }
@keyframes live-halo { 0%, 100% { opacity: .22; } 50% { opacity: .62; } }
@keyframes live-edge { 0%, 15% { transform: translateX(0); } 85%, 100% { transform: translateX(450%); } }
@keyframes live-ball { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-3px, 2px); } }
@keyframes route-travel { 0% { stroke-dashoffset: 120; opacity: 0; } 15% { opacity: .95; } 85% { opacity: .95; } 100% { stroke-dashoffset: -12; opacity: 0; } }
@keyframes winner-settle { 0% { background-color: #6a8960; } 100% { background-color: #315748; } }
@keyframes score-settle { from { opacity: .4; transform: translateY(5px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes loser-settle { 0% { opacity: 1; } 50% { opacity: .78; } 100% { opacity: 1; } }
@keyframes destination-settle { 0% { opacity: 0; } 30% { opacity: .7; } 100% { opacity: 0; } }
@keyframes final-reset-arrive { 0% { opacity: .55; } 100% { opacity: 1; } }
@keyframes round-enter { from { opacity: .35; } to { opacity: 1; } }
@keyframes draw-card-enter { from { opacity: .3; } to { opacity: 1; } }
@keyframes connector-draw { from { opacity: 0; stroke-dasharray: 1200; stroke-dashoffset: 1200; } to { opacity: 1; stroke-dasharray: 1200; stroke-dashoffset: 0; } }
@media (min-width: 760px) {
    .tournament-champion { padding: 48px 64px; margin-bottom: 56px; }
    .champion-trophy { width: 112px; height: 126px; margin-bottom: 26px; }
    .tournament-live { gap: 40px; }
    .bracket-finals .bracket-round { flex-basis: 360px; width: 360px; }
    .bracket-scroll { scroll-padding-inline: 32px; }
}
@media (prefers-reduced-motion: reduce) {
    #tournament-board *, #tournament-board *::before, #tournament-board *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .champion-particles, .champion-sweep, .route-travel { display: none !important; }
    .champion-trophy, .champion-brand, .champion-team, .champion-players, .bracket-round, .bracket-match { opacity: 1 !important; transform: none !important; }
}
