/* ============================================================
   responsive.css  —  Non-iOS responsive design system
   
   IMPORTANT: ALL rules are scoped to html:not(.ios)
   iOS devices get ZERO overrides from this file.
   iOS uses the original style.css values which are already perfect.
   
   Android, tablets, and other devices get a scaled layout
   that matches the visual quality of iOS.
   ============================================================ */

/* ── CSS custom properties (shared, no side effects) ── */
:root {
  --tg-safe-top:      0px;
  --tg-safe-bottom:   0px;
  --tg-header-height: 50px;

  --safe-top:    max(env(safe-area-inset-top, 0px), var(--tg-safe-top, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-bottom, 0px));

  --space-xs:  clamp(4px,  1vw,  6px);
  --space-sm:  clamp(8px,  2vw,  12px);
  --space-md:  clamp(12px, 3vw,  16px);
  --space-lg:  clamp(16px, 4vw,  20px);
  --space-xl:  clamp(20px, 5vw,  28px);

  --text-xs:   clamp(9px,  2.3vw, 11px);
  --text-sm:   clamp(11px, 3vw,   13px);
  --text-md:   clamp(13px, 3.8vw, 15px);
  --text-base: clamp(14px, 4vw,   16px);
  --text-lg:   clamp(16px, 4.5vw, 18px);
  --text-xl:   clamp(20px, 5.5vw, 24px);
  --text-2xl:  clamp(28px, 8vw,   36px);

  --icon-sm:          clamp(36px, 10vw, 48px);
  --icon-md:          clamp(44px, 12vw, 56px);
  --nav-height:       clamp(68px, 18vw, 85px);
  --border-radius-sm: clamp(10px, 2.5vw, 14px);
  --border-radius-md: clamp(14px, 3.5vw, 20px);
  --border-radius-lg: clamp(18px, 5vw,  24px);

  --content-top:    calc(var(--tg-header-height, 50px) + var(--space-sm));
  --content-bottom: calc(var(--nav-height) + var(--safe-bottom) + 12px);
}

/* ============================================================
   ALL LAYOUT OVERRIDES BELOW — scoped to NON-iOS only
   iOS class is set by JS: /iPad|iPhone|iPod/.test(UA)
   So html.ios gets NONE of these rules.
   ============================================================ */

/* ── Bottom Navigation ── */
html:not(.ios) .bottom-nav-container {
  position: fixed !important;
  bottom: max(12px, env(safe-area-inset-bottom, 12px)) !important;
  left: 50% !important;
  transform: translateX(-50%) translateZ(0) !important;
  -webkit-transform: translateX(-50%) translateZ(0) !important;
  width: 95% !important;
  max-width: 500px !important;
  display: flex !important;
  align-items: center !important;
  z-index: 1000 !important;
}

html:not(.ios) .nav-item {
  font-size: clamp(9px, 2.5vw, 11px) !important;
  gap: clamp(3px, 0.8vw, 5px) !important;
}

html:not(.ios) .nav-item svg {
  width:  clamp(20px, 6vw, 26px) !important;
  height: clamp(20px, 6vw, 26px) !important;
}

html:not(.ios) .circle-segment {
  padding: clamp(8px, 2.2vw, 10px) clamp(12px, 3.5vw, 18px) !important;
}

html:not(.ios) .pill-segment {
  padding: clamp(8px, 2.2vw, 10px) clamp(14px, 4.5vw, 20px) !important;
}

html:not(.ios) .profile-segment {
  width:  clamp(56px, 15vw, 65px) !important;
  height: clamp(56px, 15vw, 65px) !important;
}

html:not(.ios) .nav-item.profile img {
  width:  clamp(50px, 13.5vw, 58px) !important;
  height: clamp(50px, 13.5vw, 58px) !important;
}

/* ── Balance Pill ── */
html:not(.ios) .balance-pill {
  position: fixed !important;
  top: calc(var(--tg-header-height, 50px) + 8px) !important;
  right: clamp(12px, 3.5vw, 16px) !important;
  z-index: 100 !important;
  padding: clamp(5px, 1.4vw, 6px) clamp(10px, 3vw, 14px) !important;
}

html:not(.ios) .balance-amount {
  font-size: clamp(12px, 3.2vw, 14px) !important;
}

html:not(.ios) .dollar-icon {
  width:  clamp(13px, 3.5vw, 16px) !important;
  height: clamp(13px, 3.5vw, 16px) !important;
}

/* ── Games Screen ── */
html:not(.ios) #games-screen {
  padding-top: 0 !important;
}

html:not(.ios) #games-menu {
  padding-top: calc(var(--tg-header-height, 50px) + var(--space-xl)) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

html:not(.ios) .banner-item {
  flex: 0 0 88% !important;
}

html:not(.ios) #games-list-section {
  padding: 0 clamp(12px, 4vw, 16px) clamp(100px, 25vw, 130px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
}

html:not(.ios) #crash-game-container,
html:not(.ios) #roulette-game-container,
html:not(.ios) #lucky-game-container {
  padding-top: calc(var(--tg-header-height, 50px) + var(--space-xl)) !important;
}

/* Crash game area height */
html:not(.ios) #crash-game-area {
  height: clamp(170px, 35vw, 220px) !important;
  min-height: clamp(170px, 35vw, 220px) !important;
  max-height: clamp(170px, 35vw, 220px) !important;
}

/* Roulette wheel */
html:not(.ios) #rl-wheel-wrap,
html:not(.ios) #rl-wc {
  width:  clamp(160px, 48vw, 200px) !important;
  height: clamp(160px, 48vw, 200px) !important;
}

/* Game list items */
html:not(.ios) #games-list-section [style*="width:56px"],
html:not(.ios) #games-list-section [style*="width: 56px"] {
  width:  clamp(44px, 13vw, 56px) !important;
  height: clamp(44px, 13vw, 56px) !important;
}

/* ── Mining Screen ── */
html:not(.ios) #mining-screen {
  padding-top:    var(--content-top) !important;
  padding-bottom: var(--content-bottom) !important;
}

/* ── RWA / Staking Screen ── */
html:not(.ios) #staking-screen {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
}

html:not(.ios) #staking-screen > div {
  padding-top:  calc(var(--tg-header-height, 50px) + var(--space-md)) !important;
  padding-left:  clamp(14px, 4vw, 20px) !important;
  padding-right: clamp(14px, 4vw, 20px) !important;
}

/* Hero banner: use vw-relative negative margins instead of -48px */
html:not(.ios) #staking-screen > div > div:first-child {
  margin-left:  calc(-1 * clamp(14px, 4vw, 20px)) !important;
  margin-right: calc(-1 * clamp(14px, 4vw, 20px)) !important;
  border-radius: clamp(16px, 4vw, 24px) !important;
}

/* Hero banner text scale */
html:not(.ios) #staking-screen [style*="font-size:42px"],
html:not(.ios) #staking-screen [style*="font-size: 42px"] {
  font-size: clamp(30px, 8vw, 42px) !important;
}

html:not(.ios) #staking-screen [style*="font-size:18px"][style*="font-weight:800"],
html:not(.ios) #staking-screen [style*="font-size: 18px"][style*="font-weight: 800"] {
  font-size: clamp(14px, 4vw, 18px) !important;
}

/* Asset banners */
html:not(.ios) #staking-screen [style*="width:52px"],
html:not(.ios) #staking-screen [style*="width: 52px"] {
  width:  clamp(40px, 11vw, 52px) !important;
  height: clamp(40px, 11vw, 52px) !important;
}

/* ── Wallet Screen ── */
html:not(.ios) #wallet-screen {
  padding-top: max(16px, calc(var(--tg-header-height, 50px) - 20px)) !important;
}

html:not(.ios) .wallet-container {
  margin-top: calc(var(--tg-header-height, 50px) + 20px) !important;
}

html:not(.ios) .balance-title {
  font-size: clamp(26px, 8vw, 36px) !important;
}

html:not(.ios) .balance-subtitle {
  font-size: clamp(12px, 3.2vw, 14px) !important;
}

html:not(.ios) .currency-text {
  font-size: clamp(18px, 5vw, 24px) !important;
}

html:not(.ios) .btn-deposit,
html:not(.ios) .btn-withdraw {
  font-size: clamp(13px, 3.5vw, 15px) !important;
}

html:not(.ios) .transactions-header {
  font-size: clamp(18px, 5vw, 22px) !important;
}

html:not(.ios) .tx-title {
  font-size: clamp(13px, 3.8vw, 16px) !important;
}

html:not(.ios) .tx-amount {
  font-size: clamp(12px, 3.5vw, 15px) !important;
}

html:not(.ios) .tx-icon-wrapper {
  width:  clamp(38px, 11vw, 46px) !important;
  height: clamp(38px, 11vw, 46px) !important;
}

/* ── Profile Screen ── */
html:not(.ios) #profile-screen {
  padding-top: max(140px, calc(var(--tg-header-height, 50px) + 90px)) !important;
}

html:not(.ios) .profile-top-bar {
  top: calc(var(--tg-header-height, 50px) + 50px) !important;
}

html:not(.ios) .profile-info h3 {
  font-size: clamp(15px, 4.5vw, 18px) !important;
}

html:not(.ios) .profile-avatar {
  width:  clamp(50px, 14vw, 60px) !important;
  height: clamp(50px, 14vw, 60px) !important;
}

/* ── Global safety rules for non-iOS ── */
html:not(.ios) img {
  max-width: 100%;
}

/* ── Android-specific fine tuning (on top of non-iOS base) ── */
html.android .balance-pill {
  top: max(80px, calc(var(--tg-safe-top, 0px) + 68px)) !important;
}

html.android #games-menu {
  padding-top: max(115px, calc(var(--tg-safe-top, 0px) + 105px)) !important;
}

html.android #staking-screen > div {
  padding-top: max(52px, calc(var(--tg-safe-top, 0px) + 44px)) !important;
}

html.android #profile-screen {
  padding-top: max(140px, calc(var(--tg-safe-top, 0px) + 128px)) !important;
}

html.android .profile-top-bar {
  top: max(82px, calc(var(--tg-safe-top, 0px) + 72px)) !important;
}

html.android #wallet-screen {
  padding-top: max(14px, calc(var(--tg-safe-top, 0px) + 8px)) !important;
}

html.android .wallet-container {
  margin-top: max(52px, calc(var(--tg-safe-top, 0px) + 42px)) !important;
}

/* ── Small Android screen fine tuning ── */
html.android.small-screen .balance-pill {
  top: 68px !important;
  right: 10px !important;
}

html.android.small-screen .nav-item { font-size: 9px !important; }
html.android.small-screen .nav-item svg { width: 20px !important; height: 20px !important; }
html.android.small-screen .profile-segment { width: 52px !important; height: 52px !important; }
html.android.small-screen .nav-item.profile img { width: 46px !important; height: 46px !important; }
html.android.small-screen .circle-segment { padding: 7px 11px !important; }
html.android.small-screen .pill-segment { padding: 7px 13px !important; }

/* ── Tablet overrides ── */
html.tablet:not(.ios) .bottom-nav-container {
  max-width: 640px !important;
  width: 90% !important;
}

html.tablet:not(.ios) .profile-segment {
  width:  68px !important;
  height: 68px !important;
}

html.tablet:not(.ios) .nav-item.profile img {
  width:  60px !important;
  height: 60px !important;
}

html.tablet:not(.ios) .nav-item {
  font-size: 12px !important;
}

html.tablet:not(.ios) .nav-item svg {
  width: 28px !important;
  height: 28px !important;
}

html.tablet:not(.ios) .balance-pill {
  padding: 8px 18px !important;
}

html.tablet:not(.ios) .balance-amount {
  font-size: 15px !important;
}

/* ── Prevent horizontal scroll on Android body/screen ── */
html:not(.ios) body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

html:not(.ios) .screen {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* ============================================================
   MEDIA QUERY BREAKPOINTS — all non-iOS devices
   These work alongside the html.android / html.tablet classes
   and cover every possible screen width automatically.
   ============================================================ */

/* ── Tiny phones: ≤ 320px (very old or small Android phones) ── */
@media screen and (max-width: 320px) and (not: (.ios)) {
  html:not(.ios) .nav-item { font-size: 8px !important; }
  html:not(.ios) .nav-item svg { width: 18px !important; height: 18px !important; }
  html:not(.ios) .circle-segment { padding: 6px 9px !important; }
  html:not(.ios) .pill-segment { padding: 6px 11px !important; }
  html:not(.ios) .profile-segment { width: 48px !important; height: 48px !important; }
  html:not(.ios) .nav-item.profile img { width: 42px !important; height: 42px !important; }
  html:not(.ios) .balance-pill { top: 62px !important; right: 8px !important; padding: 4px 8px !important; }
  html:not(.ios) .balance-amount { font-size: 11px !important; }
  html:not(.ios) .balance-title { font-size: 24px !important; }
  html:not(.ios) #games-menu { padding-top: 105px !important; }
  html:not(.ios) #crash-game-area {
    height: clamp(140px, 38vw, 180px) !important;
    min-height: clamp(140px, 38vw, 180px) !important;
    max-height: clamp(140px, 38vw, 180px) !important;
  }
  html:not(.ios) #rl-wheel-wrap,
  html:not(.ios) #rl-wc {
    width:  clamp(130px, 55vw, 160px) !important;
    height: clamp(130px, 55vw, 160px) !important;
  }
}

/* ── Small phones: 321px – 360px ── */
@media screen and (min-width: 321px) and (max-width: 360px) {
  html:not(.ios) .nav-item { font-size: 9px !important; }
  html:not(.ios) .nav-item svg { width: 20px !important; height: 20px !important; }
  html:not(.ios) .circle-segment { padding: 7px 10px !important; }
  html:not(.ios) .pill-segment { padding: 7px 12px !important; }
  html:not(.ios) .profile-segment { width: 52px !important; height: 52px !important; }
  html:not(.ios) .nav-item.profile img { width: 46px !important; height: 46px !important; }
  html:not(.ios) .balance-pill { top: 68px !important; right: 10px !important; padding: 5px 10px !important; }
  html:not(.ios) .balance-amount { font-size: 11px !important; }
  html:not(.ios) .balance-title { font-size: 26px !important; }
  html:not(.ios) .wallet-container { margin-top: 58px !important; }
  html:not(.ios) .transactions-header { font-size: 18px !important; }
  html:not(.ios) #games-menu { padding-top: 110px !important; }
  html:not(.ios) #crash-game-area {
    height: clamp(150px, 36vw, 185px) !important;
    min-height: clamp(150px, 36vw, 185px) !important;
    max-height: clamp(150px, 36vw, 185px) !important;
  }
  html:not(.ios) #rl-wheel-wrap,
  html:not(.ios) #rl-wc {
    width:  clamp(145px, 52vw, 175px) !important;
    height: clamp(145px, 52vw, 175px) !important;
  }
}

/* ── Medium phones: 361px – 390px ── */
@media screen and (min-width: 361px) and (max-width: 390px) {
  html:not(.ios) .nav-item { font-size: 10px !important; }
  html:not(.ios) .nav-item svg { width: 22px !important; height: 22px !important; }
  html:not(.ios) .profile-segment { width: 56px !important; height: 56px !important; }
  html:not(.ios) .nav-item.profile img { width: 50px !important; height: 50px !important; }
  html:not(.ios) .balance-pill { top: 74px !important; }
  html:not(.ios) .balance-amount { font-size: 12px !important; }
  html:not(.ios) .balance-title { font-size: 28px !important; }
  html:not(.ios) #games-menu { padding-top: 118px !important; }
}

/* ── Standard phones: 391px – 430px (most Android flagships) ── */
@media screen and (min-width: 391px) and (max-width: 430px) {
  html:not(.ios) .nav-item { font-size: 10px !important; }
  html:not(.ios) .nav-item svg { width: 24px !important; height: 24px !important; }
  html:not(.ios) .profile-segment { width: 60px !important; height: 60px !important; }
  html:not(.ios) .nav-item.profile img { width: 54px !important; height: 54px !important; }
  html:not(.ios) .balance-pill { top: 78px !important; }
  html:not(.ios) .balance-amount { font-size: 13px !important; }
  html:not(.ios) .balance-title { font-size: 30px !important; }
  html:not(.ios) #games-menu { padding-top: 124px !important; }
}

/* ── Large phones: 431px – 480px (large Android, foldables half-open) ── */
@media screen and (min-width: 431px) and (max-width: 480px) {
  html:not(.ios) .nav-item { font-size: 11px !important; }
  html:not(.ios) .nav-item svg { width: 26px !important; height: 26px !important; }
  html:not(.ios) .profile-segment { width: 62px !important; height: 62px !important; }
  html:not(.ios) .nav-item.profile img { width: 56px !important; height: 56px !important; }
  html:not(.ios) .balance-pill { top: 80px !important; }
  html:not(.ios) .balance-amount { font-size: 14px !important; }
  html:not(.ios) .balance-title { font-size: 32px !important; }
  html:not(.ios) .bottom-nav-container { max-width: 480px !important; }
  html:not(.ios) #games-menu { padding-top: 128px !important; }
  html:not(.ios) #crash-game-area {
    height: clamp(190px, 35vw, 230px) !important;
    min-height: clamp(190px, 35vw, 230px) !important;
    max-height: clamp(190px, 35vw, 230px) !important;
  }
}

/* ── Phablets & small tablets: 481px – 600px ── */
@media screen and (min-width: 481px) and (max-width: 600px) {
  html:not(.ios) .nav-item { font-size: 11px !important; }
  html:not(.ios) .nav-item svg { width: 26px !important; height: 26px !important; }
  html:not(.ios) .profile-segment { width: 64px !important; height: 64px !important; }
  html:not(.ios) .nav-item.profile img { width: 58px !important; height: 58px !important; }
  html:not(.ios) .balance-pill { top: 82px !important; }
  html:not(.ios) .balance-amount { font-size: 14px !important; }
  html:not(.ios) .balance-title { font-size: 34px !important; }
  html:not(.ios) .bottom-nav-container { max-width: 520px !important; }
  html:not(.ios) #games-menu { padding-top: 130px !important; }
  html:not(.ios) .banner-item { flex: 0 0 80% !important; }
}

/* ── Tablets & wide screens: 601px+ ── */
@media screen and (min-width: 601px) {
  html:not(.ios) .nav-item { font-size: 12px !important; }
  html:not(.ios) .nav-item svg { width: 28px !important; height: 28px !important; }
  html:not(.ios) .profile-segment { width: 68px !important; height: 68px !important; }
  html:not(.ios) .nav-item.profile img { width: 62px !important; height: 62px !important; }
  html:not(.ios) .bottom-nav-container { max-width: 640px !important; width: 88% !important; }
  html:not(.ios) .balance-pill { top: 86px !important; padding: 8px 18px !important; }
  html:not(.ios) .balance-amount { font-size: 15px !important; }
  html:not(.ios) .dollar-icon { width: 17px !important; height: 17px !important; }
  html:not(.ios) .balance-title { font-size: 36px !important; }
  html:not(.ios) .balance-subtitle { font-size: 15px !important; }
  html:not(.ios) #games-menu { padding-top: 134px !important; }
  html:not(.ios) .banner-item { flex: 0 0 72% !important; }
  html:not(.ios) #crash-game-area {
    height: 240px !important;
    min-height: 240px !important;
    max-height: 240px !important;
  }
  html:not(.ios) #rl-wheel-wrap,
  html:not(.ios) #rl-wc {
    width:  200px !important;
    height: 200px !important;
  }
  html:not(.ios) #staking-screen > div {
    padding-left:  28px !important;
    padding-right: 28px !important;
  }
  html:not(.ios) #games-list-section {
    padding-left:  24px !important;
    padding-right: 24px !important;
  }
}

/* ── Very wide (768px+): iPad landscape, desktop browser ── */
@media screen and (min-width: 768px) {
  html:not(.ios) .bottom-nav-container { max-width: 680px !important; width: 80% !important; }
  html:not(.ios) .banner-item { flex: 0 0 60% !important; }
  html:not(.ios) .balance-pill { right: 24px !important; top: 90px !important; }
  html:not(.ios) #staking-screen > div {
    padding-left:  36px !important;
    padding-right: 36px !important;
  }
}