/* ==========================================================================
   base.css — design tokens, reset, typography
   ========================================================================== */
:root {
  /* Palette */
  --bg: #060b14;
  --bg-2: #0a1322;
  --panel: rgba(14, 23, 38, 0.95);
  --panel-2: rgba(20, 32, 52, 0.9);
  --line: rgba(0, 163, 224, 0.22);
  --line-strong: rgba(0, 163, 224, 0.5);
  --orange: #f99e1a;
  --cyan: #00a3e0;
  --red: #ff4d4f;
  --green: #00e599;
  --text: #e6edf7;
  --text-dim: #9fb0c7;
  --text-mute: #6b7d96;

  /* Role accents */
  --role-tank: #3fa9f5;
  --role-damage: #ff6b5b;
  --role-support: #4fe0a6;

  /* Type */
  --font-head: 'Teko', 'Rajdhani', 'Arial Narrow', sans-serif;
  --font-body: 'Rajdhani', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Geometry & motion */
  --radius: 10px;
  --radius-sm: 6px;
  --gap: clamp(12px, 2vw, 22px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --glow-orange: 0 0 12px rgba(249, 158, 26, .55);
  --glow-cyan: 0 0 14px rgba(0, 163, 224, .45);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(0, 163, 224, .10), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(249, 158, 26, .07), transparent 60%),
    linear-gradient(rgba(0,163,224,.035) 1px, transparent 1px) 0 0 / 100% 32px,
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 500;
}
img { max-width: 100%; display: block; }
a { color: var(--cyan); }
a:hover { color: var(--orange); }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1;
  margin: 0;
  font-weight: 600;
}
ul { margin: 0; padding: 0; list-style: none; }
button, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
[hidden] { display: none !important; }

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--orange); color: #111; padding: 8px 14px; border-radius: var(--radius-sm);
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 8px; }