/* Deva GGR tema — Nexus mor/lacivert paletinin üzerine bizim marka:
   sıcak koyu zemin (#12100e ailesi) + altın vurgu (#e8b04b / #f5c96b).
   app.css'ten SONRA yüklenir, tüm renkler --nx-* değişkenleri üzerinden.
   SIRA ÖNEMLİ: ışık varsayılanlar önce, .dark override'ları en sonda —
   aynı özgüllükte son tanım kazanır. */

:root {
  /* violet skalasını amber'e yeniden eşle — hardcode violet kullanan
     bileşenler de otomatik altına döner */
  --nx-violet-50: oklch(97% .02 95);
  --nx-violet-100: oklch(94% .045 92);
  --nx-violet-200: oklch(88% .085 90);
  --nx-violet-300: oklch(80% .135 86);
  --nx-violet-400: oklch(75% .15 82);
  --nx-violet-500: oklch(68% .16 78);
  --nx-violet-600: oklch(58% .165 75);
  --nx-violet-700: oklch(49% .14 72);
  --nx-violet-800: oklch(40% .11 70);
  --nx-violet-900: oklch(32% .08 68);
  --nx-violet-950: oklch(23% .05 66);

  --nx-brand-navy: #0d0b09;
  --nx-brand-gradient: linear-gradient(135deg, #f5c96b 0%, #e8b04b 40%, #b8842e 100%);
  --nx-brand-ui-1: #f5c96b;
  --nx-brand-ui-2: #e8b04b;
  --nx-brand-ui-3: #b8842e;
  --nx-brand-gradient-ui: linear-gradient(135deg, var(--nx-brand-ui-1) 0%, var(--nx-brand-ui-2) 55%, var(--nx-brand-ui-3) 100%);

  /* ── ışık tema (varsayılan) — sıcak krem/altın ── */
  --nx-bg: #f6f1e6;
  --nx-surface: #fffdf7;
  --nx-surface-2: #f0e9d8;
  --nx-surface-3: #e5dcc4;
  --nx-border: #d9cdb4;
  --nx-border-strong: #bda87f;
  --nx-text: #2a2417;
  --nx-muted: #6d6046;
  --nx-subtle: #8a7f6a;
  --nx-placeholder: #a3957b;
  --nx-input-bg: #fffdf7;
  --nx-control-border: #bda87f;
  --nx-overlay: rgb(42 36 23 / .45);
  --nx-scrollbar: #c9b992;
  --nx-tooltip-bg: #2a2417;
  --nx-tooltip-fg: #f6f1e6;
  --nx-accent: var(--nx-violet-600);
  --nx-accent-hover: var(--nx-violet-500);
  --nx-accent-fg: #fffdf7;
  --nx-ring: var(--nx-accent);
  --nx-switch-on: var(--nx-violet-600);
  --nx-switch-on-hover: var(--nx-violet-500);
  --nx-switch-on-thumb: #fffdf7;
  --nx-switch-thumb: #fffdf7;
  --nx-row-selected: var(--nx-accent);
  --nx-row-hover: var(--nx-surface-2);
  --nx-row-stripe: var(--nx-surface-2);
  --nx-danger: oklch(54% .22 27);
  --nx-warning: oklch(53% .14 50);
  --nx-info: oklch(51% .104 232);
  --nx-success: oklch(51% .123 156);
  --nx-danger-fg: #fffdf7;
  --nx-warning-fg: #fffdf7;
  --nx-info-fg: #fffdf7;
  --nx-success-fg: #fffdf7;
  --nx-code-bg: #f0e9d8;
  --nx-code-fg: #2a2417;
  --nx-chart-1: var(--nx-accent);
  --nx-chart-2: #d95926;
  --nx-chart-3: #6d9054;
  --nx-chart-4: #b8842e;
  --nx-chart-5: #4a8a82;
  --nx-chart-6: #a86e96;
}

/* ── koyu tema — sıcak koyu zemin + altın ──
   :root'tan SONRA gelir; html.dark'te tümünü ezer */
.dark {
  color-scheme: dark;
  --nx-bg: #12100e;
  --nx-surface: #1a1713;
  --nx-surface-2: #211d17;
  --nx-surface-3: #2a251e;
  --nx-border: #332c22;
  --nx-border-strong: #463d2e;
  --nx-text: #ede5d3;
  --nx-muted: #b0a48e;
  --nx-subtle: #8a7f6a;
  --nx-placeholder: #7d7260;
  --nx-input-bg: #161310;
  --nx-control-border: #4d4433;
  --nx-overlay: rgb(9 7 5 / .72);
  --nx-scrollbar: #3a3226;
  --nx-tooltip-bg: #211d17;
  --nx-tooltip-fg: #ede5d3;

  --nx-accent: var(--nx-violet-400);
  --nx-accent-hover: var(--nx-violet-300);
  --nx-accent-fg: #1a1408;
  --nx-ring: var(--nx-accent);
  --nx-switch-on: var(--nx-violet-400);
  --nx-switch-on-hover: var(--nx-violet-300);
  --nx-switch-on-thumb: #1a1408;
  --nx-switch-thumb: oklch(94% .01 90);
  --nx-row-selected: var(--nx-accent);
  --nx-row-hover: var(--nx-surface-2);
  --nx-row-stripe: var(--nx-surface-2);

  /* semantik renkler sıcak palete göre */
  --nx-danger: oklch(72% .19 30);
  --nx-warning: oklch(82% .15 80);
  --nx-info: oklch(78% .12 215);
  --nx-success: oklch(78% .15 150);
  --nx-danger-fg: #1a1408;
  --nx-warning-fg: #1a1408;
  --nx-info-fg: #1a1408;
  --nx-success-fg: #1a1408;

  --nx-code-bg: #161310;
  --nx-code-fg: #d9cdb4;

  /* grafik serileri: altın + sıcak tamamlayıcılar */
  --nx-chart-1: var(--nx-accent);
  --nx-chart-2: #d95926;
  --nx-chart-3: #7fb069;
  --nx-chart-4: #b8842e;
  --nx-chart-5: #5aa9a0;
  --nx-chart-6: #c98bb0;
}

/* marka dokunuşları */
.sidebar, .app-sidebar { border-color: var(--nx-border); }
.nav-link:hover, .nav-link.active { color: var(--nx-violet-300); }
.dark .nav-link:hover, .dark .nav-link.active { color: var(--nx-violet-300); }
.btn-primary { text-shadow: 0 1px 0 rgb(0 0 0 / .25); }
.dark .btn-primary { color: #1a1408; text-shadow: none; }

/* === Oyun listesi — kompakt grid (6-8 kart/satır) === */
.games-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
@media(min-width:640px){.games-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1024px){.games-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(min-width:1440px){.games-grid{grid-template-columns:repeat(8,minmax(0,1fr))}}
.game-card{display:flex;flex-direction:column;gap:.375rem;padding:0;background:transparent;border:0;cursor:pointer;text-align:left}
.game-card .gc-cover{position:relative;overflow:hidden;border-radius:.5rem;border:1px solid var(--nx-border);background:var(--nx-surface-2);aspect-ratio:4/3;width:100%}
.game-card .gc-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s ease}
.game-card:hover .gc-cover img{transform:scale(1.05)}
.game-card .gc-cover{border-color:var(--nx-border)}
.game-card:hover .gc-cover{border-color:var(--nx-accent)}
.game-card .gc-name{font-size:.75rem;font-weight:500;color:var(--nx-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.game-card .gc-foot{display:flex;align-items:center;justify-content:space-between;gap:.25rem}
.game-card .gc-rtp{font-size:10px;font-family:var(--font-mono);color:var(--nx-muted)}