html, body[data-screen] { background: #04040b !important; }
body { isolation: isolate; }
.ast60-backdrop {
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: url('assets/ast/reference/space-v60.svg') center / cover no-repeat;
}

/* Keep the fixed navigation and balance surfaces off the live blur path. */
#tabbar:not([hidden]), #app .topbar, #app .topbar .glass, .ast44-home .h37-profile {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body:not(.is-intro)::after {
  height: calc(var(--ast48-dock-height) + var(--ast48-dock-bottom) + 12px);
  background: linear-gradient(180deg, transparent, #04040be8 72%);
}
.ast44-home .h37-profile {
  background-color: #080711;
  border-radius: 999px;
}
.ast44-home .ast44-slide {
  min-height: calc(clamp(155px, 44cqw, 284px) + var(--ast59-banner-tail));
}
.ast44-home .ast44-slide-daily::after { mix-blend-mode: normal; }
@keyframes ast48-portal-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.055); }
}

.ast60-shortcuts, .ast60-game-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.8cqw;
}
.ast60-tile, .ast60-hero, .ast60-ref-box {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  border: 1px solid #56417396;
  border-radius: clamp(14px, 3.7cqw, 25px);
  background: radial-gradient(ellipse at 0 0, #25143d, #0d0918 60%, #080711);
  box-shadow: inset 0 1px #c9a4ff0c;
}
.ast60-tile {
  color: #f9f4ff;
  text-align: left;
}
.ast60-tile > :is(strong, small, span) { position: relative; z-index: 1; }
.ast60-tile:active { border-color: #a87ef8; }
.ast60-tile > strong {
  display: block;
  font-size: clamp(15px, 4.15cqw, 29px);
  line-height: 1.05;
  font-weight: 780;
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.ast60-shortcuts .ast60-tile {
  display: flex;
  flex-direction: column;
  min-height: clamp(148px, 44cqw, 288px);
  padding: clamp(12px, 4cqw, 26px);
}
.ast60-shortcuts .ast60-tile:not(.ast60-tile-small) > strong { color: #ce8bff; }
.ast60-shortcuts .ast60-tile-small {
  justify-content: space-between;
  min-height: clamp(87px, 25.7cqw, 168px);
  background: linear-gradient(112deg, #231436, #090813 80%);
}
.ast60-tile-small small {
  font-size: clamp(10px, 2.65cqw, 17px);
  line-height: 1.2;
  color: #cabddc;
}
.ast60-tile-small b { color: #bf92ff; }
.ast60-tile-collection { background: radial-gradient(ellipse at 83% 100%, #37215f, #120b20 64%, #090711); }
.ast60-tile-cta, .ast60-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: clamp(33px, 8.4cqw, 55px);
  padding: .45em .65em;
  border-radius: 999px;
  color: #fff;
  font-size: clamp(11px, 2.75cqw, 18px);
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}
.ast60-tile-cta {
  align-self: stretch;
  margin-top: auto;
  background: linear-gradient(102deg, #422368, #103659);
}
.ast60-primary {
  width: fit-content;
  background: linear-gradient(105deg, #a744f7, #087df2);
  padding-inline: clamp(15px, 4.3cqw, 29px);
}
.ast60-primary .ic, .ast60-tile-cta .ic { width: 1.15em; height: 1.15em; }
.ast60-sprite {
  position: absolute;
  z-index: 0;
  aspect-ratio: 1;
  background: url('assets/ast/reference/home-art-v60.webp') no-repeat;
  background-size: 200% 200%;
  pointer-events: none;
}
.ast60-sprite-cards { width: 69%; top: 17%; left: 15.5%; background-position: 0 0; }
.ast60-sprite-pass { width: 52%; top: -9%; right: -8%; background-position: 100% 100%; }
.ast60-sprite-wallet { width: 48%; bottom: -18%; right: -10%; background-position: 100% 0; }
.ast60-sprite-trophies { width: 47%; right: -2%; top: 50%; transform: translateY(-48%); background-position: 0 100%; }
.ast60-pass-status {
  display: flex;
  align-items: center;
  gap: .45em;
  margin-block: auto;
  color: #c3aed9;
  font-size: clamp(10px, 2.4cqw, 16px);
}
.ast60-pass-status .ic { width: 1.1em; height: 1.1em; color: #63bdff; }
.ast60-tile-friends img {
  position: absolute;
  width: 62%;
  height: 100%;
  object-fit: cover;
  object-position: center 63%;
  right: -8%;
  bottom: 0;
  mask-image: linear-gradient(90deg, transparent, #000 42%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 42%);
}
.ast60-spin-strip, .ast60-game-rank {
  display: flex;
  align-items: center;
  gap: 3cqw;
  min-height: clamp(48px, 14cqw, 94px);
  padding: 1.4cqw 3.4cqw 1.4cqw 1.4cqw;
}
.ast60-spin-strip img {
  width: clamp(40px, 11.6cqw, 76px);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 2cqw;
}
.ast60-spin-strip strong, .ast60-game-rank strong { display: block; font-size: clamp(14px, 3.65cqw, 24px); }
.ast60-spin-strip small, .ast60-game-rank small { color: #bcaccf; font-size: clamp(10px, 2.7cqw, 18px); }
.ast60-spin-strip > .ic, .ast60-game-rank > .ic:last-child { margin-left: auto; color: #ca9cf5; }
.ast60-leaders {
  min-height: clamp(104px, 27cqw, 176px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3.5cqw 4cqw;
  border-color: #9d764e88;
  background: radial-gradient(ellipse at 86% 56%, #493018, #1c1317 48%, #0c090e 82%);
}
.ast60-leaders strong { display: block; color: #ffae51; font-size: clamp(20px, 5.1cqw, 34px); text-transform: uppercase; }
.ast60-leaders b { display: block; color: #ffdb87; font-size: clamp(11px, 2.95cqw, 20px); }
.ast60-leaders small { display: block; color: #e6cfc2; font-size: clamp(10px, 2.6cqw, 17px); }
.ast60-leaders .ic { z-index: 1; color: #ffe2ab; }

body:is([data-screen=game], [data-screen=referral], [data-screen=roles], [data-screen=clans], [data-screen=clan], [data-screen=shop], [data-screen=battle]) .topbar {
  display: none !important;
}
body:is([data-screen=game], [data-screen=referral], [data-screen=roles], [data-screen=clans], [data-screen=clan], [data-screen=shop], [data-screen=battle]) #view {
  --ast56-view-top: clamp(8px, 2.12vw, 15px);
  padding-top: var(--ast56-view-top) !important;
}
.ast60-page.ast44-home { gap: clamp(9px, 2.6cqw, 17px); }
.ast60-game-heading { padding-inline: 1cqw; }
.ast60-game-heading h1 { font-size: clamp(23px, 6.2cqw, 40px); }
.ast60-game-heading p, .ast60-hero p { color: #d4c4e5; font-size: clamp(11px, 3.05cqw, 20px); }
.ast60-hero {
  display: flex;
  align-items: center;
  min-height: clamp(155px, 44cqw, 287px);
  padding: 4.5cqw;
}
.ast60-hero-copy { position: relative; z-index: 1; width: 61%; }
.ast60-hero-copy :is(h1, h2) {
  font-size: clamp(20px, 5.9cqw, 39px);
  font-weight: 850;
  letter-spacing: -.045em;
  line-height: 1.03;
}
.ast60-hero-copy p { margin-top: 2cqw; }
.ast60-hero-copy .ast60-primary { margin-top: 3cqw; }
.ast60-kicker {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  margin-bottom: 1.8cqw;
  color: #ce96ff;
  font-size: clamp(9px, 2.3cqw, 15px);
  font-weight: 800;
  letter-spacing: .12em;
}
.ast60-kicker .ic { width: 1.2em; height: 1.2em; }
.ast60-game-hero {
  background: radial-gradient(ellipse at 81% 50%, #49246c, #170e2c 63%, #0b0815);
}
.ast60-game-hero > img {
  position: absolute;
  right: 1%;
  top: 9%;
  width: 48%;
  height: 82%;
  object-fit: contain;
}
.ast60-game-shortcut {
  display: flex;
  flex-direction: column;
  min-height: clamp(126px, 38cqw, 249px);
  padding: 3.2cqw;
}
.ast60-game-shortcut strong { font-size: clamp(13px, 3.8cqw, 25px); }
.ast60-game-shortcut small { color: #e1d1ed; font-size: clamp(10px, 2.6cqw, 17px); margin-top: .5em; }
.ast60-game-shortcut img {
  position: absolute;
  inset: auto 0 0 auto;
  width: 100%;
  height: 91%;
  object-fit: cover;
  object-position: right;
  mask-image: linear-gradient(160deg, transparent 16%, #000 84%);
  -webkit-mask-image: linear-gradient(160deg, transparent 16%, #000 84%);
}
.ast60-game-rank { padding-left: 4cqw; }
.ast60-game-rank > .ic:first-child { color: #ffbe6b; }

.ast60-invite-tabs, .ast60-invite-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6cqw;
}
.ast60-invite-tabs button {
  min-width: 0;
  min-height: clamp(37px, 10.2cqw, 65px);
  padding: 0 .25em;
  border: 1px solid #716081;
  border-radius: 999px;
  color: #d3c8df;
  font-size: clamp(10px, 2.85cqw, 18px);
  font-weight: 800;
  text-transform: uppercase;
}
.ast60-invite-tabs [aria-pressed=true] {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(110deg, #201231, #111627) padding-box, linear-gradient(110deg, #b57aff, #229df8) border-box;
}
.ast60-invite-pane { display: grid; gap: clamp(9px, 2.6cqw, 17px); }
.ast60-invite-hero { min-height: clamp(142px, 42cqw, 274px); }
.ast60-invite-hero .ast60-hero-copy { width: 72%; align-self: flex-start; }
.ast60-invite-hero h1 { text-transform: uppercase; }
.ast60-invite-hero > img {
  position: absolute;
  inset: auto -1% -1% auto;
  width: 54%;
  height: 85%;
  object-fit: cover;
  object-position: center 66%;
  mask-image: radial-gradient(ellipse at 77% 82%, #000 36%, transparent 73%);
  -webkit-mask-image: radial-gradient(ellipse at 77% 82%, #000 36%, transparent 73%);
}
.ast60-invite-hero p { max-width: 78%; }
.ast60-invite-reward, .ast60-amount { display: inline-flex; align-items: center; gap: .24em; }
.ast60-invite-reward { margin-top: 2.2cqw; gap: .4em; font-size: clamp(16px, 5cqw, 33px); font-weight: 850; }
.ast60-invite-reward > span:not(.ast60-amount) { color: #a591b9; }
.ast60-amount img { width: 1.05em; height: 1.05em; }
.ast60-invite-stats > div {
  display: grid;
  align-content: center;
  gap: .3em;
  min-height: clamp(60px, 17.5cqw, 115px);
  padding: 2.25cqw;
  border: 1px solid #4d386c82;
  border-radius: clamp(10px, 3.2cqw, 21px);
  background: linear-gradient(135deg, #21122f, #0a0815 83%);
}
.ast60-invite-stats strong { font-size: clamp(14px, 4.55cqw, 29px); line-height: 1.1; overflow-wrap: anywhere; }
.ast60-invite-stats .ast60-amount { flex-wrap: wrap; }
.ast60-invite-stats small { color: #c9b9d5; font-size: clamp(9px, 2.6cqw, 16px); line-height: 1.13; }
.ast60-ref-box {
  display: grid;
  gap: 2cqw;
  padding: 2.6cqw;
  background: linear-gradient(180deg, #26123e, #100b1c 62%, #090711);
}
.ast60-ref-box h2 {
  margin: .1em 0 .15em 1cqw;
  font-size: clamp(12px, 3.2cqw, 21px);
  font-weight: 760;
  text-transform: uppercase;
}
.ast60-ref-link {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: clamp(40px, 11cqw, 70px);
  border: 1px solid #5c4d70;
  padding: .6cqw;
  border-radius: 999px;
  background: #090711;
}
.ast60-ref-link input {
  min-width: 0;
  flex: 1;
  border: 0;
  padding-inline: 2.5cqw;
  color: #f6efff;
  background: transparent;
  text-overflow: ellipsis;
  font: inherit;
  font-size: clamp(16px, 3.2cqw, 22px);
}
.ast60-ref-link button {
  display: grid;
  place-items: center;
  flex: none;
  width: clamp(34px, 9.5cqw, 60px);
  aspect-ratio: 1;
  color: #f5e7ff;
  background: #251740;
  border-radius: 50%;
}
.ast60-ref-box .ast60-primary { width: 100%; min-height: clamp(42px, 11cqw, 72px); }
.ast60-ref-empty, .ast60-rules, .ast60-earnings {
  margin: 0;
  border-radius: clamp(10px, 3cqw, 20px);
  background: #080711;
  color: #c3b4d2;
  font-size: clamp(11px, 3.05cqw, 19px);
}
.ast60-ref-empty { padding: 4.5cqw 2.7cqw; text-align: center; }
.ast60-ref-qualified { padding: 0 1cqw; color: #dfc7fa; }
.ast60-rules { padding: 3cqw 3cqw 3cqw 8cqw; }
.ast60-rules li + li { margin-top: .65em; }
.ast60-earnings { padding: 0 2.6cqw; list-style: none; }
.ast60-earnings li { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding: 2cqw 0; }
.ast60-earnings li + li { border-top: 1px solid #382747; }
.ast60-earnings time { display: block; color: #a99ab8; }
.ast60-earnings li > span:last-child { display: flex; gap: .6em; color: #fff; }