: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;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.16), transparent 45%),
    radial-gradient(circle at 80% 85%, rgba(176,106,179,.14), transparent 55%);
  opacity: .95;
}

.glass-panel::after{
  content:"";
  position:absolute;
  inset:-70% -60%;
  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{
  /* ~1.5x smaller vs v13 */
  width: clamp(18px, 1.48em, 30px);
  height: clamp(18px, 1.48em, 30px);
  display: inline-block;
  vertical-align: -0.35em;
  margin-right: .28em;
  filter:
    drop-shadow(0 0 8px rgba(255, 220, 90, .95))
    drop-shadow(0 0 18px rgba(255, 220, 90, .45));
}



/* Star icon inside buttons: a bit smaller */
button .star-icon{
  width: clamp(16px, 1.25em, 26px);
  height: clamp(16px, 1.25em, 26px);
  margin-right: .24em;
  vertical-align: -0.3em;
}


/* 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, .balance-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;
}

.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;
}


/* Header layout lock (prevents nickname dropping) */
.header{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}
.header .nickname-box{
  flex: 1 1 auto;
  min-width: 0;
}
.header .balance-container{
  flex: 0 0 auto;
}
.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;
  }

  body{
    overflow-y: auto !important;
  }

  .header{
    width: min(1240px, calc(100% - 48px)) !important;
    margin: 0 auto !important;
    padding: 28px 0 18px !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;
    padding: 30px !important;
    border-radius: 30px !important;
  }

  .profile-stat{
    font-size: 18px !important;
    padding: 18px 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(4, minmax(150px, 1fr)) !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;
  }

  .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 44px !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;
  }

  body.page-case-open .header{
    top: 0 !important;
    padding-top: calc(var(--vp-safe-top) + 7vh) !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{
    width: min(1240px, calc(100vw - 56px)) !important;
    margin: 0 auto !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;
    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"
      "card history" !important;
    align-items: start !important;
    gap: 22px 24px !important;
    justify-content: stretch !important;
    padding-top: 8px !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 !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: min(1180px, calc(100vw - 72px)) !important;
    margin: 0 auto !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: min(1320px, calc(100vw - 88px)) !important;
    margin: 0 auto !important;
    padding: 18px 0 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'
      'card history' !important;
    align-items: start !important;
    gap: 22px 24px !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 !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(4, minmax(0, 1fr)) !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;
  }
  body.page-upgrade .inv-item{
    flex: 1 1 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;
}