/* ============================================================
   SHARED THEME — design tokens + base components
   Used by the landing page and every game at /<slug>/.
   ============================================================ */
:root {
  --bg:            #121212;
  --bg-raised:     #1a1a1a;
  --bg-row-alt:    #1e1e1e;
  --bg-row:        #161616;

  --surface-glass: rgba(255, 255, 255, 0.04);
  --surface-glass-strong: rgba(255, 255, 255, 0.07);
  --border-fine:   rgba(255, 255, 255, 0.10);
  --border-glow:   rgba(255, 255, 255, 0.16);

  --text:          #f2f2f2;
  --text-muted:    #8a8a8a;
  --text-faint:    #5a5a5a;

  --cyan:          #00e5ff;
  --lime:          #c6ff00;
  --red:           #ff3b54;

  --gold:          #ffd34d;
  --silver:        #d6d9de;
  --bronze:        #ff9a3d;

  --radius-sm:     4px;
  --radius:        8px;
  --shadow-soft:   0 8px 30px rgba(0, 0, 0, 0.45);
  --shadow-glow-cyan: 0 0 15px rgba(0, 229, 255, 0.30);

  --ease:          cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: 'Poppins', system-ui, sans-serif;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(0, 229, 255, 0.06), transparent 60%),
    var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
  /* Prevent iOS from selecting text / showing the callout when tapping & holding to play */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  /* Block double-tap & pinch zoom while still allowing scroll/pan */
  touch-action: pan-x pan-y;
}

/* Form fields must stay selectable/typable despite the page-wide user-select: none.
   font-size >= 16px also stops iOS from zooming in when the field is focused. */
input, textarea, [contenteditable] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
  font-size: 16px;
}

/* ---- Buttons ---- */
.btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Poppins', sans-serif; font-weight: 600;
  font-size: 0.85rem; letter-spacing: 0.4px;
  padding: 12px 18px; border-radius: var(--radius);
  border: 1px solid var(--border-fine);
  background: var(--surface-glass-strong); color: var(--text);
  cursor: pointer; text-decoration: none;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
              background 0.18s var(--ease), border-color 0.18s var(--ease);
}
.btn:hover { transform: translateY(-2px); border-color: var(--border-glow); background: rgba(255,255,255,0.10); }
.btn:active { transform: translateY(0); }
.btn--primary {
  background: linear-gradient(135deg, var(--cyan), #00b8cc);
  border-color: transparent; color: #04181c;
}
.btn--primary:hover { box-shadow: 0 6px 22px rgba(0,229,255,0.35); background: linear-gradient(135deg, #2bedff, #00c6dc); }
.btn--sm { flex: 0 0 auto; padding: 10px 18px; }

/* ---- Back link ---- */
.back-link {
  align-self: flex-start;
  font-size: 0.78rem; letter-spacing: 0.4px;
  color: var(--text-muted); text-decoration: none;
  padding: 6px 0; transition: color 0.18s var(--ease);
}
.back-link:hover { color: var(--cyan); }