:root{
  --primary-green:#4ade80;--primary-green-dark:#22c55e;--primary-green-light:#86efac;
  --background-dark:#0f1419;--background-card:#1a2332;--background-secondary:#2d3748;
  --text-primary:#fff;--text-secondary:#a3a3a3;--text-muted:#6b7280;
  --border-color:#374151;--border-active:#4ade80;
  --color-success:#10b981;--color-error:#ef4444;--color-warning:#f59e0b;--color-live:#dc2626;
}
*{box-sizing:border-box}body{margin:0;background:var(--background-dark);color:var(--text-primary);font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
.app{max-width:1100px;margin:0 auto;padding:20px}
.header{display:flex;align-items:center;justify-content:center;padding:10px 0}
.battles-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.history-title{margin-top:32px;color:var(--text-secondary)}
.history-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.card{background:var(--background-card);border:1px solid var(--border-color);border-radius:12px;padding:16px}
.hidden{display:none}
.loading-screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f1419 0%,#1a2332 100%);z-index:100}
.logo{font-size:2rem;margin-bottom:12px}
.spinner{width:32px;height:32px;border:4px solid #ffffff22;border-top-color:var(--primary-green);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}