@import url('/fonts.css');

:root{color-scheme:dark;--navy:#071019;--ink:#0b131b;--plate:#14222d;--plate-2:#1d2d3a;--gold:#e9b85b;--gold-hot:#ffe3a1;--silver:#e5edf0;--quiet:#9eb0b9;--red:#e55442;--blue:#5ca8d7;--font-head:'Barlow Condensed','Arial Narrow',sans-serif;--font-body:'Barlow',Arial,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:var(--font-body)}
::selection{background:var(--gold);color:#081118}
:focus-visible{outline:3px solid var(--gold-hot);outline-offset:3px}
.broadcast{width:100vw;height:100vh;overflow:hidden;background:transparent}
.stage{position:absolute;top:0;left:0;width:1920px;height:1080px;overflow:hidden;transform:scale(var(--stage-scale,1));transform-origin:top left}

/* Starting Soon */
.soon-stage{color:var(--silver);background:radial-gradient(ellipse at 52% 38%,#1d303a 0%,#0b1721 47%,#040b12 100%)}
.soon-backdrop{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.soon-backdrop:before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 19%,rgba(233,184,91,.04) 20%,transparent 21% 51%,rgba(233,184,91,.035) 52%,transparent 53%),linear-gradient(180deg,rgba(2,8,13,.12),transparent 45%,rgba(2,8,13,.72));}
.soon-backdrop:after{content:'';position:absolute;top:0;left:-42%;width:32%;height:100%;background:linear-gradient(90deg,transparent,rgba(244,198,109,.09),transparent);transform:skewX(-18deg);animation:sweep 12s ease-in-out infinite}
.arena-halo{position:absolute;width:1450px;height:1450px;border-radius:50%;left:242px;top:-348px;background:radial-gradient(circle,transparent 23%,rgba(238,177,71,.055) 24%,transparent 25%,transparent 41%,rgba(231,168,71,.07) 41.2%,transparent 42%,transparent 60%,rgba(235,184,92,.04) 60.2%,transparent 61%);filter:blur(.2px);animation:halo-breathe 7s ease-in-out infinite}
.arena-arc{position:absolute;border:1px solid rgba(225,169,74,.16);border-radius:50%;transform:rotate(-17deg)}
.arc-one{width:1260px;height:980px;left:340px;top:-30px;border-left-color:transparent;border-bottom-color:transparent;animation:arc-drift 18s ease-in-out infinite}
.arc-two{width:1560px;height:1120px;left:170px;top:-72px;border-right-color:transparent;border-top-color:transparent;animation:arc-drift 21s ease-in-out infinite reverse}
.arc-three{width:870px;height:620px;left:550px;top:158px;border-left-color:transparent;border-top-color:transparent;opacity:.75}
.light-beam{position:absolute;width:2px;height:1250px;top:-130px;background:linear-gradient(180deg,transparent,rgba(253,198,107,.12),transparent);transform:rotate(37deg);filter:blur(12px);opacity:.45}
.beam-one{left:380px}.beam-two{left:1510px;transform:rotate(-37deg)}
.ground-line{position:absolute;left:0;right:0;bottom:184px;height:1px;background:linear-gradient(90deg,transparent,rgba(234,187,100,.25) 17%,rgba(244,211,153,.58) 50%,rgba(234,187,100,.25) 83%,transparent);box-shadow:0 5px 35px 5px rgba(236,177,69,.08)}
.topline{position:absolute;top:52px;left:77px;right:77px;display:flex;align-items:center;justify-content:space-between;font:700 20px/1 var(--font-head);letter-spacing:.13em;color:#ccd5d8}
.topline-left{display:flex;align-items:center;gap:14px}.live-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--red)}
.topline-right{color:var(--gold);font-size:22px}
.soon-content{position:absolute;inset:132px 78px 183px;display:grid;grid-template-columns:550px 1fr 362px;align-items:center;gap:45px}
.brand-block{height:530px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
.brand-block:before{content:'';position:absolute;width:510px;height:510px;border:1px solid rgba(228,184,91,.16);border-radius:50%;background:radial-gradient(circle,rgba(230,175,82,.11),transparent 58%);box-shadow:inset 0 0 80px rgba(234,174,76,.05),0 0 110px rgba(242,167,57,.04)}
.brand-block:after{content:'';position:absolute;width:580px;height:580px;border-radius:50%;border:1px dashed rgba(224,180,98,.12);animation:rotate 70s linear infinite}
.brand-monogram{width:212px;height:212px;position:relative;z-index:1;display:flex;align-items:center;justify-content:center;transform:skewX(-13deg);filter:drop-shadow(0 12px 28px rgba(0,0,0,.55))}
.brand-monogram span{display:block;width:28px;height:145px;background:linear-gradient(180deg,var(--gold-hot),#b9792e);clip-path:polygon(30% 0,100% 0,70% 100%,0 100%);margin:0 -1px;transform:rotate(30deg)}
.brand-monogram span:nth-child(2){height:192px;background:linear-gradient(180deg,#f7d291,#ad6629)}.brand-monogram span:nth-child(3){height:145px}
.brand-wordmark{z-index:1;margin-top:24px;text-align:center;font:900 76px/.82 var(--font-head);letter-spacing:.04em;filter:drop-shadow(0 5px 15px rgba(0,0,0,.7))}.brand-wordmark span,.brand-wordmark strong{display:block}.brand-wordmark span{color:#e8b558}.brand-wordmark strong{color:#d7e1e4;font-size:84px;letter-spacing:.14em;padding-left:.14em}
.official-logo{z-index:2;display:block;max-width:480px;max-height:500px;object-fit:contain;filter:drop-shadow(0 20px 35px rgba(0,0,0,.58)) drop-shadow(0 0 44px rgba(247,182,73,.2))}.official-logo[hidden]{display:none}.brand-block.has-logo .brand-monogram,.brand-block.has-logo .brand-wordmark{display:none}
.title-block{z-index:1;align-self:center;min-width:0;margin-left:-5px}.title-rule{width:85px;height:5px;background:var(--gold);margin-bottom:25px;box-shadow:0 0 22px rgba(233,184,91,.5)}
.title-block h1{font:900 122px/.8 var(--font-head);letter-spacing:-.025em;text-transform:uppercase;margin:0;color:#f1f5f3;text-shadow:0 15px 28px rgba(0,0,0,.35);max-width:820px;white-space:pre-line}.title-block p{font:500 23px/1.3 var(--font-body);letter-spacing:.015em;color:#b7c7cc;margin:26px 0 0;max-width:590px}
.countdown-panel{z-index:1;align-self:end;margin-bottom:90px;border-top:3px solid var(--gold);padding-top:18px;text-align:right;background:linear-gradient(180deg,rgba(4,11,17,.38),transparent);filter:drop-shadow(0 10px 25px rgba(0,0,0,.25))}.countdown-label{font:700 22px/1 var(--font-head);letter-spacing:.14em;color:var(--gold-hot)}.countdown{font:800 104px/.95 var(--font-head);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:#fff;margin-top:8px}.countdown-foot{display:flex;justify-content:flex-end;align-items:center;gap:16px;color:#b4c0c4;font:700 18px/1 var(--font-head);letter-spacing:.14em;margin-top:15px}.signal-bars{display:flex;align-items:end;gap:3px;height:16px}.signal-bars i{display:block;width:4px;background:var(--gold);height:5px;animation:signal 1.8s ease-in-out infinite}.signal-bars i:nth-child(2){height:8px;animation-delay:.18s}.signal-bars i:nth-child(3){height:12px;animation-delay:.36s}.signal-bars i:nth-child(4){height:16px;animation-delay:.54s}
.countdown-track{height:4px;background:rgba(244,226,188,.16);overflow:hidden;margin-top:12px}.countdown-progress{height:100%;width:100%;background:linear-gradient(90deg,#bc7d33,#ffe1a0);transform-origin:left center;transition:transform .18s linear}.soon-stage.is-live .countdown{color:var(--gold-hot)}.soon-stage.is-live .title-rule{animation:live-rule 1.4s ease-in-out infinite}
.soon-footer{position:absolute;left:0;right:0;bottom:0;height:145px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:0 76px;background:linear-gradient(90deg,#d79b44,#f2c56f 50%,#bd7c2e);color:#131b1e;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);box-shadow:0 -16px 80px rgba(218,151,53,.15)}
.footer-war{display:flex;align-items:baseline;gap:20px}.footer-war span{font:800 22px/1 var(--font-head);letter-spacing:.12em}.footer-war strong{font:900 47px/1 var(--font-head);letter-spacing:.02em}.footer-center{text-align:center;font:800 23px/1 var(--font-head);letter-spacing:.18em}.footer-center b{padding:0 8px}.footer-side{text-align:right;font:700 21px/1 var(--font-head);letter-spacing:.08em}.footer-arrow{font-size:34px;vertical-align:-3px;padding-left:8px}

/* Transparent live-war graphics */
.war-stage{background:transparent;color:var(--silver)}
.war-package{position:absolute;top:34px;left:282px;width:1356px;filter:drop-shadow(0 15px 21px rgba(0,0,0,.78));animation:package-in .7s cubic-bezier(.16,1,.3,1) both}
.scoreline{height:102px;background:linear-gradient(180deg,#1e303d,#101d27 75%);display:flex;position:relative;overflow:hidden;clip-path:polygon(24px 0,calc(100% - 24px) 0,100% 24px,100% 100%,0 100%,0 24px)}
.scoreline:before{content:'';position:absolute;inset:0;background:linear-gradient(102deg,transparent 33%,rgba(238,189,103,.08) 45%,transparent 55%);background-size:250% 100%;animation:score-sweep 10s linear infinite;pointer-events:none}
.scoreline:after{content:'';position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,#a26a2a,var(--gold-hot) 48%,#8d531d)}
.scoreline-brand{width:130px;flex:none;background:linear-gradient(120deg,#e6b457,#a86625);color:#111a1c;display:flex;align-items:center;justify-content:center;gap:9px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);font:900 20px/.83 var(--font-head);letter-spacing:.02em}.scoreline-brand b{font-size:25px}.brand-sigil{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;background:#121c22;color:var(--gold);clip-path:polygon(50% 0,100% 24%,100% 75%,50% 100%,0 75%,0 24%);font:900 27px/1 var(--font-head)}
.scoreline-brand.has-logo{background:#0c1821}.scoreline-brand.has-logo .brand-sigil,.scoreline-brand.has-logo .brand-copy{display:none}.war-logo{width:118px;height:83px;object-fit:contain;filter:drop-shadow(0 5px 8px rgba(0,0,0,.4))}.war-logo[hidden]{display:none}
.scoreboard{flex:1;display:flex;min-width:0;align-items:stretch;position:relative}
.score-entry{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 22px 13px;border-right:1px solid rgba(221,236,235,.13);position:relative}
.score-entry.red{background:linear-gradient(90deg,rgba(190,51,48,.16),transparent)}.score-entry.blue{background:linear-gradient(90deg,rgba(42,130,186,.16),transparent)}
.score-entry.leader:before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold)}
.score-entry-label{min-width:0;display:flex;flex-direction:column;gap:5px}.score-entry-rank{font:700 14px/1 var(--font-head);letter-spacing:.16em;color:var(--gold)}.score-entry-name{font:800 29px/1 var(--font-head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:215px}.score-entry-score{font:900 46px/.9 var(--font-head);font-variant-numeric:tabular-nums;color:#fff;min-width:30px;text-align:right}.score-entry-score.bump{animation:score-bump .55s ease-out}
.scoreboard.two .score-entry{padding:14px 36px}.scoreboard.two .score-entry-name{font-size:38px;max-width:340px}.scoreboard.two .score-entry-score{font-size:61px}
.scoreboard.five .score-entry,.scoreboard.six .score-entry{padding:14px 12px}.scoreboard.five .score-entry-name,.scoreboard.six .score-entry-name{font-size:22px;max-width:118px}.scoreboard.five .score-entry-score,.scoreboard.six .score-entry-score{font-size:37px}
.war-identity{width:174px;flex:none;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:6px;padding:11px 17px 12px 8px;background:linear-gradient(90deg,transparent,rgba(5,13,20,.48))}.war-identity strong{font:900 24px/.9 var(--font-head);letter-spacing:.01em;text-align:right;max-width:100%;overflow-wrap:anywhere}.war-live{font:800 14px/1 var(--font-head);letter-spacing:.16em;color:#f1c66d;display:flex;align-items:center;gap:8px}.war-live i{width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red)}
.contextline{min-height:62px;display:flex;align-items:center;gap:0;color:#ecf0ee;background:linear-gradient(90deg,rgba(7,18,27,.96),rgba(11,25,34,.92));clip-path:polygon(0 0,100% 0,calc(100% - 15px) 100%,15px 100%);border-bottom:1px solid rgba(231,184,91,.5);font:600 16px/1.2 var(--font-body)}
.war-phase{align-self:stretch;display:flex;align-items:center;padding:4px 24px 4px 39px;white-space:normal;overflow-wrap:anywhere;color:#141d20;background:var(--gold);font:800 18px/1.05 var(--font-head);letter-spacing:.06em;max-width:340px}
.war-description{flex:1;min-width:0;padding:7px 22px;white-space:normal;overflow-wrap:anywhere;color:#d8e2e4}
.war-metric{padding:0 29px 0 10px;font:800 17px/1 var(--font-head);letter-spacing:.1em;color:var(--gold);white-space:nowrap}

/* Producer control page */
.control-page{background:#07111a;color:#e8eff1;min-height:100vh;font-family:var(--font-body)}
.control-header{height:76px;display:flex;justify-content:space-between;align-items:center;padding:0 4vw;background:#121f29;border-bottom:1px solid #2b3c46}.control-logo{display:flex;align-items:center;gap:13px;font:900 24px/1 var(--font-head);letter-spacing:.03em;color:#f4c36b}.control-logo b{font:700 13px/1 var(--font-head);letter-spacing:.16em;color:#a9bac1;padding-left:12px}.connection{display:flex;align-items:center;gap:9px;font-size:13px;color:#b8c6ca}.connection-dot{width:7px;height:7px;border-radius:50%;background:#e2ae57}.connection.error .connection-dot{background:#e75d54}
.control-layout{max-width:1500px;margin:auto;padding:50px 38px 90px}.control-intro{display:flex;align-items:end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:34px}.control-intro h1{font:900 68px/.9 var(--font-head);letter-spacing:-.02em;margin:0;color:#f2f4f1}.control-intro p{width:100%;margin:0;color:#aebfc6;font-size:15px}.source-links{display:flex;gap:16px;margin-left:auto}.source-links a{color:#e8bb6b;text-decoration:none;font:700 15px var(--font-head);letter-spacing:.05em;text-underline-offset:4px}.source-links a:hover{text-decoration:underline}
.control-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(385px,.9fr);gap:25px}.right-stack{display:flex;flex-direction:column;gap:25px}.control-card{background:#14222c;border:1px solid #33444d;border-radius:14px;padding:28px 30px}.control-card h2{font:800 30px/1 var(--font-head);letter-spacing:.02em;margin:0 0 22px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:14px}.section-heading h2{margin:0 0 22px}.section-heading h3{margin:0;font:800 23px/1 var(--font-head)}.section-tag{font:700 12px/1 var(--font-head);letter-spacing:.1em;color:#c5a168;align-self:flex-start;padding-top:5px}.control-card p{color:#afc0c7;font-size:14px;line-height:1.55;margin:0 0 18px}
.control-card label{display:block;color:#cbd6d9;font-size:13px;font-weight:700;letter-spacing:.01em;margin:0 0 17px}.control-card input:not([type=checkbox]):not([type=file]),.control-card textarea{display:block;width:100%;margin-top:7px;border:1px solid #45606d;background:#091720;color:#eef4f3;border-radius:8px;padding:12px 13px;font:600 15px var(--font-body);outline:none;min-height:44px}.control-card input:focus,.control-card textarea:focus{border-color:var(--gold)!important;box-shadow:0 0 0 3px rgba(233,184,91,.16)}.control-card textarea{resize:vertical;min-height:70px}.control-card input::placeholder,.control-card textarea::placeholder{color:#8ca3ad}.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.control-card button{cursor:pointer;border:0;border-radius:7px;background:#d9a44e;color:#10181b;padding:11px 15px;font:800 16px/1 var(--font-head);letter-spacing:.03em;transition:background .15s,transform .15s}.control-card button:hover{background:#f2c879}.control-card button:active{transform:translateY(1px)}.control-card button:disabled{opacity:.45;cursor:not-allowed}
.switch-label{display:flex!important;align-items:center;gap:9px;font:700 13px var(--font-body)!important;white-space:nowrap;cursor:pointer}.switch-label input{accent-color:var(--gold);width:17px;height:17px;margin:0}.mode-tabs{display:flex;gap:5px;background:#091721;border:1px solid #344853;padding:5px;border-radius:9px;margin-bottom:24px}.mode-tabs button{flex:1;background:transparent;color:#b4c5cc;padding:13px 10px;font-size:18px}.mode-tabs button.active,.mode-tabs button[aria-selected=true]{background:#e4b158;color:#101a1e}.mode-tabs button:not(.active):hover{background:#263a46;color:#fff}
.entries-heading{margin:10px 0 14px}.control-card .small-button{font-size:14px;background:#2a414d;color:#f0c46e;padding:9px 12px}.control-card .small-button:hover{background:#355361}.entry-list{display:flex;flex-direction:column;gap:8px}.entry-row{display:grid;grid-template-columns:31px minmax(0,1fr) 99px 39px 39px 31px;align-items:center;gap:8px}.entry-row .entry-number{font:800 17px var(--font-head);color:#d8ae61}.entry-row input{margin:0!important;min-width:0}.entry-row .score-input{text-align:center;font-variant-numeric:tabular-nums}.control-card .step-button{padding:0;width:39px;height:39px;background:#293e4a;color:#e8eef0;font-size:24px}.control-card .step-button:hover{background:#3a5867}.control-card .remove-button{padding:0;width:31px;height:31px;background:transparent;color:#98aeb8;font-size:23px}.control-card .remove-button:hover{background:#472d30;color:#ffd0c9}.field-hint{font-size:12px!important;color:#93a7b0!important;margin:15px 0 0!important}
.timer-controls{display:grid;grid-template-columns:115px 1fr;align-items:end;gap:14px}.timer-controls label{margin:0}.timer-buttons{display:flex;gap:7px;flex-wrap:wrap}.timer-buttons button{font-size:14px}.timer-buttons button:not(:first-child){background:#2a414d;color:#d7e4e7}.timer-buttons button:not(:first-child):hover{background:#3a5867}.timer-readout{color:#efc36c!important;font:800 17px var(--font-head)!important;letter-spacing:.05em;margin:13px 0 0!important}.logo-card .upload-row{display:flex;gap:8px;align-items:center}.logo-card input[type=file]{min-width:0;flex:1;font-size:12px;color:#b4c4c8}.logo-card input[type=file]::file-selector-button{background:#293f49;border:0;border-radius:5px;color:#e6ebeb;padding:8px;margin-right:10px;cursor:pointer}.logo-card .upload-row button{white-space:nowrap}.obs-card{background:#1c2b35}.obs-card strong{color:#f3d08c}.url-row{display:grid;grid-template-columns:108px 1fr 52px;gap:10px;align-items:center;padding:10px 0;border-top:1px solid #384c56;font-size:12px;color:#b7c6c9}.url-row code{font:600 12px/1.3 var(--font-body);color:#f1c875;word-break:break-all}.url-row button{padding:8px 6px;font-size:13px;background:#34505d;color:#e7efef}.url-row button:hover{background:#466a79}
@media(max-width:1050px){.control-grid{grid-template-columns:minmax(0,1fr)}.right-stack{display:grid;grid-template-columns:1fr 1fr}.obs-card{grid-column:1/-1}}@media(max-width:720px){.control-header{padding:0 20px}.control-logo{font-size:20px}.control-logo b{display:none}.control-layout{padding:32px 18px 60px}.control-intro h1{font-size:52px}.source-links{margin-left:0}.right-stack{display:flex;min-width:0}.control-card{padding:23px 19px;min-width:0}.two-fields{grid-template-columns:1fr}.entry-row{grid-template-columns:24px minmax(0,1fr) 44px 44px 44px;grid-template-rows:44px 44px;gap:6px}.entry-row .entry-number{grid-column:1;grid-row:1/3}.entry-row input[type=text]{grid-column:2/6;grid-row:1}.entry-row .score-input{grid-column:2;grid-row:2;text-align:left}.entry-row .step-button{width:44px;height:44px}.entry-row .step-button:nth-of-type(1){grid-column:3;grid-row:2}.entry-row .step-button:nth-of-type(2){grid-column:4;grid-row:2}.entry-row .remove-button{grid-column:5;grid-row:2;width:44px;height:44px}.timer-controls{grid-template-columns:1fr}.url-row{grid-template-columns:1fr 52px}.url-row span{grid-column:1/-1}}
@keyframes sweep{0%,17%{left:-45%}48%,100%{left:138%}}
@keyframes halo-breathe{50%{opacity:.55;transform:scale(1.045)}}
@keyframes arc-drift{50%{transform:rotate(-10deg) translateY(8px)}}
@keyframes rotate{to{transform:rotate(360deg)}}
@keyframes blink{50%{opacity:.35}}
@keyframes signal{50%{opacity:.3;transform:scaleY(.65)}}
@keyframes package-in{from{opacity:0;transform:translateY(-30px);filter:blur(8px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes score-sweep{0%{background-position:180% 0}100%{background-position:-80% 0}}
@keyframes score-bump{0%{color:var(--gold-hot);transform:scale(1.2)}100%{color:#fff;transform:scale(1)}}
@keyframes live-rule{50%{transform:scaleX(1.5);opacity:.7}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
