@font-face {
  font-family: Refrigerator;
  src: url('assets/Refrigerator-Deluxe.otf') format('opentype');
  font-weight: 400;
}

@font-face {
  font-family: Refrigerator;
  src: url('assets/Refrigerator-Deluxe-Bold.otf') format('opentype');
  font-weight: 700;
}

:root {
  --ink: #dbe6e3;
  --muted: #849696;
  --dim: #526466;
  --teal: #71dde0;
  --teal-deep: #1a777b;
  --gold: #f5bc39;
  --panel: rgba(17, 29, 31, .91);
  --line: rgba(145, 182, 181, .23);
  --line-hot: rgba(113, 222, 224, .63);
  --shadow: 0 22px 50px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  font-family: Refrigerator, 'Arial Narrow', Arial, sans-serif;
  font-size: 20px;
  letter-spacing: .045em;
  background: linear-gradient(180deg, rgba(5, 12, 14, .9), rgba(5, 15, 18, .98) 30%, #071113), url('assets/aow-background.jpg') center top / cover fixed;
}
body::before { content: ''; position: fixed; inset: 0; z-index: -1; opacity: .3; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(118, 225, 225, .025) 4px); }
a { color: inherit; text-decoration: none; }

.site-header { width: min(1480px, calc(100% - 48px)); min-height: 72px; margin: 18px auto; padding: 14px 22px; display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--line); background: rgba(8, 18, 20, .78); box-shadow: var(--shadow); backdrop-filter: blur(12px); }
.brand { color: var(--ink); font-size: 26px; font-weight: 700; letter-spacing: .07em; line-height: 1; white-space: nowrap; }
nav { display: flex; gap: 30px; color: var(--muted); font-size: 18px; }
nav a { transition: color .2s ease; }
nav a:hover { color: var(--teal); }
.language-switch select { appearance: none; min-width: 58px; padding: 6px 23px 6px 9px; color: var(--teal); border: 1px solid var(--line); border-radius: 0; outline: 0; background: rgba(6, 15, 17, .9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%2371dde0' stroke-width='1.5'/%3E%3C/svg%3E") right 7px center / 12px no-repeat; font: 700 15px Refrigerator, sans-serif; letter-spacing: .08em; cursor: pointer; }.language-switch select:focus { border-color: var(--teal); }.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }.language-dialog[hidden] { display: none; }.language-dialog { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(2, 8, 10, .8); backdrop-filter: blur(8px); }.language-dialog-card { width: min(100%, 390px); padding: 28px; border: 1px solid var(--line-hot); background: #0d1d1f; box-shadow: var(--shadow); text-align: center; }.language-dialog-card > p:not(.eyebrow) { margin-bottom: 22px; color: var(--ink); }.language-dialog-card div { display: flex; gap: 10px; }.language-dialog-card button { flex: 1; padding: 10px; color: var(--ink); border: 1px solid var(--line); background: rgba(21, 48, 50, .8); font: 700 19px Refrigerator, sans-serif; letter-spacing: .06em; cursor: pointer; }.language-dialog-card button:hover, .language-dialog-card button:focus { border-color: var(--teal); color: var(--teal); }

main { width: min(1480px, calc(100% - 48px)); margin: 0 auto; }
.hero { min-height: 210px; position: relative; display: flex; align-items: end; margin: 20px 0 50px; padding: 30px 5%; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(90deg, rgba(8, 16, 18, .96) 0%, rgba(8, 16, 18, .72) 42%, rgba(8, 16, 18, .1) 80%), url('assets/aow-banner.jpg') center 44% / cover; box-shadow: var(--shadow); }
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, var(--teal), transparent 55%); }
.hero-copy { position: relative; z-index: 1; max-width: 860px; }
.eyebrow { margin: 0 0 8px; color: var(--teal); font-size: 17px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 0; color: var(--ink); font-size: clamp(40px, 5.4vw, 76px); line-height: .88; letter-spacing: .06em; }

.section { margin-bottom: 80px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 20px; }
h2 { margin-bottom: 0; font-size: 48px; line-height: .8; letter-spacing: .06em; }
.stage-note { max-width: 300px; margin: 0; color: var(--muted); font-family: Arial, sans-serif; font-size: 13px; line-height: 1.5; letter-spacing: .01em; text-align: right; }
.playoff-round header, .third-place header { display: flex; justify-content: space-between; align-items: start; min-height: 38px; border-bottom: 1px solid var(--line); }.playoff-round h3, .third-place h3 { margin: 0; font-size: 25px; line-height: 1; }.playoff-round header span, .third-place header span { color: var(--teal); font-size: 16px; }.match { position: relative; width: 100%; border: 1px solid rgba(145, 182, 181, .2); background: rgba(12, 26, 28, .88); box-shadow: 0 6px 18px rgba(0, 0, 0, .16); }.player { min-height: 37px; display: flex; align-items: center; gap: 8px; padding: 4px 8px; background: transparent; }.player + .player { border-top: 1px solid rgba(145, 182, 181, .14); }.avatar { width: 29px; height: 29px; flex: 0 0 29px; border: 1px solid rgba(113, 222, 224, .55); border-radius: 50%; background: #16363a; }.player-copy { min-width: 0; display: grid; gap: 1px; }.player-name { overflow: hidden; color: #edf5f2; font-size: 20px; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }.clan-name { overflow: hidden; color: var(--muted); font-family: Arial, sans-serif; font-size: 8px; line-height: 1.2; letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }.player-score { margin-left: auto; color: var(--gold); font-size: 22px; font-weight: 400; line-height: 1; }.player-empty { background: rgba(21, 35, 37, .44); }.player-empty .player-name { color: var(--dim); }.ghost-avatar { border-color: rgba(132, 150, 150, .2); background: transparent; }.is-eliminated { filter: saturate(.25); opacity: .38; }.is-eliminated .player-name { text-decoration: line-through; }
.no-stream { display: flex; flex-direction: column; }.no-stream .player { flex: 1; }.stream-link { min-height: 20px; display: flex; align-items: center; gap: 5px; margin-top: 2px; padding: 2px 6px; color: #bdd1cf; background: rgba(86, 32, 41, .42); font-family: Arial, sans-serif; font-size: 9px; letter-spacing: .02em; transition: background .2s ease; }.stream-link:hover { background: rgba(159, 45, 56, .7); }.stream-link span { padding: 2px 4px; color: #fff; background: #c33846; font-size: 7px; font-weight: 700; letter-spacing: .06em; }
.qualifying-match .stream-link { min-height: 34px; padding: 4px 7px; font-size: 10px; }.qualifying-match .stream-link span { padding: 3px 5px; font-size: 8px; }
.player-confederation { background: linear-gradient(90deg, rgba(57, 111, 142, .42), rgba(45, 87, 119, .24)); }.player-confederation .avatar { border-color: rgba(121, 209, 236, .72); background: #24475c; }.player-resistance { background: linear-gradient(90deg, rgba(130, 55, 61, .38), rgba(108, 42, 49, .22)); }.player-resistance .avatar { border-color: rgba(233, 126, 132, .7); background: #542d32; }

@media (min-width: 901px) { .third-place { top: 703px; padding-top: 0; } }
.playoff-viewport { overflow-x: auto; padding: 1px 0 18px; scrollbar-color: var(--teal-deep) rgba(5, 14, 16, .6); scrollbar-width: thin; }.playoff-viewport:focus { outline: 1px solid var(--line-hot); outline-offset: 3px; }.playoff-bracket { --match-height: 112px; position: relative; min-width: 1900px; height: 1060px; }.bracket-lines { position: absolute; z-index: 0; top: 38px; left: 0; width: 100%; height: 1020px; overflow: visible; }.bracket-lines path { fill: none; stroke: rgba(113, 222, 224, .5); stroke-width: 1; vector-effect: non-scaling-stroke; }.bracket-lines .third-line { stroke: rgba(113, 222, 224, .7); }.playoff-round { position: absolute; z-index: 1; top: 0; width: 285px; }.playoff-round-0 { left: 0; width: 620px; }.playoff-round-1 { left: 680px; }.playoff-round-2 { left: 1015px; }.playoff-round-3 { left: 1350px; }.final-stage { left: 1685px; }.playoff-matches { position: relative; height: 1020px; padding: 10px; background: transparent; }.match { min-height: var(--match-height); }.playoff-round-0 .playoff-matches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(8, var(--match-height)); gap: 14px 16px; }.playoff-round-1 .playoff-matches .match, .playoff-round-2 .playoff-matches .match, .playoff-round-3 .playoff-matches .match, .final-stage > .playoff-matches .match { position: absolute; left: 10px; right: 10px; }.playoff-round-1 .match:nth-child(1) { top: 10px; }.playoff-round-1 .match:nth-child(2) { top: 136px; }.playoff-round-1 .match:nth-child(3) { top: 262px; }.playoff-round-1 .match:nth-child(4) { top: 388px; }.playoff-round-1 .match:nth-child(5) { top: 514px; }.playoff-round-1 .match:nth-child(6) { top: 640px; }.playoff-round-1 .match:nth-child(7) { top: 766px; }.playoff-round-1 .match:nth-child(8) { top: 892px; }.playoff-round-2 .match:nth-child(1) { top: 73px; }.playoff-round-2 .match:nth-child(2) { top: 325px; }.playoff-round-2 .match:nth-child(3) { top: 577px; }.playoff-round-2 .match:nth-child(4) { top: 829px; }.playoff-round-3 .match:nth-child(1) { top: 199px; }.playoff-round-3 .match:nth-child(2) { top: 703px; }.final-stage > .playoff-matches .match { top: 451px; }.third-place { position: absolute; top: 577px; left: 0; width: 100%; padding-top: 90px; }.third-place .playoff-matches { height: auto; padding: 10px; }.third-place h3 { font-size: 25px; }.points-card::after { display: none; }.bracket-hint { display: none; margin: 10px 0 0; color: var(--muted); font-family: Arial, sans-serif; font-size: 12px; text-align: right; }

.ranking-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 25px; align-items: end; }.ranking-table { border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); }.ranking-head, .ranking-row { display: grid; grid-template-columns: 55px minmax(160px, 1.1fr) minmax(210px, 1.6fr) 75px; align-items: center; gap: 15px; padding: 10px 16px; }.ranking-head { min-height: 41px; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 14px; }.ranking-head span:last-child { text-align: right; }.ranking-row { min-height: 58px; border-bottom: 1px solid rgba(145, 182, 181, .12); transition: background .2s ease; }.ranking-row:last-child { border: 0; }.ranking-row:hover { background: rgba(105, 211, 214, .06); }.rank { color: var(--teal); font-size: 18px; }.clan { display: flex; align-items: center; gap: 10px; }.clan img { width: 30px; height: 30px; border: 1px solid rgba(245, 188, 57, .45); border-radius: 50%; background: #51391a; }.clan b { font-size: 20px; }.representatives { overflow: hidden; color: var(--muted); font-family: Arial, sans-serif; font-size: 12px; letter-spacing: .01em; text-overflow: ellipsis; white-space: nowrap; }.clan-points { color: var(--gold); font-size: 28px; text-align: right; }
.points-card { position: relative; overflow: hidden; padding: 25px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(38, 53, 45, .98), rgba(19, 31, 33, .96)); box-shadow: var(--shadow); }.points-card::after { content: '26'; position: absolute; right: -11px; bottom: -31px; color: rgba(113, 222, 224, .07); font-size: 210px; font-weight: 700; }.points-card > * { position: relative; z-index: 1; }.points-card h3 { margin-bottom: 21px; font-size: 31px; line-height: .9; }.point-row { display: flex; align-items: center; justify-content: space-between; min-height: 33px; color: #aab9b6; border-bottom: 1px solid rgba(145, 182, 181, .15); font-size: 17px; }.point-row strong { color: var(--teal); font-size: 22px; }.point-row.winner-points { color: #f3df9b; }.point-row.winner-points strong { color: var(--gold); font-size: 27px; }.points-footnote { margin: 18px 0 0; color: var(--muted); font-family: Arial, sans-serif; font-size: 11px; line-height: 1.45; letter-spacing: .01em; }

footer { display: flex; justify-content: space-between; width: min(1480px, calc(100% - 48px)); margin: 0 auto; padding: 25px 0 50px; color: var(--muted); border-top: 1px solid var(--line); font-family: Arial, sans-serif; font-size: 11px; letter-spacing: .04em; }footer span { color: var(--teal); font-family: Refrigerator, sans-serif; font-size: 18px; }footer p { margin: 0; }

@media (max-width: 900px) { .ranking-layout { grid-template-columns: 1fr; }.points-card { max-width: 500px; }.playoff-viewport { scroll-snap-type: x mandatory; }.playoff-bracket { display: flex; min-width: 0; height: auto; gap: 14px; }.bracket-lines { display: none; }.playoff-round { position: relative; inset: auto; min-width: 100%; scroll-snap-align: start; scroll-snap-stop: always; }.playoff-matches, .playoff-round-0 .playoff-matches { display: grid; grid-template-rows: none; height: auto; gap: 10px; padding: 10px; }.playoff-round-0 .playoff-matches { grid-template-columns: repeat(2, minmax(0, 1fr)); }.playoff-round-1 .playoff-matches, .playoff-round-2 .playoff-matches, .playoff-round-3 .playoff-matches, .final-stage > .playoff-matches { grid-template-columns: 1fr; }.playoff-round-1 .playoff-matches .match, .playoff-round-2 .playoff-matches .match, .playoff-round-3 .playoff-matches .match, .final-stage > .playoff-matches .match { position: relative; inset: auto; min-height: var(--match-height); }.third-place { position: relative; top: auto; left: auto; padding-top: 48px; }.bracket-hint { display: block; } }
@media (max-width: 620px) { body { font-size: 17px; } .site-header, main, footer { width: min(100% - 28px, 1480px); }.site-header { min-height: 54px; margin-top: 10px; padding: 10px; }.brand { font-size: 15px; letter-spacing: .04em; } nav { gap: 12px; font-size: 14px; }.hero { min-height: 104px; margin: 14px 0 35px; padding: 16px; background: linear-gradient(90deg, rgba(8, 16, 18, .88), rgba(8, 16, 18, .28)), url('assets/aow-banner.jpg') 60% center / cover; }.hero::after { height: 3px; } h1 { max-width: 225px; font-size: 35px; line-height: .87; letter-spacing: .04em; }.section { margin-bottom: 48px; }.section-heading { margin-bottom: 14px; }.section-heading .eyebrow { margin-bottom: 5px; font-size: 13px; } h2 { font-size: 36px; }.stage-note { display: none; }.ranking-main .stage-note { display: block; max-width: none; margin-top: 8px; color: var(--muted); text-align: left; }.playoff-round header, .third-place header { min-height: 36px; }.playoff-round h3, .third-place h3 { font-size: 23px; }.playoff-round header span, .third-place header span { font-size: 15px; }.playoff-matches { gap: 10px; padding: 10px; }.playoff-round-0 .playoff-matches { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }.player { min-height: 41px; gap: 7px; padding: 4px 35px 4px 6px; }.avatar { width: 32px; height: 32px; flex-basis: 32px; }.player-copy { gap: 1px; }.player-name { font-size: 19px; }.clan-name { font-size: 7px; }.match-score { right: 5px; font-size: 17px; }.stream-link { min-height: 22px; gap: 5px; padding: 3px 5px; font-size: 8px; }.stream-link span { padding: 2px 4px; font-size: 7px; }.playoff-round-1 .playoff-matches, .playoff-round-2 .playoff-matches, .playoff-round-3 .playoff-matches, .third-place .playoff-matches { grid-template-columns: 1fr; }.final-stage .player { min-height: 52px; }.final-stage .avatar { width: 40px; height: 40px; flex-basis: 40px; }.final-stage .player-name { font-size: 23px; }.final-stage .match-score { font-size: 22px; }.third-place { padding-top: 48px; }.third-place .player { min-height: 50px; }.third-place .avatar { width: 38px; height: 38px; flex-basis: 38px; }.third-place .player-name { font-size: 22px; }.bracket-hint { display: block; font-size: 10px; }.ranking-head, .ranking-row { grid-template-columns: 31px minmax(130px, 1fr) 42px; gap: 7px; padding: 9px; }.ranking-head span:nth-child(3), .representatives { display: none; }.clan b { font-size: 17px; }.ranking-head { font-size: 12px; } footer { display: block; } footer p { margin-top: 7px; } }

@media (max-width: 620px) { .player { min-height: 37px; gap: 5px; padding: 4px 5px; }.avatar { width: 25px; height: 25px; flex-basis: 25px; }.player-name { font-size: 15px; }.clan-name { font-size: 6px; }.player-score { flex: 0 0 12px; font-size: 16px; text-align: right; }.stream-link { min-height: 19px; gap: 4px; padding: 2px 4px; font-size: 7px; }.stream-link span { padding: 2px 3px; font-size: 6px; }.final-stage .player, .third-place .player { min-height: 43px; }.final-stage .avatar, .third-place .avatar { width: 29px; height: 29px; flex-basis: 29px; }.final-stage .player-name, .third-place .player-name { font-size: 18px; } }
@media (max-width: 420px) { .site-header { gap: 8px; }.brand { font-size: 13px; }.language-switch select { min-width: 48px; padding-left: 6px; font-size: 13px; } }
.match-status { display: block; padding: 3px 6px; color: #f3df9b; background: rgba(245, 188, 57, .1); font-family: Arial, sans-serif; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.stream-link .match-status { display: inline; color: #f3df9b; background: rgba(245, 188, 57, .18); text-transform: none; }