/* Aura Game Club — sayt (vitrina). Yagona qorong'i mavzu (dizayn bo'yicha): kechki PlayStation zali, △ ○ × □ jonli.
   Mobil birinchi (390 px), keyin kompyuter. Faqat transform/opacity animatsiyalari. */

/* Shriftlar yuklanguncha — o'lchami moslangan zaxira (matn siljimaydi) */
@font-face { font-family: 'Manrope Fallback'; src: local('Arial'), local('Helvetica Neue'), local('Helvetica'); size-adjust: 104%; ascent-override: 102%; descent-override: 29%; line-gap-override: 0%; }
@font-face { font-family: 'Unbounded Fallback'; src: local('Arial Black'), local('Arial Bold'), local('Arial'); size-adjust: 103%; ascent-override: 93%; descent-override: 23%; line-gap-override: 0%; }

@property --haze { syntax: '<color>'; inherits: true; initial-value: rgba(61, 139, 255, .18); }

:root {
  --bg: #05060F; --bg-2: #0B0D1F; --surface: rgba(255, 255, 255, .03); --line: rgba(255, 255, 255, .08);
  --ink: #F3F4FF; --ink-2: #B8BCE0; --muted: #7A7FA8;
  --accent: #3D8BFF;
  --tri: #00D06A; --circle: #FF3B5C; --cross: #3D8BFF; --square: #FF5FD2;
  --free: #00D06A; --busy: #FF3B5C; --off: #7A7FA8;
  --f-display: 'Unbounded', 'Unbounded Fallback', system-ui, sans-serif;
  --f-body: 'Manrope', 'Manrope Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --out: cubic-bezier(.23, 1, .32, 1);
  --gut: 16px;
  --nav-top: calc(env(safe-area-inset-top, 0px) + 14px);
  color-scheme: dark;
}
@media (min-width: 760px) { :root { --gut: clamp(24px, 5vw, 64px); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); scroll-padding-top: 88px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body {
  --haze: rgba(61, 139, 255, .18);
  margin: 0; min-height: 100vh; overflow-x: clip; color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  background: radial-gradient(1200px 800px at 50% -10%, rgba(61, 139, 255, .18) 0%, rgba(5, 6, 15, 0) 60%) no-repeat, var(--bg);
  transition: --haze 900ms ease;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, h3, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(61, 139, 255, .35); color: #fff; }
[hidden] { display: none !important; }

.skip { position: fixed; left: 16px; top: -60px; z-index: 120; padding: 12px 16px; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 700; transition: top .2s var(--out); }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }

/* Film donadorligi: kontent fonlaridan yuqorida, matndan pastda */
.grain { position: fixed; inset: -50%; z-index: 1; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px; }
.wrap, .hero-in, .nav, .foot-in { position: relative; z-index: 2; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-inline: var(--gut); }

/* Bo'limlar: har biri tepasida rangli tuman (--haze body'da ScrollTrigger bilan almashadi) */
main > section { position: relative; padding-block: clamp(72px, 9vw, 128px); }
main > section:not(.hero)::before { content: ''; position: absolute; inset: 0 0 auto; height: min(900px, 120vh); z-index: 0; pointer-events: none;
  background: radial-gradient(1100px 620px at 50% 0%, var(--haze), rgba(5, 6, 15, 0) 70%); opacity: .9;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 220px); mask-image: linear-gradient(to bottom, transparent, #000 220px); }

/* ---------- Tugmalar ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 16px 26px; border-radius: 14px;
  font: 700 15px/1.1 var(--f-body); letter-spacing: .01em; white-space: nowrap; user-select: none;
  transition: transform 220ms var(--out), box-shadow 220ms var(--out), background-color 220ms var(--out), border-color 220ms var(--out); }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-ghost { border: 1px solid rgba(255, 255, 255, .14); color: var(--ink); background: rgba(255, 255, 255, .02); }
@media (hover: hover) {
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(61, 139, 255, .35); }
  .btn-ghost:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .05); }
  .btn:active { transform: scale(.97); }
}
.btn-xl { min-height: 60px; padding: 18px 30px; font-size: 16px; border-radius: 16px; }
.btn .tg { width: 20px; height: 20px; fill: currentColor; }

/* ---------- Skelet (yuklanmoqda) ---------- */
.sk { display: inline-block; vertical-align: middle; border-radius: 8px; background: linear-gradient(90deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .1), rgba(255, 255, 255, .04)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.sk-facts { width: 210px; height: 14px; }
.sk-live { width: 170px; height: 12px; }

/* Kirish va parvoz paytida sahifa aylanmaydi (sessiyada birinchi marta) */
html.js:not(.seen) body { overflow: hidden; }
/* site.js yuklanmasa (CDN/eski brauzer) — 5 s dan keyin hammasi ko'rinadi (index.html dagi zaxira taymer) */
html.fb-in .rv, html.fb-in .sec-h .w > span { opacity: 1 !important; transform: none !important; }
main:focus { outline: none; }
.rm body { animation: fadein 200ms ease both; }
@keyframes fadein { from { opacity: 0; } }

/* ---------- Navigatsiya: suzuvchi pill ---------- */
.nav { position: fixed; z-index: 50; top: var(--nav-top); left: var(--gut); right: var(--gut); height: 52px; margin: 0 auto; max-width: 1080px;
  display: flex; align-items: center; gap: 8px; padding: 0 4px 0 20px; border-radius: 999px;
  background: rgba(11, 13, 31, .55); border: 1px solid rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  transition: transform 320ms var(--out), opacity 700ms var(--out), translate 800ms var(--out), visibility 0s; }
/* Kirish va parvozda menyu yashirin (fokus ham olmaydi); kelganda yuqoridan tushadi */
html.js:not(.rm):not(.arrived) .nav { opacity: 0; translate: 0 -18px; visibility: hidden; }
.nav-logo { font: 700 15px/1 var(--f-display); letter-spacing: .32em; margin-right: -.32em; padding: 14px 0; color: var(--ink); }
.nav-links { display: none; }
.nav-r { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.lang { display: inline-flex; align-items: center; height: 44px; padding: 0 12px; border-radius: 999px; font: 700 12px/1 var(--f-body); letter-spacing: .08em; color: var(--muted); gap: 2px; }
.lang span { padding: 6px 6px; border-radius: 999px; transition: color 200ms var(--out), background-color 200ms var(--out); }
.lang span.on { color: var(--ink); background: rgba(255, 255, 255, .08); }
/* Ovoz tugmasi: to'rt chiziqcha (ekvalayzer) — yoqilganda «o'ynaydi» */
.snd { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 999px; color: var(--muted); transition: color 200ms var(--out), background-color 200ms var(--out); }
.snd-bars { display: flex; align-items: center; gap: 2.5px; height: 14px; }
.snd-bars i { width: 2px; height: 14px; border-radius: 2px; background: currentColor; transform: scaleY(.2); transition: transform 300ms var(--out); }
.snd[aria-pressed="true"] { color: var(--ink); }
.snd[aria-pressed="true"] .snd-bars i { animation: eq 1.05s ease-in-out infinite; }
.snd[aria-pressed="true"] .snd-bars i:nth-child(2) { animation-delay: -.42s; } .snd[aria-pressed="true"] .snd-bars i:nth-child(3) { animation-delay: -.18s; } .snd[aria-pressed="true"] .snd-bars i:nth-child(4) { animation-delay: -.66s; }
@keyframes eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@media (hover: hover) { .snd:hover { color: var(--ink-2); } .snd[aria-pressed="true"]:hover { color: var(--ink); } }
.nav-cta { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 999px; background: var(--accent); color: #fff; font: 700 14px/1 var(--f-body); transition: transform 200ms var(--out), box-shadow 200ms var(--out); }
.nav-cta:active { transform: scale(.97); }
@media (hover: hover) { .nav-cta:hover { box-shadow: 0 8px 22px rgba(61, 139, 255, .4); } .lang:hover span:not(.on) { color: var(--ink-2); } }
@media (min-width: 860px) {
  .nav-links { display: flex; gap: 4px; margin-left: 28px; }
  .nav-links a { padding: 10px 14px; border-radius: 999px; font: 600 14px/1 var(--f-body); color: var(--ink-2); transition: color 200ms var(--out), background-color 200ms var(--out); }
  .nav-links a:hover, .nav-links a.on { color: var(--ink); }
  .nav-links a.on { background: rgba(255, 255, 255, .05); }
}

/* ---------- HERO — «5D kino»ga kirish ---------- */
/* Pardalar balandligi: kompyuterda haqiqiy 2.39:1 kadr (ko'pi bilan 17% dan), telefonda (tik ekran) — menyu sig'adigan ingichka parda */
@property --lb { syntax: '<length>'; inherits: true; initial-value: 0px; }
:root { --lb: clamp(0px, calc((100svh - 41.841vw) / 2), 17svh); }
@media (orientation: portrait) { :root { --lb: max(calc(var(--nav-top) + 62px), 9svh); } }
/* Bo'lim kadrdan --fly ga balandroq: ichidagi .hero-pin yopishib turadi — aylantirish kamerani belgilar halqasi orasidan olib o'tadi */
.hero { --fly: 60svh; position: relative; height: 160vh; height: calc(max(100svh, 520px) + var(--fly)); padding: 0 !important; background: #05060F; isolation: isolate; }
@media (max-width: 759px) { .hero { --fly: 45svh; } }
@media (max-height: 560px) { .hero { --fly: 0px; } }
.rm .hero, html:not(.js) .hero { --fly: 0px; } /* JS'siz va harakatni kamaytirishda — yopishish yo'q */
.hero-pin { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 520px; display: grid; place-items: center; overflow: hidden; overflow: clip;
  background: radial-gradient(1200px 800px at 50% -10%, rgba(61, 139, 255, .18) 0%, rgba(5, 6, 15, 0) 60%), #05060F; }
.stage { position: absolute; inset: 0; z-index: 0; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 900ms ease; }
.stage.gl .hero-canvas { opacity: 1; }
.fallback { position: absolute; inset: 0; transition: opacity 700ms ease; transform-origin: 50% 50%; }
.stage.gl .fallback { opacity: 0; }
.fb { position: absolute; fill: none; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.fb-tri { stroke: var(--tri); width: 26vw; max-width: 210px; left: 4%; top: 18%; transform: rotate(-12deg); filter: drop-shadow(0 0 18px rgba(0, 208, 106, .55)); }
.fb-circle { stroke: var(--circle); width: 22vw; max-width: 170px; right: 2.5%; top: 24%; filter: drop-shadow(0 0 18px rgba(255, 59, 92, .55)); }
.fb-cross { stroke: var(--cross); width: 20vw; max-width: 170px; left: 7%; bottom: 19%; transform: rotate(8deg); filter: drop-shadow(0 0 18px rgba(61, 139, 255, .55)); }
.fb-square { stroke: var(--square); width: 19vw; max-width: 160px; right: 11%; bottom: 18%; transform: rotate(14deg); filter: drop-shadow(0 0 18px rgba(255, 95, 210, .55)); }
@media (max-width: 759px) {
  .fb-tri { width: 80px; left: -10px; top: calc(var(--lb) + 14px); } .fb-circle { width: 74px; right: -12px; top: calc(var(--lb) + 40px); }
  .fb-cross { width: 64px; left: -4px; bottom: calc(var(--lb) + 8px); } .fb-square { width: 62px; right: -6px; bottom: calc(var(--lb) + 2px); }
}
/* Kirishda SVG belgilar yashirin; «zarba»da prujina bilan yig'iladi */
html.gate-on:not(.reveal) .fb { opacity: 0; }
html.js:not(.rm).reveal .fb { animation: fbIn 900ms cubic-bezier(.34, 1.56, .64, 1) both; }
html.js:not(.rm).reveal .fb-circle { animation-delay: 70ms; } html.js:not(.rm).reveal .fb-cross { animation-delay: 140ms; } html.js:not(.rm).reveal .fb-square { animation-delay: 210ms; }
@keyframes fbIn { from { opacity: 0; scale: 1.9; } 45% { opacity: 1; } }
/* WebGL yo'q bo'lsa parvoz — CSS tunnel: konturlar markazdan otilib o'tadi */
.fb-tunnel { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.fb-tunnel svg { grid-area: 1 / 1; width: min(54vmin, 440px); height: auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; opacity: 0; overflow: visible; filter: drop-shadow(0 0 6px currentColor); }
html.flying .fb-tunnel svg { animation: tun 1150ms cubic-bezier(.5, 0, .75, .3) both; animation-delay: calc(var(--i) * 75ms); }
@keyframes tun { 0% { opacity: 0; transform: rotate(var(--r)) scale(.05); } 25% { opacity: .95; } 100% { opacity: 0; transform: rotate(calc(var(--r) + 50deg)) scale(4.5); } }
/* Oq chaqnash (zarba): 0 → .35 → 0, 300 ms — pardalar va yozuvlar ostida */
.flash { position: absolute; inset: 0; z-index: 1; background: #fff; opacity: 0; pointer-events: none; }
.flash.go { animation: flash 300ms linear both; }
@keyframes flash { 30% { opacity: .35; } to { opacity: 0; } }
/* Kino pardalari: yopiq (har biri 50%) → kadr (--lb) 1200 ms; aylantirganda (--lbk 0 → 1, hero'ning 30%) yig'iladi */
.lb { display: none; position: absolute; inset: 0; z-index: 4; pointer-events: none; } /* yozuvlar ustida: birinchi chizishda butun ekran qora */
html.lb-on .lb { display: block; }
.lb i { position: absolute; left: 0; right: 0; height: 50.5%; background: #000; will-change: transform; }
.lb-t { top: 0; transform: translateY(calc(var(--lb) * (1 - var(--lbk, 0)) - 100%)); }
.lb-b { bottom: 0; transform: translateY(calc(100% - var(--lb) * (1 - var(--lbk, 0)))); }
html.lb-on:not(.seen):not(.lb-open) .lb i { transform: none; }
html.lb-anim .lb i { transition: transform 1200ms cubic-bezier(.76, 0, .24, 1); }
.hero::after { content: ''; position: absolute; inset: auto 0 0; height: 180px; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(5, 6, 15, 0), #05060F); }
.hero-in { position: relative; width: 100%; max-width: 1240px; padding-inline: var(--gut); display: flex; flex-direction: column; align-items: center; text-align: center; z-index: 3; }
/* Aylantirishda: yozuvlar so'nadi, so'z belgisi 1 → 3.2 kattalashadi (harflar orasidan uchib o'tamiz) — o'zgaruvchilar site.js dan */
.hero-top, .hero-sub { display: flex; flex-direction: column; align-items: center; opacity: var(--ui-o, 1); transform: translateY(var(--ui-y, 0px)); }
.hero-sub { width: 100%; }

.ticker { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 40px; margin-bottom: 20px; padding: 9px 16px 9px 12px; border-radius: 999px;
  border: 1px solid rgba(61, 139, 255, .35); background: rgba(61, 139, 255, .08); font: 700 12px/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
  transition: transform 220ms var(--out), border-color 220ms var(--out), background-color 220ms var(--out), opacity 700ms var(--out), translate 700ms var(--out), visibility 0s; }
.ticker b { color: var(--accent); font-weight: 800; }
.ticker .tk-g { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--tri); stroke-width: 2.6; stroke-linejoin: round; }
.ticker .tk-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ticker .tk-arrow { flex: none; transition: transform 220ms var(--out); }
@media (hover: hover) { .ticker:hover { transform: translateY(-2px); border-color: rgba(61, 139, 255, .6); } .ticker:hover .tk-arrow { transform: translateY(2px); } }

/* So'z belgisi: harflar va «yorug'lik o'tishi» bir katakda (bir xil joylashuv); kerning o'chiq — ustma-ust nusxa aniq tushadi */
.wordmark { position: relative; display: grid; margin: 0; font: 700 min(clamp(4.5rem, 17vw, 15rem), 23svh)/.9 var(--f-display); letter-spacing: .18em; margin-right: -.18em; color: #F3F4FF; font-kerning: none;
  transform: scale(var(--wm-s, 1)); opacity: var(--wm-o, 1); transform-origin: 50% 50%; }
/* Yumshoq nur (0 0 40px rgba(61,139,255,.35)) — ota elementda; harf faqat pastdan kesiladi (ko'tarilish), yonlari ochiq (xromatik puls) */
.wm { grid-area: 1 / 1; display: inline-flex; filter: drop-shadow(0 0 40px rgba(61, 139, 255, .35)); }
.wl { display: inline-block; padding-block: .06em; margin-block: -.06em; clip-path: inset(-40% -30% 0 -30%); }
.wl i { display: inline-block; font-style: normal; }
/* Birinchi chizishda harflar joyida (LCP), pardalar ochilishidan oldin pastga yashirinadi; «zarba»da ko'tariladi + xromatik puls */
html.js:not(.rm).gate-on:not(.reveal) .wl i, html.js:not(.rm).seen:not(.reveal) .wl i { transform: translateY(110%); }
html.js:not(.rm).reveal .wl i { transform: none; transition: transform 820ms var(--out); animation: chroma 260ms ease-out 180ms both; }
html.js:not(.rm).reveal .wl:nth-child(2) i { transition-delay: 70ms; } html.js:not(.rm).reveal .wl:nth-child(3) i { transition-delay: 140ms; } html.js:not(.rm).reveal .wl:nth-child(4) i { transition-delay: 210ms; }
@keyframes chroma { from { text-shadow: -3px 0 0 rgba(255, 59, 92, .9), 3px 0 0 rgba(61, 139, 255, .9); } to { text-shadow: 0 0 0 rgba(255, 59, 92, 0), 0 0 0 rgba(61, 139, 255, 0); } }
/* Yorug'lik o'tishi: harflar nusxasi (background-clip: text) ustidan chapdan o'ngga yorug' tasma, 900 ms */
.wm-sweep { grid-area: 1 / 1; white-space: nowrap; color: transparent; pointer-events: none; opacity: 0; padding-block: .06em; margin-block: -.06em;
  background: linear-gradient(100deg, rgba(61, 139, 255, 0) 18%, rgba(120, 180, 255, .85) 38%, #fff 50%, rgba(255, 130, 220, .85) 62%, rgba(255, 95, 210, 0) 82%) no-repeat;
  background-size: 42% 100%; background-position: -130% 0; -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 14px rgba(190, 210, 255, .55)); }
html.js:not(.rm).reveal .wm-sweep { animation: sweep 900ms cubic-bezier(.45, 0, .25, 1) 300ms both; }
@keyframes sweep { 0% { opacity: 1; background-position: -130% 0; } 92% { opacity: 1; } 100% { opacity: 0; background-position: 230% 0; } }
.gc { margin-top: 18px; font: 500 clamp(12px, 1.1vw, 14px)/1 var(--f-display); letter-spacing: .42em; margin-right: -.42em; color: var(--muted); }
.tagline { margin-top: 20px; max-width: 30ch; font: 600 clamp(1.05rem, 2.2vw, 1.35rem)/1.35 var(--f-body); color: var(--ink-2); }
.hero-meta { display: flex; flex-direction: column; align-items: center; }
.facts { margin-top: 12px; min-height: 20px; font: 600 13px/1.5 var(--f-body); color: var(--muted); letter-spacing: .02em; }
.facts .sep { margin: 0 .5em; opacity: .7; }
.live { margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 8px 16px 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); font: 700 14px/1.2 var(--f-body); color: var(--ink); }
@media (min-width: 760px) { .hero-meta { flex-direction: row; gap: 18px; margin-top: 16px; } .hero-meta .facts, .hero-meta .live { margin-top: 0; } }
.live-dot { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--free); }
.live-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ping 1.6s cubic-bezier(0, 0, .2, 1) infinite; }
.live.none .live-dot { background: var(--busy); }
.live.loading .live-dot { background: var(--muted); }
.live.loading .live-dot::after { animation: none; }
@keyframes ping { from { transform: scale(1); opacity: .6; } to { transform: scale(2.4); opacity: 0; } }
.ctas { margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@media (max-width: 420px) { .ctas { width: 100%; } .ctas .btn { flex: 1 1 100%; } }
/* Hero yozuvlari: kirishda yashirin (fokus ham olmaydi), kelganda navbat bilan paydo bo'ladi */
.hero-ui { transition: opacity 700ms var(--out), translate 700ms var(--out), visibility 0s; transition-delay: calc(var(--hd, 0) * 90ms); }
.ticker.hero-ui { --hd: 0; } .gc.hero-ui { --hd: 1; } .tagline.hero-ui { --hd: 2; } .hero-meta.hero-ui { --hd: 3; } .ctas.hero-ui { --hd: 4; }
html.js:not(.rm):not(.arrived).gate-on .hero-ui, html.js:not(.rm):not(.arrived).seen .hero-ui { opacity: 0; translate: 0 14px; visibility: hidden; transition: none; }

/* ---------- Kirish ekrani: belgilar + hisoblagich → «KIRISH» ---------- */
.gate { display: none; position: absolute; inset: 0; z-index: 6; }
html.js:not(.seen) .gate { display: block; }
html.flying .gate, html.reveal .gate { opacity: 0; visibility: hidden; transition: opacity 380ms ease, visibility 0s 380ms; }
.gate-c { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; width: max-content; max-width: calc(100vw - 2 * var(--gut)); }
/* Tugma atrofida yumshoq qorong'i dog' — tunnel nuri ustida yozuvlar o'qiladi */
.gate-c::before { content: ''; position: absolute; inset: -56px -84px; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(5, 6, 15, .72), rgba(5, 6, 15, .38) 55%, rgba(5, 6, 15, 0)); opacity: 0; transition: opacity 700ms ease 200ms; }
html.k-on .gate-c::before { opacity: 1; }
.gate-glyphs { grid-area: 1 / 1; align-self: center; display: flex; gap: 18px; }
.pg { width: 44px; height: 44px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible;
  transition: transform 560ms cubic-bezier(.76, 0, .24, 1), opacity 460ms ease 80ms, filter 560ms ease; }
.pg * { stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw 900ms cubic-bezier(.65, 0, .35, 1) forwards; }
.pg-tri { stroke: var(--tri); } .pg-circle { stroke: var(--circle); } .pg-cross { stroke: var(--cross); } .pg-square { stroke: var(--square); }
.pg-circle * { animation-delay: 180ms; } .pg-cross * { animation-delay: 360ms; } .pg-square * { animation-delay: 540ms; }
@keyframes draw { to { stroke-dashoffset: 0; } }
/* Tayyor: belgilar markazga oqib, xiralashib tugmaga eriydi */
html.k-on .pg { opacity: 0; filter: blur(5px); }
html.k-on .pg-tri { transform: translateX(93px) scale(.3); } html.k-on .pg-circle { transform: translateX(31px) scale(.3); }
html.k-on .pg-cross { transform: translateX(-31px) scale(.3); } html.k-on .pg-square { transform: translateX(-93px) scale(.3); }
.kirish { grid-area: 1 / 1; position: relative; display: inline-flex; align-items: center; gap: 14px; padding: 18px 34px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(5, 6, 15, .55); color: #F3F4FF; font: 700 14px/1 var(--f-display); letter-spacing: .4em; white-space: nowrap;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transform: scale(.9, .7); filter: blur(8px);
  transition: opacity 520ms var(--out) 200ms, transform 640ms var(--out) 200ms, filter 520ms var(--out) 200ms, visibility 0s 200ms, border-color 220ms var(--out), background-color 220ms var(--out); }
.kirish .k-t { margin-right: -.4em; }
.kirish .k-play { width: 9px; height: 11px; fill: currentColor; margin-left: 4px; }
.kirish::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: .3;
  box-shadow: 0 0 22px rgba(61, 139, 255, .55), 0 0 64px rgba(255, 95, 210, .22), inset 0 0 16px rgba(61, 139, 255, .22); animation: kglow 2.4s ease-in-out infinite; }
@keyframes kglow { 50% { opacity: 1; } }
html.k-on .kirish { opacity: 1; visibility: visible; transform: none; filter: none; }
html.k-on .kirish:active { transform: scale(.97); transition-delay: 0s; }
@media (hover: hover) { html.k-on .kirish:hover { border-color: rgba(255, 255, 255, .7); background-color: rgba(61, 139, 255, .12); } }
.gate-sub { margin-top: 16px; font: 600 12px/1.4 var(--f-body); letter-spacing: .06em; color: var(--ink-2); text-shadow: 0 1px 12px rgba(5, 6, 15, .9); opacity: 0; transition: opacity 600ms ease 520ms; }
.gate-mute { min-height: 44px; padding: 0 14px; font: 700 11px/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); text-shadow: 0 1px 12px rgba(5, 6, 15, .9);
  text-decoration: underline; text-underline-offset: 6px; text-decoration-color: rgba(184, 188, 224, .3); opacity: 0; visibility: hidden; transition: opacity 600ms ease 640ms, visibility 0s 640ms, color 200ms var(--out); }
@media (hover: hover) { .gate-mute:hover { color: var(--ink); } }
html.k-on .gate-sub, html.k-on .gate-mute { opacity: 1; visibility: visible; }
/* Pastki pardada — film titri va hisoblagich (haqiqiy tayyorlik) */
.gate-count, .gate-credit { position: absolute; bottom: calc(max(14px, (var(--lb) - 12px) / 2) + env(safe-area-inset-bottom, 0px)); font: 500 12px/1 var(--f-display); letter-spacing: .3em; color: var(--muted); transition: opacity 500ms ease; }
.gate-count { right: calc(var(--gut) + env(safe-area-inset-right, 0px)); margin-right: -.3em; }
.gate-credit { left: calc(var(--gut) + env(safe-area-inset-left, 0px)); font-size: 10px; letter-spacing: .34em; color: rgba(122, 127, 168, .75); }
.gate-credit span { margin: 0 .2em; }
html.k-on .gate-count { opacity: 0; }
@media (max-width: 359px) { .gate-credit { display: none; } }

/* ---------- Bo'lim sarlavhalari (so'zlar qo'lda bo'linadi) ---------- */
.sec-h { font: 700 clamp(2rem, 5.6vw, 4.25rem)/1.02 var(--f-display); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.sec-h .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.sec-h .w > span { display: inline-block; }
html.js:not(.rm) .sec-h[data-split] .w > span { transform: translateY(110%); transition: transform 700ms var(--out); transition-delay: calc(var(--i, 0) * 60ms); }
html.js .sec-h.in .w > span { transform: none !important; }
.sec-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.upd { font: 600 13px/1.4 var(--f-body); color: var(--muted); padding-bottom: 6px; }
.upd.stale { color: var(--muted); font-style: italic; }

/* Paydo bo'lish: 24px pastdan, 700 ms */
html.js:not(.rm) .rv { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--out), transform 700ms var(--out); transition-delay: calc(var(--d, 0) * 60ms); }
html.js .rv.in { opacity: 1; transform: none; }

/* ---------- TURNIR VA E'LONLAR ---------- */
.news .sec-h { margin-bottom: clamp(28px, 4vw, 48px); }
/* Balandlik: 4:5 / 16:9, matn ko'p bo'lsa — o'sadi (kesilmaydi): kesish faqat fon qatlamida (.f-bg) */
.feature { position: relative; border-radius: 24px; isolation: isolate; aspect-ratio: 4 / 5; background: var(--bg-2); display: flex; align-items: flex-end; }
.f-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; border-radius: inherit; }
@media (min-width: 760px) { .feature { aspect-ratio: 16 / 9; } }
.feature .poster, .s-img, .sheet-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature .poster { z-index: 0; transform: scale(1.04); transition: transform 1600ms var(--out); }
.feature.in .poster { transform: scale(1); }
.feature::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(to top, rgba(5, 6, 15, .92) 0%, rgba(5, 6, 15, .35) 55%, rgba(5, 6, 15, .1) 100%); }
/* Rasmsiz e'lon — yaratilgan poster: qorong'i gradient + turning belgisi butunligicha, katta, 12% */
.gen { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(70% 55% at 50% 42%, color-mix(in srgb, var(--kc) 22%, transparent), transparent 70%), linear-gradient(160deg, #10132B, #05060F 72%); }
.gen svg { position: absolute; left: 50%; top: 44%; width: 82%; height: auto; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(-8deg); fill: none; stroke: var(--kc); stroke-width: 2.2; opacity: .12; stroke-linejoin: round; stroke-linecap: round; }
@media (min-width: 760px) { .feature .gen svg { left: auto; right: 4%; top: 50%; width: auto; height: 118%; transform: translateY(-50%) rotate(-8deg); } .feature .gen { background: radial-gradient(50% 70% at 78% 45%, color-mix(in srgb, var(--kc) 22%, transparent), transparent 70%), linear-gradient(160deg, #10132B, #05060F 72%); } }
.k-turnir { --kc: var(--accent); } .k-aksiya { --kc: var(--square); } .k-yangilik { --kc: var(--ink-2); }
.f-body { position: relative; width: 100%; padding: clamp(22px, 4vw, 52px); display: flex; flex-direction: column; gap: 14px; }
.kind { font: 800 11px/1 var(--f-body); letter-spacing: .24em; text-transform: uppercase; color: var(--kc); }
.k-yangilik .kind { color: var(--ink-2); }
.f-title { font: 700 clamp(2rem, 6vw, 4.5rem)/1 var(--f-display); letter-spacing: -.02em; max-width: 16ch; overflow-wrap: anywhere; text-wrap: balance; }
.f-meta, .s-meta, .sh-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 600 14px/1.4 var(--f-body); color: var(--ink-2); }
/* Ajratgich — oldingi bo'lak oxirida (qator bo'linsa, yangi qator «·» bilan boshlanmaydi) */
.f-meta span:not(:last-child)::after, .sh-meta span:not(:last-child)::after { content: '·'; margin-left: 14px; color: var(--muted); }
.f-excerpt { max-width: 56ch; color: var(--ink-2); font: 400 15px/1.55 var(--f-body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.f-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 24px; margin-top: 6px; }
.f-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.more { min-height: 52px; padding: 0 6px; font: 700 14px/1 var(--f-body); color: var(--ink-2); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(184, 188, 224, .35); transition: color 200ms var(--out); }
.more:hover { color: var(--ink); }
/* Teskari sanoq: har birlik o'z katagida, raqam almashganda yuqoridan tushadi */
.cd { display: flex; align-items: flex-start; gap: 8px; font-family: var(--f-display); }
.cd-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cd-num { display: flex; padding: 10px 10px 8px; min-width: 64px; justify-content: center; border-radius: 14px; background: rgba(5, 6, 15, .55); border: 1px solid rgba(255, 255, 255, .1); font: 500 clamp(1.5rem, 3.4vw, 2.4rem)/1 var(--f-display); font-variant-numeric: tabular-nums; }
.cd-d { display: inline-block; overflow: hidden; height: 1em; line-height: 1; }
.cd-d i { display: block; font-style: normal; }
.cd-d i.tick { animation: tick 120ms var(--out); }
@keyframes tick { from { transform: translateY(-100%); } }
.cd-l { font: 700 10px/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.cd-sep { padding-top: 12px; font: 500 clamp(1.2rem, 2.4vw, 1.8rem)/1 var(--f-display); color: var(--muted); }
.cd-live { display: inline-flex; align-items: center; gap: 10px; font: 700 15px/1 var(--f-body); color: var(--ink); }
@media (max-width: 759px) {
  .feature { --fw: calc(100vw - 2 * var(--gut)); aspect-ratio: auto; min-height: calc(var(--fw) * 1.25); }
  .f-bg .poster, .f-bg .gen { height: calc(var(--fw) * 1.25); bottom: auto; }
  .feature::after { background: linear-gradient(to top, rgba(5, 6, 15, .96) 0%, rgba(5, 6, 15, .92) 38%, rgba(5, 6, 15, .35) 72%, rgba(5, 6, 15, .1) 100%); }
  .f-body { padding-top: calc(var(--fw) * .62); }
  .f-excerpt { display: none; }
  .f-meta { gap: 8px; }
  .f-meta span { padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(5, 6, 15, .5); font-size: 13px; }
  .f-meta span:not(:last-child)::after { content: none; }
}
@media (max-width: 420px) { .cd { gap: 5px; } .cd-num { min-width: 56px; padding: 9px 7px 7px; } .cd-sep { padding-top: 10px; } }

/* Lenta: gorizontal, snap */
.strip { display: flex; gap: 16px; margin-top: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); padding: 4px var(--gut) 18px; margin-inline: calc(var(--gut) * -1);
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; overscroll-behavior-x: contain; }
.strip:empty { display: none; }
.s-li { flex: none; width: 72vw; max-width: 300px; scroll-snap-align: start; }
@media (min-width: 760px) { .s-li { width: 260px; } }
.s-item { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 12px; border-radius: 18px; }
.s-media { position: relative; overflow: hidden; border-radius: 18px; aspect-ratio: 4 / 5; background: var(--bg-2); border: 1px solid var(--line); }
.s-media .s-img { transition: transform 600ms var(--out); }
.s-media .kind { position: absolute; left: 14px; top: 14px; padding: 7px 10px; border-radius: 8px; background: rgba(5, 6, 15, .7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (hover: hover) { .s-item:hover .s-img { transform: scale(1.04); } }
.s-title { font: 700 17px/1.3 var(--f-display); letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.s-date { font: 600 13px/1 var(--f-body); color: var(--muted); margin-top: -4px; }
.s-item.past .s-media { filter: grayscale(.85) brightness(.7); }
.past-tag { margin-left: 8px; color: var(--muted); }
/* Lenta oxiri — botga havola (karta emas: chiziqli ramka, belgilar, matn pastda) */
.s-end-a { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; aspect-ratio: 4 / 5; padding: 22px; border-radius: 18px; border: 1px dashed rgba(255, 255, 255, .14);
  background: radial-gradient(90% 70% at 0% 100%, rgba(61, 139, 255, .14), transparent 70%); transition: border-color 220ms var(--out); }
.s-end-g { position: absolute; left: 22px; top: 22px; display: flex; gap: 10px; }
.s-end-g svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.s-end-arrow { position: absolute; right: 16px; top: 14px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); font: 700 18px/1 var(--f-body); color: var(--ink-2); transition: transform 220ms var(--out), color 220ms var(--out), border-color 220ms var(--out); }
.s-end-t { font: 700 20px/1.2 var(--f-display); letter-spacing: -.01em; color: var(--ink); }
.s-end-s { font: 600 14px/1.45 var(--f-body); color: var(--ink-2); overflow-wrap: anywhere; }
@media (hover: hover) { .s-end-a:hover { border-color: rgba(61, 139, 255, .55); } .s-end-a:hover .s-end-arrow { transform: translate(2px, -2px); color: var(--ink); border-color: rgba(61, 139, 255, .55); } }

/* Tafsilot varag'i */
.sheet { width: min(640px, calc(100% - 24px)); max-height: min(88dvh, 900px); padding: 0; border: 1px solid rgba(255, 255, 255, .1); border-radius: 24px; background: #0B0D1F; color: var(--ink); overflow: hidden; }
.sheet::backdrop { background: rgba(3, 4, 10, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sheet[open] { animation: sheetIn 320ms var(--out); }
.sheet[open]::backdrop { animation: fadein 240ms ease; }
@keyframes sheetIn { from { opacity: 0; transform: translateY(24px) scale(.97); } }
@media (max-width: 600px) { .sheet { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 24px 24px 0 0; max-height: 92dvh; } @keyframes sheetIn { from { transform: translateY(40px); opacity: 0; } } }
.sheet-in { max-height: inherit; overflow-y: auto; overscroll-behavior: contain; }
.sheet-media { position: relative; aspect-ratio: 16 / 10; background: var(--bg-2); }
.sheet-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, #0B0D1F 0%, rgba(11, 13, 31, 0) 34%); }
.sheet-x { position: absolute; z-index: 3; right: 12px; top: 12px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(5, 6, 15, .66); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform 200ms var(--out); }
.sheet-x:active { transform: scale(.95); }
.sheet-x svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.sheet-body { padding: 4px clamp(20px, 4vw, 32px) clamp(24px, 4vw, 32px); display: flex; flex-direction: column; gap: 14px; position: relative; }
.sheet-body h3 { font: 700 clamp(1.5rem, 4vw, 2.2rem)/1.1 var(--f-display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.sheet-text { white-space: pre-line; color: var(--ink-2); font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.sheet-body .btn { align-self: flex-start; margin-top: 6px; }

/* ---------- HOZIR KLUBDA ---------- */
.lobby-sum { margin-top: 14px; font: 600 15px/1.5 var(--f-body); color: var(--ink-2); min-height: 22px; }
.rows { margin-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--line); }
.row { border-bottom: 1px solid var(--line); }
.row-head { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: 'orb name covers' 'orb st covers'; align-items: center; column-gap: 14px; row-gap: 4px; padding: 22px 0; text-align: left; border-radius: 0; }
@media (min-width: 760px) { .row-head { grid-template-columns: 44px minmax(0, 1fr) auto minmax(150px, auto); grid-template-areas: 'orb name covers st'; column-gap: 24px; } }
@media (hover: hover) { .row-head:hover .r-name { color: #fff; } .row-head:hover .chev { opacity: 1; } }
.orb { grid-area: orb; position: relative; display: block; width: 44px; height: 44px; border-radius: 50%; }
.orb::before, .orb::after { content: ''; position: absolute; border-radius: 50%; }
.o-free::before { inset: 17px; background: var(--free); box-shadow: 0 0 14px rgba(0, 208, 106, .7); }
.o-free::after { inset: 6px; border: 1.5px solid rgba(0, 208, 106, .5); box-shadow: 0 0 18px rgba(0, 208, 106, .35); animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(.86); opacity: .5; } 50% { transform: scale(1.04); opacity: 1; } }
.o-busy { background: conic-gradient(from 0deg, var(--busy) calc(var(--left, 1) * 360deg), rgba(255, 255, 255, .08) 0); -webkit-mask: radial-gradient(circle, transparent 17px, #000 17.5px); mask: radial-gradient(circle, transparent 17px, #000 17.5px); }
.o-busy-wrap::after, .o-open-wrap::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--busy); box-shadow: 0 0 10px rgba(255, 59, 92, .7); }
.o-open { background: conic-gradient(from 0deg, rgba(255, 59, 92, 0) 0deg, var(--busy) 300deg, rgba(255, 59, 92, 0) 300.5deg); -webkit-mask: radial-gradient(circle, transparent 17px, #000 17.5px); mask: radial-gradient(circle, transparent 17px, #000 17.5px); animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.o-muted::before { inset: 4px; border: 3px solid var(--muted); opacity: .8; }
.o-muted::after { inset: 18px; background: var(--muted); }
.o-off::before { inset: 4px; border: 2px dashed var(--off); }
.orb-wrap { grid-area: orb; position: relative; display: block; width: 44px; height: 44px; }
.r-main { grid-area: name; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.r-name { display: flex; align-items: center; gap: 10px; min-width: 0; font: 500 clamp(1.1rem, 2.4vw, 1.6rem)/1.15 var(--f-display); color: var(--ink); transition: color 200ms var(--out); }
.r-name b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vip { flex: none; padding: 4px 6px 3px; border: 1px solid var(--accent); border-radius: 6px; font: 800 10px/1 var(--f-body); letter-spacing: .2em; margin-right: -.2em; color: var(--accent); }
.vip { margin-right: 0; }
.vip.t-m { display: none; }
@media (max-width: 759px) {
  .r-name .vip.t-d { display: none; }
  .r-meta .vip.t-m { display: inline-block; margin-right: 8px; padding: 3px 5px 2px; font-size: 9px; vertical-align: 1px; }
}
.r-meta { font: 600 13px/1.3 var(--f-body); color: var(--muted); }
.r-st { grid-area: st; font: 700 14px/1.3 var(--f-body); color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
@media (min-width: 760px) { .r-st { justify-content: flex-end; text-align: right; font-size: 15px; } }
.r-st.free { color: var(--free); } .r-st.busy { color: var(--ink); } .r-st.off { color: var(--muted); }
.chev { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .7; transition: transform 320ms var(--out), opacity 200ms; }
.row.open .chev { transform: rotate(180deg); }
/* Kenglik qat'iy (3 muqova + «+N»): qatorlar orasida muqovalar bir chiziqda boshlanadi */
.stack { grid-area: covers; display: flex; align-items: center; padding-left: 8px; width: 108px; }
@media (min-width: 760px) { .stack { padding-left: 12px; width: 124px; } }
.stack .cv { width: 34px; height: 51px; border-radius: 6px; margin-left: -12px; box-shadow: 0 6px 16px rgba(0, 0, 0, .5), 0 0 0 1.5px #05060F; }
.stack .cv:nth-child(1) { transform: rotate(-4deg); } .stack .cv:nth-child(3) { transform: rotate(4deg); }
.stack .cv .cv-ini { left: 4px; font-size: 9px; letter-spacing: 0; } .stack .cv .cv-name { display: none; }
.stack .rest { margin-left: 8px; font: 700 12px/1 var(--f-body); color: var(--muted); min-width: 24px; }
.row-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--out); }
.row.open .row-more { grid-template-rows: 1fr; }
.row-more > div { overflow: hidden; min-height: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 24px 58px; }
@media (max-width: 759px) { .chips { padding-left: 0; } }
.chip { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font: 600 13px/1.25 var(--f-body); color: var(--ink-2); max-width: 100%; }
.chip .cv { width: 26px; height: 39px; border-radius: 5px; flex: none; }
.chip .cv .cv-ini { font-size: 9px; } .chip .cv .cv-name, .chip .cv .cv-g { display: none; }
.chip span { overflow: hidden; text-overflow: ellipsis; }
.sk-row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; padding: 22px 0; }
.sk-orb { width: 44px; height: 44px; border-radius: 50%; }
.sk-line { height: 18px; width: 60%; }
.sk-st { width: 90px; height: 14px; }
.lobby-err { padding: 22px 0; color: var(--muted); font-weight: 600; }

/* ---------- Muqova plitkasi (rasm → tayyor muqova → gradient + bosh harflar; buzilgan rasm hech qachon) ---------- */
.cv { position: relative; overflow: hidden; flex: none; aspect-ratio: 2 / 3; border-radius: 12px; background: linear-gradient(160deg, color-mix(in srgb, var(--cc) 30%, #0B0D1F) 0%, #0B0D1F 72%); isolation: isolate; }
.cv-g { position: absolute; right: -18%; top: -8%; width: 86%; height: auto; aspect-ratio: 1; fill: none; stroke: var(--cc); stroke-width: 2.4; opacity: .28; stroke-linejoin: round; stroke-linecap: round; }
.cv-ini { position: absolute; left: 10%; top: 38%; font: 700 30px/1 var(--f-display); letter-spacing: .02em; color: var(--ink); }
.cv-name { position: absolute; left: 10%; right: 10%; bottom: 9%; font: 800 10px/1.25 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }

/* ---------- O'YINLAR — kinetik devor ---------- */
/* Pastki chekinish kichik: devorning o'z pastki padding'i (qiyalik uchun) bor */
.games { overflow: hidden; padding-bottom: clamp(8px, 2vw, 32px); }
.games-head { display: flex; flex-direction: column; gap: 8px; }
.big-num { display: flex; align-items: baseline; font: 700 clamp(3.5rem, 10vw, 8rem)/.9 var(--f-display); letter-spacing: -.03em; color: var(--ink); }
.big-num .plus { color: var(--square); margin-left: .04em; }
.games .sec-h { max-width: 14ch; }
/* Balandlik — qatorlarning o'zidan (uchala qator to'liq ko'rinadi); padding — qiyalik (rotateZ) va perspektivadagi kattalashish uchun joy.
   Niqob: chap-o'ng va tepa-past chetlari yumshoq so'nadi (qattiq kesim yo'q) */
.wall { --cw: 112px; --gap: 14px; position: relative; z-index: 2; margin-top: clamp(8px, 2vw, 24px); padding-block: calc(var(--cw) * .42) calc(var(--cw) * .62);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 88%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 88%, transparent); mask-composite: intersect; }
@media (min-width: 760px) { .wall { --cw: 168px; } }
.wall-tilt { position: relative; margin-inline: -12%; display: flex; flex-direction: column; gap: var(--gap); transform: perspective(1200px) rotateX(18deg) rotateZ(-6deg); transform-origin: 50% 40%; }
.wall-row { overflow: visible; padding: 10px 0; }
.wall-track { display: flex; gap: var(--gap); width: max-content; animation: wallL 38s linear infinite; will-change: transform; }
.wall-row:nth-child(2) .wall-track { animation: wallR 46s linear infinite; }
.wall-row:nth-child(3) .wall-track { animation: wallL 42s linear infinite; }
@keyframes wallL { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes wallR { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
.wall-row:hover .wall-track { animation-play-state: paused; }
.wall.off .wall-track { animation-play-state: paused; }
.wall .cv { width: var(--cw); box-shadow: 0 18px 40px rgba(0, 0, 0, .55); transition: transform 240ms var(--out); }
.wall .cv .cv-ini { font-size: calc(var(--cw) * .2); }
.wall .cv-tip { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 2; padding: 7px 9px; border-radius: 8px; background: rgba(5, 6, 15, .82); font: 700 11px/1.25 var(--f-body); color: var(--ink); opacity: 0; transform: translateY(6px); transition: opacity 200ms var(--out), transform 200ms var(--out); pointer-events: none; }
@media (hover: hover) { .wall .cv:hover { transform: translateY(-8px) scale(1.04); } .wall .cv:hover .cv-tip { opacity: 1; transform: none; } .wall .cv .cv-name { transition: opacity 200ms var(--out); } .wall .cv:hover .cv-name { opacity: 0; } }

/* ---------- NARXLAR ---------- */
.prices .sec-h { margin-bottom: clamp(28px, 4vw, 56px); }
.price-grid { display: grid; gap: clamp(36px, 5vw, 72px); }
@media (min-width: 960px) { .price-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; } }
.price-big { font: 700 clamp(3.5rem, 10vw, 8rem)/.9 var(--f-display); letter-spacing: -.03em; white-space: nowrap; }
.price-unit { margin-top: 14px; font: 600 16px/1.3 var(--f-body); color: var(--muted); }
/* VIP va PS3 — bir qatorda (sig'masa — ostma-ost) */
.price-alt { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 18px 44px; }
.price-alt [hidden] { display: none; }
.price-vip { display: flex; align-items: center; gap: 14px; font: 700 clamp(1.4rem, 3vw, 2rem)/1 var(--f-display); color: var(--ink); white-space: nowrap; }
.price-vip .dash { color: var(--muted); font-weight: 500; }
.vip-tag { padding: 6px 8px 5px; border: 1px solid var(--accent); border-radius: 8px; font: 800 12px/1 var(--f-body); letter-spacing: .2em; color: var(--accent); }
/* VIP / PS3 belgilari bir xil kenglikda — narxlar bir chiziqdan boshlanadi (harf oralig'i o'ngda qoldirgan joy chapda ham) */
.price-alt .vip-tag { min-width: 52px; padding-left: calc(8px + .2em); text-align: center; }
.pk-head { display: grid; grid-template-columns: minmax(0, 1fr) 86px 86px; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font: 700 11px/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.pk-head span:not(:first-child) { text-align: right; }
.pk-ps3 { display: none; }
/* PS3 ustuni — klubda PS3 kabina bo'lsa */
.has-ps3 .pk-ps3 { display: block; }
.has-ps3 .pk-head, .has-ps3 .pkgs li { grid-template-columns: minmax(0, 1fr) 84px 84px 84px; }
.pkgs li { display: grid; grid-template-columns: minmax(0, 1fr) 86px 86px; gap: 12px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); }
.pk-name { font: 600 17px/1.25 var(--f-body); color: var(--ink); }
.pk-name small { display: block; margin-top: 4px; font: 600 13px/1 var(--f-body); color: var(--muted); }
.pk-p { text-align: right; font: 700 17px/1 var(--f-body); color: var(--ink); white-space: nowrap; }
.pk-p.v { color: var(--ink-2); }
.note { margin-top: 18px; display: flex; align-items: center; gap: 10px; font: 600 15px/1.45 var(--f-body); color: var(--ink-2); }
.note::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--tri); box-shadow: 0 0 10px rgba(0, 208, 106, .6); }
.zaklad::before { background: var(--accent); box-shadow: 0 0 10px rgba(61, 139, 255, .6); }
@media (max-width: 420px) {
  .pk-head, .pkgs li { grid-template-columns: minmax(0, 1fr) 72px 72px; gap: 8px; } .pk-name, .pk-p { font-size: 15px; }
  .has-ps3 .pk-head, .has-ps3 .pkgs li { grid-template-columns: minmax(0, 1fr) 64px 64px 64px; }
  .has-ps3 .pk-head { font-size: 10px; letter-spacing: .1em; }
}

.ladder-wrap { margin-top: clamp(64px, 9vw, 120px); }
.ladder-h { font: 700 clamp(1.4rem, 3.2vw, 2.4rem)/1.15 var(--f-display); letter-spacing: -.01em; max-width: 20ch; }
.ladder { margin-top: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: end; }
.lv { --rise: 22px; position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px 12px 0; min-height: calc(120px + var(--k) * var(--rise)); border-top: 2px solid var(--lc); background: linear-gradient(to bottom, color-mix(in srgb, var(--lc) 10%, transparent), transparent 80%); border-radius: 2px 2px 0 0; }
@media (min-width: 760px) { .lv { --rise: 44px; padding: 24px 22px 0; gap: 10px; } }
.lv svg { width: 28px; height: 28px; fill: none; stroke: var(--lc); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--lc) 60%, transparent)); }
.lv b { font: 700 clamp(14px, 1.8vw, 20px)/1.15 var(--f-display); color: var(--ink); overflow-wrap: anywhere; }
.lv small { font: 600 13px/1.3 var(--f-body); color: var(--muted); }
.lv .perk { font: 700 14px/1.2 var(--f-body); color: var(--lc); }
/* Telefon: zinapoya tik — pastdan (yangi) yuqoriga (legenda), har pog'ona o'ngga suriladi */
@media (max-width: 559px) {
  .ladder { display: flex; flex-direction: column-reverse; gap: 8px; }
  .lv { min-height: 0; margin-left: calc(var(--k) * 9%); flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 14px 16px;
    border-top: 0; border-left: 2px solid var(--lc); border-radius: 0 12px 12px 0; background: linear-gradient(to right, color-mix(in srgb, var(--lc) 12%, transparent), transparent 85%); }
  .lv svg { width: 24px; height: 24px; }
  .lv b { font-size: 15px; }
  .lv small { flex: 1 1 auto; font-size: 13px; }
  .lv .perk { margin-left: auto; font-size: 14px; }
}
.c-tri { --lc: var(--tri); color: var(--tri); } .c-circle { --lc: var(--circle); color: var(--circle); } .c-cross { --lc: var(--cross); color: var(--cross); } .c-square { --lc: var(--square); color: var(--square); }

/* ---------- BRON 3 QADAMDA ---------- */
main > section.book { padding-top: clamp(40px, 5vw, 72px); } /* «Narxlar» davomi — orada katta bo'shliq qolmasin */
.book .sec-h { margin-bottom: clamp(32px, 5vw, 64px); }
.steps { display: flex; flex-direction: column; gap: 28px; counter-reset: s; }
@media (min-width: 960px) { .steps { flex-direction: row; gap: 40px; } .step { flex: 1; } }
.step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; align-items: start; align-content: start; }
.sg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 10px currentColor); grid-row: span 2; }
.step-n { font: 500 12px/1 var(--f-display); letter-spacing: .3em; color: var(--muted); padding-top: 4px; }
.step p { margin-top: 10px; font: 600 clamp(1.05rem, 1.8vw, 1.3rem)/1.35 var(--f-body); color: var(--ink); overflow-wrap: anywhere; }
@media (min-width: 960px) { .step::after { content: ''; position: absolute; left: 62px; right: -28px; top: 20px; height: 1px; background: linear-gradient(to right, var(--line), transparent); } .step:last-child::after { display: none; } .step-n { padding-left: 0; } }
.book .btn-xl { margin-top: clamp(40px, 6vw, 64px); }
@media (max-width: 420px) { .book .btn-xl { width: 100%; } }

/* ---------- MANZIL ---------- */
.loc-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .loc-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.loc-label { font: 700 12px/1 var(--f-body); letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
.city { margin-top: 18px; font: 700 clamp(3rem, 9vw, 7rem)/.95 var(--f-display); letter-spacing: -.03em; }
.street { margin-top: 16px; font: 600 14px/1.45 var(--f-body); color: var(--muted); max-width: 40ch; }
.hours { margin-top: 26px; font: 600 18px/1.3 var(--f-body); color: var(--ink-2); }
.phone { display: inline-block; margin-top: 12px; font: 700 22px/1.2 var(--f-body); color: var(--ink); padding: 10px 0; letter-spacing: .01em; transition: color 200ms var(--out); }
.phone:hover { color: var(--accent); }
.map-btns { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 420px) { .map-btns .btn { flex: 1 1 140px; padding-inline: 16px; } }
.radar { position: relative; aspect-ratio: 1; width: 100%; max-width: 520px; justify-self: center; border-radius: 28px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(circle at 50% 50%, rgba(255, 59, 92, .08), transparent 60%), #070816; }
.radar-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 40px 40px; background-position: center center; }
.radar .ring { position: absolute; left: 50%; top: 50%; width: 80%; aspect-ratio: 1; margin: -40% 0 0 -40%; border-radius: 50%; border: 1.5px solid rgba(255, 95, 210, .55); opacity: 0; animation: ring 7.2s cubic-bezier(.2, .6, .3, 1) infinite; }
.radar .ring:nth-of-type(2) { animation-delay: 2.4s; } .radar .ring:nth-of-type(3) { animation-delay: 4.8s; }
@keyframes ring { 0% { transform: scale(.08); opacity: .9; } 70% { opacity: .25; } 100% { transform: scale(1); opacity: 0; } }
.radar .sweep { position: absolute; inset: 10%; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255, 95, 210, .16), transparent 70deg); animation: spin 7s linear infinite; }
.radar .pin { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; fill: none; stroke: var(--square); stroke-width: 2.6; filter: drop-shadow(0 0 12px rgba(255, 95, 210, .9)); }
.coords { position: absolute; left: 18px; bottom: 16px; font: 600 12px/1 var(--f-body); letter-spacing: .08em; color: var(--muted); }

/* ---------- Pastki qism ---------- */
.foot { position: relative; padding: clamp(56px, 8vw, 96px) 0 calc(36px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); overflow: hidden; }
.foot-in { display: flex; flex-direction: column; gap: 28px; }
.foot-wm { font: 700 clamp(4rem, 18vw, 14rem)/.85 var(--f-display); letter-spacing: .18em; margin-right: -.18em; color: rgba(243, 244, 255, .06); user-select: none; }
.foot-row { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; font: 600 14px/1.4 var(--f-body); color: var(--muted); }
.foot-row a { color: var(--ink-2); padding: 12px 0; transition: color 200ms var(--out); }
@media (max-width: 559px) { .foot-row { flex-direction: column; align-items: flex-start; gap: 0; } .foot-row span { padding: 12px 0; } }
.foot-row a:hover { color: var(--ink); }

/* ---------- Harakatni kamaytirish ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .wall { height: auto; padding-block: 0; -webkit-mask-image: none; mask-image: none; perspective: none; }
  .wall-tilt { position: static; margin-inline: 0; transform: none; }
  .wall-row { overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--gut); }
  .wall-track { animation: none !important; transform: none !important; }
  .wall-track [data-dup] { display: none; }
  .wall .cv { scroll-snap-align: start; }
  .o-open { animation: none; }
}
.rm .wall-track [data-dup] { display: none; }
/* Hero aylantirilib yozuvlar so'ngach — ular bosilmaydi */
.ui-gone .hero-top, .ui-gone .hero-sub { pointer-events: none; }