/* ===== THEME NEON: referens rasmga yaqinlashtiruvchi vizual qatlam (eng oxirgi ulanadi) ===== */

/* ---------- jonli fon: video bo'lmasa ham harakatdagi neon nur ---------- */
.bg::before, .bg::after {
  content: ""; position: absolute; z-index: 0; width: 70vmax; height: 70vmax; border-radius: 50%;
  filter: blur(60px); opacity: .55; pointer-events: none; will-change: transform;
}
.bg::before { top: -25vmax; left: -20vmax; background: radial-gradient(circle, #2f6bff 0%, transparent 65%); animation: drift1 18s ease-in-out infinite alternate; }
.bg::after { bottom: -30vmax; right: -25vmax; background: radial-gradient(circle, #7b3cff 0%, transparent 65%); animation: drift2 22s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(14vmax, 10vmax) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-12vmax, -8vmax) scale(1.1); } }
.bg video { z-index: 1; }
.bg-overlay { z-index: 2; }
.bg-overlay::after {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(rgba(140, 170, 255, .2) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
  mask-image: linear-gradient(180deg, #000, transparent 85%);
}

/* ---------- kartalar, kiritish maydonlari, menyu ---------- */
.card {
  background: linear-gradient(180deg, rgba(24, 38, 92, .72), rgba(10, 17, 46, .74));
  border-color: rgba(120, 160, 255, .26);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.input { background: rgba(7, 12, 34, .85); }
.balance-card { background: linear-gradient(120deg, rgba(31, 66, 230, .5), rgba(112, 64, 255, .3)); }
.menu-row, .pkg, .stat-box, .mini-stat { background: linear-gradient(180deg, rgba(28, 44, 104, .6), rgba(11, 18, 48, .6)); }
.banner { box-shadow: 0 10px 26px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .08); }

/* ---------- asosiy tugma: neon + yaltirash ---------- */
.btn-primary {
  overflow: hidden;
  background: linear-gradient(135deg, #2a5cff, #4b8dff 55%, #8a6bff);
  box-shadow: 0 10px 26px rgba(47, 107, 255, .55), inset 0 0 0 1px rgba(150, 190, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.btn-primary::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%);
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .3) 50%, transparent 70%);
  animation: shine 3.8s ease-in-out infinite;
}
.btn-primary[disabled]::before, .btn.loading::before { display: none; }
@keyframes shine { 0%, 55% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }

/* ---------- Home: hero va brend ---------- */
.hero {
  min-height: 250px; border-color: rgba(120, 160, 255, .35);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 0 40px rgba(75, 141, 255, .18);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background:
    radial-gradient(60% 60% at 15% 15%, rgba(75, 141, 255, .45), transparent 60%),
    radial-gradient(55% 55% at 90% 25%, rgba(165, 90, 255, .45), transparent 60%);
}
.hero h1, .hero p { position: relative; z-index: 1; text-shadow: 0 2px 14px rgba(0, 0, 0, .6); }
.hero h1 { font-size: 26px; }
.hero-brand {
  top: 20px; font-size: 27px; font-weight: 900; letter-spacing: .2em;
  background: linear-gradient(180deg, #fff 20%, #8fb6ff); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgba(75, 141, 255, .9));
}
.hero-brand::before {
  content: "\265B"; display: block; font-size: 30px; line-height: 1; letter-spacing: 0; margin-bottom: 2px;
  -webkit-text-fill-color: #ffcf5a; filter: drop-shadow(0 0 10px rgba(255, 190, 60, .85));
}
.hero-brand::after { content: "GAME SHOP"; display: block; margin-top: 2px; font-size: 11px; font-weight: 600; letter-spacing: .55em; -webkit-text-fill-color: #b7c8ff; }

/* ---------- o'yin kartalari ---------- */
.tile, .gcard { border-color: rgba(120, 160, 255, .3); box-shadow: 0 10px 26px rgba(0, 0, 0, .45); }
.tile:hover, .gcard:hover { border-color: var(--neon); box-shadow: 0 12px 30px rgba(0, 0, 0, .5), 0 0 22px rgba(75, 141, 255, .35); }
.tile-cta { box-shadow: 0 6px 16px rgba(47, 107, 255, .5); }
.tile .img-wrap::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(8, 13, 40, .75)); }

/* ---------- rasm bo'lmasa: o'yin nomidan rang olgan neon karta ---------- */
.img-wrap {
  background:
    radial-gradient(120% 90% at 20% 0%, hsl(var(--hue, 220) 90% 55% / .6), transparent 60%),
    radial-gradient(100% 80% at 100% 100%, hsl(calc(var(--hue, 220) + 60) 90% 50% / .5), transparent 55%),
    linear-gradient(160deg, hsl(var(--hue, 220) 60% 18%), #080d28);
}
.img-wrap > img { position: relative; z-index: 1; }
.img-fb { position: absolute; inset: 0; z-index: 0; display: grid; place-content: center; gap: 4px; padding: 8px; text-align: center; pointer-events: none; }
.img-fb b { font-size: clamp(30px, 9vw, 46px); font-weight: 900; letter-spacing: .04em; text-shadow: 0 0 20px hsl(var(--hue, 220) 100% 70% / .9); }
.img-fb small { font-size: 11px; color: rgba(255, 255, 255, .75); }

/* ---------- pastki menyu ---------- */
.nav::before { content: ""; position: absolute; left: 8%; right: 8%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--neon), transparent); }
.nav-item.active::after {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 28px; height: 3px; border-radius: 0 0 6px 6px; background: var(--neon); box-shadow: 0 0 12px var(--neon);
}
.nav-center.active::after { display: none; }
.nav-plus::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid rgba(75, 141, 255, .5); animation: ring 2.4s ease-out infinite; }
@keyframes ring { from { transform: scale(.85); opacity: .9; } to { transform: scale(1.25); opacity: 0; } }
/* ===== v2 tuzatishlar ===== */

/* Kichik ikonlarda oq fonli PNG o'rniga chiziqli SVG (referensdagidek) */
.menu-row .ico img, .balance-card .ico img, .pcard .ico img { display: none; }
.menu-row .ico.has-img, .balance-card .ico.has-img, .pcard .ico.has-img { background: linear-gradient(135deg, #2f6bff, #6a3cff); }
.menu-row .ico.has-img .ic, .balance-card .ico.has-img .ic, .pcard .ico.has-img .ic { display: block; }

/* Natija sahifasidagi katta rasm: yumaloq burchakli, oq fon kvadrati ko'rinmaydi */
.status-ic.has-img { width: 120px; height: 120px; border-radius: 30px; overflow: hidden; box-shadow: 0 0 40px rgba(75, 141, 255, .35); }

/* Klaviatura fokusi toza ko'rinsin */
.nav-item:focus-visible, .tab:focus-visible { outline-offset: -3px; border-radius: 14px; }