/* Shared site styles with two looks:
   - default: clean light/dark (follows the device setting)
   - html[data-theme="retro"]: 1980s screen with glowing pixel type and scanlines
   Pages use only these tokens, so both looks apply everywhere. */

:root {
  --bg:#f7f7f5; --surface:#fff; --fg:#1d1d1f; --muted:#6b6b70;
  --line:#d6d6d3; --line-soft:#d6d6d3; --line-strong:#1d1d1f; --hover:#eef1f8;
  --accent:#3a6df0; --on-accent:#fff; --bad:#d93a3a;
  --sel-bg:#b9cdfa; --peer-bg:#eef1f8; --same-bg:#d9e3fb;
  --glow:transparent; --radius:8px; --fs:.75;
  --font:system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="retro"]) {
    --bg:#151517; --surface:#1e1e22; --fg:#ececf0; --muted:#9a9aa2;
    --line:#34343b; --line-soft:#34343b; --line-strong:#a8a8b0; --hover:#24262e;
    --accent:#7c9dff; --on-accent:#10162b; --bad:#ff6b6b;
    --sel-bg:#3a4a78; --peer-bg:#24262e; --same-bg:#2c3550;
  }
}
:root[data-theme="retro"] {
  --bg:#0d160c; --surface:#0d160c; --fg:#ece8d2; --muted:#b8b19a;
  --line:#6d6857; --line-soft:color-mix(in srgb, #6d6857 70%, #0d160c); --line-strong:#b8b19a; --hover:#2e2c24;
  --accent:#ffd24a; --on-accent:#0d160c; --bad:#ff5c3c;
  --sel-bg:color-mix(in srgb, #ece8d2 24%, #0d160c); --peer-bg:color-mix(in srgb, #ece8d2 9%, #0d160c);
  --same-bg:color-mix(in srgb, #ece8d2 16%, #0d160c);
  --glow:rgba(236,232,210,.3); --radius:3px; --fs:1;
  --font:"VT323", ui-monospace, monospace;
}

/* Stop iOS double-tap zoom (rapid taps on game buttons kept zooming the page).
   Pinch-zoom still works. Pages can still set touch-action:none on a board. */
* { box-sizing:border-box; touch-action:manipulation; }
html { background:var(--bg); }
body {
  margin:0; min-height:100vh; color:var(--fg); background:var(--bg);
  font:calc(22px * var(--fs))/1.3 var(--font);
  -webkit-tap-highlight-color:transparent;
}
main { max-width:520px; margin:0 auto; padding:20px 16px 32px; }

.top { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.top h1 { flex:1; margin:0; font-size:calc(30px * var(--fs)); }
.top a { color:var(--muted); text-decoration:none; font-size:calc(20px * var(--fs)); white-space:nowrap; }
.top a:hover { color:var(--accent); }
.theme-toggle { font-size:calc(18px * var(--fs)) !important; padding:4px 8px !important; white-space:nowrap; text-transform:none !important; }
.soft { color:var(--muted); }
a { color:inherit; }

button, select {
  font:calc(20px * var(--fs))/1.1 var(--font); color:var(--fg); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); padding:7px 10px; cursor:pointer;
}
select option { background:var(--surface); color:var(--fg); }
button:hover:not(:disabled), select:hover { background:var(--hover); }
button:active:not(:disabled), button.on { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
button:disabled { opacity:.4; cursor:default; }
button:focus-visible, select:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* Game boards sit above the retro scanlines so they stay crisp. */
.crisp { position:relative; z-index:11; text-shadow:none; }

@media (max-width:700px) {
  main { padding:14px 12px 24px; }
  button, select { padding:7px 6px; }
}

/* ---------- 1980s look ---------- */
[data-theme="retro"] body {
  background:radial-gradient(ellipse at 50% 40%, #142113 0%, var(--bg) 70%) fixed;
  line-height:1.15; text-transform:uppercase; text-shadow:0 0 4px var(--glow);
}
[data-theme="retro"] body::after { /* scanlines */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:10;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
}
[data-theme="retro"] .top { align-items:baseline; padding-bottom:8px; border-bottom:1px dashed var(--line); letter-spacing:1px; }
[data-theme="retro"] .top h1 { font-weight:normal; }
[data-theme="retro"] b, [data-theme="retro"] strong { font-weight:normal; color:var(--accent); }
[data-theme="retro"] button, [data-theme="retro"] select {
  text-transform:uppercase; letter-spacing:1px; background:transparent; text-shadow:0 0 4px var(--glow);
}
[data-theme="retro"] button:active:not(:disabled), [data-theme="retro"] button.on {
  background:var(--fg); color:var(--bg); border-color:var(--fg); text-shadow:none;
}
[data-theme="retro"] button:focus-visible, [data-theme="retro"] select:focus-visible { outline:1px dashed var(--accent); }
[data-theme="retro"] .cursor::after { content:"█"; margin-left:2px; }
@media (prefers-reduced-motion: no-preference) {
  [data-theme="retro"] .cursor::after { animation:blink 1s steps(1) infinite; }
}
@keyframes blink { 50% { opacity:0; } }