/* =========================================================
   KINE FEL VAI — MAIN CSS
   Dark gaming aesthetic, KachiShop-inspired layout
   ========================================================= */

/* ── Variables ─────────────────────────────────────────── */
:root {
  --bg:            #f0faf4; /* Soft green-white background */
  --bg-card:       #ffffff; /* Pure white card background */
  --bg-section:    #e8f5ed; /* Mint tint for block sections */
  --bg-input:      #f0faf4; /* Soft green-white input background */
  --bg-hover:      #d1fae5; /* Emerald 100 hover */
  --border:        rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.15);
  --text:          #0f172a; /* Slate 900 - dark slate for readable text */
  --text-muted:    #475569; /* Slate 600 - muted text */
  --text-dim:      #64748b; /* Slate 500 - dimmed text */
  --orange:        #16a34a; /* Green 600 — primary accent */
  --orange-dark:   #15803d; /* Green 700 — primary accent dark */
  --orange-glow:   rgba(22, 163, 74, 0.15);
  --blue:          #059669; /* Emerald 600 — secondary accent */
  --blue-glow:     rgba(5, 150, 105, 0.12);
  --cyan:          #10b981; /* Emerald 500 — highlight accent */
  --green:         #22c55e;
  --green-glow:    rgba(34, 197, 94, 0.15);
  --red:           #ef4444;
  --red-glow:      rgba(239, 68, 68, 0.1);
  --yellow:        #f59e0b;
  --radius:        12px;
  --radius-sm:     8px;
  --radius-xs:     6px;
  --shadow:        0 4px 20px rgba(15, 23, 42, 0.05);
  --shadow-lg:     0 8px 32px rgba(15, 23, 42, 0.08);
  --transition:    0.18s ease;
  --font-heading:  'Rajdhani', sans-serif;
  --font-body:     'Inter', sans-serif;

  /* Header adjustments */
  --bg-header:     rgba(255, 255, 255, 0.97);
  --border-header: rgba(22, 163, 74, 0.15);
  --shadow-header: 0 4px 20px rgba(15, 23, 42, 0.04), inset 0 -1px 0 rgba(0, 0, 0, 0.03);

  /* Specific elements */
  --bg-hero-sm:    linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  /* Keep overlays dark for readable white text on hero images */
  --game-hero-overlay: linear-gradient(to bottom, rgba(5, 18, 10, 0.55) 0%, rgba(5, 18, 10, 0.92) 100%);
  --game-hero-overlay-mobile: linear-gradient(to bottom, rgba(5, 18, 10, 0.3) 0%, rgba(5, 18, 10, 0.75) 100%);
}

/* Dark Theme Variables (Green forest aesthetic) */
html.dark {
  --bg:            #020c05; /* Near-black with faint green tint */
  --bg-card:       #060f09; /* Very dark card surface */
  --bg-section:    #091409; /* Deeper section block */
  --bg-input:      #0b180d; /* Darker input fields */
  --bg-hover:      #0f2012; /* Subtle hover, still distinct */
  --border:        rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text:          #ecfdf5; /* Emerald 50 — crisp white-green text */
  --text-muted:    rgba(236, 253, 245, 0.55);
  --text-dim:      rgba(236, 253, 245, 0.35);

  --orange-glow:   rgba(22, 163, 74, 0.35);
  --blue-glow:     rgba(5, 150, 105, 0.28);
  --green-glow:    rgba(34, 197, 94, 0.28);
  --red-glow:      rgba(239, 68, 68, 0.2);

  --shadow:        0 4px 24px rgba(0, 0, 0, 0.55);
  --shadow-lg:     0 8px 40px rgba(0, 0, 0, 0.7);

  /* Header adjustments */
  --bg-header:     rgba(2, 8, 3, 0.97);
  --border-header: rgba(22, 163, 74, 0.2);
  --shadow-header: 0 4px 30px rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.04);

  /* Specific elements */
  --bg-hero-sm:    linear-gradient(135deg, #091409 0%, #020c05 100%);
  --game-hero-overlay: linear-gradient(to bottom, rgba(2, 8, 3, 0.55) 0%, rgba(2, 8, 3, 0.92) 100%);
  --game-hero-overlay-mobile: linear-gradient(to bottom, rgba(2, 8, 3, 0.3) 0%, rgba(2, 8, 3, 0.75) 100%);
}

/* ── Page Preloader ───────────────────────────────────── */
#page-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
#page-preloader.preloader-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.preloader-k {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 80px;
  line-height: 1;
  color: var(--text);
  letter-spacing: -2px;
  text-shadow:
    0 0 40px rgba(34, 197, 94, 0.5),
    0 0 80px rgba(16, 185, 129, 0.3);
}
/* [FIX] kfPulse gated to desktop — animating two large text-shadow blurs during
   initial paint on mobile contributes to GPU texture corruption that can persist
   in residual layers even after the preloader is removed. */
@media (min-width: 901px) {
  .preloader-k { animation: kfPulse 2s ease-in-out infinite; }
}
@keyframes kfPulse {
  0%, 100% { opacity: 1;   text-shadow: 0 0 40px rgba(34,197,94,0.5),  0 0 80px rgba(16,185,129,0.3); }
  50%       { opacity: 0.7; text-shadow: 0 0 60px rgba(34,197,94,0.75), 0 0 120px rgba(16,185,129,0.5); }
}
.preloader-trace-svg {
  display: block;
}

/* ── Lucide Icon Defaults ─────────────────────────────── */
[data-lucide] {
  display: inline-block;
  vertical-align: middle;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* ── Icon size scale (use these instead of inline width/height) ── */
.ic-xs { width: 12px; height: 12px; }
.ic-sm { width: 14px; height: 14px; }
.ic-md { width: 16px; height: 16px; }
.ic-lg { width: 20px; height: 20px; }
.ic-xl { width: 24px; height: 24px; }
.ic-2xl { width: 32px; height: 32px; }
.ic-3xl { width: 48px; height: 48px; }

/* ── Spinning icon (e.g. processing loader) ──────────────── */
.ic-spin { animation: kfSpin 1.1s linear infinite; transform-origin: 50% 50%; }
@keyframes kfSpin { to { transform: rotate(360deg); } }
/* Global `spin` keyframe used by the picker modal loader (and elsewhere) — defined
   here so pages that load main.css but not topup.css can still animate it. */
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .ic-spin { animation-duration: 2.4s; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .ic-spin { animation: kfSpin 2.4s linear infinite !important; }
}
.logo-gem-icon {
  width: 22px;
  height: 22px;
  color: var(--orange);
  flex-shrink: 0;
}
.vi-icon {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  display: block;
  margin: 0 auto 4px;
}
.section-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* ── Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--bg-section); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ── Typography ────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; }
.font-mono { font-family: 'Courier New', Courier, monospace; }

/* ── Container ─────────────────────────────────────────── */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (max-width: 768px) { .container { padding: 0 14px; } }

/* ══════════════════════════════════════════════════════════
   HEADER / NAVBAR
   ══════════════════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-header);
  /* backdrop-filter removed — live blur on a sticky element over a scrolling
     page causes GPU compositing corruption (garbled pixel bands + ghosted/
     duplicated content) on mobile. Header bg is near-opaque to compensate. */
  border-bottom: 1px solid var(--border-header);
  height: 68px;
  display: flex;
  align-items: center;
  box-shadow: var(--shadow-header);
}
.site-header .container {
  width: 100%;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.site-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
}
.logo-image, .logo-img-dark {
  height: 52px;
  width: auto;
  object-fit: contain;
  transition: transform var(--transition);
}
/* Theme swap via `display` (NOT a CSS `filter:`). A live filter on the logo lives
   inside the sticky .site-header and creates a nested compositor layer that
   repaints every scroll frame — a documented cause of the mobile GPU banding.
   Light mode (default) shows the pre-inverted dark asset; dark mode the white one. */
.logo-image    { display: none; }
.logo-img-dark { display: block; }
html.dark .logo-image    { display: block; }
html.dark .logo-img-dark { display: none; }
.logo-image:hover, .logo-img-dark:hover {
  transform: scale(1.02);
}
/* Drop-shadow is desktop-only — mobile keeps the logo completely filter-free. */
@media (min-width: 901px) {
  .logo-img-dark { filter: drop-shadow(0 2px 8px rgba(5, 150, 105, 0.15)); }
  .logo-image    { filter: drop-shadow(0 0 8px rgba(5, 150, 105, 0.2)); }
}
.footer-logo {
  filter: invert(1);
  transition: filter var(--transition);
}
html.dark .footer-logo {
  filter: none;
}
.logo-divider {
  color: var(--border-strong);
  font-size: 16px;
  font-weight: 300;
  margin: 0 2px;
}
.logo-tagline {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  font-style: italic;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}
@media (max-width: 640px) {
  .logo-tagline, .logo-divider {
    display: none !important;
  }
}

.header-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.header-nav-link {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 6px 14px;
  border-radius: var(--radius-xs);
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
}
.header-nav-link:hover { color: var(--text); background: var(--bg-hover); }
.header-nav-link.active { color: var(--orange); }
@media (max-width: 480px) { .header-nav { display: none; } }

.header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.header-flag {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: default;
}
.flag-icon {
  width: 20px;
  height: auto;
  border-radius: 2px;
  display: block;
  /* [FIX] box-shadow removed — .flag-icon lives inside .site-header (position:
     sticky), so the shadow repainted on every scroll frame. At 20px wide a 1px
     shadow was invisible anyway. */
}
.flag-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
.header-divider {
  color: var(--border-strong);
  font-size: 16px;
  font-weight: 300;
  margin: 0 2px;
}
.btn-login {
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  padding: 6px 24px;
  border-radius: 999px; /* Pill shape */
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 15px var(--orange-glow);
  transition: opacity 0.2s ease, box-shadow 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (hover: hover) and (pointer: fine) {
  .btn-login:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(22, 163, 74, 0.5);
    filter: brightness(1.1);
  }
}

/* Theme Toggle Button */
.theme-toggle-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-section);
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  flex-shrink: 0;
}
.theme-toggle-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
  border-color: var(--blue);
}
.theme-icon-light { display: block; }
.theme-icon-dark  { display: none; }
html.dark .theme-icon-light { display: none; }
html.dark .theme-icon-dark  { display: block; }

/* Skeleton shimmer */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.skeleton-shimmer {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-section) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--radius);
}

/* User avatar dropdown */
.user-avatar-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--transition);
  position: relative;
}
.user-avatar-btn:hover { border-color: var(--blue); }
.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  width: 180px;
  padding: 6px;
  display: none;
  box-shadow: var(--shadow-lg);
}
.user-dropdown.open { display: block; }
.user-dropdown a, .user-dropdown button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text);
  transition: background var(--transition);
  text-align: left;
}
.user-dropdown a:hover, .user-dropdown button:hover { background: var(--bg-section); }
.user-dropdown .divider { height: 1px; background: var(--border); margin: 4px 0; }

/* ══════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════ */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 28px 0 20px;
  margin-top: 60px;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
.footer-brand .site-logo { font-size: 18px; margin-bottom: 6px; }
.footer-brand p { font-size: 12px; color: var(--text-dim); }

.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a { font-size: 13px; color: var(--text-muted); transition: color var(--transition); }
.footer-links a:hover { color: var(--text); }

.footer-payments { display: flex; align-items: center; gap: 10px; }
.footer-payments img { height: 28px; width: auto; border-radius: 4px; opacity: 0.8; }

.footer-bottom {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: center;
  font-size: 12px;
  color: var(--text-dim);
}

/* ══════════════════════════════════════════════════════════
   FLASH MESSAGES
   ══════════════════════════════════════════════════════════ */
.flash-wrap {
  position: fixed;
  top: 68px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.flash {
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  pointer-events: all;
  animation: slideDown 0.3s ease;
}
.flash-success { background: rgba(34, 197, 94, 0.15); border: 1px solid var(--green); color: var(--green); }
.flash-error   { background: rgba(239, 68, 68, 0.15);  border: 1px solid var(--red);   color: var(--red); }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
/* [FIX] Flash messages sit in a fixed overlay — disable the transform-based slide
   animation on mobile to avoid promoting transient GPU layers mid-scroll. */
@media (max-width: 900px) {
  .flash { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════
   HOMEPAGE — HERO BANNER
   ══════════════════════════════════════════════════════════ */
.hero-section {
  padding: 24px 0 16px;
}
.hero-banners {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 14px;
}
@media (max-width: 640px) { .hero-banners { grid-template-columns: 1fr; } }

.hero-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  height: 220px;
  background: var(--bg-card);
  cursor: pointer;
  transition: transform var(--transition);
}
@media (hover: hover) and (pointer: fine) {
  .hero-card:hover { transform: scale(1.01); }
}
.hero-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(13,18,36,0.85) 0%, rgba(13,18,36,0.4) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 24px;
}
.hero-card-overlay h2 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.2;
  color: #ffffff;
}
.hero-card-overlay p { 
  font-size: 13px; 
  color: rgba(255, 255, 255, 0.7); 
  margin-bottom: 12px; 
}
.btn-hero {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--orange);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  padding: 8px 18px;
  border-radius: 999px;
  transition: background var(--transition), box-shadow var(--transition);
  width: fit-content;
}
.btn-hero:hover {
  background: var(--orange-dark);
  box-shadow: 0 0 18px var(--orange-glow);
}

.hero-card-sm {
  background: var(--bg-hero-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* Dot navigation */
.hero-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
.hero-dot {
  width: 24px;
  height: 4px;
  border-radius: 2px;
  background: var(--border-strong);
  transition: background var(--transition);
}
.hero-dot.active { background: var(--orange); }

/* Admin-managed hero carousel: slides stacked, cross-fade */
.hero-carousel {
  display: block;
  position: relative;
  height: 220px;
}
.hero-carousel .hero-card {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.hero-carousel .hero-card.is-active {
  opacity: 1;
  pointer-events: auto;
}
@media (max-width: 640px) { .hero-carousel { height: 180px; } }

/* Hero dots as buttons (reset native chrome) */
button.hero-dot { border: none; padding: 0; cursor: pointer; }

/* ── Homepage promotional popup ───────────────────────────── */
.home-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.home-popup-overlay.open { opacity: 1; pointer-events: auto; }
.home-popup-box {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transform: translateY(12px) scale(0.98);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.home-popup-overlay.open .home-popup-box { transform: translateY(0) scale(1); }
.home-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-popup-close:hover { background: rgba(0, 0, 0, 0.7); }
.home-popup-img img { width: 100%; display: block; max-height: 240px; object-fit: cover; }
.home-popup-body { padding: 20px 22px 24px; text-align: center; }
.home-popup-title { font-family: var(--font-heading); font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.home-popup-text { font-size: 13.5px; color: var(--text-muted); margin-bottom: 16px; line-height: 1.5; }
.home-popup-cta { margin: 0 auto; }

/* ══════════════════════════════════════════════════════════
   HOMEPAGE — GAMES GRID
   ══════════════════════════════════════════════════════════ */
.section-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 32px;
  padding-top: 52px;
  color: var(--text);
}

main > section {
  padding-bottom: 14px;
}
.section-heading::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 20px;
  background: var(--orange);
  border-radius: 2px;
}

.section-sub {
  margin: -8px 0 28px;
  font-size: 13px;
  color: var(--text-muted);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  padding-top: 52px;
}
.section-header .section-heading {
  margin-bottom: 0;
  padding-top: 0;
}
.view-all-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--orange);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.view-all-link:hover { opacity: 0.75; }
.view-all-link svg { flex-shrink: 0; }

.games-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1200px) { .games-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .games-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (max-width: 480px)  { .games-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

.game-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3/4;
  background: var(--bg-card);
  cursor: pointer;
}
/* Hover scale only on desktop — transition:transform on mobile pre-promotes
   each card to a GPU compositor layer; those layers can be mis-ordered above
   position:fixed overlays (picker modal z-index:900) on Android Chrome. */
@media (hover: hover) and (min-width: 901px) {
  .game-card {
    transition: transform var(--transition), box-shadow var(--transition);
  }
  .game-card:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
  }
}
.game-card img.game-artwork {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.game-card-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
  padding: 20px 10px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.game-card-info .game-icon-sm {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}
.game-card-info span {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.game-card-info span small {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Square cards (Top Up / Gifts — 6 per row) ── */
.sq-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
@media (max-width: 1024px) { .sq-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px)  { .sq-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } }
@media (max-width: 460px)  { .sq-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

.sq-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.sq-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
  /* [FIX] GPU layer promotion moved to desktop-only — giving every card its own
     compositor backing store exhausts mobile GPU texture memory, causing
     garbled pixel bands on Android Chrome. */
}
@media (min-width: 901px) {
  .sq-thumb {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
  }
}
@media (hover: hover) and (pointer: fine) {
  .sq-card:hover .sq-thumb {
    transform: translateY(-3px);
    border-color: var(--orange);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  }
}
.sq-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sq-gift-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 12px;
}
.sq-badge {
  position: absolute;
  top: 8px;
  right: 0;
  max-width: calc(100% - 10px);
  padding: 4px 10px 4px 12px;
  border-radius: 999px 0 0 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
  background: rgba(0,0,0,0.78);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sq-badge .sq-flag {
  width: 15px;
  height: 11px;
  border-radius: 2px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
}
.sq-badge .sq-flag-icon {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  flex-shrink: 0;
}
/* Solid fills for non-gift badge types */
.sq-badge-uid  { background: var(--orange); color: #fff; }
.sq-badge-gc   { background: linear-gradient(135deg, #166534 0%, #14532d 100%); color: #fff; }
.sq-badge-sub  { background: hsl(263 70% 50%); color: #fff; }
.sq-badge-gift   { background: linear-gradient(135deg, #166534 0%, #14532d 100%); color: #fff; border: none; }
.sq-badge-ingame { background: #f97316; color: #fff; border: none; }

.sq-body {
  padding: 8px 2px 0;
}
.sq-body strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sq-body small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sq-card--oos { opacity: 0.55; pointer-events: none; }
.sq-oos-ribbon {
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.72);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: 0.03em;
}

/* ══════════════════════════════════════════════════════════
   FEATURE CARDS (why Kine-Fel)
   ══════════════════════════════════════════════════════════ */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 28px 0 8px;
}
@media (max-width: 768px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .feature-grid { grid-template-columns: 1fr; } }

.feature-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: transform var(--transition), border-color var(--transition);
}
@media (hover: hover) and (pointer: fine) {
  .feature-card:hover {
    transform: translateY(-2px);
    border-color: var(--orange);
  }
}
.feature-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: var(--orange);
  background: rgba(255,255,255,0.05);
}
.feature-badge .vi-icon {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  display: block;
}
.feature-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.feature-text strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.feature-text small {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════
   AUTH PAGES
   ══════════════════════════════════════════════════════════ */
.auth-page {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
}
.auth-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.15;
  pointer-events: none;
}
.auth-glow-1 { width: 400px; height: 400px; background: var(--blue); top: -100px; right: -100px; }
.auth-glow-2 { width: 300px; height: 300px; background: var(--orange); bottom: -80px; left: -80px; }

.auth-card {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 36px 32px;
  width: 100%;
  max-width: 400px;
  position: relative;
  z-index: 1;
}
.auth-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}
.auth-logo img {
  filter: invert(1);
}
html.dark .auth-logo img {
  filter: none;
}
.auth-card h1 {
  text-align: center;
  font-size: 24px;
  margin-bottom: 6px;
}
.auth-card .subtitle {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 24px;
}

/* ══════════════════════════════════════════════════════════
   FORM ELEMENTS
   ══════════════════════════════════════════════════════════ */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.form-input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  padding: 10px 14px;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-input::placeholder { color: var(--text-dim); }
.form-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15);
}

.btn-primary {
  width: 100%;
  background: var(--orange);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.5px;
  padding: 12px;
  border-radius: var(--radius-sm);
  transition: background var(--transition), box-shadow var(--transition);
}
.btn-primary:hover {
  background: var(--orange-dark);
  box-shadow: 0 0 20px var(--orange-glow);
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.auth-switch {
  text-align: center;
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-muted);
}
.auth-switch a { color: var(--orange); font-weight: 500; }

/* ══════════════════════════════════════════════════════════
   ORDER STATUS PAGE
   ══════════════════════════════════════════════════════════ */
.order-status-page {
  max-width: 600px;
  margin: 40px auto;
  padding: 0 20px;
}
.status-banner {
  text-align: center;
  padding: 32px;
  border-radius: var(--radius);
  margin-bottom: 24px;
}
.status-banner .status-emoji { font-size: 48px; margin-bottom: 12px; }
.status-banner h1 { font-size: 28px; margin-bottom: 6px; }
.status-banner p { color: var(--text-muted); font-size: 14px; }

.status-pending    { background: rgba(245, 158, 11, 0.1);  border: 1px solid rgba(245,158,11,0.3); }
.status-paid_processing { background: rgba(5, 150, 105, 0.1); border: 1px solid rgba(5,150,105,0.3); }
.status-completed  { background: rgba(34, 197, 94, 0.1);  border: 1px solid rgba(34,197,94,0.3); }
.status-failed     { background: rgba(239, 68, 68, 0.1);  border: 1px solid rgba(239,68,68,0.3); }
.status-refunded   { background: rgba(156, 163, 175, 0.1); border: 1px solid rgba(156,163,175,0.3); }

.order-number-display {
  font-family: 'Courier New', monospace;
  font-size: 36px;
  font-weight: 700;
  color: var(--orange);
  text-shadow: 0 0 20px var(--orange-glow);
  text-align: center;
  margin: 16px 0;
}

.order-details-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.order-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
}
.order-detail-row:last-child { border-bottom: none; }
.order-detail-row .label { font-size: 13px; color: var(--text-muted); }
.order-detail-row .value { font-size: 13px; font-weight: 500; }

.guest-reminder {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 13px;
  color: var(--yellow);
  margin-top: 16px;
}

/* Order Track */
.track-page {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.track-card {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 32px;
  width: 100%;
  max-width: 440px;
  text-align: center;
}
.track-card h1 { font-size: 24px; margin-bottom: 8px; }
.track-card p { color: var(--text-muted); font-size: 13px; margin-bottom: 24px; }

/* ══════════════════════════════════════════════════════════
   404 / ERROR
   ══════════════════════════════════════════════════════════ */
.error-page {
  min-height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
}
.error-page .error-code {
  font-family: var(--font-heading);
  font-size: 96px;
  font-weight: 700;
  color: var(--orange);
  opacity: 0.4;
  line-height: 1;
}
.error-page h1 { font-size: 28px; margin: 12px 0 8px; }
.error-page p { color: var(--text-muted); margin-bottom: 24px; }
.btn-back {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 10px 22px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  transition: background var(--transition);
}
.btn-back:hover { background: var(--bg-section); }

/* ══════════════════════════════════════════════════════════
   SKELETON SHIMMER
   ══════════════════════════════════════════════════════════ */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-section) 50%, var(--bg-card) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

/* ══════════════════════════════════════════════════════════
   UTILITY
   ══════════════════════════════════════════════════════════ */
.text-orange { color: var(--orange); }
.text-blue   { color: var(--blue); }
.text-green  { color: var(--green); }
.text-red    { color: var(--red); }
.text-muted  { color: var(--text-muted); }
.text-center { text-align: center; }
.fw-600      { font-weight: 600; }
.fw-700      { font-weight: 700; }
.mt-4        { margin-top: 4px; }
.mt-8        { margin-top: 8px; }
.mt-12       { margin-top: 12px; }
.mt-16       { margin-top: 16px; }
.mt-24       { margin-top: 24px; }
.mb-8        { margin-bottom: 8px; }
.mb-16       { margin-bottom: 16px; }
.gap-8       { gap: 8px; }
.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.hidden      { display: none !important; }

/* ══════════════════════════════════════════════════════════
   REGIONS PAGE  (/games/:slug when multiple entries)
   ══════════════════════════════════════════════════════════ */
.rp-hero {
  position: relative;
  height: 220px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.rp-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.2), rgba(0,0,0,.75));
}
.rp-hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding-bottom: 32px;
}
.rp-hero-title {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
  margin: 0;
}
.rp-hero-sub { color: rgba(255,255,255,.7); font-size: 13px; margin: 4px 0 0; }

.rp-icon-bar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  margin-bottom: 24px;
}
.rp-icon-bar-inner { display: flex; align-items: center; gap: 14px; }
.rp-icon-bar-img {
  width: 52px; height: 52px;
  border-radius: 12px;
  object-fit: cover;
  border: 2px solid var(--border);
}
.rp-icon-bar-name { font-family: var(--font-heading); font-size: 18px; font-weight: 700; }
.rp-icon-bar-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.entry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}
.entry-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  aspect-ratio: 3/4;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  cursor: pointer;
  background: var(--bg-card);
}
@media (hover: hover) and (pointer: fine) {
  .entry-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,.5);
    border-color: var(--orange);
  }
  .entry-card:hover .entry-card-art-bg { transform: scale(1.05); }
}
.entry-card--out { opacity: 0.6; pointer-events: none; filter: grayscale(0.4); }
.entry-card-art-bg {
  position: absolute;
  inset: 0;
  background-image: var(--card-art);
  background-size: cover;
  background-position: center top;
  transition: transform 0.4s ease;
}
.entry-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.05) 25%, rgba(0,0,0,.82) 100%);
}
.entry-card-icon-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1;
  justify-content: center;
  padding-top: 16px;
}
.entry-card-game-icon {
  width: 60px; height: 60px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 4px 16px rgba(0,0,0,.6);
  border: 2px solid rgba(255,255,255,.15);
}
.entry-card-badge {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,.72); /* opaque fill — backdrop blur removed (mobile compositing glitch) */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.entry-card-badge svg { width: 16px; height: 16px; color: rgba(255,255,255,.8); }
.entry-card-info {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 10px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.entry-card-name {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.entry-card-type {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 6px; border-radius: 4px;
  width: fit-content;
}
.entry-card-type--region  { background: var(--orange-glow); color: var(--orange); }
.entry-card-type--in_game { background: var(--green-glow);  color: var(--green); }
.entry-card-type--gift    { background: var(--blue-glow);   color: var(--blue); }
.entry-card-stock-ribbon {
  position: absolute; top: 12px; left: 0; z-index: 3;
  background: var(--red); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .06em;
  padding: 3px 10px 3px 8px;
  border-radius: 0 4px 4px 0;
  text-transform: uppercase;
}

@media (max-width: 480px) {
  .entry-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .rp-hero { height: 160px; }
  .rp-hero-title { font-size: 22px; }
  .entry-card-game-icon { width: 44px; height: 44px; }
}

/* ══════════════════════════════════════════════════════════
   PICKER CARDS  (used in regions page + global picker modal)
   ══════════════════════════════════════════════════════════ */
.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
}
.picker-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius, 12px);
  overflow: hidden;
  background-size: cover;
  background-position: center top;
  background-color: var(--bg-card);
  text-decoration: none;
  border: 1px solid var(--border);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .picker-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,.45);
    border-color: var(--orange, hsl(30 90% 55%));
  }
}
.picker-card-out {
  opacity: 0.6;
  pointer-events: none;
  cursor: default;
  filter: grayscale(0.4);
}
.picker-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.78) 100%);
  pointer-events: none;
}
.picker-card-name {
  position: relative;
  z-index: 2;
  font-family: var(--font-heading, sans-serif);
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  padding: 10px 10px 12px;
  line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
  word-break: break-word;
}

/* ══════════════════════════════════════════════════════════
   PICKER MODAL
   ══════════════════════════════════════════════════════════ */
.picker-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(0,0,0,.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: opacity 0.22s ease, visibility 0.22s ease;
  /* Isolate this overlay's paints from the page underneath — prevents the mobile
     compositor from leaking game-card images through dropped backdrop paint bands. */
  contain: layout paint;
}
.picker-modal-backdrop.open {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
}
/* [FIX] backdrop-filter only on desktop — mobile has enough compositor pressure
   from the sticky header + bottom nav + sticky bar already. */
@media (min-width: 901px) {
  .picker-modal-backdrop.open {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
}
/* [FIX 2026-06-18] On mobile, use a near-opaque solid backdrop. */
@media (max-width: 900px) {
  .picker-modal-backdrop {
    /* Fully opaque — 0.97 still let bright card artwork bleed through in the bands
       where the Android compositor dropped the backdrop layer. */
    background: #030712;
  }
  /* [FIX 2026-06-19] Take the page out of the paint path while the modal is open.
     A near-opaque backdrop only MASKS its own box; it can't stop the GPU from
     mis-compositing tiles of the image-heavy game grid behind it (ghost artwork
     bleeding through). Hiding every body child except the modal removes the
     background layer entirely, so there is nothing left to bleed. Scroll is
     already locked via body{overflow:hidden} in picker-modal.js. */
  html.picker-open body > *:not(.picker-modal-backdrop) {
    visibility: hidden;
  }
}
/* [FIX 2026-06-19] When picker modal is open, pull game artwork images off the
   compositor entirely. On Android Chrome, large <img> elements inside
   position:relative cards with transition:transform are pre-promoted to their
   own GPU backing stores. Those layers can be ordered above position:fixed
   overlays (even at z-index:900) due to compositor tree mis-ordering — the
   artwork appears as ghost images "bleeding into" the picker rows.
   visibility:hidden removes the element from the compositor tree, eliminating
   the layer completely. The backdrop is still needed for desktop; this rule
   handles the root cause on mobile without affecting the modal's own visuals. */
html.picker-open .game-artwork,
html.picker-open .entry-card-art-bg,
html.picker-open img.game-artwork,
html.picker-open .hero-card > img {
  visibility: hidden;
}
.picker-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(18px) scale(0.97);
  transition: transform 0.22s ease;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
.picker-modal-backdrop.open .picker-modal {
  /* `transform: none` (not an identity translateY(0) scale(1)) so the GPU can
     DROP the compositor layer once the open animation finishes. An identity
     transform keeps this tall, scrollable modal permanently promoted — extra
     layer pressure that contributes to the mobile compositing corruption. */
  transform: none;
}
.picker-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg-card);
  z-index: 2;
}
.picker-modal-game-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}
.picker-modal-title {
  flex: 1;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
}
.picker-modal-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.picker-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
  font-size: 18px;
  line-height: 1;
}
.picker-modal-close:hover {
  background: var(--bg-section);
  color: var(--text);
}
.picker-modal-body {
  padding: 18px 20px 24px;
}
.picker-modal-loading {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 14px;
}

/* Modal list (compact rows) — scoped to the modal so the regions page is untouched */
#pickerModalGrid {
  flex-direction: column;
  gap: 8px;
}
.picker-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-section);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
@media (hover: hover) and (pointer: fine) {
  .picker-row:hover {
    background: var(--bg-hover);
    border-color: var(--orange);
    transform: translateX(2px);
  }
}
/* Touch devices: highlight on tap without creating a GPU layer. */
@media (hover: none) {
  .picker-row:active {
    background: var(--bg-hover);
    border-color: var(--orange);
  }
}
.picker-row-out {
  opacity: 0.55;
  pointer-events: none;
  filter: grayscale(0.4);
}
.picker-row-icon {
  width: 44px;
  height: 44px;
  border-radius: 9px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-card);
}
.picker-row-flag {
  width: 56px;
  height: 38px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  /* [FIX] box-shadow replaced with border — these flag images sit inside the
     picker modal (fixed overlay with inner scroll). Each flag's shadow forces the
     compositor to repaint its box during modal scroll on mobile. A solid border
     gives the same visual framing. */
  border: 1px solid rgba(0,0,0,.15);
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
}
.picker-row-flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.picker-row-flag-emoji {
  font-size: 22px;
  line-height: 1;
}
.picker-row-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.picker-row-text strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.picker-row-text small {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.picker-row-tag {
  flex-shrink: 0;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.picker-row-tag.tag-uid  { color: var(--orange); background: var(--orange-glow); }
.picker-row-tag.tag-game { color: var(--green);  background: var(--green-glow); }
.picker-row-tag.tag-gift { color: var(--blue);   background: var(--blue-glow); }
.picker-row-tag.tag-out  { color: var(--red);    background: var(--red-glow); }
.picker-row-chev {
  flex-shrink: 0;
  color: var(--text-dim);
  transition: color var(--transition), transform var(--transition);
}
@media (hover: hover) and (pointer: fine) {
  .picker-row:hover .picker-row-chev {
    color: var(--orange);
    transform: translateX(2px);
  }
}
@media (max-width: 480px) {
  /* Full-height modal on phones — eliminates the inner scrollable container that
     was forcing an extra compositor backing store inside the fixed overlay (a
     known Android Chrome stress point). */
  .picker-modal { max-height: 100vh; height: 100vh; border-radius: 0; align-self: stretch; }
  .picker-modal-backdrop { align-items: stretch; padding: 0; }
  .picker-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
}

/* ── Policy / FAQ / Refund pages ─────────────────────────── */
.policy-page {
  max-width: 740px;
  margin: 0 auto;
  padding: 48px 20px 72px;
}
.policy-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-strong);
}
.policy-hero-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  color: var(--orange);
}
.policy-hero h1 {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.15;
}
.policy-hero .policy-updated {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 4px;
}
.policy-section {
  margin-bottom: 40px;
}
.policy-section h2 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--orange);
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.policy-section p,
.policy-section li {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin: 0 0 10px;
}
.policy-section ul {
  padding-left: 18px;
  margin: 0 0 10px;
}
.policy-section ul li {
  margin: 0 0 6px;
}
.policy-note {
  background: var(--bg-section);
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 18px;
  margin-top: 12px;
}
.policy-note p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.policy-note strong {
  color: var(--text);
}
.policy-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0 0 40px;
}

/* FAQ accordion */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition);
}
.faq-item:hover {
  border-color: var(--border-strong);
}
.faq-item[open] {
  border-color: var(--orange);
}
.faq-item summary {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-chevron {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--orange);
  transition: transform 0.2s ease;
}
.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
}
.faq-answer {
  padding: 0 20px 18px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.75;
}
.faq-answer p { margin: 0 0 8px; }
.faq-answer p:last-child { margin: 0; }
.faq-group-title {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
  margin: 32px 0 10px;
}
.faq-group-title:first-child {
  margin-top: 0;
}
@media (max-width: 600px) {
  .policy-hero h1 { font-size: 1.5rem; }
  .policy-page { padding: 32px 16px 56px; }
}

/* ── Bottom Navigation Bar (mobile only) ────────────────────────────── */
@media (max-width: 768px) {
  body {
    padding-bottom: 68px;
  }
}

.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--bg-card);
  border-top: 1px solid var(--border-strong);
  flex-direction: row;
  align-items: stretch;
  height: 64px;
  padding: 0 4px;
  overflow: visible;
}

@media (max-width: 768px) {
  .bottom-nav {
    display: flex;
  }
}

/* Never show the bottom bar on admin pages */
body:has(.admin-layout) .bottom-nav {
  display: none !important;
}

.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.bottom-nav-item:hover,
.bottom-nav-item.active {
  color: var(--orange);
}

.bottom-nav-item--dim {
  color: var(--text-dim);
  pointer-events: none;
}

/* Account popup — absolute inside the fixed nav so it always appears above it */
.bottom-nav-popup {
  position: absolute;
  bottom: 100%;
  left: 8px;
  right: 8px;
  margin-bottom: 8px;
  z-index: 210;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.bottom-nav-popup.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.bottom-nav-popup-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.bottom-nav-popup-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
}

.bottom-nav-popup-username {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.bottom-nav-popup-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.bottom-nav-popup-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.875rem;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s ease;
}

.bottom-nav-popup-link:hover {
  background: var(--bg-hover);
}

.bottom-nav-popup-link--logout {
  color: var(--red);
}


/* ── Mobile Scrolling Performance Optimizations ── */
@media (max-width: 900px) {
  .site-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* Use solid background derived from variables */
    background: var(--bg-card) !important;
    /* box-shadow on position:sticky causes GPU repaint on every scroll frame —
       same reason mobile-sticky-bar had its shadow removed. Border suffices. */
    box-shadow: none !important;
  }
  /* Logo theme handled by `display` swap (see .logo-image / .logo-img-dark) —
     no CSS filter on mobile, so no compositor layer inside the sticky header. */
  .logo-image, .logo-img-dark {
    filter: none !important;
  }
  /* flash-wrap: replace transform-based centering with margin-auto so the
     element no longer forces its own compositor layer on every page. */
  .flash-wrap {
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    align-items: center !important;
  }
}

/* ── Site Mode Banners ─────────────────────────────────────────────────────── */
.site-mode-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: .55rem 1rem;
  font-size: .83rem;
  font-weight: 600;
  line-height: 1.4;
  position: relative;
  z-index: 90;
  flex-wrap: wrap;
  text-align: center;
}

/* Light mode: solid vibrant stripe so it's impossible to miss */
.site-mode-banner--payment {
  background: #d97706;
  border-bottom: 1px solid #b45309;
  color: #fff;
}
.site-mode-banner--maintenance {
  background: #dc2626;
  border-bottom: 1px solid #b91c1c;
  color: #fff;
}

/* Dark mode: subtle tinted bar (current behaviour was fine there) */
html.dark .site-mode-banner--payment {
  background: rgba(245, 158, 11, .14);
  border-bottom-color: rgba(245, 158, 11, .35);
  color: #fbbf24;
}
html.dark .site-mode-banner--maintenance {
  background: rgba(239, 68, 68, .14);
  border-bottom-color: rgba(239, 68, 68, .35);
  color: #f87171;
}

.site-mode-banner__icon { flex-shrink: 0; display: flex; align-items: center; }
.site-mode-banner__text { flex: 1; min-width: 0; }
.site-mode-banner__timer-wrap { white-space: nowrap; }

.site-mode-banner__action {
  position: absolute;
  right: 1rem;
  flex-shrink: 0;
  padding: .2rem .65rem;
  border-radius: 4px;
  font-size: .75rem;
  font-weight: 700;
  text-decoration: none;
  background: rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.4);
  color: #fff;
  transition: background .15s;
}
.site-mode-banner__action:hover { background: rgba(255,255,255,.35); }
html.dark .site-mode-banner__action {
  background: rgba(255,255,255,.08);
  border-color: currentColor;
  color: inherit;
}
html.dark .site-mode-banner__action:hover { background: rgba(255,255,255,.15); }