:root {
  --bg: #020406;
  --card: rgba(16, 28, 40, 0.88);
  --stroke: rgba(255, 255, 255, 0.08);
  --text: #f4f8fb;
  --muted: #8ea0b3;
  --blue: #2aabee;
  --gold: #ffd76a;
  --common: #9aa8b8;
  --uncommon: #3dd68c;
  --rare: #4aa3ff;
  --epic: #c084fc;
  --legendary: #ffb020;
  --item: 108px;
  --gap: 10px;
  --dock: 98px;
  --tg-top: 0px;
  --tg-bottom: 0px;
  --safe-top: max(env(safe-area-inset-top, 0px), var(--tg-top));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-bottom));
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { min-height: 100%; background: var(--bg); color: var(--text); font-family: "Manrope", "SF Pro Display", sans-serif; }
body { overflow-x: hidden; }
body.booting { overflow: hidden; }
.ban-lock {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 28px 20px;
  background: rgba(2, 4, 6, .92);
  text-align: center;
}
.ban-lock b { display: block; font-size: 22px; margin-bottom: 8px; }
.ban-lock p { color: var(--muted); font-weight: 600; max-width: 280px; }
button { font: inherit; color: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:active { transform: scale(0.98); }

.noise {
  pointer-events: none;
  position: fixed;
  inset: 0;
  opacity: .04;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.boot {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0;
  background: #000;
  transition: opacity .45s ease, visibility .45s ease;
}
.boot.off {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.boot-stage {
  position: relative;
  width: min(86vw, 420px);
  height: min(86vw, 420px);
}
.boot-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.boot-orb {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 3px solid #00e5ff;
  box-shadow:
    0 0 10px #00e5ff,
    0 0 24px #0090ff,
    0 0 48px rgba(0, 140, 255, .55),
    inset 0 0 18px rgba(0, 229, 255, .35);
  animation: bootOrb 1.6s linear infinite;
  opacity: 0;
}
.boot.is-fallback .boot-orb { opacity: 1; }
.boot.is-fallback .boot-vid { opacity: 0; }
.boot-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  pointer-events: none;
  opacity: 0;
  filter: saturate(1.12) contrast(1.06);
}
.boot.is-playing .boot-vid { opacity: 1; }
.boot.is-playing .boot-still { opacity: 0; }
.boot-vid::-webkit-media-controls,
.boot-vid::-webkit-media-controls-enclosure,
.boot-vid::-webkit-media-controls-panel,
.boot-vid::-webkit-media-controls-start-playback-button,
.boot-vid::-webkit-media-controls-overlay-play-button,
.boot-vid::-webkit-media-controls-play-button {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}
@keyframes bootOrb { to { transform: rotate(360deg); } }
.boot-copy {
  position: relative;
  margin-top: -28px;
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}
.boot-title {
  font-size: 22px;
  letter-spacing: -.04em;
  text-shadow: 0 0 18px rgba(0, 210, 255, .45);
}
.boot-status {
  color: #7fd4ff;
  font-size: 13px;
  font-weight: 700;
  min-height: 1.2em;
}
.boot-bar {
  width: min(228px, 58vw);
  height: 3px;
  border-radius: 999px;
  background: rgba(0, 180, 255, .16);
  overflow: hidden;
}
.boot-bar i {
  display: block;
  width: 14%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0077ff, #00e5ff);
  box-shadow: 0 0 16px rgba(0, 229, 255, .55);
  transition: width .4s ease;
}

.auth, .app { position: relative; z-index: 1; }
.auth {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(32px + var(--safe-top)) 20px calc(48px + var(--safe-bottom));
  text-align: center;
  background:
    radial-gradient(700px 420px at 50% 20%, rgba(42,171,238,.22), transparent 60%),
    var(--bg);
}
.auth-logo {
  width: min(320px, 78vw);
  height: auto;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
  border: none;
  box-shadow: none;
  margin-bottom: 8px;
  filter: drop-shadow(0 12px 36px rgba(0, 0, 0, 0.55));
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.auth h1 { font-size: 28px; letter-spacing: -.04em; }
.auth-sub, .auth-status, .auth-hint { color: var(--muted); }
.auth-sub { margin: 6px 0 18px; }
.auth-status { margin-bottom: 16px; font-weight: 700; color: #c9d7e4; }
.auth .promo-bar,
.auth .give-bar {
  width: min(100%, 340px);
  margin: 0 0 16px;
  text-align: left;
}
.auth-hint { margin-top: 14px; font-size: 12px; max-width: 280px; }
.auth-hint:empty { display: none; }

.btn-tg {
  border: 0;
  height: 52px;
  padding: 0 22px;
  border-radius: 16px;
  background: #2aabee;
  color: #fff;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(42,171,238,.35);
}

.app {
  max-width: 980px;
  margin: 0 auto;
  padding: calc(10px + var(--safe-top)) 14px calc(var(--dock) + 22px + var(--safe-bottom));
}
.is-fs .app {
  padding-top: max(calc(12px + var(--safe-top)), 108px);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 14px;
  padding: 2px 0 8px;
  min-width: 0;
}
.menu-btn {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 0;
  background: none;
  color: #fff;
  display: grid;
  place-items: center;
  padding: 0;
}
.menu-btn svg { width: 22px; height: 22px; display: block; }
.brand {
  border: 0;
  background: none;
  display: flex;
  align-items: center;
  cursor: pointer;
  text-align: left;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  margin-left: -4px;
}
.logo-lockup {
  display: block;
  height: 36px;
  width: auto;
  max-width: min(160px, 100%);
  object-fit: contain;
  object-position: left center;
  background: transparent;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: auto;
  min-width: 0;
}
.icon-btn, .plus, .avatar-btn, .dock-btn, .spin, .ghost, .pack, .close-x, .support-link, .btn-claim, .btn-sell, .sell-btn {
  cursor: pointer;
}
.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  font-weight: 800;
}
.balance {
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  border-radius: 999px;
  padding: 5px 6px 5px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.balance b { font-variant-numeric: tabular-nums; }
.plus {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
}
.avatar-btn {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #173044 center/cover no-repeat;
  overflow: hidden;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
}

.side-online {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  border: 0;
  background: none;
  padding: 0;
  color: #9fa3bf;
  font-size: 12px;
  font-weight: 600;
}
.side-online i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3dd68c;
}
.side-online b {
  font-variant-numeric: tabular-nums;
  color: #fff;
  font-weight: 700;
}
.live-bar { margin: -2px 0 12px; }
.live-bar[hidden] { display: none !important; }
.live-head {
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 8px;
}
.drop-feed {
  display: flex;
  align-items: stretch;
  gap: 8px;
  overflow: hidden;
}
.drop-card {
  position: relative;
  flex: 0 0 78px;
  width: 78px;
  height: 78px;
  border-radius: 16px;
  background: #12202c;
  border: 0;
  outline: 0;
  box-shadow: none;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.drop-card.common {
  background: linear-gradient(180deg, #243444, #121c26);
  box-shadow: inset 0 0 0 1px rgba(154, 168, 184, .22);
}
.drop-card.uncommon {
  background: linear-gradient(180deg, #164a36, #0d1c18);
  box-shadow: inset 0 0 0 1px rgba(61, 214, 140, .4), 0 0 16px rgba(61, 214, 140, .16);
}
.drop-card.rare {
  background: linear-gradient(180deg, #16486a, #0d1824);
  box-shadow: inset 0 0 0 1px rgba(74, 163, 255, .45), 0 0 16px rgba(74, 163, 255, .18);
}
.drop-card.epic {
  background: linear-gradient(180deg, #3a2460, #140e1c);
  box-shadow: inset 0 0 0 1px rgba(192, 132, 252, .5), 0 0 16px rgba(192, 132, 252, .2);
}
.drop-card.legendary {
  background: linear-gradient(180deg, #4a3614, #1a1408);
  box-shadow: inset 0 0 0 1px rgba(255, 176, 32, .55), 0 0 18px rgba(255, 176, 32, .22);
}
.drop-card.gold {
  background: linear-gradient(180deg, #ffe08a 0%, #f0b429 42%, #b8860b 100%);
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 236, 170, .55), 0 0 20px rgba(240, 180, 41, .35);
}
.drop-card img.drop-pic,
.drop-card .gift-media.drop-pic {
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.35));
}
.drop-ava {
  position: absolute;
  left: 6px;
  bottom: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 800;
  color: #1a1200;
  background: #ffd76a;
  border: 1px solid rgba(0,0,0,.2);
}
.drop-card:not(.gold) .drop-ava {
  color: #fff;
  background: #2aabee;
  border-color: rgba(255,255,255,.2);
}
.drop-mask { flex: 1; min-width: 0; overflow: hidden; }
.drop-track {
  display: flex;
  gap: 8px;
  width: max-content;
  animation: feed-scroll 32s linear infinite;
}
@keyframes feed-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.hero, .profile-card, .stat, .card, .sheet-card {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 22px;
}
.hero { padding: 16px 12px 14px; }
.hero-head, .page-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.hero-head h2, .page-head h2 { font-size: 16px; }
.hero-head span, .page-head p, .sub { color: var(--muted); font-size: 12px; }
.page-head { flex-direction: column; align-items: flex-start; padding: 6px 2px 10px; }
.page-head.tight { margin-top: 16px; }

.roulette-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(54vh, 560px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.roulette-stack[data-count="1"] { max-height: none; overflow: visible; }
.roulette-wrap {
  position: relative;
  overflow: hidden;
  height: 148px;
  border-radius: 18px;
  background: #09131c;
  border: 1px solid rgba(255,255,255,.06);
  flex: 0 0 auto;
}
.roulette-stack[data-count="2"] .roulette-wrap,
.roulette-stack[data-count="3"] .roulette-wrap { height: 108px; }
.roulette-stack[data-count="4"] .roulette-wrap,
.roulette-stack[data-count="5"] .roulette-wrap { height: 86px; }
.roulette-stack[data-count="6"] .roulette-wrap,
.roulette-stack[data-count="7"] .roulette-wrap { height: 72px; }
.roulette-stack[data-count="8"] .roulette-wrap,
.roulette-stack[data-count="9"] .roulette-wrap,
.roulette-stack[data-count="10"] .roulette-wrap { height: 62px; }
.roulette-stack:not([data-count="1"]) .cell { height: 100%; border-radius: 12px; }
.roulette-stack:not([data-count="1"]) .cell img { width: 52px; height: 52px; }
.roulette-stack:not([data-count="1"]) .star-drop .tg-star { width: 22px; height: 22px; }
.roulette-stack:not([data-count="1"]) .star-drop b { font-size: 12px; }
.roulette-stack[data-count="6"] .cell img,
.roulette-stack[data-count="7"] .cell img { width: 42px; height: 42px; }
.roulette-stack[data-count="8"] .cell img,
.roulette-stack[data-count="9"] .cell img,
.roulette-stack[data-count="10"] .cell img { width: 36px; height: 36px; }
.roulette-wrap::before, .roulette-wrap::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; width: 64px; z-index: 3; pointer-events: none;
}
.roulette-wrap::before { left: 0; background: linear-gradient(90deg, #09131c, transparent); }
.roulette-wrap::after { right: 0; background: linear-gradient(270deg, #09131c, transparent); }
.pointer {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 3px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
  box-shadow: 0 0 16px rgba(255,215,106,.7);
  z-index: 4;
  pointer-events: none;
}
.pointer::before, .pointer::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  border-left: 8px solid transparent; border-right: 8px solid transparent;
}
.pointer::before { top: 0; border-top: 10px solid var(--gold); }
.pointer::after { bottom: 0; border-bottom: 10px solid var(--gold); }
.track { display: flex; align-items: center; height: 100%; gap: var(--gap); padding: 0 12px; will-change: transform; }

.cell {
  flex: 0 0 var(--item);
  width: var(--item);
  height: 120px;
  border-radius: 16px;
  background: #101c28;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.cell img { width: 78px; height: 78px; object-fit: contain; }
.star-cell { background: radial-gradient(circle at 50% 40%, rgba(255,213,74,.16), #101c28 70%); }
.star-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #ffe9a8;
}
.star-drop .tg-star,
.star-win .tg-star { width: 36px; height: 36px; }
.star-drop b,
.star-win b { font-size: 16px; font-weight: 800; letter-spacing: -.03em; }
.star-win {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 140px;
  color: #ffe9a8;
}
.star-win .tg-star { width: 72px; height: 72px; }
.star-win b { font-size: 28px; }
.cell .rarity-bar { position: absolute; left: 10px; right: 10px; bottom: 8px; height: 3px; border-radius: 99px; }
.cell.common { box-shadow: inset 0 0 0 1px rgba(154,168,184,.2); }
.cell.uncommon { box-shadow: inset 0 0 0 1px rgba(61,214,140,.35); }
.cell.rare { box-shadow: inset 0 0 0 1px rgba(74,163,255,.4); }
.cell.epic { box-shadow: inset 0 0 0 1px rgba(192,132,252,.45); }
.cell.legendary { box-shadow: inset 0 0 0 1px rgba(255,176,32,.55), 0 0 22px rgba(255,176,32,.16); }
.cell.is-bait {
  box-shadow: inset 0 0 0 2px rgba(255, 208, 74, .95), 0 0 26px rgba(255, 176, 32, .38);
}
.rarity-bar.common { background: var(--common); }
.rarity-bar.uncommon { background: var(--uncommon); }
.rarity-bar.rare { background: var(--rare); }
.rarity-bar.epic { background: var(--epic); }
.rarity-bar.legendary { background: linear-gradient(90deg, #ffb020, #ffe08a, #ffb020); }

.spin-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.spin-count {
  display: flex;
  align-items: center;
  height: 40px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  overflow: hidden;
}
.spin-step {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  font-size: 20px;
  font-weight: 800;
  color: #7ec8ee;
}
.spin-count b {
  min-width: 22px;
  text-align: center;
  font-size: 16px;
}
.spin-count.is-locked { opacity: .5; pointer-events: none; }
.spin-meta-hint { color: var(--muted); font-size: 12px; font-weight: 700; }
.actions { display: flex; gap: 10px; margin-top: 10px; }
.case-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  position: relative;
}
.gb-btn {
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 14px;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #fff;
}
.gb-btn .star-live,
.gb-btn .tg-star { width: 16px; height: 16px; }
.gb-btn-open {
  background: #2aabee;
  box-shadow: 0 8px 20px rgba(42,171,238,.28);
}
.gb-btn-need { background: #6a2b33; }
.gb-btn-pay { background: #1d4a38; }
.gb-btn-demo { background: #2b3138; color: #e8eef4; }
.gb-btn:disabled { opacity: .55; }
.mult-row {
  display: flex;
  gap: 8px;
}
.mult-row.is-locked { opacity: .5; pointer-events: none; }
.mult-btn {
  flex: 1;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: #2b3138;
  color: #8b97a5;
  font-weight: 800;
  font-size: 15px;
}
.mult-btn.on {
  background: #2aabee;
  color: #fff;
}
.fast-toggle {
  width: 52px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: #2b3138;
  position: relative;
  flex: 0 0 auto;
  padding: 0;
}
.fast-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #3d4450;
  display: grid;
  place-items: center;
  font-size: 12px;
  line-height: 1;
  transition: left .18s ease, background .18s ease;
}
.fast-toggle.on { background: #2aabee; }
.fast-toggle.on .fast-toggle-knob {
  left: 26px;
  background: #fff;
}
.how-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2px;
}
.how-link {
  border: 0;
  background: none;
  color: #3bbcff;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 4px;
  line-height: 1;
}
.how-link:active { transform: none; }
.how-i {
  width: 15px;
  height: 15px;
  display: block;
  flex: 0 0 15px;
}
.how-pop {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 10px);
  background: rgba(15, 24, 34, .97);
  border: 1px solid rgba(36, 161, 222, .42);
  border-radius: 14px;
  padding: 13px 12px 12px;
  box-shadow:
    0 0 0 1px rgba(36,161,222,.12),
    0 0 24px rgba(36,161,222,.16),
    0 14px 36px rgba(0,0,0,.5);
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.how-row {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: start;
}
.how-n {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #24a1de;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  line-height: 1;
  flex-shrink: 0;
}
.how-row p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: #b7c6d4;
  font-weight: 500;
}
.how-row b {
  color: #fff;
  font-weight: 700;
}
.how-row span::before {
  content: " — ";
  color: #8ea0b3;
}
.win-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
  margin: 4px 0 16px;
}
.win-item {
  background: #101c28;
  border-radius: 12px;
  padding: 8px 6px;
}
.win-item img { width: 56px; height: 56px; object-fit: contain; }
.win-item b { display: block; font-size: 11px; margin-top: 4px; line-height: 1.25; }
.win-item small { display: block; color: var(--muted); font-size: 10px; margin-top: 2px; }
.spin, .ghost {
  height: 54px;
  border-radius: 16px;
  border: 0;
  font-weight: 800;
}
.spin {
  flex: 1;
  background: linear-gradient(180deg, #3bbcff, #1e96d1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 10px 24px rgba(42,171,238,.32);
}
.spin:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.spin .cost {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(0,0,0,.18); border-radius: 999px; padding: 4px 9px; font-size: 13px;
}
.ghost {
  padding: 0 16px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
}
.hint { margin-top: 10px; text-align: center; color: var(--muted); font-size: 12px; }

.page { display: none; }
.page.active { display: block; }

.admin-grant {
  margin-top: 14px;
  padding: 16px 12px;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 22px;
}
.admin-grant h2 { font-size: 16px; margin-bottom: 12px; }
.admin-grant .spin { width: 100%; margin-top: 8px; }
.admin-acts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.admin-acts .spin,
.admin-acts .btn-ban {
  width: 100%;
  margin: 0;
  height: 46px;
  border: 0;
  border-radius: 16px;
  font-weight: 800;
}
.admin-acts .btn-ban,
.btn-ban {
  background: #6a2b33;
  color: #fff;
}
.admin-unban {
  width: 100%;
  margin-top: 8px;
  height: 42px;
}
.admin-inv-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.admin-inv-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #101c28;
  border-radius: 14px;
  padding: 8px 10px;
}
.admin-inv-row img { width: 40px; height: 40px; object-fit: contain; flex: 0 0 40px; }
.admin-inv-row b { display: block; font-size: 13px; }
.admin-inv-row small { color: var(--muted); font-size: 11px; }
.admin-inv-row .ghost { height: 36px; padding: 0 12px; margin-left: auto; }
.admin-out-tabs { display: flex; gap: 8px; margin-bottom: 8px; }
.admin-out-tabs .ghost { height: 34px; padding: 0 12px; }
.admin-out-tabs .ghost.on { background: rgba(42,171,238,.18); color: #7ec8ee; }
.admin-out-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.admin-out-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  background: #101c28;
  border-radius: 16px;
  padding: 10px;
}
.admin-out-row img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  background: #0a141c;
  border-radius: 12px;
}
.admin-out-row b { display: block; font-size: 14px; }
.admin-out-row small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.admin-out-row .out-actions { display: flex; gap: 8px; margin-top: 8px; }
.admin-out-row .out-actions button { height: 34px; padding: 0 10px; flex: 1; }
.admin-out-row .ok { background: #1a6b3c; }
.admin-grant h3 { font-size: 14px; margin: 16px 0 8px; }
.admin-staff-list, .admin-staff-log { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.admin-staff-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #101c28;
  border-radius: 14px;
  padding: 10px 12px;
}
.admin-staff-row b { display: block; font-size: 14px; }
.admin-staff-row small { color: var(--muted); font-size: 11px; }
.admin-staff-row .ghost { height: 36px; padding: 0 12px; margin-left: auto; background: #6b1a1a; }
.admin-log-row {
  background: #101c28;
  border-radius: 12px;
  padding: 8px 10px;
}
.admin-log-row b { display: block; font-size: 13px; }
.admin-log-row span { display: block; font-size: 12px; margin-top: 2px; }
.admin-log-row small { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }
.wd-st { font-size: 11px; font-weight: 800; }
.wd-st.wait { color: #ffd76a; }
.wd-st.sent { color: #3dd68c; }
.wd-st.no { color: #ff8a8a; }

.shop-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 12px;
  margin: 36px 4px 18px;
  padding: 8px 0 10px;
}
.shop-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.shop-stat-ico {
  width: 36px;
  height: 36px;
  color: #3d8dff;
  display: grid;
  place-items: center;
}
.shop-stat-ico svg { width: 30px; height: 30px; }
.shop-stat b {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
  line-height: 1.1;
}
.shop-stat span {
  color: #7d8796;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  max-width: 140px;
}
.case-shop { margin-bottom: 8px; }
.balance .bal-wallet { display: none; }
.balance.is-empty {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  background: linear-gradient(180deg, #3a3f48 0%, #2b3038 100%);
  color: #e8edf3;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  white-space: nowrap;
}
.balance.is-empty .star-live,
.balance.is-empty .plus { display: none; }
.balance.is-empty .bal-wallet {
  display: block;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  color: #c9d0d8;
}
.balance.is-empty b {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #f2f4f7;
}
.buy-guide {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  margin: 0 0 12px;
  padding: 14px 16px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, #3ee07a, #1aa85a);
  color: #04210f;
  font-weight: 800;
  text-align: left;
  box-shadow: 0 10px 24px rgba(46, 200, 110, .28);
  cursor: pointer;
}
.buy-guide b { font-size: 16px; letter-spacing: -.02em; }
.buy-guide span { font-size: 13px; font-weight: 700; opacity: .78; }
.balance.need-pay {
  border-color: rgba(62, 224, 122, .55);
  box-shadow: 0 0 0 2px rgba(62, 224, 122, .18);
}
.balance.need-pay .plus {
  animation: plusPulse 1.2s ease-in-out infinite;
}
@keyframes plusPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(42, 171, 238, .45); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(42, 171, 238, 0); }
}
.how-buy {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: end center;
  padding: 16px 16px calc(20px + var(--safe-bottom));
  background: rgba(2, 6, 10, .72);
  backdrop-filter: blur(8px);
}
.how-buy-card {
  width: min(100%, 420px);
  padding: 22px 20px 18px;
  border-radius: 24px;
  background: #121920;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
}
.how-buy-card h3 {
  font-size: 22px;
  letter-spacing: -.03em;
  margin-bottom: 14px;
}
.how-buy-card ol {
  margin: 0 0 18px;
  padding: 0 0 0 22px;
  display: grid;
  gap: 10px;
  color: #d5e0ea;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}
.how-buy-card li::marker { font-weight: 800; color: #3ee07a; }
.how-buy-ok {
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 16px;
  background: #2aabee;
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 8px;
}
.how-buy-skip {
  width: 100%;
  height: 48px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  color: #d5e0ea;
  font-weight: 800;
}
.how-buy-off {
  width: 100%;
  margin-top: 10px;
  height: auto;
  padding: 6px;
  border: 0;
  background: none;
  color: #6d7b8c;
  font-size: 12px;
  font-weight: 600;
}
.case-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.case-sec h3 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #d5e0ea;
}
.shop-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 30px;
  margin: 0 0 4px;
}
.shop-bar h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #d5e0ea;
}
.case-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
}
.case-sec-head h3 { margin: 0; }
.shop-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.shop-ico {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: #121a22;
  color: #d7e3ee;
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.shop-ico svg {
  width: 15px;
  height: 15px;
  display: block;
}
.shop-ico.on {
  background: #1d4ed8;
  color: #fff;
}
.shop-search-row {
  margin: 0 0 12px;
}
.shop-search-row input {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  outline: none;
  background: #121a22;
  color: #fff;
  border-radius: 12px;
  padding: 11px 14px;
  font: inherit;
  font-weight: 700;
}
.shop-search-row input::placeholder { color: #6d7d8c; }
.shop-empty {
  margin: 0;
  color: #8b9aab;
  font-size: 13px;
  font-weight: 700;
}
.case-price.is-free {
  background: #16351f;
  color: #7dff9a;
}
.case-price.is-need {
  background: #1c2414;
  color: #f5d36a;
  font-size: 12px;
}
.case-price.is-wait {
  background: #241818;
  color: #c9b4b4;
  font-size: 12px;
}
.case-prog {
  display: block;
  width: 72%;
  height: 4px;
  margin-top: -2px;
  background: #1a2430;
  border-radius: 99px;
  overflow: hidden;
}
.case-prog b {
  display: block;
  height: 100%;
  background: #3b82f6;
}
.case-card.is-locked { opacity: .9; }
.case-cond {
  display: block;
  max-width: 150px;
  text-align: center;
  color: #8b9aab;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}
.case-play.is-free .hero-head { display: none; }
.free-cond {
  margin: 6px 0 22px;
  padding: 0;
}
.free-cond-title {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #f4f7fb;
  line-height: 1.3;
}
.free-cond-sum {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}
.free-cond-star {
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}
.free-cond-star .tg-star,
.free-cond-star .star-live {
  width: 22px;
  height: 22px;
}
.free-cond-sum b {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.free-cond-bar {
  height: 4px;
  border-radius: 99px;
  background: #152033;
  overflow: hidden;
  margin: 0 0 22px;
}
.free-cond-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: #2aabee;
  border-radius: 99px;
}
.free-cond h3 {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
  text-transform: none;
  color: #fff;
}
.free-cond-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}
.free-cond-col {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.free-cond-n {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #24a1de;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 0 0 4px rgba(36, 161, 222, .12);
}
.free-cond-col p {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
  color: #8b9aab;
}
.free-cond-col b {
  display: block;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.case-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 8px;
}
.case-card {
  -webkit-appearance: none;
  appearance: none;
  border: 0 !important;
  background: none !important;
  background-color: transparent !important;
  border-radius: 0;
  padding: 10px 4px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  overflow: visible;
  box-shadow: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}
.case-card:active,
.case-card:focus,
.case-card:hover { transform: none; background: none !important; box-shadow: none !important; }
.case-art {
  position: relative;
  width: 100%;
  max-width: 168px;
  display: flex;
  justify-content: center;
}
.case-card.is-pack .case-art { max-width: 148px; }
.case-new {
  position: absolute;
  top: 8px;
  left: 6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 7px;
  background: #ff2f86;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  text-transform: lowercase;
  box-shadow: 0 4px 10px rgba(255, 47, 134, .38);
  pointer-events: none;
}
.case-card img {
  display: block;
  width: 100%;
  max-width: 168px;
  height: auto;
  object-fit: contain;
  background: none !important;
  background-color: transparent !important;
  border: 0;
  outline: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-user-drag: none;
}
.case-card.is-pack img {
  max-width: 148px;
  transform: rotate(-10deg);
  transform-origin: 50% 58%;
}
.case-card b {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.02em;
  text-align: center;
  line-height: 1.25;
}
.case-price {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #152433;
  color: #8fd0f2;
  border-radius: 999px;
  padding: 5px 11px;
  font-weight: 800;
  font-size: 13px;
}
.inside-box { margin-top: 22px; }
.inside-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.inside-cube {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: block;
  overflow: visible;
  color: #c6e36a;
}
.inside-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}
.inside-line {
  height: 1px;
  background: rgba(255,255,255,.08);
  border: 0;
  margin: 0 0 16px;
}
.inside-range {
  margin: 0 0 16px;
  text-align: center;
  color: #8b97a8;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
}
.inside-range b { color: #fff; font-weight: 700; }
.inside-range .tg-star,
.inside-range .star-live { width: 16px; height: 16px; vertical-align: -2px; }
.chance-btn {
  display: block;
  margin: 0 auto 22px;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.1);
  background: #161b24;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}
.chance-sheet .sheet-card {
  background: #0c1018;
  border: 0;
  box-shadow: none;
  width: min(520px, 100%);
}
.chance-sheet h3 {
  text-align: center;
  font-size: 20px;
  margin: 8px 0 18px;
}
.chance-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 60vh;
  overflow: auto;
  padding-right: 2px;
}
.chance-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: rgba(26, 30, 42, .85);
  border-radius: 8px;
}
.chance-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.chance-row em {
  font-style: normal;
  padding: 4px 10px;
  border-radius: 40px;
  background: rgba(30, 228, 76, .1);
  color: #3ee44c;
  font-size: 13px;
  font-weight: 600;
}
.loot-wrap { margin-top: 8px; }
.loot-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.loot-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.loot-sort {
  border: 0;
  background: none;
  color: #3bbcff;
  font-weight: 600;
  font-size: 13px;
  padding: 4px 0;
  white-space: nowrap;
}
.loot-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.loot-card {
  position: relative;
  background: #12151d;
  border: 0;
  border-radius: 16px;
  padding: 16px 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  min-height: 100%;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.loot-card:active { transform: scale(.98); }
.loot-chance {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border: 0;
  border-radius: 6px;
  background: rgba(20, 24, 34, .9);
  color: #9aa8b8;
  font-size: 10px;
  font-weight: 700;
}
.loot-pic {
  width: 118px;
  height: 118px;
  display: block;
  position: relative;
  overflow: hidden;
}
.loot-pic img,
.loot-pic video,
.loot-pic canvas,
.loot-pic .up-anim,
.loot-pic .gift-lottie {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  pointer-events: none;
}
.loot-pic .gift-lottie {
  z-index: 1;
}
.loot-card b {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  min-height: 2.4em;
}
.loot-price {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  font-size: 14px;
}
.loot-price .tg-star,
.loot-price .star-live { width: 14px; height: 14px; }
.case-play { position: relative; }
.case-play-title { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.case-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: #1b2430;
  color: #fff;
  border-radius: 999px;
  height: 40px;
  padding: 0 16px 0 12px;
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 12px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
}
.case-back svg { display: block; flex: 0 0 auto; }
.case-back:active { transform: scale(.98); background: #243140; }
@media (min-width: 640px) {
  .case-grid { grid-template-columns: repeat(3, 1fr); }
}

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.card {
  padding: 12px;
  min-height: 196px;
  cursor: pointer;
  position: relative;
}
.card .up-buy-btn { cursor: pointer; }
.card.common { box-shadow: inset 0 0 0 1px rgba(154,168,184,.16); }
.card.uncommon { box-shadow: inset 0 0 0 1px rgba(61,214,140,.28); }
.card.rare { box-shadow: inset 0 0 0 1px rgba(74,163,255,.3); }
.card.epic { box-shadow: inset 0 0 0 1px rgba(192,132,252,.32); }
.card.legendary { box-shadow: inset 0 0 0 1px rgba(255,176,32,.4); }
.card > img,
.card > .gift-media { width: 100%; height: 92px; object-fit: contain; }
.card .name { font-size: 13px; font-weight: 800; margin-top: 8px; }
.card .meta { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 6px; font-size: 11px; color: var(--muted); }
.card .meta span { display: inline-flex; align-items: center; gap: 4px; }
.card .styles-count { margin-top: 6px; font-size: 11px; color: #7ec8ee; font-weight: 700; }

.badge { font-size: 10px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.badge.common { color: var(--common); }
.badge.uncommon { color: var(--uncommon); }
.badge.rare { color: var(--rare); }
.badge.epic { color: var(--epic); }
.badge.legendary { color: var(--legendary); }

.empty { grid-column: 1/-1; text-align: center; color: var(--muted); padding: 28px 8px; }

.profile-card { padding: 18px; display: flex; gap: 14px; align-items: center; }
.profile-card img, .profile-ava {
  width: 64px; height: 64px; border-radius: 20px; object-fit: cover; background: #173044;
  display: grid; place-items: center; font-weight: 800; font-size: 22px;
}
.profile-card h3 { font-size: 20px; }
.profile-card p { color: var(--muted); font-size: 13px; }
.tg-badge { display: inline-block; margin-top: 6px; font-size: 11px; color: #7ec8ee; font-weight: 800; }
#page-profile.is-sub .admin-grant { display: none; }
.app.is-profile .live-bar,
.app.is-prizes .live-bar { display: none; }
.gb-prof { padding: 4px 2px 8px; color: #fff; }
.gb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  margin-bottom: 8px;
}
.gb-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.33;
}
.gb-promo-ico {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #262835;
  color: #c5c9dc;
  display: grid;
  place-items: center;
  padding: 0;
}
.gb-promo-ico svg { width: 18px; height: 18px; display: block; }
.gb-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 8px;
  padding: 36px 0 6px;
}
.gb-side {
  position: relative;
  width: 72px;
  flex: 0 0 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.gb-side img,
.gb-side .gift-media {
  width: 70px;
  height: 70px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.45));
}
.gb-side .gift-media img { width: 70px; height: 70px; object-fit: contain; }
.gb-side b {
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.gb-side small {
  font-size: 10px;
  font-weight: 600;
  color: #9fa3bf;
  line-height: 1.2;
}
.gb-chip {
  position: absolute;
  top: -14px;
  left: 50%;
  z-index: 2;
  padding: 3px 7px;
  border-radius: 40px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  backdrop-filter: blur(20px);
  color: #fff;
}
.gb-chip.blue {
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(35, 108, 217, .24);
  box-shadow: 0 -10px 24px -4px rgba(30, 163, 242, .12) inset, 0 0 0 1px rgba(44, 124, 243, .55);
}
.gb-chip.gold {
  transform: translateX(-50%) rotate(3deg);
  background: rgba(253, 161, 0, .24);
  box-shadow: 0 -10px 24px -4px rgba(253, 177, 0, .12) inset, 0 0 0 1px rgba(253, 207, 0, .5);
}
.gb-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.gb-mid .profile-ava,
.gb-ava {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4.6px solid #090b11;
  object-fit: cover;
  font-size: 36px;
  background: #1a1f2f;
}
.gb-mid h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}
.gb-id {
  border: 0;
  background: none;
  color: #9fa3bf;
  font-size: 12px;
  font-weight: 500;
  padding: 0;
}
.gb-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 14px 0 16px;
  scrollbar-width: none;
}
.gb-pills::-webkit-scrollbar { display: none; }
.gb-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 4px 8px;
  border: 0;
  border-radius: 40px;
  background: #262835;
  color: #9fa3bf;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  white-space: nowrap;
}
.gb-pill svg { width: 16px; height: 16px; display: block; }
.gb-pill.on {
  background: radial-gradient(71.87% 100% at 50% 0%, #ff9633 0%, #e35c22 100%);
  color: #fff;
}
.gb-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.gb-empty {
  text-align: center;
  padding: 36px 16px;
}
.gb-empty b {
  display: block;
  font-size: 16px;
  font-weight: 700;
}
.gb-empty p {
  margin: 8px 0 0;
  color: #9fa3bf;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}
.gb-hist { display: grid; gap: 8px; }
.gb-hit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: #1a1f2f;
  border-radius: 12px;
  padding: 14px;
}
.gb-hit b { display: block; font-size: 14px; font-weight: 600; }
.gb-hit small { color: #9fa3bf; font-size: 12px; font-weight: 500; }
.gb-hit em { font-style: normal; color: #7dff9a; font-weight: 700; }
.gb-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(9, 11, 17, .72);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.gb-modal-bg {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
}
.gb-sheet {
  position: relative;
  z-index: 1;
  width: min(100%, 440px);
  background: #1a1f2f;
  border-radius: 16px 16px 0 0;
  padding: 22px 16px 28px;
}
.gb-sheet h3 {
  margin: 0;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
}
.gb-sheet .gb-note {
  margin: 8px 0 16px;
  text-align: center;
  color: #9fa3bf;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.54;
}
.gb-input {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 8px;
  background: #121624;
  color: #fff;
  padding: 0 16px;
  font: inherit;
  font-weight: 600;
  outline: none;
  margin-bottom: 10px;
}
.gb-input::placeholder { color: #6d728c; }
.gb-go {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 8px;
  background: #2aabee;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
}

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
.stat { padding: 14px; }
.stat b { display: block; font-size: 20px; margin-top: 4px; }
.stat span { color: var(--muted); font-size: 12px; }

.support-link {
  display: block;
  text-align: center;
  text-decoration: none;
  background: #2aabee;
  color: #fff;
  font-weight: 800;
  border-radius: 16px;
  padding: 14px;
  margin: 14px 0 4px;
}
.side {
  position: fixed;
  inset: 0;
  z-index: 80;
}
.side-bg {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, .5);
}
.side-draw {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: min(280px, 84vw);
  min-width: 260px;
  padding: calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));
  background: #090b11;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.is-fs .side-draw {
  padding-top: max(calc(16px + var(--safe-top)), 116px);
}
.side-user {
  display: flex;
  align-items: center;
  gap: 12px;
}
.side-ava,
.side-ava img,
.side-ava .profile-ava {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  object-fit: cover;
  background: #1a1f2f;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 18px;
  flex: 0 0 56px;
}
.side-user b {
  display: block;
  font-size: 16px;
  font-weight: 600;
}
.side-id {
  margin-top: 2px;
  border: 0;
  background: none;
  color: #9fa3bf;
  font-size: 12px;
  font-weight: 600;
  padding: 0;
}
.side-wallet {
  margin-top: 16px;
  padding: 1px;
  border-radius: 12px;
  background: linear-gradient(180deg, #1a1f2f 0%, #090b11 100%);
}
.side-wallet-in {
  padding: 8px;
  border-radius: 12px;
  background: #121624;
}
.side-wallet-title {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #9fa3bf;
}
.side-bals {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 8px;
}
.side-bal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 24px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
.side-bal svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: block;
  animation: none !important;
}
.side-bal b {
  display: block;
  line-height: 24px;
  font-variant-numeric: tabular-nums;
}
.side-topup {
  margin-top: 16px;
  width: 100%;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: #2aabee;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}
.side-nav {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}
.side-nav button {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: none;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 0;
  text-align: left;
}
.side-nav svg { width: 24px; height: 24px; flex: none; overflow: visible; }
.side-help {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: none;
  color: #3ddc84;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}
.side-help svg { width: 24px; height: 24px; flex: none; overflow: visible; }
.dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.dock.no-up {
  grid-template-columns: repeat(5, 1fr);
}
.dock.no-up.no-prizes {
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: 0;
  padding: 10px 2px calc(10px + var(--safe-bottom));
  background: #07090d;
  border-top: 1px solid rgba(255,255,255,.04);
  box-shadow: 0 -12px 32px rgba(0,0,0,.45);
}
.dock-btn {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: transparent;
  color: #9aa3af;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
  min-height: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dock-btn:active { transform: none; }
.dock-ico {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: inherit;
}
.dock-btn svg {
  width: 28px;
  height: 28px;
  display: block;
  overflow: visible;
}
.dock-vs {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: 1;
}
.dock-btn.active { color: #fff; }
.dock-btn.active .dock-ico {
  color: #fff;
  background: linear-gradient(180deg, #62c8f8 0%, #2fafef 48%, #1a93d6 100%);
  box-shadow: 0 8px 20px rgba(42, 171, 238, .5);
}

.sheet {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(4,8,12,.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.tg-confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}
.sheet[hidden] { display: none !important; }
.sheet-card {
  width: min(440px, 100%);
  max-height: 88dvh;
  overflow: auto;
  padding: 20px 16px 16px;
  text-align: center;
  position: relative;
}
.sheet-card.wide { width: min(720px, 100%); text-align: left; }
.close-x {
  position: absolute; top: 10px; right: 12px;
  width: 36px; height: 36px; border: 0; background: rgba(255,255,255,.06);
  border-radius: 50%; font-size: 22px;
}
#winAnim {
  position: relative;
  width: 210px;
  height: 210px;
  margin: 0 auto 6px;
}
#winAnim .win-pic,
#winAnim svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#winAnim .win-lottie {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sheet-card h3 { font-size: 22px; margin-bottom: 4px; }
.value {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,193,74,.12); color: var(--gold);
  border-radius: 999px; padding: 6px 12px; font-weight: 800; margin: 10px 0 16px;
}
.win-actions {
  display: grid;
  gap: 8px;
  width: 100%;
}
.btn-claim {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 54px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, #3bbcff, #1e96d1);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  box-shadow: 0 10px 24px rgba(42,171,238,.32);
}
.btn-sell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffd76a, #e0a21a);
  color: #1a1406;
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  box-shadow: 0 10px 24px rgba(255, 215, 106, .28);
}
.btn-sell:disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}
.promo-bar, .promo-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-top: 12px;
  padding: 12px 14px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, #3bbcff, #1e96d1);
  color: #fff;
  font-weight: 800;
  text-align: left;
}
.promo-bar span, .promo-card span { font-size: 13px; }
.promo-bar b, .promo-card b {
  font-variant-numeric: tabular-nums;
  background: rgba(0,0,0,.2);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 13px;
}
.promo-card { margin-top: 10px; }
.give-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-top: 0;
  margin-bottom: 12px;
  padding: 13px 14px;
  border: 0;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 215, 106, .22), rgba(42, 171, 238, .16) 48%, rgba(255, 140, 64, .2)),
    linear-gradient(180deg, #1a2a38, #101820);
  color: #fff;
  font-weight: 800;
  text-align: left;
  box-shadow: 0 10px 26px rgba(255, 183, 77, .18);
  cursor: pointer;
}
.give-bar[hidden] { display: none !important; }
.give-bar span { font-size: 14px; letter-spacing: -.02em; }
.give-bar b {
  font-variant-numeric: tabular-nums;
  background: rgba(255, 215, 106, .18);
  color: #ffe7a8;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
}
.ref-card {
  margin: 14px 0 4px;
  padding: 12px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--stroke);
}
.ref-preview {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
  margin-bottom: 12px;
  background: #0b1020;
}
.ref-copy b { display: block; font-size: 16px; margin-bottom: 4px; }
.ref-copy p { color: var(--muted); font-size: 13px; line-height: 1.35; }
.ref-actions {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 8px;
  margin-top: 12px;
}
.ref-actions .btn-claim { height: 46px; font-size: 15px; }
.ref-actions .ghost { height: 46px; border-radius: 16px; font-weight: 800; }

.pay-sheet { align-items: flex-end; padding: 0; }
.pay-card {
  width: 100%;
  max-width: 520px;
  border-radius: 28px 28px 0 0;
  padding: 10px 16px calc(20px + var(--safe-bottom));
  background: #0c0f14;
  text-align: center;
  border: 0;
}
.pay-handle {
  width: 42px;
  height: 4px;
  border-radius: 99px;
  background: rgba(255,255,255,.18);
  margin: 4px auto 12px;
}
.pay-progress {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 14px;
}
.pay-progress i {
  width: 28px;
  height: 4px;
  border-radius: 99px;
  background: #2a313b;
}
.pay-progress i.on {
  background: linear-gradient(90deg, #7c5cff, #ff4d9a);
}
.pay-card h3 { font-size: 26px; letter-spacing: -.03em; }
.pay-min {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 10px auto 0;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(139, 92, 246, .18);
  border: 1px solid rgba(139, 92, 246, .45);
  color: #f3e8ff;
  font-size: 13px;
  font-weight: 800;
}
.pay-list { display: grid; gap: 8px; margin: 16px 0 18px; text-align: left; }
.pay-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.05);
  background: #161b22;
  color: inherit;
  text-align: left;
}
.pay-item img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: transparent;
}
.pay-item b { display: block; font-size: 15px; }
.pay-item small { display: block; color: #8b97a8; font-size: 12px; margin-top: 2px; font-weight: 600; }
.pay-item.on {
  border: 1.5px solid transparent;
  background:
    linear-gradient(#161b22, #161b22) padding-box,
    linear-gradient(120deg, #3bbcff, #8b5cf6, #ff4d9a) border-box;
  box-shadow: 0 0 0 1px rgba(139, 92, 246, .18), 0 8px 20px rgba(139, 92, 246, .12);
}
.pay-nav {
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: 10px;
}
.pay-back, .pay-next {
  height: 52px;
  border: 0;
  border-radius: 18px;
  font-weight: 800;
  font-size: 16px;
}
.pay-back { background: #2a313b; color: #fff; }
.pay-next {
  background: linear-gradient(90deg, #5ad0ff, #8b5cf6 48%, #ff4d9a);
  color: #111;
  box-shadow: 0 10px 24px rgba(139, 92, 246, .28);
}
.pay-promo {
  display: block;
  margin: 16px 0 0;
  text-align: left;
}
.pay-promo-label {
  display: block;
  margin: 0 0 8px 8px;
  font-size: 12px;
  font-weight: 500;
  color: #9fa3bf;
}
.pay-promo-box {
  position: relative;
  display: block;
}
.pay-promo-box input {
  width: 100%;
  height: 56px;
  border: 1px solid #373b49;
  border-radius: 8px;
  background: #262835;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  padding: 0 16px;
}
.pay-promo-box input::placeholder { color: #9fa3bf; }
.pay-promo-box.has-chip input { padding-right: 136px; }
.pay-promo-box.ok input { border-color: rgba(30, 228, 76, .4); }
.pay-promo-box.bad input { border-color: #e6b84d; }
.pay-promo-chip {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  padding: 4px 8px;
  border-radius: 40px;
  background: rgba(30, 228, 76, .1);
  color: #1ee44c;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.pay-promo-err {
  display: block;
  margin: 8px 0 0 8px;
  font-size: 12px;
  font-weight: 500;
  color: #e6b84d;
}
.pay-amount { margin-top: 16px; text-align: left; }
.pay-amount .pay-field { margin: 0 0 10px; }
.pay-field {
  position: relative;
  display: block;
  margin: 16px 0 10px;
}
.pay-field input {
  width: 100%;
  height: 56px;
  border: 0;
  border-radius: 18px;
  background: #161b22;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  padding: 0 56px 0 16px;
}
.pay-field:not(.stars-only) input { padding-right: 108px; }
.pay-field-cur {
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
  color: #8b97a8;
  font-size: 13px;
  font-weight: 800;
}
.pay-field-cur:empty, .pay-field-cur[hidden] { display: none; }
.pay-field-ico {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
}
.pay-field-ico img { width: 28px; height: 28px; border-radius: 50%; }
.pay-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 2px 8px;
  font-size: 14px;
  color: #8b97a8;
}
.pay-total b { color: #fff; font-size: 16px; }
.pay-bonus-hint {
  margin: 0 2px 10px;
  color: #1ee44c;
  font-size: 13px;
  font-weight: 700;
}
.pay-req {
  margin: 16px 0 12px;
  padding: 16px;
  border-radius: 20px;
  background: #161b22;
  text-align: left;
}
.pay-req-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.pay-req-head img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.pay-req-head b { display: block; font-size: 16px; }
.pay-req-head small { display: block; color: #8b97a8; margin-top: 2px; font-weight: 600; }
.pay-req-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-size: 14px;
  color: #8b97a8;
}
.pay-req-row b { color: #fff; font-size: 15px; }
.pay-req-hint { color: #8b97a8; font-size: 12px; line-height: 1.4; margin: 8px 0 12px; }
.pay-copy {
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: #2a313b;
  color: #fff;
  font-weight: 800;
}
.pay-nft-pic {
  width: 120px;
  height: 120px;
  margin: 18px auto 12px;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}
.pay-nft-to { font-size: 16px; font-weight: 800; margin: 8px 0; }
.pay-nft-to a { color: #4aa3ff; }

.inv-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 14px;
  text-align: center;
}
.inv-hero-ava {
  position: relative;
  width: 86px;
  height: 86px;
}
.inv-hero-ava img, .inv-hero-ava .profile-ava {
  width: 86px;
  height: 86px;
  border-radius: 22px;
  object-fit: cover;
}
.inv-lvl {
  position: absolute;
  right: -4px;
  bottom: -4px;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 99px;
  background: #11161c;
  border: 2px solid #f5c14a;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.inv-hero b { font-size: 20px; letter-spacing: -.02em; }
.inv-hero .inv-connect {
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 99px;
  background: #2ea6ff;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
}
.inv-tabs {
  display: flex;
  gap: 18px;
  padding: 2px 4px 10px;
}
.inv-tab {
  border: 0;
  background: transparent;
  color: #6d7786;
  font-size: 20px;
  font-weight: 800;
  padding: 0;
}
.inv-tab.on { color: #fff; }
.inv-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px 10px;
}
.inv-tools p { color: #8b97a8; font-size: 14px; font-weight: 700; }
.inv-tools-btns { display: flex; gap: 8px; }
.inv-tool {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 99px;
  background: #1b222b;
  color: #d7dee8;
  display: grid;
  place-items: center;
}
.inv-tool svg { width: 16px; height: 16px; }
.inv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding-bottom: 88px;
}
.inv-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: 20px;
  overflow: hidden;
  border: 0;
  background: linear-gradient(180deg, #1a2430, #10161d);
  cursor: pointer;
}
.inv-tile.common { background: linear-gradient(180deg, #1a2630, #101820); }
.inv-tile.uncommon { background: linear-gradient(180deg, #123528, #0d1c18); }
.inv-tile.rare { background: linear-gradient(180deg, #12324a, #0d1824); }
.inv-tile.epic { background: linear-gradient(180deg, #2a1a40, #140e1c); }
.inv-tile.legendary { background: linear-gradient(180deg, #3a2a10, #1a1408); }
.inv-tile img,
.inv-tile .gift-media {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px 14px 34px;
}
.inv-tile .gift-media {
  padding: 8px 8px 34px;
}
.inv-tile .gift-lottie,
.prize-card .gift-lottie,
.gb-grid .gift-lottie {
  position: absolute;
  inset: 0;
}
.inv-tile .inv-price {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 28px;
  border-radius: 999px;
  background: rgba(8,12,16,.74);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
.inv-tile .inv-price .tg-star { width: 13px; height: 13px; }
.inv-activity { display: grid; gap: 8px; padding-bottom: 88px; }
.inv-act {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: #161b22;
}
.inv-act img { width: 48px; height: 48px; object-fit: contain; }
.inv-act b { display: block; font-size: 14px; }
.inv-act small { color: #8b97a8; font-size: 12px; font-weight: 700; }
.inv-dock {
  position: sticky;
  bottom: calc(var(--dock) + 10px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  z-index: 6;
}
.inv-sell-all, .inv-out-all {
  height: 52px;
  border: 0;
  border-radius: 16px;
  font-weight: 800;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.inv-sell-all { background: #2a313b; color: #fff; }
.inv-sell-all .tg-star { width: 14px; height: 14px; }
.inv-out-all {
  background: linear-gradient(90deg, #5ad0ff, #8b5cf6 50%, #ff4d9a);
  color: #111;
  box-shadow: 0 10px 22px rgba(139, 92, 246, .28);
}
.inv-item-actions { display: grid; gap: 8px; margin-top: 12px; }
.inv-detail-sheet {
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  background: #05070c;
}
.inv-detail {
  width: 100%;
  min-height: 100dvh;
  padding: calc(12px + var(--safe-top)) 16px calc(28px + var(--safe-bottom));
  overflow: auto;
  text-align: left;
}
.inv-back {
  border: 0;
  background: transparent;
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  padding: 8px 0 14px;
}
.inv-card {
  position: relative;
  width: min(100%, 340px);
  margin: 0 auto 18px;
  aspect-ratio: 3 / 4;
  border-radius: 28px;
  background:
    radial-gradient(70% 46% at 50% 36%, rgba(167, 139, 250, .38), transparent 58%),
    radial-gradient(90% 50% at 50% 100%, rgba(42, 171, 238, .14), transparent 55%),
    linear-gradient(180deg, #171f35 0%, #0a0e18 100%);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255,255,255,.08);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.inv-card::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180, 140, 255, .35), transparent 68%);
  filter: blur(6px);
  pointer-events: none;
}
.inv-card::after {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 22px;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: .18;
  pointer-events: none;
}
.gift-media {
  display: grid;
  place-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 72px;
}
.gift-media img[hidden],
.up-anim img[hidden],
#winAnim .win-pic[hidden] {
  display: none !important;
}
.gift-media img,
.gift-media video,
.gift-media svg,
.gift-media canvas,
.gift-media .up-anim,
.gift-media .up-anim svg,
.gift-media .up-anim img,
.gift-media .up-anim video,
.gift-media .up-anim canvas,
.gift-media .gift-lottie {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: none;
}
.gift-hero {
  width: 160px;
  height: 160px;
  margin: 0 auto 8px;
}
.inv-card .gift-media {
  position: relative;
  z-index: 1;
  width: 78%;
  height: 68%;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .4));
}
.inv-card img,
.inv-card video,
.inv-card svg {
  position: relative;
  z-index: 1;
  width: 78%;
  height: 68%;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .4));
}
.inv-card .gift-media img,
.inv-card .gift-media video,
.inv-card .gift-media svg {
  width: 100%;
  height: 100%;
  filter: none;
}
.inv-card-price {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(8, 10, 16, .72);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
}
.inv-card-price img, .inv-card-price .tg-star { width: 14px; height: 14px; }
.inv-rare {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #16324d;
  color: #7ec8ff;
  font-size: 12px;
  font-weight: 800;
}
.inv-detail h3 { font-size: 28px; letter-spacing: -.03em; margin: 0 0 4px; }
.inv-kind { color: #8b97a8; font-size: 14px; margin-bottom: 14px; }
.inv-attrs {
  border-radius: 18px;
  background: #141920;
  overflow: hidden;
  margin-bottom: 16px;
}
.inv-attrs div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 12px 14px;
  font-size: 14px;
  border-top: 1px solid rgba(255,255,255,.04);
}
.inv-attrs div:first-child { border-top: 0; }
.inv-attrs span { color: #8b97a8; }
.inv-attrs b { text-align: right; font-weight: 700; }
.inv-tools3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.inv-tool3 {
  position: relative;
  height: 74px;
  border: 0;
  border-radius: 18px;
  background: #1b212b;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.inv-plus {
  position: absolute;
  top: -7px;
  right: -5px;
  z-index: 2;
  padding: 3px 7px;
  border-radius: 8px;
  background: #c8ff4a;
  color: #111814;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(200, 255, 74, .35);
}
.inv-tool3 svg { width: 22px; height: 22px; }
.inv-tool3.on {
  box-shadow: 0 0 0 1.5px #a78bfa, 0 8px 20px rgba(139, 92, 246, .28);
}
.inv-tool3.busy,
.inv-tool3:disabled {
  opacity: .65;
}
.inv-share-note {
  min-height: 18px;
  margin: 0 0 10px;
  color: #c4b5fd;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.inv-act2 {
  display: grid;
  grid-template-columns: 1.3fr .9fr;
  gap: 8px;
}
.inv-sell {
  height: 52px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(90deg, #5ad0ff, #8b5cf6 48%, #ff4d9a);
  color: #111;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.inv-sell em {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  color: #fff;
  font-style: normal;
  font-size: 12px;
}
.inv-out {
  height: 52px;
  border: 0;
  border-radius: 16px;
  background: #1b212b;
  color: #fff;
  font-weight: 800;
}
.inv-out:disabled { opacity: .5; }
.pack.on {
  border-color: transparent;
  background: linear-gradient(180deg, #3bbcff, #1e96d1);
  color: #fff;
}
.packs { display: grid; gap: 8px; margin-top: 12px; }
.pack {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  padding: 14px;
  font-weight: 800;
}
.pack.promo-pack {
  border-color: rgba(42,171,238,.55);
  background: linear-gradient(180deg, #3bbcff, #1e96d1);
  color: #fff;
}
.gift-pay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 215, 106, .12);
  border: 1px solid rgba(255, 215, 106, .35);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
}
.gift-pay small { color: var(--gold); font-size: 12px; }
.pack-timer {
  font-variant-numeric: tabular-nums;
  background: rgba(0,0,0,.22);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 13px;
}
.styles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.style-card {
  border: 1px solid var(--stroke);
  background: #101c28;
  border-radius: 14px;
  padding: 8px;
  text-align: center;
  cursor: pointer;
}
.style-card img { width: 100%; height: 72px; object-fit: contain; }
.style-card span { display: block; font-size: 10px; color: var(--muted); margin-top: 4px; line-height: 1.3; }
.star, .tg-star {
  width: 14px;
  height: 14px;
  max-width: 14px;
  max-height: 14px;
  display: inline-block;
  vertical-align: -2px;
  object-fit: contain;
  background: none;
  overflow: visible;
}
.star-live {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: inline-grid;
  place-items: center;
  pointer-events: none;
}
.star-live svg { width: 20px !important; height: 20px !important; }
.cost .star-live, .cost-line .star-live, .card .star-live, .meta .star-live, .value .star-live, .up-num .star-live, .up-extra .star-live {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}
.cost .star-live svg, .cost-line .star-live svg, .card .star-live svg, .meta .star-live svg, .value .star-live svg, .up-extra .star-live svg {
  width: 14px !important;
  height: 14px !important;
}
@keyframes star-twinkle {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(255,213,74,.35)); }
  50% { transform: scale(1.08); filter: drop-shadow(0 0 5px rgba(255,213,74,.7)); }
}
.tg-star, .star-live > img, .star-live > svg {
  animation: star-twinkle 1.8s ease-in-out infinite;
  background: none;
}
.cost-line { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; }
.row-scroll { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 10px; }
.row-scroll .card { min-width: 132px; flex: 0 0 132px; min-height: 168px; }
.card.picked { outline: 2px solid #2aabee; }

.up-arena {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 22px;
  padding: 14px 10px 14px;
  margin-bottom: 12px;
  text-align: center;
}
.up-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}
.up-box {
  border: 0;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.up-box small { color: var(--muted); font-size: 11px; font-weight: 700; }
.up-box-pic {
  width: 100%;
  max-width: 104px;
  aspect-ratio: 1;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,.12);
  background: #0b1520;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.up-box-pic .up-ph { width: 36%; opacity: .95; filter: drop-shadow(0 0 8px rgba(42,171,238,.4)); }
.up-box-pic.filled { border-style: solid; border-color: rgba(42,171,238,.45); background: #0b1520; }
.up-box-pic.filled img { width: 78%; height: 78%; object-fit: contain; }
.up-anim {
  position: relative;
  width: 86%;
  height: 86%;
  display: grid;
  place-items: center;
  contain: layout paint;
}
.up-anim svg, .up-anim img, .up-anim canvas, .up-anim .gift-lottie {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}
.gift-lottie {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.up-gauge {
  position: relative;
  width: 100%;
  max-width: 268px;
  margin: 0 auto;
  aspect-ratio: 1;
  filter: drop-shadow(0 16px 32px rgba(42,171,238,.2));
}
.up-gauge-glow {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(42,171,238,.32), rgba(42,171,238,.05) 46%, transparent 72%);
  pointer-events: none;
}
.up-gauge-bg, .up-gauge-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.up-logo {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 20%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 16px rgba(42,171,238,.55));
  z-index: 2;
  pointer-events: none;
}
.up-chance {
  position: absolute;
  left: 0;
  right: 0;
  top: 56%;
  z-index: 2;
  color: #e8f7ff;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.04em;
  text-shadow: 0 0 18px rgba(42,171,238,.7);
  pointer-events: none;
}
.up-pointer-rotor {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  transform-origin: 50% 50%;
}
.up-pointer {
  position: absolute;
  left: 50%;
  bottom: 0.4%;
  width: 11%;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 8px rgba(42,171,238,.75));
}
.hint:empty { display: none; }
.up-btn {
  width: 100%;
  height: 48px;
  margin-top: 12px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, #3bbcff, #1e96d1);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(42,171,238,.32);
}
.up-btn img { width: 12px; height: 12px; filter: brightness(0) invert(1); }
.up-btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.up-arena .hint { margin-top: 10px; }
.up-controls { margin-top: 12px; text-align: left; }
.up-kicker {
  margin: 10px 0 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.up-kicker:first-child { margin-top: 0; }
.up-mults { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.up-chip {
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: var(--text);
  border-radius: 999px;
  height: 34px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  flex: 0 0 auto;
}
.up-chip.active {
  background: rgba(42,171,238,.18);
  border-color: #2aabee;
  color: #7ec8ee;
}
.up-custom {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.up-custom label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.up-num {
  display: flex;
  align-items: center;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: #0b1520;
  padding: 0 8px;
  color: #7ec8ee;
  font-weight: 800;
}
.up-num input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 800;
  outline: none;
}
.up-slider { display: block; margin-top: 12px; }
.up-slider span { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.up-slider b { color: #7ec8ee; }
.up-slider input[type="range"] {
  width: 100%;
  accent-color: #2aabee;
  height: 4px;
}
.up-extra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.up-extra input {
  width: 96px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: #0b1520;
  color: #fff;
  padding: 0 10px;
  font: inherit;
  font-weight: 800;
}
.up-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin: 4px 0 8px;
}
.up-buy-btn {
  width: 100%;
  height: 34px;
  margin-top: 8px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #3bbcff, #1e96d1);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
}
.inv-actions {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.inv-actions .up-buy-btn { margin-top: 0; }
.out-btn {
  width: 100%;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #3dd68c, #1f9d5f);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(61, 214, 140, .22);
}
.sell-btn {
  width: 100%;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffd76a, #e0a21a);
  color: #1a1406;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(255, 215, 106, .22);
}
.sell-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}
.out-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.out-preview img {
  width: 120px;
  height: 120px;
  object-fit: contain;
}
.out-dest {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0 14px;
}
.out-chip {
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  font-weight: 800;
  cursor: pointer;
}
.out-chip.active {
  border-color: transparent;
  background: linear-gradient(180deg, #3dd68c, #1f9d5f);
  color: #fff;
  box-shadow: 0 8px 18px rgba(61, 214, 140, .22);
}
#outSendBtn, #outDone .btn-claim {
  width: 100%;
  flex: none;
  margin-top: 4px;
}
#outDone .sub { margin: 8px 0 16px; line-height: 1.4; }
.out-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
  background: #2a3642;
}
.battle-hero { padding-bottom: 18px; }
.battle-stake {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(167, 139, 250, .35);
  background: rgba(139, 92, 246, .12);
}
.battle-stake[hidden] { display: none !important; }
.battle-stake img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 12px;
  background: #101821;
}
.battle-stake b { display: block; font-size: 14px; }
.battle-stake span { color: #ffe7a8; font-size: 12px; font-weight: 800; }
.battle-stake .ghost { margin-left: auto; }
.battle-slot .stake-pic {
  width: 28px;
  height: 28px;
  object-fit: contain;
  margin: -2px auto 6px;
  display: block;
}
.battle-search {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 168px;
  margin: 4px 0 12px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: #09131c;
}
.battle-search[hidden] { display: none !important; }
.battle-search b { font-size: 16px; }
.search-orb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #2aabee;
  box-shadow: 0 0 0 0 rgba(42,171,238,.45);
  animation: search-pulse 1.1s ease-out infinite;
}
@keyframes search-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(42,171,238,.45); }
  70% { transform: scale(1.15); box-shadow: 0 0 0 14px rgba(42,171,238,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(42,171,238,0); }
}
.battle-seats {
  display: grid;
  grid-template-columns: repeat(var(--seats, 2), minmax(0, 1fr));
  gap: 8px;
  margin: 4px 0 12px;
}
.battle-slot {
  min-height: 168px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(8, 16, 24, .88);
  padding: 10px 6px;
  text-align: center;
}
.battle-slot.me { box-shadow: inset 0 0 0 1px rgba(42,171,238,.35); }
.battle-slot.win { box-shadow: inset 0 0 0 1px rgba(255,215,106,.45); }
.battle-slot .who { font-size: 11px; font-weight: 800; color: var(--muted); margin-bottom: 8px; }
.battle-slot .sum { margin-top: 8px; font-size: 12px; font-weight: 800; color: #ffe7a8; }
.v-stack {
  display: flex;
  justify-content: center;
}
.v-wrap {
  --v-cell: 72px;
  box-sizing: content-box;
  position: relative;
  overflow: hidden;
  width: calc(var(--v-cell) + 8px);
  height: calc(var(--v-cell) * 3);
  border-radius: 18px;
  background: #09131c;
  border: 1px solid rgba(255,255,255,.06);
}
.v-wrap::before, .v-wrap::after {
  content: "";
  position: absolute;
  left: 0; right: 0; height: var(--v-cell); z-index: 3; pointer-events: none;
}
.v-wrap::before { top: 0; background: linear-gradient(180deg, #09131c 0%, #09131c 42%, transparent); }
.v-wrap::after { bottom: 0; background: linear-gradient(0deg, #09131c 0%, #09131c 42%, transparent); }
.v-window {
  position: absolute;
  left: 4px;
  top: var(--v-cell);
  width: var(--v-cell);
  height: var(--v-cell);
  border: 2px solid #f5c518;
  border-radius: 16px;
  box-shadow: none;
  z-index: 4;
  pointer-events: none;
}
.v-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0;
  will-change: transform;
}
.v-track .cell,
.v-track .cell.common,
.v-track .cell.uncommon,
.v-track .cell.rare,
.v-track .cell.epic,
.v-track .cell.legendary {
  flex: 0 0 var(--v-cell);
  width: var(--v-cell);
  height: var(--v-cell);
  border-radius: 16px;
  box-shadow: none;
  background: #101c28;
}
.v-track .cell img { width: 56px; height: 56px; }
.v-track .rarity-bar { display: none; }
.battle-hist {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 28px;
  margin-top: 8px;
}
.battle-hist img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 6px;
  background: #101c28;
}
.battle-status {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--stroke);
  font-weight: 800;
  margin-bottom: 12px;
}
.battle-setup { display: grid; gap: 10px; margin-bottom: 12px; }
.battle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 800;
}
.battle-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--stroke);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
.up-buy-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}
.up-tab {
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  font-weight: 800;
  cursor: pointer;
}
.up-tab.active {
  background: rgba(42,171,238,.16);
  border-color: #2aabee;
  color: #7ec8ee;
}
.up-shop-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 8px;
  margin-bottom: 10px;
}
.up-shop-bar input, .up-shop-bar select {
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: #0b1520;
  color: #fff;
  padding: 0 12px;
  font: inherit;
}
.card .up-odds {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 800;
  color: #7ec8ee;
}

.upgrade-box { background: var(--card); border: 1px solid var(--stroke); border-radius: 18px; padding: 14px; margin-bottom: 12px; }
.field { display: block; margin-bottom: 10px; text-align: left; }
.field span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.field input {
  width: 100%; height: 44px; border-radius: 12px; border: 1px solid var(--stroke);
  background: #0b1520; color: #fff; padding: 0 12px; font: inherit;
}
.field-row { display: flex; gap: 8px; }
.field-row input {
  flex: 1; min-width: 0; height: 44px; border-radius: 12px; border: 1px solid var(--stroke);
  background: #0b1520; color: #fff; padding: 0 12px; font: inherit;
}
.footer { margin-top: 22px; color: var(--muted); font-size: 11px; text-align: center; line-height: 1.5; }

@media (max-width: 520px) {
  .roulette-wrap { height: 136px; }
  .brand b { font-size: 14px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .brand small { display: none; }
  .top-actions { gap: 6px; }
  .icon-btn { width: 32px; height: 32px; }
  .avatar-btn { width: 32px; height: 32px; }
}

.prizes-page { padding: 2px 0 8px; }
.prizes-count {
  color: #9fa3bf;
  font-size: 13px;
  font-weight: 600;
}
.prizes-search { display: block; margin: 4px 0 0; }
.prizes-search input {
  width: 100%;
  height: 44px;
  border: 1px solid #2a3142;
  outline: none;
  background: #161a26;
  color: #fff;
  border-radius: 12px;
  padding: 0 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
}
.prizes-search input::placeholder { color: #6d7388; }
#page-prizes .gb-pills { padding: 12px 0 14px; }
.prize-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.prize-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  min-height: 196px;
  padding: 16px 10px 12px;
  border: 0;
  border-radius: 16px;
  background: #12151d;
  color: #fff;
  overflow: hidden;
}
.prize-card::before {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  top: -18px;
  height: 64px;
  border-radius: 50%;
  filter: blur(16px);
  pointer-events: none;
  opacity: .55;
}
.prize-card.common::before { background: rgba(154, 168, 184, .28); }
.prize-card.uncommon::before { background: rgba(61, 214, 140, .32); }
.prize-card.rare::before { background: rgba(74, 163, 255, .36); }
.prize-card.epic::before { background: rgba(192, 132, 252, .36); }
.prize-card.legendary::before { background: rgba(255, 176, 32, .4); }
.prize-card .gift-media {
  position: relative;
  z-index: 1;
  width: 108px;
  height: 108px;
  min-height: 108px;
  overflow: visible;
  background: none;
}
.prize-card .gift-media img,
.prize-card .gift-media video,
.prize-card .gift-media canvas {
  display: block;
  width: 108px;
  height: 108px;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.4));
}
.prize-card b {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}
.prize-price {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 10px;
  border-radius: 40px;
  background: rgba(8, 10, 16, .72);
  font-size: 13px;
  font-weight: 800;
}
.prize-price .tg-star,
.prize-price .star-live { width: 13px; height: 13px; }