:root {
  --bg: #0b0d11;
  --bg-2: #121621;
  --accent: #66f2b6;
  --gold: #f6d36c;
  --rare: #71c4ff;
  --epic: #ff7fd4;
  --legend: #ffb36b;
  --text: #e9edf4;
  --muted: #9aa5b1;
  --crate: #2a2f3a;
  --crate-edge: #3c4454;
  --lid: #232733;
  --shadow: rgba(0, 0, 0, 0.5);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}

.mobile-splash-logo {
  display: none;
}

.mobile-carousel-shell {
  display: none;
}

.mobile-crate-odds {
  display: none;
}

.mobile-mid-box {
  display: none;
}

.mobile-mid-box--top {
  display: none;
}

.mobile-auth-gate {
  display: none;
}

.mobile-intro-screen {
  display: none;
}

#mobileTopRect,
#mobileBottomRect,
#mobileCenterVinyl,
#mobileAutoSpinRow,
#mobileCrateBtn {
  display: none;
}

/* Global live legendary shiny pull feed */
.live-pulls {
  position: fixed;
  right: max(10px, env(safe-area-inset-right));
  top: calc(92px + env(safe-area-inset-top));
  width: min(320px, 26vw);
  max-height: calc(100vh - 116px - env(safe-area-inset-top));
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(9, 14, 24, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.44);
  z-index: 40;
  overflow: hidden;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.live-pulls.is-collapsed {
  transform: translateX(calc(100% + 14px));
  opacity: 0;
  pointer-events: none;
}

.live-pulls-toggle {
  position: fixed;
  right: calc(min(320px, 26vw) + 20px + env(safe-area-inset-right));
  top: calc(104px + env(safe-area-inset-top));
  z-index: 41;
  border: 1px solid rgba(122, 247, 195, 0.35);
  background: rgba(8, 14, 24, 0.9);
  color: #c9ffe8;
  border-radius: 10px;
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.live-pulls-toggle:hover {
  border-color: rgba(122, 247, 195, 0.62);
}

.live-pulls-toggle.is-collapsed {
  right: max(10px, env(safe-area-inset-right));
}

.live-pulls-leaderboard-btn {
  position: fixed;
  right: calc(min(320px, 26vw) + 20px + env(safe-area-inset-right));
  top: calc(140px + env(safe-area-inset-top));
  z-index: 41;
  border: 1px solid rgba(122, 247, 195, 0.35);
  background: rgba(8, 14, 24, 0.9);
  color: #c9ffe8;
  border-radius: 10px;
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.live-pulls-leaderboard-btn:hover,
.live-pulls-leaderboard-btn.active {
  border-color: rgba(122, 247, 195, 0.62);
}

.live-pulls-leaderboard-btn.is-collapsed {
  right: max(10px, env(safe-area-inset-right));
}

.live-pulls-guess-btn {
  position: fixed;
  right: calc(min(320px, 26vw) + 20px + env(safe-area-inset-right));
  top: calc(184px + env(safe-area-inset-top));
  z-index: 41;
  border: 1px solid rgba(122, 247, 195, 0.35);
  background: rgba(8, 14, 24, 0.9);
  color: #c9ffe8;
  border-radius: 10px;
  width: 42px;
  height: 42px;
  padding: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(122, 247, 195, 0.2);
}

.live-pulls-guess-btn:hover,
.live-pulls-guess-btn.active {
  border-color: rgba(122, 247, 195, 0.62);
}

.live-pulls-guess-btn.is-collapsed {
  right: max(10px, env(safe-area-inset-right));
}

.weekly-leaderboard {
  position: fixed;
  right: calc(min(320px, 26vw) + 56px + env(safe-area-inset-right));
  top: calc(140px + env(safe-area-inset-top));
  width: min(300px, 30vw);
  max-height: min(360px, calc(100vh - 168px - env(safe-area-inset-top)));
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(9, 14, 24, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.42);
  z-index: 40;
  opacity: 0;
  transform: translateX(10px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.weekly-leaderboard.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.weekly-leaderboard.is-collapsed {
  right: max(44px, calc(40px + env(safe-area-inset-right)));
}

.weekly-leaderboard__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.weekly-leaderboard__title-wrap {
  display: grid;
  gap: 3px;
}

.weekly-leaderboard__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(122, 247, 195, 0.95);
}

.weekly-leaderboard__week {
  font-size: 11px;
  color: rgba(228, 236, 255, 0.66);
}

.weekly-leaderboard__close {
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(8, 12, 20, 0.7);
  color: #f3f7ff;
  border-radius: 8px;
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.weekly-leaderboard__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.weekly-leaderboard__item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 12, 20, 0.62);
}

.weekly-leaderboard__rank {
  font-size: 12px;
  font-weight: 700;
  color: rgba(245, 248, 255, 0.78);
}

.weekly-leaderboard__player {
  min-width: 0;
}

.weekly-leaderboard__name {
  font-size: 12px;
  font-weight: 700;
  color: #f5f7ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.weekly-leaderboard__meta {
  font-size: 10px;
  color: rgba(228, 236, 255, 0.62);
}

.weekly-leaderboard__xp {
  font-size: 12px;
  font-weight: 700;
  color: rgba(122, 247, 195, 0.94);
  white-space: nowrap;
}

.weekly-leaderboard__empty {
  font-size: 12px;
  color: rgba(228, 236, 255, 0.7);
  text-align: center;
  padding: 12px 10px;
  border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  background: rgba(8, 12, 20, 0.55);
}

body.ui-blocking-open .live-pulls,
body.ui-blocking-open .live-pulls-toggle,
body.ui-blocking-open .live-pulls-leaderboard-btn,
body.ui-blocking-open .live-pulls-guess-btn,
body.ui-blocking-open .weekly-leaderboard {
  opacity: 0 !important;
  pointer-events: none !important;
}

.live-pulls__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(122, 247, 195, 0.95);
}

.live-pulls__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.live-pulls__item {
  display: grid;
  gap: 6px;
}

.live-pulls__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.live-pulls__user {
  font-size: 12px;
  font-weight: 700;
  color: #f5f7ff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-pulls__time {
  font-size: 10px;
  color: rgba(228, 236, 255, 0.66);
  flex-shrink: 0;
}

.live-pulls__offer-row.offer__target-row {
  margin: 0;
  min-height: 0;
  padding: 8px;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 9px;
  border-radius: 12px;
  cursor: default;
}

.live-pulls__offer-row .offer__list-cover {
  width: 56px;
  height: 56px;
  border-radius: 10px;
}

.live-pulls__offer-row .offer__list-meta {
  gap: 2px;
}

.live-pulls__offer-row .offer__list-rarity {
  font-size: 10px;
}

.live-pulls__offer-row .offer__list-title {
  font-size: 13px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-pulls__offer-row .offer__list-subtitle {
  font-size: 11px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.live-pulls__offer-row.offer__target-row .offer__slot-apple {
  margin-top: 6px;
  min-width: 92px;
  height: 22px;
}

.live-pulls__offer-row.shiny--legendary {
  border-color: rgba(255, 179, 107, 0.82) !important;
  box-shadow:
    0 0 0 1px rgba(255, 179, 107, 0.46),
    0 0 32px rgba(255, 179, 107, 0.36) !important;
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 179, 107, 0.28), rgba(0, 0, 0, 0)),
    linear-gradient(160deg, rgba(10, 18, 38, 0.95), rgba(5, 10, 26, 0.96)) !important;
}

.live-pulls__offer-row.shiny--epic {
  border-color: rgba(255, 127, 212, 0.76) !important;
  box-shadow:
    0 0 0 1px rgba(255, 127, 212, 0.44),
    0 0 30px rgba(255, 127, 212, 0.34) !important;
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 127, 212, 0.26), rgba(0, 0, 0, 0)),
    linear-gradient(160deg, rgba(10, 18, 38, 0.95), rgba(5, 10, 26, 0.96)) !important;
}

.live-pulls__empty {
  font-size: 12px;
  color: rgba(228, 236, 255, 0.7);
  text-align: center;
  padding: 14px 10px;
  border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  background: rgba(8, 12, 20, 0.55);
}

@media (max-width: 1200px) {
  .live-pulls {
    width: min(300px, 29vw);
  }

  .live-pulls-toggle {
    right: calc(min(300px, 29vw) + 20px + env(safe-area-inset-right));
  }

  .live-pulls-leaderboard-btn {
    right: calc(min(300px, 29vw) + 20px + env(safe-area-inset-right));
  }

  .live-pulls-guess-btn {
    right: calc(min(300px, 29vw) + 20px + env(safe-area-inset-right));
  }

  .weekly-leaderboard {
    right: calc(min(300px, 29vw) + 56px + env(safe-area-inset-right));
    width: min(286px, 32vw);
  }
}

@media (max-width: 1024px) {
  .live-pulls {
    left: 10px !important;
    right: 10px !important;
    top: auto !important;
    bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-height: min(34vh, 210px) !important;
    padding: 9px !important;
    border-radius: 12px !important;
    z-index: 40 !important;
  }

  .live-pulls-toggle {
    right: max(10px, env(safe-area-inset-right));
    top: calc(68px + env(safe-area-inset-top));
    width: 28px;
    height: 28px;
    font-size: 16px;
  }

  .live-pulls-leaderboard-btn {
    right: max(10px, env(safe-area-inset-right));
    top: calc(102px + env(safe-area-inset-top));
    width: 28px;
    height: 28px;
    font-size: 9px;
  }

  .live-pulls-guess-btn {
    right: max(10px, env(safe-area-inset-right));
    top: calc(146px + env(safe-area-inset-top));
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .weekly-leaderboard {
    right: max(10px, env(safe-area-inset-right));
    top: calc(102px + env(safe-area-inset-top));
    width: min(320px, calc(100vw - 20px));
    max-height: min(42vh, 280px);
  }

  .weekly-leaderboard.is-collapsed {
    right: max(10px, env(safe-area-inset-right));
  }

  .live-pulls__list {
    gap: 6px;
  }

  .live-pulls__offer-row.offer__target-row {
    grid-template-columns: 50px minmax(0, 1fr);
    padding: 8px;
    gap: 8px;
  }

  .live-pulls__offer-row .offer__list-cover {
    width: 50px;
    height: 50px;
  }

  .live-pulls__offer-row .offer__list-title {
    font-size: 12px;
  }
}

@media (max-width: 430px) {
  .live-pulls {
    left: 6px !important;
    right: 6px !important;
    bottom: calc(82px + env(safe-area-inset-bottom)) !important;
    max-height: min(31vh, 178px) !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  .live-pulls__label {
    font-size: 10px;
  }

  .live-pulls-toggle {
    right: max(6px, env(safe-area-inset-right));
    top: calc(64px + env(safe-area-inset-top));
    width: 26px;
    height: 26px;
    font-size: 15px;
  }

  .live-pulls-leaderboard-btn {
    right: max(6px, env(safe-area-inset-right));
    top: calc(94px + env(safe-area-inset-top));
    width: 26px;
    height: 26px;
    font-size: 8px;
  }

  .live-pulls-guess-btn {
    right: max(6px, env(safe-area-inset-right));
    top: calc(132px + env(safe-area-inset-top));
    width: 34px;
    height: 34px;
    font-size: 15px;
  }

  .weekly-leaderboard {
    right: max(6px, env(safe-area-inset-right));
    top: calc(94px + env(safe-area-inset-top));
    width: min(312px, calc(100vw - 12px));
    max-height: min(40vh, 250px);
    padding: 8px;
    gap: 8px;
  }

  .live-pulls__offer-row.offer__target-row {
    grid-template-columns: 46px minmax(0, 1fr);
    min-height: 0;
    padding: 7px;
    gap: 7px;
  }

  .live-pulls__offer-row .offer__list-cover {
    width: 46px;
    height: 46px;
  }

  .live-pulls__offer-row .offer__list-title {
    font-size: 11px;
  }

  .live-pulls__offer-row .offer__list-subtitle {
    font-size: 10px;
  }
}

@media (max-width: 900px) {
  .quests__grid {
    display: flex !important;
    flex-direction: column !important;
    align-content: initial !important;
    gap: 10px !important;
  }

  .quest__card {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: auto !important;
    gap: 8px !important;
  }

  .quest__title {
    order: 1;
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  .quest__progress,
  .quest__reward {
    order: 2;
    line-height: 1.3 !important;
  }

  .quest__meter {
    order: 3;
  }

  .quest__reward {
    order: 4;
  }

  .quest__card .btn {
    order: 5;
    margin-top: 6px !important;
    position: static !important;
    width: 100% !important;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  overflow-x: hidden;
  background: #0b0d11;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(circle at 20% 15%, #1a2233 0%, var(--bg) 50%),
    radial-gradient(circle at 85% 75%, #0c1627 0%, var(--bg) 55%);
  color: var(--text);
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
}

.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  justify-content: center;
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: fixed;
  top: 16px;
  left: 24px;
  right: 24px;
  z-index: 15;
}

.top__center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
}

.xpbar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.notify-bar {
  position: absolute;
  left: 50%;
  top: 46px;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  padding-right: 36px;
  border-radius: 12px;
  background: rgba(14, 20, 32, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
  font-size: 13px;
  letter-spacing: 0.2px;
  min-height: 18px;
  max-width: 420px;
  text-align: center;
}

.notify-bar.active {
  display: flex;
}

.notify-bar #notifyBarText {
  width: 100%;
}

.notify-bar__close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 999px;
  color: #ff6d6d;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.notify-bar__close:hover {
  color: #ff4b4b;
  background: rgba(255, 75, 75, 0.14);
}

.xpbar__level {
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text);
}

.xpbar__track {
  width: clamp(120px, 26vw, 220px);
  height: 8px;
  border-radius: 999px;
  background: rgba(12, 16, 24, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.xpbar__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #7af7c3, #56e3ff);
  box-shadow: 0 0 12px rgba(102, 242, 182, 0.4);
  transition: width 0.3s ease;
}

.xpbar__info {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(10, 12, 18, 0.6);
  color: var(--text);
  cursor: pointer;
  font-weight: 600;
}

.xp-floater {
  position: fixed;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  z-index: 25;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.xp-float {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #7af7c3;
  text-shadow: 0 0 14px rgba(102, 242, 182, 0.55);
  animation: xp-float-up 1.2s ease-out forwards;
}

@keyframes xp-float-up {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-30px) scale(1.02);
  }
}

.wallet {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
}

.wallet__bell {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(12, 18, 28, 0.72);
  color: var(--text);
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.wallet__bell.has-notification {
  border-color: rgba(122, 247, 195, 0.6);
  box-shadow: 0 0 0 1px rgba(122, 247, 195, 0.28);
}

.notify-history {
  position: fixed;
  right: 12px;
  top: 64px;
  width: min(420px, 92vw);
  max-height: min(70vh, 620px);
  display: none;
  flex-direction: column;
  gap: 8px;
  background: rgba(10, 16, 28, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 10px;
  z-index: 360;
}

.notify-history.active {
  display: flex;
}

.notify-history__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.notify-history__header h3 {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.4px;
}

.notify-history__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  max-height: calc(min(70vh, 620px) - 56px);
  padding-right: 2px;
}

.notify-history__item {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 8px 10px;
  background: rgba(8, 12, 20, 0.75);
}

.notify-history__text {
  font-size: 12px;
  color: var(--text);
}

.notify-history__time {
  margin-top: 4px;
  font-size: 10px;
  color: var(--muted);
}

.wallet__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted);
}

.wallet__value {
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 600;
  color: #7af7c3;
}

.wallet__value--key {
  color: #f6d47d;
}

.wallet__cost {
  font-size: 12px;
  color: var(--muted);
}

.brand {
  display: flex;
  align-items: center;
  gap: 18px;
}

.brand__mark {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(102, 242, 182, 0.4);
  color: var(--accent);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.brand h1 {
  margin: 0;
  font-size: clamp(22px, 3.2vw, 30px);
  line-height: 1;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.brand p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.stats {
  display: flex;
  gap: 16px;
}

.stat {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 16px;
  border-radius: 12px;
  min-width: 140px;
  text-align: left;
}

.stat span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 6px;
}

.stat strong {
  font-size: 18px;
}

.stat--button {
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.stat--button:hover {
  border-color: rgba(122, 247, 195, 0.4);
  transform: translateY(-1px);
}

.arena {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  justify-items: center;
}

.crate-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.crate-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--muted);
}

.open-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.open-row__primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.open-row__primary::before {
  content: "";
  width: 34px;
  flex: 0 0 34px;
}

.open-row__secondary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.feature-lock-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.feature-lock-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  color: #ffd6d6;
  background: rgba(16, 20, 32, 0.52);
  border: 1px solid rgba(255, 120, 120, 0.4);
  backdrop-filter: blur(3px);
  pointer-events: none;
  padding: 4px 8px;
}

.feature-lock-overlay.active {
  display: flex;
  pointer-events: auto;
  cursor: not-allowed;
}

.feature-lock-overlay.active:hover::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  background: rgba(10, 12, 18, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 6px 8px;
  color: #e8edf7;
  font-size: 11px;
  white-space: nowrap;
  letter-spacing: 0;
  text-transform: none;
  z-index: 200;
}

.feature-lock-wrap--pill .feature-lock-overlay {
  border-radius: 999px;
}

#marketLockWrap .feature-lock-overlay {
  border-radius: 12px;
}

#autoPackageLockWrap {
  border-radius: 999px;
  overflow: visible;
}

#autoPackageLockWrap {
  width: 286px;
  min-height: 44px;
}

#autoPackageLockWrap .feature-lock-overlay,
#autoPackageLockWrap .feature-lock-overlay {
  border-radius: 999px;
  width: 100%;
  height: 100%;
  padding: 4px 10px;
  font-size: 9px;
  letter-spacing: 0.07em;
}

#autoPackageLockWrap.is-locked #crateAutoBtn {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: transparent;
}

#autoPackageLockWrap.is-locked .auto-toggle {
  opacity: 0;
}

.auto-package {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

#marketLockWrap .feature-lock-overlay {
  backdrop-filter: none;
  background: rgba(8, 11, 18, 0.9);
  box-shadow: none;
  text-shadow: none;
}

.crate-auto {
  position: relative;
}

.crate-auto__btn {
  padding: 8px 12px;
  font-size: 11px;
}

.crate-auto__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 280px;
  background: rgba(10, 12, 18, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 10px;
  display: none;
  flex-direction: column;
  gap: 8px;
  z-index: 35;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.crate-auto__panel.active {
  display: flex;
}

body.ui-blocking-open #autoPackageLockWrap,
body.ui-blocking-open .crate-auto {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.ui-blocking-open .settings-fab,
body.ui-blocking-open .settings-rail {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.auto-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

.mobile-spin-btn {
  display: none;
}

.auto-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.auto-toggle__track {
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: rgba(15, 20, 28, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.18);
  position: relative;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.auto-toggle__track::after {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f2f1f7;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.2s ease, background 0.2s ease;
}

.auto-toggle input:checked + .auto-toggle__track {
  background: rgba(86, 227, 255, 0.25);
  border-color: rgba(86, 227, 255, 0.7);
}

.auto-toggle input:checked + .auto-toggle__track::after {
  transform: translateX(20px);
  background: #7cf7c3;
}

.auto-toggle__label {
  font-weight: 600;
  letter-spacing: 0.4px;
}

.odds-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}

.glow {
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(102, 242, 182, 0.4) 0%, rgba(102, 242, 182, 0) 70%);
  filter: blur(20px);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

.crate-wrap.shiny-hit .glow {
  opacity: 1;
  transform: translateY(0) scale(1.35);
  filter: blur(26px);
  animation: shiny-hit-pulse 1.8s ease-in-out;
}

.crate-wrap {
  position: relative;
}

.crate-wrap.shiny-hit::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 28px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 62%);
  animation: shiny-hit-flash 1.8s ease-out forwards;
}

.crate {
  width: 220px;
  height: 170px;
  position: relative;
  transform-style: preserve-3d;
}

.vinyl {
  width: clamp(170px, 30vw, 220px);
  height: clamp(170px, 30vw, 220px);
  position: relative;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.08), transparent 45%),
    radial-gradient(circle, #1a202c 0%, #0c0f15 65%, #0a0c12 100%);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
  animation: vinyl-spin 3.6s linear infinite;
}

.crate-wrap.shiny-hit .vinyl {
  animation-duration: 0.18s;
  filter: drop-shadow(0 0 22px rgba(255, 255, 255, 0.82));
}

.crate-wrap.shiny-hit .vinyl__disc::before {
  background: radial-gradient(circle, rgba(255, 255, 255, 1), rgba(255, 215, 140, 0.9));
  box-shadow: 0 0 32px rgba(255, 255, 255, 0.95);
}

.vinyl::before {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: repeating-radial-gradient(
      circle,
      rgba(255, 255, 255, 0.05) 0 2px,
      rgba(0, 0, 0, 0) 2px 6px
    ),
    radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.08), transparent 55%);
  opacity: 0.5;
  mix-blend-mode: screen;
  pointer-events: none;
}

.vinyl__logo {
  position: absolute;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: rgba(12, 16, 24, 0.65);
  text-transform: uppercase;
  background: rgba(122, 247, 195, 0.75);
  padding: 6px 10px;
  border-radius: 999px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.25), 0 6px 16px rgba(0, 0, 0, 0.35);
}

.crate--starter .vinyl__disc::before {
  background: radial-gradient(circle, rgba(122, 247, 195, 0.9), rgba(86, 227, 255, 0.6));
}

.crate--free .vinyl__disc::before {
  background: radial-gradient(circle, rgba(140, 233, 255, 0.95), rgba(92, 192, 255, 0.68));
}

.crate--pro .vinyl__disc::before {
  background: radial-gradient(circle, rgba(255, 199, 99, 0.95), rgba(255, 140, 84, 0.65));
  box-shadow: 0 0 18px rgba(255, 176, 92, 0.6);
}

.crate--ultra .vinyl__disc::before {
  background: radial-gradient(circle, rgba(221, 140, 255, 0.95), rgba(109, 194, 255, 0.7));
  box-shadow: 0 0 22px rgba(155, 170, 255, 0.65);
}

.crate--master .vinyl__disc::before {
  background: conic-gradient(
    from 10deg,
    rgba(255, 223, 120, 0.95),
    rgba(255, 121, 198, 0.85),
    rgba(93, 255, 245, 0.9),
    rgba(255, 223, 120, 0.95)
  );
  box-shadow: 0 0 28px rgba(255, 219, 122, 0.7), 0 0 14px rgba(115, 235, 255, 0.5);
}

.crate--top100usa2025 .vinyl__disc::before {
  background: conic-gradient(
    from 20deg,
    rgba(122, 247, 195, 0.95),
    rgba(111, 205, 255, 0.92),
    rgba(255, 212, 132, 0.9),
    rgba(122, 247, 195, 0.95)
  );
  box-shadow: 0 0 26px rgba(122, 247, 195, 0.65), 0 0 16px rgba(111, 205, 255, 0.48);
}

.crate--top500streamed .vinyl__disc::before {
  background: conic-gradient(
    from 25deg,
    rgba(255, 84, 197, 0.95),
    rgba(255, 124, 219, 0.92),
    rgba(255, 211, 239, 0.9),
    rgba(255, 84, 197, 0.95)
  );
  box-shadow: 0 0 26px rgba(255, 84, 197, 0.68), 0 0 16px rgba(255, 134, 224, 0.52);
}

.crate--artist .vinyl__disc::before {
  background: conic-gradient(
    from 20deg,
    rgba(255, 180, 97, 0.95),
    rgba(255, 108, 184, 0.88),
    rgba(108, 218, 255, 0.9),
    rgba(255, 180, 97, 0.95)
  );
  box-shadow: 0 0 26px rgba(255, 160, 96, 0.68), 0 0 16px rgba(255, 128, 190, 0.52);
}

.crate--pro .vinyl::after,
.crate--ultra .vinyl::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 16px rgba(255, 190, 120, 0.2);
}

.crate--ultra .vinyl::after {
  box-shadow: 0 0 20px rgba(160, 180, 255, 0.35);
}

.crate--master .vinyl::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(255, 232, 155, 0.55);
  box-shadow: 0 0 28px rgba(255, 220, 130, 0.35), 0 0 38px rgba(120, 236, 255, 0.28);
}

.crate--master .vinyl__logo {
  background: linear-gradient(135deg, rgba(255, 240, 178, 0.95), rgba(157, 241, 255, 0.9));
  color: rgba(16, 22, 34, 0.9);
}

.crate--top100usa2025 .vinyl__logo {
  background: linear-gradient(135deg, rgba(167, 255, 227, 0.95), rgba(144, 217, 255, 0.92));
  color: rgba(12, 21, 34, 0.92);
}

.crate--top500streamed .vinyl__logo {
  background: linear-gradient(135deg, rgba(255, 205, 239, 0.96), rgba(255, 135, 219, 0.92));
  color: rgba(36, 8, 28, 0.92);
}

.crate--artist .vinyl__logo {
  background: linear-gradient(135deg, rgba(255, 219, 176, 0.96), rgba(255, 152, 210, 0.9));
  color: rgba(38, 12, 20, 0.92);
}

.reveal.shiny-mode .vinyl {
  animation-duration: 0.18s;
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.6));
}

.reveal.shiny-mode .vinyl__disc::before {
  background: radial-gradient(circle, rgba(255, 255, 255, 1), rgba(255, 215, 140, 0.75));
  box-shadow: 0 0 28px rgba(255, 255, 255, 0.8);
}

.reveal.shiny-mode .vinyl::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.7);
}

.vinyl__disc {
  width: 68%;
  height: 68%;
  border-radius: 50%;
  background: radial-gradient(circle, #0f141e 0%, #0b0f16 55%, #0a0c12 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}

.vinyl__disc::before {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(122, 247, 195, 0.9), rgba(86, 227, 255, 0.6));
  box-shadow: 0 0 16px rgba(102, 242, 182, 0.55);
}

.vinyl__disc::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.06);
}

.vinyl__shine {
  position: absolute;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 60%);
  top: 10%;
  right: 8%;
  filter: blur(1px);
  opacity: 0.7;
}

.vinyl--large {
  width: 320px;
  height: 320px;
}

.btn {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(135deg, #7af7c3, #56e3ff);
  border: none;
  color: #0b0d11;
  padding: 14px 18px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(102, 242, 182, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}

.btn__label {
  position: relative;
  z-index: 2;
}

.btn__hold {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 0%;
  background: rgba(11, 13, 17, 0.15);
  transition: width 0.06s linear;
  z-index: 1;
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: none;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 24px rgba(102, 242, 182, 0.4);
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
}

.result {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.crate-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  width: 100%;
}

.crate-picker__card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px;
  background: rgba(8, 10, 16, 0.6);
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.crate-picker__card.active {
  border-color: rgba(122, 247, 195, 0.5);
}

.crate-picker__card:hover {
  transform: translateY(-2px);
}

.crate-picker__title {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  margin-bottom: 6px;
}

.crate-picker__meta {
  font-size: 12px;
  color: var(--muted);
}

.promo {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.promo--compact {
  width: auto;
  max-width: none;
  align-items: flex-end;
  position: relative;
}

.promo__toggle {
  background: transparent;
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  cursor: pointer;
}

.promo__panel {
  position: absolute;
  top: 48px;
  right: 0;
  width: 260px;
  background: rgba(10, 12, 18, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 12px;
  display: none;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
  z-index: 10;
}

.promo__panel.active {
  display: block;
}

.promo label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted);
}

.promo__row {
  display: flex;
  gap: 10px;
}

.promo input {
  flex: 1;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 10, 16, 0.6);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.promo__msg {
  min-height: 18px;
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

/* Collection */
.collection {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 60;
}

.collection.active {
  display: flex;
}

.collection__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 10, 16, 0.72);
}

.collection__panel {
  position: relative;
  width: min(1000px, 92vw);
  max-height: 84vh;
  background: rgba(10, 12, 18, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 24px;
  overflow: auto;
  overflow-anchor: none;
  z-index: 1;
}

.collection__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.collection__header h2 {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.collection__header p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.collection__header-actions {
  display: flex;
  gap: 10px;
}

.collection__sell-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.collection__controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.collection__controls-auto {
  margin-left: auto;
}

.collection__controls-auto .collection__shiny-auto {
  margin-top: 0;
}

.collection__bulk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(12, 16, 24, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 12px;
}

.collection__bulk.is-hidden {
  display: none;
}

.collection__bulk-info {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
}

.collection__card.is-selectable {
  cursor: pointer;
}

.collection__card.is-selected {
  border-color: rgba(122, 247, 195, 0.8);
  box-shadow: 0 0 0 2px rgba(122, 247, 195, 0.25);
  background: rgba(22, 40, 36, 0.95);
  outline: 2px solid rgba(122, 247, 195, 0.95);
  outline-offset: -2px;
}

.collection__tabs {
  display: flex;
  gap: 8px;
  margin: 10px 0 16px;
}

.collection__tab {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(12, 16, 24, 0.6);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.collection__tab.active {
  border-color: rgba(122, 247, 195, 0.6);
  background: rgba(12, 22, 26, 0.95);
  box-shadow: 0 0 0 1px rgba(122, 247, 195, 0.5);
}

.collection__panels {
  min-height: 0;
}

.collection__panel-body {
  display: none;
}

.collection__panel-body.active {
  display: block;
}

.collection__controls input {
  flex: 1;
  min-width: 220px;
  background: rgba(8, 10, 16, 0.7);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.collection__shiny-stack {
  border-color: rgba(124, 194, 255, 0.28);
  background: linear-gradient(160deg, rgba(17, 26, 44, 0.92), rgba(20, 18, 34, 0.9));
}

.collection__shiny-stack--common {
  border-color: rgba(128, 196, 255, 0.3);
}

.collection__shiny-stack--rare {
  border-color: rgba(104, 236, 176, 0.34);
}

.collection__shiny-stack--epic {
  border-color: rgba(225, 160, 255, 0.35);
}

.collection__shiny-stack--legendary {
  border-color: rgba(255, 205, 122, 0.4);
}

.collection__shiny-vinyl-wrap {
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 35%, rgba(154, 105, 255, 0.3), rgba(22, 26, 42, 0.9));
}

.collection__shiny-vinyl {
  width: 82px;
  height: 82px;
}

.collection__shiny-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.collection__shiny-title-row .collection__title {
  min-height: 0;
  -webkit-line-clamp: 1;
}

.collection__shiny-stack-actions {
  margin-top: auto;
}

.collection__shiny-open {
  width: 100%;
}

.collection__shiny {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(16, 20, 30, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 16px;
}

.collection__shiny-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.collection__shiny-title {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.info-pill {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(12, 16, 24, 0.75);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  padding: 0;
}

.info-pill__tooltip {
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10, 12, 18, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  z-index: 5;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
}

.info-pill:hover .info-pill__tooltip,
.info-pill:focus-visible .info-pill__tooltip {
  opacity: 1;
}

.collection__shiny-sub {
  font-size: 13px;
  color: var(--muted);
}

.collection__shiny-auto {
  margin-top: 8px;
}

.collection__controls label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
}

.collection__controls select {
  background: rgba(8, 10, 16, 0.7);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.market__trade-filters {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 10px;
  margin: 10px 0 14px;
}

.market__trade-filters input,
.market__trade-filters select {
  background: rgba(8, 10, 16, 0.7);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 8px 10px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.collection__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  align-items: start;
}

.collection__pager {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.collection__pager.is-hidden {
  display: none;
}

.collection__pager-label {
  min-width: 170px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

.collection__card {
  background: rgba(14, 18, 28, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  width: 100%;
  min-width: 0;
}

.collection__grid .market__listing-card {
  width: 100%;
  max-width: none;
}

.collection__card .cover {
  width: 100%;
  height: 120px;
  align-self: stretch;
  background: transparent;
  border: none;
}

.collection__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.collection__rarity {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.collection__title {
  font-size: 16px;
  font-weight: 600;
}

.collection__subtitle {
  font-size: 13px;
  color: var(--muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.collection__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.45em;
}

.collection__grid .collection__card,
.profile__grid .collection__card,
.profile__collection-grid .collection__card,
.profile-picker__grid .collection__card,
.market__grid .collection__card {
  height: 320px;
}

.collection__grid .collection__meta,
.profile__grid .collection__meta,
.profile__collection-grid .collection__meta,
.profile-picker__grid .collection__meta,
.market__grid .collection__meta {
  flex: 1;
}

.collection__count {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(8, 10, 16, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
}

.collection__card--empty {
  border: 1px dashed rgba(255, 255, 255, 0.12);
  background: rgba(8, 10, 16, 0.35);
  min-height: 220px;
}

.collection__empty {
  margin: 20px 0 0;
  color: var(--muted);
  text-align: center;
  display: none;
}

.collection__empty.active {
  display: block;
}

.auth {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 60;
}

.auth.active {
  display: flex;
}

.auth__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 12, 0.88);
  backdrop-filter: blur(10px);
}

.auth__panel {
  position: relative;
  z-index: 2;
  width: min(420px, 90vw);
  background: rgba(12, 16, 24, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px 20px 12px 12px;
  padding: 24px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
  text-align: left;
}

.auth__panel h3 {
  margin: 0 0 6px;
  font-size: 20px;
}

.auth__panel p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 14px;
}

.auth__label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin: 12px 0 6px;
}

.auth__input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 10, 16, 0.9);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.auth__password {
  position: relative;
}

.auth__password .auth__input {
  padding-right: 44px;
}

.auth__eye {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.auth__eye:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

.auth__actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.auth__msg {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.banned .page {
  pointer-events: none;
  filter: blur(1px);
  opacity: 0.6;
}

.tracks {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 55;
}

.tracks.active {
  display: flex;
}

.tracks__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 12, 0.88);
  backdrop-filter: blur(8px);
}

.tracks__panel {
  position: relative;
  z-index: 2;
  width: min(980px, 92vw);
  max-height: 85vh;
  overflow: hidden;
  background: rgba(12, 16, 24, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}

.tracks__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tracks__header p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.tracks__controls {
  display: grid;
  grid-template-columns: auto 1fr auto 180px;
  gap: 12px;
  align-items: center;
}

.tracks__controls label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
}

.tracks__controls input,
.tracks__controls select {
  background: rgba(8, 10, 16, 0.7);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.tracks__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  overflow: auto;
  padding-right: 6px;
}

.market {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 55;
}

.market.active {
  display: flex;
}

.market__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 12, 0.88);
  backdrop-filter: blur(8px);
}

.market__panel {
  position: relative;
  z-index: 2;
  width: min(1400px, 96vw);
  max-height: 92vh;
  overflow: hidden;
  background: rgba(12, 16, 24, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}

.market__toast {
  min-height: 0;
  font-size: 13px;
  color: var(--text);
  background: rgba(12, 18, 28, 0.85);
  border: 1px solid rgba(122, 247, 195, 0.4);
  border-radius: 12px;
  padding: 10px 12px;
  display: none;
}

.market__list--hidden {
  display: none !important;
}

.market__hidden {
  display: none;
}

.crate-picker-btn {
  position: static;
  margin: 0;
  font-size: 12px;
  padding: 8px 12px;
}

.crate-picker {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 60;
}

.crate-picker.active {
  display: flex;
}

.crate-picker__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 12, 0.88);
  backdrop-filter: blur(8px);
}

.crate-picker__panel {
  position: relative;
  z-index: 2;
  width: min(720px, 94vw);
  max-height: 70vh;
  overflow: hidden;
  background: rgba(12, 16, 24, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.crate-picker__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.crate-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  overflow: auto;
  padding-right: 6px;
  max-height: 52vh;
}

.crate-picker__card {
  cursor: pointer;
  position: relative;
}

.crate-picker__genre-card {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text);
  background: rgba(10, 14, 22, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.14);
  appearance: none;
  -webkit-appearance: none;
}

.crate-picker__genre-card .collection__meta {
  width: 100%;
}

.crate-picker__genre-card .collection__title {
  color: var(--text);
  font-weight: 700;
  font-size: 20px;
}

.crate-picker__genre-card .collection__subtitle {
  color: var(--muted);
  font-size: 14px;
}

.crate-picker__multiplier {
  color: #7af7c3;
  font-weight: 700;
  margin-left: 6px;
}

.crate-picker__cover {
  display: grid;
  place-items: center;
  height: 120px;
  border-radius: 12px;
  background: rgba(8, 10, 16, 0.6);
}

.crate-picker__disc {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  position: relative;
  background: radial-gradient(circle, rgba(122, 247, 195, 0.85) 0%, rgba(10, 12, 18, 0.9) 70%);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 0 0 14px rgba(122, 247, 195, 0.2);
  animation: vinyl-spin 5.8s linear infinite;
}

.crate-picker__disc::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: repeating-radial-gradient(
      circle,
      rgba(255, 255, 255, 0.08) 0 1px,
      rgba(0, 0, 0, 0) 1px 4px
    ),
    radial-gradient(circle, rgba(15, 20, 30, 0.65) 0%, rgba(8, 10, 14, 0.95) 70%);
  opacity: 0.6;
}

.crate-picker__disc::after {
  content: "SC";
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  letter-spacing: 1px;
  color: rgba(10, 14, 20, 0.7);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.35);
}

.crate-picker__disc--starter {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 0 0 14px rgba(122, 247, 195, 0.3);
}

.crate-picker__disc--free {
  background: radial-gradient(circle, rgba(140, 233, 255, 0.92) 0%, rgba(10, 12, 18, 0.92) 70%);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 0 0 14px rgba(110, 220, 255, 0.35);
}

.crate-picker__disc--pro {
  background: radial-gradient(circle, rgba(255, 199, 99, 0.9) 0%, rgba(10, 12, 18, 0.92) 70%);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 0 0 16px rgba(255, 176, 92, 0.35);
}

.crate-picker__disc--ultra {
  background: radial-gradient(circle, rgba(221, 140, 255, 0.92) 0%, rgba(10, 12, 18, 0.92) 70%);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 0 0 18px rgba(155, 170, 255, 0.4);
}

.crate-picker__disc--shiny {
  background: conic-gradient(
    from 20deg,
    rgba(110, 230, 255, 0.92),
    rgba(255, 142, 232, 0.86),
    rgba(155, 255, 210, 0.9),
    rgba(110, 230, 255, 0.92)
  );
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.48), 0 0 24px rgba(146, 217, 255, 0.5);
}

.crate-picker__disc--shiny-common {
  background: radial-gradient(circle, rgba(118, 204, 255, 0.95) 0%, rgba(12, 18, 30, 0.95) 72%);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 0 0 18px rgba(108, 194, 255, 0.45);
}

.crate-picker__disc--shiny-rare {
  background: radial-gradient(circle, rgba(121, 245, 182, 0.95) 0%, rgba(10, 22, 24, 0.95) 72%);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 0 0 18px rgba(121, 245, 182, 0.45);
}

.crate-picker__disc--shiny-epic {
  background: radial-gradient(circle, rgba(226, 146, 255, 0.95) 0%, rgba(18, 12, 28, 0.95) 72%);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 0 0 20px rgba(217, 136, 255, 0.48);
}

.crate-picker__disc--shiny-legendary {
  background: radial-gradient(circle, rgba(255, 215, 122, 0.96) 0%, rgba(24, 16, 8, 0.95) 72%);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 0 0 22px rgba(255, 206, 112, 0.5);
}

.crate-picker__disc--master {
  background: conic-gradient(
    from 30deg,
    rgba(255, 223, 120, 0.95),
    rgba(255, 121, 198, 0.82),
    rgba(93, 255, 245, 0.9),
    rgba(255, 223, 120, 0.95)
  );
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 0 0 24px rgba(255, 220, 128, 0.45);
}

.crate-picker__disc--top100usa2025 {
  background: conic-gradient(
    from 35deg,
    rgba(122, 247, 195, 0.95),
    rgba(111, 205, 255, 0.9),
    rgba(255, 212, 132, 0.88),
    rgba(122, 247, 195, 0.95)
  );
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 0 0 24px rgba(122, 247, 195, 0.48);
}

.crate-picker__disc--artist {
  background: conic-gradient(
    from 35deg,
    rgba(255, 180, 97, 0.95),
    rgba(255, 108, 184, 0.88),
    rgba(108, 218, 255, 0.9),
    rgba(255, 180, 97, 0.95)
  );
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 0 0 24px rgba(255, 150, 104, 0.5);
}

.crate-picker__disc--top500streamed {
  background: conic-gradient(
    from 40deg,
    rgba(255, 84, 197, 0.95),
    rgba(255, 134, 224, 0.9),
    rgba(255, 204, 239, 0.9),
    rgba(255, 84, 197, 0.95)
  );
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 0 0 24px rgba(255, 84, 197, 0.5);
}

.crate-picker__card--master {
  border-color: rgba(255, 226, 142, 0.45);
  box-shadow: inset 0 0 0 1px rgba(124, 233, 255, 0.18), 0 10px 26px rgba(12, 22, 42, 0.35);
}

.crate-picker__card--top100usa2025 {
  border-color: rgba(122, 247, 195, 0.46);
  box-shadow: inset 0 0 0 1px rgba(122, 247, 195, 0.22), 0 10px 24px rgba(13, 34, 36, 0.35);
}

.crate-picker__card--top500streamed {
  border-color: rgba(255, 102, 210, 0.48);
  box-shadow: inset 0 0 0 1px rgba(255, 126, 219, 0.24), 0 10px 24px rgba(45, 16, 40, 0.38);
}

.crate-picker__card--artist {
  border-color: rgba(255, 170, 120, 0.48);
  box-shadow: inset 0 0 0 1px rgba(255, 180, 120, 0.22), 0 10px 24px rgba(45, 20, 28, 0.36);
}

.crate-picker__card[data-info]::after {
  content: attr(data-info);
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(10, 14, 22, 0.9);
  color: #d9e6f2;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 11px;
  letter-spacing: 0.3px;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.crate-picker__card:hover::after,
.crate-picker__card:focus-within::after {
  opacity: 1;
  transform: translateY(0);
}

.crate-picker__odds {
  position: absolute;
  top: 10px;
  right: 10px;
}
.market__toast.active {
  display: block;
}

.market__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.market__title {
  margin: 0;
  font-size: 20px;
}

.market__balance {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
}

.market__balance-item {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(12, 18, 28, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.market__tabs {
  display: flex;
  gap: 8px;
}

.market__tab {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(12, 16, 24, 0.6);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.market__tab.active {
  border-color: rgba(122, 247, 195, 0.6);
  background: rgba(12, 22, 26, 0.95);
  box-shadow: 0 0 0 1px rgba(122, 247, 195, 0.5);
}

.market__panels {
  min-height: 0;
  max-height: 80vh;
  overflow: hidden;
}

.market__panel-body {
  display: none;
  max-height: 80vh;
  overflow: hidden;
}

.market__panel-body.active {
  display: block;
}

.market__offers {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 62vh;
  overflow: auto;
  padding-right: 6px;
}

.market__trade {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.trade__panel--inline {
  width: 320px;
  justify-self: center;
  margin-left: auto;
  margin-right: auto;
}

.market__trade-grid h3 {
  margin: 0;
}

.market__trade-grid p {
  margin: 6px 0 10px;
  color: var(--muted);
  font-size: 13px;
}

.market__fuse {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.market__fuse p {
  color: var(--muted);
  margin: 6px 0 10px;
  font-size: 13px;
}

.market__fuse-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.market__fuse-card {
  background: rgba(6, 10, 18, 0.9);
  border: 1px solid rgba(120, 140, 170, 0.2);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 150px;
  box-shadow: inset 0 0 24px rgba(10, 20, 30, 0.5);
}

.market__fuse-title {
  font-weight: 700;
  font-size: 16px;
}

.market__fuse-sub {
  color: var(--muted);
  font-size: 13px;
}

.market__fuse-count {
  font-size: 13px;
  color: var(--text);
  margin-top: auto;
}

.trade__panel--inline {
  height: auto;
  position: relative;
  max-height: none;
  overflow: visible;
  padding: 12px;
}

.trade__panel--inline.is-empty {
  display: none;
}

.market__trade-placeholder {
  align-self: center;
  text-align: center;
  padding: 24px;
  border-radius: 16px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  color: var(--muted);
  font-size: 13px;
}

.trade__panel--inline {
  width: 100%;
  background: rgba(10, 14, 20, 0.8);
  transform: none;
}

.market__grid--selector {
  margin-top: 16px;
  max-height: 44vh;
}

.market__grid--selector {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: rgba(8, 10, 16, 0.9);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.9);
  border-radius: 999px;
  border: 2px solid rgba(20, 24, 32, 0.9);
}

.market__header p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.market__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.market__list-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.market__inventory {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.market__inventory h3 {
  margin: 0;
}

.market__inventory p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.market__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 14px;
  overflow: auto;
  padding-right: 6px;
  max-height: 36vh;
}

.market__grid .collection__card {
  padding: 12px;
}

.market__grid .collection__card .cover {
  height: 90px;
}

.market__grid .collection__title {
  font-size: 13px;
}

.market__grid.market__grid--selector {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  max-height: 44vh;
}

.market__grid.market__grid--selector .collection__card {
  padding: 10px;
  min-width: 0;
}

.market__grid.market__grid--selector .collection__card .cover {
  height: 78px;
}

.market__grid.market__grid--selector .collection__title {
  font-size: 12px;
}

.market__grid.market__grid--selector .collection__subtitle {
  font-size: 11px;
}

.market__grid .collection__subtitle {
  font-size: 11px;
}

.market__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: auto;
  padding: 4px 10px 4px 8px;
  max-height: 36vh;
}

.market__list-wrap .market__list {
  max-height: 62vh;
}

.market__empty {
  padding: 16px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.market__card {
  background: rgba(8, 10, 16, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 420px;
  align-self: flex-start;
  overflow: visible;
}

.market__footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.market__content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: center;
}

.market__listing-card {
  padding: 14px;
  min-height: auto;
  width: 170px;
}

.market__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  font-size: 12px;
}

@media (min-width: 900px) {
  .market__details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.market__line {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(12, 18, 28, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  text-align: center;
}

.market__line--btn {
  cursor: default;
  border-color: rgba(122, 247, 195, 0.45);
  background: rgba(12, 20, 26, 0.9);
  text-transform: none;
}

.market__card-header {
  display: flex;
  gap: 12px;
  align-items: center;
}

.market__card-cover {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}

.market__card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.market__card-meta h4 {
  margin: 0;
  font-size: 15px;
}

.market__card-meta p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.market__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  background: rgba(255, 255, 255, 0.08);
}

.market__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}

.market__row--link {
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 0;
  cursor: pointer;
}

.market__actions {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
}

.market__actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.market__note {
  color: var(--muted);
  font-size: 12px;
}

.trade {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 60;
}

.trade.active {
  display: flex;
}

.trade__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 12, 0.88);
  backdrop-filter: blur(8px);
}

.trade__panel {
  position: relative;
  z-index: 2;
  width: min(480px, 92vw);
  background: rgba(12, 16, 24, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.trade__panel,
.trade__panel * {
  font-family: var(--mobile-game-font) !important;
}

.trade__body {
  display: flex;
  gap: 14px;
  align-items: stretch;
}

.trade__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.trade__offer {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(8, 10, 16, 0.6);
  border-radius: 16px;
  padding: 10px;
  min-width: 0;
}

.trade__offer-card.shiny-card.rare {
  box-shadow: 0 0 0 1px rgba(113, 196, 255, 0.6), 0 20px 50px rgba(113, 196, 255, 0.18);
}

.trade__offer-card.shiny-card.epic {
  box-shadow: 0 0 0 1px rgba(255, 127, 212, 0.6), 0 20px 50px rgba(255, 127, 212, 0.2);
}

.trade__offer-card.shiny-card.legendary {
  box-shadow: 0 0 0 1px rgba(255, 179, 107, 0.7), 0 22px 60px rgba(255, 179, 107, 0.24);
}

.trade__offer-card .rgb-title {
  animation: rgb-shift 3s linear infinite;
}

.trade__offer .cover,
.trade__offer img {
  width: 100%;
  height: 160px;
  border-radius: 12px;
  object-fit: cover;
}

.trade__fields {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  background: rgba(8, 10, 16, 0.6);
  border-radius: 16px;
  padding: 12px;
}

.trade__fields textarea {
  grid-column: 1 / -1;
  min-height: 32px;
  resize: vertical;
}

.trade__fields label {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
}

*, *::before, *::after {
  box-sizing: border-box;
}

.trade__fields input,
.trade__fields select,
.trade__fields textarea {
  background: rgba(8, 10, 16, 0.7);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 2px 6px;
  font-family: var(--mobile-game-font) !important;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.trade__panel--inline {
  overflow: visible;
}

.trade__fields {
  overflow: visible;
}

.trade__msg {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

#tradeSubmit {
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 800;
}

#tradeClose,
.trade__header h3,
.trade__offer .collection__title,
.trade__offer .collection__subtitle,
.trade__offer .collection__rarity,
.trade__fields label,
.trade__msg {
  font-family: var(--mobile-game-font) !important;
}

.offer {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 60;
}

.offer.active {
  display: flex;
}

.offer.offer--picker-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.offer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 12, 0.88);
  backdrop-filter: blur(8px);
}

.offer__panel {
  position: relative;
  z-index: 2;
  width: var(--offer-side-width, min(620px, 48vw));
  height: var(--offer-side-height, min(760px, 88vh));
  max-height: 92vh;
  background: rgba(12, 16, 24, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.offer__layout {
  position: relative;
  z-index: 2;
  --offer-side-width: min(620px, 48vw);
  --offer-side-height: min(760px, 88vh);
  display: flex;
  align-items: stretch;
  gap: 14px;
  width: min(1280px, 98vw);
}

.offer__target-wrap {
  width: var(--offer-side-width, min(620px, 48vw));
  height: var(--offer-side-height, min(760px, 88vh));
  max-height: 92vh;
  background: rgba(12, 16, 24, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}

.offer__header {
  position: absolute;
  top: -6px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
}

.offer__preview-label--panel {
  margin: 0 auto;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  line-height: 1.9;
  background: rgba(10, 14, 22, 0.8);
}

.offer__close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 95, 95, 0.6);
  background: rgba(40, 10, 10, 0.55);
  color: #ff6b6b;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.offer__close:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 95, 95, 0.9);
  box-shadow: 0 0 0 3px rgba(255, 95, 95, 0.15);
}

.offer__preview-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  position: static;
}

.offer__target-card {
  height: 100%;
  width: 100%;
  justify-content: flex-start;
  flex: 1;
}

.offer__target-card--multi {
  width: 100%;
  min-height: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.offer__target-list {
  width: 100%;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-right: 4px;
}

.offer__target-row {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(10, 18, 38, 0.95), rgba(5, 10, 26, 0.96));
  padding: 14px;
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 164px;
}

.offer__target-card--empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  padding: 16px;
}

.profile__offer .btn.is-selected {
  border-color: rgba(122, 247, 195, 0.6);
  color: rgb(188, 255, 230);
}

.profile__target-selected {
  border-color: rgba(122, 247, 195, 0.6) !important;
  box-shadow: 0 0 0 1px rgba(122, 247, 195, 0.3), 0 8px 24px rgba(122, 247, 195, 0.12);
}

.offer__form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  justify-content: flex-start;
  overflow: hidden;
  padding-top: 16px;
  min-height: 0;
}

.offer__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.market__inbox-btn {
  width: 100%;
  justify-content: space-between;
  text-align: left;
}

.market__outgoing-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.market__retract-btn {
  flex: 0 0 auto;
  border-color: rgba(255, 95, 95, 0.45);
  color: #ff8d8d;
  min-width: 88px;
}

.incoming-trade .offer__slot {
  cursor: default;
}

.incoming-trade__between {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: min(360px, 32vw);
  background: rgba(10, 14, 22, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 8px;
}

.incoming-trade__between-title {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 0 12px;
  line-height: 1.9;
  background: rgba(10, 14, 22, 0.8);
}

.incoming-trade__currency {
  width: 100%;
  gap: 4px;
}

.incoming-trade--outgoing #incomingGiveCard {
  align-items: stretch;
}

.incoming-trade .offer__slot.is-active {
  box-shadow: none;
}

.incoming-trade .offer__currency input {
  opacity: 0.7;
}

.incoming-trade:not(.incoming-trade--outgoing) .offer__actions {
  position: static;
  left: auto;
  top: auto;
  transform: none;
  z-index: auto;
  margin: 0;
  padding: 0;
  justify-content: flex-end;
}

.incoming-trade:not(.incoming-trade--outgoing) .offer__actions .btn {
  box-shadow: none;
}

.incoming-trade--outgoing #incomingMsg {
  position: static;
  left: auto;
  bottom: auto;
  transform: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
  border: none;
  background: transparent;
  z-index: auto;
  text-align: center;
}

.offer__form .btn {
  margin-top: 8px;
}

.offer__slots-wrap,
.offer__currency {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.offer__slots-wrap {
  flex: 1;
  min-height: 0;
}

/* Main offer panel: scroll cards separately, keep pricing/actions fixed */
#offer .offer__form {
  padding-top: 26px;
  gap: 10px;
}

#offer .offer__slots-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  border-radius: 12px;
}

#offer .offer__slots--editor {
  padding-bottom: 10px;
}

#offer .offer__currency {
  flex: 0 0 auto;
  margin-top: 2px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(122, 247, 195, 0.25);
  background: rgba(7, 12, 22, 0.82);
}

#offer #offerSubmit,
#offer #offerMsg {
  flex: 0 0 auto;
}

#incomingTrade .offer__form {
  padding-top: 26px;
  gap: 10px;
}

#incomingTrade .offer__slots-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  border-radius: 12px;
}

#incomingTrade .offer__currency {
  flex: 0 0 auto;
  margin-top: 2px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(122, 247, 195, 0.25);
  background: rgba(7, 12, 22, 0.82);
}

#incomingTrade .offer__actions,
#incomingTrade #incomingMsg {
  flex: 0 0 auto;
}

#incomingTrade.incoming-trade--outgoing .offer__target-wrap .incoming-trade__currency-box {
  margin-top: auto;
  width: 100%;
}

#offer .offer__slots-wrap {
  margin-top: 16px;
}

.offer__slots--editor {
  display: block;
  margin-top: 2px;
  min-height: 0;
  height: auto;
  overflow: visible;
  padding-right: 0;
}

.offer__slots--editor .offer__slot--list,
.offer__slot.offer__slot--list {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(10, 18, 38, 0.95), rgba(5, 10, 26, 0.96));
  padding: 14px;
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.offer__editor-placeholder {
  width: 100%;
  min-height: 164px;
  border-radius: 16px;
  border: 1px dashed rgba(122, 247, 195, 0.42);
  background: rgba(8, 14, 24, 0.35);
  color: #7bf5c4;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 14px;
}

.offer__offer-row {
  cursor: pointer;
}

.offer__target-list .offer__target-row.shiny-card,
.offer__slots--editor .offer__offer-row.shiny-card {
  border-color: rgba(122, 247, 195, 0.72) !important;
  box-shadow:
    0 0 0 1px rgba(122, 247, 195, 0.42),
    0 0 26px rgba(122, 247, 195, 0.28) !important;
  background:
    radial-gradient(circle at 82% 18%, rgba(122, 247, 195, 0.22), rgba(0, 0, 0, 0)),
    linear-gradient(160deg, rgba(10, 18, 38, 0.95), rgba(5, 10, 26, 0.96)) !important;
}

.offer__target-list .offer__target-row.shiny--rare,
.offer__slots--editor .offer__offer-row.shiny--rare {
  border-color: rgba(113, 196, 255, 0.74) !important;
  box-shadow:
    0 0 0 1px rgba(113, 196, 255, 0.42),
    0 0 28px rgba(113, 196, 255, 0.32) !important;
  background:
    radial-gradient(circle at 82% 18%, rgba(113, 196, 255, 0.24), rgba(0, 0, 0, 0)),
    linear-gradient(160deg, rgba(10, 18, 38, 0.95), rgba(5, 10, 26, 0.96)) !important;
}

.offer__target-list .offer__target-row.shiny--epic,
.offer__slots--editor .offer__offer-row.shiny--epic {
  border-color: rgba(255, 127, 212, 0.76) !important;
  box-shadow:
    0 0 0 1px rgba(255, 127, 212, 0.44),
    0 0 30px rgba(255, 127, 212, 0.34) !important;
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 127, 212, 0.26), rgba(0, 0, 0, 0)),
    linear-gradient(160deg, rgba(10, 18, 38, 0.95), rgba(5, 10, 26, 0.96)) !important;
}

.offer__target-list .offer__target-row.shiny--legendary,
.offer__slots--editor .offer__offer-row.shiny--legendary {
  border-color: rgba(255, 179, 107, 0.82) !important;
  box-shadow:
    0 0 0 1px rgba(255, 179, 107, 0.46),
    0 0 32px rgba(255, 179, 107, 0.36) !important;
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 179, 107, 0.28), rgba(0, 0, 0, 0)),
    linear-gradient(160deg, rgba(10, 18, 38, 0.95), rgba(5, 10, 26, 0.96)) !important;
}

.offer__target-list .offer__target-row.shiny-card::before,
.offer__target-list .offer__target-row.shiny-card::after,
.offer__slots--editor .offer__offer-row.shiny-card::before,
.offer__slots--editor .offer__offer-row.shiny-card::after {
  inset: -2px;
  border-radius: 16px;
  opacity: 0.88;
}

.offer__list-cover {
  width: 136px;
  height: 136px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(8, 10, 16, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.offer__list-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.offer__list-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.offer__list-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: #f3f7ff;
  white-space: normal;
  max-height: 2em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.offer__list-subtitle {
  font-size: 12px;
  line-height: 1.15;
  color: var(--muted);
  white-space: normal;
  max-height: 2.4em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.offer__list-rarity {
  width: fit-content;
  max-width: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.26);
}

.offer__list-remove {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(8, 10, 16, 0.76);
  color: #e8eef8;
  border-radius: 10px;
  cursor: pointer;
}

.offer__list-remove {
  width: 28px;
  height: 28px;
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  opacity: 0.88;
}

.offer__list-count {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: -2px;
}

.offer__add-row {
  width: 100%;
  min-height: 152px;
  border-radius: 16px;
  border: 1px dashed rgba(122, 247, 195, 0.55);
  background: rgba(8, 14, 24, 0.66);
  color: #7bf5c4;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
  padding: 18px 20px;
}

.offer__slots {
  display: grid;
  grid-template-columns: repeat(3, var(--offer-slot-size, 80px));
  grid-template-rows: repeat(3, calc(var(--offer-slot-size, 80px) * 1.28));
  gap: 4px;
  margin-top: 2px;
  height: 100%;
  min-height: 0;
  justify-content: center;
  align-content: center;
}

/* Keep offer editor out of legacy 3x3 slot grid rules */
.offer__slots.offer__slots--editor {
  display: block;
  grid-template-columns: none;
  grid-template-rows: none;
  gap: 0;
  height: auto;
  width: 100%;
  margin-top: 0;
}

.offer__slots.offer__slots--editor .offer__offer-row,
.offer__slots.offer__slots--editor .offer__editor-placeholder {
  width: 100%;
}

.offer__slot {
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: rgba(8, 10, 16, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 8px;
  line-height: 1.1;
  gap: 6px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.offer__slot.is-active {
  border-color: rgba(122, 247, 195, 0.6);
  box-shadow: 0 0 0 1px rgba(122, 247, 195, 0.3);
}

.offer__slot.has-card {
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.16);
  background: linear-gradient(160deg, rgba(10, 18, 38, 0.95), rgba(5, 10, 26, 0.96));
  align-items: stretch;
  justify-content: flex-start;
  gap: calc(var(--offer-slot-size, 80px) * 0.018);
  padding: calc(var(--offer-slot-size, 80px) * 0.038);
}

.offer__slot.shiny-card {
  box-shadow: 0 0 16px rgba(122, 247, 195, 0.35);
  border-color: rgba(122, 247, 195, 0.55);
}

.offer__slot.shiny--rare {
  box-shadow: 0 0 18px rgba(90, 182, 255, 0.4);
  border-color: rgba(90, 182, 255, 0.65);
}

.offer__slot.shiny--epic {
  box-shadow: 0 0 18px rgba(192, 118, 255, 0.45);
  border-color: rgba(192, 118, 255, 0.65);
}

.offer__slot.shiny--legendary {
  box-shadow: 0 0 20px rgba(255, 179, 92, 0.5);
  border-color: rgba(255, 179, 92, 0.7);
}

.offer__slot-cover {
  width: 100%;
  height: 58%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 8, 12, 0.6);
  border-radius: calc(var(--offer-slot-size, 80px) * 0.05);
  overflow: hidden;
  flex: 0 0 auto;
}

.offer__slot-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.offer__slot-meta {
  padding: 0;
  width: 100%;
  font-size: calc(var(--offer-slot-size, 80px) * 0.082);
  color: var(--text);
  text-align: left;
  line-height: 1.06;
  display: flex;
  flex-direction: column;
  gap: calc(var(--offer-slot-size, 80px) * 0.012);
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.offer__slot-meta .offer__slot-rarity {
  font-size: calc(var(--offer-slot-size, 80px) * 0.064);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.offer__slot-meta .offer__slot-title {
  font-weight: 600;
  color: #79c8ff;
  font-size: calc(var(--offer-slot-size, 80px) * 0.096);
  line-height: 1.1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.offer__slot-meta .offer__slot-subtitle {
  color: var(--muted);
  font-size: calc(var(--offer-slot-size, 80px) * 0.074);
  line-height: 1.15;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.offer__slot-apple {
  margin-top: auto;
  width: 82%;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.offer__slot-apple .source-badge__logo {
  height: auto;
  width: 100%;
  max-height: calc(var(--offer-slot-size, 80px) * 0.098);
  object-fit: contain;
}

.offer__slot--list .offer__slot-apple,
.offer__target-row .offer__slot-apple {
  width: auto;
  min-width: 124px;
  height: 34px;
  align-self: flex-start;
  justify-content: flex-start;
  margin-top: 10px;
}

.offer__slot--list .offer__slot-apple .source-badge__logo,
.offer__target-row .offer__slot-apple .source-badge__logo {
  width: auto;
  height: 100%;
  max-height: none;
}

.offer__currency label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
}

.offer__currency input {
  background: rgba(8, 10, 16, 0.7);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 6px 8px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  width: 100%;
  min-width: 0;
}

.offer__msg {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 900px) {
  .offer__layout {
    flex-direction: column;
    width: min(520px, 92vw);
  }

  .offer__target-wrap,
  .offer__panel {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
  }

  .incoming-trade__between {
    position: static;
    transform: none;
    width: 100%;
    align-items: stretch;
    margin: 6px 0;
  }

  .offer__slots {
    grid-template-columns: repeat(3, minmax(46px, 1fr));
  }

  .offer__slots--editor .offer__slot--list {
    grid-template-columns: 88px minmax(0, 1fr);
    padding: 8px;
    border-radius: 12px;
  }

  .offer__editor-placeholder {
    min-height: 104px;
    font-size: 16px;
    letter-spacing: 0.06em;
  }

  .offer__target-row {
    grid-template-columns: 80px minmax(0, 1fr);
    padding: 8px;
    border-radius: 12px;
  }

  .offer__list-cover {
    width: 80px;
    height: 80px;
  }

  .offer__list-title {
    font-size: 15px;
  }

  .offer__list-subtitle {
    font-size: 11px;
  }

  .offer__list-rarity {
    font-size: 12px;
    padding: 3px 8px;
  }

  .offer__list-remove {
    width: 24px;
    height: 24px;
    font-size: 18px;
    top: 6px;
    right: 6px;
  }

  .offer__add-row {
    min-height: 88px;
    font-size: 14px;
    padding: 12px 14px;
  }

  .offer__slot--list .offer__slot-apple,
  .offer__target-row .offer__slot-apple {
    min-width: 104px;
    height: 26px;
    margin-top: 6px;
  }
}

.all-listings {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 60;
}

.all-listings.active {
  display: flex;
}

.all-listings__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 12, 0.88);
  backdrop-filter: blur(8px);
}

.all-listings__panel {
  position: relative;
  z-index: 2;
  width: min(1100px, 94vw);
  max-height: 85vh;
  overflow: hidden;
  background: rgba(12, 16, 24, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.all-listings__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.all-listings__header p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.all-listings__filters {
  display: grid;
  grid-template-columns: 2fr 1.6fr 1fr 1fr 1fr;
  gap: 10px;
}

.all-listings__filters input,
.all-listings__filters select {
  background: rgba(8, 10, 16, 0.7);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 8px 10px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

#tradeAskShinyLabel,
#tradeAskShiny {
  display: none !important;
}

.all-listings__user-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}

.all-listings__search-btn {
  white-space: nowrap;
  min-height: 38px;
  padding-inline: 12px;
}

.all-listings__check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.collection__check,
.tracks__check,
.market__check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.toggle-pill {
  position: relative;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 10, 16, 0.6);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.toggle-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.toggle-pill__track {
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.toggle-pill__track::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(233, 237, 244, 0.9);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.toggle-pill__label {
  white-space: nowrap;
}

.toggle-pill input:checked + .toggle-pill__track {
  background: rgba(122, 247, 195, 0.25);
  border-color: rgba(122, 247, 195, 0.7);
}

.toggle-pill input:checked + .toggle-pill__track::after {
  transform: translateX(16px);
  background: #7af7c3;
  box-shadow: 0 0 10px rgba(122, 247, 195, 0.6);
}

.all-listings__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  overflow-y: auto;
  overflow-x: visible;
  padding: 6px 6px 6px 12px;
  max-height: 60vh;
}

.all-listings__list .collection__card {
  display: flex;
  flex-direction: column;
  min-height: 420px;
}

.all-listings__list .collection__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.all-listings__list .collection__subtitle {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.all-listings__list .market__footer {
  margin-top: auto;
}
.market__create {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.market__create label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
}

.market__create input,
.market__create select {
  background: rgba(8, 10, 16, 0.7);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.market__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: auto;
  padding-right: 6px;
}

.market__card {
  background: rgba(8, 10, 16, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.market__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}

.market__msg {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.card {
  background: rgba(14, 18, 28, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  outline: none;
  padding: 22px;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  position: relative;
  overflow: visible;
  background-clip: padding-box;
}

.card--selector {
  background: rgba(10, 12, 18, 0.7);
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  border: none;
}

.card--transparent {
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 0;
  border-radius: 0;
  outline: 1px solid rgba(255, 255, 255, 0.08);
  outline-offset: 12px;
}

.card--transparent .card__track,
.card--transparent .card__artist {
  text-shadow: none;
}

.card--transparent {
  box-shadow: none !important;
  filter: none !important;
}

.crate-picker__card {
  background: rgba(10, 12, 18, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}

.crate-picker__card.active {
  border-color: rgba(122, 247, 195, 0.6);
  box-shadow: 0 0 0 1px rgba(122, 247, 195, 0.35),
    0 12px 30px rgba(15, 255, 199, 0.15);
}

.cover {
  width: 120px;
  height: 120px;
  border-radius: 14px;
  overflow: hidden;
  contain: paint;
  background: linear-gradient(135deg, rgba(122, 247, 195, 0.12), rgba(86, 227, 255, 0.12));
  border: 1px solid rgba(255, 255, 255, 0.08);
  align-self: flex-start;
}

.cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #070b14;
  image-rendering: auto;
}

.collection__card .cover img {
  object-fit: contain;
  background: transparent;
}

.cover--large {
  width: 160px;
  height: 160px;
}

.cover--missing {
  position: relative;
}

.cover--hidden {
  display: none;
}

.cover--missing::after {
  content: "SoundCollect\A NO COVER";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
  color: rgba(14, 18, 28, 0.75);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  white-space: pre-line;
  background: radial-gradient(circle at 35% 35%, rgba(122, 247, 195, 0.6), rgba(86, 227, 255, 0.35));
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.4);
}

.cover--missing img {
  display: none;
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.15), transparent 55%);
  opacity: 0.5;
  pointer-events: none;
}

.card__rarity {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.card__track {
  font-size: 22px;
  font-weight: 700;
}

.card__artist {
  color: var(--muted);
  font-size: 15px;
}

/* Ticker */
.ticker {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.ticker__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--muted);
}

.ticker__rail {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.ticker__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ticker__card {
  min-width: 0;
}

.ticker__card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(8, 10, 16, 0.6);
  border-radius: 14px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  min-width: 240px;
}

.ticker__cover {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  background: transparent;
  flex-shrink: 0;
}

.ticker__cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.ticker__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ticker__rarity {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.ticker__title {
  font-size: 13px;
  font-weight: 600;
}

.ticker__subtitle {
  font-size: 12px;
  color: var(--muted);
}

.genre-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.42), rgba(34, 197, 94, 0.36));
}

.genre-badge--ticker {
  margin-top: 4px;
  font-size: 9px;
}

/* Animations */
.vinyl.opening {
  animation: crate-shake 0.5s ease-in-out;
}

.glow.active {
  opacity: 1;
  transform: translateY(0);
}

.card.reveal {
  animation: card-pop 0.6s ease;
}

@keyframes crate-shake {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-6px) rotate(-1deg);
  }
  40% {
    transform: translateX(6px) rotate(1deg);
  }
  60% {
    transform: translateX(-4px) rotate(-1deg);
  }
  80% {
    transform: translateX(4px) rotate(1deg);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes card-pop {
  0% {
    transform: translateY(10px) scale(0.97);
    opacity: 0.6;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Rarity colors */
.card.common {
  border-color: rgba(255, 255, 255, 0.08);
}

.card.rare {
  border-color: rgba(113, 196, 255, 0.5);
  box-shadow: 0 0 24px rgba(113, 196, 255, 0.25);
}

.card.epic {
  border-color: rgba(255, 127, 212, 0.5);
  box-shadow: 0 0 24px rgba(255, 127, 212, 0.25);
}

.card.legendary {
  border-color: rgba(255, 179, 107, 0.55);
  box-shadow: 0 0 28px rgba(255, 179, 107, 0.35);
}

/* Fullscreen reveal */
.reveal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  pointer-events: none;
}

.reveal.active {
  display: flex;
  pointer-events: auto;
}

.reveal__backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(14, 22, 36, 0.9), rgba(6, 8, 12, 0.98));
  opacity: 0;
  transition: opacity 0.4s ease;
}

.reveal.active .reveal__backdrop {
  opacity: 1;
}

.reveal__stage {
  position: fixed;
  inset: 0;
  display: block;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  opacity: 0;
  transform: none !important;
  transition: opacity 0.4s ease;
  width: 100%;
  height: 100%;
}

.reveal.active .reveal__stage {
  opacity: 1;
  transform: none !important;
}

.reveal__effects {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.beam {
  position: absolute;
  width: 180px;
  height: 320px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
  filter: blur(6px);
  opacity: 0;
}

.beam--left {
  left: 10%;
  top: -10%;
  transform: rotate(-12deg);
}

.beam--right {
  right: 8%;
  top: -6%;
  transform: rotate(10deg);
}

.spark {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
  opacity: 0;
}

.spark--one {
  left: 40%;
  bottom: 20%;
}

.spark--two {
  left: 55%;
  bottom: 26%;
}

.spark--three {
  left: 65%;
  bottom: 18%;
}

.reveal__crate {
  width: 320px;
  height: 320px;
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: grid;
  place-items: center;
  margin: 0;
}

.reveal__crate .vinyl {
  animation-duration: 2.6s;
}

.reveal__burst {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
}

.burst {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 2px solid rgba(122, 247, 195, 0.7);
  box-shadow: 0 0 40px rgba(122, 247, 195, 0.4);
  transform: scale(0.2);
  opacity: 0;
}

.burst--two {
  width: 240px;
  height: 240px;
  border-color: rgba(86, 227, 255, 0.6);
}

.shard {
  position: absolute;
  width: 16px;
  height: 34px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
  border-radius: 10px;
  opacity: 0;
}

.shard--1 { top: 18%; left: 45%; }
.shard--2 { top: 28%; left: 62%; transform: rotate(20deg); }
.shard--3 { top: 50%; left: 70%; transform: rotate(45deg); }
.shard--4 { top: 60%; left: 30%; transform: rotate(-25deg); }
.shard--5 { top: 36%; left: 20%; transform: rotate(-40deg); }
.shard--6 { top: 58%; left: 52%; transform: rotate(10deg); }

.reveal__info {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) scale(0.98) !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
  align-items: center;
  text-align: center;
  max-width: 280px;
  background: rgba(12, 16, 24, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
  z-index: 2;
}

.reveal__rarity {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.reveal__track {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.12;
  max-width: 100%;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.reveal__artist {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.2;
  max-width: 100%;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.genre-badge--reveal {
  margin-top: -2px;
  font-size: 11px;
}

.genre-badge--preview {
  margin-top: 2px;
  font-size: 10px;
}

.source-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  text-decoration: none;
  margin-top: 6px;
}

.source-badge {
  align-self: flex-start;
}

.source-badge--card {
  margin-top: auto;
  align-self: flex-start;
}

.source-badge__logo {
  height: 32px;
  width: auto;
  object-fit: contain;
}

.reveal__close {
  flex: 1;
}

.reveal__sell {
  flex: 1;
}

.reveal__actions {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
  justify-content: center;
}

.reveal__respin {
  position: fixed;
  left: 50%;
  top: calc(50% + 324px);
  transform: translateX(-50%);
  z-index: 3;
  width: min(280px, 80vw);
}

.reveal__respin:hover {
  transform: translateX(-50%);
}

.reveal__preview {
  width: 100%;
  margin-top: 6px;
}

.reveal__autospin {
  width: 100%;
  margin-top: 6px;
  display: none;
}

.reveal__shiny-autospin-stop {
  width: 100%;
  margin-top: 6px;
  display: none;
}

.card-preview {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 520 !important;
}

.card-preview.active {
  display: flex;
  z-index: 520 !important;
}

#collectionGrid {
  grid-auto-rows: 1fr;
}

#collectionGrid .collection__card {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

#collectionGrid .collection__meta {
  min-height: 0;
}

#collectionGrid .collection__title {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis;
  word-break: normal !important;
}

#collectionGrid .collection__subtitle {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis;
  word-break: normal !important;
}

#collectionGrid .source-badge--card {
  margin-top: auto;
}

.card-preview__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 12, 0.75);
  backdrop-filter: blur(8px);
}

.card-preview__panel {
  position: relative;
  z-index: 2;
  padding: 20px;
}

.card-preview__card {
  width: min(340px, 88vw);
  max-width: 360px;
  padding: 22px;
  gap: 10px;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.card-preview__apple {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.card-preview__close {
  margin-top: 10px;
}

.card-preview__audio {
  margin-top: 12px;
  display: flex;
  justify-content: center;
}

.preview-controls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.preview-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.96);
  background: #ffffff;
  color: #0b1220;
  font-size: 14px;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.preview-btn--play {
  width: 42px;
  height: 42px;
  font-size: 14px;
  background: #ffffff;
  border-color: rgba(255, 255, 255, 0.96);
  color: #0b1220;
}

.reveal__preview {
  width: 100%;
  margin-top: 6px;
  justify-content: center;
}

.side-actions__btn.has-notification {
  border-color: rgba(102, 242, 182, 0.9);
  box-shadow: 0 0 0 2px rgba(102, 242, 182, 0.28);
}

.market__tab.has-notification {
  border-color: rgba(102, 242, 182, 0.85);
  box-shadow: 0 0 0 1px rgba(102, 242, 182, 0.32);
}

.reveal.opening .reveal__crate {
  animation: reveal-shake 0.6s ease-in-out;
}

.vinyl.spinning,
.reveal.spinning .vinyl {
  animation-duration: 0.35s;
}

.reveal.spinning .vinyl {
  animation-duration: 0.25s;
}

.reveal.opened .beam {
  animation: beam-flash 0.9s ease forwards;
}

.reveal.opened .spark {
  animation: spark-burst 0.9s ease forwards;
}

.reveal.opened .reveal__stage {
  animation: none;
}

.reveal.opened .reveal__info {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

.reveal.exploding .vinyl {
  animation-duration: 0.18s;
}

.reveal.exploding .reveal__burst {
  opacity: 1;
}

.reveal.exploding .burst {
  animation: burst-ring 0.6s ease forwards;
}

.reveal.exploding .burst--two {
  animation-delay: 0.08s;
}

.reveal.exploding .shard {
  animation: shard-fly 0.55s ease forwards;
}

.reveal.exploding .shard--2 { animation-delay: 0.05s; }
.reveal.exploding .shard--3 { animation-delay: 0.08s; }
.reveal.exploding .shard--4 { animation-delay: 0.03s; }
.reveal.exploding .shard--5 { animation-delay: 0.07s; }
.reveal.exploding .shard--6 { animation-delay: 0.1s; }

.reveal.exploded .vinyl {
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.25s ease;
}

.reveal.common .reveal__stage {
  box-shadow: 0 30px 80px rgba(233, 237, 244, 0.1);
}

.reveal.rare .reveal__stage {
  box-shadow: 0 30px 80px rgba(113, 196, 255, 0.35);
}

.reveal.epic .reveal__stage {
  box-shadow: 0 30px 80px rgba(255, 127, 212, 0.4);
}

.reveal.legendary .reveal__stage {
  box-shadow: 0 30px 80px rgba(255, 179, 107, 0.45);
}

@keyframes reveal-shake {
  0% {
    transform: translate(-50%, -50%) translateX(0);
  }
  20% {
    transform: translate(-50%, -50%) translateX(-10px) rotate(-1deg);
  }
  40% {
    transform: translate(-50%, -50%) translateX(10px) rotate(1deg);
  }
  60% {
    transform: translate(-50%, -50%) translateX(-6px) rotate(-1deg);
  }
  80% {
    transform: translate(-50%, -50%) translateX(6px) rotate(1deg);
  }
  100% {
    transform: translate(-50%, -50%) translateX(0);
  }
}

@keyframes beam-flash {
  0% {
    opacity: 0;
    transform: translateY(20px) scaleY(0.6);
  }
  40% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translateY(-40px) scaleY(1.1);
  }
}

@keyframes spark-burst {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.6);
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-60px) scale(1.1);
  }
}

@keyframes reveal-pulse {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes burst-ring {
  0% {
    transform: scale(0.2);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

@keyframes shard-fly {
  0% {
    transform: translate(0, 0) scale(0.6);
    opacity: 0.9;
  }
  100% {
    transform: translate(0, -60px) scale(1);
    opacity: 0;
  }
}
@keyframes vinyl-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes bar-pulse {
  0%,
  100% {
    transform: scaleY(0.75);
    opacity: 0.7;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

@keyframes shiny-hit-pulse {
  0% {
    opacity: 0.25;
    transform: translateY(16px) scale(0.94);
  }
  30% {
    opacity: 1;
    transform: translateY(0) scale(1.32);
  }
  100% {
    opacity: 0.75;
    transform: translateY(0) scale(1.12);
  }
}

@keyframes shiny-hit-flash {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  20% {
    opacity: 1;
    transform: scale(1.04);
  }
  100% {
    opacity: 0;
    transform: scale(1.12);
  }
}


@media (max-width: 900px) {
  .reveal__stage {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .reveal__info {
    align-items: center;
  }
}

@media (max-width: 820px) {
  .top {
    flex-direction: column;
    align-items: center;
  }

  .stats {
    width: 100%;
  }

  .stat {
    flex: 1;
  }

  .top__center {
    position: static;
    transform: none;
    width: 100%;
    justify-content: center;
  }
}

.side-actions {
  position: fixed;
  left: 50%;
  bottom: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  z-index: 20;
  transform: translateX(-50%);
  -webkit-overflow-scrolling: touch;
}

.side-actions__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.crate-list {
  position: fixed;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 20;
}

#crateList {
  width: 100%;
}

.crate-carousel {
  width: 100%;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 8px;
}

.crate-carousel-stack {
  width: 100%;
  display: grid;
  gap: 10px;
}

.crate-artist-section {
  width: 100%;
  display: grid;
  gap: 8px;
}

.crate-artist-section__label {
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 2px;
}

.crate-artist-section__controls {
  display: grid;
  gap: 6px;
}

.crate-artist-section__input {
  width: 100%;
  background: rgba(8, 10, 16, 0.78);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
}

.crate-artist-section__status {
  font-size: 11px;
  color: var(--muted);
}

.crate-artist-section__status.is-found {
  color: #7af7c3;
}

.crate-artist-section__status.is-missing {
  color: #ff9aa5;
}

.crate-carousel__featured {
  width: 100%;
}

.crate-carousel__arrow {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(10, 12, 18, 0.75);
  color: var(--text);
  cursor: pointer;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 21px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.crate-carousel__arrow:hover {
  border-color: rgba(122, 247, 195, 0.5);
  box-shadow: 0 0 0 1px rgba(122, 247, 195, 0.2);
}

.crate-carousel__arrow:active {
  transform: scale(0.96);
}

.crate-carousel__arrow--ghost {
  visibility: hidden;
  pointer-events: none;
}

.crate-carousel__card {
  width: 100%;
  min-width: 0;
}

.profile__favorite-genre {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.profile__favorite-picker {
  position: relative;
}

.profile-genre-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  max-height: 240px;
  overflow-y: auto;
  padding: 8px;
  border-radius: 12px;
  background: rgba(6, 10, 22, 0.98);
  border: 1px solid rgba(122, 247, 195, 0.35);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(122, 247, 195, 0.12);
  z-index: 40;
  display: none;
}

.profile-genre-dropdown.active {
  display: grid;
  gap: 6px;
}

.profile-genre-dropdown__item {
  width: 100%;
  text-align: left;
  background: rgba(10, 14, 30, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  letter-spacing: 0.03em;
  cursor: pointer;
}

.profile-genre-dropdown__item:hover {
  border-color: rgba(122, 247, 195, 0.55);
  background: rgba(18, 28, 50, 0.95);
}

.profile-genre-dropdown__item.active {
  border-color: rgba(122, 247, 195, 0.75);
  color: rgb(188, 255, 230);
  box-shadow: 0 0 0 1px rgba(122, 247, 195, 0.2) inset;
}

.profile__favorite-public {
  margin-top: -4px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
}

.crate-list__btn {
  background: rgba(10, 12, 18, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  position: relative;
}

.crate-list__btn.active {
  border-color: rgba(122, 247, 195, 0.6);
  box-shadow: 0 0 0 1px rgba(122, 247, 195, 0.35);
}

.crate-list__btn::after {
  content: attr(data-info);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(10, 12, 18, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 8px 10px;
  white-space: nowrap;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.crate-list__btn:hover::after {
  opacity: 1;
}

.side-actions__btn {
  background: rgba(10, 12, 18, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
  height: 44px;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  white-space: nowrap;
}

#guessSongBtn {
  display: none;
}

.side-actions .promo__panel {
  position: fixed;
  left: 50%;
  bottom: calc(80px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  top: auto;
  margin-top: 0;
  width: min(320px, calc(100vw - 20px));
  z-index: 120;
}

@media (max-width: 560px) {
  .brand h1 {
    font-size: 22px;
  }

  .btn {
    font-size: 10px;
  }

  .arena {
    grid-template-columns: 1fr;
  }

  .ticker__list {
    animation-duration: 22s;
  }
}

@media (max-width: 900px) {
  :is(
      .auth,
      .collection,
      .tracks,
      .market,
      .trade,
      .offer,
      .purchase,
      .sell,
      .odds,
      .xpmodal,
      .daily,
      .quests,
      .shiny,
      .profile,
      .profile-picker,
      .card-preview,
      .admin-message
    ) {
    z-index: 320;
  }

  .purchase,
  .purchase.active {
    z-index: 420 !important;
  }

  .sell,
  .sell.active,
  .sell.sell--top {
    z-index: 430 !important;
  }

  :is(
      .auth.active,
      .collection.active,
      .tracks.active,
      .market.active,
      .trade.active,
      .offer.active,
      .purchase.active,
      .sell.active,
      .odds.active,
      .xpmodal.active,
      .daily.active,
      .quests.active,
      .shiny.active,
      .profile.active,
      .profile-picker.active,
      .card-preview.active,
      .admin-message.active
    )
    ~ .side-actions,
  :is(
      .auth.active,
      .collection.active,
      .tracks.active,
      .market.active,
      .trade.active,
      .offer.active,
      .purchase.active,
      .sell.active,
      .odds.active,
      .xpmodal.active,
      .daily.active,
      .quests.active,
      .shiny.active,
      .profile.active,
      .profile-picker.active,
      .card-preview.active,
      .admin-message.active
    )
    ~ .crate-list {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body:has(
      :is(
          .auth.active,
          .collection.active,
          .tracks.active,
          .market.active,
          .trade.active,
          .offer.active,
          .purchase.active,
          .sell.active,
          .odds.active,
          .xpmodal.active,
          .daily.active,
          .quests.active,
          .shiny.active,
          .profile.active,
          .profile-picker.active,
          .card-preview.active,
          .admin-message.active
        )
    )
    .side-actions,
  body:has(
      :is(
          .auth.active,
          .collection.active,
          .tracks.active,
          .market.active,
          .trade.active,
          .offer.active,
          .purchase.active,
          .sell.active,
          .odds.active,
          .xpmodal.active,
          .daily.active,
          .quests.active,
          .shiny.active,
          .profile.active,
          .profile-picker.active,
          .card-preview.active,
          .admin-message.active
        )
    )
    .crate-list {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body:has(
      :is(
          .auth.active,
          .collection.active,
          .tracks.active,
          .market.active,
          .trade.active,
          .offer.active,
          .purchase.active,
          .sell.active,
          .odds.active,
          .xpmodal.active,
          .daily.active,
          .quests.active,
          .shiny.active,
          .profile.active,
          .profile-picker.active,
          .card-preview.active,
          .admin-message.active
        )
    )
    .crate-auto__panel {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body {
    overflow-x: hidden;
  }

  .market__panel {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .market__header {
    position: static;
    flex: 0 0 auto;
    z-index: 4;
    background: rgba(7, 12, 22, 0.96);
    padding-bottom: 8px;
  }

  .market__panels {
    flex: 0 0 auto;
    min-height: auto;
    max-height: none;
    overflow: visible;
  }

  .market__panel-body.active {
    display: block;
    height: auto;
    min-height: auto;
    max-height: none;
    overflow: visible;
  }

  #marketPanelAllListings .all-listings__filters {
    position: static;
    z-index: 3;
    background: rgba(7, 12, 22, 0.96);
    padding-bottom: 8px;
  }

  #marketPanelAllListings .all-listings__list {
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  .page {
    justify-content: flex-start;
    padding: 108px 12px 320px;
    gap: 20px;
  }

  .top {
    left: 12px;
    right: 12px;
    top: 10px;
    gap: 10px;
  }

  .top__center {
    gap: 10px;
    width: min(96vw, 520px);
    flex-wrap: wrap;
    justify-content: center;
  }

  .xpbar {
    min-width: 0;
    flex: 1;
  }

  .xpbar__track {
    width: auto;
    flex: 1;
    min-width: 100px;
  }

  .wallet__label {
    display: none;
  }

  .wallet__value {
    font-size: 18px;
  }

  .notify-bar {
    top: 56px;
    max-width: min(96vw, 420px);
  }

  .side-actions {
    bottom: calc(8px + env(safe-area-inset-bottom));
    width: calc(100vw - 20px);
    max-width: 680px;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding: 2px 4px;
  }

  .side-actions__btn {
    font-size: 11px;
    padding: 8px 10px;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .crate-list {
    left: 50%;
    top: auto;
    bottom: calc(64px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    flex-direction: row;
    gap: 8px;
    width: calc(100vw - 20px);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 4px;
  }

  .crate-carousel {
    width: min(360px, calc(100vw - 36px));
    margin: 0 auto;
  }

  .crate-list__btn {
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .crate-list .crate-picker__card {
    min-width: 120px;
    padding: 10px;
    border-radius: 12px;
    gap: 6px;
    flex: 0 0 auto;
  }

  .crate-list .crate-picker__cover {
    height: 72px;
    border-radius: 10px;
  }

  .crate-list .crate-picker__disc {
    width: 44px;
    height: 44px;
  }

  .crate-list .collection__title {
    font-size: 14px;
  }

  .crate-list .collection__subtitle {
    font-size: 11px;
  }

  .crate-list__btn::after {
    display: none;
  }

  .ticker__rail {
    padding: 10px;
  }

  .ticker {
    margin-bottom: 180px;
  }

  .ticker__list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }

  .ticker__card {
    min-width: 220px;
    max-width: 220px;
    padding: 8px;
    gap: 8px;
    flex: 0 0 auto;
  }

  .ticker__cover {
    width: 42px;
    height: 42px;
  }

  .ticker__title,
  .ticker__subtitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
  }

  .tracks__panel,
  .collection__panel,
  .all-listings__panel {
    width: 96vw;
    max-height: 88vh;
    padding: 14px;
    border-radius: 14px;
  }

  .tracks__controls {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .collection__controls {
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
  }

  .collection__controls input,
  .collection__controls select {
    width: 100%;
    min-width: 0;
  }

  .collection__controls-auto {
    width: 100%;
    margin-left: 0;
  }

  .collection__controls-auto .auto-toggle {
    width: 100%;
    justify-content: space-between;
  }

  .all-listings__filters {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .profile-picker__filters {
    grid-template-columns: 1fr;
  }

  .market__trade-filters {
    grid-template-columns: 1fr;
  }

  .market__panel {
    width: 100vw;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    padding: calc(12px + env(safe-area-inset-top)) 12px 12px;
  }

  .market__panel-body,
  .market__offers,
  .all-listings__list,
  .tracks__grid,
  .collection__panel {
    overscroll-behavior: contain;
  }

  .market__header {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .market__tabs {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .market__tab {
    white-space: nowrap;
  }

  .market__balance {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }

  .market__fuse-grid {
    grid-template-columns: 1fr;
  }

  .trade__panel {
    width: min(94vw, 500px);
    max-height: 88vh;
    overflow: auto;
  }

  .trade__body {
    flex-direction: column;
  }

  .reveal__info {
    width: min(90vw, 320px);
  }

  .reveal__respin {
    top: calc(50% + 300px);
    width: min(320px, 90vw);
  }

  .settings-fab {
    top: 10px;
    right: 12px;
  }

  .settings-rail {
    top: 66px;
    right: 12px;
    max-width: calc(100vw - 24px);
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

@media (max-width: 600px) {
  .brand__mark {
    padding: 8px 10px;
    font-size: 14px;
  }

  .brand h1 {
    font-size: 24px;
  }

  .top {
    gap: 8px;
  }

  .top__center {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
  }

  .xpbar {
    width: 100%;
  }

  .wallet {
    justify-content: flex-end;
    white-space: nowrap;
  }

  .wallet__value {
    font-size: 14px;
  }

  .arena {
    gap: 22px;
  }

  .vinyl {
    width: 180px;
    height: 180px;
  }

  .open-row {
    width: 100%;
  }

  #openBtn {
    width: min(92vw, 360px);
  }

  .reveal__info {
    width: min(92vw, 340px);
  }

  .reveal__respin {
    top: calc(50% + 286px);
  }

  .side-actions {
    width: calc(100vw - 14px);
  }

  .crate-list {
    width: calc(100vw - 14px);
  }

  .crate-list .crate-picker__card {
    min-width: 108px;
  }

  .ticker__card {
    min-width: 200px;
    max-width: 200px;
  }

  .ticker__title,
  .ticker__subtitle {
    max-width: 132px;
  }

  .settings-rail {
    left: 12px;
    right: 12px;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .page {
    padding: 128px 8px 336px;
  }

  .top {
    left: 8px;
    right: 8px;
  }

  .side-actions,
  .crate-list {
    width: calc(100vw - 10px);
  }

  .side-actions__btn {
    font-size: 10px;
    padding: 7px 8px;
  }

  .crate-list .crate-picker__card {
    min-width: 100px;
    padding: 8px;
  }

  .crate-list .crate-picker__cover {
    height: 64px;
  }

  .ticker__card {
    min-width: 186px;
    max-width: 186px;
  }

  .ticker__title,
  .ticker__subtitle {
    max-width: 118px;
  }
}

@media (max-width: 700px) {
  .all-listings__list {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .all-listings__list .collection__card {
    min-height: 0;
    height: auto;
    padding: 14px;
    gap: 10px;
    overflow: hidden;
    position: relative;
    isolation: isolate;
  }

  .all-listings__list .collection__card .cover {
    height: 190px;
  }

  .all-listings__list .market__footer {
    margin-top: 8px;
    display: grid;
    grid-template-rows: 52px 46px 56px;
    gap: 8px;
  }

  .all-listings__list .collection__card.shiny-card::before,
  .all-listings__list .collection__card.shiny-card::after {
    inset: -1px;
    border-radius: inherit;
  }

  .all-listings__list .collection__meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .all-listings__list .collection__title,
  .all-listings__list .collection__subtitle {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
    -webkit-box-orient: initial;
    line-height: 1.35;
  }

  .all-listings__list .market__row,
  .all-listings__list .market__line--btn {
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .all-listings__list .market__row--link {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-inline: 8px;
  }

  .all-listings__list .market__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .all-listings__list .market__actions .btn {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .all-listings__list .market__actions .btn:only-child {
    grid-column: 1 / -1;
  }

  #recentSection {
    display: none;
  }

  .page {
    padding-top: 132px;
  }

  .collection__panel {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    padding: calc(12px + env(safe-area-inset-top)) 12px 12px;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 0;
    background: rgba(7, 12, 22, 0.95);
    border: none;
    box-shadow: none;
  }

  .collection__backdrop {
    background: rgba(6, 10, 18, 0.62);
    backdrop-filter: blur(10px);
  }

  .collection__header {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
  }

  .collection__header-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .collection__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    overflow-x: hidden;
    overflow-y: visible;
    padding: 4px 0 10px;
    align-items: stretch;
  }

  .collection__card {
    padding: 12px;
    min-width: 0;
    overflow: hidden;
    position: relative;
    isolation: isolate;
  }

  .collection__card .cover {
    height: auto;
    aspect-ratio: 1 / 1;
    width: 100%;
  }

  .collection__grid .collection__card.shiny-card::before,
  .collection__grid .collection__card.shiny-card::after {
    inset: -1px;
    border-radius: inherit;
  }

  .collection__title {
    font-size: 13px;
    line-height: 1.25;
    display: block;
    overflow: visible;
    word-break: break-word;
  }

  .collection__subtitle {
    font-size: 11px;
    line-height: 1.25;
    display: block;
    overflow: visible;
    word-break: break-word;
  }

  .collection__card--empty {
    display: none;
  }

  .collection.active ~ .side-actions,
  .collection.active ~ .crate-list {
    z-index: 40 !important;
    pointer-events: none !important;
  }

  .toggle-pill {
    width: 100%;
    justify-content: flex-start;
  }

  .daily__panel {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border: none;
    padding: calc(12px + env(safe-area-inset-top)) 12px calc(18px + env(safe-area-inset-bottom));
    background: rgba(7, 12, 22, 0.96);
    overflow: hidden;
    gap: 12px;
  }

  .daily__body {
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 2px;
  }

  .daily__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(108px, auto);
    gap: 10px;
    overflow: visible;
    padding-bottom: 2px;
  }

  .daily__day {
    height: auto;
    min-height: 108px;
    font-size: 12px;
    padding: 10px 8px;
  }

  .daily__day:nth-child(7) {
    grid-column: 1 / -1;
    width: 100%;
    max-width: calc(50% - 5px);
    justify-self: center;
  }

  .daily__actions {
    margin-top: auto;
  }

  .quests__panel {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    padding: calc(14px + env(safe-area-inset-top)) 12px calc(120px + env(safe-area-inset-bottom));
    border-radius: 0;
    border: none;
    background: #121212;
    overflow-y: auto;
    gap: 14px;
  }

  .quests__header h3 {
    font-size: 24px;
    margin: 0;
  }

  .quests__msg {
    font-size: 13px;
    line-height: 1.35;
  }

  .quests__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .quest__card {
    padding: 12px;
    border-radius: 12px;
    min-height: 190px;
  }

  .quest__title {
    font-size: 19px;
    line-height: 1.15;
  }

  .quest__progress,
  .quest__reward {
    font-size: 14px;
    line-height: 1.25;
  }

  .quest__card .btn {
    margin-top: auto;
    width: 100%;
  }

  .profile__panel,
  .profile-picker__panel {
    width: 96vw;
    max-height: 90vh;
    padding: 14px;
    overflow-x: hidden;
  }

  .profile__panel--public {
    width: 96vw;
    padding: 0 8px 12px;
  }

  .profile__body {
    padding: 14px;
    margin-bottom: 8px;
  }

  .profile__title {
    position: static;
    font-size: 18px;
    margin-bottom: 6px;
  }

  .profile__stats-row {
    gap: 8px;
  }

  .profile__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .profile__collection-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .profile__slot,
  .profile__collection-grid .collection__card {
    max-width: 100%;
  }

  .crate-picker__odds,
  .crate-list .crate-picker__odds {
    width: 24px;
    height: 24px;
    font-size: 12px;
    top: 6px;
    right: 6px;
    padding: 0;
  }

  .settings-fab {
    width: 26px;
    height: 26px;
    right: 14px;
    top: 12px;
    border-radius: 50%;
    border-width: 1px;
    box-shadow: none;
  }

  .settings-fab svg {
    width: 14px;
    height: 14px;
  }

  .settings-rail {
    top: 44px;
    right: 12px;
    left: auto;
    max-width: min(300px, 94vw);
    padding: 8px;
    gap: 8px;
  }
}

/* Device-class polish pass */
@media (max-width: 390px) and (max-height: 860px) {
  .page {
    padding: 96px 6px 246px;
  }

  .top {
    top: 8px;
    left: 6px;
    right: 6px;
  }

  .brand {
    gap: 10px;
  }

  .brand h1 {
    font-size: 21px;
  }

  .side-actions {
    bottom: calc(6px + env(safe-area-inset-bottom));
    width: calc(100vw - 8px);
    gap: 6px;
  }

  .side-actions__btn {
    font-size: 10px;
    padding: 6px 7px;
    border-radius: 10px;
  }

  .crate-list {
    bottom: calc(50px + env(safe-area-inset-bottom));
    width: calc(100vw - 8px);
    gap: 6px;
  }

  .crate-list .crate-picker__card {
    min-width: 94px;
    padding: 7px;
  }

  .crate-list .crate-picker__cover {
    height: 60px;
  }

  .ticker__card {
    min-width: 176px;
    max-width: 176px;
  }
}

@media (min-width: 391px) and (max-width: 430px) and (max-height: 940px) {
  .page {
    padding: 102px 8px 248px;
  }

  .top {
    left: 8px;
    right: 8px;
  }

  .brand h1 {
    font-size: 22px;
  }

  .side-actions {
    width: calc(100vw - 12px);
    gap: 7px;
  }

  .side-actions__btn {
    font-size: 10px;
    padding: 7px 8px;
  }

  .crate-list {
    width: calc(100vw - 12px);
    bottom: calc(54px + env(safe-area-inset-bottom));
  }

  .crate-list .crate-picker__card {
    min-width: 100px;
  }
}

@media (min-width: 700px) and (max-width: 1024px) and (min-height: 900px) {
  .page {
    padding: 110px 14px 170px;
  }

  .top {
    left: 14px;
    right: 14px;
  }

  .top__center {
    width: min(94vw, 640px);
  }

  .side-actions {
    width: auto;
    max-width: min(94vw, 900px);
    justify-content: center;
    overflow: visible;
  }

  .side-actions__btn {
    font-size: 11px;
    padding: 8px 12px;
  }

  .crate-list {
    left: 14px;
    top: 52%;
    bottom: auto;
    width: auto;
    transform: translateY(-50%);
    flex-direction: column;
    overflow: visible;
    padding: 0;
  }

  .crate-list .crate-picker__card {
    min-width: 132px;
    width: 132px;
  }

  .crate-list .crate-picker__cover {
    height: 80px;
  }

  .ticker__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
  }

  .ticker__card {
    min-width: 0;
    max-width: none;
  }
}

@media (min-width: 1200px) and (max-width: 1440px) and (max-height: 820px) {
  .page {
    max-width: 1260px;
    padding: 84px 20px 120px;
    gap: 18px;
  }

  .top {
    top: 10px;
    left: 20px;
    right: 20px;
  }

  .brand h1 {
    font-size: 28px;
  }

  .side-actions {
    bottom: 10px;
  }

  .side-actions__btn {
    padding: 8px 12px;
    font-size: 11px;
  }

  .crate-list {
    left: 12px;
  }

  .crate-list .crate-picker__card {
    min-width: 118px;
  }

  .crate-list .crate-picker__cover {
    height: 70px;
  }
}

/* Odds modal */
.odds {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 70;
}

.odds.active {
  display: flex;
}

.odds__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 10, 16, 0.72);
}

.odds__panel {
  position: relative;
  width: min(420px, 90vw);
  max-height: min(82vh, 760px);
  background: rgba(10, 12, 18, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 18px;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.odds__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.odds__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding-right: 4px;
}

.odds__list li {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.odds__note-row {
  font-size: 12px !important;
  color: rgba(228, 236, 255, 0.75);
}

.odds__loading-row {
  font-size: 12px !important;
  color: rgba(228, 236, 255, 0.75);
  justify-content: flex-start !important;
}

.odds__song-row {
  font-size: 12px !important;
  gap: 8px;
}

.odds__song-title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.odds__song-artist {
  color: rgba(228, 236, 255, 0.75);
  min-width: 0;
  max-width: 45%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

/* Purchase confirm */
.purchase {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 380;
}

.purchase.active {
  display: flex;
}

.purchase__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 12, 0.7);
  backdrop-filter: blur(12px);
}

.purchase__panel {
  position: relative;
  z-index: 2;
  width: min(460px, 92vw);
  background: rgba(12, 16, 24, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
  overflow: visible;
}

.purchase__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.purchase__body {
  display: flex;
  gap: 16px;
  align-items: center;
}

.purchase__cover {
  position: absolute;
  left: -252px;
  top: 50%;
  transform: translateY(-50%);
  width: 230px;
  min-width: 230px;
  height: auto;
  border-radius: 12px;
  background: transparent;
  border: none;
  z-index: 3;
}

.purchase__cover .purchase__preview-card {
  width: 100%;
  max-width: none;
  padding: 18px;
  border-radius: 12px;
  gap: 10px;
}

.purchase__cover .purchase__preview-card .cover {
  height: 148px;
}

.purchase__cover .purchase__preview-card .reveal__track {
  font-size: 20px;
}

.purchase__cover .purchase__preview-card .reveal__artist {
  font-size: 14px;
}

.purchase__cover .cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.purchase__meta p {
  margin: 0;
}

.purchase__cost {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 640px) {
  .purchase__body {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .purchase__cover {
    position: static;
    transform: none;
    margin: 0 auto;
    width: min(78vw, 260px);
    min-width: 0;
    height: auto;
  }
}

/* Final mobile nav pass: no horizontal scrolling on main menu controls */
@media (max-width: 900px) {
  .side-actions {
    left: 50%;
    transform: translateX(-50%);
    width: min(calc(100vw - 14px), 760px) !important;
    max-width: min(calc(100vw - 14px), 760px) !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    gap: 8px !important;
    padding: 0 !important;
  }

  .side-actions__btn {
    flex: 1 1 calc(33.333% - 8px) !important;
    min-width: 104px !important;
    min-height: 40px !important;
    height: 40px !important;
    max-width: 180px !important;
    text-align: center;
    white-space: nowrap;
  }

  .crate-list {
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: auto !important;
    bottom: calc(116px + env(safe-area-inset-bottom)) !important;
    width: min(calc(100vw - 14px), 760px) !important;
    max-width: min(calc(100vw - 14px), 760px) !important;
    justify-content: center !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    gap: 8px !important;
    padding: 0 !important;
  }

  .crate-carousel {
    width: min(420px, calc(100vw - 24px));
    margin: 0 auto;
  }

  .crate-carousel__arrow {
    width: 44px;
    height: 44px;
    font-size: 24px;
  }

  .crate-list__btn {
    flex: 1 1 calc(33.333% - 8px) !important;
    min-width: 98px !important;
    max-width: 180px !important;
    text-align: center;
    white-space: normal !important;
  }
}

@media (max-width: 600px) {
  .side-actions {
    width: calc(100vw - 10px) !important;
    max-width: calc(100vw - 10px) !important;
    gap: 6px !important;
  }

  .side-actions__btn {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: 38px !important;
    max-width: none !important;
    font-size: 10px !important;
    padding: 7px 8px !important;
  }

  .crate-list {
    width: calc(100vw - 10px) !important;
    max-width: calc(100vw - 10px) !important;
    bottom: calc(128px + env(safe-area-inset-bottom)) !important;
    gap: 6px !important;
  }

  .crate-list__btn {
    flex: 1 1 calc(33.333% - 6px) !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: 10px !important;
    padding: 7px 8px !important;
  }
}

.purchase__actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.xpmodal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 76;
}

.xpmodal.active {
  display: flex;
}

.xpmodal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 12, 0.7);
  backdrop-filter: blur(12px);
}

.xpmodal__panel {
  position: relative;
  z-index: 2;
  width: min(360px, 90vw);
  background: rgba(12, 16, 24, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 18px;
}

.xpmodal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.xpmodal__body p {
  margin: 6px 0;
  color: var(--text);
}

.daily {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 77;
}

.daily.active {
  display: flex;
}

.quests {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 77;
}

.daily__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 12, 0.7);
  backdrop-filter: blur(12px);
}

.daily__panel {
  position: relative;
  z-index: 2;
  width: min(820px, 95vw);
  background: rgba(12, 16, 24, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.daily__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.daily__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 18px;
}

.daily__day {
  height: 104px;
  border-radius: 14px;
  background: rgba(10, 12, 18, 0.6);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  color: var(--muted);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 10px;
  font-size: 14px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.daily__day.active {
  border-style: solid;
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(122, 247, 195, 0.3);
}

.daily__day.today {
  border-color: rgba(122, 247, 195, 0.6);
}

.daily__day.locked {
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
}

.daily__lock {
  font-size: 18px;
  margin-bottom: 4px;
}

.daily__reward-pill {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  white-space: normal;
  max-width: 100%;
}

.daily__shiny {
  font-size: 11px;
  color: rgba(122, 247, 195, 0.85);
}

.daily__reward {
  font-size: 14px;
  color: var(--muted);
}

.quests.active {
  display: flex;
}

.quests__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 18, 18, 0.96);
  backdrop-filter: none;
}

.quests__panel {
  position: relative;
  z-index: 2;
  width: min(720px, 92vw);
  max-height: min(86vh, 760px);
  background: #121212;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}

.quests__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.quests__msg {
  font-size: 13px;
  color: var(--muted);
}

.quests__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  overflow-y: auto;
  padding-right: 2px;
}

.quest__card {
  background: rgba(8, 10, 16, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: none;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
}

.quest__label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(233, 237, 244, 0.75);
  font-weight: 700;
  line-height: 1;
}

.quest__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.quest__title {
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.quest__progress {
  font-size: 12px;
  color: var(--text);
  line-height: 1.3;
  white-space: nowrap;
  font-weight: 700;
}

.quest__card .btn {
  margin-top: auto;
  width: 100%;
  text-transform: uppercase;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(234, 242, 255, 0.95);
  font-weight: 700;
  letter-spacing: 0.06em;
  box-shadow: none;
}

.quest__card .btn:disabled {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(233, 237, 244, 0.62);
  box-shadow: none;
}

.daily__timer {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}

.market__offer-media {
  display: flex;
  gap: 14px;
  margin: 6px 0 10px;
}

.market__offer-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.market__offer-label {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.market__offer-cover {
  width: 100%;
  height: 88px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 10, 16, 0.5);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.market__offer-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.market__offer-cover.shiny {
  box-shadow: 0 0 14px rgba(122, 247, 195, 0.4);
}

.profile,
.profile-picker,
.admin-message {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 0;
  z-index: 80;
}

.profile.active,
.profile-picker.active,
.admin-message.active {
  display: flex;
}

.profile.profile--top {
  z-index: 430 !important;
}

.profile__backdrop,
.profile-picker__backdrop,
.admin-message__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 12, 0.7);
  backdrop-filter: blur(12px);
}

.profile__panel,
.profile-picker__panel,
.admin-message__panel {
  position: relative;
  z-index: 2;
  width: min(820px, 92vw);
  background: rgba(12, 16, 24, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: clamp(16px, 10vh, 120px);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overflow-x: hidden;
}

.admin-message__panel {
  width: min(520px, 92vw);
  margin-top: 0;
}

.admin-message__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.admin-message__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: rgba(227, 234, 255, 0.85);
}

.admin-message__amounts {
  display: grid;
  gap: 6px;
  font-weight: 600;
  color: #e6f0ff;
}

.admin-message__text {
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(227, 234, 255, 0.8);
}

.profile__panel--public {
  width: min(1200px, 96vw);
  border: none;
  background: transparent;
  padding: 0 22px 22px;
  margin-top: 0;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
}

.guess-song__panel {
  width: min(760px, 94vw);
}

#guessSong .profile__backdrop {
  background: rgba(18, 18, 18, 0.96) !important;
  backdrop-filter: none !important;
}

#guessSong .profile__panel.guess-song__panel {
  background: #121212 !important;
}

.guess-song__artist {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.guess-song__modes {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.guess-song__modes .btn.active {
  border-color: rgba(122, 247, 195, 0.72);
  box-shadow: 0 0 0 1px rgba(122, 247, 195, 0.28) inset;
}

.guess-song__modes span {
  color: rgba(227, 234, 255, 0.8);
  font-size: 0.86rem;
}

.guess-song__artist input,
.guess-song__controls input {
  min-width: 0;
  background: rgba(8, 10, 16, 0.7);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 11px 12px;
  font: inherit;
}

.guess-song__status {
  margin: 0;
  min-height: 1.5em;
  color: rgba(227, 234, 255, 0.85);
}

.guess-song__status.is-success {
  color: #7af7c3;
}

.guess-song__status.is-error {
  color: #ff8f8f;
}

.guess-song__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  color: rgba(227, 234, 255, 0.88);
  font-weight: 600;
}

.guess-song__meta span:last-child {
  margin-left: auto;
}

.guess-song__controls {
  display: grid;
  grid-template-columns: auto;
  gap: 10px;
  align-items: center;
}

.guess-song__options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.guess-song__option {
  appearance: none;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 10, 16, 0.7);
  border-radius: 12px;
  padding: 8px;
  display: grid;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: none;
}

.guess-song__option:disabled {
  opacity: 0.72;
  cursor: not-allowed;
}

.guess-song__option:not(:disabled):hover {
  border-color: rgba(122, 247, 195, 0.6);
  transform: none;
  box-shadow: none;
}

.guess-song__option.is-active {
  border-color: rgba(122, 247, 195, 0.75);
  box-shadow: 0 0 0 1px rgba(122, 247, 195, 0.24) inset;
}

.guess-song__option.is-empty {
  opacity: 0.5;
}

.guess-song__option.is-correct {
  border-color: rgba(122, 247, 195, 0.92);
  box-shadow: 0 0 0 1px rgba(122, 247, 195, 0.3) inset;
}

.guess-song__option.is-wrong {
  border-color: rgba(255, 143, 143, 0.9);
  box-shadow: 0 0 0 1px rgba(255, 143, 143, 0.35) inset;
}

.guess-song__option-cover {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.guess-song__option-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.guess-song__option-name {
  font-size: 0.82rem;
  text-align: center;
  color: rgba(227, 234, 255, 0.82);
  font-weight: 500;
}

.guess-song__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.guess-song__cashout,
.guess-song__next {
  align-self: auto;
}

#guessSong.guess-song--in-run .guess-song__artist,
#guessSong.guess-song--in-run .guess-song__modes {
  display: none;
}

#guessSong .btn {
  border-radius: 8px;
  letter-spacing: 0.02em;
  font-weight: 600;
}

#guessSong #guessSongLoad,
#guessSong #guessSongPlay,
#guessSong .guess-song__cashout {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(234, 242, 255, 0.95);
  box-shadow: none;
}

#guessSong #guessSongClose,
#guessSong #guessSongModeDiamond,
#guessSong #guessSongModeFree,
#guessSong .guess-song__next {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(234, 242, 255, 0.95);
}

#guessSong .btn:disabled {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(227, 234, 255, 0.62);
  box-shadow: none;
}

@media (max-width: 720px) {
  .guess-song__artist {
    grid-template-columns: 1fr;
  }
  .guess-song__modes {
    flex-direction: column;
    align-items: stretch;
  }
  .guess-song__controls {
    grid-template-columns: 1fr;
  }
  .guess-song__options {
    grid-template-columns: 1fr;
  }
  .guess-song__meta span:last-child {
    margin-left: 0;
  }
}

.profile__body {
  margin-top: 8px;
  margin-bottom: 24px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: rgba(12, 16, 24, 0.95);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

.profile__title {
  position: absolute;
  top: 18px;
  left: 22px;
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

.profile__header,
.profile-picker__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.profile-picker__filters {
  display: grid;
  grid-template-columns: 2fr 1fr auto;
  gap: 10px;
  align-items: center;
}

.profile-picker__filters input,
.profile-picker__filters select {
  background: rgba(8, 10, 16, 0.7);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 8px 10px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.profile-picker__check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.profile__header p {
  margin-top: 6px;
  color: var(--muted);
}

.profile__username {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
}

.profile__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.profile__actions--public {
  align-self: flex-end;
}

.profile__stats-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.profile__stats-row .profile__actions {
  margin-left: auto;
}

.profile__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--text);
}

.profile__showcase-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 48px;
  height: 26px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch__slider {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  transition: all 0.2s ease;
}

.switch__slider::before {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  top: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.switch input:checked + .switch__slider {
  background: rgba(122, 247, 195, 0.25);
  border-color: rgba(122, 247, 195, 0.7);
}

.switch input:checked + .switch__slider::before {
  transform: translateX(22px);
}

.profile__grid {
  display: grid;
  grid-template-columns: repeat(4, 170px);
  gap: 16px;
  justify-content: center;
}

.profile__collection {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 55vh;
  overflow: auto;
  padding-right: 6px;
  padding-bottom: 72px;
}

.profile__section-title {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.profile__collection.is-hidden {
  display: none;
}

.is-hidden {
  display: none !important;
}

.profile__collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  justify-content: stretch;
  align-items: start;
}

.profile__collection-tools {
  display: grid;
  gap: 8px;
}

.profile__collection-controls {
  margin-bottom: 4px;
}

.profile__collection-search {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
}

.profile__collection-search input,
.profile__collection-filters select {
  background: rgba(8, 10, 16, 0.7);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 8px 10px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.profile__collection-filters {
  display: flex;
  gap: 10px;
  align-items: center;
}

.profile__collection-filters.is-hidden {
  display: none;
}

.profile-picker__filters--offer {
  grid-template-columns: 1fr auto auto;
}

.profile-picker__filters--offer.is-hidden {
  display: none;
}

.profile__collection-grid .collection__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

.profile__collection-grid .profile__offer {
  padding: 10px 14px 16px;
  margin-top: auto;
}

.profile__offer {
  padding: 10px 14px 16px;
  display: flex;
  justify-content: center;
  margin-top: auto;
}

.profile__stats {
  display: flex;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
}

.profile__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile__badge {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(122, 247, 195, 0.12);
  border: 1px solid rgba(122, 247, 195, 0.35);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profile__slot {
  border-radius: 16px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  background: rgba(10, 12, 18, 0.6);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  color: var(--muted);
  cursor: pointer;
  position: relative;
  overflow: visible;
}

.profile__slot .collection__card {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
}

.profile__slot .shiny-card::before,
.profile__slot .shiny-card::after {
  opacity: 0.85;
}

.market__listing-card.shiny-card::before,
.market__listing-card.shiny-card::after {
  inset: -4px;
  opacity: 0.85;
}

.profile__placeholder {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.profile-picker__grid {
  max-height: 60vh;
  overflow: auto;
  padding: 0 8px 8px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
}

.profile-picker__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  gap: 12px;
}

.profile-picker__count {
  color: var(--muted);
  font-size: 13px;
}

.profile-picker__actions {
  display: inline-flex;
  gap: 10px;
}

.fuse-card--selected {
  box-shadow: inset 0 0 0 2px rgba(120, 255, 220, 0.8);
}

.fuse-card__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
}

.daily__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.daily__msg {
  font-size: 12px;
  color: var(--muted);
}
.reveal__info .cover {
  width: 100%;
  height: 180px;
}

.reveal__info .cover img {
  object-fit: contain;
  background: transparent;
}

/* Pull card glow by rarity */
.reveal.common .reveal__info {
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
}

.reveal.rare .reveal__info {
  box-shadow: 0 0 0 1px rgba(113, 196, 255, 0.6),
    0 20px 50px rgba(113, 196, 255, 0.18);
}

.reveal.epic .reveal__info {
  box-shadow: 0 0 0 1px rgba(255, 127, 212, 0.6),
    0 20px 50px rgba(255, 127, 212, 0.2);
}

.reveal.legendary .reveal__info {
  box-shadow: 0 0 0 1px rgba(255, 179, 107, 0.7),
    0 22px 60px rgba(255, 179, 107, 0.24);
}

.shiny-card .reveal__track,
.shiny-card .collection__title,
.shiny-card .mobile-market-card__title,
.shiny-card .ticker__title {
  animation: rgb-shift 3s linear infinite;
}

@keyframes rgb-shift {
  0% {
    color: #ff5f6d;
  }
  33% {
    color: #64ffda;
  }
  66% {
    color: #6a5cff;
  }
  100% {
    color: #ff5f6d;
  }
}

.shiny-card {
  position: relative;
}

.shiny-card::after,
.shiny-card::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.35);
  opacity: 0;
  animation: shimmer 2.4s ease-in-out infinite;
  pointer-events: none;
}

/* Force visible border glow for shiny cards in marketplace/profile */
.collection__card.shiny-card {
  box-shadow: 0 0 0 1px rgba(122, 247, 195, 0.6), 0 0 18px rgba(122, 247, 195, 0.35);
}

.shiny-card.shiny--common {
  box-shadow: 0 0 0 1px rgba(233, 237, 244, 0.6), 0 0 18px rgba(233, 237, 244, 0.35);
}

.shiny-card.shiny--rare {
  box-shadow: 0 0 0 1px rgba(113, 196, 255, 0.7), 0 0 18px rgba(113, 196, 255, 0.4);
}

.shiny-card.shiny--epic {
  box-shadow: 0 0 0 1px rgba(255, 127, 212, 0.7), 0 0 18px rgba(255, 127, 212, 0.4);
}

.shiny-card.shiny--legendary {
  box-shadow: 0 0 0 1px rgba(255, 179, 107, 0.75), 0 0 20px rgba(255, 179, 107, 0.45);
}

.top100-tier-card {
  position: relative;
  border-color: rgba(255, 255, 255, 0.45);
}

.collection__card.top100-tier-card,
.reveal__info.top100-tier-card {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.55),
    -10px 0 18px rgba(191, 10, 48, 0.34),
    10px 0 18px rgba(0, 40, 104, 0.34),
    0 0 14px rgba(255, 255, 255, 0.26);
}

.collection__card.top100-tier-card:not(.shiny-card),
.reveal__info.top100-tier-card:not(.shiny-card) {
  box-shadow: none;
}

.top100-tier-card.shiny-card {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.78),
    -12px 0 22px rgba(191, 10, 48, 0.42),
    12px 0 22px rgba(0, 40, 104, 0.42),
    0 0 22px rgba(255, 255, 255, 0.36);
}

.top100-tier-card:not(.shiny-card)::before,
.top100-tier-card:not(.shiny-card)::after {
  content: none;
  display: none;
}

.top100-tier-card:not(.shiny-card)::before {
  border: 0;
  box-shadow: none;
  opacity: 0;
  animation: none;
}

.top100-tier-card:not(.shiny-card)::after {
  border: 0;
  box-shadow: none;
  opacity: 0;
  animation: none;
  animation-delay: 0s;
}

.top500-tier-card {
  position: relative;
  border-color: rgba(255, 128, 223, 0.5);
}

.collection__card.top500-tier-card,
.reveal__info.top500-tier-card {
  box-shadow:
    0 0 0 1px rgba(255, 142, 226, 0.62),
    0 0 20px rgba(255, 84, 197, 0.45),
    0 0 36px rgba(255, 116, 212, 0.28);
}

.collection__card.top500-tier-card:not(.shiny-card),
.reveal__info.top500-tier-card:not(.shiny-card) {
  box-shadow: none;
}

.top500-tier-card.shiny-card {
  box-shadow:
    0 0 0 1px rgba(255, 164, 233, 0.82),
    0 0 26px rgba(255, 84, 197, 0.62),
    0 0 42px rgba(255, 141, 225, 0.34);
}

.top500-tier-card:not(.shiny-card)::before,
.top500-tier-card:not(.shiny-card)::after {
  content: none;
  display: none;
  border: 0;
}

.top500-tier-card:not(.shiny-card)::before {
  box-shadow: none;
  opacity: 0;
  animation: none;
}

.top500-tier-card:not(.shiny-card)::after {
  box-shadow: none;
  opacity: 0;
  animation: none;
  animation-delay: 0s;
}

.shiny-card::before {
  inset: -10px;
  animation-delay: 0.8s;
}

.all-listings__list .shiny-card {
  overflow: hidden;
}

.all-listings__list .shiny-card::before,
.all-listings__list .shiny-card::after {
  inset: -3px;
  border-radius: 18px;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.28);
}

@keyframes shimmer {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
}

@keyframes usa-card-halo {
  0%,
  100% {
    opacity: 0.24;
  }
  50% {
    opacity: 0.72;
  }
}

@keyframes top500-pink-halo {
  0%,
  100% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.78;
  }
}

.shiny {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 80;
}

.shiny.active {
  display: flex;
}

.shiny.shiny--found .shiny__backdrop {
  animation: shiny-found-backdrop 0.7s ease-out;
}

.shiny__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 12, 0.75);
}

.shiny__panel {
  position: relative;
  width: min(380px, 90vw);
  background: rgba(10, 12, 18, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 18px;
  z-index: 1;
  text-align: center;
}

.shiny.shiny--found .shiny__panel {
  animation: shiny-found-pop 0.75s cubic-bezier(0.2, 0.85, 0.18, 1.05);
  box-shadow:
    0 0 0 1px rgba(122, 247, 195, 0.65),
    0 0 34px rgba(122, 247, 195, 0.35),
    0 22px 42px rgba(0, 0, 0, 0.5);
}

.shiny.shiny--found .shiny__panel::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(122, 247, 195, 0), rgba(122, 247, 195, 0.45), rgba(122, 247, 195, 0));
  transform: translateX(-120%);
  animation: shiny-found-sweep 0.85s ease-out;
}

@keyframes shiny-found-pop {
  0% {
    opacity: 0;
    transform: scale(0.86);
  }
  55% {
    opacity: 1;
    transform: scale(1.045);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes shiny-found-sweep {
  0% {
    opacity: 0;
    transform: translateX(-120%);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(120%);
  }
}

@keyframes shiny-found-backdrop {
  0% {
    background: rgba(6, 8, 12, 0.1);
  }
  100% {
    background: rgba(6, 8, 12, 0.75);
  }
}

.shiny__actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.sell {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 85;
}

.sell.active {
  display: flex;
}

.sell.sell--top {
  z-index: 430 !important;
}

.sell__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 12, 0.75);
}

.sell__panel {
  position: relative;
  width: min(360px, 90vw);
  background: rgba(10, 12, 18, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 18px;
  z-index: 1;
  text-align: center;
}

.sell__actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.settings-fab {
  position: fixed;
  right: 24px;
  top: 16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(10, 12, 18, 0.9);
  color: #f6f3ff;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  z-index: 90;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.settings-fab svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.settings-fab:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45);
}

.settings-fab:active {
  transform: translateY(0);
}

.settings-rail {
  position: fixed;
  right: 86px;
  top: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(10, 12, 18, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  transform: translateX(16px);
  opacity: 0;
  pointer-events: none;
  z-index: 90;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.settings-rail.active {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.settings-rail__btn {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(15, 18, 26, 0.9);
  color: #f2f1f7;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
}

.settings-rail__btn:hover {
  border-color: rgba(255, 255, 255, 0.35);
}

.settings-rail__toggle {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(15, 18, 26, 0.9);
  color: #f2f1f7;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  min-width: 96px;
  text-align: center;
}

.settings-rail__toggle.off {
  opacity: 0.7;
  border-color: rgba(255, 255, 255, 0.12);
}

.settings-rail__toggle:hover {
  border-color: rgba(255, 255, 255, 0.35);
}

.settings-rail__autosell {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-rail__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(242, 241, 247, 0.68);
}

.settings-rail__rarities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

/* Mobile home layout (match reference mock) */
@media (max-width: 700px) {
  .reveal .reveal__info {
    width: min(74vw, 240px) !important;
    max-width: 240px !important;
    padding: 12px !important;
    gap: 8px !important;
  }

  .reveal .reveal__info .cover {
    height: 140px !important;
  }

  .reveal .reveal__track {
    font-size: 20px !important;
  }

  .reveal .reveal__artist {
    font-size: 13px !important;
  }

  .notify-history {
    right: 10px;
    top: 72px;
    width: min(420px, calc(100vw - 20px));
    max-height: min(72vh, calc(100dvh - 92px));
    z-index: 360;
  }

  .crate-auto {
    z-index: 220;
  }

  .crate-auto__panel {
    z-index: 240;
  }

  .page {
    padding: calc(96px + env(safe-area-inset-top)) 10px 340px;
    gap: 14px;
    justify-content: flex-start;
  }

  .top {
    left: 10px;
    right: 10px;
    top: calc(10px + env(safe-area-inset-top));
    gap: 8px;
    align-items: flex-start;
  }

  .brand {
    min-width: 0;
  }

  .brand h1 {
    font-size: 28px;
    line-height: 1;
  }

  .top__center {
    position: static;
    transform: none;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    margin-top: 6px;
    gap: 8px;
  }

  .xpbar {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
  }

  .xpbar__track {
    max-width: 120px;
    flex: 0 0 120px;
  }

  .xpbar__info {
    position: static;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
  }

  .wallet {
    margin-left: 0;
    gap: 0;
    flex: 0 0 auto;
  }

  .wallet__value {
    font-size: 16px;
  }

  .wallet__bell {
    position: fixed;
    right: 72px;
    top: calc(20px + env(safe-area-inset-top));
    width: 44px;
    height: 44px;
    font-size: 20px;
    border-radius: 999px;
    background: rgba(8, 12, 20, 0.88);
    z-index: 91;
  }

  .settings-fab {
    right: 14px;
    top: calc(20px + env(safe-area-inset-top));
    width: 44px;
    height: 44px;
    z-index: 91;
  }

  .settings-fab svg {
    width: 18px;
    height: 18px;
  }

  .settings-rail {
    top: calc(72px + env(safe-area-inset-top));
    right: 10px;
    left: auto;
    max-width: min(320px, calc(100vw - 20px));
  }

  .arena {
    width: 100%;
    position: relative;
    align-items: center;
    justify-items: center;
    padding-left: 0;
    min-height: 510px;
  }

  .crate-wrap {
    width: min(100%, 420px);
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    gap: 14px;
  }

  .crate-label {
    margin-top: 6px;
  }

  .vinyl {
    width: min(56vw, 280px);
    height: min(56vw, 280px);
  }

  .open-row {
    width: 100%;
    align-items: center;
  }

  .open-row__primary {
    width: 100%;
    justify-content: center;
  }

  .open-row__primary::before {
    display: none;
  }

  #openBtn {
    width: min(74vw, 360px);
  }

  .open-row__secondary {
    width: 100%;
    justify-content: center;
  }

  .crate-list {
    position: fixed;
    left: 50% !important;
    top: auto !important;
    bottom: calc(116px + env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    width: calc(100vw - 16px) !important;
    max-width: 520px !important;
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px;
    overflow: visible !important;
    z-index: 130;
    padding: 0;
  }

  .crate-carousel {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }

  .crate-carousel__arrow {
    width: 42px;
    height: 42px;
    font-size: 22px;
  }

  .crate-list .crate-picker__card {
    min-width: 0;
    width: 100%;
    padding: 9px;
    gap: 6px;
    border-radius: 16px;
  }

  .crate-list .crate-picker__cover {
    height: 72px;
  }

  .crate-list .crate-picker__disc {
    width: 48px;
    height: 48px;
  }

  .side-actions {
    left: 50% !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    width: calc(100vw - 16px) !important;
    max-width: 520px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px;
    padding: 0;
    overflow: visible !important;
    align-items: stretch;
  }

  .side-actions__item {
    display: flex;
    width: 100%;
  }

  .side-actions__btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 9px 8px;
    font-size: 10px;
    letter-spacing: 0.6px;
    white-space: nowrap;
  }

  #collectionBtn,
  #marketBtn {
    font-size: 9px;
    letter-spacing: 0.3px;
    padding-inline: 5px;
  }

  .side-actions .promo__panel {
    left: 50%;
    bottom: calc(112px + env(safe-area-inset-bottom));
  }
}

/* iPhone 14 target layout pass */
@media (max-width: 430px) {
  .reveal .reveal__info {
    width: min(70vw, 220px) !important;
    max-width: 220px !important;
    padding: 10px !important;
    gap: 7px !important;
  }

  .reveal .reveal__info .cover {
    height: 122px !important;
  }

  .reveal .reveal__track {
    font-size: 17px !important;
  }

  .reveal .reveal__artist {
    font-size: 12px !important;
  }

  .notify-history {
    right: 6px !important;
    top: calc(60px + env(safe-area-inset-top)) !important;
    width: calc(100vw - 12px) !important;
    max-height: min(72vh, calc(100dvh - 72px)) !important;
    z-index: 360 !important;
  }

  html,
  body {
    height: 100dvh !important;
    overflow: hidden !important;
  }

  .page {
    height: 100dvh !important;
    overflow: hidden !important;
    padding: calc(82px + env(safe-area-inset-top)) 6px 178px !important;
    gap: 10px !important;
  }

  .collection {
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
  }

  .collection__panel {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: calc(12px + env(safe-area-inset-top)) 12px 12px !important;
    border: none !important;
  }

  .market__panel {
    padding-top: calc(12px + env(safe-area-inset-top)) !important;
  }

  .profile__panel:not(.profile__panel--public) {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    background: rgba(7, 12, 22, 0.96) !important;
    padding: calc(12px + env(safe-area-inset-top)) 12px calc(112px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    gap: 14px !important;
  }

  .profile__header {
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .profile__header h2 {
    font-size: 22px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  .profile__header p,
  #profileName {
    font-size: 18px !important;
    color: var(--text) !important;
    margin-top: 4px !important;
  }

  .profile__toggle {
    font-size: 17px !important;
    padding: 2px 0 !important;
  }

  .profile__favorite-genre {
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 16px !important;
  }

  .profile__favorite-genre .btn {
    min-height: 42px !important;
    padding: 10px 14px !important;
  }

  #profileFavoriteGenreValue {
    justify-self: start !important;
  }

  .profile__showcase-header {
    font-size: 13px !important;
  }

  .profile__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    justify-content: stretch !important;
    align-items: stretch !important;
  }

  #publicProfileGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .profile__grid .collection__card {
    width: 100% !important;
    min-width: 0 !important;
    padding: 7px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    position: relative !important;
    isolation: isolate !important;
  }

  .profile__grid .collection__card .cover {
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }

  .profile__grid .collection__title {
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  .profile__grid .collection__subtitle {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  .profile__grid .source-badge,
  .profile__grid .market__row--link {
    transform: scale(0.84);
    transform-origin: left bottom;
  }

  #profilePicker .profile-picker__panel {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    background: rgba(7, 12, 22, 0.96) !important;
    padding: calc(12px + env(safe-area-inset-top)) 12px calc(108px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    gap: 10px !important;
  }

  #profilePicker .profile-picker__grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 4px 0 10px !important;
    align-items: stretch !important;
  }

  #profilePicker .profile-picker__grid .collection__card {
    padding: 9px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    position: relative !important;
    isolation: isolate !important;
  }

  #profilePicker .profile-picker__grid .collection__card .cover {
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
  }

  #profilePicker .profile-picker__grid .collection__title {
    font-size: 12px !important;
    line-height: 1.22 !important;
  }

  #profilePicker .profile-picker__grid .collection__subtitle {
    font-size: 10px !important;
    line-height: 1.22 !important;
  }

  .collection__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding-bottom: 8px !important;
  }

  .collection__card {
    padding: 9px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    position: relative !important;
    isolation: isolate !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .collection__grid .market__listing-card {
    width: 100% !important;
    max-width: none !important;
  }

  .collection__card .cover {
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }

  .collection__grid .collection__card.shiny-card::before,
  .collection__grid .collection__card.shiny-card::after {
    inset: -1px !important;
    border-radius: inherit !important;
  }

  .collection__title {
    font-size: 12px !important;
    line-height: 1.22 !important;
  }

  .collection__subtitle {
    font-size: 10px !important;
    line-height: 1.22 !important;
  }

  .quests__panel {
    width: min(96vw, 520px) !important;
    max-height: calc(100dvh - 18px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    padding: 12px 10px calc(108px + env(safe-area-inset-bottom)) !important;
    border-radius: 16px !important;
  }

  .quests__header h3 {
    font-size: 22px !important;
  }

  .quests__msg {
    font-size: 12px !important;
  }

  .quests__grid {
    gap: 8px !important;
    grid-template-columns: 1fr !important;
    padding-right: 0 !important;
  }

  .quest__card {
    padding: 10px !important;
    min-height: 0 !important;
  }

  .quest__title {
    font-size: 17px !important;
  }

  .quest__progress,
  .quest__reward {
    font-size: 13px !important;
  }

  .quest__card .btn {
    width: 100%;
    min-height: 38px;
  }

  .all-listings__list .collection__card {
    padding: 12px !important;
    gap: 9px !important;
    overflow: hidden !important;
    position: relative !important;
    isolation: isolate !important;
  }

  .all-listings__list .collection__card .cover {
    height: 170px !important;
  }

  .all-listings__list .market__footer {
    grid-template-rows: 48px 42px 52px !important;
    gap: 6px !important;
  }

  .all-listings__list .collection__card.shiny-card::before,
  .all-listings__list .collection__card.shiny-card::after {
    inset: -1px !important;
    border-radius: inherit !important;
  }

  .top {
    left: 6px !important;
    right: 6px !important;
    top: calc(6px + env(safe-area-inset-top)) !important;
    align-items: flex-start !important;
  }

  .brand {
    gap: 10px !important;
  }

  .brand__mark {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }

  .brand h1 {
    font-size: 20px !important;
    white-space: nowrap !important;
  }

  .top__center {
    width: 100% !important;
    justify-content: flex-start !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    margin-top: 6px !important;
    gap: 6px !important;
  }

  .xpbar {
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 6px !important;
  }

  .xpbar__level {
    font-size: 10px !important;
  }

  .xpbar__track {
    flex: 0 0 104px !important;
    max-width: 104px !important;
    height: 7px !important;
  }

  .xpbar__info {
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;
  }

  .settings-fab {
    right: 8px !important;
    top: calc(10px + env(safe-area-inset-top)) !important;
    width: 40px !important;
    height: 40px !important;
  }

  .wallet {
    margin-left: 0 !important;
    gap: 0 !important;
    flex: 0 0 auto !important;
  }

  .wallet__value {
    font-size: 16px !important;
  }

  .wallet__bell {
    right: 58px !important;
    top: calc(10px + env(safe-area-inset-top)) !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 17px !important;
  }

  .arena {
    padding-left: 0 !important;
    min-height: 430px !important;
  }

  .crate-list {
    left: 50% !important;
    top: auto !important;
    bottom: calc(106px + env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    z-index: 145 !important;
    padding: 0 !important;
  }

  .crate-carousel {
    width: 100% !important;
    max-width: min(420px, calc(100vw - 20px)) !important;
    margin: 0 auto !important;
  }

  .crate-carousel__arrow {
    width: 40px !important;
    height: 40px !important;
    font-size: 21px !important;
  }

  .crate-list .crate-picker__card {
    width: 100% !important;
    min-width: 0 !important;
    padding: 8px !important;
    border-radius: 14px !important;
  }

  .crate-list .crate-picker__cover {
    height: 56px !important;
  }

  .crate-list .crate-picker__disc {
    width: 40px !important;
    height: 40px !important;
  }

  .crate-list .collection__title {
    font-size: 13px !important;
  }

  .crate-list .collection__subtitle {
    font-size: 10px !important;
  }

  .crate-wrap {
    width: min(100%, 320px) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 10px !important;
  }

  .crate-label {
    font-size: 9px !important;
    letter-spacing: 0.2em !important;
  }

  .vinyl {
    width: min(58vw, 230px) !important;
    height: min(58vw, 230px) !important;
  }

  #openBtn {
    width: min(100%, 300px) !important;
  }

  .open-row__secondary,
  #autoPackageLockWrap {
    width: min(100%, 300px) !important;
  }

  .side-actions {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 140 !important;
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    gap: 6px !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    padding: 8px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(7, 12, 22, 0.9) !important;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(8px);
  }

  .side-actions__btn {
    font-size: 10px !important;
    letter-spacing: 0.4px !important;
    padding: 8px 6px !important;
  }

  #collectionBtn,
  #marketBtn {
    font-size: 8.8px !important;
    letter-spacing: 0.15px !important;
    padding-inline: 4px !important;
  }

  .side-actions .promo__panel {
    position: fixed !important;
    bottom: calc(94px + env(safe-area-inset-bottom)) !important;
    z-index: 150 !important;
  }
}

/* Final device baseline: iPhone 12/13/14 size class (390 x 844) */
@media (max-width: 390px) and (max-height: 844px) {
  .page {
    padding: calc(80px + env(safe-area-inset-top)) 6px 170px !important;
    gap: 8px !important;
  }

  .top {
    top: calc(6px + env(safe-area-inset-top)) !important;
    left: 6px !important;
    right: 6px !important;
  }

  .brand h1 {
    font-size: 19px !important;
  }

  .xpbar__track {
    flex: 0 0 96px !important;
    max-width: 96px !important;
  }

  .wallet__value {
    font-size: 14px !important;
  }

  .wallet__bell,
  .settings-fab {
    width: 36px !important;
    height: 36px !important;
  }

  .wallet__bell {
    right: 52px !important;
    top: calc(10px + env(safe-area-inset-top)) !important;
    font-size: 16px !important;
  }

  .settings-fab {
    right: 8px !important;
    top: calc(10px + env(safe-area-inset-top)) !important;
  }

  .arena {
    min-height: 396px !important;
  }

  .crate-wrap {
    width: min(100%, 302px) !important;
    gap: 8px !important;
  }

  .vinyl {
    width: min(54vw, 206px) !important;
    height: min(54vw, 206px) !important;
  }

  #openBtn,
  .open-row__secondary,
  #autoPackageLockWrap {
    width: min(100%, 286px) !important;
  }

  .crate-list {
    bottom: calc(100px + env(safe-area-inset-bottom)) !important;
    width: calc(100vw - 10px) !important;
    max-width: calc(100vw - 10px) !important;
    gap: 5px !important;
  }

  .crate-list .crate-picker__card {
    padding: 7px !important;
  }

  .crate-list .crate-picker__cover {
    height: 52px !important;
  }

  .crate-list .crate-picker__disc {
    width: 36px !important;
    height: 36px !important;
  }

  .side-actions {
    width: calc(100vw - 10px) !important;
    max-width: calc(100vw - 10px) !important;
    bottom: calc(6px + env(safe-area-inset-bottom)) !important;
    gap: 5px !important;
    padding: 6px !important;
    border-radius: 12px !important;
  }

  .side-actions__btn {
    font-size: 9px !important;
    padding: 7px 5px !important;
    letter-spacing: 0.25px !important;
    border-radius: 10px !important;
  }

  .notify-history {
    top: calc(56px + env(safe-area-inset-top)) !important;
    max-height: min(68vh, calc(100dvh - 66px)) !important;
  }

  .settings-rail {
    top: calc(56px + env(safe-area-inset-top)) !important;
    right: 6px !important;
    max-width: min(292px, calc(100vw - 12px)) !important;
  }

  .reveal .reveal__info {
    width: min(66vw, 204px) !important;
    max-width: 204px !important;
    padding: 9px !important;
  }

  .reveal .reveal__info .cover {
    height: 112px !important;
  }

  .tracks__panel,
  .profile__panel,
  .profile__panel--public,
  .quests__panel,
  .daily__panel {
    padding: 10px !important;
  }

  .collection__panel,
  .market__panel {
    padding: calc(10px + env(safe-area-inset-top)) 10px 10px !important;
  }

  .profile__panel:not(.profile__panel--public) {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    background: rgba(7, 12, 22, 0.96) !important;
    padding: calc(10px + env(safe-area-inset-top)) 10px calc(108px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .profile__header h2 {
    font-size: 20px !important;
  }

  .profile__header p,
  #profileName {
    font-size: 16px !important;
  }

  .profile__toggle {
    font-size: 15px !important;
  }

  .profile__favorite-genre {
    grid-template-columns: auto auto minmax(0, 1fr) !important;
    gap: 8px !important;
    font-size: 14px !important;
  }

  .profile__favorite-genre .btn {
    min-height: 38px !important;
    padding: 8px 12px !important;
  }

  .profile__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #publicProfileGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .profile__grid .collection__card {
    padding: 6px !important;
    border-radius: 10px !important;
  }

  .collection__grid .market__listing-card {
    width: 100% !important;
    max-width: none !important;
  }

  .profile__grid .collection__title {
    font-size: 10px !important;
  }

  .profile__grid .collection__subtitle {
    font-size: 9px !important;
  }

  #profilePicker .profile-picker__panel {
    padding: calc(10px + env(safe-area-inset-top)) 10px calc(106px + env(safe-area-inset-bottom)) !important;
  }

  #profilePicker .profile-picker__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #profilePicker .profile-picker__grid .collection__card {
    padding: 8px !important;
    border-radius: 10px !important;
  }

  #profilePicker .profile-picker__grid .collection__title {
    font-size: 11px !important;
  }

  #profilePicker .profile-picker__grid .collection__subtitle {
    font-size: 9px !important;
  }

  .daily__panel {
    padding: calc(10px + env(safe-area-inset-top)) 10px calc(16px + env(safe-area-inset-bottom)) !important;
  }

  .quests__panel {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    padding: calc(10px + env(safe-area-inset-top)) 10px calc(108px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    background: #121212 !important;
  }

  .daily__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .daily__day:nth-child(7) {
    max-width: calc(50% - 4px) !important;
  }

  .collection__header h2,
  .tracks__header h2,
  .market__title,
  .quests__header h3,
  .daily__header h3 {
    font-size: 18px !important;
  }

  .market__tabs {
    gap: 6px !important;
  }

  .market__tab {
    font-size: 9px !important;
    padding: 7px 8px !important;
  }

  .offer__layout {
    width: min(100vw, 100vw) !important;
    gap: 8px !important;
  }

  .offer__target-wrap,
  .offer__panel {
    padding: 8px !important;
    border-radius: 14px !important;
  }

  .offer__target-row,
  .offer__offer-row,
  .offer__editor-placeholder {
    min-height: 140px !important;
  }

  .offer__target-row,
  .offer__offer-row {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    padding: 8px !important;
    gap: 8px !important;
  }

  .offer__list-cover {
    width: 72px !important;
    height: 72px !important;
  }

  .offer__list-title {
    font-size: 14px !important;
  }

  .offer__list-subtitle {
    font-size: 11px !important;
  }

  .offer__slot--list .offer__slot-apple,
  .offer__target-row .offer__slot-apple {
    min-width: 96px !important;
    height: 24px !important;
  }
}

/* Non-desktop scaling baseline (tablets + larger phones) */
@media (min-width: 431px) and (max-width: 1024px) {
  html,
  body {
    height: 100dvh !important;
    overflow: hidden !important;
  }

  .page {
    height: 100dvh !important;
    overflow: hidden !important;
    padding: calc(84px + env(safe-area-inset-top)) clamp(10px, 2.2vw, 18px)
      calc(188px + env(safe-area-inset-bottom)) !important;
    gap: clamp(10px, 1.8vw, 18px) !important;
  }

  .top {
    left: clamp(8px, 2vw, 16px) !important;
    right: clamp(8px, 2vw, 16px) !important;
    top: calc(8px + env(safe-area-inset-top)) !important;
    align-items: flex-start !important;
  }

  .top__center {
    width: 100% !important;
    justify-content: flex-start !important;
    gap: clamp(6px, 1.6vw, 12px) !important;
    margin-top: 6px !important;
  }

  .xpbar__track {
    flex: 0 0 clamp(104px, 18vw, 160px) !important;
    max-width: clamp(104px, 18vw, 160px) !important;
  }

  .wallet__bell {
    top: calc(10px + env(safe-area-inset-top)) !important;
  }

  .settings-fab {
    top: calc(10px + env(safe-area-inset-top)) !important;
  }

  .settings-rail {
    top: calc(60px + env(safe-area-inset-top)) !important;
  }

  .arena {
    min-height: clamp(420px, 52vh, 560px) !important;
  }

  .vinyl {
    width: clamp(190px, 36vw, 280px) !important;
    height: clamp(190px, 36vw, 280px) !important;
  }

  #openBtn,
  .open-row__secondary,
  #autoPackageLockWrap {
    width: min(100%, clamp(290px, 56vw, 420px)) !important;
  }

  .crate-list {
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: auto !important;
    bottom: calc(112px + env(safe-area-inset-bottom)) !important;
    width: min(700px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(6px, 1.4vw, 10px) !important;
    padding: 0 !important;
  }

  .crate-carousel {
    width: min(520px, calc(100vw - 20px)) !important;
    margin: 0 auto !important;
  }

  .side-actions {
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    width: min(700px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(6px, 1.4vw, 10px) !important;
    padding: 8px !important;
  }

  .collection__panel,
  .market__panel,
  .profile__panel:not(.profile__panel--public),
  .quests__panel,
  .daily__panel,
  #profilePicker .profile-picker__panel {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    background: rgba(7, 12, 22, 0.96) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .collection__panel,
  .market__panel {
    padding: calc(12px + env(safe-area-inset-top)) 12px 12px !important;
  }

  .profile__panel:not(.profile__panel--public) {
    padding: calc(12px + env(safe-area-inset-top)) 12px
      calc(112px + env(safe-area-inset-bottom)) !important;
  }

  .daily__panel {
    padding: calc(12px + env(safe-area-inset-top)) 12px
      calc(18px + env(safe-area-inset-bottom)) !important;
  }

  .quests__panel,
  #profilePicker .profile-picker__panel {
    padding: calc(12px + env(safe-area-inset-top)) 12px
      calc(112px + env(safe-area-inset-bottom)) !important;
  }

  .collection__grid,
  #profilePicker .profile-picker__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(8px, 1.8vw, 12px) !important;
  }

  .collection__card,
  #profilePicker .profile-picker__grid .collection__card {
    width: 100% !important;
    min-width: 0 !important;
  }

  .collection__grid .market__listing-card {
    width: 100% !important;
    max-width: none !important;
  }

  .profile__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(8px, 1.8vw, 12px) !important;
  }

  #publicProfileGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(8px, 1.8vw, 12px) !important;
  }

  .daily__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(8px, 1.8vw, 12px) !important;
  }

  .daily__day:nth-child(7) {
    max-width: calc(50% - (clamp(8px, 1.8vw, 12px) / 2)) !important;
  }
}

/* Final mobile showcase pass: 2x2 cards with more breathing room */
@media (max-width: 900px) {
  .profile__grid,
  #publicProfileGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .profile__grid .collection__card,
  #publicProfileGrid .collection__card {
    padding: 10px !important;
    border-radius: 12px !important;
  }

  .profile__grid .collection__title,
  #publicProfileGrid .collection__title {
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  .profile__grid .collection__subtitle,
  #publicProfileGrid .collection__subtitle {
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  .profile__actions--public {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    justify-content: stretch !important;
    align-self: stretch !important;
  }

  .profile__actions--public .btn {
    width: 100% !important;
    min-width: 0 !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
    letter-spacing: 0.4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Mobile offer picker: match My Collection 2-per-row card UI */
  #offerPicker .profile-picker__panel {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    background: rgba(7, 12, 22, 0.96) !important;
    padding: calc(12px + env(safe-area-inset-top)) 12px calc(108px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    gap: 10px !important;
  }

  #offerPicker.active {
    z-index: 650 !important;
  }

  #offerPicker .profile-picker__grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 4px 0 10px !important;
    align-items: stretch !important;
  }

  #offerPicker .profile-picker__grid .collection__card {
    width: 100% !important;
    min-width: 0 !important;
    padding: 9px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    position: relative !important;
    isolation: isolate !important;
  }

  #offerPicker .profile-picker__grid .collection__card .cover {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }

  #offerPicker .profile-picker__grid .collection__title {
    font-size: 12px !important;
    line-height: 1.22 !important;
  }

  #offerPicker .profile-picker__grid .collection__subtitle {
    font-size: 10px !important;
    line-height: 1.22 !important;
  }

  #offerPicker .profile-picker__grid .collection__card.shiny-card::before,
  #offerPicker .profile-picker__grid .collection__card.shiny-card::after {
    inset: -1px !important;
    border-radius: inherit !important;
  }

  /* Mobile: incoming/outgoing offer details must scroll as one full page */
  #incomingTrade {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom)) !important;
  }

  #incomingTrade .offer__layout {
    width: 100% !important;
    max-width: 100% !important;
    min-height: max-content !important;
    height: auto !important;
    margin: 0 !important;
    gap: 8px !important;
  }

  #incomingTrade .offer__target-wrap,
  #incomingTrade .offer__panel {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
  }

  #incomingTrade .offer__form {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  #incomingTrade .offer__slots-wrap,
  #incomingTrade .offer__target-list {
    overflow: visible !important;
    max-height: none !important;
    padding-right: 0 !important;
  }
}

/* Mobile: marketplace song picker should mirror My Collection card layout */
@media (max-width: 900px) {
  #marketInventoryGridTrade.market__grid.market__grid--selector {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 4px 0 10px !important;
    align-items: stretch !important;
  }

  #marketInventoryGridTrade .collection__card {
    width: 100% !important;
    min-width: 0 !important;
    padding: 9px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    position: relative !important;
    isolation: isolate !important;
  }

  #marketInventoryGridTrade .collection__card .cover {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }

  #marketInventoryGridTrade .collection__title {
    font-size: 12px !important;
    line-height: 1.22 !important;
  }

  #marketInventoryGridTrade .collection__subtitle {
    font-size: 10px !important;
    line-height: 1.22 !important;
  }

  #marketInventoryGridTrade .collection__card.shiny-card::before,
  #marketInventoryGridTrade .collection__card.shiny-card::after {
    inset: -1px !important;
    border-radius: inherit !important;
  }
}

/* Mobile production pass: stable viewport, safe-area spacing, and drawer navigation */
.mobile-nav-toggle,
.mobile-nav-backdrop {
  display: none;
}

.mobile-nav-toggle__bar {
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

@media (max-width: 900px) {
  html,
  body {
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body {
    min-height: 100dvh;
    min-height: 100svh;
  }

  .page {
    height: auto !important;
    min-height: 100dvh !important;
    min-height: 100svh !important;
    overflow: visible !important;
    padding: calc(86px + var(--safe-top)) clamp(8px, 2.6vw, 12px) calc(228px + var(--safe-bottom)) !important;
    gap: 16px !important;
  }

  .top {
    top: calc(8px + var(--safe-top)) !important;
    left: max(8px, var(--safe-left)) !important;
    right: max(8px, var(--safe-right)) !important;
  }

  .top__center {
    width: 100% !important;
    max-width: calc(100vw - 16px - var(--safe-left) - var(--safe-right)) !important;
  }

  .xpbar__track {
    min-width: 96px !important;
    max-width: none !important;
    flex: 1 1 auto !important;
  }

  .wallet__bell,
  .settings-fab,
  .mobile-nav-toggle,
  .xpbar__info,
  .odds-btn,
  .crate-carousel__arrow,
  .live-pulls-toggle,
  .live-pulls-leaderboard-btn,
  .live-pulls-guess-btn {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .wallet__bell {
    width: 44px !important;
    height: 44px !important;
    top: calc(10px + var(--safe-top)) !important;
    right: calc(58px + var(--safe-right)) !important;
  }

  .settings-fab {
    width: 44px !important;
    height: 44px !important;
    top: calc(10px + var(--safe-top)) !important;
    right: calc(8px + var(--safe-right)) !important;
  }

  .mobile-nav-toggle {
    position: fixed;
    right: calc(108px + var(--safe-right));
    top: calc(10px + var(--safe-top));
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(8, 12, 20, 0.88);
    color: #f4f8ff;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    z-index: 95;
    padding: 0;
  }

  .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    border: 0;
    margin: 0;
    padding: 0;
    background: rgba(4, 7, 14, 0.42);
    opacity: 0;
    pointer-events: none;
    z-index: 83;
  }

  .mobile-nav-backdrop.active {
    opacity: 1;
    pointer-events: auto;
    display: block;
  }

  .side-actions {
    left: auto !important;
    right: max(10px, var(--safe-right)) !important;
    top: calc(66px + var(--safe-top)) !important;
    bottom: auto !important;
    transform: translateX(calc(100% + 20px)) !important;
    width: min(300px, calc(100vw - 20px - var(--safe-left) - var(--safe-right))) !important;
    max-width: min(300px, calc(100vw - 20px - var(--safe-left) - var(--safe-right))) !important;
    max-height: calc(100dvh - 80px - var(--safe-top) - var(--safe-bottom));
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(7, 12, 22, 0.92) !important;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.44) !important;
    z-index: 84 !important;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.22s ease, opacity 0.22s ease;
  }

  body.mobile-nav-open .side-actions {
    transform: translateX(0) !important;
    opacity: 1;
    pointer-events: auto;
  }

  .side-actions__item {
    width: 100%;
  }

  .side-actions__btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 10px 12px !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
  }

  #guessSongBtn {
    display: inline-flex !important;
  }

  .side-actions .promo--compact {
    width: 100%;
    align-items: stretch;
  }

  .side-actions .promo__panel {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    margin-top: 4px;
    z-index: auto !important;
  }

  body.ui-blocking-open .mobile-nav-toggle,
  body.ui-blocking-open .mobile-nav-backdrop {
    opacity: 0;
    pointer-events: none;
  }

  .crate-list {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(10px + var(--safe-bottom)) !important;
    transform: translateX(-50%) !important;
    width: min(440px, calc(100vw - 16px - var(--safe-left) - var(--safe-right))) !important;
    max-width: min(440px, calc(100vw - 16px - var(--safe-left) - var(--safe-right))) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 0 !important;
    overflow: visible !important;
    z-index: 82 !important;
  }

  .crate-carousel {
    width: 100% !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .crate-carousel__arrow {
    width: 44px !important;
    height: 44px !important;
    font-size: 22px !important;
  }

  .crate-list .crate-picker__card {
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
    border-radius: 16px !important;
    gap: 8px !important;
  }

  .crate-list .crate-picker__cover {
    height: 96px !important;
    border-radius: 12px !important;
  }

  .crate-list .crate-picker__disc {
    width: 56px !important;
    height: 56px !important;
  }

  .notify-history {
    right: max(8px, var(--safe-right)) !important;
    top: calc(64px + var(--safe-top)) !important;
    width: min(420px, calc(100vw - 16px - var(--safe-left) - var(--safe-right))) !important;
    max-height: calc(100dvh - 82px - var(--safe-top) - var(--safe-bottom)) !important;
  }

  .live-pulls-toggle {
    top: calc(62px + var(--safe-top)) !important;
    right: max(8px, var(--safe-right)) !important;
    border-radius: 12px;
  }

  .live-pulls-leaderboard-btn {
    top: calc(110px + var(--safe-top)) !important;
    right: max(8px, var(--safe-right)) !important;
    border-radius: 12px;
  }

  .live-pulls-guess-btn {
    top: calc(164px + var(--safe-top)) !important;
    right: max(8px, var(--safe-right)) !important;
    border-radius: 12px;
  }

  .weekly-leaderboard {
    top: calc(110px + var(--safe-top)) !important;
    right: max(8px, var(--safe-right)) !important;
    width: min(330px, calc(100vw - 16px - var(--safe-left) - var(--safe-right))) !important;
    max-height: min(46vh, calc(100dvh - 124px - var(--safe-top) - var(--safe-bottom))) !important;
  }

  .market__panel,
  .collection__panel,
  .daily__panel,
  .quests__panel,
  .profile__panel:not(.profile__panel--public),
  #profilePicker .profile-picker__panel,
  #offerPicker .profile-picker__panel {
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 100svh !important;
  }

  .market__panel {
    padding: calc(12px + var(--safe-top)) 12px calc(18px + var(--safe-bottom)) !important;
  }

  .collection__panel,
  .daily__panel,
  .quests__panel,
  .profile__panel:not(.profile__panel--public),
  #profilePicker .profile-picker__panel,
  #offerPicker .profile-picker__panel {
    padding: calc(12px + var(--safe-top)) 12px calc(18px + var(--safe-bottom)) !important;
  }

  .offer__layout,
  .offer__panel,
  .offer__target-wrap {
    max-width: 100% !important;
  }

  .collection__grid,
  #offerPicker .profile-picker__grid,
  #profilePicker .profile-picker__grid,
  .profile__grid,
  #publicProfileGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  #marketInventoryGridTrade.market__grid.market__grid--selector {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .collection__card .cover,
  #offerPicker .profile-picker__grid .collection__card .cover,
  #profilePicker .profile-picker__grid .collection__card .cover,
  #marketInventoryGridTrade .collection__card .cover {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
}

@media (max-width: 700px) {
  #marketInventoryGridTrade.market__grid.market__grid--selector {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 430px) {
  .page {
    padding: calc(84px + var(--safe-top)) 8px calc(214px + var(--safe-bottom)) !important;
  }

  .mobile-nav-toggle {
    right: calc(104px + var(--safe-right));
  }

  .crate-list {
    width: min(420px, calc(100vw - 12px - var(--safe-left) - var(--safe-right))) !important;
    max-width: min(420px, calc(100vw - 12px - var(--safe-left) - var(--safe-right))) !important;
  }
}

@media (max-width: 370px) {
  .collection__grid,
  #offerPicker .profile-picker__grid,
  #profilePicker .profile-picker__grid,
  #marketInventoryGridTrade.market__grid.market__grid--selector {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Mobile correction pass (<= 430px): remove overlap, preserve proportions */
.mobile-utility-fab,
.mobile-utility-sheet,
.mobile-utility-backdrop {
  display: none;
}

@media (max-width: 430px) {
  .page {
    height: auto !important;
    min-height: 100dvh !important;
    min-height: 100svh !important;
    overflow: visible !important;
    padding: calc(84px + var(--sat)) 8px calc(22px + var(--sab)) !important;
  }

  .top {
    top: calc(8px + var(--sat)) !important;
    left: max(8px, var(--safe-left)) !important;
    right: max(8px, var(--safe-right)) !important;
  }

  .top__center {
    width: 100% !important;
    max-width: calc(100vw - 16px - var(--safe-left) - var(--safe-right)) !important;
  }

  .xpbar__info,
  .wallet__bell,
  .settings-fab,
  .mobile-nav-toggle,
  .odds-btn,
  .mobile-utility-fab {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .mobile-utility-fab {
    position: fixed;
    right: calc(8px + var(--safe-right));
    top: calc(120px + var(--sat));
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(122, 247, 195, 0.34);
    background: rgba(8, 14, 24, 0.92);
    color: #c9ffe8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
    z-index: 92;
    padding: 0;
    cursor: pointer;
  }

  .mobile-utility-sheet {
    position: fixed;
    left: max(8px, var(--safe-left));
    right: max(8px, var(--safe-right));
    bottom: calc(10px + var(--sab));
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(9, 14, 24, 0.95);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.46);
    padding: 10px;
    display: grid;
    gap: 8px;
    z-index: 360;
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .mobile-utility-sheet.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    display: grid;
  }

  .mobile-utility-sheet__btn {
    width: 100%;
    min-height: 44px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(10, 12, 18, 0.72);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    cursor: pointer;
  }

  .mobile-utility-backdrop {
    position: fixed;
    inset: 0;
    display: block;
    border: 0;
    background: rgba(4, 7, 14, 0.45);
    opacity: 0;
    pointer-events: none;
    z-index: 350;
  }

  .mobile-utility-backdrop.active {
    opacity: 1;
    pointer-events: auto;
  }

  .live-pulls-toggle,
  .live-pulls-leaderboard-btn {
    display: none !important;
  }

  .weekly-leaderboard {
    right: max(8px, var(--safe-right)) !important;
    top: calc(176px + var(--sat)) !important;
    width: min(330px, calc(100vw - 16px - var(--safe-left) - var(--safe-right))) !important;
    max-height: min(40vh, calc(100dvh - 190px - var(--sat) - var(--sab))) !important;
  }

  .crate-list {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 8px calc(10px + var(--sab)) !important;
    margin: 10px 0 0 !important;
    z-index: 20 !important;
    overflow: visible !important;
  }

  #crateList {
    display: grid;
    gap: 10px;
  }

  .crate-carousel-stack {
    gap: 10px;
  }

  .crate-carousel {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .crate-carousel__arrow {
    display: none !important;
  }

  .crate-carousel__card {
    width: 100% !important;
    touch-action: pan-y;
  }

  .crate-list .crate-picker__card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 11px !important;
    border-radius: 15px !important;
    gap: 8px !important;
  }

  .crate-list .crate-picker__cover {
    height: 92px !important;
    border-radius: 12px !important;
  }

  .crate-list .crate-picker__disc {
    width: 54px !important;
    height: 54px !important;
  }

  .crate-list .crate-picker__odds {
    position: static !important;
    align-self: flex-end;
    margin-top: 0;
  }

  .open-row {
    width: min(100%, 330px);
  }

  #openBtn,
  #autoPackageLockWrap {
    width: 100% !important;
  }
}

/* Mobile blackout mode: hide all UI and keep only the background color. */
@media (max-width: 900px) {
  :root {
    --mobile-game-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mobile-bg-friendly: #1e2f4f;
  }

  html,
  body {
    background: #111418 !important;
    background-color: #111418 !important;
    background-attachment: fixed !important;
    height: 100dvh !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: manipulation !important;
  }

  body {
    position: relative;
    overflow: hidden !important;
    margin: 0 !important;
  }

  body::before,
  body::after {
    display: none;
    content: none;
  }

  .mobile-auth-gate {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 315;
    padding: calc(28px + var(--safe-top)) 18px calc(24px + var(--safe-bottom));
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(17, 20, 24, 0.97) 0%, rgba(17, 20, 24, 0.99) 100%);
    pointer-events: auto;
  }

  .mobile-intro-screen {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 340;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: calc(20px + var(--safe-top)) 18px calc(20px + var(--safe-bottom));
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(17, 20, 24, 0.985) 0%, rgba(17, 20, 24, 1) 100%);
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.7s ease;
  }

  .mobile-intro-screen__content {
    display: grid;
    justify-items: center;
    gap: 14px;
  }

  .mobile-intro-screen__vinyl {
    width: clamp(116px, 31vw, 144px);
    height: clamp(116px, 31vw, 144px);
    animation: mobileIntroSpin 1.35s linear infinite;
    box-shadow: none !important;
    filter: none !important;
  }

  .mobile-intro-screen__vinyl::before {
    display: none !important;
  }

  body.mobile-intro-active .mobile-intro-screen {
    display: flex !important;
    visibility: visible !important;
    opacity: 1;
  }

  body.mobile-intro-active.mobile-intro-fading .mobile-intro-screen {
    opacity: 0;
  }

  body.mobile-intro-active.mobile-intro-fading .mobile-intro-screen__vinyl {
    animation: mobileIntroSpinOut 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  }

  .mobile-intro-screen h1 {
    margin: 0;
    color: #ffffff;
    font-family: var(--mobile-game-font);
    font-weight: 800;
    letter-spacing: 0.3px;
    font-size: clamp(26px, 8.2vw, 34px);
    line-height: 1.08;
  }

  @keyframes mobileIntroSpin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes mobileIntroSpinOut {
    0% {
      transform: rotate(0deg) scale(1);
      opacity: 1;
    }
    100% {
      transform: rotate(540deg) scale(1.45);
      opacity: 0;
    }
  }

  body.mobile-auth-locked .mobile-auth-gate {
    display: flex !important;
    visibility: visible !important;
  }

  .mobile-auth-gate__panel {
    width: min(360px, 100%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(9, 14, 22, 0.92);
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.42);
    padding: 22px 16px 16px;
    text-align: center;
    display: grid;
    gap: 10px;
    font-family: var(--mobile-game-font);
  }

  .mobile-auth-gate__panel h1 {
    margin: 0;
    font-size: clamp(24px, 8vw, 32px);
    line-height: 1.08;
    color: #ffffff;
    letter-spacing: 0.3px;
    font-family: var(--mobile-game-font);
    font-weight: 800;
  }

  .mobile-auth-gate__panel p {
    margin: 0;
    color: rgba(229, 238, 248, 0.78);
    font-size: 14px;
    letter-spacing: 0.35px;
    font-family: var(--mobile-game-font);
    font-weight: 700;
  }

  .mobile-auth-gate__actions {
    margin-top: 4px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .mobile-auth-gate__actions .btn {
    width: 100%;
    min-height: 42px;
    font-family: var(--mobile-game-font);
    font-weight: 800;
  }

  .mobile-splash-logo {
    display: grid !important;
    visibility: visible !important;
    position: fixed;
    top: calc(14px + var(--safe-top));
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    color: var(--text);
    font-family: var(--mobile-game-font);
    font-size: clamp(26px, 7vw, 34px);
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1;
    z-index: 20;
    pointer-events: auto;
    white-space: nowrap;
    align-items: center;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    padding: 7px 10px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(10, 14, 22, 0.68);
    width: min(360px, calc(100vw - 18px));
    box-sizing: border-box;
  }

  .mobile-diamond-hud {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    min-width: 0;
  }

  .mobile-diamond-hud__icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    object-fit: contain;
    transform: translateY(2px);
  }

  .mobile-diamond-hud__value {
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.2px;
  }

  .mobile-diamond-hud__key-label {
    margin-left: 4px;
    font-size: 11px;
    letter-spacing: 0.5px;
    color: rgba(229, 245, 255, 0.82);
  }

  .mobile-diamond-hud__key-value {
    font-size: 14px;
    font-weight: 800;
    color: #f6d47d;
    letter-spacing: 0.2px;
  }

  .mobile-level-hud {
    display: grid;
    grid-template-columns: auto minmax(96px, 1fr);
    align-items: center;
    gap: 5px;
    width: 100%;
    min-width: 0;
    justify-self: end;
  }

  .mobile-level-hud__level {
    font-size: 10px;
    letter-spacing: 0.4px;
    color: rgba(229, 245, 255, 0.86);
    text-transform: uppercase;
  }

  .mobile-level-hud__track {
    height: 8px;
    border-radius: 999px;
    background: rgba(12, 18, 28, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.18);
    overflow: hidden;
  }

  .mobile-level-hud__fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #7af7c3, #56e3ff);
  }

  body > *:not(.mobile-intro-screen):not(.mobile-auth-gate):not(.mobile-splash-logo):not(.mobile-carousel-shell):not(.mobile-mid-box):not(.mobile-mid-box--top):not(.reveal):not(.page):not(.crate-list):not(.odds):not(.xpmodal):not(.card-preview):not(.purchase):not(.trade):not(.auth):not(.quests) {
    display: none !important;
    visibility: hidden !important;
  }

  body > #guessSong.active {
    display: flex !important;
    visibility: visible !important;
  }

  body > #quests.active {
    display: flex !important;
    visibility: visible !important;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  .mobile-carousel-shell::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  html,
  body,
  .mobile-carousel-shell {
    scrollbar-width: none !important;
  }

  .page {
    display: none !important;
    visibility: hidden !important;
  }

  .crate-list {
    display: none !important;
    visibility: hidden !important;
  }

  .mobile-mid-box {
    display: none !important;
    visibility: hidden !important;
  }

  .mobile-mid-box--top {
    display: none !important;
    visibility: hidden !important;
  }

  body.mobile-carousel-mode-spin .page {
    display: block !important;
    visibility: visible !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: calc(86px + var(--safe-top)) 16px calc(24px + var(--safe-bottom)) !important;
    gap: 0 !important;
    position: relative;
    z-index: 11;
    overflow: hidden !important;
  }

  body.mobile-carousel-mode-spin .page > * {
    display: none !important;
    visibility: hidden !important;
  }

  body.mobile-carousel-mode-spin .page .arena {
    display: flex !important;
    visibility: visible !important;
    width: 100% !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.mobile-carousel-mode-spin .page .crate-wrap {
    display: flex !important;
    visibility: visible !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    margin: 0 auto !important;
    width: min(100%, 340px) !important;
    border-radius: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  body.mobile-carousel-mode-spin .page .crate-label,
  body.mobile-carousel-mode-spin .page .glow,
  body.mobile-carousel-mode-spin .page #crate,
  body.mobile-carousel-mode-spin .page .open-row,
  body.mobile-carousel-mode-spin .page .open-row__secondary,
  body.mobile-carousel-mode-spin .page #autoPackageLockWrap,
  body.mobile-carousel-mode-spin .page .auto-package,
  body.mobile-carousel-mode-spin .page .crate-auto,
  body.mobile-carousel-mode-spin .page #crateAutoBtn,
  body.mobile-carousel-mode-spin .page .auto-toggle {
    display: flex !important;
    visibility: visible !important;
  }

  body.mobile-carousel-mode-spin .page #crate {
    display: grid !important;
    animation: vinyl-spin 3.6s linear infinite !important;
  }

  body.mobile-carousel-mode-spin .page .glow {
    display: none !important;
    opacity: 0 !important;
  }

  body.mobile-carousel-mode-spin .page .open-row {
    width: min(100%, 320px) !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  body.mobile-carousel-mode-spin .page .open-row__secondary {
    order: 1;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }

  body.mobile-carousel-mode-spin .page .open-row__primary {
    display: none !important;
    visibility: hidden !important;
  }

  body.mobile-carousel-mode-spin .page .open-row__primary::before,
  body.mobile-carousel-mode-spin .page .result {
    display: none !important;
    visibility: hidden !important;
  }

  body.mobile-carousel-mode-spin .page #openBtn {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    white-space: nowrap;
    box-shadow: none !important;
    text-shadow: none !important;
    font-family: var(--mobile-game-font);
    border-radius: 999px !important;
    border: 1px solid rgba(140, 255, 214, 0.82) !important;
    background: linear-gradient(180deg, #57d6a2 0%, #3fb68a 100%) !important;
    color: #081a14 !important;
    letter-spacing: 1.1px;
    padding: 12px 16px !important;
  }

  body.mobile-carousel-mode-spin .page #mobileSpinBtn.mobile-spin-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 112px !important;
    max-width: 100% !important;
    border-radius: 999px !important;
    border: 1px solid rgba(140, 255, 214, 0.82) !important;
    background: linear-gradient(180deg, #57d6a2 0%, #3fb68a 100%) !important;
    color: #081a14 !important;
    font-family: var(--mobile-game-font) !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    padding: 10px 16px !important;
  }

  body.mobile-carousel-mode-spin .page #oddsBtn {
    display: inline-flex !important;
    visibility: visible !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-shadow: none !important;
    text-shadow: none !important;
    font-family: var(--mobile-game-font);
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(9, 16, 30, 0.86);
  }

  body.mobile-carousel-mode-spin .page #crateAutoBtn,
  body.mobile-carousel-mode-spin .page .auto-toggle,
  body.mobile-carousel-mode-spin .page .crate-label,
  body.mobile-carousel-mode-spin .page .vinyl__logo {
    font-family: var(--mobile-game-font) !important;
    text-shadow: none !important;
  }

  body.mobile-carousel-mode-spin .page #crateAutoBtn {
    box-shadow: none !important;
    border-radius: 999px !important;
    border-color: rgba(151, 224, 255, 0.66) !important;
    background: linear-gradient(180deg, #8ccded 0%, #6db5da 100%) !important;
    color: #0f2734 !important;
    font-weight: 800 !important;
    padding-inline: 14px !important;
  }

  body.mobile-carousel-mode-spin .page .auto-toggle__track {
    background: rgba(9, 17, 30, 0.92);
    border-color: rgba(255, 255, 255, 0.22);
  }

  body.mobile-carousel-mode-spin .page .auto-toggle input:checked + .auto-toggle__track {
    background: rgba(102, 242, 182, 0.35);
  }

  body.mobile-carousel-mode-spin .page .crate-label {
    color: rgba(229, 245, 255, 0.86);
    letter-spacing: 1.2px;
  }

  /* Keep auto controls reliably visible on mobile spin when no blocking modal is open. */
  body.mobile-carousel-mode-spin:not(.ui-blocking-open) .page #autoPackageLockWrap,
  body.mobile-carousel-mode-spin:not(.ui-blocking-open) .page .auto-package,
  body.mobile-carousel-mode-spin:not(.ui-blocking-open) .page .crate-auto,
  body.mobile-carousel-mode-spin:not(.ui-blocking-open) .page #crateAutoBtn,
  body.mobile-carousel-mode-spin:not(.ui-blocking-open) .page .auto-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Keep level lock strict on mobile for autosell/autospin. */
  body.mobile-carousel-mode-spin .page #autoPackageLockWrap.is-locked .auto-package {
    pointer-events: none !important;
    opacity: 0.38 !important;
  }

  body.mobile-carousel-mode-spin .page #autoPackageLockWrap.is-locked #crateAutoBtn {
    background: rgba(28, 33, 42, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: rgba(228, 236, 246, 0.52) !important;
  }

  body.mobile-carousel-mode-spin .page #autoPackageLockWrap.is-locked .auto-toggle {
    opacity: 0.34 !important;
  }

  body.mobile-carousel-mode-spin .page #autoPackageLockWrap.is-locked .feature-lock-overlay.active {
    display: flex !important;
    z-index: 4 !important;
    pointer-events: auto !important;
    background: rgba(14, 18, 27, 0.78) !important;
    border-color: rgba(255, 137, 137, 0.5) !important;
    color: #ffdede !important;
    font-weight: 700 !important;
  }

  body.mobile-carousel-mode-spin .page .crate-label,
  body.mobile-carousel-mode-spin .page #crateLabel,
  body.mobile-carousel-mode-spin .crate-list .collection__title {
    font-family: var(--mobile-game-font) !important;
    font-weight: 700 !important;
  }

  body.mobile-carousel-mode-spin .page .crate-label-row {
    display: none !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  body.mobile-carousel-mode-spin .page .mobile-crate-odds {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(9, 16, 30, 0.86);
    color: #f1f4fb;
    font-family: var(--mobile-game-font);
    font-size: 14px;
    line-height: 1;
    padding: 0;
  }

  body.mobile-carousel-mode-spin .page #crate,
  body.mobile-carousel-mode-spin .page .vinyl,
  body.mobile-carousel-mode-spin .page .vinyl__logo {
    box-shadow: none !important;
    filter: none !important;
  }

  body.mobile-carousel-mode-spin .page .vinyl {
    background: radial-gradient(circle, #2a2f39 0%, #20242d 65%, #1b1f27 100%) !important;
  }

  body.mobile-carousel-mode-spin .page .vinyl::before {
    display: none !important;
  }

  body.mobile-carousel-mode-spin .page .vinyl__disc::after {
    opacity: 0.22 !important;
  }

  body.mobile-carousel-mode-spin .page #openBtn:hover,
  body.mobile-carousel-mode-spin .page #crateAutoBtn:hover,
  body.mobile-carousel-mode-spin .page #oddsBtn:hover {
    box-shadow: none !important;
  }

  body.mobile-carousel-mode-spin .crate-list {
    display: block !important;
    visibility: visible !important;
    position: fixed !important;
    left: 50% !important;
    top: min(calc(430px + var(--safe-top)), calc(100dvh - 186px - var(--safe-bottom))) !important;
    transform: translateX(-50%) !important;
    width: min(360px, calc(100vw - 24px)) !important;
    z-index: 12 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.mobile-carousel-mode-spin .crate-list .crate-carousel-stack {
    display: grid;
    gap: 8px;
  }

  body.mobile-carousel-mode-spin .crate-list .crate-carousel--featured,
  body.mobile-carousel-mode-spin .crate-list .crate-carousel__featured {
    display: none !important;
  }

  body.mobile-carousel-mode-spin .crate-list .crate-carousel {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    gap: 8px !important;
    align-items: center !important;
  }

  body.mobile-carousel-mode-spin .crate-list .crate-carousel__arrow {
    width: 42px !important;
    height: 42px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    background: rgba(9, 16, 30, 0.9) !important;
    font-size: 24px !important;
    line-height: 1 !important;
    padding: 0 !important;
  }

  body.mobile-carousel-mode-spin .crate-list .crate-picker__card {
    min-height: 78px !important;
    height: 78px !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto 58px !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 10px !important;
    background: rgba(12, 19, 30, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
  }

  body.mobile-carousel-mode-spin .crate-list .crate-picker__card.active {
    border-color: rgba(122, 247, 195, 0.7) !important;
    background: rgba(16, 30, 37, 0.95) !important;
  }

  body.mobile-carousel-mode-spin .crate-list .collection__meta {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    gap: 5px !important;
  }

  body.mobile-carousel-mode-spin .crate-list .collection__title {
    margin: 0 !important;
    font-size: 13px !important;
    letter-spacing: 0.9px !important;
    text-transform: uppercase !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.mobile-carousel-mode-spin .crate-list .collection__subtitle {
    display: block !important;
    margin: 0 !important;
    font-size: 11px !important;
    color: rgba(226, 234, 247, 0.74) !important;
    letter-spacing: 0.4px !important;
    text-align: left !important;
  }

  body.mobile-carousel-mode-spin .crate-list .crate-picker__odds {
    position: static !important;
    inset: auto !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    background: rgba(9, 16, 30, 0.82) !important;
    color: #f1f4fb !important;
    font-size: 14px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.mobile-carousel-mode-spin .crate-list .crate-picker__cover {
    display: grid !important;
    place-items: center !important;
    width: 58px !important;
    height: 58px !important;
    border-radius: 10px !important;
    background: rgba(5, 10, 18, 0.56) !important;
    margin: 0 !important;
  }

  body.mobile-carousel-mode-spin .crate-list .crate-picker__disc {
    width: 42px !important;
    height: 42px !important;
  }

  .mobile-carousel-shell {
    display: flex !important;
    visibility: visible !important;
    position: fixed;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    padding: calc(86px + var(--safe-top)) 12px calc(18px + var(--safe-bottom));
    box-sizing: border-box;
  }

  body.mobile-carousel-mode-spin .mobile-carousel-pages {
    visibility: hidden;
    pointer-events: none;
  }

  body.mobile-carousel-mode-marketplace .mobile-carousel-pages,
  body.mobile-carousel-mode-collection .mobile-carousel-pages,
  body.mobile-carousel-mode-profile .mobile-carousel-pages {
    visibility: visible;
    pointer-events: auto;
  }

  body.mobile-carousel-mode-marketplace .mobile-carousel-shell,
  body.mobile-carousel-mode-collection .mobile-carousel-shell,
  body.mobile-carousel-mode-profile .mobile-carousel-shell {
    pointer-events: auto;
  }

  .mobile-carousel-pages {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
  }

  .mobile-carousel-page {
    position: absolute;
    inset: 0;
    display: none;
    background: linear-gradient(180deg, #22252c 0%, #171a20 50%, #101218 100%);
    border-radius: 14px;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
  }

  .mobile-carousel-page.is-active {
    display: block;
  }

  .mobile-market-page {
    overflow-y: auto;
    scrollbar-width: none;
  }

  .mobile-market-page::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .mobile-profile-page {
    overflow-y: auto;
    scrollbar-width: none;
  }

  .mobile-collection-page {
    overflow-y: auto;
    scrollbar-width: none;
  }

  .mobile-profile-page::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .mobile-collection-page::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .mobile-profile-header {
    display: grid;
    gap: 4px;
    width: 100%;
    margin: 0;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(10, 16, 26, 0.86);
    box-sizing: border-box;
  }

  .mobile-profile-header__label {
    margin: 0;
    color: rgba(221, 234, 247, 0.68);
    font-family: var(--mobile-game-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  .mobile-profile-header__name {
    margin: 0;
    color: #ffffff;
    font-family: var(--mobile-game-font);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.15;
    word-break: break-word;
  }

  .mobile-profile-favorite {
    display: grid;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(10, 16, 26, 0.86);
    box-sizing: border-box;
  }

  .mobile-profile-favorite__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
  }

  .mobile-profile-favorite__label {
    margin: 0;
    color: rgba(221, 234, 247, 0.68);
    font-family: var(--mobile-game-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  .mobile-profile-favorite__btn {
    min-height: 32px;
    border-radius: 10px;
    border: 1px solid rgba(151, 224, 255, 0.62);
    background: linear-gradient(180deg, #8ccded 0%, #6db5da 100%);
    color: #0f2734;
    font-family: var(--mobile-game-font);
    font-size: 11px;
    font-weight: 800;
    padding: 0 10px;
  }

  .mobile-profile-favorite__value {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    color: #ffffff;
    font-family: var(--mobile-game-font);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-profile-favorite__value .genre-badge {
    margin: 0 !important;
  }

  .mobile-profile-showcase {
    display: grid;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(10, 16, 26, 0.86);
    box-sizing: border-box;
  }

  .mobile-profile-showcase__label {
    margin: 0;
    color: rgba(221, 234, 247, 0.68);
    font-family: var(--mobile-game-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  .mobile-profile-showcase__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .mobile-profile-showcase__card {
    min-height: 0 !important;
  }

  .mobile-profile-showcase__card.shiny-card::before,
  .mobile-profile-showcase__card.shiny-card::after {
    opacity: 0.85 !important;
    display: block !important;
  }

  .mobile-profile-showcase__card.shiny--common::after {
    box-shadow: 0 0 18px rgba(233, 237, 244, 0.56) !important;
  }

  .mobile-profile-showcase__card.shiny--rare::after {
    box-shadow: 0 0 18px rgba(113, 196, 255, 0.58) !important;
  }

  .mobile-profile-showcase__card.shiny--epic::after {
    box-shadow: 0 0 18px rgba(255, 127, 212, 0.6) !important;
  }

  .mobile-profile-showcase__card.shiny--legendary::after {
    box-shadow: 0 0 20px rgba(255, 179, 107, 0.62) !important;
  }

  .mobile-profile-showcase__placeholder {
    min-height: 72px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(11, 18, 28, 0.82);
    display: grid;
    place-items: center;
    color: rgba(221, 234, 247, 0.65);
    font-family: var(--mobile-game-font);
    font-size: 11px;
    font-weight: 700;
  }

  .mobile-profile-collection {
    display: grid;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(10, 16, 26, 0.86);
    box-sizing: border-box;
  }

  .mobile-profile-collection__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
  }

  .mobile-profile-collection__actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .mobile-profile-collection__label {
    margin: 0;
    color: rgba(221, 234, 247, 0.68);
    font-family: var(--mobile-game-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  #mobileProfileCollectionFilters {
    margin: 0;
  }

  #mobileProfileCollectionList {
    max-height: 330px;
    min-height: 80px;
  }

  .mobile-profile-collection.is-collapsed #mobileProfileCollectionFilters,
  .mobile-profile-collection.is-collapsed #mobileProfileCollectionList {
    display: none !important;
  }

  .mobile-market-card.is-sell-selected {
    outline: 2px solid rgba(122, 247, 195, 0.95);
    outline-offset: -2px;
    background: rgba(22, 40, 36, 0.95);
  }

  .mobile-profile-logout {
    margin-top: 8px;
    min-height: 36px;
    border-radius: 12px;
    border: 1px solid rgba(255, 120, 120, 0.46);
    background: linear-gradient(180deg, #e95f5f 0%, #c63f3f 100%);
    color: #ffffff;
    font-family: var(--mobile-game-font);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    width: 100%;
  }

  .mobile-market-tools {
    display: grid;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(10, 16, 26, 0.86);
    box-sizing: border-box;
  }

  .mobile-market-tools__body {
    display: grid;
    gap: 8px;
  }

  .mobile-market-tools.is-collapsed .mobile-market-tools__body {
    display: none;
  }

  .mobile-market-tools input,
  .mobile-market-tools select,
  .mobile-market-tools button {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(13, 21, 33, 0.92);
    color: #eef5ff;
    font-family: var(--mobile-game-font);
    font-size: 12px;
    font-weight: 700;
    padding: 9px 10px;
  }

  .mobile-market-tools select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 28px;
    background-image:
      linear-gradient(45deg, transparent 50%, rgba(238, 245, 255, 0.82) 50%),
      linear-gradient(135deg, rgba(238, 245, 255, 0.82) 50%, transparent 50%);
    background-position:
      calc(100% - 14px) calc(50% - 2px),
      calc(100% - 9px) calc(50% - 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
  }

  .mobile-custom-sort {
    position: relative;
    width: 100%;
  }

  .mobile-custom-sort__trigger {
    width: 100%;
    min-height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(13, 21, 33, 0.92);
    color: #eef5ff;
    font-family: var(--mobile-game-font);
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    padding: 9px 28px 9px 10px;
    position: relative;
  }

  .mobile-custom-sort__trigger::before,
  .mobile-custom-sort__trigger::after {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    top: calc(50% - 2px);
    pointer-events: none;
  }

  .mobile-custom-sort__trigger::before {
    right: 14px;
    border-left: 5px solid transparent;
    border-right: 0 solid transparent;
    border-top: 5px solid rgba(238, 245, 255, 0.82);
    transform: skewX(-25deg);
  }

  .mobile-custom-sort__trigger::after {
    right: 9px;
    border-right: 5px solid transparent;
    border-left: 0 solid transparent;
    border-top: 5px solid rgba(238, 245, 255, 0.82);
    transform: skewX(25deg);
  }

  .mobile-custom-sort__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(10, 16, 26, 0.98);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
    display: none;
    z-index: 12;
    overflow: hidden;
  }

  .mobile-custom-sort.is-open .mobile-custom-sort__menu {
    display: grid;
  }

  .mobile-custom-sort__option {
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    color: #eef5ff;
    font-family: var(--mobile-game-font);
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    padding: 10px;
  }

  .mobile-custom-sort__option:last-child {
    border-bottom: 0;
  }

  .mobile-custom-sort__option.is-active {
    background: rgba(24, 40, 52, 0.86);
    color: #d2ffe8;
  }

  .mobile-custom-select {
    position: relative;
    width: 100%;
  }

  .mobile-custom-select__trigger {
    width: 100%;
    min-height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(13, 21, 33, 0.92);
    color: #eef5ff;
    font-family: var(--mobile-game-font);
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    padding: 9px 28px 9px 10px;
    position: relative;
  }

  .mobile-custom-select__trigger::before,
  .mobile-custom-select__trigger::after {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    top: calc(50% - 2px);
    pointer-events: none;
  }

  .mobile-custom-select__trigger::before {
    right: 14px;
    border-left: 5px solid transparent;
    border-right: 0 solid transparent;
    border-top: 5px solid rgba(238, 245, 255, 0.82);
    transform: skewX(-25deg);
  }

  .mobile-custom-select__trigger::after {
    right: 9px;
    border-right: 5px solid transparent;
    border-left: 0 solid transparent;
    border-top: 5px solid rgba(238, 245, 255, 0.82);
    transform: skewX(25deg);
  }

  .mobile-custom-select__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(10, 16, 26, 0.98);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
    display: none;
    z-index: 12;
    overflow: hidden;
  }

  .mobile-custom-select.is-open .mobile-custom-select__menu {
    display: grid;
  }

  .mobile-custom-select__option {
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    color: #eef5ff;
    font-family: var(--mobile-game-font);
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    padding: 10px;
  }

  .mobile-custom-select__option:last-child {
    border-bottom: 0;
  }

  .mobile-custom-select__option.is-active {
    background: rgba(24, 40, 52, 0.86);
    color: #d2ffe8;
  }

  .mobile-market-tools input::placeholder {
    color: rgba(221, 234, 247, 0.6);
  }

  .mobile-market-tools__user {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
  }

  .mobile-market-tools__user button {
    width: auto;
    min-width: 72px;
    background: linear-gradient(180deg, #8ccded 0%, #6db5da 100%);
    color: #0f2734;
    border-color: rgba(151, 224, 255, 0.66);
  }

  .mobile-market-tools__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
  }

  .mobile-market-tools__check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    min-height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(13, 21, 33, 0.92);
    color: #eef5ff;
    font-family: var(--mobile-game-font);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
  }

  .mobile-market-tools__check input {
    width: 14px;
    height: 14px;
    margin: 0;
    padding: 0;
    accent-color: #71c4ff;
  }

  .mobile-market-list {
    display: grid;
    gap: 8px;
    margin-top: 8px;
    padding-bottom: 6px;
  }

  .mobile-market-inventory {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    gap: 8px;
    border-radius: 14px;
    background: linear-gradient(180deg, #22252c 0%, #171a20 50%, #101218 100%);
    z-index: 6;
    padding: 8px;
    box-sizing: border-box;
  }

  .mobile-market-inventory.active {
    display: flex;
  }

  .mobile-market-inventory__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(10, 16, 26, 0.86);
  }

  .mobile-market-inventory__header h3 {
    margin: 0;
    color: #ffffff;
    font-family: var(--mobile-game-font);
    font-size: 14px;
    font-weight: 800;
  }

  .mobile-market-inventory__header-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .mobile-market-inventory__close {
    min-height: 30px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(13, 21, 33, 0.92);
    color: #eef5ff;
    font-family: var(--mobile-game-font);
    font-size: 11px;
    font-weight: 800;
    padding: 0 10px;
  }

  .mobile-market-tools--inventory {
    margin: 0;
  }

  .mobile-market-list--inventory {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 0;
    overflow-y: auto;
    min-height: 0;
    flex: 1 1 auto;
    padding-bottom: 8px;
    scrollbar-width: none;
  }

  .mobile-market-list--inventory::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .mobile-market-list--inventory .mobile-market-card {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    content-visibility: auto;
    contain-intrinsic-size: 120px;
  }

  .mobile-market-card__btn--count {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(14, 22, 34, 0.9);
    color: #eef5ff;
    pointer-events: none;
  }

  .mobile-market-card {
    background: rgba(19, 24, 33, 0.96);
    border: 2px solid var(--mobile-market-outline, rgba(255, 255, 255, 0.24));
    border-radius: 12px;
    padding: 8px;
    display: grid;
    gap: 8px;
    position: relative;
    overflow: hidden;
  }

  .mobile-market-card.shiny-card::before,
  .mobile-market-card.shiny-card::after {
    content: "";
    position: absolute;
    inset: -8px;
    pointer-events: none;
    border-radius: 14px;
  }

  .mobile-market-card.shiny-card::before {
    border: 1px solid rgba(255, 255, 255, 0.55);
    opacity: 0.72;
  }

  .mobile-market-card.shiny-card::after {
    box-shadow: 0 0 22px rgba(122, 247, 195, 0.45);
    opacity: 0.66;
  }

  .mobile-market-card.shiny--common::after {
    box-shadow: 0 0 22px rgba(233, 237, 244, 0.45);
  }

  .mobile-market-card.shiny--rare::after {
    box-shadow: 0 0 22px rgba(113, 196, 255, 0.48);
  }

  .mobile-market-card.shiny--epic::after {
    box-shadow: 0 0 22px rgba(255, 127, 212, 0.5);
  }

  .mobile-market-card.shiny--legendary::after {
    box-shadow: 0 0 24px rgba(255, 179, 107, 0.54);
  }

  .mobile-market-card__top {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
  }

  .mobile-market-card__cover {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(7, 10, 16, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.12);
  }

  .mobile-market-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .mobile-market-card__main {
    min-width: 0;
    display: grid;
    gap: 4px;
  }

  .mobile-market-card__title {
    color: #ffffff;
    font-family: var(--mobile-game-font);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-market-card__subtitle {
    color: rgba(229, 239, 250, 0.82);
    font-family: var(--mobile-game-font);
    font-size: 11px;
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .mobile-market-card__badge {
    width: fit-content;
    max-width: 100%;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.42), rgba(34, 197, 94, 0.36));
    color: #ffffff;
    font-family: var(--mobile-game-font);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 3px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-market-card__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }

  .mobile-market-card__btn {
    min-width: 52px;
    min-height: 30px;
    border-radius: 9px;
    border: 1px solid rgba(122, 247, 195, 0.58);
    background: linear-gradient(180deg, #57d6a2 0%, #3fb68a 100%);
    color: #081a14;
    font-family: var(--mobile-game-font);
    font-size: 11px;
    font-weight: 800;
    padding: 0 8px;
  }

  .mobile-market-card__btn--ghost {
    border-color: rgba(151, 224, 255, 0.62);
    background: linear-gradient(180deg, #8ccded 0%, #6db5da 100%);
    color: #0f2734;
  }

  .mobile-market-card__btn--seller,
  .mobile-market-card__btn--price {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(14, 22, 34, 0.9);
    color: #eef5ff;
  }

  .mobile-market-tools__toggle {
    width: 100%;
    min-height: 30px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(13, 21, 33, 0.92);
    color: #eef5ff;
    font-family: var(--mobile-game-font);
    font-size: 12px;
    letter-spacing: 0.8px;
    line-height: 1.1;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
  }

  .mobile-carousel-nav {
    width: min(100%, 420px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 31;
    pointer-events: auto;
    padding: 8px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(12, 16, 24, 0.94);
  }

  .mobile-carousel-nav__tab {
    min-height: 52px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(20, 26, 36, 0.9);
    color: #f1f4fb;
    font-family: var(--mobile-game-font);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    padding: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
  }

  .mobile-carousel-nav__tab.is-active {
    border-color: rgba(122, 247, 195, 0.62);
    background: rgba(17, 37, 42, 0.95);
    color: #d2ffe8;
  }

  .mobile-carousel-nav__icon {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.9;
  }

  .mobile-carousel-nav__tab.is-active .mobile-carousel-nav__icon {
    opacity: 1;
  }

  .mobile-carousel-nav__label {
    display: none;
    font-family: var(--mobile-game-font);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.4px;
    line-height: 1;
  }

  .mobile-carousel-nav__icon--spin {
    animation: mobile-spin-icon-rotate 2s linear infinite;
  }

  @keyframes mobile-spin-icon-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .mobile-market-top-actions {
    display: none;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: calc(58px + var(--safe-top));
    z-index: 33;
    gap: 8px;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  .mobile-market-list-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(120px, 36vw);
    min-height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(122, 247, 195, 0.62);
    background: linear-gradient(180deg, #57d6a2 0%, #3fb68a 100%);
    color: #081a14;
    font-family: var(--mobile-game-font);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    pointer-events: auto;
  }

  .mobile-market-list-btn--offers {
    border-color: rgba(151, 224, 255, 0.62);
    background: linear-gradient(180deg, #8ccded 0%, #6db5da 100%);
    color: #0f2734;
  }

  body.mobile-carousel-mode-marketplace .mobile-market-top-actions {
    display: inline-flex;
  }

  body.mobile-carousel-mode-marketplace.mobile-inventory-open .mobile-market-top-actions {
    display: none;
  }

  .mobile-collection-sell-action {
    display: none;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(76px + var(--safe-bottom));
    z-index: 33;
    pointer-events: none;
  }

  .mobile-collection-sell-action.is-active {
    display: inline-flex;
  }

  .mobile-collection-sell-action__btn {
    min-width: 160px;
    min-height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(122, 247, 195, 0.72);
    background: linear-gradient(180deg, #61ddaa 0%, #44bf8f 100%);
    color: #081a14;
    font-family: var(--mobile-game-font);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 0 14px;
    pointer-events: auto;
  }

  .mobile-collection-sell-action__btn:disabled {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(13, 21, 33, 0.9);
    color: rgba(238, 245, 255, 0.72);
  }

  .reveal,
  .reveal.active {
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
  }

  .reveal__stage {
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
  }

  .reveal__backdrop {
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    background: radial-gradient(circle at 50% 40%, rgba(14, 22, 36, 0.92), rgba(6, 8, 12, 0.99)) !important;
  }

  .reveal .vinyl,
  .reveal .vinyl__logo {
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
    font-family: var(--mobile-game-font) !important;
  }

  .reveal .vinyl {
    background: radial-gradient(circle, #2a2f39 0%, #20242d 65%, #1b1f27 100%) !important;
  }

  .reveal .vinyl::before,
  .reveal .vinyl__shine {
    display: none !important;
  }

  .reveal .vinyl__disc::after {
    opacity: 0.22 !important;
  }

  .reveal__respin,
  .reveal__respin:hover {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .reveal .reveal__info,
  .card-preview__card {
    width: min(74vw, 268px) !important;
    max-width: 268px !important;
    min-height: min(74vw, 268px) !important;
    border-radius: 22px !important;
    padding: 12px 12px 10px !important;
    background: transparent !important;
    border: 2px solid var(--mobile-card-outline, rgba(255, 255, 255, 0.22)) !important;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.42) !important;
    text-align: left !important;
    align-items: stretch !important;
    gap: 6px !important;
    position: relative;
    overflow: hidden;
  }

  .reveal.active .reveal__info {
    top: calc(50% - 44px) !important;
  }

  .reveal .reveal__info::before,
  .card-preview__card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(10, 14, 22, 0.36) 100%);
    pointer-events: none;
  }

  .reveal .reveal__info::after,
  .card-preview__card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--mobile-card-rarity-color, #2a3140);
    opacity: 1;
    pointer-events: none;
    z-index: 0;
  }

  .reveal .reveal__info > *,
  .card-preview__card > * {
    position: relative;
    z-index: 2;
  }

  .reveal .reveal__info .cover,
  .card-preview__card .cover {
    order: 1;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    border-radius: 14px !important;
    overflow: hidden;
  }

  .reveal .reveal__info .genre-badge--reveal,
  .card-preview__card .genre-badge--preview {
    order: 2;
    align-self: flex-start !important;
    margin-top: 0 !important;
    margin-bottom: 2px !important;
    margin-left: 0 !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.42), rgba(34, 197, 94, 0.36)) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    border-radius: 999px !important;
    padding: 3px 8px !important;
    font-size: 10px !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
  }

  .reveal .reveal__info .reveal__rarity,
  .card-preview__card .reveal__rarity {
    order: 3;
    width: fit-content !important;
    max-width: 100% !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    padding: 3px 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.42), rgba(34, 197, 94, 0.36)) !important;
    font-size: 11px !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    color: var(--preview-rarity-color, #ffffff) !important;
    font-weight: 800 !important;
  }

  .reveal .reveal__info .reveal__rarity {
    order: 2;
  }

  .card-preview__card .reveal__rarity {
    order: 2;
  }

  .reveal .reveal__info[data-combined-badge="true"] .reveal__rarity,
  .card-preview__card[data-combined-badge="true"] .reveal__rarity {
    display: none !important;
  }

  .reveal .reveal__info.top100-tier-card,
  .reveal .reveal__info.top500-tier-card,
  .card-preview__card.top100-tier-card,
  .card-preview__card.top500-tier-card {
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.42) !important;
    border-color: var(--mobile-card-outline, rgba(255, 255, 255, 0.22)) !important;
    filter: none !important;
  }

  .reveal .reveal__info .reveal__track,
  .card-preview__card .reveal__track {
    order: 4;
    width: 100%;
    text-align: left !important;
    font-size: 17px !important;
    line-height: 1.12;
    color: #ffffff !important;
    font-weight: 800 !important;
  }

  .reveal .reveal__info .reveal__artist,
  .card-preview__card .reveal__artist {
    order: 5;
    width: 100%;
    text-align: left !important;
    font-size: 12px !important;
    color: #ffffff !important;
    font-weight: 800 !important;
  }

  .reveal .reveal__info[data-mobile-rarity="common"] .genre-badge--reveal,
  .card-preview__card[data-mobile-rarity="common"] .genre-badge--preview,
  .reveal .reveal__info[data-mobile-rarity="common"] .reveal__rarity,
  .card-preview__card[data-mobile-rarity="common"] .reveal__rarity,
  .reveal .reveal__info[data-mobile-rarity="common"] .reveal__track,
  .card-preview__card[data-mobile-rarity="common"] .reveal__track,
  .reveal .reveal__info[data-mobile-rarity="common"] .reveal__artist,
  .card-preview__card[data-mobile-rarity="common"] .reveal__artist {
    color: #ffffff !important;
    font-weight: 800 !important;
  }

  .card-preview__card[data-mobile-rarity="common"] .reveal__rarity {
    color: var(--preview-rarity-color, #ffffff) !important;
  }

  .reveal .reveal__info .reveal__preview,
  .card-preview__card .card-preview__audio {
    order: 6;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 4px !important;
    padding: 6px 8px !important;
    border-radius: 12px !important;
    background: rgba(10, 15, 24, 0.34) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
  }

  .card-preview__card .card-preview__apple {
    order: 7;
  }

  .reveal__info #revealSource {
    order: 7;
    align-self: flex-start;
    margin-top: 6px;
  }

  .card-preview.active .card-preview__apple {
    position: fixed !important;
    left: 12px !important;
    bottom: calc(12px + var(--safe-bottom)) !important;
    top: auto !important;
    right: auto !important;
    margin: 0 !important;
    z-index: 122 !important;
  }

  .reveal .reveal__info .reveal__actions,
  .card-preview__card .card-preview__close {
    order: 8;
  }

  .reveal .preview-controls,
  .card-preview__card .preview-controls {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    gap: 14px !important;
  }

  .reveal .preview-btn,
  .card-preview__card .preview-btn {
    background: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.96) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    color: #0b1220 !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }

  .reveal .preview-btn--play,
  .card-preview__card .preview-btn--play {
    background: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.96) !important;
    border-radius: 999px !important;
    color: #0b1220 !important;
    width: 32px !important;
    height: 32px !important;
  }

  .preview-btn .preview-icon {
    width: 22px;
    height: 22px;
    display: block;
    fill: currentColor;
    pointer-events: none;
  }

  .reveal .reveal__close,
  .card-preview__card .card-preview__close {
    background: linear-gradient(180deg, #e95f5f 0%, #c63f3f 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }

  .reveal .reveal__autospin {
    position: fixed !important;
    left: 50% !important;
    top: calc(50% + 142px) !important;
    transform: translateX(-50%) !important;
    background: linear-gradient(180deg, #7fe6b8 0%, #63d39f 100%) !important;
    border: 1px solid rgba(194, 255, 228, 0.92) !important;
    color: #0f2c22 !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    letter-spacing: 0.4px !important;
    padding: 10px 14px !important;
    min-height: 38px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    white-space: nowrap !important;
    z-index: 121 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  @keyframes mobile-crate-bob {
    0%,
    100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }

  body.mobile-carousel-mode-spin .crate-list {
    display: none !important;
    visibility: hidden !important;
  }

  body.mobile-carousel-mode-spin .mobile-mid-box {
    display: grid !important;
    visibility: visible !important;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(84px + var(--safe-bottom));
    width: min(360px, calc(100vw - 20px));
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 10px;
    z-index: 26;
  }

  body.mobile-carousel-mode-spin .mobile-mid-box--top {
    display: grid !important;
    visibility: visible !important;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(152px + var(--safe-bottom));
    width: min(360px, calc(100vw - 20px));
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 10px;
    z-index: 26;
  }

  body.mobile-carousel-mode-spin .mobile-mid-box__panel {
    height: 56px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(13, 18, 27, 0.86);
    transition: border-color 0.18s ease, background 0.18s ease;
  }

  body.mobile-carousel-mode-spin .mobile-mid-box__panel--top,
  body.mobile-carousel-mode-spin .mobile-mid-box__panel--bottom {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    justify-content: stretch;
    padding-left: 10px;
    padding-right: 8px;
    gap: 10px;
  }

  body.mobile-carousel-mode-spin .mobile-mid-box__panel.is-active {
    border-color: rgba(122, 247, 195, 0.62);
    background: rgba(17, 37, 42, 0.95);
  }

  body.mobile-carousel-mode-spin .mobile-mid-box__disc {
    width: 38px;
    height: 38px;
    animation: vinyl-spin 5.8s linear infinite;
  }

  body.mobile-carousel-mode-spin .mobile-mid-box__meta {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  body.mobile-carousel-mode-spin .mobile-mid-box__title {
    font-family: var(--mobile-game-font);
    font-size: 12px;
    font-weight: 800;
    color: #f1f4fb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.mobile-carousel-mode-spin .mobile-mid-box__price {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--mobile-game-font);
    font-size: 11px;
    color: #74bee5;
    white-space: nowrap;
  }

  body.mobile-carousel-mode-spin .mobile-mid-box__price-icon {
    width: 11px;
    height: 11px;
    display: inline-block;
    object-fit: contain;
    transform: translateY(1px);
  }

  body.mobile-carousel-mode-spin .mobile-mid-box__price-value {
    color: #ffffff;
    font-weight: 800;
  }

  body.mobile-carousel-mode-spin .mobile-mid-box__odds {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(9, 16, 30, 0.86);
    color: #f1f4fb;
    font-family: var(--mobile-game-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  body.mobile-carousel-mode-spin .mobile-mid-box__arrow {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(9, 16, 30, 0.9);
    color: #f1f4fb;
    font-size: 24px;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mobile-game-font);
  }

  .collection__card,
  .collection__card * {
    font-family: var(--mobile-game-font) !important;
  }

  .reveal__close,
  .reveal__sell,
  .reveal__respin {
    font-family: var(--mobile-game-font) !important;
    font-weight: 800 !important;
  }

  .odds.active {
    display: flex !important;
    z-index: 120 !important;
  }

  .odds__panel {
    width: min(380px, calc(100vw - 18px)) !important;
    max-height: calc(100dvh - 26px - var(--safe-top) - var(--safe-bottom)) !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    background: rgba(18, 24, 34, 0.96) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42) !important;
    padding: 12px !important;
  }

  .odds__header h3 {
    font-family: var(--mobile-game-font);
    font-size: 16px !important;
    letter-spacing: 0.3px;
  }

  .odds__list {
    gap: 8px !important;
    padding-right: 2px !important;
  }

  .odds__list li {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    background: rgba(10, 14, 22, 0.82);
    padding: 10px 12px !important;
    font-family: var(--mobile-game-font);
    font-size: 13px !important;
  }

  .odds__list li span:last-child {
    color: #8fd5f5;
    font-weight: 800;
  }

  .purchase__panel {
    width: min(348px, calc(100vw - 20px)) !important;
    max-width: 348px !important;
    max-height: min(78dvh, 620px) !important;
    padding: 12px !important;
    gap: 12px !important;
    overflow: auto !important;
    border-radius: 14px !important;
  }

  .purchase__header {
    display: none !important;
  }

  .purchase__header h3,
  #purchaseTitle,
  #purchaseCancel,
  #purchaseConfirmBtn {
    font-family: var(--mobile-game-font) !important;
  }

  .purchase__header h3 {
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  .purchase__body {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: center !important;
  }

  .purchase__cover {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: center !important;
  }

  .purchase__cover .purchase__preview-card {
    width: min(74vw, 268px) !important;
    max-width: 268px !important;
    min-height: min(74vw, 268px) !important;
  }

  #purchaseTitle {
    display: none !important;
  }

  .purchase__meta {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  .purchase__cost {
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-align: center !important;
  }

  .purchase__actions {
    gap: 8px !important;
    justify-content: center !important;
    width: 100% !important;
  }

  #purchaseCancel,
  #purchaseConfirmBtn {
    min-height: 36px !important;
    padding: 8px 16px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    min-width: 104px !important;
  }
}

@media (max-width: 900px) {
  body {
    background: #0b0d11 !important;
  }

  body > * {
    display: none !important;
  }

  body::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 72px;
    background: #1f2937;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 9999;
    pointer-events: none;
  }
}

.reveal__info,
.card-preview__card {
  isolation: isolate;
  overflow: visible !important;
}

.preview-waveform {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(760px, 180vw);
  height: min(360px, 86vh);
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  display: block;
  transition: opacity 0.18s ease;
}

.preview-waveform.active {
  opacity: 0.82;
}

.preview-waveform__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

.preview-waveform__line {
  fill: none;
  stroke: rgba(194, 199, 210, 0.94);
  stroke-width: 18;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 16px rgba(205, 211, 222, 0.32));
  transition: d 65ms linear;
}

.preview-waveform.is-fallback .preview-waveform__line {
  animation: preview-wave-fallback 0.82s ease-in-out infinite alternate;
}

@keyframes preview-wave-fallback {
  from {
    transform: scaleY(0.88);
    transform-origin: center;
  }
  to {
    transform: scaleY(1.08);
    transform-origin: center;
  }
}

.preview-controls,
.reveal .preview-controls,
.card-preview__card .preview-controls {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.preview-btn,
.preview-btn--play,
.reveal .preview-btn,
.reveal .preview-btn--play,
.card-preview__card .preview-btn,
.card-preview__card .preview-btn--play {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.26) !important;
  color: #f8fafc !important;
  box-shadow: none !important;
}

.preview-btn:hover,
.preview-btn--play:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
}