/* ══════════════════════════════════════════════════════════════
   MOBILE POLISH LAYER — v1
   Bu fayl style.css'dan KEYIN yuklanadi va faqat QO'SHIMCHA
   (additive) tuzatishlar kiritadi — mavjud sahifa/o'yin
   funksionalligiga, ranglariga yoki joylashuviga TEGINMAYDI.
   Maqsad: barmoq bilan bosish qulayligi, gorizontal scroll
   yo'qligi, silliq animatsiyalar va zamonaviy hamburger menyu.
   ══════════════════════════════════════════════════════════════ */

/* 1) XAVFSIZLIK QATLAMI — gorizontal scroll hech qachon paydo
   bo'lmasin, rasm/video hech qachon ekrandan tashqariga chiqmasin */
*, *::before, *::after{ box-sizing:border-box; }
html, body{ max-width:100%; overflow-x:hidden; }
img, video, svg, canvas{ max-width:100%; height:auto; }

/* 2) BARMOQ BILAN BOSISH QULAYLIGI — mobil ekranda barcha
   tugma/input/link kamida 44px balandlikda bo'lsin (Apple/Google
   tavsiyasi). Faqat mobil kenglikda, desktop ko'rinishini
   o'zgartirmaydi. */
@media(max-width:768px){
  button, .nav-link, .bt-item, a.hero-stat,
  input[type="text"], input[type="tel"], input[type="password"],
  input[type="number"], input[type="email"], select, textarea{
    min-height:44px;
  }
  .nav-hamburger{ min-width:44px; min-height:44px; }
  .npd-field input{ min-height:40px; }
}

/* 3) YENGIL TEGINISH FIDBEKI — faqat teginish qurilmalarida
   (sichqonchali kompyuterda hover bilan chalkashmasligi uchun) */
@media(hover:none) and (pointer:coarse){
  .mode-card:active, .fj-card:active, .why-card:active,
  .pt-card:active, .bt-item:active, button:active,
  .btn-hero-primary:active, .btn-hero-ghost:active{
    transform:scale(0.97);
    transition:transform 0.12s ease;
  }
}
@media(prefers-reduced-motion:reduce){
  @media(hover:none) and (pointer:coarse){
    .mode-card:active, .fj-card:active, .why-card:active,
    .pt-card:active, .bt-item:active, button:active,
    .btn-hero-primary:active, .btn-hero-ghost:active{
      transform:none;
    }
  }
}

/* 4) ZAMONAVIY HAMBURGER IKONKASI — eski "☰" matn belgisi o'rniga
   3 ta chiziqdan iborat animatsiyali ikonka, ochilganda "✕" ga
   aylanadi. HTML/JS'da .nav-hamburger ichiga 3 ta <span class="hb-bar">
   qo'shilgan va JS ochiq holatda .is-open klassini qo'shadi (pastga
   qarang — mavjud toggleNavMenu() ga bitta qatordan qo'shildi). */
.nav-hamburger{
  display:none;
  position:relative;
  width:44px; height:44px;
  padding:0; background:#f1f5f9; border:1px solid #e2e8f0;
  border-radius:10px; cursor:pointer;
  transition:background 0.2s;
}
.nav-hamburger:hover{ background:#e2e8f0; }
.nav-hamburger .hb-bar{
  position:absolute; left:50%; top:50%;
  width:20px; height:2px; border-radius:2px;
  background:#475569;
  transform:translate(-50%,-50%);
  transition:transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}
.nav-hamburger .hb-bar:nth-child(1){ top:calc(50% - 6px); }
.nav-hamburger .hb-bar:nth-child(2){ top:50%; }
.nav-hamburger .hb-bar:nth-child(3){ top:calc(50% + 6px); }
.nav-hamburger.is-open .hb-bar:nth-child(1){
  top:50%; transform:translate(-50%,-50%) rotate(45deg);
}
.nav-hamburger.is-open .hb-bar:nth-child(2){ opacity:0; }
.nav-hamburger.is-open .hb-bar:nth-child(3){
  top:50%; transform:translate(-50%,-50%) rotate(-45deg);
}
@media(max-width:900px){ .nav-hamburger{ display:block; } }

/* 5) MOBIL SHEET MENYUSINING SILLIQROQ ANIMATSIYASI (mavjud
   btSheetUp animatsiyasini biroz "spring" qilib beradi, funksional
   xatti-harakatni o'zgartirmaydi) */
@media(max-width:900px){
  .navbar-links.nav-open{
    animation:btSheetUpPolished 0.28s cubic-bezier(0.22,1,0.36,1);
  }
}
@keyframes btSheetUpPolished{
  from{ transform:translateY(100%); opacity:0.6; }
  to{ transform:translateY(0); opacity:1; }
}

/* 6) MODE-CARD / FJ-CARD KABI KARTALARNI YANGI EKRANLARDA
   (masalan katta telefon/kichik planshet) yanada tekis qilib
   ko'rsatish uchun qo'shimcha breakpoint — mavjud grid'ni
   buzmaydi, faqat oraliq nuqtani silliqlashtiradi */
@media(min-width:501px) and (max-width:640px){
  .modes-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
}

/* 7) HAR QANDAY QATTIQ KENGLIKDAGI ELEMENT KICHIK EKRANDA
   sig'may qolsa, xavfsizlik uchun 100% ga tushiriladi (faqat
   inline-style bilan berilgan qattiq width'larga taalluqli emas —
   bu yerda faqat umumiy konteynerlar uchun) */
@media(max-width:480px){
  .section-inner, .hero-inner, .modes-grid, .why-section,
  .tariff-section{ padding-left:16px; padding-right:16px; }
}

/* 8) EKRAN / YAPONCHA / XITOYCHA (va Ustun1/Ustun2) boshlang'ich
   "hero" ekrani — logotip va BOSHLASH tugmasi. Asosiy style.css'da
   ≤420px'da .ek-hero{min-height:auto} qilib qo'yilgani sabab, logo
   va tugma telefonda ekran tepasiga "yopishib" qolib, pastda katta
   bo'sh joy qolib ketayotgan edi. min-height'ni qaytarib berish
   orqali .ek-hero o'zining ichidagi justify-content:center xossasi
   bilan logo+tugmani ekran balandligining o'rtasida ushlab turadi. */
@media(max-width:420px){
  .ek-hero{ min-height:clamp(480px,84vh,640px) !important; }
}

/* ══════════════════════════════════════════════════════════════
   9) EKRAN / YAPONCHA / XITOYCHA — HEADER PANELINING TELEFONDA
   TO'LIQ RESPONSIV BO'LISHI (xavfsizlik qatlami)
   ══════════════════════════════════════════════════════════════
   Header UCHTA mustaqil "fixed" blokdan iborat: eng chapda global
   "← Orqaga" (.global-home-btn), undan keyin "⚙ Sozlash"/"🎨 Fon"/
   "👁 Yashirish" tugmalari (.ek-hero-settings-corner), eng o'ngda
   "🔔/🗣/⏸/▶" (.pp-corner). Mavjud tugmalar soni, ikonkasi va
   funksiyasi BU YERDA O'ZGARTIRILMAYDI — faqat ular telefon
   ekranining 320px'dan boshlab har qanday kengligida bir-birining
   ustiga chiqmasdan / bir-biriga tirab-yopishib qolmasdan sig'ishi
   uchun o'lcham/joylashuv qo'shimcha (additive) tarzda
   moslashtiriladi. Ekran/Yaponcha/Xitoycha sahifalarida tugmalar
   soni/ikonkasi farq qilishi mumkin bo'lgani uchun qattiq son
   emas, balki mavjud ".btn-back"/".mb-fon-btn"/".pp-btn"/
   ".pp-audio-toggle" elementlarining o'zi nishonlanadi — shu
   bilan universal ishlaydi.
   MUHIM: ".pp-audio-toggle" (🔔 Signal ovozi / 🗣 Sonni o'qish)
   ilgari shu qoidada butunlay unutilgan edi — natijada tor
   ekranlarda faqat ".pp-btn" (⏸/▶) kichrayardi-yu, ".pp-audio-
   toggle" o'z bazaviy o'lchamida qolib ketardi va chap/o'ng
   guruhlar orasidagi masofa yo'qolib, tugmalar bir-biriga
   tirashib/ezilib (oval bo'lib) ko'rinardi. Endi ikkalasi ham
   birga, bir xil nisbatda kichrayadi. */
#pageEkran .global-home-btn,
#pageXisobcha .global-home-btn,
#pageYaponcha .global-home-btn,
#pageEkran .ek-hero-settings-corner,
#pageXisobcha .ek-hero-settings-corner,
#pageYaponcha .ek-hero-settings-corner{
  box-sizing:border-box;
  max-width:calc(100vw - 12px);
  overflow:visible;
}
#pageEkran .pp-corner,
#pageXisobcha .pp-corner,
#pageYaponcha .pp-corner{
  box-sizing:border-box;
}
#pageEkran .quick-settings-drop,
#pageXisobcha .quick-settings-drop,
#pageYaponcha .quick-settings-drop{
  box-sizing:border-box;
  width:min(calc(100vw - 24px), 340px);
  max-width:calc(100vw - 24px);
}

/* 430px va undan tor ekranlar (320/360/375/390/412/430 kabi) —
   ← Orqaga, ⚙/🎨/👁 va 🔔/🗣/⏸/▶ tugmalari bosqichma-bosqich
   kichrayadi, shunda ular orasidagi masofa hech qachon yo'qolmaydi
   va hech biri bir-biriga tirab qolmaydi. */
@media(max-width:430px){
  #pageEkran .global-home-btn,
  #pageXisobcha .global-home-btn,
  #pageYaponcha .global-home-btn{
    width:clamp(32px,10vw,44px) !important;
    height:clamp(32px,10vw,44px) !important;
    left:8px !important;
  }
  #pageEkran .ek-hero-settings-corner,
  #pageXisobcha .ek-hero-settings-corner,
  #pageYaponcha .ek-hero-settings-corner{
    /* Chapdagi global "← Orqaga" tugmasi shu tierda left:8px va
       width:clamp(32px,10vw,44px) bo'lgani uchun, ⚙ Sozlash panelining
       "left"i AYNAN shu formuladan hisoblanadi (8px + tugma kengligi +
       10px bo'shliq) — shunda ikkalasi hech qanday ekran kengligida
       (320–430px) bir-biriga tegib/tirab qolmaydi, orada doim ko'zga
       tashlanadigan bo'shliq qoladi. */
    left:calc(clamp(32px,10vw,44px) + 18px);
    gap:clamp(4px,1.6vw,8px);
  }
  #pageEkran .ek-hero-settings-corner .btn-back,
  #pageXisobcha .ek-hero-settings-corner .btn-back,
  #pageYaponcha .ek-hero-settings-corner .btn-back,
  #pageEkran .ek-hero-settings-corner .mb-fon-btn,
  #pageXisobcha .ek-hero-settings-corner .mb-fon-btn,
  #pageYaponcha .ek-hero-settings-corner .mb-fon-btn{
    width:clamp(30px,9vw,44px) !important;
    height:clamp(30px,9vw,44px) !important;
    flex-shrink:0;
  }
  #pageEkran .pp-corner,
  #pageXisobcha .pp-corner,
  #pageYaponcha .pp-corner{
    right:clamp(6px,2vw,10px);
    gap:clamp(3px,1.2vw,6px);
  }
  #pageEkran .pp-corner .pp-btn,
  #pageXisobcha .pp-corner .pp-btn,
  #pageYaponcha .pp-corner .pp-btn{
    width:clamp(28px,8vw,36px) !important;
    height:clamp(28px,8vw,36px) !important;
    flex-shrink:0;
  }
  #pageEkran .pp-corner .pp-audio-toggle,
  #pageXisobcha .pp-corner .pp-audio-toggle,
  #pageYaponcha .pp-corner .pp-audio-toggle{
    width:clamp(24px,6.8vw,30px) !important;
    height:clamp(24px,6.8vw,30px) !important;
    flex-shrink:0;
  }
}

/* 360px va undan tor (eng kichik telefonlar, masalan 320px) —
   qo'shimcha kichrayish, shunda "← Orqaga", "⚙/🎨/👁" va
   "🔔/🗣/⏸/▶" orasida ko'zga tashlanadigan bo'shliq doim saqlanadi. */
@media(max-width:360px){
  #pageEkran .global-home-btn,
  #pageXisobcha .global-home-btn,
  #pageYaponcha .global-home-btn{
    width:34px !important;
    height:34px !important;
  }
  #pageEkran .ek-hero-settings-corner,
  #pageXisobcha .ek-hero-settings-corner,
  #pageYaponcha .ek-hero-settings-corner{
    /* Shu tierda global "← Orqaga" tugmasi left:8px, width:34px (qattiq) —
       shuning uchun ⚙ Sozlash paneli 8+34+10=52px'dan boshlanadi, doim
       10px bo'shliq bilan. */
    left:52px;
    gap:5px;
  }
  #pageEkran .ek-hero-settings-corner .btn-back,
  #pageXisobcha .ek-hero-settings-corner .btn-back,
  #pageYaponcha .ek-hero-settings-corner .btn-back,
  #pageEkran .ek-hero-settings-corner .mb-fon-btn,
  #pageXisobcha .ek-hero-settings-corner .mb-fon-btn,
  #pageYaponcha .ek-hero-settings-corner .mb-fon-btn{
    width:30px !important;
    height:30px !important;
  }
  #pageEkran .ek-hero-settings-corner .btn-back-icon,
  #pageXisobcha .ek-hero-settings-corner .btn-back-icon,
  #pageYaponcha .ek-hero-settings-corner .btn-back-icon{
    font-size:0.95rem;
  }
  #pageEkran .pp-corner,
  #pageXisobcha .pp-corner,
  #pageYaponcha .pp-corner{
    gap:3px;
  }
  #pageEkran .pp-corner .pp-btn,
  #pageXisobcha .pp-corner .pp-btn,
  #pageYaponcha .pp-corner .pp-btn{
    width:28px !important;
    height:28px !important;
  }
  #pageEkran .pp-corner .pp-audio-toggle,
  #pageXisobcha .pp-corner .pp-audio-toggle,
  #pageYaponcha .pp-corner .pp-audio-toggle{
    width:22px !important;
    height:22px !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   MEGABRAIN UX/UI V2 — POLISHED PRODUCT LAYER
   Maqsad: mavjud funksiyalarni saqlagan holda vizual ierarxiya,
   o'qish qulayligi, touch ergonomics va responsive UXni yaxshilash.
══════════════════════════════════════════════════════════════ */

:root{
  --mb-primary:#6758e8;
  --mb-primary-2:#8b5cf6;
  --mb-ink:#172033;
  --mb-muted:#687386;
  --mb-surface:#ffffff;
  --mb-soft:#f6f7fb;
  --mb-line:#e7eaf1;
  --mb-shadow:0 12px 34px rgba(25,32,56,.08);
  --mb-shadow-hover:0 20px 44px rgba(25,32,56,.13);
}

html{scroll-behavior:smooth;}
body{
  color:var(--mb-ink);
  background:
    radial-gradient(circle at 12% 6%,rgba(103,88,232,.06),transparent 28rem),
    radial-gradient(circle at 88% 12%,rgba(6,182,212,.05),transparent 24rem),
    var(--bg,#f8f7ff);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input,select,textarea{font:inherit;}
button{touch-action:manipulation;}
:focus-visible{outline:3px solid rgba(103,88,232,.35);outline-offset:3px;}

/* Header */
.top-navbar{
  position:fixed;
  top:0;
  z-index:900;
  min-height:72px;
  padding:10px clamp(16px,3vw,42px);
  background:rgba(255,255,255,.88);
  border-bottom:1px solid rgba(231,234,241,.9);
  box-shadow:0 5px 22px rgba(25,32,56,.05);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.top-navbar .logo-wrapper{display:flex;align-items:center;}
.navbar-logo{display:flex;align-items:center;}
.logo-pngg{display:block;max-height:48px;width:auto;object-fit:contain;}
.navbar-right{gap:12px;}
.navbar-links{gap:4px;}
.nav-link{
  border:1px solid transparent;
  border-radius:12px;
  padding:9px 11px;
  color:#4c5668;
  background:transparent;
  font-weight:700;
  transition:background .18s ease,color .18s ease,transform .18s ease,border-color .18s ease;
}
.nav-link:hover{
  background:#f4f5fb;
  color:var(--mb-primary);
  border-color:#e8e9f4;
  transform:translateY(-1px);
}
.nav-link.active,.nav-link[aria-current="page"]{
  color:var(--mb-primary);
  background:#f0eeff;
  border-color:#e3dfff;
}
.nav-symbol{opacity:.78;}
.nav-profile-btn{
  min-height:48px;
  border:1px solid var(--mb-line);
  background:#fff;
  border-radius:14px;
  box-shadow:0 5px 16px rgba(25,32,56,.06);
}
.global-home-btn{
  border:1px solid #e6e8f0;
  background:rgba(255,255,255,.94);
  box-shadow:0 10px 26px rgba(25,32,56,.09);
  backdrop-filter:blur(10px);
}

/* Test banner */
.site-marquee-wrap{
  min-height:34px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#fff8e7;
  border-bottom:1px solid #f5e6bd;
  color:#7a5b18;
}

/* Hero */
.hero{
  position:relative;
  overflow:hidden;
  padding:clamp(52px,7vw,96px) 0 clamp(48px,6vw,84px);
  background:
    radial-gradient(circle at 78% 42%,rgba(139,92,246,.16),transparent 27rem),
    linear-gradient(135deg,#fbfaff 0%,#f7f8ff 48%,#f4fbff 100%);
}
.hero-inner{gap:clamp(28px,6vw,86px);}
.hero-left{max-width:680px;}
.hero-badge,.section-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid #e3dfff;
  background:#f2efff;
  color:#5b4ad6;
  border-radius:999px;
  padding:7px 12px;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.02em;
}
.hero-title{
  margin-top:16px;
  font-size:clamp(3rem,6vw,5.8rem);
  line-height:.96;
  letter-spacing:-.055em;
}
.hero-title span{
  background:linear-gradient(100deg,#5b4ad6,#8b5cf6 55%,#0ea5e9);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-sub{
  max-width:640px;
  margin-top:22px;
  color:#5f6b7c;
  font-size:clamp(1rem,1.45vw,1.12rem);
  line-height:1.78;
}
.hero-btns{gap:12px;margin-top:28px;}
.btn-hero-primary,.btn-hero-ghost{
  min-height:50px;
  padding:13px 20px;
  border-radius:14px;
  font-weight:800;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.btn-hero-primary{
  box-shadow:0 10px 24px rgba(103,88,232,.22);
}
.btn-hero-primary:hover,.btn-hero-ghost:hover{
  transform:translateY(-2px);
  box-shadow:0 15px 28px rgba(25,32,56,.12);
}
.btn-hero-ghost{
  border:1px solid #dedff0;
  background:#fff;
  color:#394255;
}
.hero-stats{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}
.hero-stat{
  min-height:44px;
  padding:9px 12px;
  border:1px solid rgba(225,228,237,.95);
  border-radius:13px;
  background:rgba(255,255,255,.72);
  color:#566174;
  box-shadow:0 6px 18px rgba(25,32,56,.04);
}
.hero-stat:hover{border-color:#cfcaf7;color:#5b4ad6;background:#fff;}
.hero-right{filter:drop-shadow(0 25px 40px rgba(88,75,180,.14));}
.hero-brain-img{max-height:min(520px,48vw);}

/* Sections */
.section-inner,.rating-inner,.why-inner,.tariff-inner{
  width:min(1180px,calc(100% - 40px));
}
.modes-section,.rating-section,.why-section,.tariff-section{
  padding-top:clamp(56px,7vw,88px);
  padding-bottom:clamp(56px,7vw,88px);
}
.section-title{
  margin-top:10px;
  color:#182133;
  font-size:clamp(2rem,4vw,3rem);
  letter-spacing:-.035em;
}
.section-sub{
  max-width:720px;
  margin-top:10px;
  color:#697386;
  line-height:1.7;
}

/* Mode cards / content cards */
.modes-grid{gap:18px;}
.mode-card,.why-card,.pt-card,.hub-opt-card,.menu-card,.u1-type-card{
  border:1px solid var(--mb-line);
  background:rgba(255,255,255,.92);
  border-radius:20px;
  box-shadow:var(--mb-shadow);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.mode-card:hover,.why-card:hover,.pt-card:hover,.hub-opt-card:hover,.menu-card:hover,.u1-type-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--mb-shadow-hover);
  border-color:#d8d5f6;
}
.mode-card{padding:24px;}
.mc-icon{
  width:54px;height:54px;
  display:grid;place-items:center;
  border-radius:16px;
  background:#f1efff;
  color:#6556df;
  margin-bottom:18px;
}
.mc-name{font-size:1.2rem;font-weight:850;color:#1b2435;}
.mc-desc{color:#6b7485;line-height:1.6;margin-top:8px;}
.mc-badge{
  border:1px solid #e5e7ef;
  background:#f8f9fc;
  color:#697386;
  border-radius:999px;
  padding:6px 10px;
  font-size:.72rem;
  font-weight:800;
}
.mc-arrow{font-size:1.35rem;color:#6b5ce7;}

/* Rating / video */
.rating-list{gap:10px;}
.rating-item{
  min-height:62px;
  padding:10px 12px;
  border:1px solid #e9ebf1;
  border-radius:14px;
  background:#fff;
  transition:transform .18s ease,box-shadow .18s ease;
}
.rating-item:hover{transform:translateX(4px);box-shadow:0 8px 20px rgba(25,32,56,.07);}
.ri-score{font-weight:850;color:#5b4ad6;}
.rating-video,.yt-facade{border-radius:20px;overflow:hidden;}
.yt-facade{box-shadow:var(--mb-shadow);border:1px solid var(--mb-line);}
.yt-facade-play{
  width:62px;height:62px;
  border-radius:50%;
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}

/* Form fields and dialogs */
.tq-overlay,.auth-overlay{backdrop-filter:blur(8px);}
.tq-modal,.auth-card{
  border:1px solid rgba(231,234,241,.95);
  border-radius:24px;
  box-shadow:0 28px 80px rgba(18,24,43,.20);
}
.tq-title{letter-spacing:-.025em;}
.tq-field label,.auth-field label{color:#4d586b;font-weight:750;}
.tq-field input,.tq-field select,.tq-field textarea,
.auth-field input,.auth-field select,.auth-field textarea{
  min-height:48px;
  border:1px solid #dfe3ec;
  border-radius:12px;
  background:#fbfcfe;
  color:#1d2738;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.tq-field input:focus,.tq-field select:focus,.tq-field textarea:focus,
.auth-field input:focus,.auth-field select:focus,.auth-field textarea:focus{
  border-color:#9b91ef;
  background:#fff;
  box-shadow:0 0 0 4px rgba(103,88,232,.10);
  outline:none;
}
.tq-submit,.auth-submit{
  min-height:48px;
  border-radius:13px;
  font-weight:850;
  box-shadow:0 9px 22px rgba(103,88,232,.18);
}

/* Settings / controls */
.quick-settings-card,.quick-settings-drop{
  border:1px solid var(--mb-line);
  border-radius:16px;
  box-shadow:0 16px 38px rgba(25,32,56,.10);
}
.s-btn,.btn-start,.u1-btn,.og-btn{
  min-height:44px;
  border-radius:12px;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
.s-btn:hover,.btn-start:hover,.u1-btn:hover,.og-btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.02);
}

/* Game pages: keep controls visually consistent */
.page:not(#pageHome){
  color:var(--mb-ink);
}
.page:not(#pageHome) .btn-back,
.page:not(#pageHome) .pp-btn,
.page:not(#pageHome) .mb-fon-btn{
  border-radius:12px;
}
.page:not(#pageHome) .ek-hero{
  border-radius:0 0 28px 28px;
}

/* Mobile bottom navigation */
.bottom-tabbar{
  border-top:1px solid rgba(225,228,237,.95);
  background:rgba(255,255,255,.94);
  box-shadow:0 -12px 30px rgba(25,32,56,.08);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.bt-item{
  color:#687386;
  border-radius:13px;
  margin:5px 3px;
}
.bt-item.active,.bt-item:active{
  color:#5b4ad6;
  background:#f1efff;
}
.bt-icon{font-size:1.1rem;}
.bt-label{font-weight:800;font-size:.68rem;}

/* Responsive */
@media(max-width:900px){
  .top-navbar{min-height:64px;padding:8px 14px;}
  .logo-pngg{max-height:42px;}
  .navbar-links.nav-open{border:1px solid #e5e7ef;box-shadow:0 22px 50px rgba(25,32,56,.16);}
  .hero{padding-top:46px;}
  .hero-inner{grid-template-columns:1fr;}
  .hero-right{order:-1;display:flex;justify-content:center;}
  .hero-brain-img{max-height:300px;width:min(72vw,360px);}
  .hero-left{text-align:center;margin-inline:auto;}
  .hero-badge,.section-label{margin-inline:auto;}
  .hero-sub{margin-inline:auto;}
  .hero-btns,.hero-stats{justify-content:center;}
}
@media(max-width:600px){
  .hero{padding:30px 0 46px;}
  .hero-title{font-size:clamp(2.65rem,13vw,4rem);}
  .hero-sub{font-size:.96rem;line-height:1.62;}
  .hero-btns{display:grid;grid-template-columns:1fr;width:100%;max-width:420px;margin-inline:auto;}
  .hero-btns button{width:100%;}
  .hero-stats{display:grid;grid-template-columns:1fr;width:100%;max-width:420px;margin-inline:auto;}
  .hero-stat{width:100%;}
  .section-inner,.rating-inner,.why-inner,.tariff-inner{width:min(100% - 28px,1180px);}
  .modes-grid{grid-template-columns:1fr !important;}
  .mode-card{padding:20px;}
  .rating-inner{grid-template-columns:1fr;}
  .rating-item{min-height:58px;}
  .tq-modal,.auth-card{width:calc(100% - 24px);border-radius:20px;}
}
@media(max-width:380px){
  .top-navbar{padding-inline:10px;}
  .logo-pngg{max-width:145px;}
  .hero-title{font-size:2.55rem;}
  .section-title{font-size:1.9rem;}
  .bt-label{font-size:.62rem;}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE AUDIT — v2
   320px → 4K. Layout is fluid first, breakpoint second.
   ══════════════════════════════════════════════════════════════ */
:root{--mb-safe-x:clamp(12px,3vw,32px);--mb-content:1240px;}
body{min-width:320px;}
.container,.section-inner,.hero-inner,.rating-inner,.why-inner,.tariff-inner{max-width:var(--mb-content);margin-inline:auto;}

/* Large desktop / ultrawide */
@media(min-width:1440px){
  .hero-inner{max-width:1320px;}
  .section-inner,.rating-inner,.why-inner,.tariff-inner{max-width:1320px;}
  .hero-title{font-size:clamp(3.6rem,4.4vw,5.2rem);}
  .hero-brain-img{max-width:520px;max-height:520px;}
}
@media(min-width:1920px){
  .top-navbar{padding-inline:clamp(24px,3vw,64px);}
  .hero-inner{max-width:1500px;}
  .section-inner,.rating-inner,.why-inner,.tariff-inner{max-width:1500px;}
}

/* Laptop / tablet landscape: prevent cramped two-column hero and cards */
@media(min-width:769px) and (max-width:1100px){
  .top-navbar{padding-inline:18px;}
  .navbar-links{gap:10px;}
  .nav-link{font-size:.88rem;padding-inline:10px;}
  .hero-inner{grid-template-columns:minmax(0,1.05fr) minmax(280px,.85fr);gap:28px;padding-inline:24px;}
  .hero-title{font-size:clamp(2.9rem,5.5vw,4.2rem);}
  .hero-brain-img{width:min(42vw,390px);}
  .modes-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .why-inner{grid-template-columns:repeat(2,minmax(0,1fr));}
  .tariff-inner{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* Small tablets / large phones */
@media(min-width:601px) and (max-width:768px){
  .hero-inner{padding-inline:24px;}
  .hero-right{order:-1;}
  .hero-brain-img{width:min(58vw,390px);max-height:330px;}
  .hero-title{font-size:clamp(2.8rem,8vw,4rem);}
  .modes-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .why-inner,.tariff-inner{grid-template-columns:repeat(2,minmax(0,1fr));}
  .rating-inner{grid-template-columns:1fr 1fr;}
}

/* All phones */
@media(max-width:600px){
  html{font-size:16px;}
  .top-navbar{position:fixed;top:0;z-index:1000;}
  .hero-inner,.section-inner,.rating-inner,.why-inner,.tariff-inner{width:calc(100% - 28px);}
  .hero-left,.hero-right{min-width:0;}
  .hero-sub,.hero-badge,.section-label{max-width:100%;}
  .hero-stat{min-width:0;}
  .modes-grid,.why-inner,.tariff-inner{gap:12px;}
  .mode-card,.why-card,.pt-card,.fj-card{min-width:0;overflow:hidden;}
  .mode-card h3,.why-card h3,.pt-card h3,.fj-card h3{overflow-wrap:anywhere;}
  .section-title{overflow-wrap:anywhere;}

  /* Dialogs/sheets: never exceed viewport */
  .modal,.overlay,.auth-overlay,.tq-overlay{padding:12px;}
  .auth-card,.tq-modal{max-height:calc(100dvh - 24px);overflow:auto;}
  .quick-settings-drop{max-height:calc(100dvh - 24px);overflow:auto;}

  /* Tables and wide game panels */
  table{max-width:100%;}
  .table-wrap,.table-responsive,.schedule-table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  pre,code{overflow-wrap:anywhere;}
}

/* Narrow phones: typography, controls and safe areas */
@media(max-width:430px){
  .hero{padding-top:22px;}
  .hero-title{font-size:clamp(2.25rem,12.5vw,3.1rem);line-height:1.02;letter-spacing:-.035em;}
  .hero-sub{font-size:.91rem;line-height:1.55;}
  .hero-btns{gap:9px;}
  .hero-btns button,.btn-hero-primary,.btn-hero-ghost{min-height:48px;}
  .section-title{font-size:clamp(1.7rem,8.5vw,2.25rem);line-height:1.1;}
  .section-inner,.rating-inner,.why-inner,.tariff-inner{width:calc(100% - 24px);}
  .auth-card,.tq-modal{width:calc(100vw - 20px);}
  .bt-item{margin:4px 2px;padding-inline:2px;}
}

@media(max-width:360px){
  .hero-inner,.section-inner,.rating-inner,.why-inner,.tariff-inner{width:calc(100% - 20px);}
  .top-navbar{padding-inline:8px;}
  .logo-pngg{max-width:132px;}
  .hero-title{font-size:2.18rem;}
  .hero-sub{font-size:.87rem;}
  .section-title{font-size:1.68rem;}
  .mode-card,.why-card,.pt-card,.fj-card{padding:15px;}
  .bt-label{font-size:.58rem;}
}

/* Landscape phones: reclaim vertical space */
@media(max-height:500px) and (orientation:landscape){
  .hero{padding-block:22px 32px;}
  .hero-inner{grid-template-columns:1fr 1fr;align-items:center;}
  .hero-right{order:0;}
  .hero-brain-img{max-height:240px;width:min(42vw,280px);}
  .hero-title{font-size:clamp(2rem,6vw,3rem);}
  .ek-hero{min-height:100dvh !important;}
}

/* Notch / home-indicator safe areas */
@supports(padding:max(0px)){
  .top-navbar{padding-left:max(var(--mb-safe-x),env(safe-area-inset-left));padding-right:max(var(--mb-safe-x),env(safe-area-inset-right));}
  .bottom-tabbar{padding-bottom:max(5px,env(safe-area-inset-bottom));}
  .navbar-links.nav-open{padding-bottom:max(16px,env(safe-area-inset-bottom));}
}

/* Prevent accidental fixed-width children from breaking the viewport */
@media(max-width:768px){
  .page,[id^="page"]{max-width:100vw;overflow-x:hidden;}
  .page > *, [id^="page"] > *{max-width:100%;}
  .grid,.cards-grid,.features-grid{grid-template-columns:minmax(0,1fr);}
  .btn-group,.hero-btns{min-width:0;}
  input,select,textarea{max-width:100%;}
}


/* ══════════════════════════════════════════════════════════════
   1366×768 DESKTOP TUNING
   Maxsus keng desktop/laptop: 1366px × 768px.
   Maqsad: viewport balandligi qisqa bo'lganda header/hero,
   grid va modal bloklari siqilib ketmasin; asosiy kontent
   1440px+ layoutga o'xshash, lekin 1366px kenglikka aniq sig'sin.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) and (max-width: 1399px) and (min-height: 700px) and (max-height: 820px){
  html, body{ min-width:0; }

  /* Asosiy sahifa konteynerlari */
  .section-inner,
  .hero-inner{
    width:min(1180px, calc(100% - 64px));
    max-width:1180px;
    margin-left:auto;
    margin-right:auto;
  }

  /* Header: 1366px'da elementlar chetga yopishmasin */
  .top-navbar{
    min-height:68px;
    padding-left:28px;
    padding-right:28px;
  }
  .navbar-inner{
    width:min(1310px, 100%);
    margin-left:auto;
    margin-right:auto;
  }

  /* Hero: 768px balandlikda ortiqcha vertikal bo'shliqni kamaytirish */
  .hero{
    padding-top:34px;
    padding-bottom:42px;
  }
  .hero-inner{
    gap:36px;
    align-items:center;
  }
  .hero-left{ min-width:0; }
  .hero-right{ min-width:0; }
  .hero-title{
    font-size:clamp(40px, 4vw, 56px);
    line-height:1.04;
  }
  .hero-subtitle{
    max-width:620px;
  }

  /* Kartalar/grid: 1366px'da juda keng bo'lib ketmasin */
  .modes-grid,
  .cards-grid,
  .features-grid{
    gap:18px;
  }

  /* Modal va dropdownlar viewport balandligiga mos */
  .modal,
  .modal-overlay,
  .auth-modal,
  [role="dialog"]{
    max-height:calc(100vh - 32px);
  }

  /* Katta fixed/sticky panellar pastki kontentni bosmasin */
  .bottom-tabbar{
    max-width:100%;
  }

  /* 768px balandlikda o'yin ekranlari */
  .game-area,
  .game-container{
    max-height:calc(100vh - 92px);
  }

  /* Keng jadvallar/ustunlar 1366px viewportdan chiqmasin */
  table{
    max-width:100%;
  }
  .table-wrap,
  .table-responsive{
    max-width:100%;
    overflow-x:auto;
  }

  /* ── FORSAJ sahifasi (Ekran/Yaponcha/Xitoycha kartalari bor sahifa) ──
     1366×768 (va shunga o'xshash 700-820px balandlikdagi katta ekran)da
     butun sahifa 768px balandlikka 100% sig'ishi, pastga scroll qilish
     shart bo'lmasligi kerak. Dizayn, matn, joylashuv o'zgarmaydi — faqat
     bo'shliqlar/shriftlar/rasm o'lchami mutanosib ravishda kichraytiriladi. */
  #pageFlash .fj-wrap{padding:0 28px 18px;}
  #pageFlash .fj-topbar{padding:12px 0 4px;}
  #pageFlash .fj-hero-new{margin:8px auto 0;min-height:0;gap:22px;}
  #pageFlash .fj-hero-copy{padding:8px 10px 8px 18px;max-width:600px;}
  #pageFlash .fj-eyebrow-new{padding:6px 12px;}
  #pageFlash .fj-title-new{margin:12px 0 8px;font-size:clamp(2.4rem,4vw,3.4rem);}
  #pageFlash .fj-subtitle-new{font-size:.88rem;line-height:1.5;}
  #pageFlash .fj-trust-row{margin-top:12px;gap:8px;}
  #pageFlash .fj-trust-row span{padding:6px 10px;}
  #pageFlash .fj-hero-visual{min-height:0;}
  #pageFlash .fj-abacus-card{padding:10px 12px 12px;}
  #pageFlash .fj-abacus-img{height:130px;}
  #pageFlash .fj-section-head{margin:14px auto 12px;}
  #pageFlash .fj-section-head h2{font-size:1.32rem;margin-top:4px;}
  #pageFlash .fj-section-head>p{font-size:.76rem;}
  #pageFlash .fj-modes-new{gap:14px;}
  #pageFlash .fj-card-new{padding:15px;}
  #pageFlash .fj-icon-wrap{width:36px;height:36px;font-size:1.2rem;}
  #pageFlash .fj-card-new h3{margin:11px 0 5px;font-size:1.08rem;}
  #pageFlash .fj-card-new p{min-height:0;font-size:.78rem;line-height:1.45;}
  #pageFlash .fj-card-meta{margin-top:11px;padding-top:9px;}
  #pageFlash .fj-card-meta b{width:25px;height:25px;font-size:.85rem;}
  #pageFlash .fj-bottom-strip{margin:12px auto 0;padding:10px 16px;}
  #pageFlash .fj-tip-icon{width:32px;height:32px;}
}

/* Aynan 1366×768 viewport — piksel darajasida mayda tuning */
@media (width: 1366px) and (height: 768px){
  .section-inner,
  .hero-inner{
    width:1180px;
    max-width:calc(100% - 64px);
  }

  .hero{
    min-height:calc(100vh - 68px);
    display:flex;
    align-items:center;
  }

  .hero-inner{
    padding-top:0;
    padding-bottom:0;
  }

  /* Modal oynalarda 768px balandlikdan oshib ketishning oldini oladi */
  .modal-content,
  .auth-modal-content,
  .dialog-content{
    max-height:calc(100vh - 40px);
    overflow-y:auto;
  }
}


/* ══════════════════════════════════════════════════════════════
   BOSH SAHIFA — YUQORIDAGI ORTIQCHA BO'SH JOYNI QISQARTIRISH
   Desktop va 1366×768 uchun
══════════════════════════════════════════════════════════════ */
@media (min-width: 1100px){
  #pageHome .hero{
    padding-top: 34px !important;
    padding-bottom: 38px !important;
  }
  #pageHome .hero-inner{
    gap: 28px !important;
  }
  #pageHome .hero-badge{margin-bottom:14px !important;}
  #pageHome .hero-sub{margin-bottom:22px !important;}
  #pageHome .hero-stats{margin-top:24px !important;gap:10px !important;}
}

/* 1366×768 — birinchi ekranni ixcham tutish */
@media (min-width: 1200px) and (max-width: 1400px) and (min-height: 700px) and (max-height: 800px){
  #pageHome .site-marquee-wrap{
    padding:6px 0 !important;
  }
  #pageHome .site-marquee-text{
    font-size:.78rem !important;
  }
  #pageHome .hero{
    padding:24px 28px 28px !important;
  }
  #pageHome .hero-inner{
    max-width:1240px !important;
    gap:24px !important;
  }
  #pageHome .hero-badge{
    padding:5px 13px !important;
    font-size:.68rem !important;
    margin-bottom:10px !important;
  }
  #pageHome .hero-title{
    font-size:clamp(2rem,4vw,2.75rem) !important;
    margin-bottom:8px !important;
  }
  #pageHome .hero-sub{
    font-size:.88rem !important;
    line-height:1.48 !important;
    margin-bottom:16px !important;
  }
  #pageHome .hero-btns button{
    padding:11px 22px !important;
    font-size:.82rem !important;
  }
  #pageHome .hero-stats{
    margin-top:18px !important;
    gap:8px !important;
  }
}


/* ============================================================
   FINAL FIX — HEADER TOP GAP + LANGUAGE SELECTOR
   ============================================================ */

/* Header panel touches the very top edge; no blank strip above it. */
.top-navbar{
  top:0 !important;
  margin-top:0 !important;
}

/* Preserve the existing rounded desktop header, but remove its top offset. */
@media (min-width:1081px){
  .top-navbar{
    top:0 !important;
  }
}

/* Mobile/tablet: also remove the top gap. */
@media (max-width:1080px){
  .top-navbar{
    top:0 !important;
  }
}
@media (max-width:620px){
  .top-navbar{
    top:0 !important;
  }
}

/* Language selector */
.mb-language-wrap{
  position:relative;
  flex:0 0 auto;
  z-index:10020;
}
.mb-language-btn{
  width:46px;
  height:46px;
  padding:0 6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  border:1px solid #dbe5f5;
  border-radius:14px;
  background:#fff;
  color:#294a78;
  box-shadow:0 7px 18px rgba(37,70,130,.08);
  cursor:pointer;
  font-weight:800;
}
.mb-language-btn:hover{
  background:#f6f9ff;
  border-color:#c9d9f1;
}
.mb-language-globe{font-size:18px;line-height:1;}
.mb-language-code{font-size:10px;letter-spacing:.04em;}
.mb-language-caret{font-size:12px;line-height:1;opacity:.65;}
.mb-language-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:220px;
  max-height:min(520px,calc(100dvh - 86px));
  overflow:auto;
  padding:8px;
  display:none;
  background:rgba(255,255,255,.98);
  border:1px solid #e0e7f2;
  border-radius:16px;
  box-shadow:0 18px 45px rgba(31,55,104,.18);
  backdrop-filter:blur(18px);
}
.mb-language-wrap.is-open .mb-language-menu{display:block;}
.mb-language-title{
  padding:7px 9px 8px;
  color:#78869b;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.mb-language-menu button{
  width:100%;
  min-height:36px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:7px 9px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:#34445e;
  text-align:left;
  cursor:pointer;
  font-size:13px;
  font-weight:700;
}
.mb-language-menu button:hover{
  background:#f3f7ff;
  border-color:#dce7f7;
}
.mb-language-menu button.is-active{
  background:#edf4ff;
  border-color:#cfe0fa;
  color:#1558bd;
}
@media (max-width:1080px){
  .mb-language-btn{width:44px;height:44px;border-radius:12px;}
}
@media (max-width:620px){
  .mb-language-btn{width:42px;height:42px;border-radius:12px;}
  .mb-language-code{display:none;}
  .mb-language-menu{
    position:fixed;
    top:60px;
    right:8px;
    width:min(250px,calc(100vw - 16px));
  }
}

/* Keep the restored settings layout readable on desktop and naturally stacked on small screens. */
@media (min-width:1025px){
  .main-menu{
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  }
}
@media (max-width:700px){
  .main-menu{
    grid-template-columns:1fr;
  }
}


/* ============================================================
   FINAL HEADER FIX
   - No blank space above the main header
   - Header remains visible while page scrolls
   - Main content is kept below the fixed header
   ============================================================ */

/* Main header itself */
.top-navbar{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  margin:0 !important;
  z-index:99999 !important;
  /* GPU'ning o'z alohida qatlamiga (compositing layer) majburan
     ko'chiriladi va bu qatlam doim shu joyda saqlanadi — aks holda
     (ayniqsa backdrop-filter/blur bilan birga) ba'zi mobil brauzerlarda
     sahifa aylantirilganda header lip bir lahzaga ko'rinmay qolishi
     (repaint/"disappear" glitch) mumkin edi. */
  transform:translateZ(0) !important;
  -webkit-transform:translateZ(0) !important;
  will-change:transform !important;
  isolation:isolate !important;
}

/* Remove any wrapper/placeholder gap commonly created for the old header. */
body{
  margin-top:0 !important;
  padding-top:0 !important;
}

/* If the page used a spacer/header placeholder, collapse it. */
.top-navbar-spacer,
.header-spacer,
.navbar-spacer,
.header-placeholder{
  height:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  display:none !important;
}

/* Do not let the main content inherit an oversized top gap. */
main,
.main-content,
.page-content,
.home-page,
.home-container{
  margin-top:0;
}

/* The header is fixed, so reserve only its real height. */
@media (min-width:621px){
  main,
  .main-content,
  .page-content,
  .home-page,
  .home-container{
    padding-top:78px;
  }
}
@media (max-width:620px){
  main,
  .main-content,
  .page-content,
  .home-page,
  .home-container{
    padding-top:62px;
  }
}

/* If an existing class creates a giant first-section top padding, cancel it. */
.home-page > :first-child,
.home-container > :first-child{
  margin-top:0 !important;
}

/* Keep header compact and stable while scrolling. */
.top-navbar *{
  box-sizing:border-box;
}

/* ================================================================
   MOBILE HOME + PROFILE — FINAL RESPONSIVE FIX
   Faqat telefon ekranlari uchun. Desktop ko'rinishiga tegmaydi.
================================================================ */
@media (max-width: 640px){
  /* Bosh sahifadagi MegaBrain suzuvchi rasmi telefonda markazda ko'rinsin. */
  #pageHome .hero{
    overflow:hidden;
  }
  #pageHome .hero-inner{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    gap:18px !important;
  }
  #pageHome .hero-right{
    display:flex !important;
    order:-1 !important;
    width:100% !important;
    justify-content:center !important;
    align-items:center !important;
    margin:0 auto !important;
    padding:4px 0 0 !important;
  }
  #pageHome .hero-brain-img{
    display:block !important;
    width:min(72vw,330px) !important;
    max-width:330px !important;
    max-height:300px !important;
    height:auto !important;
    margin:0 auto !important;
    object-fit:contain !important;
  }
  #pageHome .hero-left{
    width:100% !important;
    max-width:620px !important;
    margin:0 auto !important;
  }
}

@media (max-width: 480px){
  /* Profil oynasi telefonda to'liq ko'rinsin va ekrandan chiqib ketmasin. */
  .nav-profile-dd{
    position:fixed !important;
    top:66px !important;
    right:8px !important;
    left:auto !important;
    width:min(330px, calc(100vw - 16px)) !important;
    max-width:calc(100vw - 16px) !important;
    max-height:calc(100vh - 82px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    z-index:2000 !important;
  }
  .nav-profile-wrap{position:static !important;}
  .npd-head,
  .npd-body,
  .npd-actions{
    max-width:100% !important;
  }
}

@media (max-width: 360px){
  #pageHome .hero-brain-img{
    width:min(68vw,280px) !important;
    max-height:260px !important;
  }
  .nav-profile-dd{
    right:6px !important;
    width:calc(100vw - 12px) !important;
    max-width:calc(100vw - 12px) !important;
  }
}

/* FIX59 — Mobile: vertical swipe must never trigger profile/logout buttons.
   Keep normal page scrolling, but cancel the synthetic click that mobile
   browsers can fire after a drag. */
@media (max-width: 900px){
  html, body{
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }
  .nav-profile-btn,
  .nav-profile-dd,
  .nav-profile-dd button,
  .bottom-tabbar,
  .bottom-tabbar button{
    touch-action: manipulation;
  }
}