:root{
  --vp-bg-1:#12071f;
  --vp-bg-2:#2a0f45;
  --vp-bg-3:#3a155f;
  --vp-accent-1:#b06ab3;
  --vp-accent-2:#4568dc;
  --vp-cyan:#60efff;
  --vp-green:#00ff87;
  --vp-yellow:#ffd45a;
  --vp-glass: rgba(255,255,255,.07);
  --vp-glass-2: rgba(255,255,255,.035);
  --vp-border: rgba(255,255,255,.14);
  --vp-border-2: rgba(255,255,255,.09);
}

/* --- Local font (user-provided) --- */
@font-face{
  font-family: 'TT Autonomous Trial';
  src: url('../fonts/TT_Autonomous_Trial_Bold.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

html, body, button, input, textarea, select{
  font-family: 'TT Autonomous Trial', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

*, *::before, *::after{
  font-family: 'TT Autonomous Trial', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* Background "aurora" + subtle noise for liquid glass */
body{ position: relative; }
body::before{
  content:"";
  position: fixed;
  inset: -2px;
  pointer-events: none;
  background:
    radial-gradient(1200px 800px at 10% 10%, rgba(176,106,179,.22), transparent 60%),
    radial-gradient(900px 700px at 85% 20%, rgba(69,104,220,.20), transparent 58%),
    radial-gradient(900px 700px at 70% 90%, rgba(96,239,255,.10), transparent 60%),
    radial-gradient(1100px 900px at 20% 85%, rgba(152, 70, 255, .14), transparent 60%);
  opacity: .85;
  mix-blend-mode: screen;
  z-index: 0;
  /* Removed animation to prevent lag on mobile */
}
@keyframes vpAurora{
  0%{ transform: translate3d(0,0,0) scale(1); filter: hue-rotate(0deg) saturate(1.05); }
  50%{ transform: translate3d(0,-10px,0) scale(1.02); filter: hue-rotate(10deg) saturate(1.12); }
  100%{ transform: translate3d(0,0,0) scale(1); filter: hue-rotate(0deg) saturate(1.05); }
}

body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-radial-gradient(circle at 20% 10%, rgba(255,255,255,.035) 0 1px, transparent 1px 7px);
  opacity: .06;
  mix-blend-mode: overlay;
  z-index: 1;
}

/* Stronger liquid glass cards */
.glass-panel{
  background: linear-gradient(135deg, var(--vp-glass), var(--vp-glass-2)) !important;
  border: 1px solid var(--vp-border) !important;
  box-shadow:
    0 18px 55px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 0 42px rgba(176,106,179,.10);
  position: relative;
  overflow: hidden;
}

.glass-panel::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.15) 0%, transparent 40%),
    radial-gradient(circle at 80% 85%, rgba(176,106,179,.1) 0%, transparent 45%);
  opacity: .95;
}

.glass-panel::after{
  content:"";
  position:absolute;
  inset:-70% -60%;
  border-radius: inherit;
  pointer-events:none;
  background: linear-gradient(115deg,
    transparent 35%,
    rgba(255,255,255,.18) 48%,
    transparent 62%);
  transform: translateX(-35%) rotate(10deg);
  opacity: .16;
}

@keyframes vpGlassSheen{
  0%{ transform: translateX(-35%) rotate(10deg); opacity: .05; }
  40%{ opacity: .22; }
  60%{ opacity: .18; }
  100%{ transform: translateX(35%) rotate(10deg); opacity: .06; }
}

/* Star icon from provided PNG */
.star-icon{
  width: clamp(16px, 1.08em, 24px);
  height: clamp(16px, 1.08em, 24px);
  min-width: clamp(16px, 1.08em, 24px);
  min-height: clamp(16px, 1.08em, 24px);
  display: inline-block;
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  vertical-align: -0.16em;
  margin-right: .2em;
  filter: drop-shadow(0 0 4px rgba(255, 220, 90, .38));
}



/* Star icon inside buttons: a bit smaller */
button .star-icon{
  width: clamp(14px, 1em, 20px);
  height: clamp(14px, 1em, 20px);
  min-width: clamp(14px, 1em, 20px);
  min-height: clamp(14px, 1em, 20px);
  margin-right: .16em;
  vertical-align: -0.14em;
}


/* Center text in all primary buttons */
button, .spin-button, .collect-btn, .sell-btn, .withdraw-btn, .sell-inv-btn, .nav-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35em;
  text-align: center;
  line-height: 1.1;
  touch-action: manipulation;
}

/* Extra "pressed" feedback for Telegram WebView (sometimes :active is not visible) */
.vp-pressed{
  transform: translateY(2px) scale(0.97) !important;
  filter: brightness(0.96) saturate(1.05);
}

/* Lightweight loading state (no heavy box-shadow animation) */
.vp-loading{
  opacity: 0.88;
  filter: saturate(0.95);
}

/* Spin buttons must stay centered even in Telegram WebView */
.spin-button{
  display: flex !important;       /* block-level flex */
  width: max-content;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Buttons: add subtle "shine" without heavy animations */
.spin-button, .collect-btn, .sell-btn, .nav-btn, .withdraw-btn, .sell-inv-btn{
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}

.spin-button::after, .collect-btn::after, .sell-btn::after, .nav-btn::after, .withdraw-btn::after, .sell-inv-btn::after{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  transform: translateX(-35%) rotate(8deg);
  opacity: .0;
  transition: opacity .25s ease;
  pointer-events:none;
}

.spin-button:active::after,
.collect-btn:active::after,
.sell-btn:active::after,
.nav-btn:active::after,
.withdraw-btn:active::after,
.sell-inv-btn:active::after{
  opacity: .35;
  animation: vpBtnShine .55s ease;
}

@keyframes vpBtnShine{
  from{ transform: translateX(-35%) rotate(8deg); }
  to{ transform: translateX(35%) rotate(8deg); }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  body::before{ animation: none; }
  .glass-panel::after{ animation: none; }
}

/* Extra win impact flash for roulettes (case1/free_case) */
.roulette-container.impact::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 220, 90, .22), transparent 60%),
    radial-gradient(circle at 40% 30%, rgba(96,239,255,.12), transparent 55%);
  opacity: 0;
  animation: vpImpactFlash .55s ease;
}

@keyframes vpImpactFlash{
  0%{ opacity: 0; transform: scale(.98); }
  35%{ opacity: .95; transform: scale(1.01); }
  100%{ opacity: 0; transform: scale(1.02); }
}


/* --- Stability fixes (vh -> px) to prevent header 'jumping' in Telegram WebView --- */
.header{
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px 16px !important;
  flex-shrink: 0;
}

/* Make top chips stable and not wrap weirdly */
.nickname-box{
  padding: clamp(8px, 2.2vw, 12px) clamp(12px, 4.2vw, 18px) !important;
  font-size: clamp(14px, 3.8vw, 18px) !important;
  line-height: 1.05 !important;
  max-width: 58% !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Balance box: always fixed 16px — never changes on tab switch or page change */
.balance-box{
  padding: clamp(8px, 2.2vw, 12px) clamp(14px, 4.2vw, 20px) clamp(8px, 2.2vw, 12px) 30px !important;
  font-size: 16px !important;
  line-height: 1.05 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header > .nickname-box{ min-width: 0; }

/* Profile card/Avatar: prevent flex shrinking that can turn the circle into an oval */
.profile-card{ flex-shrink: 0; }
.profile-avatar{
  width: min(140px, 26vw) !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
}

/* --- Floating bottom nav (footer) --- */
.footer{
  position: fixed !important;
  left: 12px !important;
  right: 12px !important;
  bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  width: auto !important;
  border-radius: 22px !important;
  padding: 10px 10px !important;
  gap: 8px;
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow:
    0 18px 55px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 28px rgba(176,106,179,.22);
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
}

.footer button{
  font-family: 'TT Autonomous Trial', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* Ensure content isn't hidden behind the floating footer */
#page-content{
  padding-bottom: calc(130px + env(safe-area-inset-bottom)) !important;
}


/* Floating bottom nav (liquid glass) */
.footer{
  left: 12px !important;
  right: 12px !important;
  bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  width: auto !important;
  border-radius: 24px !important;
  padding: 10px 10px !important;
  background: rgba(20, 10, 30, 0.55) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow:
    0 18px 45px rgba(0,0,0,.45),
    0 0 32px rgba(176,106,179,.18),
    0 0 0 1px rgba(255,255,255,.06) inset !important;
  backdrop-filter: blur(22px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.25) !important;
}

.footer button{
  flex: 1 1 0;
  min-width: 0;
  border-radius: 18px !important;
}

.footer button svg{
  width: clamp(18px, 5.2vw, 26px) !important;
  height: clamp(18px, 5.2vw, 26px) !important;
  margin-bottom: 6px !important;
}

/* FIX: Lock footer font so it never inherits/shrinks from page content */
.footer{
  font-size: 0 !important;
  isolation: isolate;
}
.footer button{
  font-size: 12px !important;
  line-height: 1.15 !important;
}

/* Voucher is now .voucher-block-isolated — no glass-panel rules needed */
.voucher-block { margin-top: 20px !important; }


/* Header layout lock (prevents nickname dropping) */
.header{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  overflow: visible !important;
}
.header .header-left{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.header .header-left .nickname-box{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.header .nickname-box{
  flex: 1 1 auto;
  min-width: 0;
}
.header .balance-container{
  flex: 0 0 auto;
  overflow: visible !important;
}
.header .back-button{
  flex: 0 0 auto;
}


/* --- Desktop polish + mobile top offset fixes --- */
@media (max-width: 768px){
  .header{
    padding-top: max(20px, calc(env(safe-area-inset-top) + 20px)) !important;
  }

  #page-content{
    padding-top: 14px !important;
  }
}

@media (min-width: 980px){
  .welcome-text + .glass-panel{
    width: min(100%, 520px) !important;
    padding: 30px !important;
    border-radius: 30px !important;
  }

  .welcome-text + .glass-panel p{
    font-size: 18px !important;
  }

  .case-price{
    font-size: 16px !important;
    padding: 10px 16px !important;
    border-radius: 999px !important;
  }

  .inventory-item > span{
    font-size: 14px !important;
    margin-bottom: 10px !important;
  }

  .inventory-item .sell-btn,
  .inventory-item .withdraw-btn{
    font-size: 14px !important;
    padding: 12px 10px !important;
    border-radius: 12px !important;
  }

  .spin-button, .collect-btn, .upgrade-btn, .seg-btn{
    font-size: 16px !important;
    padding: 16px 24px !important;
    border-radius: 18px !important;
  }

  .sell-btn, .withdraw-btn, .sell-inv-btn{
    font-size: 14px !important;
    border-radius: 14px !important;
  }

  .drops-title{
    font-size: 28px !important;
  }

  .drop-name{
    font-size: 16px !important;
  }

  .drop-value{
    font-size: 14px !important;
  }

  .history-panel-title span:last-child{
    font-size: 13px !important;
  }

  .header{
    width: 100% !important;
    margin: 0 !important;
    padding: 26px 28px 18px !important;
  }

  /* Cases pages: glassmorphism header bar */
  body.page-cases .header,
  body.page-case-open .header{
    background: rgba(6, 0, 26, 0.45) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border-bottom: 1px solid rgba(100, 50, 200, 0.2) !important;
  }

  #page-content{
    width: min(1240px, calc(100% - 48px)) !important;
    margin: 0 auto !important;
    padding-top: 18px !important;
    padding-bottom: 165px !important;
  }

  .nickname-box, .balance-box{
    font-size: 16px !important;
    padding: 12px 18px !important;
    border-radius: 18px !important;
    max-width: none !important;
  }

  .balance-plus-circle{
    --vp-plus: 38px !important;
  }

  .welcome-text, .cases-title, .profile-title{
    font-size: clamp(34px, 3vw, 52px) !important;
    margin-bottom: 22px !important;
  }

  .profile-card{
    max-width: 580px !important;
    margin-inline: auto !important;
    margin-bottom: 20px !important;
    padding: 30px !important;
    border-radius: 30px !important;
  }
  body.page-profile .profile-card{
    max-width: 100% !important;
    margin-inline: 0 !important;
  }

  .profile-stat{
    font-size: 18px !important;
    padding: 18px 0 !important;
  }
  body.page-profile .profile-left-col .profile-stat{
    font-size: 14px !important;
    padding: 10px 0 !important;
  }

  .inventory-grid{
    grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
    gap: 18px !important;
  }

  .inventory-item{
    border-radius: 24px !important;
    padding: 18px !important;
  }

  .cases-grid{
    grid-template-columns: repeat(2, minmax(300px, 360px)) !important;
    gap: 24px !important;
    justify-content: center !important;
  }

  .case-card{
    border-radius: 28px !important;
  }

  .telegram-button{
    font-size: 20px !important;
    padding: 18px 34px !important;
    border-radius: 22px !important;
    gap: 12px !important;
  }

  .telegram-button svg{
    width: 26px !important;
    height: 26px !important;
  }

  .roulette-container{
    max-width: 980px !important;
    margin-inline: auto !important;
  }

  .drops-grid{
    grid-template-columns: repeat(4, minmax(160px, 1fr)) !important;
    gap: 18px !important;
  }

  .drop-card{
    border-radius: 24px !important;
  }

  .upgrade-wrap{
    max-width: 1120px !important;
  }

  .ring-card{
    max-width: 820px !important;
    margin-inline: auto !important;
  }

  .craft-card, .inv-card{
    border-radius: 28px !important;
    padding: 20px !important;
  }

  .craft-grid{
    grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  .slot{
    min-height: 112px !important;
  }

  .inv-row{
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(130px, 160px)) !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  .sheet-panel{
    max-width: 1080px !important;
    margin: 0 auto !important;
    border-radius: 28px 28px 0 0 !important;
  }

  .sheet-grid{
    grid-template-columns: repeat(4, minmax(180px, 1fr)) !important;
    gap: 18px !important;
  }

  .history-columns{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  .history-panel{
    border-radius: 26px !important;
    padding: 22px !important;
  }

  .history-panel-title{
    font-size: 22px !important;
  }

  .history-item{
    border-radius: 20px !important;
    padding: 16px !important;
    gap: 16px !important;
  }

  .history-item-icon{
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    border-radius: 16px !important;
    padding: 10px !important;
  }

  .history-item-title{
    font-size: 17px !important;
  }

  .history-item-subtitle, .history-item-time, .history-item-value{
    font-size: 14px !important;
  }

  .history-status{
    font-size: 13px !important;
    padding: 8px 14px !important;
  }

  .footer{
    max-width: 920px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 12px !important;
  }

  .footer button{
    font-size: 14px !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
  }

  .footer button svg{
    width: 22px !important;
    height: 22px !important;
    margin-bottom: 4px !important;
  }
}

/* === v29: desktop layout cleanup + mobile safe-area offset + cases perf === */

:root{
  --vp-safe-top: max(env(safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px));
  --vp-safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
}

body.page-home,
body.page-cases,
body.page-profile,
body.page-case-open,
body.page-upgrade{
  overflow-x: hidden !important;
}


@media (max-width: 979px){
  .header{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .header-left,
  .header .nickname-box{
    min-width: 0 !important;
  }

  .header .balance-container{
    min-width: 0 !important;
    padding-left: calc(var(--vp-plus, 38px) * 0.48) !important;
  }

  .balance-box{
    max-width: min(42vw, 180px) !important;
    min-width: 0 !important;
    padding: 11px 14px 11px 24px !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-variant-numeric: tabular-nums;
  }

  .balance-box img,
  .balance-box .star-icon{
    flex: 0 0 auto !important;
  }

  .balance-box .player-balance{
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Better default header spacing inside Telegram */
.header{
  padding-top: calc(12px + var(--vp-safe-top)) !important;
}

/* Desktop nav: balanced icon/text proportions */
@media (min-width: 980px){
  .footer{
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    width: min(1240px, calc(100vw - 56px)) !important;
    padding: 12px !important;
    gap: 10px !important;
    bottom: 18px !important;
  }

  .footer form{
    flex: 1 1 0;
    min-width: 0;
  }

  .footer button{
    min-width: 0 !important;
    padding: 12px 10px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
  max-width: 58% !important;
    gap: 6px !important;
  }

  .footer button svg{
    width: 21px !important;
    height: 21px !important;
    margin-bottom: 2px !important;
  }

  .footer .active{
    transform: translateY(-4px) !important;
  }
}

/* Mobile: move header noticeably lower from Telegram time/system bar */
@media (max-width: 768px){
  .header{
    padding-top: calc(var(--vp-safe-top) + 8vh) !important;
    padding-bottom: 12px !important;
  }

  /* Mobile balance fix: reserve space for the glowing plus badge so digits never hide under it */
  .balance-container{
    min-width: clamp(112px, 29vw, 156px) !important;
    overflow: visible !important;
    position: relative !important;
  }

  /* Plus badge: overlaps left edge of balance-box by ~50% of its own width */
  .balance-plus-circle{
    position: absolute !important;
    left: calc(var(--vp-plus, 34px) * -0.5) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 20 !important;
  }

  .balance-box{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.28em !important;
    min-width: clamp(104px, 27vw, 148px) !important;
    padding: 11px 14px 11px calc(var(--vp-plus, 34px) * 0.65 + 8px) !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: left !important;
    line-height: 1 !important;
  }

  .balance-box .star-icon{
    flex: 0 0 auto !important;
    margin-right: 0 !important;
  }

  body.page-home #page-content,
  body.page-cases #page-content,
  body.page-profile #page-content,
  body.page-upgrade #page-content{
    padding-top: 2vh !important;
  }

  /* Pages with Telegram BackButton: use JS-set CSS vars for stable TG-bar offset */
  body[data-tg-back-url] .header{
    top: 0 !important;
    padding-top: calc(var(--tg-safe-top, env(safe-area-inset-top, 0px)) + var(--tg-header-h, 46px)) !important;
    min-height: calc(var(--tg-safe-top, 0px) + var(--tg-header-h, 46px) + 50px) !important;
  }
}

/* Desktop cleanup for pages that were still using vw-based mobile layout */
@media (min-width: 980px){
  body.page-home,
  body.page-cases,
  body.page-profile{
    min-height: 100vh !important;
    overflow-y: auto !important;
  }

  body.page-home .orb,
  body.page-cases .orb,
  body.page-profile .orb{
    opacity: .42 !important;
    filter: blur(36px) !important;
  }

  body.page-home .header,
  body.page-cases .header,
  body.page-profile .header,
  body.page-crash .header,
  body.page-case-open .header,
  body.page-mines .header,
  body.page-plinko .header{
    width: 100% !important;
    margin: 0 !important;
    padding-top: 26px !important;
    padding-bottom: 18px !important;
  }

  body.page-home #page-content,
  body.page-cases #page-content,
  body.page-profile #page-content{
    width: min(1240px, calc(100vw - 56px)) !important;
    margin: 0 auto !important;
    padding-top: 20px !important;
    padding-bottom: 170px !important;
  }

  body.page-home .nickname-box,
  body.page-home .balance-box,
  body.page-cases .nickname-box,
  body.page-cases .balance-box,
  body.page-profile .nickname-box,
  body.page-profile .balance-box{
    font-size: 16px !important;
    padding: 12px 18px !important;
    border-radius: 18px !important;
    max-width: none !important;
  }

  body.page-home .welcome-text,
  body.page-cases .cases-title,
  body.page-profile .profile-title{
    width: 100%;
    text-align: center;
    font-size: clamp(38px, 4vw, 78px) !important;
    margin-bottom: 24px !important;
  }

  body.page-home #page-content{
    justify-content: flex-start !important;
    padding-top: 52px !important;
  }

  body.page-home #page-content > .glass-panel{
    width: min(860px, 100%) !important;
    max-width: none !important;
    padding: 34px 40px !important;
    border-radius: 32px !important;
    margin: 0 auto !important;
  }

  body.page-home #page-content > .glass-panel p{
    font-size: 20px !important;
    margin-bottom: 18px !important;
  }

  body.page-home .telegram-button-container{
    margin-top: 16px !important;
  }

  body.page-home .telegram-button{
    width: auto !important;
    max-width: none !important;
    min-width: 280px;
    font-size: 18px !important;
    padding: 18px 30px !important;
    border-radius: 20px !important;
    gap: 12px !important;
  }

  body.page-home .telegram-button svg{
    width: 24px !important;
    height: 24px !important;
  }

  body.page-cases #page-content,
  body.page-profile #page-content{
    justify-content: flex-start !important;
    align-items: stretch !important;
    font-size: initial !important;
  }

  body.page-cases .cases-grid{
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(290px, 360px)) !important;
    justify-content: center !important;
    gap: 24px !important;
  }

  body.page-cases .case-card{
    min-height: 350px !important;
    border-radius: 30px !important;
    padding: 26px 20px !important;
  }

  body.page-cases .case-image{
    width: min(250px, 76%) !important;
    max-height: 230px !important;
  }

  body.page-cases .case-price{
    font-size: 18px !important;
    padding: 12px 18px !important;
    border-radius: 999px !important;
  }

  body.page-profile .profile-card{
    max-width: 620px !important;
    margin-inline: auto !important;
    margin-bottom: 20px !important;
    padding: 30px !important;
    border-radius: 30px !important;
  }

  body.page-profile .profile-stat{
    font-size: 18px !important;
  }

  body.page-profile .inventory-grid{
    grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
    gap: 18px !important;
  }

  body.page-profile .inventory-item{
    border-radius: 24px !important;
    padding: 18px !important;
  }

  body.page-profile .history-columns{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }

  body.page-profile .history-panel{
    border-radius: 24px !important;
    padding: 18px !important;
  }
}

/* Case pages: reduce expensive effects for smoother scrolling */
body.page-cases,
body.page-case-open{
  background: linear-gradient(180deg, #180b2a 0%, #31124d 52%, #160a24 100%) !important;
  background-size: auto !important;
  animation: none !important;
}

body.page-cases::before,
body.page-cases::after,
body.page-case-open::before,
body.page-case-open::after{
  animation: none !important;
  opacity: .48 !important;
}

body.page-cases .orb,
body.page-case-open .orb{
  animation: none !important;
  transform: none !important;
  filter: blur(34px) !important;
  opacity: .34 !important;
}

body.page-cases .glass-panel,
body.page-case-open .glass-panel{
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

body.page-cases .footer,
body.page-case-open .footer{
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

body.page-cases .case-card,
body.page-case-open .drop-card,
body.page-case-open .drops-grid,
body.page-cases .cases-grid{
  content-visibility: auto;
}

body.page-case-open .drop-card,
body.page-cases .case-card{
  contain: layout paint style;
}

@media (max-width: 768px){
  body.page-cases .orb,
  body.page-case-open .orb{
    display: none !important;
  }

  body.page-cases .glass-panel,
  body.page-case-open .glass-panel,
  body.page-cases .footer,
  body.page-case-open .footer{
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  body.page-cases .case-card,
  body.page-case-open .drop-card{
    box-shadow: 0 8px 18px rgba(0,0,0,.22) !important;
  }

  body.page-cases .footer button,
  body.page-case-open .footer button,
  body.page-home .footer button,
  body.page-profile .footer button,
  body.page-upgrade .footer button{
    font-size: clamp(14px, 3.9vw, 17px) !important;
  }

  body.page-cases .footer button svg,
  body.page-case-open .footer button svg,
  body.page-home .footer button svg,
  body.page-profile .footer button svg,
  body.page-upgrade .footer button svg{
    width: clamp(18px, 5.2vw, 24px) !important;
    height: clamp(18px, 5.2vw, 24px) !important;
  }
}


/* === v31: desktop-horizontal only redesign (rollback from v29 mobile) === */
@media (min-width: 1024px) and (orientation: landscape) and (hover: hover) and (pointer: fine) {
  html, body {
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  body.page-home,
  body.page-cases,
  body.page-profile,
  body.page-upgrade,
  body.page-case-open {
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .header {
    width: min(1240px, calc(100vw - 72px)) !important;
    margin: 0 auto !important;
    padding: 24px 0 14px !important;
    gap: 14px !important;
  }

  .nickname-box,
  .balance-box {
    max-width: min(420px, 34vw) !important;
    font-size: 15px !important;
    padding: 11px 18px !important;
    border-radius: 16px !important;
    letter-spacing: .01em;
  }

  .balance-plus-circle {
    --vp-plus: 34px !important;
  }

  #page-content {
    width: min(1240px, calc(100vw - 72px)) !important;
    margin: 0 auto !important;
    padding-top: 18px !important;
    padding-bottom: 138px !important;
  }

  .welcome-text,
  .cases-title,
  .profile-title {
    font-size: clamp(40px, 3.4vw, 58px) !important;
    line-height: .98 !important;
    letter-spacing: .01em;
    margin-bottom: 22px !important;
    transform: none !important;
  }

  .footer {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(860px, calc(100vw - 96px)) !important;
    bottom: 22px !important;
    padding: 8px !important;
    border-radius: 20px !important;
    gap: 8px !important;
  }

  .footer form {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  .footer button {
    min-width: 0 !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    border-radius: 14px !important;
    line-height: 1 !important;
  }

  .footer button svg {
    width: 18px !important;
    height: 18px !important;
    margin-bottom: 0 !important;
    flex: 0 0 auto;
  }

  .footer .active {
    transform: translateY(-2px) !important;
  }

  .footer .active svg {
    transform: none !important;
  }

  /* Home */
  body.page-home #page-content {
    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
    gap: 0 !important;
    min-height: calc(100vh - 220px) !important;
    padding-top: 10px !important;
  }

  body.page-home .welcome-text {
    text-align: center !important;
    margin-bottom: 20px !important;
  }

  body.page-home #page-content > .glass-panel {
    width: min(760px, 100%) !important;
    max-width: none !important;
    padding: 30px 34px !important;
    border-radius: 28px !important;
    margin: 0 auto !important;
  }

  body.page-home #page-content > .glass-panel p {
    font-size: 18px !important;
    margin-bottom: 16px !important;
  }

  body.page-home .telegram-button-container {
    margin-top: 12px !important;
  }

  body.page-home .telegram-button {
    width: auto !important;
    max-width: none !important;
    min-width: 240px !important;
    font-size: 17px !important;
    padding: 15px 24px !important;
    border-radius: 18px !important;
    gap: 10px !important;
  }

  body.page-home .telegram-button svg {
    width: 22px !important;
    height: 22px !important;
  }

  /* Cases */
  body.page-cases #page-content {
    display: block !important;
    padding-top: 8px !important;
  }

  body.page-cases .cases-title {
    text-align: left !important;
    margin-bottom: 24px !important;
  }

  body.page-cases .cases-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(320px, 390px)) !important;
    justify-content: center !important;
    gap: 28px !important;
    padding-bottom: 0 !important;
  }

  body.page-cases .case-card {
    padding: 18px 18px 22px !important;
    border-radius: 26px !important;
    min-height: 0 !important;
    gap: 10px !important;
  }

  body.page-cases .case-image {
    width: min(100%, 300px) !important;
    max-width: 88% !important;
    height: 230px !important;
    object-fit: contain !important;
    margin: 4px auto 8px !important;
    border-radius: 0 !important;
    display: block !important;
    filter: drop-shadow(0 12px 18px rgba(0,0,0,0.28)) !important;
  }

  body.page-cases .case-card:hover,
  body.page-cases .case-card:active {
    transform: translateY(-4px) scale(1.01) !important;
  }

  body.page-cases .case-price {
    width: auto !important;
    min-width: 148px;
    padding: 10px 16px !important;
    margin: 6px auto 0 !important;
    border-radius: 999px !important;
    font-size: 16px !important;
  }

  /* Profile */
  body.page-profile #page-content {
    display: grid !important;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) !important;
    grid-template-areas:
      "title title"
      "card inventory"
      "voucher history" !important;
    align-items: start !important;
    gap: 22px 24px !important;
    justify-content: stretch !important;
    padding-top: 8px !important;
  }

  body.page-profile .voucher-block {
    grid-area: voucher;
    margin-top: 0 !important;
  }

  body.page-profile #page-content > .profile-title:first-child {
    grid-area: title;
    margin-bottom: 0 !important;
    align-self: end !important;
  }

  body.page-profile .profile-card {
    grid-area: card;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 20px 0 !important;
    padding: 24px !important;
    border-radius: 26px !important;
    position: sticky;
    top: 108px;
  }

  body.page-profile .profile-avatar {
    width: 124px !important;
    height: 124px !important;
    margin-bottom: 20px !important;
    font-size: 48px !important;
  }

  body.page-profile .profile-stat {
    padding: 15px 0 !important;
    font-size: 15px !important;
  }

  body.page-profile .inventory-section {
    grid-area: inventory;
    width: 100% !important;
  }

  body.page-profile .history-section {
    grid-area: history;
    width: 100% !important;
  }

  body.page-profile .inventory-section > .profile-title,
  body.page-profile .history-section > .profile-title {
    font-size: 28px !important;
    margin: 0 0 14px !important;
    align-self: auto !important;
  }

  body.page-profile .inventory-grid {
    grid-template-columns: repeat(3, minmax(170px, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
    padding-bottom: 0 !important;
  }

  body.page-profile .inventory-item {
    border-radius: 20px !important;
    padding: 16px !important;
  }

  body.page-profile .inventory-item img {
    width: 76% !important;
    padding: 10px !important;
    border-radius: 16px !important;
    margin-bottom: 10px !important;
  }

  body.page-profile .inventory-item > span {
    font-size: 14px !important;
    margin-bottom: 10px !important;
  }

  body.page-profile .inventory-item > div {
    gap: 8px !important;
    width: 100% !important;
  }

  body.page-profile .sell-btn,
  body.page-profile .withdraw-btn {
    padding: 10px 8px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
  }

  body.page-profile .history-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    padding-bottom: 0 !important;
  }

  body.page-profile .history-panel {
    border-radius: 22px !important;
    padding: 16px !important;
  }

  body.page-profile .history-panel-title {
    font-size: 18px !important;
    margin-bottom: 14px !important;
  }

  body.page-profile .history-panel-title span:last-child,
  body.page-profile .history-item-subtitle,
  body.page-profile .history-item-time,
  body.page-profile .history-item-value,
  body.page-profile .history-status {
    font-size: 12px !important;
  }

  body.page-profile .history-item {
    gap: 12px !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  body.page-profile .history-item-icon {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    border-radius: 14px !important;
    padding: 8px !important;
  }

  body.page-profile .history-item-title {
    font-size: 14px !important;
  }

  /* Upgrade desktop only: keep mobile untouched */
  body.page-upgrade #page-content {
    padding-top: 8px !important;
  }

  body.page-upgrade .upgrade-wrap {
    max-width: none !important;
    display: grid !important;
    grid-template-columns: minmax(360px, 430px) minmax(0, 1fr) !important;
    grid-template-areas:
      "ring craft"
      "ring inventory" !important;
    gap: 22px !important;
    align-items: start !important;
  }

  body.page-upgrade .ring-card {
    grid-area: ring;
    position: sticky;
    top: 108px;
    margin: 0 !important;
  }

  body.page-upgrade .craft-card {
    grid-area: craft;
    margin: 0 !important;
  }

  body.page-upgrade .inv-card {
    grid-area: inventory;
    margin: 0 !important;
  }

  body.page-upgrade .craft-grid {
    grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  body.page-upgrade .slot {
    min-height: 96px !important;
  }

  body.page-upgrade .sheet-panel {
    max-width: min(980px, calc(100vw - 80px)) !important;
    margin: 0 auto !important;
  }

  body.page-upgrade .sheet-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}


/* === v32: footer/mobile fit + desktop-home polish === */
.footer form{
  flex: 1 1 0;
  min-width: 0;
}

.footer button{
  width: 100%;
}

@media (max-width: 768px){
  .header{
    padding-top: max(14px, calc(env(safe-area-inset-top) + 14px)) !important;
  }

  #page-content{
    padding-top: 8px !important;
  }

  .footer{
    gap: 4px !important;
    padding: 8px 8px calc(10px + env(safe-area-inset-bottom)) !important;
    border-radius: 22px !important;
  }

  .footer form{
    display: flex !important;
  }

  .footer button{
    min-width: 0 !important;
    padding: 8px 4px !important;
    font-size: clamp(11px, 3.25vw, 14px) !important;
    line-height: .98 !important;
    letter-spacing: 0 !important;
  }

  .footer button svg{
    width: clamp(18px, 5vw, 22px) !important;
    height: clamp(18px, 5vw, 22px) !important;
    margin-bottom: 4px !important;
  }

  .footer .active{
    transform: translateY(-4px) !important;
  }
}

@media (min-width: 1024px){
  html, body,
  body.page-home,
  body.page-cases,
  body.page-profile,
  body.page-upgrade,
  body.page-case-open{
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .header{
    width: min(1180px, calc(100vw - 72px)) !important;
    margin: 0 auto !important;
    padding: 18px 0 10px !important;
    gap: 16px !important;
  }

  .nickname-box,
  .balance-box{
    max-width: min(360px, 28vw) !important;
    padding: 10px 18px !important;
    border-radius: 18px !important;
    font-size: 15px !important;
  }

  .balance-plus-circle{
    --vp-plus: 38px !important;
  }

  #page-content{
    width: min(1180px, calc(100vw - 72px)) !important;
    margin: 0 auto !important;
    padding-top: 8px !important;
    padding-bottom: 134px !important;
  }

  .welcome-text,
  .cases-title,
  .profile-title{
    font-size: clamp(44px, 4vw, 72px) !important;
    line-height: .96 !important;
    margin-bottom: 24px !important;
    transform: none !important;
  }

  .footer{
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(920px, calc(100vw - 90px)) !important;
    bottom: 18px !important;
    padding: 9px !important;
    gap: 10px !important;
    border-radius: 22px !important;
  }

  .footer form{
    display: flex !important;
  }

  .footer button{
    min-width: 0 !important;
    width: 100% !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    border-radius: 16px !important;
  }

  .footer button svg{
    width: 24px !important;
    height: 24px !important;
    margin-bottom: 0 !important;
    opacity: .82 !important;
    flex: 0 0 auto;
  }

  .footer .active{
    transform: translateY(-2px) !important;
  }

  .footer .active svg{
    transform: scale(1.06) !important;
  }

  body.page-home #page-content{
    min-height: calc(100vh - 220px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  body.page-home .welcome-text{
    text-align: center !important;
    font-size: clamp(54px, 5vw, 88px) !important;
    margin-bottom: 24px !important;
  }

  body.page-home #page-content > .glass-panel{
    width: min(640px, 100%) !important;
    max-width: none !important;
    padding: 32px 38px !important;
    border-radius: 30px !important;
    margin: 0 auto !important;
  }

  body.page-home #page-content > .glass-panel p{
    margin: 0 0 18px !important;
    font-size: 24px !important;
    line-height: 1.18 !important;
    color: rgba(255,255,255,.88) !important;
  }

  body.page-home .telegram-button-container{
    margin-top: 0 !important;
  }

  body.page-home .telegram-button{
    width: min(320px, 100%) !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 16px 24px !important;
    border-radius: 20px !important;
    gap: 12px !important;
    font-size: 20px !important;
    box-shadow: 0 12px 22px rgba(0, 136, 204, 0.32), inset 0 2px 0 rgba(255,255,255,0.22) !important;
  }

  body.page-home .telegram-button svg{
    width: 24px !important;
    height: 24px !important;
  }
}


@media (max-width: 768px){
  .footer{
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
  }
}

@media (max-width: 420px){
  .footer{
    gap: 2px !important;
    padding: 8px 6px calc(10px + env(safe-area-inset-bottom)) !important;
  }

  .footer button{
    font-size: 11.5px !important;
    padding: 8px 2px !important;
  }

  .footer button svg{
    width: 18px !important;
    height: 18px !important;
  }
}


/* === v33: precise home desktop fix + mobile header/nav tune === */
@media (min-width: 1024px) and (orientation: landscape) {
  body.page-home .header,
  body.page-cases .header,
  body.page-profile .header,
  body.page-upgrade .header,
  body.page-case-open .header {
    width: 100% !important;
    margin: 0 !important;
  }

  body.page-home #page-content {
    width: min(1180px, calc(100vw - 72px)) !important;
    min-height: calc(100vh - 214px) !important;
    padding-top: 8px !important;
    padding-bottom: 150px !important;
  }

  body.page-home .welcome-text {
    font-size: clamp(58px, 4.6vw, 90px) !important;
    line-height: .95 !important;
    margin-bottom: 22px !important;
  }

  body.page-home #page-content > .home-card,
  body.page-home #page-content > .glass-panel.home-card {
    width: min(860px, 92vw) !important;
    max-width: none !important;
    padding: 30px 42px !important;
    border-radius: 34px !important;
  }

  body.page-home .home-card-title {
    font-size: clamp(22px, 1.55vw, 28px) !important;
    line-height: 1.14 !important;
    margin: 0 0 18px !important;
  }

  body.page-home .telegram-button {
    width: min(340px, 100%) !important;
    font-size: 19px !important;
    padding: 17px 26px !important;
    border-radius: 20px !important;
  }

  body.page-home .telegram-button svg {
    width: 24px !important;
    height: 24px !important;
  }

  .footer {
    width: min(960px, calc(100vw - 92px)) !important;
    padding: 10px !important;
    gap: 8px !important;
  }

  .footer button {
    font-size: 14px !important;
    padding: 11px 12px !important;
    gap: 8px !important;
  }

  .footer button svg {
    width: 24px !important;
    height: 24px !important;
    opacity: .9 !important;
  }
}

@media (max-width: 768px) {
  .header {
    padding-top: clamp(68px, calc(var(--vp-safe-top) + 40px), 104px) !important;
    padding-bottom: 10px !important;
  }

  .footer {
    gap: 1px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .footer form {
    min-width: 0 !important;
    flex: 1 1 0 !important;
  }

  .footer button {
    min-width: 0 !important;
    font-size: clamp(11.5px, 3.1vw, 13px) !important;
    padding: 8px 2px !important;
    letter-spacing: 0 !important;
    gap: 4px !important;
  }

  .footer button svg {
    width: clamp(17px, 4.6vw, 21px) !important;
    height: clamp(17px, 4.6vw, 21px) !important;
    margin-bottom: 2px !important;
  }
}

/* === v34: final desktop-horizontal layout + mobile header/menu tune === */

@media (max-width: 768px) {
  body.page-case-open .header {
    padding-top: clamp(68px, calc(var(--vp-safe-top) + 40px), 104px) !important;
    padding-bottom: 10px !important;
  }

  .footer {
    padding-top: 6px !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    border-radius: 20px !important;
  }

  .footer button {
    font-size: clamp(9.8px, 2.75vw, 11px) !important;
    line-height: 0.96 !important;
    padding: 7px 2px !important;
    gap: 3px !important;
  }

  .footer button svg {
    width: clamp(17px, 4.8vw, 20px) !important;
    height: clamp(17px, 4.8vw, 20px) !important;
    margin-bottom: 1px !important;
  }
}

@media (min-width: 1024px) and (orientation: landscape) {
  html,
  body,
  body.page-home,
  body.page-cases,
  body.page-profile,
  body.page-upgrade,
  body.page-case-open {
    min-height: 100vh !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .header,
  body.page-home .header,
  body.page-cases .header,
  body.page-profile .header,
  body.page-upgrade .header,
  body.page-case-open .header {
    width: 100% !important;
    margin: 0 !important;
    padding: 18px 28px 8px !important;
    gap: 14px !important;
  }

  .nickname-box,
  .balance-box {
    max-width: min(350px, 28vw) !important;
    padding: 10px 18px !important;
    font-size: 15px !important;
    border-radius: 18px !important;
  }

  #page-content,
  body.page-home #page-content,
  body.page-cases #page-content,
  body.page-profile #page-content,
  body.page-upgrade #page-content,
  body.page-case-open #page-content {
    width: min(1320px, calc(100vw - 88px)) !important;
    margin: 0 auto !important;
    padding-top: 10px !important;
    padding-bottom: 120px !important;
  }

  .footer {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(840px, calc(100vw - 140px)) !important;
    bottom: 14px !important;
    padding: 6px 8px !important;
    gap: 6px !important;
    border-radius: 18px !important;
  }

  .footer button {
    flex-direction: row !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    padding: 8px 10px !important;
    min-height: 44px !important;
    border-radius: 12px !important;
  }

  .footer button svg {
    width: 23px !important;
    height: 23px !important;
    margin-bottom: 0 !important;
    opacity: .92 !important;
    flex: 0 0 auto !important;
  }

  .footer .active {
    transform: translateY(-1px) !important;
  }

  body.page-home #page-content {
    min-height: calc(100vh - 188px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
  }

  body.page-home .welcome-text {
    font-size: clamp(40px, 3.2vw, 62px) !important;
    line-height: .98 !important;
    margin-bottom: 18px !important;
    text-align: center !important;
    transform: none !important;
  }

  body.page-home #page-content > .home-card,
  body.page-home #page-content > .glass-panel.home-card {
    width: min(960px, 96vw) !important;
    max-width: none !important;
    padding: 30px 44px !important;
    border-radius: 32px !important;
    margin: 0 auto !important;
  }

  body.page-home .home-card-title {
    font-size: clamp(20px, 1.2vw, 24px) !important;
    line-height: 1.18 !important;
    margin: 0 0 16px !important;
  }

  body.page-home .telegram-button {
    width: min(300px, 100%) !important;
    font-size: 18px !important;
    padding: 15px 22px !important;
    border-radius: 18px !important;
  }

  body.page-cases #page-content {
    display: block !important;
  }

  body.page-cases .cases-title {
    font-size: clamp(40px, 3vw, 56px) !important;
    line-height: 1 !important;
    margin-bottom: 18px !important;
    text-align: left !important;
  }

  body.page-cases .cases-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(250px, 290px)) !important;
    justify-content: center !important;
    gap: 22px !important;
  }

  body.page-cases .case-card {
    width: 100% !important;
    min-height: 0 !important;
    padding: 16px 16px 18px !important;
    border-radius: 24px !important;
    gap: 10px !important;
  }

  body.page-cases .case-image {
    width: min(220px, 82%) !important;
    height: 170px !important;
    max-height: 170px !important;
    object-fit: contain !important;
    margin: 4px auto 4px !important;
  }

  body.page-cases .case-price {
    font-size: 14px !important;
    padding: 8px 14px !important;
    min-width: 128px !important;
    margin-top: 2px !important;
  }

  body.page-profile #page-content {
    display: grid !important;
    grid-template-columns: 340px minmax(0, 1fr) !important;
    grid-template-areas:
      'title title'
      'card inventory'
      'voucher history' !important;
    align-items: start !important;
    gap: 22px 24px !important;
  }

  body.page-profile .voucher-block {
    grid-area: voucher;
    margin-top: 0 !important;
  }

  body.page-profile #page-content > .profile-title:first-child {
    grid-area: title !important;
    font-size: clamp(40px, 3vw, 56px) !important;
    margin: 0 0 8px !important;
    text-align: left !important;
  }

  body.page-profile .profile-card {
    grid-area: card !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 20px 0 !important;
    padding: 22px !important;
    border-radius: 28px !important;
    position: sticky !important;
    top: 96px !important;
  }

  body.page-profile .profile-avatar {
    width: 118px !important;
    height: 118px !important;
    margin-bottom: 18px !important;
  }

  body.page-profile .profile-stat {
    font-size: 15px !important;
    padding: 14px 0 !important;
  }

  body.page-profile .inventory-section {
    grid-area: inventory !important;
    width: 100% !important;
  }

  body.page-profile .history-section {
    grid-area: history !important;
    width: 100% !important;
  }

  body.page-profile .inventory-section > .profile-title,
  body.page-profile .history-section > .profile-title {
    font-size: 26px !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    text-align: left !important;
    transform: none !important;
  }

  body.page-profile .inventory-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(160px, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
    padding-bottom: 0 !important;
  }

  body.page-profile .inventory-grid > div[style*='grid-column'] {
    grid-column: 1 / -1 !important;
    font-size: 16px !important;
  }

  body.page-profile .inventory-item {
    padding: 14px !important;
    border-radius: 20px !important;
  }

  body.page-profile .inventory-item img {
    width: 72% !important;
    padding: 8px !important;
    border-radius: 14px !important;
    margin-bottom: 8px !important;
  }

  body.page-profile .inventory-item > span {
    font-size: 13px !important;
    margin-bottom: 8px !important;
  }

  body.page-profile .inventory-item > div {
    gap: 8px !important;
  }

  body.page-profile .sell-btn,
  body.page-profile .withdraw-btn {
    font-size: 12px !important;
    padding: 10px 8px !important;
    border-radius: 12px !important;
  }

  body.page-profile .history-columns {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  body.page-profile .history-panel {
    padding: 16px !important;
    border-radius: 22px !important;
  }

  body.page-profile .history-panel-title {
    font-size: 18px !important;
    margin-bottom: 12px !important;
  }

  body.page-profile .history-item {
    padding: 12px !important;
    gap: 12px !important;
    border-radius: 16px !important;
  }

  body.page-profile .history-item-icon {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    padding: 8px !important;
    border-radius: 14px !important;
  }

  body.page-profile .history-item-title {
    font-size: 14px !important;
  }

  body.page-profile .history-item-subtitle,
  body.page-profile .history-item-time,
  body.page-profile .history-item-value,
  body.page-profile .history-status,
  body.page-profile .history-panel-title span:last-child {
    font-size: 12px !important;
  }

  body.page-upgrade #page-content {
    padding-top: 8px !important;
  }

  body.page-upgrade .upgrade-wrap {
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: 420px minmax(0, 1fr) !important;
    grid-template-areas:
      'ring craft'
      'ring inventory' !important;
    align-items: start !important;
    gap: 20px 24px !important;
  }

  body.page-upgrade .ring-card {
    grid-area: ring !important;
    margin: 0 !important;
    padding: 22px 18px 22px !important;
    position: sticky !important;
    top: 96px !important;
  }

  body.page-upgrade .craft-card {
    grid-area: craft !important;
    margin: 0 !important;
    padding: 16px !important;
    border-radius: 22px !important;
  }

  body.page-upgrade .inv-card {
    grid-area: inventory !important;
    margin: 0 !important;
    padding: 16px !important;
    border-radius: 22px !important;
  }

  body.page-upgrade .ring {
    width: min(330px, 100%) !important;
  }

  body.page-upgrade .upgrade-btn {
    width: 100% !important;
    max-width: 280px !important;
    font-size: 15px !important;
    padding: 14px 18px !important;
    border-radius: 16px !important;
    margin-top: 18px !important;
  }

  body.page-upgrade .craft-grid {
    grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  body.page-upgrade .slot {
    min-height: 92px !important;
  }

  body.page-upgrade .slot-title,
  body.page-upgrade .inv-title {
    font-size: 15px !important;
  }

  body.page-upgrade .slot-item,
  body.page-upgrade .inv-item {
    font-size: 13px !important;
  }

  body.page-upgrade .inv-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(130px, 160px)) !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  body.page-upgrade .sheet-panel {
    max-width: min(960px, calc(100vw - 110px)) !important;
  }

  body.page-upgrade .sheet-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}


/* === v35: case desktop width + mobile/footer/nav tune === */
@media (max-width: 768px) {
  body.page-case-open .header {
    padding-top: clamp(58px, calc(var(--vp-safe-top) + 30px), 92px) !important;
    padding-bottom: 10px !important;
  }

  body.page-case-open #page-content {
    padding-top: 0 !important;
  }

  .footer button {
    font-size: clamp(8.9px, 2.48vw, 10.2px) !important;
  }
}

@media (min-width: 1024px) and (orientation: landscape) {
  body.page-case-open #page-content {
    width: min(1450px, calc(100vw - 36px)) !important;
    max-width: none !important;
    padding-top: 0 !important;
    padding-bottom: 116px !important;
  }

  body.page-case-open .header {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 58px minmax(300px, 440px) minmax(280px, 1fr) !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 14px 0 10px !important;
  }

  body.page-case-open .back-button {
    width: 48px !important;
    height: 48px !important;
    border-radius: 16px !important;
    justify-self: start !important;
  }

  body.page-case-open .nickname-box {
    justify-self: start !important;
    max-width: min(440px, 100%) !important;
    font-size: 16px !important;
    padding: 11px 18px !important;
  }

  body.page-case-open .balance-container {
    justify-self: end !important;
  }

  body.page-case-open .balance-box {
    max-width: none !important;
    font-size: 16px !important;
    padding: 11px 18px !important;
  }

  body.page-case-open .balance-plus-circle {
    --vp-plus: 38px !important;
  }

  body.page-case-open .roulette-container {
    width: min(100%, 1160px) !important;
    height: clamp(220px, 22vw, 310px) !important;
    margin: 20px auto 0 !important;
    border-radius: 30px !important;
  }

  body.page-case-open .roulette-strip img {
    width: clamp(150px, 12vw, 210px) !important;
    height: clamp(150px, 12vw, 210px) !important;
    margin: 0 12px !important;
    padding: 14px !important;
    border-radius: 22px !important;
  }

  body.page-case-open .center-indicator {
    width: 4px !important;
  }

  body.page-case-open .spin-button {
    min-width: 280px !important;
    font-size: 16px !important;
    padding: 14px 24px !important;
    border-radius: 18px !important;
    margin-top: 22px !important;
  }

  body.page-case-open .result-box {
    width: min(720px, 100%) !important;
    margin: 22px auto 0 !important;
    padding: 18px 24px !important;
    border-radius: 24px !important;
  }

  body.page-case-open .result-box > div:first-child {
    font-size: 16px !important;
    margin-bottom: 10px !important;
  }

  body.page-case-open #prizeName {
    font-size: clamp(34px, 2.2vw, 42px) !important;
  }

  body.page-case-open .result-actions {
    gap: 14px !important;
    margin-top: 18px !important;
  }

  body.page-case-open .collect-btn,
  body.page-case-open .sell-btn {
    font-size: 15px !important;
    padding: 14px 18px !important;
    border-radius: 16px !important;
  }

  body.page-case-open .drops-section {
    width: 100% !important;
    margin: 34px auto 0 !important;
  }

  body.page-case-open .drops-title {
    font-size: 32px !important;
    margin-bottom: 16px !important;
  }

  body.page-case-open .drops-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  body.page-case-open .drop-card {
    padding: 16px !important;
    border-radius: 22px !important;
    gap: 14px !important;
    min-height: 126px !important;
  }

  body.page-case-open .drop-icon {
    width: 78px !important;
    height: 78px !important;
  }

  body.page-case-open .drop-icon.star {
    width: 72px !important;
    height: 72px !important;
  }

  body.page-case-open .drop-name {
    font-size: 18px !important;
  }

  body.page-case-open .drop-value {
    font-size: 15px !important;
    gap: 8px !important;
  }
}


/* === v36: desktop case polish + compact desktop modals + smaller mobile nav === */
@media (max-width: 768px) {
  .footer button {
    font-size: clamp(7.9px, 2.16vw, 9.1px) !important;
    gap: 4px !important;
  }

  .footer button svg {
    width: clamp(17px, 4.7vw, 22px) !important;
    height: clamp(17px, 4.7vw, 22px) !important;
  }
}

body.page-case-open #prizeName {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  min-height: 88px;
  color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #ffffff !important;
  line-height: 1.04 !important;
  text-align: center !important;
}

body.page-case-open .result-prize {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

body.page-case-open .result-prize-icon {
  width: clamp(72px, 8.8vw, 118px);
  height: clamp(72px, 8.8vw, 118px);
  object-fit: contain;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.32));
}

body.page-case-open .result-prize-star .result-prize-icon {
  width: clamp(88px, 9.4vw, 132px);
  height: clamp(88px, 9.4vw, 132px);
  filter: drop-shadow(0 0 22px rgba(255, 212, 90, .30));
}

body.page-case-open .result-prize-label {
  font-size: clamp(24px, 2vw, 34px);
  font-weight: 800;
  color: #ffffff;
}

@media (min-width: 1024px) and (orientation: landscape) {
  body.page-case-open #page-content {
    width: min(1490px, calc(100vw - 28px)) !important;
    padding-bottom: 116px !important;
  }

  body.page-case-open .header {
    width: min(1490px, calc(100vw - 28px)) !important;
    grid-template-columns: 56px minmax(320px, 1fr) auto !important;
    gap: 18px !important;
    padding: 12px 0 10px !important;
  }

  body.page-case-open .nickname-box {
    justify-self: start !important;
    width: min(360px, 100%) !important;
  }

  body.page-case-open .roulette-container {
    width: min(100%, 1240px) !important;
    height: clamp(180px, 18vw, 245px) !important;
    margin: 12px auto 0 !important;
    border-radius: 28px !important;
  }

  body.page-case-open .roulette-strip img {
    width: clamp(126px, 10vw, 176px) !important;
    height: clamp(126px, 10vw, 176px) !important;
    margin: 0 10px !important;
    padding: 12px !important;
    border-radius: 20px !important;
  }

  body.page-case-open .spin-button {
    min-width: 250px !important;
    font-size: 15px !important;
    padding: 12px 20px !important;
    border-radius: 16px !important;
    margin-top: 18px !important;
  }

  body.page-case-open .result-box {
    width: min(680px, 100%) !important;
    margin: 18px auto 0 !important;
    padding: 18px 22px !important;
    border-radius: 24px !important;
  }

  body.page-case-open #prizeName {
    min-height: 110px;
    font-size: 18px !important;
  }

  body.page-case-open .result-actions {
    gap: 12px !important;
    margin-top: 14px !important;
  }

  body.page-case-open .collect-btn,
  body.page-case-open .sell-btn {
    font-size: 14px !important;
    padding: 12px 16px !important;
    border-radius: 14px !important;
  }

  body.page-case-open .drops-section {
    margin-top: 28px !important;
  }

  body.page-case-open .drops-title {
    font-size: 30px !important;
    margin-bottom: 14px !important;
  }

  body.page-case-open .drops-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  body.page-case-open .drop-card {
    min-height: 112px !important;
    padding: 14px !important;
    border-radius: 20px !important;
    gap: 12px !important;
  }

  body.page-case-open .drop-icon {
    width: 66px !important;
    height: 66px !important;
  }

  body.page-case-open .drop-icon.star {
    width: 62px !important;
    height: 62px !important;
  }

  body.page-case-open .drop-name {
    font-size: 16px !important;
  }

  body.page-case-open .drop-value {
    font-size: 14px !important;
    gap: 6px !important;
  }

  body.page-case-open #popup.popup {
    width: min(500px, 92vw) !important;
    max-width: 500px !important;
    padding: 30px 34px !important;
    border-radius: 28px !important;
    font-size: clamp(22px, 1.8vw, 32px) !important;
    line-height: 1.08 !important;
  }

  body.page-case-open #popup.popup p {
    font-size: inherit !important;
  }

  body.page-case-open #popup.popup .close {
    top: 12px !important;
    right: 16px !important;
    font-size: 34px !important;
  }

  #topup-modal > .glass-panel {
    width: min(620px, 92vw) !important;
    padding: 30px !important;
    border-radius: 28px !important;
    text-align: center !important;
  }

  #topup-modal h3 {
    margin-bottom: 16px !important;
    font-size: clamp(30px, 2.4vw, 48px) !important;
    line-height: 1.04 !important;
  }

  #topup-modal input {
    width: 100% !important;
    padding: 16px 18px !important;
    border-radius: 16px !important;
    margin-bottom: 14px !important;
    font-size: clamp(18px, 1.5vw, 24px) !important;
  }

  #topup-modal button {
    width: 100% !important;
    padding: 16px 18px !important;
    border-radius: 16px !important;
    font-size: clamp(18px, 1.5vw, 24px) !important;
    margin-top: 0 !important;
  }

  #topup-modal button + button {
    margin-top: 10px !important;
  }
}


@media (max-width: 768px){
  .footer button{
    font-size: clamp(11px, 2.55vw, 14px) !important;
    padding: 10px 6px !important;
    line-height: 1 !important;
  }
  .footer button svg{
    width: clamp(18px, 5vw, 24px) !important;
    height: clamp(18px, 5vw, 24px) !important;
    margin-bottom: 4px !important;
  }
}

@media (min-width: 980px){
  .page-case-open .footer{ padding: 8px 10px !important; }
  .page-case-open .footer button{ font-size: 14px !important; }
  .page-case-open .footer button svg{ width: 22px !important; height: 22px !important; }
}


/* === v40 overrides: promo + march8 card + mobile footer + upgrade marker === */
body.page-cases .case-card.limited-case{
  width: auto !important;
  justify-self: stretch !important;
  align-self: stretch !important;
}
body.page-cases .case-card.limited-case .case-badge{
  top: 10px !important;
  left: 10px !important;
  padding: 3px 8px !important;
  font-size: 7px !important;
  line-height: 1.05 !important;
  max-width: 58% !important;
  letter-spacing: .05em !important;
  box-shadow: 0 8px 20px rgba(255, 155, 217, .20) !important;
}
body.page-cases .case-card.limited-case .case-image{
  width: 120% !important;
  max-width: none !important;
  margin-left: -10% !important;
  margin-top: 0 !important;
  border-radius: 5vw 5vw 0 0 !important;
  object-fit: contain !important;
}
@media (min-width: 980px){
  body.page-cases .case-card.limited-case .case-badge{
    top: 14px !important;
    left: 14px !important;
    padding: 5px 9px !important;
    font-size: 9px !important;
  }
  body.page-cases .case-card.limited-case .case-image{
    width: 112% !important;
    margin-left: -6% !important;
  }
}
@media (max-width: 768px){
  .footer button{
    font-size: 3.0vw !important;
    letter-spacing: -0.01em !important;
  }
}
body.page-upgrade .marker{
  width: 12px !important;
  height: 54px !important;
  top: 2.8% !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), #c9b6ff 34%, #7f4bff 70%, #60efff 100%) !important;
  box-shadow: 0 0 0 5px rgba(255,255,255,.10), 0 0 16px rgba(255,255,255,.55), 0 0 28px rgba(153,104,255,.48), 0 0 42px rgba(96,239,255,.22) !important;
}
body.page-upgrade .marker::after{
  inset: -10px -7px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(153,104,255,.32), rgba(96,239,255,.18)) !important;
}
#promo-status{
  display:none;
  margin: -4px 0 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  min-height: 18px;
}


/* === v11 global scroll lock + layout safety + lighter initial render === */
html{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
  overscroll-behavior-x: none;
}
body{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
  overscroll-behavior-x: none;
  touch-action: pan-y pinch-zoom;
}
body > *,
#page-content,
main,
.page,
.page-inner,
.header,
.footer,
.main-content,
.cases-grid,
.upgrade-wrap,
.upgrade-shell,
.upgrade-main,
.profile-wrap,
.home-wrap,
.case-card,
.case-grid,
.case-open-wrap,
.case-page,
.roulette-shell,
.roulette-container,
.result-card,
.case-info-card,
.wheel-modal,
.modal-card,
.glass-panel{
  max-width: 100%;
}
img, svg, canvas, video{
  max-width: 100%;
}
#page-content,
main,
.page,
.page-inner,
.main-content{
  overflow-x: hidden !important;
}
body.page-upgrade .inv-row{
  overflow-x: clip !important;
  overflow-y: visible !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  touch-action: pan-y !important;
}
body.page-upgrade .inv-item{
  flex: 1 1 clamp(124px, 42vw, 156px) !important;
  max-width: 156px !important;
}
@media (min-width: 960px){
  body.page-upgrade .inv-row{
    justify-content: flex-start !important;
    gap: 10px !important;
  }
  body.page-upgrade .inv-item{
    flex: 0 0 138px !important;
    max-width: 138px !important;
  }
}
/* Light render mode for weaker devices / slow data */
html.vp-lite body::before{
  animation-duration: 28s;
  opacity: .58;
  filter: saturate(.92);
}
html.vp-lite body::after{
  opacity: .035;
}
html.vp-lite .glass-panel::after,
html.vp-lite .spin-button::after,
html.vp-lite .collect-btn::after,
html.vp-lite .sell-btn::after,
html.vp-lite .nav-btn::after,
html.vp-lite .withdraw-btn::after,
html.vp-lite .sell-inv-btn::after{
  animation: none !important;
}
html.vp-lite .glass-panel{
  box-shadow:
    0 14px 34px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 24px rgba(176,106,179,.08) !important;
}


/* ===== UNIFIED HEADER: consistent across all pages ===== */
/* Ensure header-left is always a flex row with correct behavior */
.header {
  overflow: visible !important;
}

.header-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.header-left > .nickname-box {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Balance container must allow the plus circle to overflow */
.balance-container {
  position: relative !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
}

/* Plus button: positions itself overlapping left edge of balance-box by ~50% */
.balance-plus-circle {
  --vp-plus: clamp(32px, 8.6vw, 40px);
  position: absolute !important;
  left: calc(var(--vp-plus) * -0.5) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 20 !important;
  width: var(--vp-plus) !important;
  height: var(--vp-plus) !important;
  pointer-events: auto !important;
}

/* Balance box: pad-left gives room for the half-overlapping plus circle */
.balance-box {
  padding-left: calc(var(--vp-plus, 34px) * 0.6 + 10px) !important;
  overflow: visible !important;
}

/* Desktop: slightly larger plus and appropriate padding */
@media (min-width: 769px) {
  .balance-plus-circle {
    --vp-plus: clamp(36px, 3.6vw, 44px) !important;
  }
  .balance-box {
    padding-left: calc(var(--vp-plus, 40px) * 0.6 + 12px) !important;
  }
}


/* ===================================================
   PERFORMANCE OPTIMIZATIONS
   =================================================== */

/* Reduce heavy blur on low-end / mobile devices */
@media (max-width: 768px) {
  .orb {
    filter: blur(40px) !important;
    opacity: 0.55 !important;
    will-change: auto !important;
    animation: none !important;
  }

  /* Reduce glass panel blur on mobile for speed */
  .glass-panel {
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  /* Remove animated gradient background (uses GPU) */
  body {
    animation: none !important;
  }

  /* Reduce body aurora overlay */
  body::before {
    opacity: 0.5 !important;
  }
  body::after {
    display: none !important;
  }
}

/* GPU compositing only where needed */
.roulette-strip,
.multiplier-wheel,
.loader-spinner {
  transform: translateZ(0);
  will-change: transform;
}

/* Prevent font blowout in all containers */
.nickname-box,
.balance-box,
.drop-name,
.drop-value,
.history-item-title,
.history-item-subtitle,
.history-item-time,
.stat-label,
.stat-value,
.result-actions button,
.hero-subtitle,
.hero-note,
.drops-subline {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Global: prevent any element from causing horizontal scroll */
* {
  max-width: 100%;
}

/* Clamp all vw-based font sizes to reasonable min/max */
.drop-name { font-size: clamp(12px, 4vw, 20px) !important; }
.drop-value { font-size: clamp(11px, 3.6vw, 18px) !important; }
.history-item-title { font-size: clamp(12px, 3.6vw, 17px) !important; }
.history-panel-title { font-size: clamp(13px, 4.2vw, 20px) !important; }
.drops-title { font-size: clamp(16px, 5vw, 26px) !important; }

/* Cases grid: never overflow */
.cases-grid, .drops-grid, .inventory-grid {
  min-width: 0;
  width: 100% !important;
}

/* Card text overflow protection */
.case-card, .drop-card, .inventory-item {
  min-width: 0;
  overflow: hidden;
}

/* Buttons: text must never overflow */
button, .spin-button, .collect-btn, .sell-btn, .withdraw-btn {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Result box: ensure content doesn't push layout */
.result-box {
  min-width: 0;
  overflow: hidden;
}

.result-content {
  min-width: 0;
  overflow: hidden;
}

#prizeName {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}

/* Contain layout paint in heavy animation regions */
.roulette-container {
  contain: layout paint style;
}

.multiplier-overlay {
  contain: layout;
}

/* Profile avatar: always square, never squishes */
.profile-avatar {
  flex-shrink: 0 !important;
  aspect-ratio: 1 / 1 !important;
}

/* Footer label: FIXED px, no vw/vh ever */
.footer button {
  font-size: 12px !important;
}
.footer button svg {
  width: 24px !important;
  height: 24px !important;
}

/* Safe area bottom padding */
.footer {
  padding-bottom: calc(env(safe-area-inset-bottom) + 10px) !important;
}

/* Tiny phone fix (width < 360px) */
@media (max-width: 359px) {
  .nickname-box, .balance-box {
    font-size: 12px !important;
    padding: 8px 10px !important;
  }
  .balance-plus-circle {
    --vp-plus: 28px !important;
  }
  .drop-name { font-size: 11px !important; }
  .drop-value { font-size: 10px !important; }
  .spin-button { font-size: 14px !important; padding: 12px 16px !important; }
}

/* Orbs: never animate, use GPU layer */
.orb {
  animation: none !important;
  will-change: auto !important;
  contain: strict !important;
}

/* Avatar fallback letter */
.player-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: clamp(26px, 9vw, 46px);
  font-weight: 900;
  color: #fff;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  user-select: none;
  border-radius: 50%;
}

/* ═══════════════════════════════════════════════════════════════
   FIX: Star icon always visible in inventory item value cells
   on desktop where grid cells can be very narrow.
   Using !important to override any conflicting max-width:100% rule.
═══════════════════════════════════════════════════════════════ */
.inv-item .val {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
}
.inv-item .val img,
.inv-item .val .star-icon,
.inv-item .val img.star-icon {
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  flex: 0 0 14px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
  vertical-align: middle !important;
  filter: drop-shadow(0 0 3px rgba(255,220,90,.5)) !important;
}

/* ══════════════════════════════════════════════
   UNIFIED NAVBAR — global overrides
   Loaded AFTER all per-template inline styles,
   so these take precedence on every page.
══════════════════════════════════════════════ */

/* Single-row header: brand absolute-centered, balance at right */
body .header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 0 4vw !important;
  padding-top: var(--tg-safe-top, env(safe-area-inset-top, 0px)) !important;
  min-height: calc(var(--tg-safe-top, 0px) + var(--tg-header-h, 46px)) !important;
  gap: 0 !important;
  width: 100% !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 500 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

/* Brand — absolute, fills content area (below safe-inset), centered */
.header .header-brand {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: var(--tg-safe-top, 0px) !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  transform: translateY(-3px) !important;
  z-index: 1 !important;
}

/* Logo — vivid purple outer glow */
.header .header-logo {
  width: 30px !important;
  height: 30px !important;
  object-fit: contain !important;
  filter:
    drop-shadow(0 0 6px rgba(200, 80, 255, .95))
    drop-shadow(0 0 14px rgba(160, 40, 255, .75))
    drop-shadow(0 0 28px rgba(100, 0, 200, .45)) !important;
}

/* Brand name */
.header .header-brand-name {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: .5px !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.4) !important;
}

/* Balance — in flow, right edge, vertically centred in the row */
.header .balance-container {
  flex: 0 0 auto !important;
  align-self: center !important;
  z-index: 2 !important;
}

/* ── Desktop (980 px +): same layout, larger logo/padding ── */
@media (min-width: 980px) {
  body .header {
    padding: 14px 14px 10px !important;
    padding-top: 14px !important;
    min-height: 0 !important;
  }

  .header .header-brand {
    top: 0 !important;
  }

  .header .header-logo {
    width: 36px !important;
    height: 36px !important;
    filter:
      drop-shadow(0 0 8px rgba(200, 80, 255, .95))
      drop-shadow(0 0 18px rgba(160, 40, 255, .75))
      drop-shadow(0 0 36px rgba(100, 0, 200, .45)) !important;
  }

  .header .header-brand-name {
    font-size: 22px !important;
  }

  .header .balance-box,
  .header .balance-container {
    height: 52px !important;
    min-height: 52px !important;
  }
}

/* ══ END UNIFIED NAVBAR GLOBAL OVERRIDES ══ */

/* ── Game pages (phone): balance block a bit higher ─────────────
   Cases pages keep default margin-bottom:8px (set in per-page CSS).
   Game pages get a larger margin-bottom so the balance block sits
   higher within the header area.
───────────────────────────────────────────────────────────────── */
@media (max-width: 979px) {
  body.page-crash .header .balance-container,
  body.page-mines .header .balance-container,
  body.page-plinko .header .balance-container {
    margin-bottom: 14px !important;
    transform: translateY(-5px) !important;
  }
}

/* ── Desktop: guarantee balance is always top-right on all pages ──
   Belt-and-suspenders fix: explicit flex-wrap + right alignment.
───────────────────────────────────────────────────────────────── */
@media (min-width: 980px) {
  body .header {
    flex-wrap: nowrap !important;
  }
  body .header .balance-container {
    flex: 0 0 auto !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}

/* Same fix for target-picker items in the sheet */
.target-item .meta .p {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  white-space: nowrap !important;
}
.target-item .meta .p img,
.target-item .meta .p .star-icon {
  display: inline-block !important;
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
  max-width: 13px !important;
  flex: 0 0 13px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
  vertical-align: middle !important;
}

/* ═══════════════════════════════════════════════════════════════
   CRITICAL FIXES v2 — uniform case cards + desktop header + star icons
═══════════════════════════════════════════════════════════════ */

/* ── FIX 1: Uniform case cards ─────────────────────────────────
   New structure: .case-card > .case-img-wrap > .case-image
                              > .case-name
                              > .case-price
   Goal: all cards same height, image area same size,
   name same baseline, price pinned to bottom.
───────────────────────────────────────────────────────────────*/
body.page-cases .case-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  height: 100% !important;         /* fill grid cell height */
  padding: 0 0 3.5vw !important;
}

/* Fixed-ratio image wrapper — same height on all cards */
body.page-cases .case-img-wrap {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

/* Image fills the wrapper nicely */
body.page-cases .case-img-wrap .case-image,
body.page-cases .case-card .case-img-wrap img {
  width: 82% !important;
  height: 82% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  margin: 0 !important;
  border-radius: 0 !important;
  display: block !important;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.32)) !important;
}

/* Name label — fixed height so buttons align across cards */
body.page-cases .case-name {
  font-size: clamp(12px,3.8vw,15px) !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.85) !important;
  text-align: center !important;
  padding: 0 3vw !important;
  line-height: 1.25 !important;
  min-height: 2.6em !important;       /* reserve exactly 2 lines */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* Price pushed to bottom */
body.page-cases .case-price {
  margin: auto 3vw 0 !important;     /* auto top = pushed down */
  width: calc(100% - 6vw) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .3em !important;
  flex-shrink: 0 !important;
  font-size: clamp(13px,4vw,17px) !important;
  padding: 1.2vh 3vw !important;
  border-radius: clamp(8px,3vw,14px) !important;
}

/* Star inside price button */
body.page-cases .case-price .star-icon,
body.page-cases .case-price img {
  width: 1em !important;
  height: 1em !important;
  min-width: 1em !important;
  max-width: 1em !important;
  flex: 0 0 1em !important;
  object-fit: contain !important;
  vertical-align: middle !important;
}

/* Desktop: 2-column 2-row grid, fixed card proportions */
@media (min-width: 980px) {
  body.page-cases .cases-grid {
    grid-template-columns: repeat(2, minmax(240px, 320px)) !important;
    gap: 22px !important;
    justify-content: center !important;
  }
  body.page-cases .case-card {
    padding: 0 0 18px !important;
  }
  body.page-cases .case-name {
    font-size: 15px !important;
    min-height: 2.4em !important;
  }
  body.page-cases .case-price {
    font-size: 15px !important;
    margin: auto 14px 0 !important;
    width: calc(100% - 28px) !important;
    padding: 10px 16px !important;
    border-radius: 14px !important;
  }
}

/* ── FIX 2: Desktop case-open header ─────────────────────────
   HTML: .header > .header-left(back+nickname) | .balance-container
   Old liquid_plus broke this with a 3-col grid that treated
   header-left as the 58px back-button column, hiding the nickname.
   Fix: use 2-col grid + flex header-left.
───────────────────────────────────────────────────────────────*/
@media (min-width: 980px) {
  body.page-case-open .header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 18px !important;
    width: min(1380px, calc(100vw - 56px)) !important;
    margin: 0 auto !important;
    padding: 14px 0 10px !important;
  }

  body.page-case-open .header-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  body.page-case-open .back-button {
    flex: 0 0 auto !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 16px !important;
  }

  body.page-case-open .header-left .nickname-box {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: 16px !important;
    padding: 12px 20px !important;
    border-radius: 18px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
  }

  body.page-case-open .balance-container {
    flex: 0 0 auto !important;
    justify-self: end !important;
  }

  body.page-case-open .balance-box {
    font-size: 16px !important;
    padding: 12px 20px !important;
    max-width: none !important;
    border-radius: 18px !important;
    white-space: nowrap !important;
  }

  body.page-case-open .balance-plus-circle {
    --vp-plus: 38px !important;
  }
}

/* Also override the landscape 3-col grid that was breaking things */
@media (min-width: 1024px) and (orientation: landscape) {
  body.page-case-open .header {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
  body.page-case-open .header-left {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-width: 0 !important;
  }
  body.page-case-open .back-button {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
  }
  body.page-case-open .header-left .nickname-box {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: min(500px, calc(100vw - 300px)) !important;
    font-size: 17px !important;
  }
}

/* ── FIX 3: Star icon in profile inventory on desktop ──────────
   The rule .inventory-item img { width:76% } hits ALL imgs,
   including the .star-icon inside the value <span>.
   We must specifically protect it with higher specificity.
───────────────────────────────────────────────────────────────*/

/* The value span containing the star + number */
body.page-profile .inventory-item > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
}

/* Protect star icon explicitly — override the 76% width !important rule */
body.page-profile .inventory-item > span > img,
body.page-profile .inventory-item > span img.star-icon,
body.page-profile .inventory-item > span .star-icon {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  min-height: 15px !important;
  max-width: 15px !important;
  max-height: 15px !important;
  flex: 0 0 15px !important;
  object-fit: contain !important;
  vertical-align: middle !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-block !important;
  filter: drop-shadow(0 0 4px rgba(255,220,90,.55)) !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* ── Fix for new .inv-gift-wrap / .inv-gift-val structure ──────────────
   The old broad rule `.inventory-item img { width:76% }` hits EVERY img,
   including .inv-gift-img-el (should be 72%×72%) and the .star-icon in
   .inv-gift-val (should be ~1em, not 76% wide).
   Override both with higher specificity selectors. ──────────────────── */

body.page-profile .inventory-item .inv-gift-img-el {
  width: 72% !important;
  height: 72% !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
}

body.page-profile .inventory-item .inv-gift-val {
  display: block !important;
  text-align: center !important;
  width: 100% !important;
}

body.page-profile .inventory-item .inv-gift-val img,
body.page-profile .inventory-item .inv-gift-val img.star-icon {
  display: inline-block !important;
  vertical-align: middle !important;
  width: 1.15em !important;
  height: 1.15em !important;
  min-width: 1.15em !important;
  max-width: 1.15em !important;
  min-height: 1.15em !important;
  max-height: 1.15em !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  object-fit: contain !important;
}

/* Also target the history section values */
body.page-profile .history-item-value img,
body.page-profile .history-item-value .star-icon {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  max-width: 14px !important;
  flex: 0 0 14px !important;
  object-fit: contain !important;
  vertical-align: middle !important;
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
}


/* ── Balance widget: eliminate shadow/border artifact at left edge ───────
   The glass-panel box-shadow extends to the LEFT of the balance-box, creating
   a dark smear visible behind the green plus-circle.
   Fix: override the box-shadow to only extend right/top/bottom, not left.
   We also add padding-left to make visual room for the circle. ─────────── */
.balance-container .balance-box {
  padding-left: calc(var(--vp-plus, 38px) * 0.58) !important;
  box-shadow:
    18px 18px 55px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.05) inset,
    18px 0 42px rgba(176,106,179,.10) !important;
}

/* ═══════════════════════════════════════════════════════
   BALANCE BAR FIX — remove rectangle artifact & fix plus circle
   ═══════════════════════════════════════════════════════ */

/* 1. Kill glass pseudo-elements on balance-box (they create rectangle) */
.balance-box.glass-panel::before,
.balance-box.glass-panel::after {
  display: none !important;
}

/* 2. Clean glass background without leaking gradients */
.balance-container .balance-box.glass-panel {
  background: rgba(255,255,255,.06) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.3) !important;
  overflow: hidden !important;
  border-radius: clamp(11px, 4vw, 20px) !important;
}

/* 3. Container: NO visual, NO padding-left (so balance-box starts at left:0) */
.header .balance-container {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding-left: 0 !important;
}

/* 4. Plus circle: center on balance-box left edge */
.balance-plus-circle {
  left: 0 !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}
.balance-container:active .balance-plus-circle {
  transform: translate(-50%, -50%) scale(.9) !important;
}

/* 5. Balance text right-aligned */
.balance-container .balance-box {
  justify-content: flex-end !important;
  padding: 0 14px 0 calc(var(--vp-plus, 38px) * 0.55 + 6px) !important;
  height: 48px !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
}

@media (max-width: 768px) {
  .header .balance-container {
    padding-left: 0 !important;
  }
  .balance-plus-circle {
    left: 0 !important;
    transform: translate(-50%, -50%) !important;
  }
  .balance-container:active .balance-plus-circle {
    transform: translate(-50%, -50%) scale(.9) !important;
  }
  .balance-container .balance-box {
    justify-content: flex-end !important;
    padding: 0 14px 0 calc(var(--vp-plus, 34px) * 0.55 + 6px) !important;
    overflow: hidden !important;
  }
}

@media (min-width: 980px) {
  .balance-container .balance-box {
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 18px 0 calc(var(--vp-plus, 38px) * 0.55 + 8px) !important;
  }
}

/*
 * ██ FINAL LOCK ██
 * Footer font: absolute 12px on mobile, 14px on desktop.
 * No vw, vh, em, %, or clamp() — ever.
 * Placed at the very end so it wins the cascade.
 */
body .footer button,
body .footer button span,
body .footer button p,
body.page-home .footer button,
body.page-cases .footer button,
body.page-case-open .footer button,
body.page-profile .footer button,
body.page-upgrade .footer button,
body.page-crash .footer button {
  font-size: 12px !important;
  line-height: 1.15 !important;
}
body .footer button svg {
  width: 24px !important;
  height: 24px !important;
}
@media (min-width: 980px) {
  body .footer button,
  body .footer button span,
  body .footer button p,
  body.page-home .footer button,
  body.page-cases .footer button,
  body.page-case-open .footer button,
  body.page-profile .footer button,
  body.page-upgrade .footer button,
  body.page-crash .footer button {
    font-size: 14px !important;
  }
}

/*
 * ██ UPGRADE OVAL FIX ██
 * Kill radial-gradient pseudo-elements on upgrade page cards.
 * Placed at the very end so it wins over .glass-panel::before/::after.
 */
body.page-upgrade .ring-card::before,
body.page-upgrade .craft-card::before,
body.page-upgrade .inv-card::before,
body.page-upgrade .craft-arrow::before{
  background: none !important;
  opacity: 0 !important;
}
body.page-upgrade .ring-card::after,
body.page-upgrade .craft-card::after,
body.page-upgrade .inv-card::after,
body.page-upgrade .craft-arrow::after{
  background: none !important;
  opacity: 0 !important;
}
body.page-upgrade .ring-card,
body.page-upgrade .craft-card,
body.page-upgrade .inv-card{
  box-shadow: none !important;
}

/* ── Balance block: plus circle exact centering ── */
/* Remove asymmetric container padding so top:50% aligns with centre of balance-box */
body .header .balance-container { padding: 0 !important; }
/* Force plus circle to start from left:0 of container; transform does the rest */
body .header .balance-plus-circle { left: 0 !important; top: 50% !important; transform: translate(-50%,-50%) !important; }
body .header .balance-container:active .balance-plus-circle { left: 0 !important; top: 50% !important; transform: translate(-50%,-50%) scale(.9) !important; }

/* ═══ FINAL DESKTOP FULL-WIDTH HEADER ═══
 * Must be LAST in the file: same !important level as v33/v34 landscape
 * blocks above, but later source position wins the tie-break.
 * Selectors echo those in v33/v34 to guarantee equal specificity.
 * ───────────────────────────────────────────────────────────────── */
@media (min-width: 980px) {
  /* 1. Force every header to span the full viewport width */
  .header,
  body .header,
  body.page-home .header,
  body.page-cases .header,
  body.page-profile .header,
  body.page-upgrade .header,
  body.page-play .header,
  body.page-crash .header,
  body.page-mines .header,
  body.page-plinko .header,
  body.page-leaderboard .header,
  body.page-referral .header,
  body.page-case-open .header {
    width: 100% !important;
    margin: 0 !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
    box-sizing: border-box !important;
  }

  /* 2. Balance block: flush to viewport right edge, vertically centred */
  body .header .balance-container,
  body.page-home .header .balance-container,
  body.page-cases .header .balance-container,
  body.page-profile .header .balance-container,
  body.page-upgrade .header .balance-container,
  body.page-play .header .balance-container,
  body.page-crash .header .balance-container,
  body.page-mines .header .balance-container,
  body.page-plinko .header .balance-container,
  body.page-leaderboard .header .balance-container,
  body.page-referral .header .balance-container,
  body.page-case-open .header .balance-container {
    flex: 0 0 auto !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    position: relative !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
  }

  /* 3. Logo+name: centred on both axes → same visual height as the balance box */
  body .header .header-brand,
  body.page-home .header .header-brand,
  body.page-cases .header .header-brand,
  body.page-profile .header .header-brand,
  body.page-upgrade .header .header-brand,
  body.page-play .header .header-brand,
  body.page-crash .header .header-brand,
  body.page-mines .header .header-brand,
  body.page-plinko .header .header-brand,
  body.page-leaderboard .header .header-brand,
  body.page-referral .header .header-brand,
  body.page-case-open .header .header-brand {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   v35 LAYOUT RESTORE — correct flex-column "app shell" layout
   Root cause fixed: earlier @media blocks set
     body.page-case-open / body.page-home / body.page-profile
     to { height:auto; overflow-y:auto } which:
       • breaks body.page-case-open → #page-content loses scroll,
         header flows with the window and appears to scroll
       • breaks body.page-profile in app.html → .tabs-container
         loses its height (flex:1 with no bound parent) →
         .tab-panel{position:absolute;inset:0} collapses to 0px →
         profile tab content disappears / doesn't scroll
   Fix strategy: place IDENTICAL selectors later in the file.
   Same specificity + later source order = our rules win the
   !important cascade over the landscape/980px blocks above.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Desktop ≥ 980px ───────────────────────────────────── */
@media (min-width: 980px) {

  /* 1. Case-open pages: fixed-height flex-column, only #page-content scrolls */
  body.page-case-open {
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  body.page-case-open #page-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: clip !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 2. App SPA pages: same fixed-height flex-column layout */
  body.page-home,
  body.page-play,
  body.page-profile,
  body.page-upgrade {
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* tabs-container: bounded flex area (needs explicit flex to work) */
  body.page-home .tabs-container,
  body.page-play .tabs-container,
  body.page-profile .tabs-container,
  body.page-upgrade .tabs-container {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }
  /* tab-panels: absolutely fill the tabs-container, scroll internally */
  body.page-home .tab-panel,
  body.page-play .tab-panel,
  body.page-profile .tab-panel,
  body.page-upgrade .tab-panel {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ── Landscape desktop ≥ 1024px ────────────────────────── */
/* Duplicate to beat the more-specific landscape block above */
@media (min-width: 1024px) and (orientation: landscape) {

  body.page-case-open {
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
  }
  body.page-case-open #page-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: clip !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.page-home,
  body.page-play,
  body.page-profile,
  body.page-upgrade {
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
  }
  body.page-home .tabs-container,
  body.page-play .tabs-container,
  body.page-profile .tabs-container,
  body.page-upgrade .tabs-container {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }
  body.page-home .tab-panel,
  body.page-play .tab-panel,
  body.page-profile .tab-panel,
  body.page-upgrade .tab-panel {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ══ PROFILE PAGE: desktop two-column layout ══ */
@media (min-width: 980px) {
  body.page-profile .profile-title.page-title {
    margin-bottom: 10px !important;
    font-size: clamp(26px, 2.5vw, 36px) !important;
  }
  body.page-profile .profile-layout {
    display: flex !important;
    flex-direction: row !important;
    gap: 24px !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
  }
  body.page-profile .profile-left-col {
    width: 320px !important;
    min-width: 320px !important;
    max-width: 320px !important;
    position: sticky !important;
    top: 10px !important;
    align-self: flex-start !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    z-index: 15 !important;
  }
  body.page-profile .profile-left-col .profile-card {
    margin-bottom: 0 !important;
    margin-inline: 0 !important;
    max-width: 100% !important;
    padding: 18px !important;
    border-radius: 22px !important;
  }
  body.page-profile .profile-left-col .profile-avatar {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    margin-bottom: 12px !important;
  }
  body.page-profile .profile-left-col .profile-stat {
    font-size: 14px !important;
    padding: 10px 0 !important;
  }
  body.page-profile .profile-left-col .referral-entry-btn {
    min-height: 44px !important;
    font-size: 14px !important;
    border-radius: 14px !important;
    margin-top: 8px !important;
  }
  body.page-profile .profile-left-col .voucher-block {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    max-width: 100% !important;
    padding: 16px !important;
  }
  body.page-profile .profile-right-col {
    flex: 1 !important;
    min-width: 0 !important;
  }
  body.page-profile .inventory-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 18px !important;
  }
  body.page-profile .inventory-item {
    border-radius: 18px !important;
    padding: 16px !important;
  }
  body.page-profile .history-columns {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  body.page-profile .inventory-glass-wrap {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
  body.page-profile #page-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: left !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
  }
  /* Reset all grid-area assignments from earlier rules */
  body.page-profile .profile-card,
  body.page-profile .voucher-block,
  body.page-profile .inventory-section,
  body.page-profile .history-section,
  body.page-profile #page-content > .profile-title:first-child {
    grid-area: unset !important;
  }
  body.page-profile .profile-card {
    position: static !important;
    top: auto !important;
  }
  body.page-profile .profile-title.page-title {
    text-align: left !important;
    font-size: clamp(26px, 2.5vw, 36px) !important;
    margin-bottom: 10px !important;
  }
  body.page-profile .profile-left-col::-webkit-scrollbar {
    display: none;
  }
}

/* ── Desktop: enlarge gift icons +20% ─────────────────────────────── */
@media (min-width: 960px) {
  /* Upgrade page: inventory item icon 74→89px */
  body.page-upgrade .inv-item .img {
    width: 89px !important;
    height: 89px !important;
  }

  /* Profile page: inventory gift image 72%→86% */
  body.page-profile .inventory-item .inv-gift-img-el {
    width: 86% !important;
    height: 86% !important;
  }

  /* Profile page: history drop/upgrade icons 54→65px */
  body.page-profile .history-item-icon {
    width: 65px !important;
    height: 65px !important;
    min-width: 65px !important;
  }
}

/* end of file */