@font-face {font-family:"Arena Condensed";src:url("fonts/OpenSans-CondBold.woff") format("woff");font-weight:600 800;font-display:swap}
@font-face {font-family:"Arena Sans";src:url("fonts/OpenSans-Regular.woff") format("woff");font-weight:400 600;font-display:swap}
@font-face {font-family:"Arena Sans";src:url("fonts/OpenSans-Bold.woff") format("woff");font-weight:700 800;font-display:swap}

:root {
  color-scheme: dark;
  --bg:#100b18;
  --surface:#191223;
  --surface-2:#21172f;
  --text:#faf6ff;
  --muted:#b5a8c6;
  --line:#332541;
  --violet:#b58aff;
  --display:"Arena Condensed","Arial Narrow","Impact",sans-serif;
  --body:"Arena Sans",system-ui,sans-serif;
}
* {box-sizing:border-box}
html {min-height:100%;scrollbar-color:#624582 #160e20}
body {margin:0;background:radial-gradient(ellipse at 48% -50%,#321648 0,transparent 65%),var(--bg);color:var(--text);font:500 15px/1.55 var(--body);min-height:100vh}
button,input,select {font:inherit}
button,a,input,select,summary {-webkit-tap-highlight-color:transparent}
button,summary {cursor:pointer}
button:disabled {cursor:default;opacity:.47}
a {color:inherit;text-decoration:none}
button {color:inherit}
:focus-visible {outline:2px solid #d9baff;outline-offset:4px}
h1,h2,h3,p {margin:0}
h1,h2,h3 {line-height:1.04}
h1,h2 {font-family:var(--display);font-weight:800}
h2 {font-size:32px}
p {color:var(--muted)}
[hidden] {display:none!important}
.sr-only {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.top {background:#120c1b;border-bottom:1px solid #2a1d38}
.top-inner {max-width:1300px;margin:auto;min-height:72px;padding:0 40px;display:flex;align-items:center;justify-content:space-between;gap:26px}
.brand {display:inline-flex;align-items:center;gap:12px;font:800 25px/.87 var(--display);letter-spacing:.035em}
.brand-accent {color:#bf93ff;margin-left:3px}
.brand small {font:700 8px/1 var(--body);color:#a498b7;letter-spacing:.27em;display:block;margin-top:6px}
.brand-icon {width:37px;height:36px;border:1px solid #6e41b1;border-radius:10px;background:#2c1747;position:relative;display:grid;place-items:center}
.brand-icon:before {content:"";width:22px;height:13px;border:2px solid #d5b3ff;border-radius:5px;transform:perspective(22px) rotateX(13deg)}
.brand-icon i,.brand-icon b {position:absolute}
.brand-icon i {width:7px;height:7px;background:#d5b3ff;clip-path:polygon(35% 0,65% 0,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0 65%,0 35%,35% 35%);left:10px}
.brand-icon b {height:3px;width:3px;border-radius:50%;background:#d5b3ff;right:10px;box-shadow:-4px 2px #d5b3ff}
nav {display:flex;align-self:stretch;align-items:stretch;gap:27px}
nav a {display:flex;align-items:center;position:relative;white-space:nowrap;color:var(--muted);font-size:14px;font-weight:700}
nav a:hover,nav a[aria-current] {color:var(--text)}
nav a[aria-current]:after {content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:#ae71ff;border-radius:3px 3px 0 0}
.top-actions {display:flex;align-items:center;gap:10px}
.screen-link,.icon-button {display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:9px;background:#1c1328;height:38px}
.screen-link {gap:8px;padding:0 13px;font-size:13px;font-weight:700}
.screen-link span:first-child {color:#c4a1f9;font-size:17px}
.icon-button {width:38px;padding:0;font-size:20px}
#app {max-width:1300px;margin:auto;padding:34px 40px 30px;outline:none}
.hero {isolation:isolate;position:relative;display:flex;align-items:end;justify-content:space-between;gap:20px;min-height:370px;overflow:hidden;border:1px solid #58387a;border-radius:22px;background:radial-gradient(ellipse at 70% 42%,#482077,#180c27 60%,#110b1c 100%);padding:44px 45px}
.hero:before,.hero:after {content:"";position:absolute;inset:0;z-index:-1}
.hero:before {left:22%;background:url("arena-hero.webp") 75% 51%/cover no-repeat}
.hero:after {background:linear-gradient(90deg,#150c21 1%,#150c21f7 26%,#150c2180 48%,transparent 70%),linear-gradient(0deg,#130b21 0%,transparent 43%)}
.hero-content {max-width:630px;align-self:center}
.hero-tag {display:inline-flex;align-items:center;gap:8px;color:#dfc7ff;font-size:10px;letter-spacing:.16em;font-weight:700;border:1px solid #65478d;background:#291743b8;border-radius:6px;padding:4px 9px}
.hero-tag i,.footer i {width:6px;height:6px;background:#c597ff;display:inline-block;border-radius:50%;box-shadow:0 0 10px #a375ff}
.hero h1 {font-size:clamp(55px,7vw,103px);letter-spacing:-.014em;line-height:.85;text-transform:uppercase;margin:17px 0 18px;max-width:550px;overflow-wrap:anywhere;text-shadow:0 4px 28px #150c21}
.hero p {font-size:16px;color:#e1d3f1;max-width:460px}
.hero-actions {display:flex;align-items:center;gap:10px;margin-top:25px;flex-wrap:wrap}
.button,.primary,.secondary,.danger {display:inline-flex;gap:8px;align-items:center;justify-content:center;min-height:43px;padding:8px 15px;border-radius:9px;font-size:13px;font-weight:700;text-align:center}
.primary {background:#ad7cfb;color:#160929;border:1px solid #c09bff;box-shadow:inset 0 1px 0 #dfc2ff65}
.primary:not(:disabled):hover {background:#c5a2ff}
.secondary {background:#251835;border:1px solid #55416b;color:#f1e5ff}
.secondary:hover,.icon-button:hover,.screen-link:hover {background:#37254b}
.danger {background:#321924;border:1px solid #733247;color:#ffb2c1}
.hero-stats {display:flex;gap:0;flex-shrink:0;padding:9px 0;background:#140c21e8;border:1px solid #4a3563;border-radius:12px;backdrop-filter:blur(8px)}
.hero-stats div {display:flex;flex-direction:column;min-width:83px;padding:0 12px;text-align:center}
.hero-stats div+div {border-left:1px solid #463155}
.hero-stats strong {font:700 34px/1 var(--display)}
.hero-stats em {color:#bb96e7;font:inherit;font-size:20px}
.hero-stats span {font-size:10px;color:#c6b6d9}
.station-section {margin-top:31px}
.section-head {display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:13px}
.section-head p {margin-top:7px}
.text-button,.undo {border:0;background:none;color:#d7b6ff;font-size:13px;font-weight:700;padding:4px;text-align:left}
.text-button:hover,.undo:hover {text-decoration:underline}
.stations {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pink {--station:#ff7ad7;--station-bg:#3a1640}
.orange {--station:#ffae78;--station-bg:#3b211e}
.cyan {--station:#74ddff;--station-bg:#132f40}
.green {--station:#83edac;--station-bg:#18372d}
.station-card {position:relative;overflow:hidden;display:flex;flex-direction:column;gap:11px;text-align:left;min-height:142px;width:100%;padding:15px 16px;background:linear-gradient(145deg,var(--station-bg),#191122 68%);border:1px solid color-mix(in srgb,var(--station) 33%,#31203d);border-radius:14px}
.station-card:after {content:"";height:2px;position:absolute;inset:auto 17px 0;background:linear-gradient(90deg,var(--station),transparent 90%);opacity:.68}
.station-card:hover {border-color:var(--station)}
.station-card-top,.station-bottom {display:flex;align-items:center;justify-content:space-between;gap:6px}
.station-letter {width:32px;min-width:32px;height:32px;display:grid;place-items:center;border-radius:8px;background:var(--station-bg);border:1px solid color-mix(in srgb,var(--station) 38%,transparent);color:var(--station);font:700 22px/1 var(--display)}
.station-name {font:800 27px/.97 var(--display);overflow-wrap:anywhere}
.status {display:inline-flex;gap:5px;align-items:center;background:#0f0b16b8;border-radius:99px;padding:3px 7px;font-size:10px;line-height:1.3;color:#e1cde9}
.status i,.roster-station i {width:6px;height:6px;border-radius:50%;background:var(--station,#aa88e2);flex:0 0 auto}
.status.done i {background:#77e8a0}
.status.playing i {background:#ffc38a}
.status.neutral i {background:#9885a5}
.station-bottom {margin-top:auto;color:#c5b5d3;font-size:12px}
.station-bottom span:last-child {color:var(--station);font-size:18px}
.capture-panel {margin-top:23px;border:1px solid var(--line);border-radius:15px;background:var(--surface);padding:20px 23px;display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,1.55fr);gap:17px;align-items:end}
.capture-panel p {margin-top:5px}
.entry-form {display:grid;grid-template-columns:minmax(105px,1.3fr) minmax(105px,1fr) auto;align-items:end;gap:9px}
label {display:grid;gap:5px;min-width:0;color:#e3d7ed;font-size:12px;font-weight:700}
input,select {width:100%;min-width:0;min-height:43px;background:#110c1a;border:1px solid #503a66;border-radius:8px;color:var(--text);padding:8px 10px;font-size:13px}
input::placeholder {color:#9e8dad}
input:disabled,select:disabled {opacity:.58}
.roster,.capture-note {grid-column:1/-1}
.roster {border-top:1px solid var(--line);padding-top:11px;color:#dccbeb}
.roster summary {font-weight:700;font-size:13px}
.roster summary span {color:#c1a2e1;margin-left:6px}
.roster-list {margin-top:7px;max-height:325px;overflow:auto}
.roster-row {display:grid;grid-template-columns:1fr 1fr 65px;gap:10px;align-items:center;min-height:42px;border-bottom:1px solid var(--line);font-size:13px}
.roster-row:last-child {border:0}
.roster-name {overflow-wrap:anywhere}
.roster-station {display:flex;align-items:center;gap:6px;color:var(--station);overflow-wrap:anywhere;min-width:0}
.capture-note {font-size:13px}
.footer {max-width:1300px;margin:0 auto;padding:9px 40px 24px;display:flex;justify-content:space-between;gap:12px;color:#ac9abe;font-size:10px;font-weight:700;letter-spacing:.065em}
.footer b {color:#c08aff}
.footer span+span {letter-spacing:0;font-weight:500}
.footer i {margin-right:3px;background:#76e6a4;box-shadow:0 0 8px #76e6a468}
.inner-page {min-height:67vh}
.page-head,.bracket-head {display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:23px}
.page-head h1 {font-size:clamp(48px,6vw,77px);text-transform:uppercase}
.page-head p,.bracket-head p {margin-top:7px}
.print-controls {display:flex;gap:8px;align-items:center;flex-shrink:0}
.print-controls select {width:auto}
.station-tabs {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}
.station-tabs button {border:1px solid var(--line);border-radius:9px;background:#191123;padding:8px 11px;text-align:left;font-size:13px;overflow-wrap:anywhere}
.station-tabs button[aria-pressed=true] {border-color:var(--station);background:var(--station-bg)}
.station-tabs span {color:var(--station);font-weight:800;margin-right:4px}
.bracket-panel,.qualifiers,.final-matches {background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:20px}
.bracket-head {align-items:center;margin-bottom:10px;flex-wrap:wrap}
.bracket-head>div {margin-right:auto}
.champion-chip {border:1px solid var(--station);color:var(--station);padding:4px 9px;border-radius:99px;overflow-wrap:anywhere}
.empty {text-align:center;min-height:245px;display:grid;justify-items:center;align-content:center;gap:10px;border:1px dashed #4b355d;border-radius:12px;margin-top:17px;padding:24px 10px}
.empty>span {font-size:30px;color:var(--station);line-height:1}
.empty h3 {font:800 25px/1 var(--display)}
.bracket-scroll {overflow:auto;padding:5px 4px 12px}
.bracket {display:grid;grid-auto-flow:column;grid-auto-columns:minmax(174px,1fr);gap:32px;min-height:calc(var(--first) * 155px + 28px)}
.bracket-round {display:flex;flex-direction:column;gap:8px}
.bracket-round h3,.final-grid h3 {color:#dbc7ef;font-size:13px;margin:8px 0}
.round-matches {display:grid;grid-template-rows:repeat(var(--matches),minmax(143px,1fr));height:100%}
.match {background:#120b1c;border:1px solid #483356;border-radius:9px;padding:8px;min-width:0;align-self:center;position:relative}
.round-slot {position:relative;display:grid;align-items:center}
.bracket-round:not(:last-child) .round-slot:before {content:"";position:absolute;left:100%;width:16px;height:50%;border-right:1px solid #8e63b3;pointer-events:none}
.bracket-round:not(:last-child) .round-slot:nth-child(odd):before {top:50%;border-top:1px solid #8e63b3}
.bracket-round:not(:last-child) .round-slot:nth-child(even):before {bottom:50%;border-bottom:1px solid #8e63b3}
.bracket-round:not(:first-child) .round-slot:after {content:"";position:absolute;right:100%;top:50%;width:16px;height:1px;background:#8e63b3;pointer-events:none}
.match header {display:flex;justify-content:space-between;gap:4px;color:#b9a4cd;font-size:10px;font-weight:700;margin-bottom:5px}
.match-player {display:flex;align-items:center;justify-content:space-between;gap:5px;width:100%;padding:6px 8px;min-height:34px;color:#cabbd7;background:#21162c;border:1px solid #3b294b;border-radius:5px;text-align:left;font-size:12px;overflow-wrap:anywhere}
.match-player span {min-width:0}
.match-player+.match-player {margin-top:4px}
button.match-player:hover,.match-player.winner {border-color:var(--station,#b58aff);background:var(--station-bg,#3b2161);color:var(--station,#dcbaff)}
.undo {margin-top:3px;font-size:10px;padding:2px}
.podium-panel {position:relative;overflow:hidden;isolation:isolate;text-align:center;background:radial-gradient(ellipse at 50% 66%,#5a2587,#2b1645 54%,#170c27 100%);border:1px solid #6d4b89;border-radius:19px;padding:25px 24px 0}
.podium-panel:before {content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(126deg,transparent 0 46px,#ae6bfa11 47px 48px,transparent 49px 79px);mask-image:linear-gradient(to bottom,#000,transparent 94%)}
.podium-heading {color:#f3dfff;letter-spacing:.21em;font-size:12px;font-weight:800}
.podium {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:14px;max-width:790px;margin:8px auto 0}
.podium-place {display:flex;flex-direction:column;align-items:center;min-width:0}
.gold {--rank:#ffcf61;--rank-dark:#b95c12;--rank-light:#fff2a4;--pedestal:80px;--art:"🏆"}
.silver {--rank:#6de8ce;--rank-dark:#167a71;--rank-light:#b4fff0;--pedestal:57px;--art:"🥈"}
.bronze {--rank:#ff81bc;--rank-dark:#a43073;--rank-light:#ffc0e0;--pedestal:42px;--art:"🥉"}
.podium-art {position:relative;display:grid;place-items:center;width:clamp(60px,12vw,128px);aspect-ratio:1;margin:0 0 8px;border-radius:50%;background:radial-gradient(circle,var(--rank-dark),transparent 69%);filter:drop-shadow(0 0 14px #1e0d27)}
.podium-art:before {content:var(--art);font-size:clamp(42px,8vw,93px);line-height:1}
.podium-art span,.podium-art i {position:absolute;width:7px;height:7px;transform:rotate(45deg);border-radius:2px;background:var(--rank);box-shadow:10px -11px var(--rank-dark)}
.podium-art span {top:24%;left:6%}
.podium-art i {top:36%;right:4%;width:5px;height:5px}
.place-label {color:var(--rank-light);font:800 clamp(15px,2.4vw,29px)/1 var(--display);text-transform:uppercase}
.podium-place strong {font:800 clamp(20px,4vw,43px)/1.03 var(--display);margin-top:5px;overflow-wrap:anywhere;width:100%}
.podium-place small {font-size:11px;color:#e7caef;min-height:17px;margin:4px 0 6px;overflow-wrap:anywhere;max-width:100%}
.pedestal {width:100%;height:var(--pedestal);display:grid;place-items:center;border:1px solid var(--rank);border-bottom:0;border-radius:9px 9px 0 0;background:linear-gradient(155deg,var(--rank),var(--rank-dark));color:#180b22;font:800 clamp(28px,5vw,53px)/1 var(--display);box-shadow:inset 0 4px 0 #fff4}
.qualifiers,.final-matches {margin-top:16px}
.qualifier-grid,.final-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.qualifier-grid>div {display:flex;align-items:center;gap:8px;min-width:0;border:1px solid var(--line);background:#130d1c;border-radius:8px;padding:8px}
.qualifier-grid>div>div {min-width:0;display:grid;overflow-wrap:anywhere}
.qualifier-grid>div>div span {font-size:11px;color:#c4b2d4}
.final-grid {grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.final-grid .match+.match {margin-top:8px}
.screen-mode .top,.screen-mode .footer {display:none}
.screen-mode #app {max-width:1700px}
.screen-mode .podium-panel {padding-top:clamp(24px,6vh,65px);min-height:min(67vh,650px);display:flex;flex-direction:column;justify-content:space-between}
.screen-mode .podium {width:100%;max-width:1080px;gap:clamp(12px,3vw,40px)}
.screen-mode .podium-art {width:clamp(65px,19vw,205px)}
.screen-mode .podium-art:before {font-size:clamp(42px,12vw,145px)}
.screen-mode .pedestal {height:calc(var(--pedestal) * 1.55)}
dialog {width:min(490px,calc(100% - 24px));padding:20px;border-radius:15px;background:#20162d;color:var(--text);border:1px solid #624681;box-shadow:0 24px 100px #000b}
dialog::backdrop {background:#08060bd9}
.dialog-head,.dialog-buttons {display:flex;justify-content:space-between;align-items:center;gap:8px}
.dialog-head {margin-bottom:14px}
.dialog-buttons {justify-content:flex-end;margin-top:16px}
.dialog-buttons .danger {margin-right:auto}
dialog form {display:grid;gap:12px}
dialog form .dialog-buttons {margin-top:4px}
dialog p+form {margin-top:12px}
.settings-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.toast {position:fixed;bottom:15px;right:15px;z-index:4;background:#382052;border:1px solid #9f6add;color:#fff;max-width:min(380px,calc(100vw - 30px));padding:9px 14px;border-radius:8px;box-shadow:0 8px 30px #0008}
#print-area {display:none}

@media (max-width:950px) {
  .top-inner,#app,.footer {padding-left:24px;padding-right:24px}
  .hero {padding:35px 30px;min-height:330px}
  .hero-stats div {min-width:67px;padding:0 6px}
  .capture-panel {grid-template-columns:1fr}
}
@media (max-width:680px) {
  .top-inner {min-height:58px;flex-wrap:wrap;gap:4px;padding:9px 15px 0}
  .top-actions {margin-left:auto}
  nav {order:3;width:100%;justify-content:center;gap:30px;min-height:39px}
  .screen-link {padding:0 7px}
  #app,.footer {padding-left:13px;padding-right:13px}
  #app {padding-top:15px}
  .hero {min-height:305px;align-items:start;flex-direction:column;justify-content:flex-end;gap:15px;padding:19px;border-radius:14px}
  .hero-content {align-self:start}
  .hero:before {left:8%;background-position:65% 32%}
  .hero:after {background:linear-gradient(90deg,#150c21 0%,#150c21ba 40%,#150c2135),linear-gradient(0deg,#130b21,transparent 70%)}
  .hero h1 {font-size:clamp(44px,11vw,65px);margin:13px 0}
  .hero p {font-size:14px}
  .hero-actions {margin-top:15px}
  .hero-stats {padding:5px 0}
  .hero-stats strong {font-size:27px}
  .stations,.station-tabs,.qualifier-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .station-card {min-height:121px;padding:10px}
  .station-section {margin-top:22px}
  .capture-panel,.bracket-panel,.qualifiers,.final-matches {padding:13px}
  .entry-form {grid-template-columns:1fr 1fr}
  .entry-form button {grid-column:1/-1}
  .page-head {align-items:start;flex-direction:column}
  .podium-panel {padding:15px 8px 0}
  .podium {gap:6px}
  .footer {font-size:9px}
}
@media print {
  @page {margin:15mm}
  html {color-scheme:light}
  body {color:#161020;background:#fff;font:11pt/1.4 Arial,sans-serif}
  body>*:not(#print-area) {display:none!important}
  #print-area {display:block}
  #print-area h1,#print-area h2 {font-family:Arial,sans-serif;margin:9pt 0 5pt;break-after:avoid}
  #print-area h1 {font-size:22pt}
  #print-area h2 {font-size:14pt}
  #print-area p {color:#333}
  #print-area table {width:100%;border-collapse:collapse;margin-bottom:12pt}
  #print-area tr {break-inside:avoid}
  #print-area th,#print-area td {border:1px solid #888;text-align:left;padding:4pt;overflow-wrap:anywhere}
  #print-area th {background:#eee}
  .printed-podium {padding-left:21pt}
  .printed-podium li {padding:6pt}
}