* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #05070a; color: #e8fbff; }
body { font-family: 'Chakra Petch', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; }

.stage {
  position: fixed; inset: 0; overflow: hidden;
  background: radial-gradient(ellipse at 50% 42%, #0c1626 0%, #060a12 55%, #04060a 100%);
}
.world {
  position: absolute; left: 50%; bottom: 0; width: 1280px; height: 720px;
  transform-origin: 50% 100%; transform: translateX(-50%) scale(var(--s, 1));
  pointer-events: none;
}
.horizon { position: absolute; left: -600px; bottom: 0; width: 2480px; height: 130px; display: block; }
#siege, #swarm { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; display: block; }

.live {
  position: absolute; left: 4vmin; top: 4vmin; display: flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: 3px; color: #6fb6c6;
}
.views { position: absolute; left: 4vmin; top: calc(4vmin + 30px); display: flex; gap: 6px; z-index: 3; }
.views button { font: inherit; font-size: 11px; letter-spacing: 1.5px; color: #7fc9da; background: rgba(4,18,26,.55); border: 1px solid rgba(63,224,255,.25); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.views button.on { color: #05070a; background: #3FE0FF; border-color: #3FE0FF; }
.views button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.world.siege .horizon { display: none; }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: #3DFFA8; box-shadow: 0 0 10px #3DFFA8; display: inline-block; }


.hud {
  position: absolute; right: 3vmin; top: 3vmin; width: 210px; padding: 14px 16px;
  border-radius: 14px; background: rgba(4, 18, 26, 0.55); border: 1px solid rgba(63, 224, 255, 0.18);
}
.spark { display: block; }
.hudrow { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.lbl { font-size: 12px; letter-spacing: 2px; color: #7fc9da; font-weight: 500; }
.mid { font-size: 22px; font-weight: 600; line-height: 1; }
.grow { flex: 1; }
.track { height: 6px; border-radius: 3px; background: rgba(63, 224, 255, 0.2); margin-top: 8px; }
.fill { height: 6px; border-radius: 3px; background: #B26BFF; width: 0; transition: width 1.2s ease; }
#ring { transition: stroke-dasharray 1.2s ease; }

@media (max-width: 640px) {
  .hud { right: 50%; transform: translateX(50%); top: auto; bottom: 2.5vmin; }
}
@media (prefers-reduced-motion: reduce) {
  .fill, #ring { transition: none; }
}
#siege[hidden], #swarm[hidden] { display: none; }

.chat { position: absolute; left: 4vmin; bottom: 3vmin; width: min(360px, 44vw); padding: 12px 14px; border-radius: 14px; background: rgba(4,18,26,.62); border: 1px solid rgba(63,224,255,.18); z-index: 3; }
.chat .lbl { margin: 0 0 8px; }
.chat ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.chat li { font-size: 14px; line-height: 1.35; color: #e8fbff; padding-left: 12px; border-left: 3px solid var(--h, #3FE0FF); animation: cin .6s ease both; }
.chat li small { display: block; color: #7fc9da; font-size: 11px; letter-spacing: 1px; }
@keyframes cin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .chat { left: 3vmin; right: 3vmin; width: auto; bottom: 12vh; } }
@media (prefers-reduced-motion: reduce) { .chat li { animation: none; } }