:root{--bg:#07131f;--panel:#0f2235;--line:#24425f;--mut:#9fb3c8;--gold:#ffcc33;--green:#1fbf5a;--red:#e8383d}
@font-face{font-family:Anton;src:url(fonts/Anton.ttf) format("truetype");font-display:swap}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:#fff;font-family:"Segoe UI",Arial,sans-serif;overflow:hidden}
.hidden{display:none!important}
.screen{position:fixed;inset:0;display:flex;flex-direction:column}
.logo{font-family:Anton,Impact,"Arial Black",sans-serif;font-size:28px;letter-spacing:1px;white-space:nowrap}.logo span{color:var(--gold)}
.logo.big{font-size:44px;text-align:center}.logo.huge{font-size:clamp(48px,7vw,120px);text-align:center;text-shadow:0 6px 0 #000a}
.sub{font-family:Anton,Impact,sans-serif;color:var(--gold);letter-spacing:4px;text-align:center;font-size:clamp(16px,1.8vw,30px)}
.card{background:var(--panel);border:2px solid var(--line);border-radius:20px;box-shadow:0 20px 60px #000a}
.btn{font:inherit;font-weight:800;font-size:20px;padding:12px 22px;border-radius:12px;border:2px solid var(--line);background:#12304b;color:#fff;cursor:pointer}
.btn:hover{filter:brightness(1.15)}.btn.gold{background:var(--gold);color:#0b1b2b;border-color:#ffe08a}.btn.small{font-size:16px;padding:6px 12px}
.btn:focus-visible,input:focus-visible,.sport:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.link{background:none;border:0;color:var(--mut);text-decoration:underline;cursor:pointer;font-size:15px}
.gate,.menu{align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 30%,#14466e,#06111c 70%)}
.gate-card{padding:32px 40px;display:flex;flex-direction:column;gap:12px;min-width:min(480px,92vw)}
.gate-card input{font-size:24px;padding:12px;border-radius:10px;border:2px solid var(--line);background:#081726;color:#fff}
.gate-card label{color:var(--mut)}.msg{color:#ff8a8a;min-height:1.2em}
.menu{gap:clamp(14px,2.4vh,30px)}
.sports{display:flex;gap:clamp(14px,2vw,34px)}
.sport{width:clamp(200px,20vw,340px);aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border-radius:26px;border:4px solid var(--gold);background:linear-gradient(160deg,#16426a,#0b2238);color:#fff;cursor:pointer;box-shadow:0 14px 40px #000a;transition:transform .12s}
.sport:hover{transform:translateY(-6px) scale(1.03)}.sport .ico{font-size:clamp(56px,6vw,110px)}.sport b{font-family:Anton,Impact,sans-serif;font-size:clamp(28px,2.6vw,48px);letter-spacing:2px}.sport small{color:var(--mut);font-size:clamp(14px,1.1vw,20px)}
.teams{display:flex;align-items:center;gap:14px;padding:14px 22px;font-size:20px}
.teams input:not([type]){font-size:20px;padding:8px 12px;border-radius:10px;border:2px solid var(--line);background:#081726;color:#fff;width:200px}
.teams .vs{font-family:Anton,sans-serif;color:var(--gold)}.chk{display:flex;align-items:center;gap:8px;font-weight:800}.chk input{width:24px;height:24px}
.help{color:var(--mut);font-size:clamp(14px,1.1vw,20px)}.help b{color:#fff}
.topbar{display:flex;align-items:center;gap:12px;padding:8px 14px;background:linear-gradient(#0d2033,#081726);border-bottom:3px solid var(--gold);flex:0 0 auto}
.topbar .logo{flex:0 0 auto}.clipno{font-family:Anton,sans-serif;font-size:24px;color:var(--gold);margin-left:8px;flex:1}
.score{display:flex;gap:10px}.tm{font-family:Anton,sans-serif;font-size:24px;padding:4px 14px;border-radius:10px}.tm.a{background:#1d5fa8}.tm.b{background:#a8331d}
.stage{position:relative;flex:1;min-height:0;background:#000;overflow:hidden}
.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.stage video.off{visibility:hidden}
.titletag{position:absolute;left:2%;top:3%;max-width:70%;font-family:Anton,sans-serif;font-size:clamp(20px,2.2vw,40px);letter-spacing:1px;background:#081726e0;border-left:8px solid var(--gold);padding:8px 18px;border-radius:6px;text-shadow:0 2px 0 #000}
.pausedtag{position:absolute;right:2%;top:3%;font-family:Anton,sans-serif;font-size:clamp(24px,2.5vw,44px);background:#000c;padding:8px 18px;border-radius:10px;color:var(--gold)}
.freeze{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:3% 2% 3%;pointer-events:none;background:linear-gradient(#0000 55%,#000b)}
.freeze .q{font-family:Anton,sans-serif;font-size:clamp(44px,6.2vw,118px);color:var(--gold);letter-spacing:2px;text-shadow:0 0 18px #000,0 6px 0 #000;margin-top:4%;animation:pulse 1s infinite alternate}
@keyframes pulse{from{transform:scale(1)}to{transform:scale(1.05)}}
.choices{display:flex;align-items:stretch;justify-content:center;gap:2.5vw;width:100%}
.choice{flex:0 1 36%;border-radius:22px;padding:1vw 1.6vw;text-align:center;box-shadow:0 10px 40px #000c;border:5px solid #fff}
.choice.mk{background:linear-gradient(#22c45fee,#0f7a38ee)}.choice.bk{background:linear-gradient(#ee4448ee,#9c1d21ee)}
.choice .tag{font-family:Anton,sans-serif;font-size:clamp(18px,1.6vw,30px);letter-spacing:2px;opacity:.95}
.choice .lbl{font-family:Anton,sans-serif;font-size:clamp(36px,4.6vw,88px);line-height:1.05;text-shadow:0 4px 0 #0006}
.clock{display:flex;align-items:center;justify-content:center}
.clock .num{width:clamp(110px,10vw,190px);height:clamp(110px,10vw,190px);border-radius:50%;background:#081726;border:8px solid var(--gold);display:flex;align-items:center;justify-content:center;font-family:Anton,sans-serif;font-size:clamp(60px,6.4vw,124px);box-shadow:0 0 0 6px #0008,0 10px 40px #000c}
.clock .num.low{border-color:var(--red);color:#ffd2d2;animation:shake .25s infinite}
@keyframes shake{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
.banner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2vh;background:#000a;animation:pop .35s ease-out}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.banner .big{font-family:Anton,sans-serif;font-size:clamp(70px,10vw,190px);letter-spacing:3px;padding:.1em .5em;border-radius:28px;border:8px solid #fff;text-shadow:0 8px 0 #0006;box-shadow:0 20px 70px #000}
.banner .big.mk{background:linear-gradient(#22c45f,#0f7a38)}.banner .big.bk{background:linear-gradient(#ee4448,#9c1d21)}
.banner .small{font-family:Anton,sans-serif;font-size:clamp(28px,3.4vw,64px);color:var(--gold);text-shadow:0 4px 0 #000;text-align:center}
.bbtns{display:flex;gap:16px}.bbtns .btn{font-size:clamp(18px,1.5vw,28px)}
.award{display:flex;flex-direction:column;align-items:center;gap:10px;background:#081726e6;padding:14px 22px;border-radius:16px;border:2px solid var(--line)}
.award .who{font-weight:800;font-size:clamp(18px,1.4vw,26px)}.awbtns{display:flex;gap:10px}.awbtns .btn{font-size:clamp(18px,1.4vw,26px)}
#awA{background:#1d5fa8}#awB{background:#a8331d}.award.given .btn{opacity:.45}.award.given .btn.pick{opacity:1;outline:3px solid var(--gold)}
