*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#080a0f;color:#f5f7fa;font-family:Arial,sans-serif}body{overflow:hidden}main{min-height:100%;padding:2vh 2.5vw;background:radial-gradient(circle at 50% 35%,#151c29 0,#080a0f 58%)}header{height:10vh;display:flex;align-items:center;justify-content:space-between}h1{margin:0;font-size:clamp(24px,3vw,48px);font-weight:900;letter-spacing:1px}h1 span{color:#00d9ff}p{margin:8px 0 0;color:#00d9ff;font-weight:700;font-size:clamp(11px,1.2vw,18px)}.live{color:#ff3158;font-weight:900;font-size:clamp(14px,1.5vw,22px)}.arena{height:63vh;display:grid;grid-template-columns:1fr 180px 1fr;gap:2vw;align-items:center}.card{height:48vh;border:1px solid #293142;border-radius:22px;background:linear-gradient(180deg,#171d29,#10151f);display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:0 20px 60px #0008;transition:.25s}.card small{color:#7f899b;font-weight:800;letter-spacing:2px}.flag{font-size:clamp(70px,10vw,150px);margin:18px 0;filter:drop-shadow(0 12px 20px #000)}h2{font-size:clamp(20px,2.4vw,40px);margin:0;text-align:center}.center{text-align:center}.vs{color:#7f899b;font-weight:900;font-size:18px}.center #score{font-size:clamp(38px,5vw,76px);font-weight:900;margin:12px 0}.center #status{color:#00d9ff;font-weight:800}.bottom{height:20vh;display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center}#leaderboard{font-size:clamp(12px,1.2vw,17px);color:#b9c2d0;white-space:pre-line;max-height:17vh;overflow:hidden}button{height:52px;border:1px solid #293142;border-radius:12px;background:#141923;color:#fff;font-weight:900;padding:0 20px;font-size:15px}#start{background:#00d9ff;color:#061017;border:0}button:disabled{opacity:.5}.win{animation:win .55s ease}@keyframes win{50%{transform:scale(1.06);box-shadow:0 0 35px #00d9ff55}}.stream .bottom{display:none}.streambar{display:grid}.stream header{height:12vh}.stream .arena{height:88vh}.stream .card{height:64vh}@media(max-width:800px){.arena{grid-template-columns:1fr 110px 1fr}.card{height:48vh}.flag{font-size:70px}.bottom{grid-template-columns:1fr auto}.bottom #stream{display:none}}
.flag{width:min(22vw,260px);height:min(15vw,170px);font-size:0;margin:18px 0;display:flex;align-items:center;justify-content:center;border:1px solid #39465c;border-radius:12px;overflow:hidden;background:#0b0f16;box-shadow:0 18px 45px #000a;transform:translateZ(0)}
.flag svg{width:100%;height:100%;display:block}
.battle-in{animation:battleIn .55s cubic-bezier(.2,.8,.2,1)}
.battle-out{animation:battleOut .45s ease forwards}
.winner{animation:winnerPulse .8s ease-in-out 2;box-shadow:0 0 0 2px #00d9ff,0 0 40px #00d9ff88}
.loser{animation:loserFade .8s ease forwards}
#score.score-pop{animation:scorePop .45s ease}
#stage.stage-slam{animation:stageSlam .4s ease}
@keyframes battleIn{from{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes battleOut{to{opacity:0;transform:translateY(-20px) scale(.97)}}
@keyframes winnerPulse{50%{transform:scale(1.045);filter:drop-shadow(0 0 18px #00d9ff)}}
@keyframes loserFade{to{opacity:.42;filter:grayscale(1)}}
@keyframes scorePop{50%{transform:scale(1.18);color:#00d9ff}}
@keyframes stageSlam{50%{transform:scale(1.06)}}

.flag img{width:100%;height:100%;object-fit:cover;display:block}

#flash{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:0;background:radial-gradient(circle,#00d9ff88,#00d9ff00 60%)}#flash.go{animation:flash .5s ease}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:49;overflow:hidden}.piece{position:absolute;width:8px;height:18px;background:#00d9ff;animation:fall 1.8s linear forwards}.piece:nth-child(3n){background:#ff3158}.piece:nth-child(4n){background:#f5c542}
.streambar{height:7vh;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:8px 0}.streambar>div{background:#0e131c;border:1px solid #293142;border-radius:10px;display:flex;justify-content:center;align-items:center;gap:9px}.streambar b{font-size:11px;color:#7f899b}.streambar span{font-size:15px;font-weight:900;color:#00d9ff}
.arena .card{position:relative}.card:after{content:"";position:absolute;inset:0;border-radius:22px;pointer-events:none;border:1px solid transparent}.winner:after{animation:edgePulse .8s ease-in-out 2;border-color:#00d9ff}
#sound{min-width:120px}
@keyframes flash{0%{opacity:0}20%{opacity:1}100%{opacity:0}}
@keyframes fall{from{transform:translateY(-20px) rotate(0deg);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}
@keyframes edgePulse{50%{box-shadow:inset 0 0 35px #00d9ff55}}
@media(max-width:800px){.streambar{grid-template-columns:repeat(4,1fr);font-size:11px}.streambar>div{flex-direction:column;gap:2px}.streambar span{font-size:12px}}

.bracket{position:fixed;inset:5vh 4vw;z-index:60;background:#090d14ee;backdrop-filter:blur(18px);border:1px solid #334158;border-radius:20px;padding:20px;box-shadow:0 30px 100px #000c;overflow:auto}.bracket.hidden{display:none}.bracket-head{display:flex;justify-content:space-between;align-items:center;color:#00d9ff;font-size:18px;margin-bottom:14px}.bracket-head button{height:38px;min-width:38px;padding:0}.bracket-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.roundcol{min-width:150px}.roundtitle{color:#7f899b;font-size:11px;font-weight:900;letter-spacing:1px;margin-bottom:8px}.slot{background:#141923;border:1px solid #293142;border-radius:9px;padding:7px;margin:5px 0;font-size:12px;display:flex;justify-content:space-between}.slot.active{border-color:#00d9ff;box-shadow:0 0 16px #00d9ff33}.slot.winner{color:#00d9ff}.bracket-grid{display:flex;min-width:760px}.roundcol{flex:1}