.topbar { display:flex; align-items:center; justify-content:space-between; padding:10px; background:#111; color:#eee; }
.topbar h1 { margin:0; font-size:1.2rem; }
.status { font-size:.9rem; }
.controls button { margin-left:.4rem; }

.container { display:grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px; }
.boss { grid-column: 1 / -1; background:#1a1a1a; color:#fff; padding:12px; border-radius:8px; }
.hpbar { width:100%; height:24px; background:#333; border-radius:12px; overflow:hidden; }
.hpfill { height:100%; background:linear-gradient(90deg, #e74c3c, #c0392b); transition: width .3s ease; }
.hptext { margin-top:6px; }

.teams { background:#121212; color:#eee; padding:12px; border-radius:8px; }
.teams-list { display:flex; gap:12px; flex-wrap:wrap; }
.team { background:#0f0f0f; border:1px solid #333; border-radius:6px; padding:8px; min-width: 140px; }
.team h3 { margin:.2rem 0; font-size:1rem; }
.team .stats { font-size:.85rem; color:#bbb; }

.feed { background:#121212; color:#eee; padding:12px; border-radius:8px; }
.feed-list { list-style:none; padding:0; margin:0; }
.feed-item { padding:4px 0; border-bottom: 1px solid #222; display:flex; align-items:center; gap:8px; }
.feed-item img { width:24px; height:24px; border-radius:4px; }

.help { background:#1a1a1a; color:#ddd; padding:12px; border-radius:8px; grid-column: 1 / -1; }
.help code { background:#222; color:#ffcc66; padding:2px 4px; border-radius:4px; }

.test { background:#141414; color:#eee; padding:12px; border-radius:8px; grid-column: 1 / -1; }
.test-controls button { margin-right:.4rem; margin-bottom:.4rem; }
.test-note { font-size:.85rem; color:#aaa; margin-top:.4rem; }

.arena { background:#101010; color:#eee; padding:12px; border-radius:8px; grid-column: 1 / -1; }
.stage { position:relative; height:240px; background:linear-gradient(#0e0e0e,#050505); border:1px solid #222; border-radius:8px; overflow:hidden; }
.fighter { position:absolute; bottom:12px; width:120px; height:160px; display:flex; flex-direction:column; align-items:center; gap:4px; }
.fighter.left { left:16px; }
.fighter.right { right:16px; }
.sprite { width:80px; height:100px; background:radial-gradient(circle at 30% 30%, #bbb, #777); border-radius:8px; box-shadow:0 0 10px rgba(255,255,255,.1) inset; }
.hpbar.small { width:120px; height:10px; }
.hptext.small { font-size:.8rem; }
.projectiles { position:absolute; left:0; top:0; right:0; bottom:0; pointer-events:none; }
.proj { position:absolute; width:48px; height:48px; border-radius:50%; transform-origin:center; will-change: transform, left, top; }
.proj.spin { animation: spin .6s linear infinite; }
.hit-shake { animation: shake .2s ease; }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}