*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Arial,'Arial Black',sans-serif;background:#080a10;color:#fff}
.scene{width:100vw;height:100vh;position:relative;overflow:hidden;background:radial-gradient(ellipse at 80% 48%,#7d243a44,transparent 55%),radial-gradient(ellipse at 15% 60%,#a12b2735,transparent 48%),linear-gradient(118deg,#0a0c12,#1d121a 58%,#0b0e17);border-top:7px solid #e8384c;border-bottom:7px solid #e8384c}
.ambient{position:absolute;inset:-15%;background:repeating-linear-gradient(125deg,transparent 0 140px,#ffffff06 141px 142px);animation:drift 18s ease-in-out infinite alternate}
.scan{position:absolute;inset:0;background:linear-gradient(transparent 0%,#f03e4a07 49%,transparent 50%);background-size:100% 140px;opacity:.45;animation:scan 9s linear infinite}
.topbar{height:128px;display:flex;justify-content:space-between;align-items:center;padding:20px 80px;position:relative;z-index:2;border-bottom:1px solid #ffffff18}
.brand{display:flex;gap:17px;align-items:center}.brand img{width:105px;height:95px;object-fit:contain;filter:drop-shadow(0 0 12px #ef395455)}
.brand strong{font-size:28px;letter-spacing:2px;display:block}.brand span{font-size:12px;letter-spacing:4px;color:#c7a9a9;font-weight:800;margin-top:8px;display:block}
.live-mark{font-size:17px;letter-spacing:3px;font-weight:900;color:#f1c1bb}.live-mark i{display:inline-block;width:11px;height:11px;background:#f33b54;border-radius:50%;box-shadow:0 0 17px #ff4358;animation:pulse 1.5s infinite;margin-right:12px}
#stage{position:relative;z-index:2;height:calc(100% - 195px);display:grid;grid-template-columns:43% 57%;gap:0;padding:35px 75px 20px}
.left{display:flex;flex-direction:column;justify-content:center;min-width:0;animation:slideIn .8s both}
.eyebrow{font-size:20px;font-weight:900;letter-spacing:5px;color:#f3c0b2;display:flex;align-items:center;gap:16px}.eyebrow .line{width:48px;height:5px;background:#ef3954;box-shadow:0 0 20px #ef3954}.eyebrow b{color:#e93a52}
h1{font-size:clamp(95px,10vw,195px);font-family:Impact,'Arial Black',Arial,sans-serif;line-height:.86;letter-spacing:4px;margin:35px 0 35px;text-shadow:0 20px 40px #000a}h1 em{font-style:normal;color:#f23c55;text-shadow:0 0 45px #ee3e5355}
.divider{width:82%;height:5px;background:linear-gradient(90deg,#f13d55,#e9ac76,transparent)}
.match-meta{margin-top:30px}.mini{font-size:15px;letter-spacing:4px;font-weight:900;color:#f1c28a}.match-meta strong{display:block;font:900 clamp(45px,5.2vw,90px) Impact,Arial,sans-serif;letter-spacing:4px;margin-top:10px;text-transform:uppercase}.match-meta p{font-size:18px;letter-spacing:3px;color:#e0c9c7;font-weight:800;margin:10px 0}
.message{font-size:18px;color:#e6bdbd;margin-top:12px;max-width:90%;overflow-wrap:anywhere}
.countdown{margin-top:28px;border:1px solid #f03c5666;background:#130f1acc;box-shadow:inset 5px 0 #ed3952,0 10px 40px #0008;padding:17px 26px;max-width:470px;display:flex;align-items:center;justify-content:space-between;gap:15px}
.count-label{font-size:14px;letter-spacing:2px;color:#c9adb1;font-weight:900}.countdown #counter{font:900 48px Impact,Arial,sans-serif;letter-spacing:2px;color:#f6d1a3;font-variant-numeric:tabular-nums}
.right{display:flex;flex-direction:column;justify-content:center;gap:30px;padding:25px 0 25px 20px;min-width:0;animation:slideUp 1s .2s both}
.picture-frame{position:relative;border:3px solid #f04456;padding:10px;background:#170e17;box-shadow:0 0 0 10px #f0445612,0 0 75px #ed344a4a,0 30px 80px #000b;transform:skewX(-2deg)}
.picture-frame:before,.picture-frame:after{content:'';position:absolute;width:100px;height:12px;background:#f8c18c;z-index:3}.picture-frame:before{top:-8px;left:40px}.picture-frame:after{bottom:-8px;right:40px}
.image-wrap{height:min(43vh,460px);position:relative;overflow:hidden;background:#253743}.map-photo{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.05);animation:mapZoom 15s ease-in-out infinite alternate}
.image-sheen{position:absolute;inset:0;background:linear-gradient(0deg,#0a0c15d9,transparent 55%),linear-gradient(100deg,#ed3b5020,transparent 40%)}
.map-caption{display:flex;flex-direction:column;gap:8px;padding:20px 25px 15px;background:linear-gradient(100deg,#270e1b,#11131d)}
.tag{font-size:14px;letter-spacing:4px;color:#ed9c98;font-weight:900}.map-caption strong{font:900 clamp(50px,5vw,95px) Impact,Arial,sans-serif;letter-spacing:5px;line-height:1;color:#fff}.caption-note{font-size:14px;letter-spacing:4px;font-weight:900;color:#f2be8e}
.rotation{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.rotation-item{border:1px solid #ffffff33;background:#1c1b26d9;padding:15px 9px;display:flex;flex-direction:column;gap:8px;min-width:0;opacity:.72}
.rotation-item.active{border:2px solid #f13d55;background:#6b2635;opacity:1;box-shadow:0 0 28px #ef3a5044}.rotation-item span{font-size:15px;letter-spacing:2px;color:#e6b0aa;font-weight:900}.rotation-item strong{font-size:clamp(13px,1.3vw,23px);text-transform:uppercase;overflow:hidden;text-overflow:ellipsis}
.bottom-brand{position:absolute;bottom:0;left:0;right:0;height:67px;padding:0 80px;display:flex;align-items:center;justify-content:space-between;background:#090b12e6;border-top:1px solid #e93e5544;font-size:14px;letter-spacing:3px;font-weight:900;color:#e4d3d4}.bottom-brand b{color:#f03d55}.bottom-brand em{font-style:normal;color:#f03d55;padding:0 10px}
.loading{grid-column:1/-1;align-self:center;text-align:center;font-size:32px;letter-spacing:4px;color:#f0b3ac}
@keyframes drift{to{transform:translate(35px,-25px)}}@keyframes scan{to{background-position:0 140px}}@keyframes pulse{50%{opacity:.3}}@keyframes slideIn{from{opacity:0;transform:translateX(-65px)}to{opacity:1;transform:none}}@keyframes slideUp{from{opacity:0;transform:translateY(55px)}to{opacity:1;transform:none}}@keyframes mapZoom{to{transform:scale(1.16)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important}}
@media(max-height:850px){.topbar{height:100px}.brand img{height:75px;width:80px}#stage{height:calc(100% - 165px);padding-top:15px;padding-bottom:10px}h1{font-size:120px;margin:20px 0}.image-wrap{height:35vh}.map-caption strong{font-size:56px}.right{gap:15px}.match-meta{margin-top:15px}.countdown{margin-top:15px}}

/* Use supplied branded BGMI map banners as local assets; crop to right side to avoid duplicate match text/logo */
.image-wrap{background:#0a0c12}
.map-photo{object-fit:cover;object-position:100% 50%;width:100%;height:100%;transform:scale(1.05);animation:mapZoom 15s ease-in-out infinite alternate}
.image-sheen{background:linear-gradient(0deg,#0a0c15b0,transparent 43%)}

.map-error{display:none;position:absolute;inset:0;align-items:center;justify-content:center;font-size:24px;letter-spacing:3px;font-weight:900;color:#f7d6d6;background:#19141c}.image-unavailable .map-error{display:flex}.image-unavailable .image-sheen{display:none}