:root {
  --red: #ff3454;
  --red2: #ff8b54;
  --blue: #35a1ff;
  --blue2: #56e0ff;
  --gold: #ffe071;
  --glass: rgba(5, 11, 24, .78);
  --glass2: rgba(7, 14, 30, .9);
  --line: rgba(255,255,255,.14);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
body { font-family: Arial, Helvetica, sans-serif; color: #fff; background: #020711; }
button { font: inherit; }
.hidden { display: none !important; }

.sound-unlock { position: fixed; z-index: 2000; right: 12px; top: calc(10px + var(--safe-top)); border: 1px solid rgba(255,255,255,.24); background: rgba(0,0,0,.68); color: #fff; border-radius: 999px; padding: 9px 12px; font-size: 12px; font-weight: 900; letter-spacing: .4px; box-shadow: 0 12px 32px rgba(0,0,0,.35); }
.sound-unlock.hidden { display: none; }

.stage { position: relative; width: 100vw; height: 100svh; min-height: 620px; padding: calc(10px + var(--safe-top)) 10px calc(9px + var(--safe-bottom)); display: grid; grid-template-rows: 88px 132px minmax(282px, 1fr) 54px 92px 82px; gap: 8px; overflow: hidden; background: radial-gradient(circle at 50% 18%, rgba(45,255,168,.16), transparent 34%), radial-gradient(circle at 18% 38%, rgba(255,52,90,.14), transparent 30%), radial-gradient(circle at 82% 40%, rgba(47,156,255,.18), transparent 32%), linear-gradient(180deg, #051511 0%, #06111a 48%, #020711 100%); }
.stage:before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent 85%); }
.stage:after { content: ''; position: absolute; inset: -35%; pointer-events: none; background: conic-gradient(from 180deg at 50% 50%, transparent 0deg, rgba(255,255,255,.07) 30deg, transparent 72deg, rgba(74,222,128,.07) 120deg, transparent 170deg, rgba(56,189,248,.08) 240deg, transparent 360deg); animation: ambientSpin 26s linear infinite; opacity: .52; }
@keyframes ambientSpin { to { transform: rotate(360deg); } }

.glass-card { position: relative; z-index: 2; background: linear-gradient(180deg, rgba(8,14,28,.86), rgba(3,8,18,.78)); border: 1px solid rgba(255,255,255,.13); border-radius: 24px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 44px rgba(0,0,0,.28); backdrop-filter: blur(9px); }

.hud-top { z-index: 3; display: grid; grid-template-columns: 1fr 172px; gap: 8px; }
.brand-card { padding: 14px 16px; overflow: hidden; }
.brand-card:before { content: ''; position: absolute; inset: -1px auto -1px -2px; width: 6px; background: linear-gradient(180deg, var(--gold), rgba(255,224,113,0)); opacity: .9; }
.eyebrow { display: block; color: var(--gold); font-size: 11px; letter-spacing: 5px; line-height: 1; }
.brand-card strong { display: block; margin-top: 5px; max-width: 92%; font-size: clamp(24px, 5.8vw, 36px); line-height: .95; letter-spacing: 1px; font-weight: 1000; text-transform: uppercase; }
.brand-card small { display: block; margin-top: 4px; color: rgba(255,255,255,.62); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.timer-card { display: grid; place-items: center; text-align: center; padding: 8px; }
.timer-card span { color: rgba(255,255,255,.72); letter-spacing: 4px; font-size: 12px; text-transform: uppercase; }
.timer-card strong { margin-top: -6px; font-size: clamp(38px, 10vw, 56px); line-height: 1; font-weight: 1000; text-shadow: 0 0 26px rgba(255,255,255,.22); }

.score-row { z-index: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.team-card { min-width: 0; padding: 12px; overflow: hidden; }
.team-card:after { content: ''; position: absolute; width: 120px; height: 120px; border-radius: 50%; right: -48px; top: -54px; opacity: .22; filter: blur(2px); }
.team-red:after { background: var(--red); }
.team-blue:after { background: var(--blue); }
.team-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.team-head strong { min-width: 0; font-size: clamp(20px, 5vw, 30px); line-height: 1; text-transform: uppercase; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.team-head span { flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.85); font-size: 11px; font-weight: 900; }
.hp-track { height: 16px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 0 12px rgba(0,0,0,.25); }
.hp-fill, .energy-fill { width: 100%; height: 100%; border-radius: inherit; transition: width .28s cubic-bezier(.2,.8,.2,1); }
.red-fill { background: linear-gradient(90deg, var(--red), var(--red2)); box-shadow: 0 0 24px rgba(255,52,84,.34); }
.blue-fill { background: linear-gradient(90deg, var(--blue), var(--blue2)); box-shadow: 0 0 24px rgba(53,161,255,.34); }
.team-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 5px; font-size: 12px; font-weight: 1000; color: rgba(255,255,255,.92); }
.energy-track { height: 7px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; border: 1px solid rgba(255,255,255,.12); }
.energy-fill { background: linear-gradient(90deg, #ffce3a, #fff3a3); box-shadow: 0 0 18px rgba(255,216,78,.25); }
.mini-avatars { height: 32px; margin-top: 8px; display: flex; align-items: center; gap: 4px; overflow: hidden; }
.avatar { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; color: #fff; background: rgba(255,255,255,.14); border: 2px solid rgba(255,255,255,.22); font-size: 10px; font-weight: 1000; box-shadow: 0 8px 16px rgba(0,0,0,.25); animation: avatarIn .28s ease both; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.red { border-color: rgba(255,65,90,.9); }
.avatar.blue { border-color: rgba(75,165,255,.9); }
@keyframes avatarIn { from { transform: translateY(6px) scale(.6); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

.arena-card { z-index: 2; min-height: 0; overflow: hidden; display: grid; grid-template-columns: 1fr 90px 1fr; align-items: end; padding: 34px 18px 40px; border-radius: 28px; background: linear-gradient(180deg, rgba(20,34,68,.76), rgba(8,16,30,.86) 58%, rgba(20,24,20,.94)); }
.arena-bg { position: absolute; inset: 0; background: radial-gradient(circle at 50% 18%, rgba(255,224,113,.18), transparent 28%), radial-gradient(circle at 20% 54%, rgba(255,52,84,.18), transparent 26%), radial-gradient(circle at 80% 54%, rgba(53,161,255,.2), transparent 26%); }
.arena-bg:after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 32%; background: linear-gradient(180deg, transparent, rgba(43,73,42,.7)); border-top: 1px solid rgba(255,255,255,.1); }
.arena-lines { position: absolute; left: 8%; right: 8%; height: 2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent); z-index: 1; }
.line-1 { bottom: 34%; }
.line-2 { bottom: 22%; }
.battle-label { position: absolute; z-index: 4; top: 14px; padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,.34); border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.82); font-size: 11px; letter-spacing: 2px; font-weight: 1000; text-transform: uppercase; }
.red-label { left: 14px; }
.blue-label { right: 14px; }

.castle { position: relative; z-index: 5; width: min(34vw, 170px); height: min(33vh, 230px); min-height: 164px; align-self: end; justify-self: center; transform-origin: 50% 100%; filter: drop-shadow(0 26px 22px rgba(0,0,0,.38)); animation: castleIdle 3.2s ease-in-out infinite; }
.castle.hit { animation: castleHit .45s ease both; }
.castle-base { position: absolute; left: 50%; bottom: 0; width: 100%; height: 78%; transform: translateX(-50%); }
.castle-base i, .castle-base b { position: absolute; bottom: 0; display: block; border-radius: 16px 16px 5px 5px; background: linear-gradient(180deg, #f2f5ff, #80899d); border: 3px solid rgba(255,255,255,.25); }
.castle-base i { width: 33%; height: 88%; }
.castle-base i:first-child { left: 0; }
.castle-base i:last-child { right: 0; }
.castle-base b { left: 50%; transform: translateX(-50%); width: 52%; height: 68%; }
.castle-door { position: absolute; left: 50%; bottom: 0; width: 22%; height: 30%; transform: translateX(-50%); background: #111827; border-radius: 999px 999px 0 0; z-index: 6; }
.castle-flag { position: absolute; z-index: 7; top: 2%; width: 44%; height: 14%; border-radius: 4px 12px 12px 4px; animation: flagWave 1.4s ease-in-out infinite; transform-origin: left center; }
.castle-aura { position: absolute; inset: 4%; border-radius: 40%; filter: blur(20px); opacity: .35; }
.castle-red .castle-flag { left: 30%; background: var(--red); }
.castle-blue .castle-flag { right: 30%; background: var(--blue); transform-origin: right center; }
.castle-red .castle-base i, .castle-red .castle-base b { box-shadow: inset 0 0 28px rgba(255,52,84,.25); }
.castle-blue .castle-base i, .castle-blue .castle-base b { box-shadow: inset 0 0 28px rgba(53,161,255,.3); }
.castle-red .castle-aura { background: rgba(255,52,84,.7); }
.castle-blue .castle-aura { background: rgba(53,161,255,.75); }
@keyframes castleIdle { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes castleHit { 0%,100% { transform: translateX(0) rotate(0); filter: drop-shadow(0 26px 22px rgba(0,0,0,.38)); } 22% { transform: translateX(-9px) rotate(-1.4deg); filter: drop-shadow(0 26px 22px rgba(0,0,0,.38)) brightness(1.7); } 52% { transform: translateX(9px) rotate(1.4deg); } }
@keyframes flagWave { 0%,100% { transform: skewY(0); } 50% { transform: skewY(8deg); } }

.vs-orb { position: relative; z-index: 8; align-self: center; justify-self: center; width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(255,224,113,.23), rgba(0,0,0,.48)); border: 2px solid rgba(255,255,255,.16); box-shadow: 0 0 56px rgba(255,224,113,.26); animation: orbPulse 1.9s ease-in-out infinite; }
.vs-orb span { font-size: 30px; font-weight: 1000; }
.vs-orb em { position: absolute; bottom: -18px; font-style: normal; color: var(--gold); font-size: 9px; letter-spacing: 2px; font-weight: 1000; }
@keyframes orbPulse { 50% { transform: scale(1.06); box-shadow: 0 0 70px rgba(255,224,113,.35); } }

.unit-layer, .projectile-layer, .effect-layer, .toast-layer { position: absolute; inset: 0; pointer-events: none; z-index: 12; overflow: visible; }
.unit { position: absolute; bottom: 24%; width: 40px; height: 40px; display: grid; place-items: center; font-size: 26px; z-index: 14; filter: drop-shadow(0 10px 8px rgba(0,0,0,.55)); }
.unit:after { content: ''; position: absolute; bottom: -5px; width: 30px; height: 7px; border-radius: 50%; background: rgba(0,0,0,.35); z-index: -1; }
.unit.red { left: 23%; animation: unitRed 1.35s linear forwards; }
.unit.blue { right: 23%; animation: unitBlue 1.35s linear forwards; }
@keyframes unitRed { 0% { transform: translate(0,12px) scale(.7); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(41vw,-10px) scale(1); opacity: 0; } }
@keyframes unitBlue { 0% { transform: translate(0,12px) scale(.7); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(-41vw,-10px) scale(1); opacity: 0; } }
.projectile { position: absolute; z-index: 15; bottom: 42%; width: 16px; height: 16px; border-radius: 50%; background: #ffd95c; box-shadow: 0 0 22px rgba(255,217,92,.85); }
.projectile:after { content: ''; position: absolute; top: 6px; width: 54px; height: 4px; background: linear-gradient(90deg, rgba(255,217,92,.85), transparent); }
.projectile.red { left: 27%; animation: projectileRed .78s cubic-bezier(.2,.7,.2,1) forwards; }
.projectile.blue { right: 27%; animation: projectileBlue .78s cubic-bezier(.2,.7,.2,1) forwards; }
.projectile.red:after { right: 8px; }
.projectile.blue:after { left: 8px; transform: rotate(180deg); }
@keyframes projectileRed { to { transform: translate(41vw,-10px); opacity: 0; } }
@keyframes projectileBlue { to { transform: translate(-41vw,-10px); opacity: 0; } }

.fx-text { position: absolute; z-index: 24; left: 50%; top: 39%; transform: translate(-50%, -50%); padding: 12px 16px; min-width: 145px; text-align: center; border-radius: 18px; font-size: 20px; font-weight: 1000; background: rgba(0,0,0,.62); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 16px 36px rgba(0,0,0,.38); animation: fxPop 1.15s ease forwards; }
.fx-text span { display: block; color: var(--gold); font-size: 15px; margin-top: 3px; }
.fx-text.red { box-shadow: 0 0 42px rgba(255,52,84,.28), 0 16px 36px rgba(0,0,0,.38); }
.fx-text.blue { box-shadow: 0 0 42px rgba(53,161,255,.3), 0 16px 36px rgba(0,0,0,.38); }
@keyframes fxPop { 0% { opacity: 0; transform: translate(-50%,-42%) scale(.7); } 16% { opacity: 1; transform: translate(-50%,-50%) scale(1.06); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-72%) scale(.96); } }

.meteor, .lightning, .dragon { position: absolute; z-index: 25; left: 50%; top: 36%; font-size: 78px; filter: drop-shadow(0 16px 14px rgba(0,0,0,.55)); }
.meteor { animation: meteorFall 1.1s ease-in forwards; }
.lightning { animation: lightningStrike .82s ease-out forwards; }
.dragon { font-size: 92px; animation: dragonStrike 1.45s ease-in-out forwards; }
.blast { position: absolute; z-index: 22; left: 50%; top: 52%; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(255,237,140,.95), rgba(255,85,40,.62) 38%, transparent 70%); transform: translate(-50%,-50%); animation: blast .7s ease-out forwards; }
.shockwave { position: absolute; z-index: 21; left: 50%; top: 52%; width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,224,113,.88); transform: translate(-50%,-50%); animation: shockwave .85s ease-out forwards; }
.damage-number { position: absolute; z-index: 28; top: 28%; padding: 5px 9px; border-radius: 999px; color: #fff; background: rgba(0,0,0,.58); border: 1px solid rgba(255,255,255,.2); font-size: 16px; font-weight: 1000; animation: damageFloat 1s ease forwards; }
.damage-number.target-red { left: 18%; color: #ffadbb; }
.damage-number.target-blue { right: 18%; color: #a7d8ff; }
@keyframes meteorFall { 0% { opacity: 0; transform: translate(-155px,-245px) rotate(-30deg) scale(.55); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(95px,115px) rotate(18deg) scale(1.25); } }
@keyframes lightningStrike { 0% { opacity: 0; transform: translate(-50%,-140%) scale(.8); filter: brightness(2); } 18%,55% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-15%) scale(1.18); } }
@keyframes dragonStrike { 0% { opacity: 0; transform: translate(-68vw,-10px) scale(.72); } 18% { opacity: 1; } 72% { opacity: 1; } 100% { opacity: 0; transform: translate(45vw,-35px) scale(1.05); } }
@keyframes blast { from { opacity: .95; transform: translate(-50%,-50%) scale(.22); } to { opacity: 0; transform: translate(-50%,-50%) scale(2.4); } }
@keyframes shockwave { from { opacity: .9; transform: translate(-50%,-50%) scale(.55); } to { opacity: 0; transform: translate(-50%,-50%) scale(8); } }
@keyframes damageFloat { 0% { opacity: 0; transform: translateY(12px) scale(.75); } 12% { opacity: 1; transform: translateY(0) scale(1.08); } 100% { opacity: 0; transform: translateY(-36px) scale(.96); } }

.toast-layer { z-index: 60; inset: 12px 10px auto; display: grid; place-items: center; gap: 7px; }
.event-toast { max-width: min(92vw, 520px); padding: 10px 14px; border-radius: 999px; background: rgba(3,8,18,.86); border: 1px solid rgba(255,255,255,.2); box-shadow: 0 16px 42px rgba(0,0,0,.42); font-size: 14px; line-height: 1.2; text-align: center; font-weight: 800; backdrop-filter: blur(10px); animation: toastPop 1.65s ease forwards; }
.event-toast strong { font-weight: 1000; color: #fff; }
.event-toast.red { border-color: rgba(255,65,90,.88); box-shadow: 0 0 34px rgba(255,52,84,.22), 0 16px 42px rgba(0,0,0,.42); }
.event-toast.blue { border-color: rgba(75,165,255,.9); box-shadow: 0 0 34px rgba(53,161,255,.24), 0 16px 42px rgba(0,0,0,.42); }
.event-toast.gift, .event-toast.ultimate, .event-toast.winner { border-color: rgba(255,224,113,.92); box-shadow: 0 0 42px rgba(255,224,113,.28), 0 16px 42px rgba(0,0,0,.42); }
@keyframes toastPop { 0% { opacity: 0; transform: translateY(-14px) scale(.92); } 13% { opacity: 1; transform: translateY(0) scale(1.02); } 78% { opacity: 1; } 100% { opacity: 0; transform: translateY(-12px) scale(.96); } }

.command-strip { z-index: 5; display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; padding: 7px; border-radius: 18px; }
.command-strip div { min-width: 0; display: grid; place-items: center; align-content: center; border-radius: 14px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.08); }
.command-strip strong { color: var(--gold); font-size: clamp(14px, 3.8vw, 18px); line-height: 1; }
.command-strip span { margin-top: 3px; color: rgba(255,255,255,.68); font-size: 10px; line-height: 1; white-space: nowrap; }

.info-row { z-index: 4; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-height: 0; }
.board, .event-board { min-width: 0; padding: 11px 12px; overflow: hidden; }
.board h3, .event-board h3 { margin: 0 0 7px; color: var(--gold); font-size: 12px; letter-spacing: 3px; line-height: 1; }
.rank-list, .event-list { display: grid; gap: 5px; font-size: 12px; line-height: 1.25; color: rgba(255,255,255,.9); }
.rank-row, .event-row { min-width: 0; display: flex; justify-content: space-between; gap: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rank-row span, .event-row span, .event-row { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rank-row strong { flex: 0 0 auto; color: var(--gold); }
.event-board { z-index: 4; }
.event-list { grid-template-columns: 1fr; }

.winner-banner { position: absolute; z-index: 80; left: 50%; top: 43%; width: min(86vw, 520px); transform: translate(-50%, -50%); padding: 22px 18px; text-align: center; border-radius: 26px; background: rgba(0,0,0,.78); border: 2px solid rgba(255,224,113,.72); font-size: clamp(24px, 7vw, 40px); line-height: 1.05; font-weight: 1000; color: #fff; box-shadow: 0 0 80px rgba(255,224,113,.32), 0 25px 70px rgba(0,0,0,.55); animation: winnerIn .45s ease both; }
@keyframes winnerIn { from { transform: translate(-50%, -50%) scale(.78); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

.stage.shake .arena-card { animation: screenShake .35s ease both; }
@keyframes screenShake { 0%,100% { transform: translate(0,0); } 18% { transform: translate(-5px,2px); } 35% { transform: translate(5px,-2px); } 52% { transform: translate(-3px,-1px); } 72% { transform: translate(3px,1px); } }

.stage.theme-volcano { background: radial-gradient(circle at 50% 18%, rgba(255,80,35,.22), transparent 34%), linear-gradient(180deg, #1a0605 0%, #260d08 48%, #040407 100%); }
.stage.theme-volcano .arena-card { background: linear-gradient(180deg, rgba(66,22,18,.78), rgba(18,10,14,.88) 58%, rgba(58,27,11,.94)); }
.stage.theme-ocean { background: radial-gradient(circle at 50% 18%, rgba(56,189,248,.2), transparent 34%), linear-gradient(180deg, #041622 0%, #08263b 48%, #020711 100%); }
.stage.theme-ocean .arena-card { background: linear-gradient(180deg, rgba(17,56,88,.78), rgba(8,22,42,.88) 58%, rgba(9,48,58,.94)); }
.stage.theme-forest { background: radial-gradient(circle at 50% 18%, rgba(74,222,128,.18), transparent 34%), linear-gradient(180deg, #061a12 0%, #102817 48%, #020711 100%); }
.stage.theme-forest .arena-card { background: linear-gradient(180deg, rgba(15,56,30,.78), rgba(8,22,22,.88) 58%, rgba(32,44,20,.94)); }
.stage.theme-neon { background: radial-gradient(circle at 50% 18%, rgba(217,70,239,.22), transparent 34%), linear-gradient(180deg, #100522 0%, #07152d 48%, #020711 100%); }
.stage.theme-neon .arena-card { background: linear-gradient(180deg, rgba(35,20,76,.78), rgba(11,15,40,.88) 58%, rgba(28,14,48,.94)); }

@media (max-height: 720px) {
  .stage { min-height: 560px; grid-template-rows: 76px 112px minmax(234px, 1fr) 46px 74px 64px; gap: 6px; padding-left: 8px; padding-right: 8px; }
  .brand-card { padding: 10px 14px; }
  .brand-card strong { font-size: 23px; }
  .timer-card strong { font-size: 38px; }
  .team-card { padding: 9px; border-radius: 19px; }
  .team-head strong { font-size: 20px; }
  .mini-avatars { display: none; }
  .castle { min-height: 142px; }
  .command-strip { padding: 5px; }
  .board, .event-board { padding: 9px 10px; }
}

@media (min-aspect-ratio: 4/3) {
  .stage { grid-template-rows: 82px 116px minmax(270px, 1fr) 52px 88px; grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}