:root {
  --bg: #05060a;
  --panel: #0d1018;
  --panel-light: #161b26;
  --border: #2a3142;
  --text: #f5f7ff;
  --text-dim: #9aa3b5;
  --red: #ff2d3d;
  --red-dark: #5a0b12;
  --blue: #2d8cff;
  --blue-dark: #0b2d5a;
  --accent: #ffd23f;
  --green: #3fdd78;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", "Arial", sans-serif;
  height: 100%;
  overflow: hidden;
}

h1, h2, h3 { margin: 0; }

.team-red { color: var(--red); }
.team-blue { color: var(--blue); }
.bg-red { background: linear-gradient(180deg, var(--red-dark), #2a0508); }
.bg-blue { background: linear-gradient(180deg, var(--blue-dark), #051226); }

.panel {
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: 14px;
}

.glow-text {
  text-shadow: 0 0 12px currentColor, 0 0 30px currentColor;
}

button {
  font-family: inherit;
  cursor: pointer;
}

.btn {
  background: var(--panel-light);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 1rem;
  transition: background .15s, transform .1s;
}
.btn:hover { background: #232a3a; }
.btn:active { transform: scale(0.96); }
.btn-accent { background: var(--accent); color: #1a1a1a; font-weight: 700; border: none; }
.btn-red { background: var(--red); color: #fff; border: none; }
.btn-blue { background: var(--blue); color: #fff; border: none; }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn-danger { background: #7a1a1a; color: #ffaaaa; border-color: #a33; }
.btn-danger:hover { background: #9a2020; }

input, select, textarea {
  font-family: inherit;
  background: #1a1f2b;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }