/* /styles.css
   Small extras Tailwind doesn't handle nicely (scrollbars, snap, focus).
*/

/* smooth scrolling */
html { scroll-behavior: smooth; }

/* nicer scrollbars */
::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 999px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }

/* optional: reduce tap highlight on mobile */
* { -webkit-tap-highlight-color: transparent; }

/* nicer keyboard focus */
:focus-visible {
  outline: 2px solid rgba(56, 189, 248, 0.65);
  outline-offset: 2px;
  border-radius: 14px;
}

/* helper class for horizontal rows */
.row-scroll { scroll-snap-type: x mandatory; }
.row-scroll > * { scroll-snap-align: start; }

/* ===== GameRaze Settings System ===== */
:root{
  --ui-radius: 24px;
  --bg: #070B14;
  --panel: rgba(255,255,255,.05);
  --border: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.95);
  --muted: rgba(255,255,255,.65);
  --glow-a: rgba(99,102,241,.20);
  --glow-b: rgba(56,189,248,.20);
  --glow-c: rgba(217,70,239,.10);
  --font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Apply to page */
html, body { font-family: var(--font-family) !important; }
body { background: var(--bg) !important; color: var(--text) !important; }

/* Make your existing rounded-2xl/3xl still look consistent */
.rounded-2xl { border-radius: calc(var(--ui-radius) - 8px) !important; }
.rounded-3xl { border-radius: var(--ui-radius) !important; }
.rounded-xl  { border-radius: calc(var(--ui-radius) - 12px) !important; }

/* Glow on/off */
html[data-glow="off"] .pointer-events-none.fixed.inset-0.-z-10 { display: none !important; }

/* ===== Themes (7) ===== */
html[data-theme="nebula"]{
  --bg:#070B14;
  --glow-a: rgba(99,102,241,.20);
  --glow-b: rgba(56,189,248,.20);
  --glow-c: rgba(217,70,239,.10);
}

html[data-theme="ocean"]{
  --bg:#06121d;
  --glow-a: rgba(14,165,233,.22);
  --glow-b: rgba(59,130,246,.18);
  --glow-c: rgba(34,211,238,.10);
}

html[data-theme="ember"]{
  --bg:#130b08;
  --glow-a: rgba(251,113,133,.18);
  --glow-b: rgba(249,115,22,.20);
  --glow-c: rgba(245,158,11,.10);
}

html[data-theme="emerald"]{
  --bg:#07110d;
  --glow-a: rgba(16,185,129,.18);
  --glow-b: rgba(34,197,94,.16);
  --glow-c: rgba(45,212,191,.10);
}

html[data-theme="rose"]{
  --bg:#120812;
  --glow-a: rgba(244,114,182,.18);
  --glow-b: rgba(168,85,247,.14);
  --glow-c: rgba(236,72,153,.10);
}

html[data-theme="mono"]{
  --bg:#0a0a0a;
  --glow-a: rgba(255,255,255,.06);
  --glow-b: rgba(255,255,255,.04);
  --glow-c: rgba(255,255,255,.03);
}

html[data-theme="sunset"]{
  --bg:#0f0b13;
  --glow-a: rgba(251,146,60,.18);
  --glow-b: rgba(99,102,241,.18);
  --glow-c: rgba(236,72,153,.10);
}

/* ===== Fonts ===== */
/* These need Google Fonts in index.html head (next step). */
html[data-font="system"]{ --font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
html[data-font="poppins"]{ --font-family: "Poppins", ui-sans-serif, system-ui, sans-serif; }
html[data-font="inter"]{ --font-family: "Inter", ui-sans-serif, system-ui, sans-serif; }
html[data-font="grotesk"]{ --font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; }
html[data-font="nunito"]{ --font-family: "Nunito", ui-sans-serif, system-ui, sans-serif; }
html[data-font="mono"]{ --font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }