*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;color:#f6f5f4;font-family:Inter,'Arial Black',Arial,sans-serif;background:#07080c}
body{background:radial-gradient(ellipse at 76% 24%,#4d243b 0%,transparent 42%),radial-gradient(ellipse at 15% 88%,#29213e 0%,transparent 48%),linear-gradient(132deg,#08090e,#14111b 56%,#07080c)}
body:before{content:'';position:fixed;inset:0;background:repeating-linear-gradient(112deg,transparent 0 90px,#ffffff05 91px 92px),radial-gradient(circle at 80% 20%,#e9ad5d15,transparent 30%);animation:drift 18s linear infinite;pointer-events:none}
@keyframes drift{50%{transform:translate(22px,-18px)}}
.frame{position:relative;width:100vw;height:100vh;padding:65px 94px;overflow:hidden;border-top:7px solid #cba36b;border-bottom:7px solid #cba36b}
.frame:before{content:'';position:absolute;inset:22px;border:1px solid #ffffff24;pointer-events:none}
.frame:after{content:'';position:absolute;width:980px;height:980px;right:-250px;top:-250px;border:1px solid #e5b8752b;border-radius:50%;box-shadow:0 0 0 100px #ffffff04,0 0 0 200px #ffffff03;pointer-events:none}
.brand{position:relative;z-index:2;font-size:24px;font-weight:900;letter-spacing:4px;color:#fff}
.brand b{color:#efc17e}
.pill{position:relative;z-index:2;display:inline-block;padding:11px 21px;background:#e6b978;color:#171018;font-size:17px;font-weight:900;letter-spacing:4px;margin-top:86px}
.hero{position:relative;z-index:2;font-size:clamp(68px,7vw,126px);line-height:.96;font-weight:1000;letter-spacing:-4px;text-transform:uppercase;margin:40px 0 28px;text-shadow:0 20px 40px #000a}
.red{color:#e8b678}
.sub{position:relative;z-index:2;font-size:27px;color:#d3d1dc;letter-spacing:2px;max-width:1450px}
.footer{position:absolute;z-index:2;bottom:65px;left:94px;color:#c2b5ab;font-size:18px;letter-spacing:4px}
.counter{position:relative;z-index:2;font-size:110px;font-weight:1000;letter-spacing:7px;margin:35px 0;color:#fff;font-variant-numeric:tabular-nums}
.rot{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:60px}
.map{border:1px solid #ffffff33;background:linear-gradient(145deg,#23202eeb,#0f111bed);padding:26px 23px;min-height:235px;box-shadow:0 15px 38px #0006}
.map.selected{border:2px solid #efc17e;background:linear-gradient(145deg,#624332,#241a25);transform:translateY(-10px);box-shadow:0 20px 50px #000a,0 0 35px #e2b27323}
.mapno{font-size:16px;color:#b9a9a5;letter-spacing:3px;font-weight:800}
.mapname{font-size:38px;font-weight:1000;margin:22px 0}
.time{font-size:21px;color:#edc58e}
.status{font-size:14px;letter-spacing:3px;color:#c5bdc8;margin-top:18px;font-weight:800}
.error{color:#fca6ad;font-size:28px}
@media(max-width:1100px){.hero{font-size:70px}.rot{gap:10px}.map{padding:12px}.mapname{font-size:23px}}
@media(prefers-reduced-motion:reduce){body:before{animation:none}}

/* Cinematic NEXT MATCH reveal */
@keyframes awShowIn{from{opacity:0;transform:translate3d(0,50px,0);filter:blur(7px)}to{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}}
@keyframes awLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
#stage .pill{animation:awShowIn .55s .12s both}
#stage .hero{animation:awShowIn .8s .3s both;text-shadow:0 12px 50px #000b,0 0 35px #e7b56e33}
#stage .sub{animation:awShowIn .7s .55s both}
#stage .map{animation:awShowIn .65s both;animation-delay:calc(.65s + var(--map-index,0) * 120ms);transition:box-shadow .3s,border-color .3s}
#stage .map.selected{box-shadow:0 20px 50px #000a,0 0 50px #e2b27355}
@media(prefers-reduced-motion:reduce){#stage .pill,#stage .hero,#stage .sub,#stage .map{animation:none!important}}