/* Shared look for the whole site. Source of truth: /drives/shared/design/style-guide.md (Neon). */
@font-face { font-family: "Orbitron"; font-weight: 600; font-display: swap; src: url("../fonts/orbitron-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Orbitron"; font-weight: 700; font-display: swap; src: url("../fonts/orbitron-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }

:root {
  /* backgrounds */
  --bg-0: #07060f;
  --bg-1: #100e22;
  --bg-2: #1a1736;
  --line: #2f2a5c;
  /* text */
  --text: #f1eeff;
  --text-muted: #b3acd9;
  /* neon accents */
  --neon-pink: #ff2e93;
  --neon-cyan: #16e0ff;
  --neon-yellow: #ffe53d;
  --neon-green: #39ff88;
  --neon-purple: #a66bff;
  /* game roles */
  --p1: #ff2e93;
  --p2: #16e0ff;
  --danger: #ff5c5c;
  /* glow */
  --glow-sm: 0 0 6px currentColor;
  --glow-md: 0 0 12px var(--glow-c, var(--neon-cyan)), 0 0 28px color-mix(in srgb, var(--glow-c, var(--neon-cyan)) 45%, transparent);
  /* type */
  --font-display: "Orbitron", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  /* spacing (4px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-8: 48px;
  --radius: 12px; --radius-lg: 20px;
  --t-fast: 150ms; --t-med: 300ms;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg-0); color: var(--text); font-family: var(--font-body); line-height: 1.5; }
a { color: var(--neon-cyan); }
:focus-visible { outline: 3px solid var(--neon-yellow); outline-offset: 3px; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 var(--s-4); }
@media (min-width: 700px) { .wrap { padding: 0 var(--s-6); } }

header.site { padding: var(--s-5) 0; text-align: center; }
header.site img { height: 48px; max-width: 100%; }
header.site h1 { font-family: var(--font-display); margin: var(--s-3) 0 0; font-size: clamp(1.4rem, 5vw, 2rem); }
.tagline { color: var(--text-muted); margin: var(--s-2) 0 0; }

/* Buttons */
.btn { --accent: var(--neon-cyan); --glow-c: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  padding: 12px 24px; background: transparent; color: var(--accent); border: 2px solid var(--accent); border-radius: var(--radius);
  font: 600 1rem/1 var(--font-display); text-transform: uppercase; text-decoration: none; cursor: pointer;
  box-shadow: var(--glow-md); transition: background var(--t-fast) ease-out, color var(--t-fast) ease-out; }
.btn:hover, .btn:focus-visible { background: var(--accent); color: var(--bg-0); }
.btn:active { transform: scale(.97); }
.btn.secondary { --accent: var(--neon-purple); }
.btn.danger { --accent: var(--danger); }

/* Home page tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-5); padding: var(--s-4) 0 var(--s-8); }
.tile { --accent: var(--neon-cyan); --glow-c: var(--accent);
  display: block; background: var(--bg-1); border: 2px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  color: var(--text); text-decoration: none; transition: transform var(--t-med) ease-out, border-color var(--t-med) ease-out, box-shadow var(--t-med) ease-out; }
.tile img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tile .info { padding: var(--s-4); }
.tile h2 { font-family: var(--font-display); font-size: 1.1rem; margin: 0 0 var(--s-1); }
.tile p { margin: 0; color: var(--text-muted); font-size: .95rem; }
.tile:hover, .tile:focus-visible { border-color: var(--accent); box-shadow: var(--glow-md); transform: translateY(-4px); }