@font-face {
  font-family:Manrope;
  src:url('/assets/manrope-latin.woff2') format('woff2');
  font-weight:200 800;
  font-display:swap;
}
@font-face {
  font-family:Manrope;
  src:url('/assets/manrope-cyrillic.woff2') format('woff2');
  font-weight:200 800;
  font-display:swap;
  unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
:root {
  color-scheme:dark;
  --bg:#080e17;
  --surface:#142036;
  --border:#304366;
  --text:#f7f9ff;
  --muted:#b3c5e9;
  --accent:#244bff;
  font-family:Manrope,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  font-synthesis:none;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
}
button,input,a {
  -webkit-tap-highlight-color:transparent;
}
button,input {
  font:inherit;
}
button,a {
  touch-action:manipulation;
}
button {
  color:inherit;
  cursor:pointer;
}
a {
  color:inherit;
  text-decoration:none;
}
button {
  border:0;
}
button:disabled {
  cursor:not-allowed;
  opacity:.45;
}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible {
  outline:2px solid #9dc7ff;
  outline-offset:3px;
}
h1,h2,h3,p {
  margin:0;
}
h1 {
  font-size:20px;
  font-weight:800;
  line-height:1.3;
}
h2 {
  font-size:18px;
  line-height:1.3;
}
p {
  line-height:1.35;
}
img {
  display:block;
}
main:focus {
  outline:none;
}
[hidden] {
  display:none!important;
}
.shell {
  width:100%;
  max-width:430px;
  height:100dvh;
  margin:0 auto;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  padding-top:max(16px,env(safe-area-inset-top));
  background:var(--bg);
}
.balance {
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 14px 16px;
  padding:7px 10px 7px 7px;
  height:64px;
  border:1px solid var(--border);
  border-radius:16px;
  background:linear-gradient(100deg,#1b2941,#10192c);
}
.avatar {
  display:grid;
  place-items:center;
  flex:none;
  width:48px;
  height:48px;
  border-radius:50%;
  background:linear-gradient(#49e5cd,#25c4b5);
  font-weight:800;
  font-size:16px;
}
.balance-copy {
  flex:1;
  min-width:0;
  display:grid;
  gap:4px;
}
.balance-caption {
  padding:0;
  background:none;
  color:var(--muted);
  font-size:10px;
  white-space:nowrap;
  text-align:left;
}
.balance-caption b {
  font-size:8px;
  color:#a1edc9;
}
.balance-copy strong {
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  font-size:17px;
  font-weight:800;
}
.icon {
  width:23px;
  height:23px;
  object-fit:contain;
  flex-shrink:0;
}
.balance .icon {
  width:22px;
  height:22px;
}
.primary {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:0;
  background:linear-gradient(110deg,#667cff,#0639ff);
  color:var(--text);
  border-radius:14px;
  min-height:50px;
  font-size:14px;
  font-weight:800;
  text-align:center;
  padding:10px 14px;
}
.balance>.primary {
  width:136px;
  min-height:42px;
  flex:none;
}
.shell>main {
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:none;
  padding:0 14px 16px;
}
.shell>main::-webkit-scrollbar {
  display:none;
}
.navigation {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  padding:5px 5px max(10px,env(safe-area-inset-bottom));
  border:1px solid var(--border);
  border-radius:22px 22px 0 0;
  background:var(--surface);
  z-index:3;
}
.navigation>a,.navigation>button {
  height:60px;
  background:transparent;
  border-radius:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  font-size:10px;
  font-weight:500;
  padding:0;
  color:var(--muted);
}
.methods [aria-current=page] {
  background:transparent;
  color:var(--text);
}
.navigation .selected .icon,.methods [aria-current=page] .icon {
  filter:brightness(0) invert(1);
}
.home {
  display:grid;
  gap:10px;
}
.live {
  display:flex;
  gap:5px;
  overflow:hidden;
  height:50px;
  align-items:center;
}
.live-label {
  width:28px;
  flex:none;
  display:grid;
  justify-items:center;
  gap:6px;
  font-size:12px;
  font-weight:700;
}
.live-label i {
  width:10px;
  height:10px;
  background:#00eeaa;
  border-radius:50%;
}
.live-gift {
  width:50px;
  height:50px;
  flex:1;
  min-width:0;
  border-radius:10px;
  overflow:hidden;
  background:linear-gradient(120deg,#355ce2,#2f238b);
  border:1px solid #bad6ff33;
}
.live-gift:nth-child(3n) {
  background:linear-gradient(120deg,#32abf3,#155bc3);
}
.live-gift:nth-child(3n+1) {
  background:linear-gradient(120deg,#7958f5,#4531bc);
}
.live-gift img {
  width:100%;
  height:100%;
  object-fit:contain;
}
.banner {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  height:112px;
  border-radius:18px;
  text-align:left;
  padding:0;
  width:100%;
  display:block;
}
.cover {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}
.banner-copy {
  position:absolute;
  left:14px;
  top:10px;
  display:flex;
  flex-direction:column;
  gap:5px;
}
.banner-copy strong {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:28px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:.28px;
}
.banner-copy strong .icon {
  width:28px;
  height:28px;
}
.banner-copy small {
  font-size:13px;
  line-height:1.2;
  font-weight:500;
}
.rocket {
  background:linear-gradient(110deg,#066eca,#17adf1);
}
.hit {
  display:flex;
  gap:4px;
  align-items:center;
  justify-content:center;
  width:68px;
  height:24px;
  background:#f6fdff;
  color:#0755d4;
  font-size:12px;
  font-weight:800;
  border-radius:7px;
}
.hit .icon {
  width:16px;
  height:16px;
}
.rocket-glyph {
  transform:none;
}
.cloud {
  position:absolute;
  object-fit:contain;
}
.far-left {
  left:44%;
  top:51px;
  width:70px;
  height:28px;
}
.far-right {
  left:62%;
  top:26px;
  width:64px;
  height:26px;
}
.middle {
  left:44%;
  top:83px;
  width:106px;
  height:43px;
}
.near-left {
  left:-27px;
  top:85px;
  width:122px;
  height:49px;
}
.hero-cloud {
  right:2px;
  top:45px;
  width:144px;
  height:66px;
}
.rocket-contrast {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#00458fb8,transparent 65%);
}
.rocket-ship {
  position:absolute;
  right:29px;
  top:-3px;
  width:112px;
  height:112px;
  transform:rotate(3deg);
}
.rocket-flame {
  position:absolute;
  left:0;
  top:74%;
  width:32%;
  height:32%;
  transform-origin:96% 4%;
}
.rocket-art {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
}
.sparkles {
  position:absolute;
  left:49%;
  top:14px;
  width:54px;
  height:42px;
}
.multiplier {
  position:absolute;
  color:#a1edc9ed;
  font-weight:500;
  text-shadow:0 1px 1.5px #042e336b;
}
.m1 {
  left:51%;
  top:18px;
  font-size:19px;
}
.m2 {
  right:21px;
  bottom:1px;
  font-size:17px;
}
.m3 {
  left:53%;
  bottom:2px;
  font-size:14px;
}
.m4 {
  right:5px;
  top:42px;
  font-size:15px;
}
.pvp {
  background:linear-gradient(110deg,#f5a00a,#ffd16b);
  color:#3e2a0b;
}
.pvp .banner-copy {
  top:22px;
}
.pvp strong {
  color:var(--text);
}
.pvp .banner-copy strong .icon {
  width:34px;
  height:34px;
}
.play-hub {
  background:linear-gradient(110deg,#6525e2,#300a9f);
}
.play-hub .banner-copy {
  left:14px;
  top:13px;
}
.play-hub strong {
  font-size:25px;
  line-height:1.08;
}
.play-hub strong .icon {
  width:23px;
  height:23px;
}
.play-hub small {
  font-size:11px;
}
.hub-cards {
  position:absolute;
  right:17px;
  top:7px;
  display:flex;
  gap:5px;
}
.hub-card {
  position:relative;
  width:68px;
  height:88px;
  display:flex;
  align-items:center;
  flex-direction:column;
  padding-top:5px;
  gap:3px;
  border:1px solid #b8d8ffeb;
  border-radius:12px;
  box-shadow:0 5px 0 #162b83,0 7px 5px #1505338c;
  font-size:12px;
  isolation:isolate;
}
.hub-card .cover {
  z-index:-1;
}
.hub-art {
  width:52px;
  height:52px;
  object-fit:contain;
}
.upgrade {
  background:linear-gradient(110deg,#5febbd,#0dae73);
  transform:rotate(-8deg) translateY(4px);
  box-shadow:0 5px 0 #09633e,0 7px 5px #1505338c;
}
.craft {
  background:linear-gradient(110deg,#509dfe,#164dda);
}
.drop {
  background:linear-gradient(110deg,#ff8fdb,#d30884);
  transform:rotate(9deg) translateY(4px);
  box-shadow:0 5px 0 #610d53,0 7px 5px #1505338c;
}
.case-cards {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.case-card {
  height:236px;
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:8px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:10px 9px;
}
.gift-slot {
  position:relative;
  width:144px;
  max-width:100%;
  aspect-ratio:1;
  flex:none;
  border:1.5px solid #cba35de6;
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(120deg,#362a1e,#142031);
}
.gift-slot.with-love {
  border-color:#b676d5e6;
  background:linear-gradient(120deg,#34233d,#182033);
}
.gift-art {
  position:absolute;
  inset:4%;
  width:92%;
  height:92%;
  object-fit:contain;
}
.case-card>strong {
  font-size:12px;
  align-self:stretch;
  font-weight:800;
  white-space:nowrap;
  letter-spacing:-.25px;
}
.price-button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:linear-gradient(100deg,#d5e5ff,#9fbeff);
  color:#10235e;
  height:40px;
  width:100%;
  border-radius:20px;
  font-size:15px;
  font-weight:800;
  margin-top:auto;
}
.price-button .icon {
  width:24px;
  height:24px;
}
.page-title {
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.back {
  display:grid;
  place-items:center;
  flex:none;
  width:24px;
  min-height:28px;
}
.back .icon {
  width:18px;
  height:18px;
}
.page-title p {
  font-size:11px;
  color:var(--muted);
  margin-top:2px;
}
.case-page {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:20px;
}
.case-page .page-title {
  margin-bottom:0;
}
.opening {
  position:relative;
  overflow:hidden;
  padding:11px 0 9px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
}
.pointer {
  z-index:2;
  position:absolute;
  left:calc(50% - 6px);
  top:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:12px solid #9580ff;
}
.mini-gift {
  flex:0 0 60px;
  width:60px;
  aspect-ratio:1;
  min-width:0;
  border:1px solid;
  border-radius:9px;
  overflow:hidden;
}
.mini-gift img {
  width:100%;
  height:100%;
  object-fit:contain;
}
.collection {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:0;
}
.collection-card {
  padding:8px 13px 10px;
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:6px;
  min-height:222px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
}
.valuation {
  font-size:12px;
  font-weight:800;
}
.collection-art {
  position:relative;
  width:100%;
  aspect-ratio:1;
  border:1px solid;
  border-radius:13px;
  overflow:hidden;
}
.collection-art img {
  width:100%;
  height:100%;
  object-fit:contain;
}
.collection-card h3 {
  font-size:13px;
  font-weight:700;
  line-height:1.3;
  text-align:center;
  margin:auto 0;
}
.purple {
  background:radial-gradient(at 35% 35%,#46344f,#182332 80%);
  border-color:#a779c4;
}
.gold {
  background:radial-gradient(at 35% 35%,#655137,#182332 80%);
  border-color:#b8934c;
}
.silver {
  background:radial-gradient(at 35% 35%,#52606b,#182332 80%);
  border-color:#95a8b8;
}
.green {
  background:radial-gradient(at 35% 35%,#28534e,#182332 80%);
  border-color:#5b9f97;
}
.fine-print {
  font-size:11px;
  color:var(--muted);
  line-height:1.4;
}
.inventory h1 {
  margin-bottom:20px;
  font-size:23px;
}
.empty-state {
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:14px;
  margin:0 auto;
  width:326px;
  max-width:100%;
  min-height:532px;
  padding:24px 19px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
}
.empty-icon {
  width:44px;
  height:44px;
  object-fit:contain;
  align-self:center;
}
.empty-state h2 {
  font-size:18px;
}
.empty-state p {
  font-size:12px;
  line-height:1.2;
}
.empty-state .primary {
  min-height:44px;
}
.empty-state .primary .icon {
  width:15px;
  height:15px;
}
.empty-state p.fine-print {
  font-size:11px;
  color:var(--muted);
}
.divider {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  font-size:14px;
  color:var(--muted);
}
.topup {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:20px;
}
.topup>.page-title {
  min-height:40px;
  padding-top:8px;
}
.methods {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  background:var(--surface);
  border-radius:14px;
  padding:4px;
}
.methods a {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:66px;
  border-radius:12px;
  color:var(--muted);
  font-size:11px;
  font-weight:600;
}
.methods .icon {
  width:20px;
  height:20px;
}
.methods small {
  position:absolute;
  top:1px;
  right:9px;
  color:#ffd367;
  font-size:8px;
}
.wallet {
  min-height:50px;
}
.amount-form {
  display:grid;
  gap:12px;
}
.amount-form label {
  font-size:13px;
  color:var(--muted);
}
.amount-field {
  display:flex;
  align-items:center;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  height:54px;
}
.amount-field input {
  width:100%;
  min-width:0;
  background:transparent;
  border:0;
  padding:16px;
  color:var(--text);
  font-size:16px;
}
.amount-field:focus-within {
  outline:2px solid #9dc7ff;
}
.amount-field input:focus {
  outline:0;
}
.amount-field span {
  padding:0 14px;
  color:var(--muted);
  font-size:14px;
}
.increments {
  display:flex;
  gap:8px;
}
.increments button {
  flex:1;
  min-width:0;
  min-height:40px;
  border-radius:10px;
  background:#202b42;
  color:var(--muted);
  padding:6px 2px;
  font-size:12px;
  font-weight:700;
}
.input-hint {
  font-size:12px;
  color:#ffb8bd;
}
.input-hint:empty {
  display:none;
}
.gift-deposit {
  display:grid;
  gap:12px;
}
.instruction-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:13px;
  display:grid;
  gap:16px;
}
.instruction-title {
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.instruction-title>.icon {
  width:36px;
  height:36px;
  padding:8px;
  background:var(--accent);
  border-radius:9px;
  filter:brightness(1.2);
}
.instruction-title h2 {
  font-size:16px;
}
.instruction-title p,.instruction-card li p {
  font-size:12px;
  color:var(--muted);
  margin-top:5px;
}
.steps-toggle {
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#202b42;
  min-height:34px;
  padding:8px 10px;
  border-radius:8px;
  text-align:left;
  font-size:12px;
}
.steps-toggle span {
  color:var(--muted);
  font-size:10px;
}
ol {
  counter-reset:step;
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:14px;
}
ol li {
  position:relative;
  padding-left:32px;
  font-size:13px;
}
ol li:before {
  counter-increment:step;
  content:counter(step);
  position:absolute;
  left:0;
  top:0;
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  background:var(--accent);
  border-radius:50%;
  font-size:12px;
  font-weight:700;
}
.benefits {
  display:grid;
  gap:8px;
  border-top:1px solid var(--border);
  padding-top:12px;
}
.benefits p {
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:11px;
  color:var(--muted);
}
.benefits .icon {
  width:16px;
  height:16px;
}
.gift-deposit>.primary {
  min-height:46px;
  background:var(--accent);
  border-radius:12px;
}
.after-gifts {
  display:grid;
  gap:8px;
  background:var(--surface);
  border-radius:12px;
  padding:12px 14px;
  font-size:12px;
}
.after-gifts p {
  color:var(--muted);
}
.after-gifts a {
  text-decoration:underline;
  font-weight:700;
}
.startup {
  align-self:center;
  padding:24px!important;
  text-align:center;
  display:grid;
  gap:18px;
}
dialog {
  width:calc(100% - 32px);
  max-width:358px;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:20px;
  padding:24px;
  color:var(--text);
  box-shadow:0 24px 80px #0008;
}
dialog::backdrop {
  background:#000a;
  backdrop-filter:blur(4px);
}
dialog form {
  display:grid;
  gap:16px;
}
dialog p {
  font-size:14px;
  color:var(--muted);
}
@media(min-width:600px) {
  body {
    background:radial-gradient(ellipse at top,#182d50,#080e17 65%);
  }
  .shell {
    max-width:390px;
    height:min(100dvh,900px);
    box-shadow:0 0 0 1px #30436655,0 20px 80px #0005;
  }
  .navigation {
    border-radius:22px;
  }
}
@media(max-width:360px) {
  .balance {
    gap:6px;
  }
  .balance>.primary {
    width:108px;
    font-size:12px;
  }
  .balance-copy strong {
    font-size:14px;
    gap:3px;
  }
  .balance-copy strong .icon {
    width:18px;
    height:18px;
  }
  .avatar {
    width:40px;
    height:40px;
    font-size:14px;
  }
  .balance-caption {
    font-size:9px;
  }
  .case-card>strong {
    font-size:10px;
    letter-spacing:-.25px;
  }
  .case-card {
    height:216px;
    padding:10px 8px;
  }
  .banner-copy strong {
    font-size:25px;
  }
  .players {
    right:8px;
    gap:4px;
  }
  .portrait {
    width:43px;
    height:43px;
  }
  .hub-cards {
    right:10px;
    transform:scale(.78);
    transform-origin:right center;
  }
  .play-hub .banner-copy {
    left:10px;
  }
  .play-hub strong {
    font-size:22px;
  }
  .rocket-ship {
    right:9px;
    width:100px;
    height:100px;
    top:6px;
  }
  .m4 {
    right:2px;
    font-size:12px;
  }
  .m1 {
    left:53%;
    font-size:16px;
  }
  .page-title {
    gap:6px;
  }
  h1 {
    font-size:18px;
  }
  .collection-card {
    min-height:195px;
    padding:8px;
  }
  .collection-card h3 {
    font-size:12px;
  }
  .navigation>a,.navigation>button {
    font-size:9px;
  }
  .methods small {
    right:4px;
  }
}
@media(prefers-reduced-motion:no-preference) {
  button,a {
    transition:filter .12s;
  }
  button:active,a:active {
    filter:brightness(.88);
  }
}

/* The header and navigation stay mounted while only the page content changes. */
.avatar { position:relative; overflow:hidden; }
.avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.balance-copy strong { font-variant-numeric:tabular-nums; letter-spacing:-.3px; }
.navigation { position:relative; isolation:isolate; }
.navigation>a,.navigation>button { position:relative; z-index:1; }
.navigation .selected { color:var(--text); }
.nav-indicator {
  position:absolute; left:5px; top:5px; height:60px;
  width:calc((100% - 10px) / 5); border-radius:13px;
  background:linear-gradient(120deg,#6c79ff,#153cff);
  transition:transform .36s cubic-bezier(.22,.8,.25,1);
}
.navigation[data-active="0"] .nav-indicator { transform:translateX(0); }
.navigation[data-active="1"] .nav-indicator { transform:translateX(100%); }
.navigation[data-active="2"] .nav-indicator { transform:translateX(200%); }
.navigation[data-active="3"] .nav-indicator { transform:translateX(300%); }
.navigation[data-active="4"] .nav-indicator { transform:translateX(400%); }
.live-window { flex:1; min-width:0; overflow:hidden; }
.live-track,.opening-track { display:flex; width:max-content; }
.live-group,.reel-group { display:flex; flex:none; gap:5px; padding-right:5px; }
.live-gift { flex:0 0 50px; }
.reel-group { gap:12px; padding-right:12px; }
@media(prefers-reduced-motion:no-preference) {
  .rocket-ship { animation:rocket-hover 5s ease-in-out infinite; }
  .rocket-flame { animation:flame-breathe 1.4s ease-in-out infinite alternate; }
  .cloud { animation:cloud-flow 15s linear infinite; }
  .far-right,.middle { animation-delay:-4s; animation-duration:12s; }
  .hero-cloud { animation-delay:-6s; animation-duration:14s; }

  .m2 { animation-delay:-2s; } .m3 { animation-delay:-4s; } .m4 { animation-delay:-3s; }
  .sparkles { animation:soft-glow 4s ease-in-out infinite alternate; }
  .live-label i { animation:soft-glow 2.8s ease-in-out infinite alternate; }

  .opening-track { animation:conveyor 26s linear infinite; }
  .pvp>.cover { animation:pvp-light-flow 10s linear infinite; }

  .hub-card { animation:card-hover 6s ease-in-out infinite; }
  .hub-card.upgrade { --tilt:-8deg; --lift:4px; animation-delay:-1s; }
  .hub-card.drop { --tilt:9deg; --lift:4px; animation-delay:-3s; }
  .hub-art { animation:icon-hover 5s ease-in-out infinite; }
  .craft .hub-art { animation-delay:-2s; } .drop .hub-art { animation-delay:-3.5s; }
  .collection-card,.case-card { transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
  .collection-art img,.gift-art { transition:transform .4s cubic-bezier(.22,.8,.25,1); }
  .collection-card:active .collection-art img { transform:scale(1.04); }
  .motion-offscreen,.motion-offscreen *,.motion-paused *,.is-opening .opening-track { animation-play-state:paused!important; }
}
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .collection-card:hover,.case-card:hover { transform:translateY(-3px); border-color:#7989c7; box-shadow:0 8px 22px #0003; }
  .collection-card:hover .collection-art img,.case-card:hover .gift-art { transform:scale(1.06) rotate(-3deg); }
  .live:hover .live-track,.opening:hover .opening-track { animation-play-state:paused; }
}
@media(prefers-reduced-motion:reduce) {
  .nav-indicator { transition:none; }
}
@keyframes conveyor { to { transform:translateX(-50%); } }
@keyframes flame-breathe { from { transform:scale(.94); opacity:.85; } to { transform:scale(1.08); opacity:1; } }
@keyframes soft-glow { from { opacity:.6; } to { opacity:1; } }

.stars-order { padding: 20px; border: 1px solid #344867; border-radius: 20px; background: #162135; margin: 20px 0; overflow-wrap: anywhere; }
.stars-order .primary { width: 100%; }
.stars-check { margin: 14px 16px 0 0; padding: 8px 0; color: #b5c9ff; background: none; border: 0; font: inherit; cursor: pointer; }
.stars-history { margin: 24px 0; overflow-wrap: anywhere; }
.stars-history small { color: #b4c5e4; }

.live-track { gap: 5px; }
.live-gift { position:relative; }
.live-gift small { position:absolute; bottom:1px; left:0; right:0; color:white; background:#10162ab0; font-size:8px; line-height:12px; text-align:center; border-radius:0 0 6px 6px; }
.live-gift[data-kind="award"] { box-shadow:inset 0 0 0 2px #2cddb4; }

/* The same compact decoded images are used on every route. */
.avatar img { opacity:0; transition:opacity .2s; }
.avatar img.decoded { opacity:1; }
.inventory { display:grid; grid-template-columns:minmax(0,1fr); gap:18px; }
.inventory h1 { margin:0; }
.inventory .collection { margin:0; align-items:stretch; }
.collection-card { min-width:0; height:auto; min-height:0; }
.collection-art { flex:none; }
.collection-card h3 { overflow-wrap:anywhere; min-height:34px; display:grid; place-items:center; }
.inventory>.primary { margin-top:2px; }
.players { position:absolute; right:12px; top:0; width:206px; height:112px; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); }
.player { position:absolute; left:0; top:0; display:flex; align-items:center; flex-direction:column; width:62px; gap:5px; font-size:11px; transform-origin:50% 50%; transition:transform .8s cubic-bezier(.22,.8,.25,1),opacity .7s; will-change:transform; }
.portrait { width:56px; height:56px; border:2px solid white; border-radius:50%; overflow:hidden; box-shadow:0 3px 5px #744a1620; }
.portrait img { position:static; width:100%; height:100%; object-fit:cover; }
.player b { font-variant-numeric:tabular-nums; white-space:nowrap; }
.player[data-slot="-1"] { transform:translate(-55px,39px) scale(.8); opacity:0; }
.player[data-slot="0"] { transform:translate(5px,38px) scale(.86); opacity:.95; }
.player[data-slot="1"] { transform:translate(72px,18px) scale(1.1); opacity:1; }
.player[data-slot="2"] { transform:translate(139px,38px) scale(.86); opacity:.95; }
.player[data-slot="3"] { transform:translate(209px,39px) scale(.8); opacity:0; }
.cloud { left:auto; right:-150px; pointer-events:none; }
.far-left { top:51px; animation-delay:-9s!important; }
.far-right { top:26px; animation-delay:-3s!important; }
.middle { top:83px; animation-delay:-6s!important; }
.near-left { top:85px; animation-delay:-12s!important; }
.hero-cloud { top:45px; animation-delay:-5s!important; }
.methods { position:relative; isolation:isolate; }
.methods a { z-index:1; }
.method-indicator { position:absolute; left:4px; top:4px; bottom:4px; width:calc((100% - 8px) / 4); border-radius:12px; background:linear-gradient(120deg,#6c79ff,#153cff); }
.methods[data-active="0"] .method-indicator { transform:translateX(0); }
.methods[data-active="1"] .method-indicator { transform:translateX(100%); }
.methods[data-active="2"] .method-indicator { transform:translateX(200%); }
.methods[data-active="3"] .method-indicator { transform:translateX(300%); }
.banner { transition:filter .25s,box-shadow .25s,transform .25s; --lift-factor:1; }
.banner.is-engaged { filter:brightness(1.08); box-shadow:0 0 0 2px #bacbff60,0 8px 20px #0003; --lift-factor:2.4; }
.banner.is-engaged .player { transition-duration:.4s; }
.collection-card.is-engaged,.case-card.is-engaged { border-color:#8d9eef; box-shadow:0 0 0 1px #8497ef70,0 8px 22px #0003; }
.mini-gift.is-engaged,.live-gift.is-engaged { filter:brightness(1.2); }
@media(prefers-reduced-motion:no-preference) {
 .banner.is-engaged { transform:scale(1.012); }
 .collection-card.is-engaged,.case-card.is-engaged { transform:translateY(-3px); }
 .collection-card.is-engaged .collection-art img,.case-card.is-engaged .gift-art { transform:scale(1.08) rotate(-4deg); }
}
@media(max-width:360px) {
 .players { right:5px; width:182px; }
 .player[data-slot="0"] { transform:translate(-2px,40px) scale(.75); }
 .player[data-slot="1"] { transform:translate(60px,21px) scale(1); }
 .player[data-slot="2"] { transform:translate(120px,40px) scale(.75); }
}
@media(prefers-reduced-motion:reduce) {
 .player,.avatar img,.banner { transition:none; }
 .cloud { right:25%; opacity:.6; }
 .far-left { right:44%; } .far-right { right:10%; }
}
@keyframes cloud-flow { 0% { transform:translateX(0); opacity:0; } 12% { opacity:.65; } 85% { opacity:.65; } 100% { transform:translateX(-570px); opacity:0; } }
@keyframes pvp-light-flow { 0% { transform:scale(1.7) translateX(80px); opacity:.1; } 35%,65% { opacity:.85; } 100% { transform:scale(1.7) translateX(-80px); opacity:.1; } }
@keyframes rocket-hover { 0%,100% { transform:translate(0,0) rotate(3deg); } 50% { transform:translate(calc(2px * var(--lift-factor)),calc(-3px * var(--lift-factor))) rotate(-1deg); } }
@keyframes card-hover { 0%,100% { transform:translateY(var(--lift,0px)) rotate(var(--tilt,0deg)); } 50% { transform:translateY(calc(var(--lift,0px) - 3px * var(--lift-factor))) rotate(calc(var(--tilt,0deg) + 2deg)); } }
@keyframes icon-hover { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(calc(-2px * var(--lift-factor))) rotate(-6deg); } }

@media(prefers-reduced-motion:no-preference) {
 .pvp.is-engaged .player[data-slot="1"] { transform:translate(72px,12px) scale(1.2); }
}
@media(max-width:360px) and (prefers-reduced-motion:no-preference) {
 .pvp.is-engaged .player[data-slot="1"] { transform:translate(60px,16px) scale(1.12); }
}