@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(14px,env(safe-area-inset-top));
  background:var(--bg);
}
.balance {
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 16px 20px;
  padding:7px 10px 7px 7px;
  height:62px;
  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 16px 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);
}
.navigation [aria-current=page],.methods [aria-current=page] {
  background:linear-gradient(120deg,#6c79ff,#153cff);
  color:var(--text);
}
.navigation [aria-current=page] .icon,.methods [aria-current=page] .icon {
  filter:brightness(0) invert(1);
}
.home-shell {
  padding-top:max(16px,env(safe-area-inset-top));
}
.home-shell .balance {
  height:64px;
  margin:0 14px 10px;
  padding-right:11px;
}
.home-shell>main {
  padding:0 14px 16px;
}
.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-flame {
  position:absolute;
  right:89px;
  top:76px;
  width:32px;
  height:32px;
}
.rocket-art {
  position:absolute;
  right:29px;
  top:-3px;
  width:112px;
  height:112px;
  object-fit:contain;
  transform:rotate(3deg);
}
.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;
}
.players {
  position:absolute;
  right:19px;
  top:0;
  display:flex;
  gap:10px;
  height:112px;
}
.player {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  padding-top:37px;
  font-size:11px;
}
.player-1 {
  padding-top:14px;
}
.portrait {
  position:relative;
  width:52px;
  height:52px;
  border:2px solid white;
  border-radius:50%;
  overflow:hidden;
}
.player-1 .portrait {
  width:62px;
  height:62px;
}
.portrait img {
  position:absolute;
  width:879.44%;
  height:1562.62%;
  max-width:none;
  left:-351.53%;
  top:-636.64%;
}
.player-1 img {
  left:-472.9%;
  top:-635.51%;
}
.player-2 img {
  left:-595.33%;
  top:-635.51%;
}
.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:-16px;
}
.opening {
  position:relative;
  display:flex;
  justify-content:space-between;
  gap:9px;
  padding:11px 7px 9px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
}
.pointer {
  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 {
  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:-10px;
}
.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);
}
.demo-tag {
  font-size:10px;
  font-weight:800;
  letter-spacing:1px;
  color:#a1edc9;
}
@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;
  }
  .player-1 .portrait {
    width:50px;
    height:50px;
  }
  .hub-cards {
    right:10px;
    transform:scale(.78);
    transform-origin:right center;
  }
  .play-hub .banner-copy {
    left:10px;
  }
  .play-hub strong {
    font-size:22px;
  }
  .rocket-flame {
    position:absolute;
    right:89px;
    top:76px;
    width:32px;
    height:32px;
  }
  .rocket-art {
    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);
  }
}