:root {
  --ast61-safe-top: max(env(safe-area-inset-top), var(--mafia-safe-top, 0px));
  --ast61-header-gap: clamp(8px, 2.12vw, 15px);
}

/* Keep the document on native scrolling with the balance in its own sticky layer. */
html { scroll-behavior: auto; }
body[data-screen] {
  padding-top: var(--ast61-safe-top);
  overflow-x: clip;
}
#app > .topbar,
body[data-screen=tasks] #app > .topbar {
  position: sticky;
  top: calc(var(--ast61-safe-top) + 8px);
  z-index: 22;
}
.ast44-home .h37-profile {
  top: calc(var(--ast61-safe-top) + var(--ast56-view-top, var(--ast61-header-gap)));
  z-index: 22;
  margin-inline: 0;
  background: none;
}
.ast44-home .h37-profile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: #080711 url('assets/ast/reference/frame-header.svg') center / 100% 100% no-repeat;
  pointer-events: none;
}
#app .view {
  transform: none;
  transition-property: opacity;
}
#app :is(.topbar, .h37-profile)::before {
  content: '';
  position: absolute;
  inset: calc(-1 * (var(--ast61-safe-top) + 24px)) calc(-1 * var(--ast59-page-gutter)) -22px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, #04040b 12%, #04040bd9 calc(100% - 30px), transparent);
  opacity: 0;
  transition: opacity .2s ease-out;
}
body.ast61-page-scrolled #app :is(.topbar, .h37-profile)::before { opacity: 1; }
@supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {
  body.ast61-page-scrolled:not(.spin-open) #app :is(.topbar, .h37-profile)::before {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    -webkit-mask-image: linear-gradient(#000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(#000 calc(100% - 24px), transparent);
  }
}
/* Fullscreen pages without a balance panel still fade beneath Telegram chrome. */
body:is([data-screen=profile], [data-screen=leaders], [data-screen=plans], [data-screen=spin]).ast61-page-scrolled:not(.is-intro)::before {
  content: '';
  position: fixed;
  inset: 0 0 auto;
  height: calc(var(--ast61-safe-top) + 18px);
  z-index: 21;
  pointer-events: none;
  background: linear-gradient(#04040b 42%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  #app :is(.topbar, .h37-profile)::before { transition: none; }
}

.ast44-home > .ast44-carousel { margin-bottom: -3px; }
.ast44-home .ast49-indicators { height: 12px; align-items: center; }
.ast44-home .ast49-indicators button { height: 12px; min-height: 0; }
.ast44-home .ast44-wins h2 { margin-bottom: clamp(5px, 1.6cqw, 10px); }
.ast44-home #h37-feed { scroll-snap-type: x proximity; }
.ast44-home :is(.ast49-track, #h37-feed) { touch-action: pan-x pan-y; }

.ast60-shortcuts .ast60-tile-collection {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(4px, 1.4cqw, 9px);
}
.ast60-shortcuts .ast60-tile-pass {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40%;
  grid-template-rows: 1fr auto auto;
  align-items: center;
  gap: clamp(4px, 1.45cqw, 9px);
}
.ast60-tile-collection .ast60-sprite-cards,
.ast60-tile-pass .ast60-sprite-pass,
.ast60-tile-wallet .ast60-sprite-wallet,
.ast60-leaders .ast60-sprite-trophies {
  position: relative;
  inset: auto;
  transform: none;
  justify-self: center;
}
.ast60-tile-collection .ast60-sprite-cards { width: 62%; align-self: center; }
.ast60-tile-pass .ast60-sprite-pass { width: 100%; }
.ast60-tile-pass :is(.ast60-tile-cta, .ast60-pass-status) { grid-column: 1 / -1; }
.ast60-tile-pass .ast60-pass-status { min-width: 0; margin: 0; line-height: 1.2; }
.ast60-tile-pass .ast60-pass-status .ic { flex: none; }
.ast60-shortcuts .ast60-tile-small {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42%;
  grid-template-rows: auto 1fr;
  align-items: center;
  gap: clamp(5px, 1.6cqw, 10px) 0;
}
.ast60-tile-small > strong { grid-column: 1 / -1; }
.ast60-tile-wallet .ast60-sprite-wallet { width: 100%; }
.ast60-tile-friends img {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 1.15;
  object-fit: cover;
  border-radius: clamp(6px, 1.6cqw, 11px);
  -webkit-mask-image: none;
  mask-image: none;
}
.ast60-leaders {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(44%, 230px);
  gap: 2cqw;
}
.ast60-leaders .ast60-sprite-trophies { width: 100%; align-self: center; }
.ast60-game-hero .ast60-hero-copy { width: 53%; }
.ast60-game-hero > img { width: 44%; right: 2%; }

html:has(body.spin-open) { overflow: hidden; }
body.spin-open #app { filter: none; }
.spin-live-modal {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: none;
  touch-action: pan-y;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: #09051066;
  padding: calc(var(--ast61-safe-top) + 44px) max(12px, var(--mafia-safe-right, 0px))
    calc(var(--ast48-dock-bottom) + var(--ast48-dock-height) + 14px) max(12px, var(--mafia-safe-left, 0px));
}
:is(.spin-live-modal, body[data-screen=spin] #view) .cyber-stage.cyber-detail {
  border: 0;
  background: none;
  box-shadow: none;
}
:is(.spin-live-modal, body[data-screen=spin] #view) .cyber-detail::before,
:is(.spin-live-modal, body[data-screen=spin] #view) .cyber-detail::after { display: none; }
:is(.spin-live-modal, body[data-screen=spin] #view) .wheel-stage {
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.spin-live-modal .wheel-stage {
  width: min(93%, 53dvh);
  margin: 27px auto clamp(12px, 3.5dvh, 28px);
}
:is(.spin-live-modal, body[data-screen=spin] #view) .wheel-painted {
  pointer-events: none;
  border-radius: 50%;
}
:is(.spin-live-modal, body[data-screen=spin] #view) :is(.painted-electric-rim, .painted-core-wave) {
  -webkit-mask-image: radial-gradient(circle closest-side, #000 82%, transparent);
  mask-image: radial-gradient(circle closest-side, #000 82%, transparent);
}
.spin-live-modal .spin-overlay-content { min-width: 0; }
.spin-live-modal .spin-actions .btn { min-height: clamp(48px, 8.6dvh, 66px); }

.ast44-home #h37-feed.ast62-ticker { scroll-snap-type: none; }
.ast59-live::before { box-shadow: 0 0 .55em #ff435d66; }
@media (prefers-reduced-motion: no-preference) {
  .ast59-live::before { animation: ast62-live-pulse 1.65s ease-out infinite; }
  .ast44-sample:nth-child(even) .ast59-live::before { animation-delay: -.55s; }
  .ast62-spin-icon img { animation: ast62-wheel-turn 13s linear infinite; }
}
@keyframes ast62-live-pulse {
  0% { box-shadow: 0 0 0 0 #ff435d91; }
  70%, 100% { box-shadow: 0 0 0 .32em #ff435d00; }
}
@keyframes ast62-wheel-turn { to { transform: rotate(1turn); } }
.ast60-spin-strip .ast62-spin-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: clamp(40px, 11.6cqw, 76px);
  aspect-ratio: 1;
  border-radius: 26%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 46%, #46216a, #140d24 76%);
}
.ast62-spin-icon img {
  width: 94%;
  height: auto;
  object-fit: contain;
  border-radius: 50%;
}
.ast62-pass-details {
  grid-column: 1 / -1;
  display: grid;
  min-width: 0;
  gap: clamp(3px, 1.05cqw, 7px);
}
.ast62-odds {
  display: flex;
  align-items: baseline;
  gap: .45em;
  color: #ead1ff;
  font-size: clamp(11px, 2.55cqw, 17px);
  font-weight: 750;
  line-height: 1.18;
}
.ast62-odds .ic { width: 1.1em; height: 1.1em; color: #d497ff; align-self: center; }
.ast62-odds small { font-size: .88em; font-weight: 550; color: #c5adcf; }
.ast60-shortcuts .ast60-tile-small { grid-template-columns: minmax(0, 1fr) 44%; }
.ast60-tile-small > small {
  font-size: clamp(11px, 3.15cqw, 20px);
  line-height: 1.25;
  font-weight: 650;
}
.ast60-tile-friends img {
  aspect-ratio: 3 / 2;
  object-fit: contain;
  border-radius: 0;
}
.ast60-invite-hero > img {
  inset: auto 3% 6% auto;
  width: 43%;
  height: 69%;
  object-fit: contain;
  object-position: right bottom;
  -webkit-mask-image: none;
  mask-image: none;
}