/* Design tokens + reset */
:root {
  /* Brand / pitch palette */
  --bg-0: #06140d;
  --bg-1: #0a2016;
  --bg-2: #0e2b1d;
  --panel: rgba(255, 255, 255, 0.05);
  --panel-strong: rgba(255, 255, 255, 0.08);
  --panel-border: rgba(255, 255, 255, 0.10);
  --panel-border-strong: rgba(255, 255, 255, 0.18);

  --grass-0: #15623a;
  --grass-1: #0f4f2e;
  --line: rgba(255, 255, 255, 0.55);

  --text: #eef6f1;
  --text-muted: #9bb3a6;
  --text-dim: #6f8779;

  --accent: #22c55e;        /* primary green */
  --accent-2: #34d399;
  --accent-glow: rgba(34, 197, 94, 0.35);
  --cyan: #2dd4bf;
  --gold: #fbbf24;
  --danger: #ef4444;
  --warn: #f59e0b;

  /* Position colors */
  --pos-gk: #f59e0b;
  --pos-df: #3b82f6;
  --pos-mf: #22c55e;
  --pos-fw: #ef4444;

  /* Team themes */
  --team-red: #ef4444;
  --team-blue: #3b82f6;
  --team-green: #22c55e;
  --team-amber: #f59e0b;

  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.45);

  --font: 'Outfit', 'Noto Sans KR', system-ui, sans-serif;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(34, 197, 94, 0.12), transparent 60%),
    radial-gradient(900px 600px at -10% 10%, rgba(45, 212, 191, 0.08), transparent 55%),
    linear-gradient(160deg, var(--bg-1), var(--bg-0));
  background-attachment: fixed;
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select { font-family: inherit; }
h1, h2, h3, h4 { line-height: 1.2; font-weight: 700; }
img { display: block; max-width: 100%; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.hidden { display: none !important; }

:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 4px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }