/* Vision: Minimalist Blue-Black Arena. Clean two-tone blue palette with white and black only. */

:root {
  /* New minimalist palette: 2 blues + white + black */
  --color-paper: #ffffff;
  --color-ink: #ffffff;
  --color-muted: rgba(255, 255, 255, 0.55);
  --color-dim: rgba(255, 255, 255, 0.35);
  --color-page: #050505;
  --color-panel: #0a0a0c;
  --color-panel-2: #101012;
  --color-line: rgba(255, 255, 255, 0.08);
  --color-line-strong: rgba(255, 255, 255, 0.16);
  --color-primary: #0A84FF;
  --color-primary-ink: #ffffff;
  --color-blue: #0A84FF;
  --color-blue-light: #5AB8FF;
  --color-red: #0A84FF;
  --color-gold: #5AB8FF;
  --color-green: #0A84FF;
  --color-warning: #5AB8FF;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-brand: "Bagel Fat One", "Geologica", sans-serif;
  --font-uni: "Uni Sans", "Uni Sans Heavy", "Uni Sans Demo", "Geologica", sans-serif;
  --font-body: "Geologica", "Trebuchet MS", sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 42px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --shadow-soft: 0 18px 50px rgba(0, 0, 0, 0.32), 0 2px 10px rgba(0, 0, 0, 0.2);
  --shadow-accent: 0 10px 32px rgba(10, 132, 255, 0.22), 0 1px 0 rgba(255, 255, 255, 0.14) inset;
}

/* v223: repair added mobile pages and keep the final overrides last. */
@media (max-width: 820px) {
  body.app-body .tab {
    padding-top: 22px !important;
  }

  body.app-body .tab-home {
    padding-top: 0 !important;
  }

  body.app-body .tab-leagues,
  body.app-body .tab-tasks,
  body.app-body .tab-roulette,
  body.app-body .tab-forum,
  body.app-body .tab-staking,
  body.app-body .tab-ai,
  body.app-body .tab-profile {
    min-height: calc(100dvh - 220px) !important;
  }

  body.app-body .tab-refs,
  body.app-body [data-nav-drawer] [data-tab="refs"],
  body.app-body .command-row[data-target="refs"],
  body.app-body .command-row[data-tab="refs"],
  body.app-body .app-bnav [data-tab="refs"] {
    display: none !important;
  }

  html body.app-body > nav.app-bnav.app-bnav.app-bnav {
    grid-template-columns: repeat(6, 1fr) !important;
    align-items: center !important;
    justify-items: center !important;
    padding: 7px !important;
    gap: 7px !important;
    overflow: hidden !important;
  }

  html body.app-body > nav.app-bnav.app-bnav.app-bnav::before {
    width: 54px !important;
    height: 54px !important;
    top: 7px !important;
    left: calc(7px + var(--nav-index, 0) * ((100% - 14px) / 6)) !important;
    transform: translateX(calc((((100% - 14px) / 6) - 54px) / 2)) !important;
    border-radius: 999px !important;
    transition: left 460ms cubic-bezier(.16, 1, .3, 1), transform 460ms cubic-bezier(.16, 1, .3, 1) !important;
  }

  body.app-body .league-view-toggle,
  body.app-body .shop-choice-tabs,
  body.app-body .task-tabs,
  body.app-body .forum-tabs,
  body.app-body .staking-periods {
    height: 54px !important;
    margin: 0 0 22px !important;
    padding: 5px !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), rgba(0,0,0,.72) !important;
    box-shadow: 0 14px 26px rgba(0,0,0,.32) !important;
  }

  body.app-body .league-view-toggle button,
  body.app-body .shop-choice-tabs button,
  body.app-body .task-tabs button,
  body.app-body .forum-tabs button,
  body.app-body .staking-periods button {
    height: 44px !important;
    min-height: 44px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: rgba(247,247,242,.55) !important;
    box-shadow: none !important;
    font: 900 13px/1 "Montserrat", sans-serif !important;
  }

  body.app-body .league-view-toggle button.is-active,
  body.app-body .shop-choice-tabs button.is-active,
  body.app-body .task-tabs button.is-active,
  body.app-body .forum-tabs button.is-active,
  body.app-body .staking-periods button.is-active,
  body.app-body .staking-periods button[aria-pressed="true"] {
    background: var(--mt-ink) !important;
    color: var(--mt-black) !important;
  }

  body.app-body .tab-leagues .section-h,
  body.app-body .tasks-hero h1,
  body.app-body .forum-title,
  body.app-body .staking-title,
  body.app-body .profile-name {
    color: var(--mt-ink) !important;
    text-shadow: 0 10px 18px rgba(0,0,0,.42) !important;
  }

  body.app-body .tab-leagues .section-row,
  body.app-body .league-map > .section-row {
    margin: 0 0 14px !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  body.app-body .league-map,
  body.app-body .league-stack-section {
    padding-top: 0 !important;
  }

  body.app-body .mt-bracket-map {
    max-height: none !important;
  }

  html body.app-body .mt-bracket-map {
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "logo logo"
      "ql qr"
      "left right"
      "semi semi"
      "final final"
      "levels levels" !important;
    padding: 16px 12px 18px !important;
    gap: 10px !important;
  }

  html body.app-body .br-logo {
    min-height: 44px !important;
    margin-bottom: 2px !important;
    font-size: 28px !important;
    line-height: .9 !important;
  }

  html body.app-body .br-logo span {
    display: inline !important;
  }

  html body.app-body .br-quarter-label {
    font-size: 12px !important;
  }

  html body.app-body .br-slot,
  html body.app-body .br-semi,
  html body.app-body .br-final button {
    min-height: 48px !important;
    padding: 8px !important;
    border-radius: 15px !important;
  }

  html body.app-body .br-side {
    gap: 7px !important;
  }

  html body.app-body .br-mid-left {
    gap: 7px !important;
  }

  html body.app-body .br-num {
    width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
  }

  html body.app-body .br-slot strong,
  html body.app-body .br-semi strong,
  html body.app-body .br-final strong {
    font-size: 12px !important;
  }

  body.app-body .staking-head,
  body.app-body .staking-shell header,
  body.app-body .forum-head,
  body.app-body .forum-shell header {
    display: block !important;
    margin: 0 0 14px !important;
  }

  body.app-body .staking-title,
  body.app-body .staking-shell h1,
  body.app-body .forum-title,
  body.app-body .forum-shell h1 {
    display: block !important;
    margin: 0 0 10px !important;
    font: 950 clamp(34px, 10vw, 48px)/.92 "Montserrat", sans-serif !important;
    letter-spacing: -.03em !important;
  }

  body.app-body .stake-ca {
    margin: 0 0 10px !important;
  }

  body.app-body .staking-shell form,
  body.app-body .stake-form {
    display: grid !important;
    grid-template-columns: 1fr auto auto !important;
    gap: 8px !important;
    align-items: center !important;
  }

  body.app-body .staking-shell input,
  body.app-body .stake-input {
    min-width: 0 !important;
    width: 100% !important;
  }

  body.app-body .forum-feed {
    gap: 12px !important;
  }

  body.app-body .forum-post {
    grid-template-columns: 58px 1fr auto !important;
    text-align: left !important;
  }

  body.app-body .ai-shell {
    padding-top: 14px !important;
  }

  body.app-body .ai-head {
    display: none !important;
  }

  body.app-body .ai-chat {
    padding-top: 0 !important;
  }

  body.app-body .ai-attach,
  body.app-body .ai-send {
    color: var(--mt-black) !important;
    opacity: 1 !important;
  }

  body.app-body .ai-attach svg,
  body.app-body .ai-send svg,
  body.app-body .ai-attach path,
  body.app-body .ai-send path {
    fill: currentColor !important;
    stroke: currentColor !important;
  }

  body.app-body .tasks-hero {
    padding: 0 !important;
    margin: 0 0 18px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.app-body .tasks-hero h1 {
    margin: 0 0 18px !important;
    font: 950 clamp(34px, 10vw, 54px)/.86 "Montserrat", sans-serif !important;
    letter-spacing: -.04em !important;
  }

  body.app-body .tasks-list {
    padding-bottom: 80px !important;
  }

  body.app-body .task-card {
    grid-template-columns: 1fr auto !important;
    min-height: 72px !important;
  }

  body.app-body .roulette-shell {
    padding-top: 14px !important;
  }

  body.app-body .roulette-title,
  body.app-body .roulette-shell h1 {
    display: none !important;
  }

  body.app-body .roulette-stage {
    margin-top: 12px !important;
  }

  body.app-body .profile-shell {
    padding-top: 10px !important;
    padding-bottom: 92px !important;
  }

  body.app-body .profile-hero {
    margin-top: 0 !important;
  }

  body.app-body .profile-scoreboard {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.app-body .profile-scoreboard article {
    min-height: 68px !important;
    padding: 12px 10px !important;
  }

  body.app-body .profile-scoreboard strong {
    font-size: 26px !important;
  }

  body.app-body .profile-cashbacks-h {
    padding-left: 8px !important;
  }
}

/* v227: header spacing and simplified phone shop. */
body.app-body {
  --mt-header-offset: 132px;
}

body.app-body main#main.app-main {
  padding-top: var(--mt-header-offset) !important;
}

body.app-body main#main.app-main > .tab {
  padding-top: 24px !important;
}

body.app-body .tab-shop,
body.app-body .tab-leagues,
body.app-body .tab-rewards,
body.app-body .tab-tasks,
body.app-body .tab-roulette,
body.app-body .tab-ai,
body.app-body .tab-profile,
body.app-body .tab-forum,
body.app-body .tab-staking {
  min-height: calc(100dvh - var(--mt-header-offset)) !important;
}

body.app-body .tab-shop .shop-choice,
body.app-body .tab-leagues .league-map,
body.app-body .tab-rewards .rewards-shell,
body.app-body .tab-tasks .tasks-shell,
body.app-body .tab-roulette .roulette-shell,
body.app-body .tab-ai .ai-shell,
body.app-body .tab-profile .profile-shell,
body.app-body .tab-forum .forum-shell,
body.app-body .tab-staking .staking-shell {
  margin-top: 0 !important;
}

body.app-body .shop-choice-tabs,
body.app-body .league-view-toggle,
body.app-body .tasks-tabs,
body.app-body .forum-tabs,
body.app-body .stake-periods,
body.app-body .staking-periods {
  margin: 0 0 30px !important;
}

body.app-body .tab-leagues .league-view-toggle {
  margin-bottom: 38px !important;
}

body.app-body .tab-leagues .league-map .section-row {
  margin: 0 0 24px !important;
}

body.app-body .tab-leagues .mt-bracket-map {
  margin-top: 10px !important;
}

body.app-body .tab-staking .staking-shell {
  display: grid !important;
  gap: 16px !important;
}

body.app-body .tab-staking .stake-input {
  margin: 12px 0 0 !important;
}

body.app-body .tab-shop .shop-hero,
body.app-body .tab-shop .shop-status-grid,
body.app-body .tab-shop .shop-included,
body.app-body .tab-shop .shop-pack-section {
  display: none !important;
}

body.app-body .tab-shop .shop-choice {
  display: grid !important;
  gap: 24px !important;
  width: min(100%, 430px) !important;
  margin-inline: auto !important;
  padding: 0 10px 118px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body .tab-shop .shop-choice::before,
body.app-body .tab-shop .shop-choice::after,
body.app-body .tab-shop .shop-choice-card::before,
body.app-body .tab-shop .shop-choice-card::after {
  display: none !important;
  content: none !important;
}

body.app-body .tab-shop .shop-choice-tabs,
body.app-body .tab-shop [data-shop-choice-tabs] {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  height: 66px !important;
  padding: 6px !important;
  border-radius: 26px !important;
  background: rgba(4, 12, 18, .82) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.34) !important;
  overflow: hidden !important;
}

body.app-body .tab-shop .shop-choice-tabs .slider-indicator,
body.app-body .tab-shop [data-shop-choice-tabs] .slider-indicator {
  border-radius: 21px !important;
  background: linear-gradient(180deg, #fffdf8, #c9e4f7) !important;
  box-shadow: none !important;
}

body.app-body .tab-shop .shop-choice-tabs button,
body.app-body .tab-shop [data-shop-choice-tabs] button {
  height: 54px !important;
  min-width: 0 !important;
  border-radius: 21px !important;
  background: transparent !important;
  border: 0 !important;
  color: rgba(255,255,255,.52) !important;
  box-shadow: none !important;
  transform: none !important;
}

body.app-body .tab-shop .shop-choice-tabs button.is-active,
body.app-body .tab-shop [data-shop-choice-tabs] button.is-active {
  color: #050505 !important;
  background: transparent !important;
}

body.app-body .tab-shop .shop-choice-tabs button span {
  font: 950 23px/1 "Montserrat", sans-serif !important;
}

body.app-body .tab-shop .shop-choice-tabs button small {
  font: 900 11px/1.05 "Montserrat", sans-serif !important;
}

body.app-body .tab-shop .shop-choice-card,
body.app-body .tab-shop .shop-choice-card[data-shop-featured] {
  width: 100% !important;
  min-height: 550px !important;
  display: grid !important;
  grid-template-rows: auto auto auto 1fr !important;
  align-content: start !important;
  gap: 22px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.app-body .tab-shop .choice-art {
  width: 100% !important;
  height: clamp(260px, 56vw, 330px) !important;
  border-radius: 28px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(0,0,0,.18) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  overflow: hidden !important;
}

body.app-body .tab-shop .choice-art img {
  width: min(92%, 360px) !important;
  max-height: 82% !important;
  object-fit: contain !important;
  transform: scale(1.15) !important;
}

body.app-body .tab-shop .choice-copy {
  padding: 0 18px !important;
}

body.app-body .tab-shop .choice-copy h2 {
  margin: 0 0 8px !important;
  color: var(--mt-ink) !important;
  font: 950 clamp(30px, 8vw, 42px)/.88 "Montserrat", sans-serif !important;
  letter-spacing: -.04em !important;
}

body.app-body .tab-shop .choice-copy p {
  margin: 0 !important;
  color: rgba(255,255,255,.72) !important;
  font: 700 14px/1.45 "Lato", sans-serif !important;
}

body.app-body .tab-shop .choice-buy {
  padding: 0 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

body.app-body .tab-shop .choice-buy strong {
  color: var(--mt-ink) !important;
  font: 950 34px/1 "Montserrat", sans-serif !important;
}

body.app-body .tab-shop .choice-action {
  min-height: 58px !important;
  padding: 0 28px !important;
  border-radius: 20px !important;
  display: inline-grid !important;
  place-items: center !important;
  color: #050505 !important;
  background: linear-gradient(180deg, #fffef8, #d2e9fa) !important;
  border: 0 !important;
  box-shadow: 0 8px 0 rgba(140,180,204,.55) !important;
  font: 950 13px/1 "Montserrat", sans-serif !important;
  text-transform: uppercase !important;
}

body.app-body .tab-shop .choice-tools {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  padding: 0 18px !important;
}

body.app-body .tab-shop .choice-tool {
  min-height: 50px !important;
  border-radius: 18px !important;
  color: #050505 !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: none !important;
  border: 0 !important;
}

body.app-body .tab-shop .choice-symbol {
  min-height: 230px !important;
  border-radius: 28px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--mt-ink) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(95,182,255,.22), transparent 50%),
    rgba(255,255,255,.035) !important;
  font: 950 clamp(56px, 16vw, 86px)/1 "Montserrat", sans-serif !important;
  letter-spacing: -.06em !important;
}

body.app-body .tab-shop .choice-buy-stack {
  display: grid !important;
  grid-template-columns: 1fr !important;
}

body.app-body .tab-shop .ton-topup-box,
body.app-body .tab-shop .ton-topup-receive {
  margin: 0 18px !important;
  min-height: 62px !important;
  padding: 12px 16px !important;
  border-radius: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

body.app-body .tab-shop .ton-topup-box span,
body.app-body .tab-shop .ton-topup-receive span {
  color: rgba(255,255,255,.58) !important;
  font: 900 11px/1 "Montserrat", sans-serif !important;
  text-transform: uppercase !important;
}

body.app-body .tab-shop .ton-topup-box input {
  width: 130px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--mt-ink) !important;
  text-align: right !important;
  font: 950 28px/1 "Montserrat", sans-serif !important;
}

body.app-body .tab-shop .ton-topup-receive strong {
  color: #5FB6FF !important;
  font: 950 24px/1 "Montserrat", sans-serif !important;
}

/* v225: specificity fixes for legacy mobile overrides. */
@media (max-width: 820px) {
  body.app-body .tab-leagues .league-view-toggle button.is-active,
  body.app-body .tab-shop .shop-choice-tabs button.is-active,
  body.app-body .tab-tasks .tasks-tabs button.is-active,
  body.app-body .tab-forum .forum-tabs button.is-active,
  body.app-body .tab-staking .stake-periods button.is-active,
  body.app-body .tab-staking .staking-periods button.is-active,
  body.app-body .tab-leagues .league-tier-slider button.is-active {
    background: var(--mt-ink) !important;
    background-image: none !important;
    color: var(--mt-black) !important;
    box-shadow: none !important;
  }

  body.app-body .tab-leagues .league-map > .section-row {
    display: none !important;
  }

  body.app-body .tab-leagues .league-map .section-h {
    display: none !important;
  }

  body.app-body .tab-leagues .league-view-toggle {
    margin-top: 8px !important;
    margin-bottom: 34px !important;
  }

  body.app-body .tab-leagues .mt-bracket-map {
    margin-top: 26px !important;
  }
}

/* v219: final polish from local motion refs. Mobile-only, project colors only. */
@media (max-width: 620px) {
  :root {
    --mt-black: #050505;
    --mt-black-2: #0a0a0b;
    --mt-surface: rgba(255,255,255,.055);
    --mt-surface-2: rgba(255,255,255,.085);
    --mt-line: rgba(255,255,255,.12);
    --mt-ink: #f8f8f4;
    --mt-ink-soft: rgba(248,248,244,.72);
    --mt-ink-mute: rgba(248,248,244,.48);
    --mt-gray: #8c929a;
    --mt-blue: #5FB6FF;
    --mt-blue-soft: rgba(95,182,255,.22);
    --mt-ease: cubic-bezier(.16,1,.3,1);
    --mt-link-ease: cubic-bezier(.77,0,.175,1);
  }

  body.app-body,
  body.stats-body {
    background:
      radial-gradient(circle at 50% -22%, rgba(95,182,255,.18), transparent 30%),
      linear-gradient(180deg, #0a0a0b 0%, #050505 42%, #000 100%) !important;
    color: var(--mt-ink) !important;
    font-family: "Lato", sans-serif !important;
  }

  .app-main {
    padding-top: 112px !important;
  }

  .app-header,
  body.stats-body .app-header {
    height: 66px !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)),
      rgba(5,5,5,.76) !important;
    backdrop-filter: blur(24px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
    box-shadow: 0 18px 54px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.08) !important;
  }

  .hdr-burger,
  .stats-back,
  .nav-drawer-lang,
  .app-header .lang-toggle button {
    width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.10) !important;
    color: var(--mt-ink) !important;
    box-shadow: none !important;
  }

  .wallet-btn,
  .stats-wallet-btn {
    min-width: 92px !important;
    height: 50px !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--mt-ink) !important;
    color: var(--mt-black) !important;
    box-shadow: none !important;
    font: 900 12px/1 "Montserrat", sans-serif !important;
  }

  .wallet-label {
    max-width: 90px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .brand-stack,
  .app-header .brand-stack {
    top: 50% !important;
    left: 50% !important;
    width: 132px !important;
    height: 46px !important;
    transform: translate(-50%, -50%) !important;
    overflow: visible !important;
    pointer-events: none !important;
  }

  .brand-stack:active,
  .brand-stack:hover,
  .brand-stack:focus {
    transform: translate(-50%, -50%) !important;
    opacity: 1 !important;
    filter: none !important;
  }

  .brand-meme {
    font: 400 22px/.78 "Bagel Fat One", "Montserrat", sans-serif !important;
    color: var(--mt-blue) !important;
    text-shadow: 0 2px 0 #0c0c0c !important;
  }

  .brand-throne {
    font: 400 23px/.78 "Bagel Fat One", "Montserrat", sans-serif !important;
    color: var(--mt-ink) !important;
    text-shadow: 0 2px 0 #0c0c0c !important;
  }

  .bal-widget,
  .wallet-dot,
  .app-header .lang-toggle,
  .hdr-tools .lang-toggle {
    display: none !important;
  }

  .app-bnav {
    --mt-nav-index: 0;
    --mt-nav-slot: calc((100% - 20px) / 6);
    height: 72px !important;
    padding: 10px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03)),
      rgba(3,3,3,.86) !important;
    backdrop-filter: blur(24px) saturate(155%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(155%) !important;
    box-shadow: 0 18px 54px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.06) !important;
    overflow: hidden !important;
  }

  .app-bnav[data-active-tab="home"] { --mt-nav-index: 0; }
  .app-bnav[data-active-tab="leagues"] { --mt-nav-index: 1; }
  .app-bnav[data-active-tab="shop"] { --mt-nav-index: 2; }
  .app-bnav[data-active-tab="rewards"] { --mt-nav-index: 3; }
  .app-bnav[data-active-tab="tasks"] { --mt-nav-index: 4; }
  .app-bnav[data-active-tab="roulette"] { --mt-nav-index: 5; }

  .app-bnav::before {
    content: "" !important;
    position: absolute !important;
    top: 10px !important;
    left: calc(10px + ((var(--mt-nav-slot) - 52px) / 2) + (var(--mt-nav-index) * var(--mt-nav-slot))) !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 999px !important;
    background: var(--mt-ink) !important;
    box-shadow: 0 10px 24px rgba(95,182,255,.22) !important;
    transition: left 620ms var(--mt-ease) !important;
  }

  .bn-btn,
  .bn-btn svg {
    color: rgba(248,248,244,.58) !important;
    fill: currentColor !important;
  }

  .bn-btn.is-active,
  .bn-btn.is-active svg {
    color: var(--mt-black) !important;
  }

  .page-hero,
  .arena-section,
  .league-map,
  .league-stack-section,
  .shop-choice,
  .roulette-shell,
  .refs-shell,
  .profile-shell,
  .admin-console {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .metric-strip,
  .arena-card,
  .story-card,
  .trust-rail span,
  .command-row,
  .league-stage,
  .ls-match,
  .league-ribbon,
  .shop-choice-card,
  .shop-pass-art,
  .prize-pool-banner,
  .checkin-shell,
  .task-card,
  .roulette-ticket-bar,
  .roulette-stage,
  .ai-shell,
  .refs-card,
  .refs-stats article,
  .forum-shell,
  .staking-shell,
  .profile-hero,
  .profile-scoreboard article,
  .profile-cashbacks,
  .admin-pane,
  .modal-card,
  .pass-card,
  .buy-sheet-card {
    border: 1px solid var(--mt-line) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.026)),
      rgba(255,255,255,.035) !important;
    box-shadow: 0 18px 52px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.07) !important;
    backdrop-filter: blur(16px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(135%) !important;
  }

  .dock-chip::after,
  .command-row::before,
  .story-card::before,
  .trust-rail span::before,
  .shop-choice-card::before,
  .shop-choice-card::after,
  .choice-art::before,
  .choice-art::after,
  .reward-node::before,
  .reward-node::after,
  .reward-step::before,
  .reward-step::after,
  .profile-hero::before,
  .profile-hero::after {
    content: none !important;
    display: none !important;
  }

  .home-portrait,
  .home-portrait .hero-photo {
    background: transparent !important;
    box-shadow: none !important;
  }

  .home-portrait .hero-photo {
    filter: drop-shadow(0 26px 42px rgba(0,0,0,.56)) !important;
  }

  .metric {
    background: rgba(255,255,255,.045) !important;
  }

  .metric strong,
  .choice-price,
  .prize-pool-value,
  .roulette-ticket-bar strong,
  .task-reward {
    color: var(--mt-blue) !important;
  }

  .section-h,
  .display-title,
  .choice-copy h2,
  .league-ribbon h3,
  .profile-name,
  .command-board .section-h,
  .refs-title,
  .ai-title,
  .tasks-title,
  .roulette-title {
    color: var(--mt-ink) !important;
    font-family: "Montserrat", sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: -.01em !important;
  }

  .home-cta,
  .shop-primary,
  .choice-action,
  .checkin-btn,
  .ref-copy-btn,
  .ref-share-btn,
  .stake-start,
  .forum-publish button {
    --link-fill: var(--mt-blue);
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    background: var(--mt-ink) !important;
    color: var(--mt-black) !important;
    border: 0 !important;
    box-shadow: none !important;
    transition: transform 150ms var(--mt-ease), color 520ms var(--mt-link-ease) !important;
  }

  .home-cta::before,
  .shop-primary::before,
  .choice-action::before,
  .checkin-btn::before,
  .ref-copy-btn::before,
  .ref-share-btn::before,
  .stake-start::before,
  .forum-publish button::before {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;
    top: 50% !important;
    right: 14px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 999px !important;
    background: var(--link-fill) !important;
    transform: translateY(-50%) !important;
    transition: width 520ms var(--mt-link-ease), height 520ms var(--mt-link-ease), right 520ms var(--mt-link-ease) !important;
  }

  .home-cta:hover::before,
  .home-cta:active::before,
  .shop-primary:hover::before,
  .shop-primary:active::before,
  .choice-action:hover::before,
  .choice-action:active::before,
  .checkin-btn:hover::before,
  .checkin-btn:active::before,
  .ref-copy-btn:hover::before,
  .ref-copy-btn:active::before,
  .ref-share-btn:hover::before,
  .ref-share-btn:active::before,
  .stake-start:hover::before,
  .stake-start:active::before,
  .forum-publish button:hover::before,
  .forum-publish button:active::before {
    width: 100% !important;
    height: 100% !important;
    right: 0 !important;
  }

  .home-cta:active,
  .shop-primary:active,
  .choice-action:active,
  .checkin-btn:active,
  .ref-copy-btn:active,
  .ref-share-btn:active,
  .stake-start:active,
  .forum-publish button:active {
    transform: scale(.965) !important;
  }

  .widget-vote-btn {
    background: var(--mt-ink) !important;
    color: transparent !important;
  }

  .widget-vote-btn::before,
  .widget-vote-btn::after {
    content: attr(data-label) !important;
    color: var(--mt-black) !important;
  }

  .widget-vote-btn::after {
    color: var(--mt-ink) !important;
    background: var(--mt-blue) !important;
  }

  .arena-card,
  #active-vote-card {
    background:
      linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.018)),
      rgba(255,255,255,.026) !important;
  }

  .arena-card::before,
  .arena-card::after,
  #active-vote-card::before,
  #active-vote-card::after,
  .widget-vs::before,
  .widget-vs::after {
    content: none !important;
    display: none !important;
  }

  .widget-team-orb {
    background:
      linear-gradient(145deg, rgba(95,182,255,.28), rgba(255,255,255,.10) 52%, rgba(0,0,0,.22)),
      rgba(255,255,255,.05) !important;
  }

  .widget-progress,
  .ls-progress,
  .m-progress {
    height: 12px !important;
    background: rgba(255,255,255,.085) !important;
  }

  .widget-progress-a,
  .ls-progress-fill,
  .m-progress-fill {
    background: linear-gradient(90deg, var(--mt-blue), var(--mt-ink)) !important;
  }

  .tasks-tabs,
  .forum-tabs,
  .league-view-toggle,
  .league-tier-slider,
  .shop-choice-tabs {
    border: 1px solid var(--mt-line) !important;
    background: rgba(255,255,255,.055) !important;
    box-shadow: none !important;
  }

  .tasks-tabs button,
  .forum-tabs button,
  .league-view-toggle button,
  .league-tier-slider button,
  .shop-choice-tabs button {
    background: transparent !important;
    color: var(--mt-ink-mute) !important;
    box-shadow: none !important;
  }

  .tasks-tabs button.is-active,
  .forum-tabs button.is-active,
  .league-view-toggle button.is-active,
  .league-tier-slider button.is-active,
  .shop-choice-tabs button.is-active,
  .shop-choice-tabs button[aria-selected="true"] {
    background: var(--mt-ink) !important;
    color: var(--mt-black) !important;
  }

  .shop-choice-card {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .choice-art {
    height: 276px !important;
    background: #000 !important;
    border: 1px solid var(--mt-line) !important;
  }

  .choice-art img {
    width: 126% !important;
    height: 126% !important;
    filter: none !important;
    transform: translateZ(0) !important;
  }

  .choice-tools,
  .shop-hero-actions {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .choice-tool,
  .shop-secondary {
    color: var(--mt-ink) !important;
    background: rgba(255,255,255,.07) !important;
  }

  .shop-primary,
  .shop-primary span {
    color: var(--mt-black) !important;
  }

  .profile-level,
  .level-badge,
  [data-profile-level] {
    background: var(--mt-blue) !important;
    color: var(--mt-black) !important;
    border: 0 !important;
  }

  .profile-scoreboard {
    display: grid !important;
    gap: 8px !important;
    margin: 14px 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .profile-scoreboard article {
    min-height: 58px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
  }

  .profile-cashbacks {
    padding: 20px 18px !important;
  }

  .profile-cashbacks h2 {
    margin: 0 0 18px !important;
    padding-left: 2px !important;
  }

  .reward-lanes {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .rewards-head,
  .reward-node,
  .reward-index {
    background:
      linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.026)),
      rgba(255,255,255,.035) !important;
    border: 1px solid var(--mt-line) !important;
    color: var(--mt-ink) !important;
  }

  .rewards-head h2,
  .rewards-head strong {
    color: var(--mt-ink) !important;
    text-shadow: none !important;
  }

  .reward-node .reward-art,
  .reward-node [aria-hidden="true"] {
    color: var(--mt-blue) !important;
    filter: grayscale(1) sepia(1) saturate(3) hue-rotate(165deg) brightness(1.25) !important;
  }

  .reward-step:not(.is-reached):not(.is-claimed) {
    opacity: .55 !important;
  }

  .tab.mt-page-enter-next {
    animation: mt-page-slide-next-v219 620ms var(--mt-ease) both !important;
  }

  .tab.mt-page-enter-prev {
    animation: mt-page-slide-prev-v219 620ms var(--mt-ease) both !important;
  }

  @keyframes mt-page-slide-next-v219 {
    from { opacity: 0; transform: translate3d(46px, 0, 0); filter: blur(8px); }
    to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
  }

  @keyframes mt-page-slide-prev-v219 {
    from { opacity: 0; transform: translate3d(-46px, 0, 0); filter: blur(8px); }
    to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
  }

  input,
  textarea,
  select {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid var(--mt-line) !important;
    color: var(--mt-ink) !important;
    border-radius: 18px !important;
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--mt-ink-mute) !important;
  }
}

/* v221: Telegram/mobile app authority up to tablet-preview widths.
   The in-app review viewport can be ~700px wide while still representing a phone app. */
@media (max-width: 820px) {
  :root {
    --mt-black: #050505;
    --mt-panel: rgba(10, 10, 11, .74);
    --mt-panel-strong: rgba(13, 18, 23, .86);
    --mt-glass: rgba(255,255,255,.065);
    --mt-line: rgba(255,255,255,.13);
    --mt-ink: #f7f7f2;
    --mt-ink-soft: rgba(247,247,242,.72);
    --mt-ink-mute: rgba(247,247,242,.46);
    --mt-blue: #5FB6FF;
    --mt-blue-soft: rgba(95,182,255,.22);
    --mt-ease: cubic-bezier(.16, 1, .3, 1);
  }

  html,
  body.app-body {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    background:
      radial-gradient(circle at 50% -18%, rgba(95,182,255,.16), transparent 26%),
      linear-gradient(180deg, #08090a 0%, #050505 44%, #000 100%) !important;
    color: var(--mt-ink) !important;
    font-family: "Lato", sans-serif !important;
  }

  body.app-body::before,
  body.app-body::after,
  .app-main::before,
  .app-main::after {
    display: none !important;
    content: none !important;
  }

  .app-main {
    width: min(430px, 100%) !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    padding: 104px 10px 116px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  html body.app-body > header.app-header.app-header {
    position: fixed !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    left: 50% !important;
    right: auto !important;
    width: min(430px, calc(100vw - 18px)) !important;
    max-width: 430px !important;
    height: 66px !important;
    padding: 0 8px !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 26px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.025)),
      rgba(0,0,0,.78) !important;
    box-shadow: 0 18px 34px rgba(0,0,0,.42) !important;
    backdrop-filter: blur(18px) saturate(135%) !important;
    z-index: 80 !important;
  }

  .app-header .hdr-burger {
    position: static !important;
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.08) !important;
    color: var(--mt-ink) !important;
    box-shadow: none !important;
  }

  .app-header .hdr-burger svg {
    width: 22px !important;
    height: 22px !important;
    fill: currentColor !important;
  }

  .app-header .brand-stack {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 136px !important;
    height: 46px !important;
    transform: translate(-50%, -50%) !important;
    display: grid !important;
    place-items: center !important;
    pointer-events: none !important;
    text-decoration: none !important;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.38)) !important;
  }

  .app-header .brand-stack:active,
  .app-header .brand-stack:hover {
    transform: translate(-50%, -50%) !important;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.38)) !important;
  }

  .app-header .brand-meme {
    color: var(--mt-blue) !important;
  }

  .app-header .brand-throne {
    color: var(--mt-ink) !important;
  }

  .app-header .hdr-tools {
    position: static !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
  }

  .app-header .wallet-btn {
    min-width: 104px !important;
    height: 48px !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--mt-ink) !important;
    color: var(--mt-black) !important;
    box-shadow: none !important;
    font: 900 13px/1 "Montserrat", sans-serif !important;
  }

  .app-header .wallet-dot,
  .app-header .bal-widget,
  .app-header .lang-toggle {
    display: none !important;
  }

  html body.app-body > nav.app-bnav.app-bnav.app-bnav {
    --nav-count: 6;
    --nav-index: 0;
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    width: min(430px, calc(100vw - 24px)) !important;
    max-width: 430px !important;
    height: 72px !important;
    padding: 9px !important;
    transform: translateX(-50%) !important;
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    align-items: center !important;
    gap: 0 !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)),
      rgba(0,0,0,.86) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,.48) !important;
    backdrop-filter: blur(18px) saturate(130%) !important;
    overflow: hidden !important;
    z-index: 90 !important;
  }

  html body.app-body > nav.app-bnav[data-active-tab="home"] { --nav-index: 0; }
  html body.app-body > nav.app-bnav[data-active-tab="leagues"] { --nav-index: 1; }
  html body.app-body > nav.app-bnav[data-active-tab="shop"] { --nav-index: 2; }
  html body.app-body > nav.app-bnav[data-active-tab="rewards"] { --nav-index: 3; }
  html body.app-body > nav.app-bnav[data-active-tab="tasks"] { --nav-index: 4; }
  html body.app-body > nav.app-bnav[data-active-tab="roulette"] { --nav-index: 5; }

  html body.app-body > nav.app-bnav.app-bnav.app-bnav::before {
    content: "" !important;
    position: absolute !important;
    top: 9px !important;
    left: calc(9px + ((100% - 18px) / var(--nav-count) - 54px) / 2 + var(--nav-index) * ((100% - 18px) / var(--nav-count))) !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 999px !important;
    background: var(--mt-ink) !important;
    box-shadow: 0 7px 0 rgba(95,182,255,.24) !important;
    transform: none !important;
    transition: left 520ms var(--mt-ease), box-shadow 240ms ease !important;
    z-index: 0 !important;
  }

  html body.app-body > nav.app-bnav .bn-btn {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 54px !important;
    min-width: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: rgba(255,255,255,.58) !important;
    box-shadow: none !important;
    transform: none !important;
    transition: color 240ms ease, transform 120ms ease !important;
  }

  html body.app-body > nav.app-bnav .bn-btn.is-active {
    color: var(--mt-black) !important;
  }

  html body.app-body > nav.app-bnav .bn-btn:active {
    transform: scale(.94) !important;
  }

  html body.app-body > nav.app-bnav .bn-icon,
  html body.app-body > nav.app-bnav svg {
    width: 22px !important;
    height: 22px !important;
    fill: currentColor !important;
    color: currentColor !important;
  }

  .nav-drawer {
    z-index: 120 !important;
    background: rgba(0,0,0,.64) !important;
    backdrop-filter: blur(12px) !important;
  }

  .nav-drawer-card {
    width: min(360px, calc(100vw - 28px)) !important;
    margin: 12px !important;
    padding: 18px !important;
    border: 1px solid var(--mt-line) !important;
    border-radius: 30px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
      rgba(8,8,8,.94) !important;
    box-shadow: 0 24px 50px rgba(0,0,0,.55) !important;
  }

  .nav-drawer-item[data-tab="refs"],
  .command-row[data-tab="refs"],
  .tab-refs {
    display: none !important;
  }

  .nav-drawer-item,
  .nav-drawer-lang {
    min-height: 54px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.055) !important;
    color: var(--mt-ink) !important;
  }

  .nav-drawer-item svg {
    fill: var(--mt-ink) !important;
  }

  .tab {
    width: 100% !important;
    max-width: 100% !important;
  }

  .tab.mt-page-enter-next { animation: mt-page-slide-next-v221 560ms var(--mt-ease) both !important; }
  .tab.mt-page-enter-prev { animation: mt-page-slide-prev-v221 560ms var(--mt-ease) both !important; }

  @keyframes mt-page-slide-next-v221 {
    from { opacity: 0; transform: translate3d(30px, 0, 0); filter: blur(5px); }
    to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
  }

  @keyframes mt-page-slide-prev-v221 {
    from { opacity: 0; transform: translate3d(-30px, 0, 0); filter: blur(5px); }
    to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
  }

  .league-hero,
  .league-rules {
    display: none !important;
  }

  .league-view-toggle,
  .tasks-tabs,
  .forum-tabs,
  .stake-periods {
    position: relative !important;
    width: 100% !important;
    min-height: 58px !important;
    margin: 0 0 18px !important;
    padding: 6px !important;
    display: grid !important;
    border: 1px solid var(--mt-line) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.055) !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .league-view-toggle { grid-template-columns: repeat(2, 1fr) !important; }
  .tasks-tabs,
  .forum-tabs,
  .stake-periods { grid-template-columns: repeat(3, 1fr) !important; }
  .tasks-tabs { grid-template-columns: repeat(2, 1fr) !important; }

  .league-view-toggle::before,
  .league-tier-slider::before,
  .tasks-tabs::before,
  .forum-tabs::before,
  .stake-periods::before,
  .shop-choice-tabs::before {
    display: none !important;
    content: none !important;
  }

  .league-view-toggle button,
  .tasks-tabs button,
  .forum-tabs button,
  .stake-periods button {
    height: 46px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--mt-ink-mute) !important;
    box-shadow: none !important;
    font: 900 13px/1 "Montserrat", sans-serif !important;
  }

  .league-view-toggle button.is-active,
  .tasks-tabs button.is-active,
  .forum-tabs button.is-active,
  .stake-periods button.is-active {
    background: var(--mt-ink) !important;
    color: var(--mt-black) !important;
  }

  .league-map,
  .league-stack-section,
  .tasks-hero,
  .tasks-list,
  .roulette-shell,
  .ai-shell,
  .forum-shell,
  .staking-shell,
  .profile-shell {
    width: 100% !important;
    margin: 0 0 16px !important;
    padding: 18px !important;
    border: 1px solid var(--mt-line) !important;
    border-radius: 30px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.022)),
      rgba(7,7,8,.64) !important;
    box-shadow: 0 20px 38px rgba(0,0,0,.38) !important;
    backdrop-filter: blur(16px) saturate(125%) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .league-map .section-h,
  .tasks-hero .display-title,
  .forum-head .section-h,
  .staking-head .section-h,
  .profile-name {
    margin: 0 0 16px !important;
    color: var(--mt-ink) !important;
    font-family: "Montserrat", sans-serif !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-size: clamp(28px, 8vw, 44px) !important;
    line-height: .92 !important;
  }

  .league-bracket {
    width: 100% !important;
    overflow: hidden !important;
  }

  .mt-bracket-map {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 18px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "logo logo"
      "ql qr"
      "left right"
      "semi semi"
      "final final"
      "levels levels" !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 26px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .mt-bracket-map > * {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
  }

  .br-logo {
    grid-area: logo !important;
    text-align: center !important;
    margin-bottom: 4px !important;
  }

  .br-logo span,
  .br-logo strong {
    display: block !important;
    color: var(--mt-ink) !important;
    font: 950 26px/.8 "Montserrat", sans-serif !important;
    text-shadow: none !important;
  }

  .br-logo span { color: var(--mt-blue) !important; }
  .br-quarter-left { grid-area: ql !important; }
  .br-quarter-right { grid-area: qr !important; }
  .br-quarter-label {
    color: var(--mt-ink-soft) !important;
    font: 900 14px/1 "Montserrat", sans-serif !important;
  }

  .br-left { grid-area: left !important; }
  .br-right { grid-area: right !important; }
  .br-side {
    display: grid !important;
    gap: 8px !important;
  }

  .br-slot {
    width: 100% !important;
    min-width: 0 !important;
    height: 54px !important;
    padding: 8px 10px !important;
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: center !important;
    gap: 8px !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.04) !important;
    color: var(--mt-ink) !important;
  }

  .br-slot .br-line {
    display: none !important;
  }

  .br-num {
    width: 24px !important;
    height: 24px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: var(--mt-ink) !important;
    color: var(--mt-black) !important;
    font: 900 12px/1 "Montserrat", sans-serif !important;
  }

  .br-slot strong,
  .br-semi strong,
  .br-final strong {
    font: 950 13px/1 "Montserrat", sans-serif !important;
    color: var(--mt-ink) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .br-slot.is-loser {
    opacity: .38 !important;
    filter: grayscale(1) blur(.25px) !important;
  }

  .br-mid-left {
    grid-area: semi !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .br-semi,
  .br-final button {
    width: 100% !important;
    min-height: 58px !important;
    padding: 10px !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 8px !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 18px !important;
    background: rgba(95,182,255,.08) !important;
    color: var(--mt-ink) !important;
  }

  .br-semi > span,
  .br-final > span {
    grid-column: 1 / -1 !important;
    color: var(--mt-ink-mute) !important;
    font: 900 11px/1 "Montserrat", sans-serif !important;
  }

  .br-final {
    grid-area: final !important;
    display: grid !important;
    gap: 8px !important;
    text-align: center !important;
  }

  .br-levels {
    grid-area: levels !important;
    text-align: center !important;
    color: var(--mt-ink-soft) !important;
    font: 950 22px/1 "Montserrat", sans-serif !important;
  }

  .league-tier-slider {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    padding: 6px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.055) !important;
    border: 1px solid var(--mt-line) !important;
  }

  .league-tier-slider button {
    min-height: 48px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--mt-ink-mute) !important;
  }

  .league-tier-slider button.is-active {
    background: var(--mt-ink) !important;
    color: var(--mt-black) !important;
  }

  .league-ribbon {
    margin-top: 16px !important;
    padding: 18px !important;
    border: 1px solid var(--mt-line) !important;
    border-radius: 28px !important;
    background: rgba(255,255,255,.045) !important;
  }

  .lr-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .lr-name {
    color: var(--mt-ink) !important;
    font: 950 34px/.9 "Montserrat", sans-serif !important;
  }

  .lr-sub {
    color: var(--mt-ink-soft) !important;
  }

  .lr-token {
    min-height: 48px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.035) !important;
  }

  .tasks-hero .lead-copy,
  .ai-head,
  .page-kicker {
    display: none !important;
  }

  .tasks-list {
    display: grid !important;
    gap: 10px !important;
  }

  .tasks-list[hidden] {
    display: none !important;
  }

  .task-card,
  .forum-post {
    min-height: 76px !important;
    padding: 14px !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 12px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.04) !important;
  }

  .task-info strong,
  .forum-post strong {
    color: var(--mt-ink) !important;
    font: 900 17px/1.1 "Montserrat", sans-serif !important;
  }

  .task-reward,
  .forum-post p {
    color: var(--mt-ink-soft) !important;
  }

  .task-btn,
  .task-link,
  .forum-like,
  .staking-shell button,
  .roulette-spin-btn,
  .ai-attach,
  .ai-send {
    min-height: 48px !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--mt-ink) !important;
    color: var(--mt-black) !important;
    box-shadow: none !important;
    font: 900 13px/1 "Montserrat", sans-serif !important;
  }

  .task-btn.is-done {
    opacity: .52 !important;
  }

  .roulette-ticket-bar {
    height: 58px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.04) !important;
  }

  .roulette-stage {
    height: 180px !important;
    margin: 18px 0 !important;
    border: 0 !important;
    border-radius: 28px !important;
    background: rgba(255,255,255,.035) !important;
    overflow: hidden !important;
  }

  .roulette-track {
    height: 100% !important;
    align-items: center !important;
    will-change: transform !important;
  }

  .r-item {
    width: 132px !important;
    height: 132px !important;
    flex: 0 0 132px !important;
    margin: 0 6px !important;
    border-radius: 26px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    background: rgba(255,255,255,.05) !important;
    overflow: hidden !important;
  }

  .r-lottie {
    width: 190% !important;
    height: 190% !important;
    margin: -40% 0 0 -45% !important;
  }

  .roulette-pointer {
    background: var(--mt-blue) !important;
    box-shadow: 0 0 22px rgba(95,182,255,.5) !important;
  }

  .ai-shell {
    min-height: calc(100dvh - 208px) !important;
    display: grid !important;
    grid-template-rows: 1fr auto auto !important;
    gap: 12px !important;
  }

  .ai-chat {
    min-height: 290px !important;
    padding: 0 !important;
    overflow-y: auto !important;
  }

  .ai-msg {
    max-width: 88% !important;
    margin-bottom: 10px !important;
    padding: 14px !important;
    border-radius: 18px !important;
    color: var(--mt-ink) !important;
    background: rgba(255,255,255,.055) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
  }

  .ai-msg-user {
    margin-left: auto !important;
    background: rgba(95,182,255,.16) !important;
  }

  .ai-form {
    padding: 8px !important;
    display: grid !important;
    grid-template-columns: 50px 1fr 50px !important;
    gap: 8px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 26px !important;
    background: rgba(255,255,255,.045) !important;
  }

  .ai-input,
  .stake-input,
  .forum-publish input,
  .forum-publish textarea {
    min-height: 50px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 18px !important;
    background: rgba(0,0,0,.34) !important;
    color: var(--mt-ink) !important;
  }

  .ai-attach,
  .ai-send {
    min-width: 50px !important;
    width: 50px !important;
    height: 50px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
  }

  .ai-attach svg,
  .ai-send svg {
    width: 22px !important;
    height: 22px !important;
    fill: currentColor !important;
  }

  .forum-head,
  .staking-head {
    margin-bottom: 12px !important;
  }

  .forum-feed {
    display: grid !important;
    gap: 10px !important;
    margin: 14px 0 !important;
  }

  .forum-token {
    width: 54px !important;
    height: 54px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: var(--mt-blue) !important;
    color: var(--mt-black) !important;
    font: 950 16px/1 "Montserrat", sans-serif !important;
  }

  .forum-publish {
    display: grid !important;
    gap: 10px !important;
    margin-top: 14px !important;
  }

  .stake-ca {
    padding: 12px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.04) !important;
    color: var(--mt-ink-soft) !important;
    font: 800 12px/1.35 "Lato", sans-serif !important;
    word-break: break-all !important;
  }

  .staking-shell {
    display: grid !important;
    gap: 12px !important;
  }

  .profile-shell {
    display: grid !important;
    gap: 14px !important;
  }

  .profile-hero {
    min-height: 132px !important;
    padding: 16px !important;
    display: grid !important;
    grid-template-columns: 92px 1fr auto !important;
    align-items: center !important;
    gap: 14px !important;
    border: 0 !important;
    border-radius: 28px !important;
    background: rgba(255,255,255,.04) !important;
  }

  .profile-avatar {
    width: 88px !important;
    height: 88px !important;
    border-radius: 24px !important;
    background:
      radial-gradient(circle at 30% 22%, rgba(255,255,255,.85), transparent 22%),
      linear-gradient(135deg, var(--mt-blue), #dfe6eb) !important;
    color: var(--mt-black) !important;
  }

  .profile-copy {
    min-width: 0 !important;
  }

  .profile-name {
    margin: 0 0 8px !important;
    font-size: clamp(28px, 8vw, 40px) !important;
    word-break: break-word !important;
  }

  .profile-handle {
    color: var(--mt-ink-soft) !important;
  }

  .profile-level,
  .level-badge,
  [data-profile-level] {
    background: var(--mt-blue) !important;
    color: var(--mt-black) !important;
  }

  .profile-scoreboard {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .profile-scoreboard article {
    min-height: 78px !important;
    padding: 14px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.04) !important;
  }

  .profile-scoreboard span {
    color: var(--mt-ink-mute) !important;
    font: 900 11px/1 "Montserrat", sans-serif !important;
  }

  .profile-scoreboard strong {
    color: var(--mt-ink) !important;
    font: 950 30px/1 "Montserrat", sans-serif !important;
  }

  .profile-cashbacks {
    padding: 18px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 26px !important;
    background: rgba(255,255,255,.04) !important;
  }

  .profile-cashbacks-h {
    margin: 0 0 18px !important;
    padding-left: 4px !important;
    color: var(--mt-ink) !important;
    font: 950 28px/.95 "Montserrat", sans-serif !important;
  }

  .cashback-empty {
    margin: 0 !important;
    padding: 14px 4px !important;
    color: var(--mt-ink-soft) !important;
  }

  .home-league-dock,
  .story-grid,
  .trust-rail,
  .command-board {
    filter: grayscale(.08) !important;
  }

  .home-league-dock .dock-chip,
  .story-card,
  .trust-rail span,
  .command-row {
    border-color: rgba(255,255,255,.08) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.016)),
      rgba(5,5,5,.72) !important;
    color: var(--mt-ink) !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .tab.mt-page-enter-next,
    .tab.mt-page-enter-prev,
    html body.app-body > nav.app-bnav.app-bnav.app-bnav::before {
      animation: none !important;
      transition: none !important;
    }
  }
}

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

html {
  min-height: 100%;
  background: var(--color-page);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--color-page);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  font-feature-settings: "liga", "kern";
  overflow-x: hidden;
}

body.app-body {
  padding: max(12px, env(safe-area-inset-top)) 0 calc(116px + env(safe-area-inset-bottom));
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg,
canvas {
  display: block;
}

svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

[hidden] {
  display: none !important;
}

::selection {
  background: var(--color-primary);
  color: var(--color-primary-ink);
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.app-header {
  position: sticky;
  top: max(10px, env(safe-area-inset-top));
  z-index: 30;
  width: min(1120px, calc(100% - 24px));
  min-height: 68px;
  margin: 0 auto var(--space-6);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: 26px;
  background: rgba(5, 5, 5, 0.82);
  box-shadow: 0 14px 50px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px) saturate(140%);
}

.brand-stack {
  display: grid;
  min-width: 128px;
  padding-left: 2px;
  color: var(--color-paper);
  text-transform: uppercase;
}

.brand-meme,
.brand-throne {
  font-family: var(--font-brand);
  font-size: clamp(22px, 5.4vw, 31px);
  line-height: 0.78;
  letter-spacing: 0.005em;
}

.brand-meme {
  color: var(--color-blue);
}

.brand-throne {
  color: var(--color-paper);
}

.hdr-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.lang-toggle,
.bal-widget,
.wallet-btn {
  min-height: 44px;
  border: 1px solid var(--color-line);
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.lang-toggle {
  position: relative;
  display: inline-flex;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.lang-toggle button {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  border: 0;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-paper);
  color: #080806;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
  transition:
    color 180ms var(--ease-out),
    transform 160ms var(--ease-out),
    background-color 180ms var(--ease-out),
    border-color 180ms var(--ease-out),
    box-shadow 220ms var(--ease-out);
}

.lang-toggle::before {
  display: none;
}

.lang-toggle button.is-on {
  border-color: var(--color-paper);
  background: var(--color-paper);
  color: #080806;
}

.lang-toggle button:hover,
.lang-toggle button:focus-visible {
  border-color: rgba(10, 132, 255, 0.55);
  background: var(--color-primary);
  box-shadow: var(--shadow-acid);
}

.bal-widget {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 13px;
}

.bal-icon {
  color: var(--color-primary);
}

.bal-widget.is-bumped {
  animation: bump 640ms var(--ease-spring);
}

.bal-widget.is-spent {
  animation: spend 520ms var(--ease-out);
}

@keyframes bump {
  35% { transform: translateY(-2px) scale(1.08); box-shadow: var(--shadow-acid); }
}

@keyframes spend {
  35% { transform: scale(0.96); border-color: rgba(255, 91, 67, 0.42); }
}

.wallet-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 132px;
  max-width: 156px;
  padding: 0 13px;
  border-radius: 999px;
  background: var(--color-paper);
  color: #070705;
  font-weight: 900;
  cursor: pointer;
  transition:
    transform 160ms var(--ease-out),
    border-color 180ms var(--ease-out),
    background-color 180ms var(--ease-out);
}

.wallet-btn:hover,
.wallet-btn:focus-visible {
  border-color: rgba(10, 132, 255, 0.44);
  background: var(--color-primary);
}

.wallet-btn:active {
  transform: scale(0.97);
}

.wallet-dot {
  display: none;
}

.wallet-btn.is-connected .wallet-dot {
  background: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.14), 0 0 20px rgba(10, 132, 255, 0.5);
}

.wallet-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1;
}

.app-main {
  width: min(1120px, calc(100% - 24px));
  margin: 0 auto;
}

.tab {
  animation: pageEnter 640ms var(--ease-out) both;
}

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(18px); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes crossDraw {
  to { transform: rotate(var(--cross-angle)) scaleX(1); }
}

@keyframes tokenBurn {
  0% { filter: brightness(1) saturate(1); transform: translateY(-2px) scale(1); }
  42% { filter: brightness(1.25) saturate(1.35); transform: translateY(-4px) scale(1.035); }
  100% { filter: sepia(0.55) brightness(0.78) saturate(0.75); transform: translateY(0) scale(0.96); }
}

@keyframes finalWinnerGlow {
  0% { filter: brightness(1); }
  45% { filter: brightness(1.6) saturate(1.35); }
  100% { filter: sepia(0.35) brightness(0.92); }
}

.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
  min-height: min(760px, calc(100dvh - 144px));
  padding: clamp(20px, 5vw, 56px) 0 clamp(56px, 8vw, 104px);
}

.hero-copy {
  min-width: 0;
}

.page-kicker,
.section-eyebrow,
.match-meta-row,
.widget-foot,
.refs-label,
.refs-link-label,
.rs-label,
.sc-badge,
.league-ribbon .lr-meta,
.ls-foot {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-dim);
}

.page-kicker {
  margin: 0 0 var(--space-4);
  color: var(--color-primary);
}

.page-kicker,
.section-eyebrow,
.home-editorial .display-title,
.home-editorial .lead-copy,
.shop-hero-copy .display-title,
.shop-hero-copy .lead-copy,
.league-hero,
.league-rules,
.shop-included,
.shop-status-grid,
.shop-pack-section > .section-sub,
.league-stack-section > .section-sub,
.refs-list-h,
.refs-list .empty-state {
  display: none !important;
}

.display-title {
  margin: 0;
  max-width: 720px;
  font-family: var(--font-display);
  font-size: clamp(58px, 9vw, 128px);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.lead-copy {
  margin: var(--space-5) 0 0;
  max-width: 620px;
  color: var(--color-muted);
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: 1.58;
  text-wrap: pretty;
}

.home-hero {
  grid-template-columns: minmax(280px, 0.92fr) minmax(0, 1.08fr);
}

.home-portrait {
  position: relative;
  margin: 0;
  min-height: clamp(420px, 58vw, 720px);
  isolation: isolate;
}

.home-portrait::before {
  content: "";
  position: absolute;
  inset: 10% -5% 7% 8%;
  z-index: -1;
  border-radius: 52% 48% 42% 58% / 45% 36% 64% 55%;
  background:
    radial-gradient(circle at 42% 44%, rgba(10, 132, 255, 0.22), transparent 38%),
    radial-gradient(circle at 68% 38%, rgba(77, 163, 255, 0.20), transparent 34%),
    #080806;
  filter: blur(18px);
  opacity: 0.9;
}

.hero-photo {
  width: min(100%, 660px);
  height: min(70dvh, 720px);
  min-height: 390px;
  object-fit: cover;
  object-position: 50% 47%;
  border-radius: 0;
  mix-blend-mode: screen;
  filter: contrast(1.08) saturate(1.05);
  transform: translateX(clamp(-18px, -2vw, -8px));
  mask-image:
    radial-gradient(ellipse 84% 74% at 55% 44%, #000 45%, rgba(0, 0, 0, 0.88) 62%, transparent 82%),
    linear-gradient(#000, #000);
  mask-composite: intersect;
}

.home-portrait figcaption {
  display: none;
}

.metric-strip,
.league-ledger {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--space-6);
  overflow: hidden;
  border: 1px solid rgba(10, 132, 255, 0.22);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(90deg, rgba(10, 132, 255, 0.16), rgba(77, 163, 255, 0.12), rgba(255, 255, 255, 0.07)),
    rgba(255, 255, 255, 0.06);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.24),
    0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

.metric,
.league-ledger-item,
.shop-status-card,
.refs-stat {
  position: relative;
  min-width: 0;
  background:
    radial-gradient(circle at 18% 0%, rgba(10, 132, 255, 0.12), transparent 40%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04));
  padding: var(--space-4);
}

.metric::before {
  content: "";
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  top: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-primary), transparent);
  opacity: 0.75;
}

.metric span,
.league-ledger-item span,
.shop-status-card span {
  display: block;
  margin-bottom: 7px;
  color: var(--color-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.metric strong,
.league-ledger-item strong,
.shop-status-card strong {
  display: block;
  overflow-wrap: anywhere;
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--color-paper);
}

.section-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.section-eyebrow {
  margin: 0;
  color: var(--color-primary);
}

.section-h,
.section-sub,
.refs-list-h {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 6vw, 72px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.section-sub {
  margin-bottom: var(--space-4);
  color: var(--color-muted);
  font-size: clamp(26px, 4vw, 42px);
}

.arena-section,
.command-board,
.shop-pack-section,
.league-map,
.league-stack-section,
.refs-list-section {
  padding: clamp(56px, 9vw, 112px) 0 0;
}

.arena-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 18% 25%, rgba(77, 163, 255, 0.18), transparent 30%),
    radial-gradient(circle at 82% 28%, rgba(255, 91, 67, 0.17), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035));
  box-shadow: var(--shadow-soft);
}

.arena-card::before {
  display: none;
}

.match-meta-row,
.widget-foot,
.match-insight {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.match-meta-row {
  padding: var(--space-5) var(--space-5) 0;
}

.widget-vs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-5) var(--space-5);
}

.widget-team {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  text-align: center;
}

.widget-team-orb {
  position: relative;
  width: clamp(112px, 18vw, 182px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 26%, rgba(255, 255, 255, 0.28), transparent 25%),
    rgba(255, 255, 255, 0.06);
  border: 1px solid var(--color-line);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.26), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
  transition: filter 420ms var(--ease-out), transform 420ms var(--ease-out);
}

.widget-team.is-loser .widget-team-orb {
  filter: grayscale(0.75) brightness(0.48);
}

.widget-team.is-loser .widget-team-orb::before,
.widget-team.is-loser .widget-team-orb::after {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  top: 50%;
  height: 4px;
  border-radius: 999px;
  background: #ff5b43;
  box-shadow: 0 0 18px rgba(255, 91, 67, 0.5);
  transform-origin: center;
  animation: crossDraw 560ms var(--ease-out) both;
}

.widget-team.is-loser .widget-team-orb::before { --cross-angle: 38deg; transform: rotate(var(--cross-angle)) scaleX(0); }
.widget-team.is-loser .widget-team-orb::after  { --cross-angle: -38deg; transform: rotate(var(--cross-angle)) scaleX(0); animation-delay: 120ms; }

.widget-team.is-winner .widget-team-orb {
  transform: translateY(-2px);
}

.arena-card.is-final-burn .widget-team.is-winner .widget-team-orb {
  animation: tokenBurn 1700ms var(--ease-out) both;
}

.team-a .widget-team-orb {
  box-shadow: 0 24px 80px rgba(77, 163, 255, 0.18), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

.team-b .widget-team-orb {
  box-shadow: 0 24px 80px rgba(255, 91, 67, 0.16), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

.widget-team-lottie {
  width: 82%;
  height: 82%;
}

.widget-team-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(28px, 4.6vw, 58px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.widget-team-votes {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 12px;
}

.widget-vs-label {
  display: grid;
  place-items: center;
  width: clamp(52px, 8vw, 78px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-paper);
  color: #060604;
  font-family: var(--font-brand);
  font-size: clamp(18px, 3vw, 32px);
  letter-spacing: 0.02em;
  transform: rotate(-5deg);
  box-shadow: var(--shadow-acid);
}

.widget-progress {
  overflow: hidden;
  height: 13px;
  margin: 0 var(--space-5);
  border-radius: 999px;
  background: rgba(255, 91, 67, 0.32);
}

.widget-progress-a {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-blue), #bce4ff);
  transition: width 420ms var(--ease-out);
}

.widget-foot {
  padding: var(--space-3) var(--space-5) 0;
}

.match-insight {
  margin: var(--space-4) var(--space-5) 0;
  padding: var(--space-4);
  border: 1px solid rgba(10, 132, 255, 0.22);
  border-radius: var(--radius-md);
  background: rgba(10, 132, 255, 0.07);
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: 12px;
}

.widget-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  padding: var(--space-5);
}

.widget-vote-btn,
.shop-primary,
.shop-secondary,
.sc-buy,
.btn,
.seg-control button {
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition:
    transform 150ms var(--ease-out),
    box-shadow 180ms var(--ease-out),
    background-color 180ms var(--ease-out),
    border-color 180ms var(--ease-out);
}

.widget-vote-btn {
  color: #050505;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.widget-vote-a {
  background: var(--color-blue);
  box-shadow: 0 12px 32px rgba(77, 163, 255, 0.22);
}

.widget-vote-b {
  background: var(--color-red);
  box-shadow: 0 12px 32px rgba(255, 91, 67, 0.22);
}

.widget-vote-btn:hover:not(:disabled),
.shop-primary:hover,
.shop-secondary:hover,
.sc-buy:hover,
.btn:hover,
.seg-control button:hover:not(:disabled) {
  transform: translateY(-2px);
}

.widget-vote-btn:active:not(:disabled),
.shop-primary:active,
.shop-secondary:active,
.sc-buy:active,
.btn:active,
.seg-control button:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

.widget-vote-btn:disabled,
.seg-control button:disabled,
.sc-buy:disabled {
  cursor: not-allowed;
  opacity: 0.44;
  transform: none;
}

.seg-control {
  width: max-content;
  max-width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: var(--space-4) auto 0;
  padding: 4px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.seg-control button {
  min-width: 128px;
  padding: 0 18px;
  background: transparent;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 12px;
}

.seg-control button:not(:disabled):hover {
  background: rgba(255, 255, 255, 0.10);
  color: var(--color-ink);
}

.story-grid,
.shop-included,
.league-rules {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1fr;
  gap: var(--space-4);
  padding: clamp(48px, 8vw, 96px) 0 0;
}

.story-card,
.shop-included article,
.league-rules article {
  min-height: 128px;
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.03)),
    var(--color-panel);
}

.story-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-3);
  row-gap: 0;
  min-height: 78px;
  overflow: hidden;
  cursor: pointer;
  transition:
    border-color 260ms var(--ease-out),
    background-color 260ms var(--ease-out),
    transform 260ms var(--ease-out),
    box-shadow 260ms var(--ease-out);
}

.story-card:hover,
.story-card:focus,
.story-card:focus-within {
  border-color: rgba(10, 132, 255, 0.34);
  background:
    linear-gradient(180deg, rgba(10, 132, 255, 0.085), rgba(255, 255, 255, 0.035)),
    var(--color-panel);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.26);
}

.story-card.is-tall {
  transform: translateY(28px);
}

.story-icon,
.shop-included article > span,
.league-rules article > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-primary);
  box-shadow: none;
}

.story-card strong,
.shop-included strong,
.league-rules strong {
  display: block;
  margin-bottom: 0;
  font-size: 20px;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.story-card p,
.shop-included p,
.league-rules p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--color-muted);
  line-height: 1.45;
}

.story-card p {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-4px);
  transition:
    max-height 460ms var(--ease-out),
    opacity 240ms var(--ease-out),
    transform 360ms var(--ease-out),
    margin-top 360ms var(--ease-out);
}

.story-card:hover p,
.story-card:focus p,
.story-card:focus-within p {
  max-height: 72px;
  margin-top: var(--space-2);
  opacity: 1;
  transform: translateY(0);
}

.trust-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--space-7);
}

.trust-rail span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-muted);
  font-size: 13px;
}

.trust-rail svg {
  color: var(--color-primary);
}

.command-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.command-row {
  min-height: 92px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 18px;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.055);
  color: var(--color-ink);
  text-align: left;
  cursor: pointer;
  transition: transform 180ms var(--ease-out), border-color 180ms var(--ease-out), background-color 180ms var(--ease-out);
}

.command-row:hover {
  transform: translateY(-2px);
  border-color: var(--color-line-strong);
  background: rgba(255, 255, 255, 0.085);
}

.command-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 17px;
  color: #050505;
}

.command-blue { background: var(--color-blue); }
.command-gold { background: var(--color-gold); }
.command-green { background: var(--color-green); }
.command-red { background: var(--color-red); }

.command-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.command-copy strong,
.command-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-copy strong {
  font-size: 17px;
}

.command-copy small {
  color: var(--color-muted);
}

.command-chevron {
  color: var(--color-dim);
}

.shop-hero {
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
}

.shop-title {
  font-size: clamp(58px, 6.7vw, 96px);
  max-width: 640px;
}

.shop-pass-art {
  position: relative;
  margin: 0;
  width: min(460px, 100%);
  justify-self: end;
  transform: rotate(3deg);
}

.shop-pass-art::before {
  content: "";
  position: absolute;
  inset: 14% -12% -8% 14%;
  z-index: -1;
  border-radius: 44px;
  background: rgba(10, 132, 255, 0.18);
  filter: blur(40px);
}

.shop-pass-art img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--color-line-strong);
  border-radius: 34px;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.38);
}

.shop-pass-strip {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.58);
  color: var(--color-paper);
  font-family: var(--font-mono);
  font-size: 12px;
}

.shop-hero-actions,
.refs-share-row,
.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.shop-primary,
.shop-secondary,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 19px;
  border: 1px solid transparent;
  font-weight: 800;
}

.shop-primary,
.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-ink);
  box-shadow: var(--shadow-acid);
}

.shop-secondary,
.btn-ghost {
  background: rgba(255, 255, 255, 0.07);
  color: var(--color-ink);
  border-color: var(--color-line);
}

.shop-status-grid,
.refs-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-line);
}

.shop-status-card.is-wide {
  grid-column: auto;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.shop-card {
  position: relative;
  min-width: 0;
  min-height: 430px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035));
  color: var(--color-ink);
  box-shadow: var(--shadow-soft);
  transition: transform 220ms var(--ease-out), border-color 220ms var(--ease-out);
}

.shop-card:hover {
  transform: translateY(-5px);
  border-color: rgba(10, 132, 255, 0.36);
}

.shop-card.is-featured {
  grid-column: span 2;
  min-height: 500px;
}

.sc-badge {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-primary-ink);
}

.sc-media {
  position: relative;
  overflow: hidden;
  min-height: 240px;
  background: #050505;
}

.sc-nft-img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 450ms var(--ease-out);
}

.shop-card:hover .sc-nft-img {
  transform: scale(1.07);
}

.sc-meta-block,
.sc-buy-block {
  padding: var(--space-5);
}

.sc-meta-block {
  display: grid;
  gap: var(--space-3);
}

.sc-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 52px);
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.sc-votes-pill {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(10, 132, 255, 0.1);
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: 12px;
}

.mt-svg-icon {
  display: inline-flex;
  vertical-align: -0.15em;
}

.sc-buy-block {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.sc-price {
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--color-paper);
}

.sc-price small {
  color: var(--color-dim);
  font-size: 12px;
}

.sc-buy {
  min-width: 112px;
  padding: 0 17px;
  background: var(--color-paper);
  color: #070705;
  font-weight: 900;
}

.league-view-toggle {
  position: sticky;
  top: calc(max(10px, env(safe-area-inset-top)) + 82px);
  z-index: 24;
  width: min(420px, 100%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin: 0 auto var(--space-5);
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(16, 18, 15, 0.94), rgba(4, 5, 4, 0.86)),
    rgba(5, 5, 5, 0.88);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 18px 46px rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(18px) saturate(155%);
  overflow: hidden;
  isolation: isolate;
}

.league-view-toggle::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: calc((100% - 15px) / 2);
  border-radius: 999px;
  background: var(--color-paper);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 14px 34px rgba(255, 255, 255, 0.16);
  transform: translateX(0);
  transition: transform 680ms cubic-bezier(0.16, 1, 0.3, 1);
}

.league-view-toggle.is-levels::before {
  transform: translateX(calc(100% + 5px));
}

.league-view-toggle button {
  position: relative;
  z-index: 1;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-muted);
  font-weight: 900;
  cursor: pointer;
  transition:
    transform 160ms var(--ease-out),
    color 360ms var(--ease-out);
}

.league-view-toggle button.is-active {
  color: #060604;
}

.league-view-toggle button:active {
  transform: scale(0.97);
}

.tab-leagues [data-league-panel][hidden] {
  display: none !important;
}

.league-hero {
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
}

.league-ledger {
  align-self: end;
  grid-template-columns: 1fr;
  width: min(360px, 100%);
  justify-self: end;
  margin-top: 0;
}

.league-bracket {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.league-stage {
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.055);
}

.ls-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.ls-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 0.92;
  letter-spacing: -0.04em;
}

.ls-head span {
  color: var(--color-dim);
  font-family: var(--font-mono);
  font-size: 11px;
}

.ls-matches {
  display: grid;
  gap: var(--space-3);
}

.ls-match {
  width: 100%;
  min-height: 124px;
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.22);
  color: var(--color-ink);
  text-align: left;
  cursor: pointer;
  transition: transform 180ms var(--ease-out), border-color 180ms var(--ease-out), background-color 180ms var(--ease-out);
}

.ls-match:hover {
  transform: translateY(-2px);
  border-color: var(--color-line-strong);
  background: rgba(255, 255, 255, 0.07);
}

.ls-match.is-live {
  border-color: rgba(10, 132, 255, 0.36);
  box-shadow: 0 14px 40px rgba(10, 132, 255, 0.08);
}

.ls-versus,
.ls-foot {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.ls-versus {
  margin: var(--space-3) 0;
  color: var(--color-paper);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.ls-versus span {
  position: relative;
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ls-team.is-winner {
  color: var(--color-primary);
}

.ls-team.is-loser {
  color: rgba(255, 255, 255, 0.42);
  filter: grayscale(1) brightness(0.58);
}

.ls-team.is-loser::before,
.ls-team.is-loser::after {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  top: 50%;
  height: 3px;
  border-radius: 999px;
  background: #ff5b43;
  transform-origin: center;
  animation: crossDraw 540ms var(--ease-out) both;
}

.ls-team.is-loser::before { --cross-angle: 14deg; transform: rotate(var(--cross-angle)) scaleX(0); }
.ls-team.is-loser::after { --cross-angle: -14deg; transform: rotate(var(--cross-angle)) scaleX(0); animation-delay: 110ms; }

.ls-match.is-done {
  opacity: 0.86;
}

.ls-match.is-final-burn .ls-team.is-winner {
  text-shadow: 0 0 20px rgba(255, 190, 98, 0.55);
  animation: finalWinnerGlow 1600ms var(--ease-out) both;
}

.ls-progress {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 91, 67, 0.28);
}

.ls-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-blue), var(--color-primary));
}

.leagues-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.league-ribbon {
  min-width: 0;
  min-height: 270px;
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035));
}

.lg-gold { border-color: rgba(215, 169, 86, 0.38); }
.lg-silver { border-color: rgba(198, 210, 215, 0.30); }
.lg-bronze { border-color: rgba(188, 113, 69, 0.36); }

.lr-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.lr-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 0.9;
  letter-spacing: -0.05em;
}

.lr-medal {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-primary);
}

.lr-empty,
.empty-state {
  margin: 0;
  color: var(--color-muted);
}

.lr-tokens {
  display: grid;
  gap: 10px;
}

.lr-token {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.2);
}

.lt-logo {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #fff, transparent 18%),
    linear-gradient(135deg, var(--color-primary), var(--color-blue));
}

.lt-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lr-meta {
  margin-top: auto;
  padding-top: var(--space-5);
  display: none;
}

.refs-hero {
  grid-template-columns: minmax(0, 1.1fr) minmax(240px, 0.9fr);
}

.refs-sticker {
  width: min(420px, 100%);
  aspect-ratio: 1;
  justify-self: center;
  border-radius: 50%;
  background: transparent;
  border: 0;
}

.refs-card {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 5vw, 44px);
  border: 1px solid rgba(10, 132, 255, 0.28);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 18% 15%, rgba(10, 132, 255, 0.14), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035));
  box-shadow: var(--shadow-soft);
}

.refs-code-row,
.refs-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  margin: var(--space-3) 0 var(--space-5);
}

.refs-code,
.refs-link {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 15px 16px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.26);
  color: var(--color-paper);
  font-family: var(--font-mono);
  font-size: clamp(13px, 2.4vw, 18px);
}

.btn-sm {
  min-height: 48px;
  padding: 0 14px;
  font-size: 13px;
}

.btn svg {
  flex: 0 0 auto;
}

.btn-share {
  background: var(--color-paper);
  color: #060604;
}

.btn-share-tg {
  background: var(--color-blue);
}

.refs-stats {
  margin-top: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.refs-stat {
  display: grid;
  gap: 6px;
}

.rs-value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 0.9;
  letter-spacing: -0.05em;
}

.rs-value .mt-svg-icon {
  font-size: 30px;
  line-height: 1;
}

.refs-list {
  list-style: none;
  display: grid;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  padding: 0;
}

.refs-list li:not(.empty-state) {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.055);
}

.profile-shell {
  display: grid;
  gap: var(--space-5);
  padding-top: clamp(26px, 6vw, 64px);
}

.profile-hero {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5);
  border: 1px solid rgba(10, 132, 255, 0.22);
  border-radius: 30px;
  background:
    radial-gradient(circle at 14% 20%, rgba(10, 132, 255, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.032));
  box-shadow: var(--shadow-soft);
}

.profile-avatar {
  position: relative;
  width: 132px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 36px;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.42), transparent 18%),
    linear-gradient(135deg, var(--color-primary), var(--color-blue));
  background-size: cover;
  background-position: center;
  color: #050505;
  font-family: var(--font-brand);
  font-size: 42px;
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.28);
}

.profile-avatar.has-photo span {
  opacity: 0;
}

.profile-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(46px, 8vw, 92px);
  line-height: 0.88;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.profile-handle {
  margin: var(--space-2) 0 0;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 13px;
}

.profile-scoreboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--color-line);
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035));
}

.profile-scoreboard article {
  display: grid;
  gap: var(--space-4);
  min-height: 136px;
  padding: var(--space-5);
}

.profile-scoreboard article + article {
  border-left: 1px solid var(--color-line);
}

.profile-scoreboard span {
  color: var(--color-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.profile-scoreboard strong {
  align-self: end;
  font-family: var(--font-display);
  font-size: clamp(46px, 9vw, 76px);
  line-height: 0.88;
  letter-spacing: -0.055em;
}

.profile-xp-card span {
  display: inline-flex;
  width: 24px;
  height: 24px;
  color: var(--color-acid);
}

.profile-cashbacks,
.rewards-shell,
.admin-console {
  width: min(720px, 100%);
  margin: 0 auto var(--space-8);
}

.profile-cashbacks h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(28px, 7vw, 52px);
  letter-spacing: -0.04em;
}

.cashback-list {
  display: grid;
  gap: 10px;
}

.cashback-pill,
.promo-strip,
.admin-promo-row,
.admin-user-row,
.admin-form,
.admin-filter,
.admin-token-field {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(20, 20, 18, 0.86);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset;
  backdrop-filter: blur(14px) saturate(140%);
}

.cashback-pill {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 20px;
}

.cashback-pill strong {
  color: var(--color-acid);
  font-family: var(--font-mono);
}

.promo-strip {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin: 0 0 var(--space-4);
  padding: 8px;
  border-radius: 22px;
}

.promo-strip input,
.admin-form input,
.admin-form select,
.admin-filter select,
.admin-token-field input {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.34);
  color: var(--color-ink);
  padding: 0 14px;
  font: 800 13px/1 var(--font-body);
}

.promo-strip button,
.admin-form button,
.admin-promo-row button,
.admin-tournament-form > button {
  min-height: 44px;
  border: 0;
  border-radius: 16px;
  background: var(--color-paper);
  color: #070705;
  font-weight: 900;
  padding: 0 18px;
}

.rewards-head,
.admin-console-head {
  margin-bottom: var(--space-5);
}

.reward-lanes {
  position: relative;
  display: grid;
  gap: 12px;
}

.reward-lanes::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 24px;
  width: 2px;
  background: linear-gradient(var(--color-acid), rgba(246,239,225,0.08));
}

.reward-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 48px 1fr 1fr;
  gap: 10px;
  align-items: stretch;
}

.reward-index {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-acid);
  color: #071006;
  font-weight: 950;
}

.reward-node {
  min-height: 64px;
  border: 1px solid rgba(246,239,225,0.12);
  border-radius: 20px;
  background: rgba(18,18,16,0.86);
  color: var(--color-ink);
  text-align: left;
  padding: 12px 14px;
}

.reward-node span {
  display: block;
  color: var(--color-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
}

.reward-node.pass {
  border-color: rgba(206, 255, 54, 0.32);
}

.reward-node.is-locked {
  opacity: 0.72;
}

.reward-node.is-claimed {
  color: var(--color-acid);
}

.pass-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.72);
}

.pass-modal.is-open {
  display: grid;
}

.pass-card {
  width: min(440px, 100%);
  position: relative;
  padding: 22px;
  border: 1px solid rgba(246,239,225,0.14);
  border-radius: 28px;
  background: #050505;
  box-shadow: 0 30px 90px rgba(0,0,0,0.7);
}

.pass-card h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(38px, 10vw, 72px);
  letter-spacing: -0.05em;
}

.modal-p {
  white-space: pre-line;
}

.pass-art {
  overflow: hidden;
  border-radius: 22px;
  background: #050505;
}

.pass-art img {
  display: block;
  width: 100%;
  mix-blend-mode: screen;
}

.pass-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 16px 0;
}

.pass-price strong {
  font-family: var(--font-display);
  font-size: 54px;
  line-height: 0.9;
}

.admin-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: var(--space-4);
}

.admin-tabs button {
  min-height: 44px;
  border: 1px solid rgba(246,239,225,0.12);
  border-radius: 16px;
  background: rgba(20,20,18,0.86);
  color: var(--color-muted);
  font-weight: 900;
}

.admin-tabs button.is-active {
  background: var(--color-paper);
  color: #070705;
}

.admin-pane {
  display: none;
}

.admin-pane.is-active {
  display: grid;
  gap: 12px;
}

.admin-user-list,
.admin-promo-list,
.admin-tournament-form {
  display: grid;
  gap: 10px;
}

.admin-user-row,
.admin-promo-row {
  width: 100%;
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 20px;
  color: var(--color-ink);
  text-align: left;
}

.admin-user-row small,
.admin-promo-row span {
  color: var(--color-muted);
  font-size: 12px;
}

.admin-form,
.admin-token-field {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 20px;
}

.admin-edit-modal {
  position: fixed;
  inset: 0;
  z-index: 72;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.72);
}

.admin-edit-modal.is-open {
  display: grid;
}

.admin-edit-card {
  width: min(460px, 100%);
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(24, 25, 22, 0.96), rgba(7, 7, 6, 0.96)),
    #050505;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.72);
}

.admin-edit-card label {
  display: grid;
  gap: 6px;
}

.admin-edit-card label > span {
  color: var(--color-paper);
  font-weight: 900;
}

.admin-edit-card small {
  color: var(--color-muted);
  line-height: 1.35;
}

.admin-edit-card input[type="number"] {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.34);
  color: var(--color-ink);
  padding: 0 14px;
  font: 900 14px/1 var(--font-body);
}

.admin-edit-check {
  grid-template-columns: auto 1fr;
  align-items: center;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
}

.admin-edit-check input {
  width: 22px;
  height: 22px;
  accent-color: var(--color-acid);
}

.admin-filter {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 18px;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
}

.token-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}

.widget-team-orb {
  cursor: pointer;
}

.token-pop {
  position: absolute;
  left: 50%;
  top: 18%;
  z-index: 4;
  pointer-events: none;
  color: var(--color-acid);
  font: 950 18px/1 var(--font-body);
  text-shadow: 0 6px 18px rgba(206,255,54,0.35);
  transform: translate(-50%, 0);
  animation: tokenPop 880ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes tokenPop {
  to {
    opacity: 0;
    transform: translate(calc(-50% + var(--drift, 0px)), -72px) scale(1.25) rotate(-8deg);
  }
}

.app-bnav {
  --nav-size: 54px;
  --nav-gap: 4px;
  --nav-index: 0;
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 40;
  width: max-content;
  max-width: calc(100% - 28px);
  display: grid;
  grid-template-columns: repeat(6, var(--nav-size));
  gap: var(--nav-gap);
  padding: 5px;
  border: 1px solid var(--color-line);
  border-radius: 24px;
  background: rgba(5, 5, 5, 0.88);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(14px) saturate(150%);
  transform: translateX(-50%);
  isolation: isolate;
}

.app-bnav[data-active-tab="home"] { --nav-index: 0; }
.app-bnav[data-active-tab="leagues"] { --nav-index: 1; }
.app-bnav[data-active-tab="shop"] { --nav-index: 2; }
.app-bnav[data-active-tab="rewards"] { --nav-index: 3; }
.app-bnav[data-active-tab="refs"] { --nav-index: 4; }
.app-bnav[data-active-tab="profile"] { --nav-index: 5; }
.app-bnav[data-active-tab="admin"] { --nav-index: 5; }

.app-bnav::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: var(--nav-size);
  border-radius: 19px;
  background: #ffffff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.62) inset,
    0 12px 32px rgba(10, 132, 255, 0.18);
  transform: translateX(calc(var(--nav-index) * (var(--nav-size) + var(--nav-gap))));
  transition: transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
}

.bn-btn {
  position: relative;
  z-index: 1;
  min-width: 0;
  height: 58px;
  display: grid;
  place-items: center;
  gap: 2px;
  border: 0;
  border-radius: 19px;
  background: transparent;
  color: var(--color-dim);
  cursor: pointer;
  transition:
    transform 150ms var(--ease-out),
    background-color 180ms var(--ease-out),
    color 180ms var(--ease-out);
}

.bn-btn:hover {
  color: var(--color-ink);
}

.bn-btn:active {
  transform: scale(0.95);
}

.bn-btn.is-active {
  color: #000000;
  background: transparent;
  box-shadow: none;
}

.bn-icon {
  font-size: 18px;
}

.bn-l {
  max-width: 52px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1;
  letter-spacing: -0.02em;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(94px + env(safe-area-inset-bottom));
  z-index: 70;
  max-width: calc(100% - 32px);
  padding: 13px 16px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: #ffffff;
  color: #000000;
  font-weight: 800;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transform: translate(-50%, 16px) scale(0.98);
  pointer-events: none;
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}

.toast.is-show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.toast.is-err {
  background: #0A84FF;
  color: #ffffff;
}

.confetti {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: end center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.68);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms var(--ease-out), visibility 220ms var(--ease-out);
}

.modal.is-open {
  opacity: 1;
  visibility: visible;
}

.modal-card {
  width: min(560px, 100%);
  padding: var(--space-5);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-xl);
  background: #0b0a08;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5);
  transform: translateY(20px) scale(0.98);
  transition: transform 260ms var(--ease-out);
}

.modal.is-open .modal-card {
  transform: translateY(0) scale(1);
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.modal-stage {
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.modal-close {
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-ink);
  cursor: pointer;
}

.modal-h {
  margin: var(--space-5) 0 var(--space-3);
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.modal-p {
  margin: 0;
  color: var(--color-muted);
}

.modal-warn {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid rgba(255, 184, 77, 0.32);
  border-radius: var(--radius-md);
  background: rgba(255, 184, 77, 0.08);
  color: var(--color-warning);
}

.modal-actions {
  justify-content: flex-end;
}

.empty-state {
  padding: var(--space-5);
  border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius-md);
  color: var(--color-muted);
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out), filter 560ms var(--ease-out);
  filter: blur(7px);
}

.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

@media (min-width: 900px) {
  .tab > * {
    animation: blockEnter 720ms var(--ease-out) both;
  }

  .tab > *:nth-child(2) { animation-delay: 70ms; }
  .tab > *:nth-child(3) { animation-delay: 140ms; }
  .tab > *:nth-child(4) { animation-delay: 210ms; }

  @keyframes blockEnter {
    from { opacity: 0; transform: translateY(26px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (max-width: 980px) {
  .page-hero,
  .home-hero,
  .shop-hero,
  .league-hero,
  .refs-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .home-portrait {
    min-height: 440px;
  }

  .hero-photo {
    width: 100%;
    height: 480px;
  }

  .shop-pass-art,
  .league-ledger,
  .refs-sticker {
    justify-self: stretch;
    width: 100%;
  }

  .story-grid,
  .shop-included,
  .league-rules,
  .shop-grid,
  .league-bracket,
  .leagues-stack {
    grid-template-columns: 1fr;
  }

  .story-card.is-tall {
    transform: none;
  }

  .shop-card.is-featured {
    grid-column: auto;
  }

  .command-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body.app-body {
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }

  .app-header {
    position: sticky;
    justify-content: center;
    width: calc(100% - 16px);
    min-height: 54px;
    margin-bottom: var(--space-3);
    padding: 7px;
    border-radius: 20px;
  }

  .brand-stack {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    min-width: 82px;
    padding-left: 0;
    text-align: center;
  }

  .brand-meme,
  .brand-throne {
    font-size: 20px;
  }

  .lang-toggle {
    display: inline-flex;
  }

  .lang-toggle button {
    width: 34px;
    height: 34px;
    font-size: 9px;
  }

  .hdr-tools {
    width: 100%;
    justify-content: space-between;
    gap: 6px;
  }

  .bal-widget {
    display: none;
  }

  .wallet-btn {
    min-height: 34px;
    min-width: 116px;
    max-width: 124px;
    padding: 0 13px;
  }

  .wallet-label {
    font-size: 10.5px;
  }

  .app-main {
    width: calc(100% - 18px);
  }

  .page-hero {
    gap: var(--space-3);
    padding: 0 0 var(--space-4);
  }

  .home-portrait {
    min-height: 218px;
    order: -1;
  }

  .hero-photo {
    height: 236px;
    min-height: 220px;
    transform: translateX(0);
  }

  .home-portrait figcaption {
    display: none;
  }

  .display-title {
    font-size: clamp(34px, 10.2vw, 44px);
    line-height: 0.9;
    letter-spacing: -0.04em;
  }

  .lead-copy {
    display: -webkit-box;
    margin-top: var(--space-3);
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 13px;
    line-height: 1.48;
  }

  .metric-strip,
  .league-ledger,
  .shop-status-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: var(--space-4);
    border-radius: 22px;
  }

  .metric,
  .league-ledger-item,
  .shop-status-card,
  .refs-stat {
    padding: var(--space-3);
  }

  .metric span,
  .league-ledger-item span,
  .shop-status-card span {
    min-height: 24px;
    margin-bottom: 4px;
    font-size: 8px;
    line-height: 1.2;
    letter-spacing: 0.06em;
  }

  .metric strong,
  .league-ledger-item strong,
  .shop-status-card strong {
    font-size: 24px;
  }

  .section-row {
    display: grid;
    gap: 2px;
    margin-bottom: var(--space-3);
  }

  .section-eyebrow {
    font-size: 9px;
  }

  .section-h,
  .section-sub,
  .refs-list-h {
    font-size: clamp(27px, 8.2vw, 36px);
  }

  .arena-card {
    border-radius: 22px;
  }

  .match-meta-row,
  .widget-foot,
  .match-insight {
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }

  .match-meta-row {
    padding: var(--space-4) var(--space-4) 0;
  }

  .widget-vs {
    grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr);
    gap: var(--space-1);
    align-items: start;
    padding: var(--space-3);
  }

  .widget-vs-label {
    width: 38px;
    margin-top: 34px;
    justify-self: center;
    font-size: 16px;
  }

  .widget-team-orb {
    width: clamp(72px, 22vw, 84px);
  }

  .widget-team-name {
    font-size: clamp(17px, 4.8vw, 20px);
    line-height: 0.95;
  }

  .widget-team-votes,
  .widget-foot,
  .match-meta-row {
    font-size: 9px;
  }

  .match-insight {
    margin: var(--space-3) var(--space-4) 0;
    padding: var(--space-3);
    font-size: 10px;
  }

  .match-insight span:last-child {
    display: none;
  }

  .widget-progress {
    margin: 0 var(--space-4);
    height: 8px;
  }

  .widget-cta {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    padding: var(--space-3);
  }

  .widget-vote-btn,
  .shop-primary,
  .shop-secondary,
  .sc-buy,
  .btn,
  .seg-control button {
    min-height: 40px;
    font-size: 11px;
  }

  .seg-control {
    width: 100%;
  }

  .seg-control button {
    min-width: 0;
  }

  .story-card,
  .shop-included article,
  .league-rules article,
  .league-ribbon {
    min-height: auto;
    padding: var(--space-4);
    border-radius: 22px;
  }

  .story-card strong,
  .shop-included strong,
  .league-rules strong {
    margin-bottom: var(--space-2);
    font-size: 17px;
  }

  .story-card p {
    font-size: 13px;
  }

  .shop-included p,
  .league-rules p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 13px;
  }

  .story-icon,
  .shop-included article > span,
  .league-rules article > span {
    width: 28px;
    height: 28px;
    margin-bottom: 0;
  }

  .trust-rail,
  .command-copy small {
    display: none;
  }

  .command-board,
  .arena-section,
  .shop-pack-section,
  .league-map,
  .league-stack-section,
  .refs-list-section {
    padding-top: var(--space-6);
  }

  .command-row {
    min-height: 68px;
    grid-template-columns: 40px minmax(0, 1fr) 14px;
    padding: var(--space-3);
    border-radius: 20px;
  }

  .command-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
  }

  .shop-pass-art {
    transform: rotate(0);
  }

  .shop-pass-art img {
    max-height: 300px;
  }

  .refs-sticker {
    width: min(260px, 100%);
    justify-self: center;
  }

  .profile-shell {
    gap: var(--space-4);
    padding-top: var(--space-4);
  }

  .profile-hero {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-4);
    border-radius: 24px;
  }

  .profile-avatar {
    width: 86px;
    border-radius: 26px;
    font-size: 28px;
  }

  .profile-name {
    font-size: clamp(34px, 10vw, 46px);
  }

  .profile-scoreboard {
    border-radius: 22px;
  }

  .profile-scoreboard article {
    min-height: 108px;
    padding: var(--space-4);
  }

  .shop-status-grid,
  .refs-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shop-status-card.is-wide {
    grid-column: 1 / -1;
  }

  .shop-card {
    min-height: auto;
    border-radius: 22px;
  }

  .sc-media,
  .sc-nft-img {
    min-height: 176px;
  }

  .sc-meta-block,
  .sc-buy-block {
    padding: var(--space-4);
  }

  .sc-name {
    font-size: 30px;
  }

  .sc-price {
    font-size: 18px;
  }

  .sc-buy-block,
  .refs-code-row,
  .refs-link-row {
    grid-template-columns: 1fr;
    display: grid;
  }

  .sc-buy-block {
    align-items: stretch;
  }

  .sc-buy {
    width: 100%;
  }

  .refs-share-row,
  .shop-hero-actions,
  .modal-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .app-bnav {
    --nav-size: 50px;
    --nav-gap: 3px;
    padding: 5px;
    border-radius: 24px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(5, 5, 5, 0.93);
  }

  .bn-btn {
    height: 52px;
    border-radius: 19px;
  }

  .bn-icon {
    font-size: 19px;
  }

  .bn-l {
    display: none;
  }

  .league-view-toggle {
    top: calc(max(8px, env(safe-area-inset-top)) + 64px);
    margin-bottom: var(--space-4);
  }

  .league-view-toggle button {
    min-height: 40px;
    font-size: 13px;
  }
}

@media (max-width: 380px) {
  .app-bnav {
    --nav-size: 46px;
    max-width: calc(100% - 16px);
  }

  .bn-l {
    max-width: 40px;
    font-size: 7px;
  }

  .brand-meme,
  .brand-throne {
    font-size: 18px;
  }
}

/* v48: flatter Telegram-first mobile surface, no visible card frames. */
.app-header {
  border: 0;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035) 42%, rgba(7, 7, 6, 0.86)),
    rgba(5, 5, 5, 0.9);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.34);
}

.app-header::after {
  content: "";
  position: absolute;
  inset: 1px 1px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), transparent);
  opacity: 0.45;
  pointer-events: none;
}

.brand-stack {
  font-family: var(--font-uni);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25));
}

.home-portrait::before,
.shop-pass-art::before {
  display: none;
}

.hero-photo {
  mix-blend-mode: normal;
  filter: contrast(1.02) saturate(0.98);
}

.home-editorial .page-kicker,
.home-editorial .display-title,
.home-editorial .lead-copy {
  display: none;
}

.home-editorial {
  align-self: end;
}

.metric-strip,
.league-ledger,
.shop-status-grid {
  gap: 8px;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.metric,
.league-ledger-item,
.shop-status-card,
.refs-stat {
  border: 0;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.045)),
    #11110f;
}

.metric::before {
  display: none;
}

.metric span,
.league-ledger-item span,
.shop-status-card span,
.refs-stat span,
.match-meta-row,
.widget-foot,
.match-insight,
.widget-team-votes,
.page-kicker,
.section-eyebrow {
  font-family: var(--font-uni);
  letter-spacing: 0.055em;
}

.metric strong,
.league-ledger-item strong,
.shop-status-card strong,
.refs-stat strong,
.widget-team-name,
.section-h,
.section-sub,
.refs-list-h,
.command-copy strong,
.sc-name,
.profile-name,
.profile-scoreboard strong,
.profile-cashbacks h2,
.league-ribbon h3,
.lr-token,
.reward-title,
.admin-panel h2 {
  font-family: var(--font-uni);
  font-weight: 900;
  letter-spacing: -0.025em;
}

.arena-section {
  padding-top: clamp(34px, 7vw, 86px);
}

.arena-section .section-row {
  margin-bottom: var(--space-3);
}

.arena-section .section-eyebrow,
.match-meta-row span:first-child {
  display: none;
}

.arena-card {
  border: 0;
  border-radius: 32px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025)),
    #0b0b09;
  box-shadow: none;
}

.widget-team-orb {
  border: 0;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.16), transparent 28%),
    #171713;
  box-shadow: none;
  cursor: pointer;
}

.team-a .widget-team-orb,
.team-b .widget-team-orb,
.widget-vs-label {
  box-shadow: none;
}

.widget-team-lottie {
  position: relative;
  display: grid;
  place-items: center;
}

.widget-team-lottie[data-token-initial]::before {
  content: attr(data-token-initial);
  display: grid;
  place-items: center;
  width: 74%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(10, 132, 255, 0.92), rgba(77, 163, 255, 0.72));
  color: #080806;
  font-family: var(--font-uni);
  font-size: clamp(24px, 5vw, 44px);
  font-weight: 900;
}

.widget-team-lottie.has-logo::before,
.widget-team-lottie[data-lottie-ready="1"]::before {
  display: none;
}

.widget-vs-label {
  background: var(--color-paper);
  font-family: var(--font-uni);
  transform: none;
}

.widget-progress {
  height: 10px;
  background: rgba(255, 91, 67, 0.28);
}

.widget-progress-a {
  background: linear-gradient(90deg, #4da3ff, #c9f0ff);
}

.match-insight {
  border: 0;
  border-radius: 18px;
  background: rgba(10, 132, 255, 0.08);
}

.widget-vote-btn {
  position: relative;
  min-height: 50px;
  overflow: visible;
  border: 0;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
  color: transparent;
  font-family: var(--font-uni);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform-style: preserve-3d;
  perspective: 320px;
}

.widget-vote-btn::before,
.widget-vote-btn::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform 320ms var(--ease-out), background-color 220ms var(--ease-out), color 220ms var(--ease-out);
}

.widget-vote-btn::before {
  color: #050505;
  background: var(--vote-front, var(--color-paper));
  transform: rotateX(0deg) translateZ(25px);
}

.widget-vote-btn::after {
  color: var(--color-paper);
  background: #11110f;
  transform: rotateX(90deg) translateZ(25px);
}

.widget-vote-a { --vote-front: var(--color-blue); }
.widget-vote-b { --vote-front: var(--color-red); }

.widget-vote-btn:hover:not(:disabled)::before,
.widget-vote-btn:focus-visible:not(:disabled)::before {
  transform: rotateX(-90deg) translateZ(25px);
}

.widget-vote-btn:hover:not(:disabled)::after,
.widget-vote-btn:focus-visible:not(:disabled)::after {
  transform: rotateX(0deg) translateZ(25px);
}

.widget-vote-btn:active:not(:disabled) {
  transform: scale(0.985);
}

.widget-vote-btn:disabled {
  opacity: 0.38;
}

.story-card,
.shop-included article,
.league-rules article,
.command-row,
.shop-card,
.league-stage,
.ls-match,
.league-ribbon,
.profile-hero,
.profile-scoreboard,
.profile-cashbacks,
.reward-node,
.reward-lane,
.refs-panel,
.refs-list-section,
.refs-list li,
.modal-card,
.admin-panel,
.admin-user-row,
.admin-filter,
.promo-strip,
.app-bnav,
.seg-control,
.trust-rail span,
.shop-pass-art img,
.empty-state {
  border: 0 !important;
  box-shadow: none;
}

.profile-scoreboard article + article,
.shop-status-card:nth-child(3),
.refs-stat + .refs-stat {
  border-left: 0 !important;
}

.story-card,
.command-row,
.shop-card,
.league-stage,
.league-ribbon,
.profile-hero,
.profile-scoreboard,
.profile-cashbacks,
.reward-node,
.refs-panel,
.modal-card,
.admin-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.078), rgba(255, 255, 255, 0.028)),
    #0d0d0b;
}

.story-card:hover,
.story-card:focus,
.story-card:focus-within,
.command-row:hover,
.shop-card:hover,
.league-ribbon:hover {
  border-color: transparent;
  box-shadow: none;
}

@media (max-width: 640px) {
  .app-header {
    border: 0;
    border-radius: 0 0 22px 22px;
    width: 100%;
    top: 0;
    margin-bottom: var(--space-3);
  }

  .home-portrait {
    min-height: 216px;
  }

  .hero-photo {
    height: 224px;
    min-height: 210px;
  }

  .metric-strip,
  .league-ledger,
  .shop-status-grid {
    gap: 6px;
  }

  .metric,
  .league-ledger-item,
  .shop-status-card,
  .refs-stat {
    border-radius: 17px;
  }

  .arena-card {
    border-radius: 24px;
  }

  .widget-vote-btn {
    min-height: 42px;
    border-radius: 14px;
  }

  .widget-vote-btn::before {
    transform: rotateX(0deg) translateZ(21px);
  }

  .widget-vote-btn::after {
    transform: rotateX(90deg) translateZ(21px);
  }

  .widget-vote-btn:hover:not(:disabled)::before,
  .widget-vote-btn:focus-visible:not(:disabled)::before {
    transform: rotateX(-90deg) translateZ(21px);
  }

  .widget-vote-btn:hover:not(:disabled)::after,
  .widget-vote-btn:focus-visible:not(:disabled)::after {
    transform: rotateX(0deg) translateZ(21px);
  }
}

/* v49: denser motion polish, custom league marks, and quieter premium surfaces. */
:root {
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
}

.app-header {
  border: 0 !important;
  background:
    linear-gradient(180deg, rgba(20, 21, 18, 0.88), rgba(5, 5, 5, 0.72)),
    rgba(5, 5, 5, 0.62);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34);
}

.app-header::after {
  opacity: 0.22;
}

.home-portrait,
.arena-card,
.widget-team-orb {
  box-shadow: none !important;
}

.home-portrait {
  background: #050505 !important;
}

.hero-photo {
  filter: saturate(0.98) contrast(1.015) !important;
}

.metric-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metric,
.league-ledger-item,
.shop-status-card,
.refs-stat {
  min-height: 68px;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.026)),
    #0b0b09;
}

.metric strong,
.league-ledger-item strong,
.shop-status-card strong,
.refs-stat strong {
  font-size: clamp(25px, 6vw, 36px);
}

.arena-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
    #080807 !important;
  transform-origin: center;
}

.arena-card.is-vote-success {
  animation: voteSuccessLift 760ms var(--ease-out) both;
}

@keyframes voteSuccessLift {
  0% { transform: translateY(0) scale(1); }
  36% { transform: translateY(-3px) scale(1.006); }
  100% { transform: translateY(0) scale(1); }
}

.widget-team.is-loser {
  opacity: 0.4;
  filter: grayscale(1) blur(0.25px);
}

.widget-team.is-loser .widget-team-orb::before,
.widget-team.is-loser .widget-team-orb::after {
  height: 7px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0 18px rgba(255, 91, 67, 0.34);
}

.widget-progress,
.ls-progress {
  height: 14px;
  background: rgba(255, 91, 67, 0.22);
}

.widget-progress {
  margin-top: 4px;
}

.widget-progress-a,
.ls-progress span {
  transform-origin: left center;
  will-change: transform, width;
}

.widget-progress-a {
  background: linear-gradient(90deg, #4da3ff 0%, #8fdfff 48%, #0A84FF 100%);
  transition: width 560ms var(--ease-out);
}

.widget-progress-a.is-filling {
  animation: barFill 760ms var(--ease-out) both;
}

.ls-progress {
  position: relative;
  margin: 4px 0 6px;
}

.ls-progress::after,
.widget-progress::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255,255,255,0.28), transparent 38%, rgba(255,255,255,0.12));
  opacity: 0.34;
  pointer-events: none;
}

.ls-progress span {
  background: linear-gradient(90deg, #4da3ff 0%, #84dfff 48%, #0A84FF 100%);
  animation: barFill 860ms var(--ease-out) both;
}

@keyframes barFill {
  from { transform: scaleX(0); filter: saturate(1.4); }
  to { transform: scaleX(1); filter: saturate(1); }
}

.ls-team.is-loser {
  opacity: 0.4;
  filter: grayscale(1) blur(0.35px);
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.24);
}

.ls-team.is-loser::before,
.ls-team.is-loser::after {
  height: 5px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0 14px rgba(255, 91, 67, 0.42);
}

.league-stage,
.ls-match,
.league-ribbon,
.refs-card,
.refs-list li,
.profile-hero,
.profile-scoreboard,
.profile-cashbacks,
.reward-node,
.reward-lane,
.shop-card,
.story-card,
.command-row {
  border: 0 !important;
  box-shadow: none !important;
}

.lr-medal {
  width: 54px;
  height: 54px;
  overflow: hidden;
  border-radius: 18px;
  background: transparent;
  color: inherit;
}

.lr-medal img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lr-medal-gold { filter: drop-shadow(0 10px 18px rgba(10, 132, 255, 0.12)); }
.lr-medal-silver { filter: drop-shadow(0 10px 18px rgba(77, 163, 255, 0.10)); }
.lr-medal-bronze { filter: drop-shadow(0 10px 18px rgba(255, 138, 76, 0.10)); }

.refs-illustration {
  width: min(430px, 100%);
  aspect-ratio: 1;
  justify-self: center;
  object-fit: contain;
  border-radius: 30%;
  background: #050505;
  filter: saturate(1.05) contrast(1.02);
}

.refs-card {
  background:
    radial-gradient(circle at 12% 0%, rgba(10, 132, 255, 0.11), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.068), rgba(255, 255, 255, 0.024)),
    #0b0b09;
}

.refs-code,
.refs-link {
  border: 0;
}

.btn.is-copied {
  background: var(--color-primary) !important;
  color: #070705 !important;
  transform: scale(0.98);
}

button:active:not(:disabled),
.btn:active:not(:disabled),
.command-row:active,
.shop-card button:active:not(:disabled) {
  transform: scale(0.96);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24) inset !important;
}

.tab.is-entering > *,
[data-league-panel].is-entering > * {
  animation: screenItemEnter 620ms var(--ease-out) both;
}

.tab.is-entering > *:nth-child(2),
[data-league-panel].is-entering > *:nth-child(2) { animation-delay: 70ms; }
.tab.is-entering > *:nth-child(3),
[data-league-panel].is-entering > *:nth-child(3) { animation-delay: 140ms; }
.tab.is-entering > *:nth-child(4),
[data-league-panel].is-entering > *:nth-child(4) { animation-delay: 210ms; }
.tab.is-entering > *:nth-child(5),
[data-league-panel].is-entering > *:nth-child(5) { animation-delay: 280ms; }

@keyframes screenItemEnter {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.tab-leagues [data-league-panel][hidden] {
  display: none !important;
}

.skeleton-stage {
  pointer-events: none;
}

.skeleton-line,
.skeleton-card,
.skeleton-state span {
  display: block;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(246,239,225,0.055), rgba(246,239,225,0.18), rgba(246,239,225,0.055));
  background-size: 220% 100%;
  animation: skeletonSweep 1400ms cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.skeleton-line {
  width: 72%;
  height: 20px;
  margin-bottom: 16px;
}

.skeleton-line.is-short {
  width: 42%;
}

.skeleton-card {
  height: 92px;
  margin-top: 12px;
  border-radius: 20px;
}

.skeleton-state {
  display: grid;
  gap: 12px;
}

.skeleton-state span {
  height: 16px;
}

@keyframes skeletonSweep {
  to { background-position: -220% 0; }
}

.league-view-toggle {
  border: 0 !important;
  background:
    linear-gradient(180deg, rgba(17, 20, 18, 0.84), rgba(2, 3, 3, 0.64)),
    rgba(5, 5, 5, 0.46);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 18px 46px rgba(0, 0, 0, 0.38);
}

.league-view-toggle::before {
  transition: transform 780ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 640px) {
  body.app-body {
    padding-top: max(4px, env(safe-area-inset-top));
  }

  .app-header {
    min-height: 50px;
    margin-bottom: 6px;
    background:
      linear-gradient(180deg, rgba(12, 13, 11, 0.92), rgba(5, 5, 5, 0.76)),
      rgba(5, 5, 5, 0.72);
  }

  .home-hero {
    gap: 6px;
  }

  .home-portrait {
    min-height: clamp(168px, 44svh, 214px) !important;
  }

  .hero-photo {
    height: clamp(170px, 43svh, 214px) !important;
    min-height: 0 !important;
  }

  .metric,
  .league-ledger-item,
  .shop-status-card,
  .refs-stat {
    min-height: 64px;
    padding: 11px 10px;
  }

  .metric span,
  .league-ledger-item span,
  .shop-status-card span,
  .refs-stat span {
    font-size: 8px;
  }

  .metric strong,
  .league-ledger-item strong,
  .shop-status-card strong,
  .refs-stat strong {
    font-size: 24px;
  }

  .widget-progress,
  .ls-progress {
    height: 13px;
  }

  .ls-match {
    min-height: 114px;
  }

  .lr-medal {
    width: 46px;
    height: 46px;
    border-radius: 15px;
  }

  .refs-hero {
    gap: 4px;
  }

  .refs-illustration {
    width: min(270px, 82vw);
  }
}

/* v50: no visible frames, chunkier 3D shop/rewards, calmer status counters. */
body.app-body,
body.stats-body {
  background:
    radial-gradient(circle at 50% -10%, rgba(77, 163, 255, 0.06), transparent 34%),
    #050505;
}

body.app-body *:not(:focus-visible),
body.app-body *::before,
body.app-body *::after,
body.stats-body *:not(:focus-visible),
body.stats-body *::before,
body.stats-body *::after {
  border-color: transparent !important;
}

.app-header,
.stats-header {
  border: 0 !important;
  border-radius: 0 0 26px 26px;
  background:
    linear-gradient(180deg, rgba(5, 5, 5, 0.98), rgba(5, 5, 5, 0.74));
  box-shadow: 0 22px 42px rgba(0, 0, 0, 0.28);
}

.app-header::after,
.stats-header::after {
  display: none !important;
}

.home-editorial .metric-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 0;
  background: transparent;
}

.home-editorial .metric {
  min-height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

.home-editorial .metric span {
  margin: 0 0 5px;
  color: rgba(248, 241, 231, 0.46);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.home-editorial .metric strong {
  color: var(--color-paper);
  font-family: var(--font-body);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.shop-choice {
  position: relative;
  width: min(620px, 100%);
  margin: -10px auto var(--space-5);
  padding: 0 0 var(--space-2);
}

.shop-choice-tabs {
  --choice-index: 0;
  position: sticky;
  top: calc(max(8px, env(safe-area-inset-top)) + 58px);
  z-index: 23;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 7px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 166, 0, 0.18), transparent 58%),
    #11100d;
  box-shadow:
    0 20px 42px rgba(0, 0, 0, 0.36),
    0 4px 0 #050505;
  isolation: isolate;
}

.shop-choice-tabs[data-tier="5"] { --choice-index: 1; }
.shop-choice-tabs[data-tier="10"] { --choice-index: 2; }

.shop-choice-tabs::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 7px;
  bottom: 7px;
  left: 7px;
  width: calc((100% - 26px) / 3);
  border-radius: 18px;
  background:
    linear-gradient(180deg, #5AB8FF, #0A84FF);
  box-shadow:
    0 5px 0 #7b3e00,
    0 14px 24px rgba(255, 153, 0, 0.22);
  transform: translateX(calc(var(--choice-index) * (100% + 6px)));
  transition: transform 680ms var(--ease-out);
}

.shop-choice-tabs button {
  position: relative;
  z-index: 1;
  min-height: 56px;
  display: grid;
  place-items: center;
  gap: 1px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
}

.shop-choice-tabs button span {
  font-family: var(--font-uni);
  font-size: 24px;
  font-weight: 950;
  line-height: 1;
}

.shop-choice-tabs button small {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.shop-choice-tabs button.is-active {
  color: #120900;
}

.shop-choice-card {
  position: relative;
  min-height: 390px;
  margin-top: var(--space-4);
  overflow: hidden;
  border-radius: 34px;
  background:
    radial-gradient(circle at 84% 12%, rgba(255, 176, 0, 0.28), transparent 22%),
    linear-gradient(135deg, rgba(255, 176, 0, 0.12) 0 24%, transparent 24% 100%),
    linear-gradient(180deg, #201b13, #0b0a08);
  box-shadow:
    0 14px 0 #050505,
    0 28px 58px rgba(0, 0, 0, 0.42);
}

.shop-choice-card::before,
.shop-choice-card::after {
  content: "";
  position: absolute;
  width: 38px;
  height: 38px;
  background:
    linear-gradient(135deg, #ffd35a 0 49%, #0A84FF 50% 100%);
  transform: rotate(18deg);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.26);
}

.shop-choice-card::before {
  left: 20px;
  bottom: 22px;
}

.shop-choice-card::after {
  right: 26px;
  top: 28px;
  transform: rotate(-18deg);
}

.choice-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  padding: 8px 14px;
  border-radius: 999px;
  background: #5AB8FF;
  color: #120900;
  font-family: var(--font-uni);
  font-size: 13px;
  font-weight: 950;
}

.choice-art {
  height: 210px;
  display: grid;
  place-items: end center;
  padding: 34px 30px 10px;
}

.choice-art img {
  width: min(390px, 92%);
  max-height: 180px;
  object-fit: contain;
  border-radius: 22px;
  transform: rotate(-1.5deg);
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.34));
}

.choice-copy {
  padding: 4px 24px 18px;
}

.choice-copy h2 {
  margin: 10px 0 8px;
  font-family: var(--font-uni);
  font-size: clamp(35px, 9vw, 58px);
  line-height: 0.9;
  letter-spacing: -0.035em;
}

.choice-copy p {
  max-width: 42ch;
  margin: 0;
  color: rgba(248, 241, 231, 0.68);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.choice-pill {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(10, 132, 255, 0.18);
  color: var(--color-primary);
  font-family: var(--font-uni);
  font-weight: 950;
}

.choice-buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px 24px;
}

.choice-buy strong {
  font-family: var(--font-uni);
  font-size: 34px;
  line-height: 1;
}

.choice-buy small {
  color: rgba(248, 241, 231, 0.48);
  font-size: 12px;
}

.choice-action {
  min-width: 150px;
  min-height: 52px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, #5AB8FF, #0A84FF);
  color: #120900;
  font-family: var(--font-uni);
  font-weight: 950;
  box-shadow:
    0 5px 0 #7b3e00,
    0 18px 24px rgba(240, 138, 0, 0.20);
}

.tab-shop .shop-hero,
.tab-shop .shop-status-grid,
.tab-shop .shop-included,
.shop-pack-section > .section-eyebrow,
.shop-pack-section > .section-h,
.shop-pack-section > .section-sub,
.shop-grid {
  display: none !important;
}

.shop-pack-section {
  margin-top: 0;
}

.promo-strip {
  width: min(620px, 100%);
  margin: 0 auto var(--space-6);
  border: 0 !important;
  background: #11100d;
  box-shadow: 0 10px 0 #050505, 0 22px 48px rgba(0, 0, 0, 0.32);
}

.promo-strip button {
  background: linear-gradient(180deg, #5AB8FF, #0A84FF);
  color: #120900;
}

.refs-card,
.profile-shell,
.profile-hero,
.profile-scoreboard,
.shop-pass-art,
.shop-pass-art img,
.league-bracket,
.league-stage,
.ls-match,
.league-ribbon,
.lr-token,
.stats-summary,
.sum-card,
.m-card {
  border: 0 !important;
  box-shadow: none !important;
}

.rewards-shell {
  position: relative;
  width: min(760px, 100%);
  padding: clamp(18px, 5vw, 34px);
  border-radius: 34px;
  background:
    radial-gradient(circle at 82% 6%, rgba(255, 176, 0, 0.22), transparent 22%),
    linear-gradient(180deg, rgba(255, 176, 0, 0.08), rgba(255, 176, 0, 0.018)),
    #080807;
  box-shadow: 0 18px 0 #050505, 0 36px 70px rgba(0, 0, 0, 0.44);
}

.rewards-shell::before,
.rewards-shell::after {
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  background:
    linear-gradient(135deg, #ffd35a 0 49%, #0A84FF 50% 100%);
  transform: rotate(18deg);
  filter: drop-shadow(8px 8px 0 rgba(0, 0, 0, 0.24));
  pointer-events: none;
}

.rewards-shell::before {
  top: 120px;
  left: 18px;
}

.rewards-shell::after {
  right: 18px;
  bottom: 86px;
  transform: rotate(-14deg);
}

.rewards-head {
  min-height: 132px;
  display: grid;
  align-content: end;
  padding: 18px 20px 22px;
  border-radius: 28px;
  background:
    linear-gradient(135deg, transparent 0 54%, rgba(255, 255, 255, 0.78) 54% 100%),
    linear-gradient(180deg, rgba(255, 176, 0, 0.98), rgba(240, 138, 0, 0.92));
  color: #130900;
  box-shadow: 0 10px 0 #7b3e00, 0 24px 44px rgba(0, 0, 0, 0.34);
}

.rewards-head .page-kicker {
  color: rgba(19, 9, 0, 0.68);
}

.rewards-head .section-h {
  color: #fff7df;
  text-shadow: 0 4px 0 rgba(19, 9, 0, 0.42);
}

.reward-lanes {
  gap: 16px;
  margin-top: 34px;
}

.reward-lanes::before {
  left: 30px;
  width: 8px;
  border-radius: 999px;
  background: linear-gradient(#5AB8FF, #0A84FF, rgba(255, 255, 255, 0.08));
  box-shadow: 0 0 22px rgba(255, 176, 0, 0.24);
}

.reward-step {
  grid-template-columns: 60px 1fr 1fr;
  gap: 12px;
}

.reward-index {
  width: 56px;
  height: 56px;
  background: linear-gradient(180deg, #5AB8FF, #0A84FF);
  box-shadow: 0 6px 0 #7b3e00;
  font-family: var(--font-uni);
}

.reward-node {
  position: relative;
  min-height: 86px;
  overflow: hidden;
  border: 0 !important;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 176, 0, 0.13), transparent 45%),
    linear-gradient(180deg, #2e2a22, #171410);
  box-shadow: 0 7px 0 #050505, 0 18px 26px rgba(0, 0, 0, 0.26) !important;
  transform: translateZ(0);
}

.reward-node::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, transparent 0 50%, #5AB8FF 51% 100%);
}

.reward-node::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 18px;
  height: 18px;
  background:
    linear-gradient(135deg, #ffd35a 0 49%, #0A84FF 50% 100%);
  transform: rotate(16deg);
}

.reward-node span {
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-uni);
  font-size: 11px;
}

.reward-node strong {
  font-family: var(--font-uni);
  font-size: 24px;
  line-height: 1;
}

.reward-node.pass {
  background:
    linear-gradient(135deg, rgba(10, 132, 255, 0.11), transparent 45%),
    linear-gradient(180deg, #262c18, #15180e);
}

.reward-node.is-locked {
  opacity: 0.82;
  filter: saturate(0.76);
}

.reward-node:active {
  transform: translateY(4px) scale(0.98);
  box-shadow: 0 3px 0 #050505, 0 12px 18px rgba(0, 0, 0, 0.22) !important;
}

.stats-foot {
  display: none !important;
}

@media (max-width: 640px) {
  .home-editorial .metric-strip {
    gap: 10px;
  }

  .home-editorial .metric span {
    font-size: 9px;
  }

  .home-editorial .metric strong {
    font-size: 24px;
  }

  .shop-choice {
    margin-top: -4px;
  }

  .shop-choice-tabs {
    top: calc(max(6px, env(safe-area-inset-top)) + 54px);
    border-radius: 22px;
  }

  .shop-choice-card {
    min-height: 420px;
    border-radius: 28px;
  }

  .choice-art {
    height: 188px;
    padding: 28px 18px 0;
  }

  .choice-art img {
    width: min(282px, 86%);
    max-height: 154px;
  }

  .choice-copy,
  .choice-buy {
    padding-left: 18px;
    padding-right: 18px;
  }

  .choice-copy {
    padding-top: 0;
    padding-bottom: 10px;
  }

  .choice-copy h2 {
    margin-top: 8px;
    font-size: 32px;
    max-width: 100%;
  }

  .choice-copy p {
    display: none;
  }

  .choice-buy {
    padding-top: 6px;
    padding-bottom: 24px;
  }

  .choice-action {
    min-width: 128px;
  }

  .rewards-shell {
    padding: 12px;
    border-radius: 28px;
  }

  .rewards-head {
    min-height: 116px;
    border-radius: 22px;
  }

  .reward-step {
    grid-template-columns: 42px 1fr 1fr;
    gap: 10px;
  }

  .reward-index {
    width: 40px;
    height: 40px;
    font-size: 13px;
  }

  .reward-lanes::before {
    left: 19px;
    width: 6px;
  }

  .reward-node {
    min-height: 78px;
    padding: 12px;
  }

  .reward-node strong {
    font-size: 19px;
  }
}

/* v51: plush Meme Throne material. The 3D structure stays, but the palette returns
   to the product language: blue fleece, milk foam, black velvet, acid plush. */
:root {
  --plush-blue-900: #061722;
  --plush-blue-800: #08263a;
  --plush-blue-700: #0d3654;
  --plush-blue-500: #4da3ff;
  --plush-blue-300: #a9d8ff;
  --plush-cream: #ffffff;
  --plush-cream-2: #cfe4f2;
  --plush-lime: #5AB8FF;
  --plush-green: #55db8b;
  --plush-red: #ff5b43;
  --plush-shadow-blue: rgba(77, 163, 255, 0.22);
  --plush-shadow-lime: rgba(10, 132, 255, 0.20);
  --plush-inset: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -12px 24px rgba(0, 0, 0, 0.14);
}

body.app-body,
body.stats-body {
  background:
    radial-gradient(circle at 50% -14%, rgba(77, 163, 255, 0.14), transparent 34%),
    radial-gradient(circle at 12% 34%, rgba(10, 132, 255, 0.035), transparent 28%),
    #050505;
}

body.app-body::before,
body.stats-body::before {
  background-image:
    radial-gradient(circle at 50% 0%, rgba(77, 163, 255, 0.12), transparent 34%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.74' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  opacity: 0.32;
}

.app-header,
.stats-header {
  background:
    linear-gradient(180deg, rgba(6, 23, 34, 0.96), rgba(4, 7, 9, 0.86));
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.lang-cycle,
.wallet-btn,
.shop-primary,
.shop-secondary,
.sc-buy,
.btn,
.btn-primary,
.btn-ghost,
.btn-share,
.command-row,
.seg-control button,
.league-view-toggle button,
.modal-close,
.promo-strip button,
.admin-form button,
.admin-promo-row button,
.admin-tabs button,
.admin-tournament-form > button,
.choice-action,
.reward-node,
.bn-btn {
  transition:
    transform 150ms var(--ease-out),
    box-shadow 220ms var(--ease-out),
    filter 220ms var(--ease-out),
    background-color 220ms var(--ease-out);
}

.wallet-btn,
.shop-primary,
.sc-buy,
.btn-primary,
.btn-share-tg,
.choice-action,
.promo-strip button,
.admin-form button,
.admin-tournament-form > button {
  background:
    radial-gradient(circle at 24% 16%, rgba(255, 255, 255, 0.58), transparent 24%),
    linear-gradient(180deg, var(--plush-cream), var(--plush-cream-2));
  color: var(--plush-blue-900);
  box-shadow:
    0 7px 0 rgba(49, 86, 111, 0.86),
    0 18px 28px rgba(0, 0, 0, 0.28),
    var(--plush-inset) !important;
}

.wallet-btn:active,
.shop-primary:active,
.sc-buy:active,
.btn-primary:active,
.btn-share-tg:active,
.choice-action:active,
.promo-strip button:active,
.admin-form button:active,
.admin-tournament-form > button:active {
  transform: translateY(5px) scale(0.98);
  box-shadow:
    0 2px 0 rgba(49, 86, 111, 0.86),
    0 10px 18px rgba(0, 0, 0, 0.22),
    var(--plush-inset) !important;
}

.shop-secondary,
.btn-ghost,
.btn-share-native,
.command-row,
.seg-control button,
.league-view-toggle button,
.admin-tabs button {
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 255, 255, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(13, 54, 84, 0.92), rgba(6, 23, 34, 0.90));
  color: var(--plush-cream);
  box-shadow:
    0 6px 0 rgba(0, 0, 0, 0.68),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -10px 22px rgba(0, 0, 0, 0.18) !important;
}

.shop-secondary:active,
.btn-ghost:active,
.btn-share-native:active,
.command-row:active,
.seg-control button:active,
.league-view-toggle button:active,
.admin-tabs button:active {
  transform: translateY(4px) scale(0.985);
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.68),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -8px 18px rgba(0, 0, 0, 0.18) !important;
}

.widget-vote-btn {
  min-height: 54px;
  border-radius: 999px;
  color: #061018;
  font-family: var(--font-uni);
  font-weight: 950;
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.34);
  box-shadow:
    0 8px 0 rgba(0, 0, 0, 0.48),
    0 18px 28px rgba(0, 0, 0, 0.24),
    var(--plush-inset) !important;
}

.widget-vote-a {
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.55), transparent 22%),
    linear-gradient(180deg, #87caff, var(--plush-blue-500));
}

.widget-vote-b {
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.46), transparent 22%),
    linear-gradient(180deg, #ff9b8a, var(--plush-red));
}

.widget-vote-btn:active:not(:disabled) {
  transform: translateY(5px) scale(0.965);
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.48),
    0 10px 18px rgba(0, 0, 0, 0.22),
    var(--plush-inset) !important;
}

.home-editorial .metric span {
  color: rgba(255, 255, 255, 0.56);
  font-family: var(--font-body);
}

.home-editorial .metric strong {
  color: var(--plush-cream);
  font-family: var(--font-body);
}

.shop-choice-tabs {
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.10), transparent 24%),
    linear-gradient(180deg, rgba(13, 54, 84, 0.98), rgba(6, 23, 34, 0.94));
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.34),
    0 5px 0 rgba(0, 0, 0, 0.68),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.shop-choice-tabs::before {
  background:
    radial-gradient(circle at 24% 14%, rgba(255, 255, 255, 0.66), transparent 24%),
    linear-gradient(180deg, var(--plush-cream), var(--plush-cream-2));
  box-shadow:
    0 6px 0 rgba(49, 86, 111, 0.86),
    0 18px 24px var(--plush-shadow-blue),
    inset 0 -9px 18px rgba(0, 0, 0, 0.10);
}

.shop-choice-tabs button {
  color: rgba(255, 255, 255, 0.72);
}

.shop-choice-tabs button.is-active {
  color: var(--plush-blue-900);
}

.shop-choice-card {
  background:
    radial-gradient(circle at 70% 14%, rgba(77, 163, 255, 0.22), transparent 24%),
    radial-gradient(circle at 20% 84%, rgba(10, 132, 255, 0.13), transparent 24%),
    linear-gradient(135deg, rgba(77, 163, 255, 0.16) 0 25%, transparent 25% 100%),
    linear-gradient(180deg, var(--plush-blue-800), var(--plush-blue-900));
  box-shadow:
    0 14px 0 rgba(0, 0, 0, 0.74),
    0 28px 58px rgba(0, 0, 0, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.shop-choice-card::before,
.shop-choice-card::after,
.rewards-shell::before,
.rewards-shell::after,
.reward-node::after {
  background:
    linear-gradient(135deg, var(--plush-blue-300) 0 49%, var(--plush-blue-500) 50% 100%);
  box-shadow:
    8px 8px 0 rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

.choice-badge,
.choice-pill {
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.46), transparent 24%),
    linear-gradient(180deg, var(--plush-lime), var(--plush-green));
  color: var(--plush-blue-900);
  box-shadow:
    0 5px 0 rgba(23, 91, 62, 0.74),
    inset 0 -8px 14px rgba(0, 0, 0, 0.10);
}

.choice-copy h2,
.choice-buy strong {
  color: var(--plush-cream);
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.34);
}

.choice-copy p,
.choice-buy small {
  color: rgba(255, 255, 255, 0.72);
}

.choice-art img {
  background: #020609;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 18px 30px rgba(0, 0, 0, 0.34);
}

.promo-strip {
  background:
    radial-gradient(circle at 18% 0%, rgba(77, 163, 255, 0.18), transparent 30%),
    linear-gradient(180deg, rgba(13, 54, 84, 0.96), rgba(6, 23, 34, 0.92));
  box-shadow:
    0 10px 0 rgba(0, 0, 0, 0.68),
    0 24px 44px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.promo-strip input {
  background: rgba(0, 0, 0, 0.30);
  color: var(--plush-cream);
}

.promo-strip button {
  background:
    radial-gradient(circle at 24% 16%, rgba(255, 255, 255, 0.58), transparent 24%),
    linear-gradient(180deg, var(--plush-cream), var(--plush-cream-2));
  color: var(--plush-blue-900);
}

.rewards-shell {
  background:
    radial-gradient(circle at 78% 4%, rgba(77, 163, 255, 0.20), transparent 24%),
    radial-gradient(circle at 10% 26%, rgba(10, 132, 255, 0.10), transparent 24%),
    linear-gradient(180deg, rgba(77, 163, 255, 0.08), rgba(77, 163, 255, 0.018)),
    #05090c;
  box-shadow:
    0 18px 0 rgba(0, 0, 0, 0.72),
    0 36px 70px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.rewards-head {
  background:
    linear-gradient(135deg, transparent 0 54%, rgba(255, 255, 255, 0.88) 54% 100%),
    radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.28), transparent 24%),
    linear-gradient(180deg, #7ec4ff, var(--plush-blue-500));
  color: var(--plush-blue-900);
  box-shadow:
    0 10px 0 #1b5c93,
    0 24px 44px rgba(0, 0, 0, 0.34),
    inset 0 -16px 28px rgba(0, 0, 0, 0.12);
}

.rewards-head .page-kicker {
  color: rgba(6, 23, 34, 0.74);
}

.rewards-head .section-h {
  color: var(--plush-cream);
  text-shadow:
    0 4px 0 rgba(6, 23, 34, 0.42),
    0 12px 18px rgba(0, 0, 0, 0.22);
}

.reward-lanes::before {
  background: linear-gradient(var(--plush-blue-500), var(--plush-lime), rgba(255, 255, 255, 0.08));
  box-shadow:
    0 0 22px var(--plush-shadow-blue),
    0 0 28px var(--plush-shadow-lime);
}

.reward-index {
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.54), transparent 24%),
    linear-gradient(180deg, var(--plush-cream), var(--plush-cream-2));
  color: var(--plush-blue-900);
  box-shadow:
    0 6px 0 rgba(49, 86, 111, 0.86),
    0 12px 20px rgba(0, 0, 0, 0.24);
}

.reward-node {
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.10), transparent 24%),
    linear-gradient(135deg, rgba(77, 163, 255, 0.12), transparent 45%),
    linear-gradient(180deg, var(--plush-blue-800), var(--plush-blue-900));
  box-shadow:
    0 7px 0 rgba(0, 0, 0, 0.72),
    0 18px 26px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

.reward-node::before {
  background: linear-gradient(135deg, transparent 0 50%, var(--plush-blue-500) 51% 100%);
}

.reward-node.pass {
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.10), transparent 24%),
    linear-gradient(135deg, rgba(10, 132, 255, 0.10), transparent 45%),
    linear-gradient(180deg, #123425, #071b15);
}

.reward-node.pass::before {
  background: linear-gradient(135deg, transparent 0 50%, var(--plush-lime) 51% 100%);
}

.reward-node span {
  color: rgba(255, 255, 255, 0.58);
}

.reward-node strong {
  color: var(--plush-cream);
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.30);
}

.app-bnav {
  background:
    radial-gradient(circle at 28% 4%, rgba(255, 255, 255, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(6, 23, 34, 0.98), rgba(3, 7, 10, 0.98));
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.app-bnav::before {
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.62), transparent 24%),
    linear-gradient(180deg, var(--plush-cream), var(--plush-cream-2));
  box-shadow:
    0 5px 0 rgba(49, 86, 111, 0.86),
    0 14px 22px rgba(77, 163, 255, 0.18),
    inset 0 -8px 16px rgba(0, 0, 0, 0.10);
}

@media (max-width: 640px) {
  .shop-choice-card {
    min-height: 410px;
  }

  .choice-action {
    min-width: 126px;
  }

  .rewards-head .section-h {
    font-size: clamp(28px, 8vw, 38px);
  }
}

/* v52: home and leagues rebuilt around the Meme Throne plush material. */
.app-main {
  position: relative;
}

.tab {
  animation: tabEnter 520ms var(--ease-out) both;
}

@keyframes tabEnter {
  from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.app-header {
  width: min(920px, calc(100vw - 16px));
  min-height: 62px;
  margin-inline: auto;
  padding: 10px 12px;
  border-radius: 0 0 28px 28px;
  background:
    radial-gradient(circle at 48% -12%, rgba(77, 163, 255, 0.32), transparent 34%),
    linear-gradient(180deg, rgba(6, 23, 34, 0.98), rgba(2, 7, 10, 0.94));
}

.brand-stack {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 118px;
  transform: translate(-50%, -50%);
  text-align: center;
  filter:
    drop-shadow(0 3px 0 rgba(0, 0, 0, 0.52))
    drop-shadow(0 12px 20px rgba(77, 163, 255, 0.18));
}

.brand-meme,
.brand-throne {
  font-size: 24px;
  line-height: 0.72;
  letter-spacing: -0.03em;
}

.brand-meme {
  color: #48a4ff;
  -webkit-text-stroke: 0.4px rgba(196, 228, 255, 0.45);
}

.brand-throne {
  color: var(--plush-cream);
}

.hdr-tools {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.bal-widget {
  display: none;
}

.lang-toggle,
.lang-cycle {
  width: 42px;
  height: 42px;
}

.lang-toggle {
  padding: 0;
  background: transparent !important;
  box-shadow: none !important;
}

.lang-cycle {
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 16%, rgba(255, 255, 255, 0.64), transparent 26%),
    linear-gradient(180deg, var(--plush-cream), var(--plush-cream-2)) !important;
  color: var(--plush-blue-900);
  box-shadow:
    0 5px 0 rgba(49, 86, 111, 0.74),
    0 14px 18px rgba(0, 0, 0, 0.26),
    var(--plush-inset) !important;
}

.wallet-btn {
  min-width: 118px;
  height: 42px;
  justify-content: center;
  padding: 0 16px;
  border-radius: 999px;
}

.wallet-dot {
  display: none;
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(20px, 5vw, 54px);
  align-items: center;
  min-height: min(710px, calc(100dvh - 92px));
  padding-top: clamp(12px, 4vw, 42px);
}

.home-portrait {
  position: relative;
  min-height: 390px;
  display: grid;
  place-items: center;
  border-radius: 42px;
  overflow: visible;
  background:
    radial-gradient(circle at 56% 42%, rgba(10, 132, 255, 0.13), transparent 30%),
    radial-gradient(circle at 40% 54%, rgba(77, 163, 255, 0.19), transparent 34%),
    linear-gradient(180deg, rgba(5, 5, 5, 0.28), rgba(5, 5, 5, 0));
}

.home-portrait::before,
.home-portrait::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.home-portrait::before {
  inset: 12% 6% 2%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 48%, rgba(77, 163, 255, 0.18), transparent 52%),
    radial-gradient(circle at 50% 54%, rgba(0, 0, 0, 0.74), transparent 70%);
  filter: blur(18px);
  opacity: 0.72;
}

.home-portrait::after {
  left: 16%;
  right: 16%;
  bottom: 8%;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.52);
  filter: blur(12px);
}

.hero-photo {
  position: relative;
  z-index: 1;
  width: min(520px, 94%);
  border-radius: 30px;
  filter: drop-shadow(0 30px 34px rgba(0, 0, 0, 0.42));
}

.home-editorial {
  position: relative;
  padding: clamp(18px, 4vw, 30px);
  border-radius: 34px;
  background:
    radial-gradient(circle at 82% 10%, rgba(10, 132, 255, 0.14), transparent 26%),
    linear-gradient(180deg, rgba(13, 54, 84, 0.62), rgba(6, 23, 34, 0.18));
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.home-editorial .page-kicker {
  width: fit-content;
  margin-bottom: 12px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(10, 132, 255, 0.12);
  color: var(--plush-lime);
  font-family: var(--font-uni);
  font-size: 11px;
  font-weight: 950;
}

.home-editorial .display-title,
.home-editorial .lead-copy {
  display: none !important;
}

.home-editorial .metric-strip {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0;
}

.home-editorial .metric {
  min-height: 104px;
  padding: 14px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 24% 12%, rgba(255, 255, 255, 0.10), transparent 28%),
    linear-gradient(180deg, rgba(13, 54, 84, 0.84), rgba(6, 23, 34, 0.86)) !important;
  box-shadow:
    0 7px 0 rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

.home-editorial .metric span {
  min-height: 26px;
  color: rgba(255, 255, 255, 0.62);
  font-family: var(--font-uni);
  font-size: 9px;
  line-height: 1.15;
  text-transform: uppercase;
}

.home-editorial .metric strong {
  margin-top: 8px;
  font-family: var(--font-uni);
  font-size: clamp(24px, 6vw, 42px);
  color: var(--plush-cream);
}

.home-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}

.home-cta,
.dock-chip {
  border: 0;
  cursor: pointer;
}

.home-cta {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  border-radius: 22px;
  font-family: var(--font-uni);
  font-weight: 950;
  transition: transform 150ms var(--ease-out), box-shadow 220ms var(--ease-out);
}

.home-cta span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
}

.home-cta-primary {
  background:
    radial-gradient(circle at 24% 16%, rgba(255, 255, 255, 0.58), transparent 24%),
    linear-gradient(180deg, var(--plush-lime), var(--plush-green));
  color: var(--plush-blue-900);
  box-shadow:
    0 7px 0 rgba(23, 91, 62, 0.78),
    0 18px 26px rgba(0, 0, 0, 0.24),
    var(--plush-inset);
}

.home-cta-secondary {
  background:
    radial-gradient(circle at 24% 16%, rgba(255, 255, 255, 0.58), transparent 24%),
    linear-gradient(180deg, var(--plush-cream), var(--plush-cream-2));
  color: var(--plush-blue-900);
  box-shadow:
    0 7px 0 rgba(49, 86, 111, 0.78),
    0 18px 26px rgba(0, 0, 0, 0.24),
    var(--plush-inset);
}

.home-cta:active,
.dock-chip:active {
  transform: translateY(5px) scale(0.98);
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.54),
    0 10px 16px rgba(0, 0, 0, 0.22),
    var(--plush-inset);
}

.home-league-dock {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: -20px 0 var(--space-6);
}

.dock-chip {
  min-height: 88px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 14px;
  border-radius: 24px;
  color: #110f0b;
  text-align: left;
  box-shadow:
    0 8px 0 rgba(0, 0, 0, 0.58),
    0 18px 28px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 150ms var(--ease-out), box-shadow 220ms var(--ease-out);
}

.dock-chip span {
  font-family: var(--font-uni);
  font-size: 18px;
  font-weight: 950;
}

.dock-chip strong {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 900;
}

.dock-gold {
  background:
    radial-gradient(circle at 24% 14%, rgba(255, 255, 255, 0.54), transparent 22%),
    linear-gradient(180deg, #ffe7a0, #d7a956 62%, #90631e);
}

.dock-silver {
  background:
    radial-gradient(circle at 24% 14%, rgba(255, 255, 255, 0.68), transparent 22%),
    linear-gradient(180deg, #f8fbff, #bac9d5 62%, #6f8494);
}

.dock-bronze {
  background:
    radial-gradient(circle at 24% 14%, rgba(255, 255, 255, 0.50), transparent 22%),
    linear-gradient(180deg, #ffc798, #b97940 62%, #6e3f1e);
}

.arena-section {
  position: relative;
}

.arena-section .section-row {
  margin-bottom: 12px;
}

.arena-section .section-eyebrow {
  display: none;
}

.arena-section .section-h {
  font-family: var(--font-uni);
  font-size: clamp(35px, 9vw, 72px);
  line-height: 0.86;
  text-transform: uppercase;
  text-shadow: 0 5px 0 rgba(0, 0, 0, 0.36);
}

.arena-card {
  background:
    radial-gradient(circle at 20% 16%, rgba(77, 163, 255, 0.18), transparent 26%),
    radial-gradient(circle at 82% 18%, rgba(255, 91, 67, 0.15), transparent 26%),
    linear-gradient(180deg, rgba(13, 54, 84, 0.72), rgba(6, 23, 34, 0.92));
  box-shadow:
    0 12px 0 rgba(0, 0, 0, 0.62),
    0 28px 56px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
}

.story-grid {
  margin-top: var(--space-7);
}

.story-card {
  min-height: 86px;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.09), transparent 24%),
    linear-gradient(180deg, rgba(13, 54, 84, 0.78), rgba(6, 23, 34, 0.88));
  box-shadow:
    0 7px 0 rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.story-card p {
  grid-column: 2;
  max-height: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height 260ms var(--ease-out), opacity 200ms var(--ease-out), transform 220ms var(--ease-out);
}

.story-card:hover p,
.story-card:focus-within p,
.story-card:focus p {
  max-height: 90px;
  opacity: 1;
  transform: translateY(0);
}

.story-icon {
  width: 42px;
  height: 42px;
  margin: 0;
  background:
    radial-gradient(circle at 24% 16%, rgba(255, 255, 255, 0.58), transparent 24%),
    linear-gradient(180deg, var(--plush-lime), var(--plush-green));
  color: var(--plush-blue-900);
  box-shadow:
    0 5px 0 rgba(23, 91, 62, 0.78),
    var(--plush-inset);
}

.trust-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: var(--space-5) 0 var(--space-7);
}

.trust-rail span {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(13, 54, 84, 0.52);
  color: rgba(255, 255, 255, 0.80);
  font-size: 12px;
  font-weight: 850;
}

.trust-rail svg {
  color: var(--plush-lime);
  flex: 0 0 auto;
}

.command-board {
  background:
    radial-gradient(circle at 16% 8%, rgba(77, 163, 255, 0.14), transparent 26%),
    linear-gradient(180deg, rgba(13, 54, 84, 0.48), rgba(6, 23, 34, 0.18));
}

.command-board .section-eyebrow {
  display: none;
}

.command-board .section-sub {
  font-family: var(--font-uni);
  font-size: clamp(30px, 8vw, 52px);
  text-transform: uppercase;
  color: var(--plush-cream);
}

.command-row {
  min-height: 76px;
  border-radius: 24px;
}

.command-icon {
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.46), var(--plush-inset);
}

.command-blue { background: linear-gradient(180deg, #89caff, var(--plush-blue-500)); color: var(--plush-blue-900); }
.command-gold { background: linear-gradient(180deg, #ffe7a0, #d7a956); color: #211303; }
.command-green { background: linear-gradient(180deg, var(--plush-lime), var(--plush-green)); color: var(--plush-blue-900); }
.command-red { background: linear-gradient(180deg, #ff9b8a, var(--plush-red)); color: #1b0705; }

.league-hero {
  display: none !important;
}

.league-view-toggle {
  position: sticky;
  top: calc(max(6px, env(safe-area-inset-top)) + 64px);
  z-index: 18;
  width: min(620px, 100%);
  margin: 6px auto 26px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.10), transparent 24%),
    linear-gradient(180deg, rgba(13, 54, 84, 0.96), rgba(5, 11, 15, 0.96));
  box-shadow:
    0 12px 0 rgba(0, 0, 0, 0.62),
    0 24px 40px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.league-view-toggle::before {
  background:
    radial-gradient(circle at 24% 16%, rgba(255, 255, 255, 0.60), transparent 24%),
    linear-gradient(180deg, var(--plush-cream), var(--plush-cream-2));
  box-shadow:
    0 6px 0 rgba(49, 86, 111, 0.82),
    var(--plush-inset);
}

.league-view-toggle button {
  font-family: var(--font-uni);
  font-size: 14px;
  font-weight: 950;
}

.league-map .section-row {
  margin-bottom: 12px;
}

.league-map .section-eyebrow,
.league-stack-section > .section-eyebrow,
.league-stack-section > .section-sub,
.league-rules {
  display: none !important;
}

.league-map .section-h,
.league-stack-title {
  font-family: var(--font-uni);
  font-size: clamp(34px, 9vw, 62px);
  line-height: 0.9;
  text-transform: uppercase;
}

.league-bracket {
  display: grid;
  gap: 18px;
  padding: 0;
  background: transparent;
}

.league-stage {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  padding: 18px;
  box-shadow:
    0 10px 0 rgba(0, 0, 0, 0.62),
    0 22px 42px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.13) !important;
}

.league-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.55;
  pointer-events: none;
}

.ls-bronze {
  background: linear-gradient(180deg, rgba(120, 74, 38, 0.76), rgba(44, 25, 13, 0.78));
}

.ls-bronze::before {
  background:
    radial-gradient(circle at 82% 0%, rgba(255, 199, 152, 0.30), transparent 28%),
    linear-gradient(135deg, transparent 0 70%, rgba(255, 199, 152, 0.22) 70% 100%);
}

.ls-silver {
  background: linear-gradient(180deg, rgba(160, 177, 190, 0.48), rgba(45, 58, 70, 0.62));
}

.ls-silver::before {
  background:
    radial-gradient(circle at 82% 0%, rgba(248, 251, 255, 0.30), transparent 28%),
    linear-gradient(135deg, transparent 0 70%, rgba(248, 251, 255, 0.18) 70% 100%);
}

.ls-gold {
  background: linear-gradient(180deg, rgba(215, 169, 86, 0.58), rgba(57, 38, 12, 0.66));
}

.ls-gold::before {
  background:
    radial-gradient(circle at 82% 0%, rgba(255, 231, 160, 0.36), transparent 28%),
    linear-gradient(135deg, transparent 0 70%, rgba(255, 231, 160, 0.22) 70% 100%);
}

.ls-head {
  position: relative;
  z-index: 1;
}

.ls-head span,
.ls-head strong {
  font-family: var(--font-uni);
}

.ls-match {
  border-radius: 22px;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.08), transparent 24%),
    rgba(5, 8, 9, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 5px 0 rgba(0, 0, 0, 0.36);
}

.ls-progress {
  height: 8px;
  border-radius: 999px;
}

.ls-progress span {
  border-radius: inherit;
  background:
    linear-gradient(90deg, var(--plush-blue-500), #9be1ff 46%, var(--plush-lime));
  animation: progressGrow 680ms var(--ease-out) both;
}

.league-tier-slider {
  --tier-index: 0;
  position: sticky;
  top: calc(max(6px, env(safe-area-inset-top)) + 138px);
  z-index: 16;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: min(620px, 100%);
  margin: 0 auto 18px;
  padding: 7px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.10), transparent 24%),
    linear-gradient(180deg, rgba(13, 54, 84, 0.94), rgba(5, 11, 15, 0.96));
  box-shadow:
    0 10px 0 rgba(0, 0, 0, 0.62),
    0 22px 34px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  isolation: isolate;
}

.league-tier-slider[data-tier="silver"] { --tier-index: 1; }
.league-tier-slider[data-tier="bronze"] { --tier-index: 2; }

.league-tier-slider::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 7px;
  bottom: 7px;
  left: 7px;
  width: calc((100% - 26px) / 3);
  border-radius: 20px;
  background:
    radial-gradient(circle at 24% 14%, rgba(255, 255, 255, 0.58), transparent 24%),
    linear-gradient(180deg, var(--tier-fill-a, #ffe7a0), var(--tier-fill-b, #d7a956));
  box-shadow:
    0 6px 0 rgba(0, 0, 0, 0.42),
    var(--plush-inset);
  transform: translateX(calc(var(--tier-index) * (100% + 6px)));
  transition: transform 720ms var(--ease-out), background 260ms var(--ease-out);
}

.league-tier-slider[data-tier="gold"] { --tier-fill-a: #ffe7a0; --tier-fill-b: #d7a956; }
.league-tier-slider[data-tier="silver"] { --tier-fill-a: #f8fbff; --tier-fill-b: #bac9d5; }
.league-tier-slider[data-tier="bronze"] { --tier-fill-a: #ffc798; --tier-fill-b: #b97940; }

.league-tier-slider button {
  min-height: 62px;
  display: grid;
  place-items: center;
  gap: 2px;
  border: 0;
  border-radius: 20px;
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  font-family: var(--font-uni);
  font-weight: 950;
  cursor: pointer;
}

.league-tier-slider button span {
  font-size: 15px;
}

.league-tier-slider button small {
  font-size: 9px;
  opacity: 0.72;
  text-transform: uppercase;
}

.league-tier-slider button.is-active {
  color: #11100b;
}

.league-tier-card {
  min-height: 520px;
  padding: 22px;
  border-radius: 34px;
  animation: leagueCardEnter 520ms var(--ease-out) both;
}

@keyframes leagueCardEnter {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.league-tier-card .lr-head {
  align-items: flex-start;
}

.league-tier-card .lr-name {
  font-family: var(--font-uni);
  font-size: clamp(38px, 11vw, 78px);
  line-height: 0.88;
  text-transform: uppercase;
}

.lr-sub {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-weight: 850;
}

.lg-gold {
  background:
    radial-gradient(circle at 80% 8%, rgba(255, 231, 160, 0.42), transparent 24%),
    linear-gradient(180deg, rgba(215, 169, 86, 0.32), rgba(41, 27, 8, 0.80));
}

.lg-silver {
  background:
    radial-gradient(circle at 80% 8%, rgba(248, 251, 255, 0.34), transparent 24%),
    linear-gradient(180deg, rgba(186, 201, 213, 0.28), rgba(28, 39, 50, 0.82));
}

.lg-bronze {
  background:
    radial-gradient(circle at 80% 8%, rgba(255, 199, 152, 0.34), transparent 24%),
    linear-gradient(180deg, rgba(185, 121, 64, 0.32), rgba(42, 23, 11, 0.82));
}

.lr-medal {
  width: 68px;
  height: 68px;
  padding: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 26% 14%, rgba(255, 255, 255, 0.72), transparent 24%),
    linear-gradient(180deg, var(--medal-a), var(--medal-b));
  box-shadow:
    0 7px 0 rgba(0, 0, 0, 0.48),
    0 18px 26px rgba(0, 0, 0, 0.22),
    var(--plush-inset);
}

.lr-medal-gold { --medal-a: #ffe7a0; --medal-b: #d7a956; }
.lr-medal-silver { --medal-a: #f8fbff; --medal-b: #bac9d5; }
.lr-medal-bronze { --medal-a: #ffc798; --medal-b: #b97940; }

.lr-token {
  min-height: 54px;
  border-radius: 18px;
  background: rgba(5, 8, 9, 0.48);
  box-shadow:
    0 5px 0 rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.lt-logo {
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.60), transparent 25%),
    linear-gradient(135deg, var(--plush-lime), var(--plush-blue-500));
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.34),
    var(--plush-inset);
}

.refs-hero {
  min-height: min(620px, calc(100dvh - 120px));
  align-items: center;
}

.refs-illustration.refs-gif {
  width: min(430px, 92vw);
  height: min(430px, 92vw);
  margin-inline: auto;
  filter:
    drop-shadow(0 24px 28px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 32px rgba(77, 163, 255, 0.12));
}

.refs-illustration.refs-gif svg {
  width: 100% !important;
  height: 100% !important;
}

.app-bnav {
  width: min(640px, calc(100vw - 36px));
  min-height: 72px;
  padding: 8px;
  border-radius: 28px;
}

.app-bnav::before {
  top: 8px;
  bottom: 8px;
  left: 8px;
  width: calc((100% - 16px) / 6);
  border-radius: 22px;
}

.bn-btn {
  min-width: 0;
  border-radius: 22px;
  color: rgba(255, 255, 255, 0.58);
}

.bn-btn.is-active {
  color: var(--plush-blue-900);
}

.bn-icon {
  font-size: 19px;
}

.bn-l {
  display: none;
}

@media (max-width: 760px) {
  .home-hero {
    display: block;
    min-height: 0;
    padding-top: 2px;
  }

  .home-portrait {
    min-height: 218px;
    margin-bottom: 12px;
    border-radius: 0;
    background: transparent;
  }

  .home-portrait::before {
    inset: 20% 8% 8%;
    opacity: 0.48;
  }

  .hero-photo {
    width: min(340px, 94%);
  }

  .home-editorial {
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  .home-editorial .page-kicker {
    display: none;
  }

  .home-editorial .metric-strip {
    gap: 8px;
  }

  .home-editorial .metric {
    min-height: 86px;
    padding: 12px 9px;
    border-radius: 20px;
  }

  .home-editorial .metric span {
    font-size: 8px;
  }

  .home-editorial .metric strong {
    font-size: 25px;
  }

  .home-action-row {
    margin-top: 12px;
  }

  .home-cta {
    min-height: 54px;
    border-radius: 20px;
    font-size: 12px;
  }

  .home-league-dock {
    gap: 8px;
    margin: 18px 0 28px;
  }

  .dock-chip {
    min-height: 72px;
    padding: 11px;
    border-radius: 20px;
  }

  .dock-chip span {
    font-size: 13px;
  }

  .dock-chip strong {
    font-size: 9px;
  }

  .arena-section .section-h {
    font-size: clamp(32px, 10vw, 42px);
  }

  .trust-rail {
    grid-template-columns: 1fr;
  }

  .story-grid {
    gap: 12px;
    margin-top: 36px;
  }

  .story-card {
    min-height: 72px;
    padding: 13px;
  }

  .story-card:hover p,
  .story-card:focus-within p,
  .story-card:focus p {
    max-height: 120px;
  }

  .league-view-toggle {
    top: calc(max(6px, env(safe-area-inset-top)) + 58px);
  }

  .league-tier-slider {
    top: calc(max(6px, env(safe-area-inset-top)) + 132px);
  }

  .league-tier-slider button {
    min-height: 56px;
  }

  .league-tier-card {
    min-height: 560px;
    padding: 18px;
  }

  .lr-medal {
    width: 58px;
    height: 58px;
  }

  .refs-hero {
    min-height: 0;
  }

  .refs-illustration.refs-gif {
    width: min(330px, 90vw);
    height: min(330px, 90vw);
  }
}

/* v53: faster plush UI pass, cropped NFT cards, reward item art, rebuilt profile. */
button,
a,
[role="button"],
.bn-btn,
.home-cta,
.dock-chip,
.command-row {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
.bn-btn:focus:not(:focus-visible),
.home-cta:focus:not(:focus-visible),
.dock-chip:focus:not(:focus-visible),
.command-row:focus:not(:focus-visible) {
  outline: 0 !important;
  box-shadow: inherit;
}

.tab {
  animation: tabEnterFast 280ms var(--ease-out) both;
}

@keyframes tabEnterFast {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.app-body::before {
  opacity: 0.07;
}

@media (max-width: 760px) {
  .app-body::before,
  .app-body::after,
  .home-portrait::before,
  .shop-choice-card::before,
  .shop-choice-card::after,
  .rewards-shell::before,
  .rewards-shell::after {
    animation: none !important;
    filter: none !important;
  }
}

.app-header {
  --header-pad: 7px;
  width: min(620px, calc(100vw - 18px));
  min-height: 56px;
  padding: var(--header-pad);
  border: 0 !important;
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 6%, rgba(255, 255, 255, 0.10), transparent 22%),
    linear-gradient(180deg, rgba(12, 48, 73, 0.98), rgba(5, 17, 26, 0.98));
  box-shadow:
    0 10px 0 rgba(0, 0, 0, 0.54),
    0 18px 28px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

.app-header::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 42px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.66), transparent 24%),
    linear-gradient(180deg, #d9eef9, #b8d4e5);
  box-shadow: var(--plush-inset);
  pointer-events: none;
}

.lang-toggle,
.lang-toggle button {
  background: transparent !important;
  box-shadow: none !important;
}

.lang-toggle {
  width: 42px;
  height: 42px;
}

.lang-toggle button {
  color: var(--plush-blue-900);
  font-family: var(--font-uni);
  font-size: 10px;
  font-weight: 950;
}

.hdr-tools {
  gap: 7px;
}

.bal-widget {
  display: none;
}

.wallet-btn {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 11px;
}

.brand-stack {
  filter: none;
}

.home-hero {
  background: transparent !important;
}

.home-portrait {
  background: #05121c !important;
  box-shadow: none !important;
}

.home-portrait::before,
.hero-photo::after {
  display: none !important;
}

.hero-photo {
  mix-blend-mode: normal;
  border-radius: 0;
  filter: none !important;
  mask-image: radial-gradient(ellipse 72% 60% at 50% 46%, #000 64%, rgba(0,0,0,0.74) 78%, transparent 100%);
}

.tab-home {
  display: flex;
  flex-direction: column;
}

.tab-home .home-hero { order: 1; }
.tab-home .arena-section { order: 2; }
.tab-home .home-league-dock { order: 3; }
.tab-home .story-grid { order: 4; }
.tab-home .trust-rail { order: 5; }
.tab-home .command-board { order: 6; }

.tab[hidden] {
  display: none !important;
}

.home-editorial .metric-strip {
  border-radius: 24px;
  padding: 6px;
  background:
    linear-gradient(180deg, rgba(12, 48, 73, 0.92), rgba(5, 17, 26, 0.96)) !important;
  box-shadow:
    0 8px 0 rgba(0, 0, 0, 0.50),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.home-editorial .metric {
  min-height: 72px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03) !important;
  box-shadow: none !important;
}

.home-editorial .metric span {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0;
}

.home-editorial .metric strong {
  font-family: var(--font-body);
  font-size: 25px;
  font-weight: 850;
}

.home-action-row {
  gap: 10px;
}

.home-cta,
.dock-chip,
.command-row,
.choice-action,
.sc-buy,
.widget-vote-btn {
  position: relative;
  overflow: hidden;
}

.home-cta::after,
.command-row::after,
.choice-action::after,
.sc-buy::after {
  content: "";
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  transform: rotate(12deg);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.62) 0 34%, transparent 35% 52%, rgba(0,0,0,0.15) 53% 100%),
    linear-gradient(180deg, #77c2ff, #2f93ec);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.48);
  opacity: 0.82;
  pointer-events: none;
}

.home-cta-secondary::after,
.command-row:nth-child(2)::after {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.68) 0 34%, transparent 35% 52%, rgba(0,0,0,0.16) 53% 100%),
    linear-gradient(180deg, #ffe7a0, #d7a956);
}

.arena-card {
  border: 0 !important;
  background:
    linear-gradient(115deg, rgba(65, 157, 237, 0.18), transparent 36%),
    linear-gradient(245deg, rgba(255, 96, 76, 0.14), transparent 38%),
    linear-gradient(180deg, rgba(12, 48, 73, 0.78), rgba(5, 17, 26, 0.96)) !important;
  box-shadow:
    0 9px 0 rgba(0, 0, 0, 0.56),
    0 18px 34px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.arena-card::before {
  content: "";
  position: absolute;
  right: -18px;
  top: 28px;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  transform: rotate(18deg);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.50) 0 32%, transparent 33% 54%, rgba(0,0,0,0.20) 55% 100%),
    linear-gradient(180deg, var(--plush-lime), var(--plush-green));
  opacity: 0.42;
  pointer-events: none;
}

.widget-team-orb {
  border: 0 !important;
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,0.24), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.16)) !important;
}

.widget-team-lottie.has-fallback-token {
  display: grid;
  place-items: center;
}

.token-fallback-mark {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.82), transparent 18%),
    conic-gradient(from 210deg, #2b8fe8, #b8ff55, #2b8fe8);
  box-shadow:
    inset 0 -10px 16px rgba(0,0,0,0.22),
    0 8px 14px rgba(0,0,0,0.24);
}

.token-fallback-red {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.76), transparent 18%),
    conic-gradient(from 210deg, #ff6a52, #ffe7a0, #ff6a52);
}

.token-fallback-mark b {
  font-family: var(--font-uni);
  font-size: 21px;
  color: #06121c;
  text-shadow: 0 1px 0 rgba(255,255,255,0.34);
}

.widget-progress,
.ls-progress,
.m-progress {
  height: 11px !important;
  background: rgba(0, 0, 0, 0.32);
}

.ls-progress span,
.widget-progress-a,
.m-progress span {
  background: linear-gradient(90deg, var(--plush-blue-500), #93ddff 42%, var(--plush-lime)) !important;
  animation: progressGrow 760ms var(--ease-out) both;
}

.ls-team.is-loser,
.m-card .is-loser,
.match-loser {
  opacity: 0.4;
  filter: blur(0.45px) saturate(0.72);
  text-decoration: line-through;
  text-decoration-thickness: 4px;
  text-decoration-color: rgba(255, 255, 255, 0.72);
}

.ls-team.is-loser {
  position: relative;
}

.ls-team.is-loser::after {
  content: "";
  position: absolute;
  inset: -4px -8px;
  border-radius: 999px;
  background: rgba(220, 234, 244, 0.12);
  filter: blur(5px);
  pointer-events: none;
}

.home-league-dock {
  margin: 20px 0 34px !important;
}

.dock-chip {
  isolation: isolate;
}

.dock-chip::after {
  content: "";
  position: absolute;
  right: -14px;
  top: -10px;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  transform: rotate(18deg);
  background: rgba(255, 255, 255, 0.24);
  mix-blend-mode: screen;
  z-index: -1;
}

.command-board {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.command-list {
  gap: 12px;
}

.command-row {
  min-height: 82px;
  padding: 14px;
  border: 0 !important;
  background:
    linear-gradient(180deg, rgba(12, 48, 73, 0.74), rgba(5, 17, 26, 0.84)) !important;
}

.shop-choice-tabs {
  border: 0 !important;
}

.shop-choice-card {
  overflow: hidden;
  border: 0 !important;
}

.choice-art,
.sc-media {
  overflow: hidden;
  border-radius: 28px;
  background: #050f17;
}

.choice-art {
  min-height: 262px;
  display: grid;
  place-items: center;
}

.choice-art img,
.sc-media img,
.sc-nft-img {
  width: 132% !important;
  max-width: none !important;
  height: auto !important;
  object-fit: cover;
  object-position: center;
  transform: scale(1.38);
  filter: none !important;
  box-shadow: none !important;
}

.choice-copy p,
.sc-desc {
  display: none !important;
}

.league-stage,
.ls-match,
.league-tier-card,
.lr-token {
  border: 0 !important;
}

.ls-progress {
  margin-top: 10px;
}

.lr-medal {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0;
}

.lr-medal img {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 6px 0 rgba(0,0,0,0.22));
}

.refs-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  min-height: 0;
  padding-top: 6px;
}

.refs-hero .hero-copy {
  text-align: left;
  padding-inline: 0;
}

.refs-hero .page-kicker,
.refs-hero .lead-copy {
  display: none !important;
}

.refs-hero .display-title {
  font-family: var(--font-uni);
  font-size: clamp(38px, 12vw, 58px);
  line-height: 0.9;
  text-transform: uppercase;
}

.refs-illustration.refs-gif {
  width: min(320px, 84vw);
  height: min(320px, 84vw);
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.refs-card {
  border: 0 !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 14%, rgba(216,255,63,0.12), transparent 28%),
    linear-gradient(180deg, rgba(12, 48, 73, 0.78), rgba(5, 17, 26, 0.92)) !important;
  box-shadow:
    0 8px 0 rgba(0,0,0,0.54),
    0 18px 30px rgba(0,0,0,0.22) !important;
}

.refs-card::after,
.profile-shell::after,
.shop-choice::after {
  content: "";
  position: absolute;
  right: -14px;
  bottom: 28px;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  transform: rotate(15deg);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.54) 0 34%, transparent 35% 52%, rgba(0,0,0,0.17) 53% 100%),
    linear-gradient(180deg, var(--plush-lime), var(--plush-green));
  opacity: 0.56;
  pointer-events: none;
}

.rewards-shell {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.rewards-head {
  position: relative;
  overflow: hidden;
  min-height: 144px;
  border-radius: 34px;
  margin-bottom: 20px;
}

.reward-xp-note,
.rewards-head::after {
  content: "1 LVL = 100 XP";
  display: inline-flex;
  width: fit-content;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(5,17,26,0.20);
  color: #06121c;
  font-family: var(--font-uni);
  font-size: 12px;
  font-weight: 950;
}

.rewards-head .reward-xp-note + * {
  display: none;
}

.reward-lanes {
  gap: 12px;
  padding-right: 8px;
}

.reward-lanes::before {
  left: auto !important;
  right: 22px;
  width: 5px;
  opacity: 0.34;
  box-shadow: none !important;
}

.reward-step {
  grid-template-columns: 1fr 1fr 44px;
  gap: 10px;
}

.reward-index {
  grid-column: 3;
  grid-row: 1 / span 1;
  justify-self: end;
  align-self: center;
  width: 36px;
  height: 36px;
  opacity: 0.26;
  filter: grayscale(0.8);
  background: rgba(246,239,225,0.12) !important;
  color: rgba(246,239,225,0.58);
  box-shadow: none !important;
}

.reward-step.is-claimed .reward-index {
  opacity: 1;
  filter: none;
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,0.62), transparent 24%),
    linear-gradient(180deg, var(--plush-lime), var(--plush-green)) !important;
  color: var(--plush-blue-900);
  box-shadow:
    0 0 0 4px rgba(216,255,63,0.12),
    0 0 18px rgba(216,255,63,0.34) !important;
}

.reward-node {
  min-height: 76px;
  border: 0 !important;
  overflow: hidden;
  padding: 14px 72px 14px 15px;
  box-shadow:
    0 6px 0 rgba(0,0,0,0.50),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

.reward-node::before,
.reward-node::after {
  display: none !important;
}

.reward-art {
  position: absolute;
  right: -12px;
  bottom: -10px;
  width: 76px;
  height: 70px;
  border-radius: 18px;
  transform: rotate(-12deg);
  opacity: 0.95;
  pointer-events: none;
}

.reward-art-gift {
  background:
    linear-gradient(90deg, transparent 38%, rgba(255,255,255,0.86) 39% 50%, transparent 51%),
    linear-gradient(0deg, transparent 38%, rgba(255,255,255,0.78) 39% 50%, transparent 51%),
    radial-gradient(circle at 26% 16%, rgba(255,255,255,0.72), transparent 18%),
    linear-gradient(180deg, #89caff, #2f93ec);
  box-shadow: inset 0 -12px 18px rgba(0,0,0,0.18);
}

.reward-art-vote {
  width: 84px;
  height: 58px;
  border-radius: 13px;
  background:
    radial-gradient(circle at 18% 50%, #06121c 0 7px, transparent 8px),
    radial-gradient(circle at 82% 50%, #06121c 0 7px, transparent 8px),
    linear-gradient(90deg, rgba(255,255,255,0.55) 0 2px, transparent 2px 12px) 50% 0 / 14px 100%,
    linear-gradient(180deg, var(--plush-lime), var(--plush-green));
}

.reward-art-cashback {
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(5,17,26,0.90) 0 16px, transparent 17px),
    conic-gradient(from 0deg, var(--plush-lime), #89caff, var(--plush-lime));
}

.reward-node span:not(.reward-art) {
  position: relative;
  z-index: 1;
}

.reward-node strong {
  position: relative;
  z-index: 1;
}

.profile-shell {
  position: relative;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.profile-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  align-items: center;
  min-height: 156px;
  padding: 18px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 84% 0%, rgba(216,255,63,0.16), transparent 28%),
    linear-gradient(180deg, rgba(12,48,73,0.92), rgba(5,17,26,0.98));
  box-shadow:
    0 9px 0 rgba(0,0,0,0.54),
    0 18px 30px rgba(0,0,0,0.22);
}

.profile-hero::after {
  content: var(--profile-level, "LVL 1");
  position: absolute;
  right: 16px;
  top: 16px;
  padding: 7px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--plush-lime), var(--plush-green));
  color: var(--plush-blue-900);
  font-family: var(--font-uni);
  font-size: 11px;
  font-weight: 950;
}

.profile-avatar {
  width: 96px;
  height: 96px;
  border-radius: 28px;
  box-shadow:
    0 7px 0 rgba(0,0,0,0.52),
    inset 0 1px 0 rgba(255,255,255,0.35) !important;
}

.profile-copy .page-kicker {
  display: none;
}

.profile-name {
  font-family: var(--font-uni);
  font-size: clamp(30px, 8vw, 54px);
  line-height: 0.9;
  text-transform: uppercase;
}

.profile-handle {
  margin-top: 8px;
  color: rgba(246,239,225,0.62);
  font-family: var(--font-body);
}

.profile-scoreboard {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 16px;
}

.profile-scoreboard article,
.profile-cashbacks {
  border: 0 !important;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(12,48,73,0.70), rgba(5,17,26,0.88)) !important;
  box-shadow:
    0 6px 0 rgba(0,0,0,0.48),
    inset 0 1px 0 rgba(255,255,255,0.07) !important;
}

.profile-scoreboard span,
.profile-cashbacks h2 {
  font-family: var(--font-uni);
}

.profile-scoreboard strong {
  font-family: var(--font-uni);
  color: var(--plush-cream);
}

.profile-xp-card span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--plush-lime), var(--plush-green));
  color: var(--plush-blue-900);
}

.cashback-pill {
  border: 0 !important;
  border-radius: 18px;
  background: rgba(246,239,225,0.07) !important;
}

.app-bnav {
  --nav-count: 6;
  --nav-pad: 8px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0 !important;
  padding: var(--nav-pad) !important;
}

.app-bnav::before {
  left: var(--nav-pad) !important;
  top: var(--nav-pad) !important;
  bottom: var(--nav-pad) !important;
  width: calc((100% - (var(--nav-pad) * 2)) / var(--nav-count)) !important;
  transform: translateX(calc(var(--nav-index) * 100%)) !important;
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.bn-btn {
  display: grid;
  place-items: center;
}

.bn-icon {
  margin: 0 auto;
}

@media (max-width: 420px) {
  .choice-art {
    min-height: 230px;
  }

  .choice-art img,
  .sc-media img,
  .sc-nft-img {
    width: 150% !important;
    transform: scale(1.44);
  }

  .reward-node {
    min-height: 70px;
    padding-right: 62px;
  }

  .reward-art {
    width: 68px;
    height: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tab,
  .ls-progress span,
  .widget-progress-a,
  .m-progress span {
    animation: none !important;
  }
}

/* Remove expensive blur from page choreography; keeps motion crisp on Telegram WebView. */
.tab.is-entering > *,
[data-league-panel].is-entering > *,
.reveal {
  filter: none !important;
}

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(8px); filter: none; }
  to { opacity: 1; transform: translateY(0); filter: none; }
}

@keyframes screenItemEnter {
  from { opacity: 0; transform: translateY(10px); filter: none; }
  to { opacity: 1; transform: translateY(0); filter: none; }
}

.tab.is-entering > *,
[data-league-panel].is-entering > * {
  animation-duration: 300ms !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* v55: rollback the over-decorated pass and lock the UI back to the plush Meme Throne language. */
body.app-body {
  background: #05121c !important;
}

button,
a,
.bn-btn,
.command-row,
.home-cta,
.dock-chip {
  -webkit-tap-highlight-color: transparent !important;
}

.home-cta::after,
.command-row::after,
.choice-action::after,
.sc-buy::after,
.refs-card::after,
.profile-shell::after,
.shop-choice::after,
.shop-choice-card::before,
.shop-choice-card::after,
.arena-card::before,
.reward-node::before,
.reward-node::after {
  display: none !important;
  content: none !important;
}

.home-portrait {
  min-height: clamp(214px, 52vw, 420px) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.home-portrait::before,
.home-portrait::after {
  display: none !important;
}

.hero-photo {
  width: min(420px, 96%) !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain !important;
  mask-image: radial-gradient(ellipse 82% 68% at 50% 46%, #000 58%, rgba(0, 0, 0, 0.72) 77%, transparent 100%) !important;
}

.arena-card {
  background:
    linear-gradient(115deg, rgba(65, 157, 237, 0.12), transparent 38%),
    linear-gradient(245deg, rgba(255, 96, 76, 0.10), transparent 42%),
    linear-gradient(180deg, rgba(8, 33, 51, 0.92), rgba(4, 15, 23, 0.98)) !important;
}

.widget-vs-label {
  width: 36px !important;
  background: transparent !important;
  color: var(--plush-cream) !important;
  box-shadow: none !important;
  transform: none !important;
  font-family: var(--font-uni) !important;
  font-size: 16px !important;
}

.widget-team-orb {
  width: clamp(86px, 22vw, 128px) !important;
}

.league-view-toggle,
.league-tier-slider {
  border: 0 !important;
  background:
    radial-gradient(circle at 16% 10%, rgba(255, 255, 255, 0.10), transparent 24%),
    linear-gradient(180deg, #0d3654, #061722) !important;
  box-shadow:
    0 7px 0 rgba(0, 0, 0, 0.62),
    0 14px 24px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: none !important;
}

.league-view-toggle button,
.league-tier-slider button {
  background: transparent !important;
  box-shadow: none !important;
}

.league-view-toggle button.is-active,
.league-tier-slider button.is-active {
  color: #06121c !important;
}

.league-stage,
.league-ribbon,
.league-tier-card {
  min-height: 0 !important;
  height: auto !important;
}

.league-tier-card {
  padding: 18px !important;
}

.lr-token:last-child {
  margin-bottom: 0 !important;
}

.shop-choice {
  display: none !important;
}

.tab-shop .shop-hero {
  display: grid !important;
}

.tab-shop .shop-status-grid,
.tab-shop .shop-included {
  display: none !important;
}

.shop-pack-section > .section-h {
  display: block !important;
  margin-bottom: 14px !important;
}

.shop-grid {
  display: grid !important;
  margin-top: 16px !important;
}

.shop-pack-section {
  padding-top: 18px !important;
}

.shop-hero,
.shop-pass-art,
.shop-pack-section,
.shop-card {
  background:
    radial-gradient(circle at 76% 16%, rgba(10, 132, 255, 0.10), transparent 28%),
    linear-gradient(180deg, rgba(8, 33, 51, 0.86), rgba(4, 15, 23, 0.96)) !important;
}

.sc-media,
.sc-nft-img {
  min-height: 210px !important;
  border-radius: 24px !important;
  background: #030b11 !important;
}

.sc-media img,
.sc-nft-img,
.choice-art img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

.sc-desc {
  display: none !important;
}

.refs-sticker,
.refs-illustration,
.refs-gif {
  display: none !important;
}

.refs-hero {
  padding: 8px 0 14px !important;
}

.refs-hero .display-title {
  max-width: 360px;
  font-size: clamp(34px, 10vw, 52px) !important;
}

.refs-card {
  margin-top: 8px !important;
}

.profile-scoreboard {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

.profile-scoreboard article {
  min-height: 56px !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 13px 16px !important;
}

.profile-scoreboard strong {
  order: 0;
  font-size: 25px !important;
  line-height: 1 !important;
}

.profile-scoreboard span {
  order: 1;
  font-family: var(--font-uni) !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  color: rgba(255, 255, 255, 0.72) !important;
}

.profile-xp-card span {
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.72) !important;
}

.rewards-head {
  min-height: 128px !important;
  margin-bottom: 18px !important;
}

.reward-points-pill {
  position: relative;
  z-index: 2;
  width: fit-content;
  margin: 10px 0 0;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(5, 18, 28, 0.28);
  color: #06121c;
  font-family: var(--font-uni);
  font-size: 12px;
  font-weight: 950;
}

.reward-lanes {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 0 0 20px !important;
}

.reward-lanes::before {
  left: 50% !important;
  right: auto !important;
  width: 5px !important;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #55aef2, #c8ff4f) !important;
  opacity: 0.70 !important;
  box-shadow: 0 0 20px rgba(85, 174, 242, 0.24) !important;
}

.reward-step {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 50px minmax(0, 1fr) !important;
  gap: 9px !important;
  align-items: center;
}

.reward-node.free {
  grid-column: 1 !important;
}

.reward-node.pass {
  grid-column: 3 !important;
}

.reward-index {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  align-self: center !important;
  z-index: 2 !important;
  width: 42px !important;
  height: 42px !important;
  opacity: 0.74 !important;
  filter: none !important;
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.55), transparent 24%),
    linear-gradient(180deg, var(--plush-cream), var(--plush-cream-2)) !important;
  color: #06121c !important;
  box-shadow:
    0 5px 0 rgba(0, 0, 0, 0.50),
    inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
}

.reward-step.is-claimed .reward-index {
  opacity: 1 !important;
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.62), transparent 24%),
    linear-gradient(180deg, var(--plush-lime), var(--plush-green)) !important;
  box-shadow:
    0 0 0 4px rgba(10, 132, 255, 0.12),
    0 0 18px rgba(10, 132, 255, 0.34),
    0 5px 0 rgba(0, 0, 0, 0.50) !important;
}

.reward-node {
  min-height: 78px !important;
  padding: 13px 54px 13px 14px !important;
  border: 0 !important;
  border-radius: 18px !important;
  overflow: hidden;
  box-shadow:
    0 6px 0 rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.reward-node.is-unavailable,
.reward-node.is-locked {
  opacity: 0.46 !important;
  filter: saturate(0.55) brightness(0.78) !important;
}

.reward-node.is-available {
  opacity: 1 !important;
  filter: none !important;
}

.reward-art {
  right: 2px !important;
  bottom: 2px !important;
  width: 62px !important;
  height: 62px !important;
  display: grid;
  place-items: center;
  border-radius: 16px;
  transform: rotate(-14deg) scale(1.28) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", var(--font-uni);
  font-size: 48px !important;
  line-height: 1;
  opacity: 0.96;
}

.reward-art-gift {
  filter: grayscale(1) sepia(1) saturate(3) hue-rotate(165deg) brightness(1.08);
}

.reward-art-vote {
  filter: grayscale(1) sepia(1) saturate(3) hue-rotate(70deg) brightness(1.18);
}

.reward-art-cashback {
  color: var(--plush-lime);
  font-family: var(--font-uni);
  font-size: 58px !important;
  font-weight: 950;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.32);
}

.pass-modal {
  background: rgba(0, 0, 0, 0.72) !important;
}

.pass-card {
  border: 0 !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 78% 18%, rgba(10, 132, 255, 0.18), transparent 26%),
    linear-gradient(180deg, #0d3654, #061722) !important;
  box-shadow:
    0 10px 0 rgba(0, 0, 0, 0.58),
    0 24px 44px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

.pass-card h3 {
  font-family: var(--font-uni) !important;
  text-transform: uppercase;
}

.pass-art {
  border: 0 !important;
  border-radius: 24px !important;
  background: #061722 !important;
  overflow: hidden;
}

.pass-art img {
  width: 112% !important;
  max-width: none !important;
  transform: translateX(-5%);
}

@media (max-width: 420px) {
  .reward-step {
    grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  .reward-node {
    min-height: 72px !important;
    padding: 11px 46px 11px 12px !important;
  }

  .reward-art {
    width: 54px !important;
    height: 54px !important;
    font-size: 36px;
  }

  .reward-index {
    width: 38px !important;
    height: 38px !important;
  }
}

/* v56: fix vote-token double rendering and keep the sticky header clear of content. */
body.app-body {
  padding-top: max(16px, env(safe-area-inset-top)) !important;
}

.app-header {
  margin-bottom: clamp(34px, 8vw, 62px) !important;
}

.app-main {
  padding-top: 10px !important;
}

.tab-home .home-hero {
  margin-top: 0 !important;
}

.arena-card {
  background:
    linear-gradient(180deg, rgba(8, 33, 51, 0.94), rgba(4, 15, 23, 0.98)) !important;
}

.widget-team-lottie[data-token-initial]::before {
  display: none !important;
  content: none !important;
}

.widget-team-orb {
  width: clamp(78px, 21vw, 106px) !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.team-a .widget-team-orb,
.team-b .widget-team-orb {
  box-shadow: none !important;
}

.widget-team-lottie {
  width: 82px !important;
  height: 82px !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

.widget-team-lottie.has-fallback-token {
  display: grid !important;
  place-items: center !important;
}

.token-fallback-mark {
  width: 82px !important;
  height: 82px !important;
}

.token-logo-img {
  width: 82px !important;
  height: 82px !important;
  object-fit: contain !important;
}

@media (max-width: 420px) {
  .app-header {
    margin-bottom: 38px !important;
  }

  .app-main {
    padding-top: 8px !important;
  }

  .widget-vs {
    gap: 12px !important;
    padding-top: 20px !important;
  }

  .widget-team-orb,
  .widget-team-lottie,
  .token-fallback-mark,
  .token-logo-img {
    width: 74px !important;
    height: 74px !important;
  }
}

/* v57: restore the shop tabs, flatten mismatched panels, and keep vote actions clickable. */
.widget-vs,
.widget-vs::before,
.widget-vs::after,
.widget-team::before,
.widget-team::after {
  background: transparent !important;
  box-shadow: none !important;
  content: none !important;
}

.token-fallback-mark {
  width: 74px !important;
  height: 64px !important;
  border-radius: 22px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.54) 0 22%, transparent 23% 46%, rgba(0, 0, 0, 0.18) 47% 100%),
    linear-gradient(180deg, #a9f06f, #55c99c 48%, #3ea5ef) !important;
}

.token-fallback-red {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.58) 0 22%, transparent 23% 46%, rgba(0, 0, 0, 0.18) 47% 100%),
    linear-gradient(180deg, #fff2c9, #ffb774 48%, #ff6956) !important;
}

.widget-vote-btn.is-locked {
  opacity: 0.78 !important;
  filter: saturate(0.72) brightness(0.92);
}

.widget-vote-btn.is-locked:active {
  transform: scale(0.97);
}

.tab-shop,
.tab-profile {
  background: #05121c !important;
}

.shop-choice {
  display: block !important;
  margin: 4px 0 20px !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.shop-choice-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  min-height: 58px !important;
  padding: 6px !important;
  border: 0 !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.10), transparent 24%),
    linear-gradient(180deg, #0d3654, #061722) !important;
  box-shadow:
    0 7px 0 rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

.shop-choice-tabs::before {
  width: calc((100% - 12px) / 3) !important;
  height: calc(100% - 12px) !important;
  left: 6px !important;
  top: 6px !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 24% 16%, rgba(255, 255, 255, 0.60), transparent 24%),
    linear-gradient(180deg, var(--plush-cream), var(--plush-cream-2)) !important;
  transform: translateX(calc(var(--choice-index, 0) * 100%)) !important;
  transition: transform 420ms var(--ease-out) !important;
}

.shop-choice-tabs button {
  min-height: 46px !important;
  color: rgba(255, 255, 255, 0.68) !important;
}

.shop-choice-tabs button.is-active {
  color: #06121c !important;
}

.shop-choice-card {
  display: grid !important;
  margin-top: 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.tab-shop .shop-hero,
.shop-pass-art,
.shop-pack-section,
.shop-grid,
.shop-card,
.sc-media,
.choice-art {
  border: 0 !important;
  background: #05121c !important;
  box-shadow: none !important;
}

.shop-hero {
  padding-top: 8px !important;
}

.shop-hero-actions {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.shop-pass-art img,
.choice-art img,
.sc-media img {
  mix-blend-mode: screen !important;
  filter: saturate(1.05) contrast(1.05) !important;
}

.choice-art img {
  width: min(360px, 122%) !important;
  max-width: none !important;
  transform: scale(1.58) !important;
  transform-origin: center !important;
}

.shop-pack-section {
  margin-top: 18px !important;
}

.profile-scoreboard {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.profile-scoreboard article {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* v58: remove the remaining header chrome and reward corner artifacts. */
.app-header::before,
.app-header::after {
  display: none !important;
  content: none !important;
}

.lang-toggle,
.lang-toggle button {
  border: 0 !important;
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
}

.lang-toggle button {
  color: var(--plush-cream) !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}

.wallet-btn {
  border: 0 !important;
  background: rgba(218, 237, 248, 0.96) !important;
  box-shadow: none !important;
  color: var(--plush-blue-900) !important;
  transform: none !important;
}

.wallet-btn:hover,
.wallet-btn:focus-visible {
  box-shadow: none !important;
  filter: brightness(1.04);
}

.wallet-btn:active {
  transform: scale(0.97) !important;
}

.reward-node::before,
.reward-node::after,
.reward-art::before,
.reward-art::after {
  display: none !important;
  content: none !important;
}

.reward-art {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* v59: shop tabs show the selected vote pack only; NFT cards keep one stable size. */
.shop-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
  margin-top: 18px !important;
}

.shop-card,
.shop-card.is-featured {
  grid-column: auto !important;
  width: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  border: 0 !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 78% 10%, rgba(10, 132, 255, 0.08), transparent 24%),
    #05121c !important;
  box-shadow: none !important;
  transform: none !important;
}

.shop-card:hover {
  transform: none !important;
}

.choice-art,
.sc-media {
  position: relative;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 1.58 / 1 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 28px !important;
  background: #04111b !important;
  box-shadow: none !important;
}

.choice-art img,
.sc-media img,
.sc-nft-img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: scale(1.18) !important;
  filter: saturate(1.06) contrast(1.04) !important;
  mix-blend-mode: screen !important;
}

.choice-art .nft-pip-row,
.sc-media .nft-pip-row {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 13px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 4px;
  pointer-events: none;
}

.nft-pip-row span {
  width: clamp(10px, 3.2vw, 15px);
  height: clamp(8px, 2.5vw, 12px);
  border-radius: 3px;
  background:
    radial-gradient(circle at 26% 20%, rgba(255, 255, 255, 0.78), transparent 28%),
    linear-gradient(180deg, #d9eef9, #7bbdf2);
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transform: translateY(calc((var(--pip, 0) % 2) * -2px)) rotate(calc((var(--pip, 0) - 4) * 1.6deg));
}

.pack-count {
  position: absolute;
  right: 14px;
  top: 12px;
  z-index: 2;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(218, 237, 248, 0.94);
  color: var(--plush-blue-900);
  font-family: var(--font-uni);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
}

.choice-copy,
.sc-meta-block,
.sc-buy-block {
  padding-inline: 16px !important;
}

.choice-copy {
  margin-top: 14px;
}

.choice-copy p {
  display: none !important;
}

.shop-choice-card {
  gap: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

@media (min-width: 760px) {
  .shop-grid {
    max-width: 520px;
    margin-inline: auto;
  }
}

/* v61: stable shop packs, clear vote surface, and no bright vote-card halo. */
.arena-card,
#active-vote-card {
  isolation: isolate !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, #0a2e49 0%, #071b2b 58%, #06131d 100%) !important;
}

.arena-card::before,
.arena-card::after,
#active-vote-card::before,
#active-vote-card::after,
.widget-vs::before,
.widget-vs::after,
.widget-team-orb::before,
.widget-team-orb::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0 !important;
}

.widget-team-orb,
.widget-team-lottie,
.token-fallback-mark,
.token-logo-img {
  filter: none !important;
}

.widget-vote-btn {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 54px !important;
  pointer-events: auto !important;
  touch-action: manipulation;
}

.widget-cta {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}

.widget-vote-btn:not(:disabled) {
  opacity: 1 !important;
  filter: none !important;
  cursor: pointer;
}

.widget-vote-btn.is-locked:not(:disabled) {
  opacity: 0.92 !important;
  filter: saturate(0.9) brightness(0.96) !important;
}

.shop-grid [data-pack-votes] {
  aspect-ratio: auto;
}

.choice-art,
.sc-media {
  aspect-ratio: 1.58 / 1 !important;
}

.choice-art img,
.sc-media img,
.sc-nft-img {
  transform: scale(1.18) !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* v60: MEME PASS offer uses a blended hero image and shows concrete value. */
.pass-modal {
  padding: 16px !important;
  background:
    radial-gradient(circle at 50% 12%, rgba(77, 163, 255, 0.14), transparent 34%),
    rgba(0, 0, 0, 0.78) !important;
}

.pass-card {
  width: min(430px, 100%) !important;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 18px !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 76% 8%, rgba(10, 132, 255, 0.14), transparent 26%),
    radial-gradient(circle at 18% 0%, rgba(77, 163, 255, 0.20), transparent 32%),
    linear-gradient(180deg, #0d3654, #061722) !important;
  box-shadow:
    0 12px 0 rgba(0, 0, 0, 0.58),
    0 24px 44px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

.pass-art {
  position: relative;
  margin: 4px 0 14px;
  border: 0 !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 72% 12%, rgba(10, 132, 255, 0.12), transparent 30%),
    linear-gradient(180deg, #0d3654, #061722) !important;
  overflow: hidden;
  box-shadow: none !important;
}

.pass-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #0d3654 0%, transparent 16%, transparent 84%, #061722 100%),
    linear-gradient(180deg, rgba(13, 54, 84, 0.92), transparent 22%, transparent 72%, rgba(6, 23, 34, 0.96));
  pointer-events: none;
}

.pass-art img {
  display: block;
  width: 116% !important;
  max-width: none !important;
  transform: translateX(-8%) scale(1.02) !important;
  mix-blend-mode: screen !important;
  opacity: 0.94;
  filter: saturate(1.04) contrast(1.04);
  mask-image: radial-gradient(ellipse 88% 76% at 50% 50%, #000 56%, rgba(0, 0, 0, 0.72) 78%, transparent 100%);
}

.pass-benefits {
  display: grid;
  grid-template-columns: 0.72fr 1.3fr 0.86fr;
  gap: 8px;
  margin: 12px 0 12px;
}

.pass-benefits article {
  min-width: 0;
  min-height: 70px;
  display: grid;
  align-content: space-between;
  gap: 8px;
  padding: 11px 10px;
  border-radius: 18px;
  background: rgba(4, 15, 23, 0.56);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 5px 0 rgba(0, 0, 0, 0.38);
}

.pass-benefits span {
  color: rgba(255, 255, 255, 0.48);
  font-family: var(--font-uni);
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
}

.pass-benefits strong {
  color: var(--plush-cream);
  font-family: var(--font-uni);
  font-size: clamp(18px, 5vw, 26px);
  font-weight: 950;
  line-height: 0.95;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.pass-benefits article:first-child strong,
.pass-benefits article:last-child strong {
  color: var(--plush-lime);
  font-size: clamp(24px, 7vw, 40px);
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.32);
}

.pass-price {
  margin: 10px 0 12px !important;
}

@media (max-width: 380px) {
  .pass-benefits {
    grid-template-columns: 1fr;
  }

  .pass-benefits article {
    min-height: 58px;
  }
}

/* v61 final overrides: keep the voting card clean after all historical layers. */
.arena-card::before,
.arena-card::after,
#active-vote-card::before,
#active-vote-card::after,
.widget-vs::before,
.widget-vs::after,
.widget-team-orb::before,
.widget-team-orb::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}

.arena-card,
#active-vote-card {
  background: linear-gradient(180deg, #0a2e49 0%, #071b2b 58%, #06131d 100%) !important;
}

/* v62: backend-session cleanup release UI overrides. */
.profile-cashbacks {
  padding: 24px 24px 26px !important;
}

.profile-cashbacks h2 {
  margin: 0 0 18px !important;
  padding-left: 0 !important;
  transform: none !important;
}

.refs-stats {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.refs-stat {
  min-height: 76px !important;
  display: grid !important;
  align-content: space-between !important;
  padding: 15px 16px 14px !important;
  border: 0 !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 82% 10%, rgba(10, 132, 255, 0.12), transparent 32%),
    linear-gradient(180deg, #0d3654 0%, #061722 100%) !important;
  box-shadow:
    0 7px 0 rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.refs-stat .rs-label {
  color: rgba(255, 255, 255, 0.54) !important;
  font-family: var(--font-uni) !important;
  font-size: 9px !important;
  font-weight: 950 !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
}

.refs-stat .rs-value {
  color: var(--plush-cream) !important;
  font-family: var(--font-uni) !important;
  font-size: 28px !important;
  font-weight: 950 !important;
  line-height: 0.95 !important;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.34) !important;
}

.lang-toggle {
  width: 44px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.lang-toggle button {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  text-align: center !important;
  line-height: 1 !important;
}

.lang-toggle button span {
  display: block !important;
  margin: 0 auto !important;
  line-height: 1 !important;
}

.choice-badge,
.choice-pill,
.sc-badge,
.sc-votes-pill {
  display: none !important;
}

.shop-choice-tabs {
  isolation: isolate !important;
  overflow: hidden !important;
  border: 0 !important;
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.shop-choice-tabs::after {
  display: none !important;
  content: none !important;
}

.shop-choice-tabs::before {
  z-index: 0 !important;
  pointer-events: none !important;
  box-shadow: 0 5px 0 rgba(37, 77, 99, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

.shop-choice-tabs button {
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#active-vote-card,
.arena-card {
  background:
    linear-gradient(180deg, #0a2e49 0%, #071b2b 58%, #06131d 100%) !important;
  background-image:
    linear-gradient(180deg, #0a2e49 0%, #071b2b 58%, #06131d 100%) !important;
  overflow: hidden !important;
}

#active-vote-card::before,
#active-vote-card::after,
.arena-card::before,
.arena-card::after,
.widget-vs::before,
.widget-vs::after,
.widget-team::before,
.widget-team::after,
.widget-team-orb::before,
.widget-team-orb::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.widget-vs,
.widget-team-orb {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.rewards-shell {
  padding-inline: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.reward-lanes {
  padding-inline: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.reward-lanes::before {
  z-index: 0 !important;
  width: 5px !important;
  border-radius: 999px !important;
}

.reward-step {
  position: relative !important;
  z-index: 1 !important;
}

.reward-index {
  position: relative !important;
  z-index: 4 !important;
  background: linear-gradient(180deg, #e6f4fb, #b9d7e9) !important;
  box-shadow:
    0 0 0 8px #05121c,
    0 5px 0 rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

.reward-index::before {
  content: "" !important;
  position: absolute !important;
  inset: -9px !important;
  z-index: -1 !important;
  border-radius: inherit !important;
  background: #05121c !important;
}

.reward-art::before,
.reward-art::after,
.reward-node::before,
.reward-node::after {
  display: none !important;
  content: none !important;
}

.reward-art {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 480px) {
  .profile-cashbacks {
    padding-inline: 24px 20px !important;
  }
}

/* v63 monochrome system: logo stays colored, interface becomes black/white. */
:root {
  --color-page: #050505;
  --color-ink: #f7f7f2;
  --color-paper: #f7f7f2;
  --color-muted: rgba(247, 247, 242, 0.66);
  --color-dim: rgba(247, 247, 242, 0.42);
  --color-panel: #0b0b0b;
  --color-panel-2: #121212;
  --color-line: rgba(247, 247, 242, 0.12);
  --color-line-strong: rgba(247, 247, 242, 0.24);
  --color-primary: #f7f7f2;
  --color-primary-ink: #050505;
  --color-blue: #f7f7f2;
  --color-red: #bdbdb8;
  --color-green: #f7f7f2;
  --color-gold: #f7f7f2;
  --color-warning: #f7f7f2;
  --plush-ink: #050505;
  --plush-panel: #0b0b0b;
  --plush-panel-deep: #050505;
  --plush-blue: #f7f7f2;
  --plush-lime: #f7f7f2;
  --plush-cream: #f7f7f2;
  --plush-gold: #f7f7f2;
  --font-display: "Montserrat", "Lato", sans-serif;
  --font-brand: "Montserrat", "Lato", sans-serif;
  --font-uni: "Montserrat", "Lato", sans-serif;
  --font-body: "Lato", "Montserrat", sans-serif;
  --font-mono: "Montserrat", "Lato", sans-serif;
}

html,
body,
.app-body,
.admin-body,
.stats-body,
.about-body {
  background: #050505 !important;
  color: #f7f7f2 !important;
  font-family: var(--font-body) !important;
}

* {
  -webkit-tap-highlight-color: transparent;
}

::selection {
  color: #050505;
  background: rgba(247, 247, 242, 0.88);
}

.app-body::before,
.app-body::after,
.stats-body::before,
.stats-body::after,
.bg-stage,
.page-bg,
.bg-blob,
.bg-stars,
.bg-grain,
.home-portrait::before,
.home-portrait::after,
.shop-hero::before,
.shop-hero::after,
.refs-hero::before,
.refs-hero::after,
#active-vote-card::before,
#active-vote-card::after,
.vote-card::before,
.vote-card::after,
.arena-card::before,
.arena-card::after,
.reward-card::after,
.reward-step::after,
.reward-lane-card::after,
.reward-art-corner,
.reward-deco,
.pass-modal::before {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}

body,
p,
li,
input,
button,
textarea,
select {
  font-family: var(--font-body) !important;
}

h1,
h2,
h3,
.display-title,
.section-title,
.home-title,
.profile-name,
.shop-title,
.choice-title,
.sc-title,
.league-title,
.lr-title,
.reward-title,
.refs-title,
.stats-title,
.m-team,
.team-name,
.token-name {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  color: #f7f7f2 !important;
}

.brand-stack,
.brand-stack *,
.brand-stack img,
.brand-logo,
.brand-mark {
  filter: none !important;
  mix-blend-mode: normal !important;
}

.hero-photo,
.token-logo,
.token-logo img,
.team-logo,
.team-logo img,
.shop-pass-art img,
.sc-art img,
.choice-art img,
.refs-visual img,
.profile-avatar.has-photo {
  filter: grayscale(1) contrast(1.12) brightness(0.96) !important;
}

.app-header,
.stats-header {
  border: 0 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
    rgba(5, 5, 5, 0.94) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 42px rgba(0, 0, 0, 0.62) !important;
  backdrop-filter: blur(14px) saturate(120%) !important;
}

.wallet-btn,
.lang-toggle,
.lang-toggle button,
.stats-lang-btn {
  border: 0 !important;
  background: #f7f7f2 !important;
  color: #050505 !important;
  box-shadow: none !important;
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
}

.lang-toggle {
  display: inline-grid !important;
  place-items: center !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border-radius: 50% !important;
}

.lang-toggle button {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  border-radius: inherit !important;
}

.wallet-btn {
  min-height: 42px !important;
  padding: 0 18px !important;
}

.metric-strip,
.profile-hero,
.profile-scoreboard,
.profile-cashbacks,
.refs-card,
.refs-stats,
.refs-stat,
.shop-choice,
.shop-choice-card,
.shop-pass-art,
.shop-pack-section,
.shop-card,
.shop-status-grid,
.league-view-toggle,
.league-stage,
.ls-match,
.league-ribbon,
.league-map,
.league-stack-section,
.command-board,
.quick-action,
.story-grid,
.story-card,
.reward-hero,
.rewards-shell,
.reward-card,
.reward-lane-card,
.reward-step,
.pass-card,
.pass-modal-card,
.stats-summary,
.m-card,
.about-card,
.admin-panel,
.tokens-panel,
.matches-panel {
  border: 1px solid var(--color-line) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)),
    #0b0b0b !important;
  color: #f7f7f2 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 18px 44px rgba(0, 0, 0, 0.34) !important;
}

.metric-strip,
.profile-scoreboard,
.refs-stats,
.shop-choice-tabs,
.league-view-toggle,
.app-bnav {
  overflow: hidden !important;
}

.metric-strip::before,
.metric-strip::after,
.profile-scoreboard::before,
.profile-scoreboard::after,
.refs-stats::before,
.refs-stats::after,
.shop-choice-tabs::before,
.shop-choice-tabs::after,
.league-view-toggle::before,
.league-view-toggle::after {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.metric-strip article,
.profile-scoreboard article,
.refs-stat,
.stats-summary article {
  border-color: rgba(247, 247, 242, 0.08) !important;
  background: transparent !important;
}

.metric-strip span,
.metric-strip small,
.profile-scoreboard span,
.profile-scoreboard small,
.refs-stat span,
.stats-summary span,
.section-kicker,
.eyebrow,
.meta,
.caption,
.lead-copy,
.section-sub {
  color: var(--color-muted) !important;
}

.metric-strip strong,
.profile-scoreboard strong,
.refs-stat strong,
.stats-summary strong {
  color: #f7f7f2 !important;
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
}

.btn,
.button,
.wallet-btn,
.vote-btn,
.sc-buy,
.choice-action,
.btn-copy,
.btn-share,
.quick-action,
.league-pill,
.shop-choice-tabs button,
.league-view-toggle button,
.pager-btn,
.pass-buy-btn,
[data-pass-buy],
[data-getgems],
[data-check-nft],
[data-vote-side] {
  border: 0 !important;
  background: #f7f7f2 !important;
  color: #050505 !important;
  box-shadow: none !important;
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
}

.btn:active,
.button:active,
.wallet-btn:active,
.vote-btn:active,
.sc-buy:active,
.choice-action:active,
.btn-copy:active,
.btn-share:active,
.quick-action:active,
.shop-choice-tabs button:active,
.league-view-toggle button:active,
.pager-btn:active,
[data-vote-side]:active {
  transform: scale(0.97) !important;
}

.btn-secondary,
.btn-ghost,
.pager-btn,
.quick-action,
[data-check-nft] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    #0b0b0b !important;
  color: #f7f7f2 !important;
}

.shop-choice-tabs,
.league-view-toggle {
  background: #050505 !important;
  border-color: rgba(247, 247, 242, 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.shop-choice-tabs button,
.league-view-toggle button {
  background: transparent !important;
  color: rgba(247, 247, 242, 0.48) !important;
}

.shop-choice-tabs button.is-active,
.league-view-toggle button.is-active,
.shop-choice-tabs [aria-selected="true"],
.league-view-toggle [aria-selected="true"] {
  background: #f7f7f2 !important;
  color: #050505 !important;
}

.app-bnav {
  border: 1px solid rgba(247, 247, 242, 0.1) !important;
  background: rgba(5, 5, 5, 0.94) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.58) !important;
  backdrop-filter: blur(12px) !important;
}

.app-bnav a,
.app-bnav button {
  color: rgba(247, 247, 242, 0.58) !important;
}

.app-bnav a.is-active,
.app-bnav button.is-active,
.app-bnav [aria-current="page"] {
  color: #050505 !important;
}

.app-bnav::before,
.app-bnav .nav-slider,
.bnav-slider {
  background: #f7f7f2 !important;
  box-shadow: none !important;
}

.choice-badge,
.choice-pill,
.sc-badge,
.sc-pill,
.badge-discount {
  display: none !important;
}

.progress,
.progress-track,
.vote-progress,
.widget-progress,
.ls-progress,
.m-progress,
.reward-progress {
  background: rgba(247, 247, 242, 0.09) !important;
}

.progress-fill,
.vote-progress span,
.widget-progress span,
.ls-fill,
.m-fill,
.reward-progress span {
  background: linear-gradient(90deg, #ffffff, #b8b8b0) !important;
  box-shadow: none !important;
}

#active-vote-card,
.vote-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.062), rgba(255, 255, 255, 0.018)),
    #0b0b0b !important;
  border-color: rgba(247, 247, 242, 0.12) !important;
}

.vote-card .team,
.vote-team,
.vote-team-card,
.team-slot {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.token-chip,
.avatar-chip,
.league-medal,
.profile-avatar,
.reward-index {
  border: 0 !important;
  background: #f7f7f2 !important;
  color: #050505 !important;
  box-shadow: none !important;
}

.token-loser,
.is-loser,
.team.is-loser,
.ls-team.is-loser,
.m-team.is-loser {
  opacity: 0.42 !important;
  filter: grayscale(1) blur(0.15px) !important;
  text-decoration-color: rgba(247, 247, 242, 0.92) !important;
  text-decoration-thickness: 0.16em !important;
}

.reward-path-line,
.reward-lanes::before {
  background: linear-gradient(180deg, rgba(247, 247, 242, 0.22), rgba(247, 247, 242, 0.9)) !important;
  box-shadow: none !important;
}

.reward-step:not(.is-reached) .reward-card,
.reward-step:not(.is-reached) .reward-lane-card {
  opacity: 0.42 !important;
}

input,
textarea,
select {
  border: 1px solid rgba(247, 247, 242, 0.1) !important;
  background: #050505 !important;
  color: #f7f7f2 !important;
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(247, 247, 242, 0.44) !important;
}

a {
  color: #f7f7f2 !important;
}

.toast {
  border: 1px solid rgba(247, 247, 242, 0.14) !important;
  background: #f7f7f2 !important;
  color: #050505 !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.48) !important;
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
}

@media (max-width: 560px) {
  .app-body,
  .stats-body {
    background: #050505 !important;
  }

  .app-header {
    width: calc(100% - 16px) !important;
    margin-inline: 8px !important;
  }

  .metric-strip,
  #active-vote-card,
  .profile-hero,
  .profile-cashbacks,
  .refs-card,
  .shop-choice-card,
  .reward-hero {
    border-radius: 28px !important;
  }
}

body.app-body,
body.stats-body,
body.admin-body,
body.about-body {
  background: #050505 !important;
  color: #f7f7f2 !important;
  font-family: var(--font-body) !important;
}

/* v64 cleanup: flat sliders, no duplicate shop grid, visible reward levels. */
.shop-pack-section {
  display: none !important;
}

.shop-choice-tabs,
.league-view-toggle,
.league-tier-slider,
.admin-tabs {
  border: 1px solid rgba(247, 247, 242, 0.14) !important;
  background: #050505 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  isolation: isolate !important;
}

.shop-choice-tabs::before,
.league-view-toggle::before,
.league-tier-slider::before,
.admin-tabs::before {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  inset-block: 4px !important;
  left: 4px !important;
  width: calc((100% - 8px) / 3) !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #f7f7f2 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: translateX(calc(var(--choice-index, var(--tier-index, 0)) * 100%)) !important;
  transition: transform 340ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 0 !important;
}

.league-view-toggle::before,
.admin-tabs::before {
  width: calc((100% - 8px) / 2) !important;
  transform: translateX(calc(var(--league-index, 0) * 100%)) !important;
}

.league-view-toggle.is-levels {
  --league-index: 1;
}

.shop-choice-tabs::after,
.league-view-toggle::after,
.league-tier-slider::after,
.admin-tabs::after {
  display: none !important;
  content: none !important;
}

.shop-choice-tabs button,
.league-view-toggle button,
.league-tier-slider button,
.admin-tabs button {
  position: relative !important;
  z-index: 1 !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(247, 247, 242, 0.56) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

.shop-choice-tabs button.is-active,
.league-view-toggle button.is-active,
.league-tier-slider button.is-active,
.admin-tabs button.is-active {
  background: transparent !important;
  color: #050505 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

.shop-choice-tabs button:active,
.league-view-toggle button:active,
.league-tier-slider button:active,
.admin-tabs button:active {
  transform: none !important;
}

.shop-choice-card,
.choice-action,
.sc-buy,
.btn,
.button,
.wallet-btn {
  box-shadow: none !important;
  transform: none;
}

#active-vote-card,
#active-vote-card * {
  filter: none;
}

#active-vote-card,
.widget-vs,
.widget-team-orb {
  background-image: none !important;
  box-shadow: none !important;
}

#active-vote-card::before,
#active-vote-card::after,
.widget-vs::before,
.widget-vs::after,
.widget-team-orb::before,
.widget-team-orb::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.widget-team-orb {
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.reward-art,
.reward-art::before,
.reward-art::after,
.reward-node::before,
.reward-node::after {
  display: none !important;
  content: none !important;
}

.reward-index {
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  z-index: 12 !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #f7f7f2 !important;
  color: #050505 !important;
  opacity: 1 !important;
  visibility: visible !important;
  box-shadow: none !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.reward-index::before,
.reward-index::after {
  display: none !important;
  content: none !important;
}

.reward-lanes::before {
  z-index: 0 !important;
}

.reward-step {
  isolation: isolate !important;
}

/* v65 black-and-white blend: keep brand/Pepe colors, flatten the interface. */
:root {
  --color-page: #050505;
  --color-ink: #f7f7f2;
  --color-paper: #fff8ed;
  --color-muted: rgba(247, 247, 242, 0.62);
  --color-dim: rgba(247, 247, 242, 0.38);
  --color-panel: #070707;
  --color-panel-2: #0a0a0a;
  --color-line: rgba(247, 247, 242, 0.08);
  --color-line-strong: rgba(247, 247, 242, 0.16);
  --color-primary: #f7f7f2;
  --color-primary-ink: #050505;
  --font-display: "Montserrat", "Lato", sans-serif;
  --font-brand: "Bagel Fat One", "Montserrat", sans-serif;
  --font-uni: "Montserrat", "Lato", sans-serif;
  --font-body: "Lato", "Montserrat", sans-serif;
  --font-mono: "Montserrat", "Lato", sans-serif;
}

html,
body,
.app-body,
.stats-body,
.admin-body,
.about-body {
  background: #050505 !important;
  color: #f7f7f2 !important;
}

.brand-meme,
.brand-throne {
  font-family: var(--font-brand) !important;
  font-weight: 400 !important;
  letter-spacing: -0.045em !important;
  text-shadow: none !important;
}

.brand-meme {
  color: #4da3ff !important;
}

.brand-throne {
  color: #fff8ed !important;
}

.brand-by {
  display: none !important;
}

.hero-photo,
.home-portrait img,
.shop-pass-art img,
.sc-art img,
.choice-art img,
.refs-sticker,
.refs-sticker *,
.lottie-sticker,
.widget-team-lottie,
.widget-team-lottie *,
.profile-avatar.has-photo {
  filter: none !important;
  mix-blend-mode: normal !important;
}

.home-portrait,
.home-portrait::before,
.home-portrait::after {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.hero-photo {
  background: #050505 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.app-header,
.stats-header {
  border: 0 !important;
  background: rgba(5, 5, 5, 0.94) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.46) !important;
  backdrop-filter: blur(12px) saturate(105%) !important;
}

.page-hero,
.home-hero,
.hero-copy,
.metric-strip,
.profile-hero,
.profile-scoreboard,
.profile-cashbacks,
.refs-card,
.refs-stats,
.refs-stat,
.shop-choice,
.shop-choice-card,
.shop-pass-art,
.shop-status-grid,
.league-map,
.league-stage,
.ls-match,
.league-ribbon,
.league-stack-section,
.story-grid,
.story-card,
.command-board,
.quick-action,
.reward-hero,
.rewards-shell,
.reward-lanes,
.reward-card,
.reward-lane-card,
.pass-card,
.pass-modal-card,
.stats-summary,
.sum-card,
.m-card,
.about-card,
.admin-panel,
.tokens-panel,
.matches-panel {
  border-color: rgba(247, 247, 242, 0.055) !important;
  background: #070707 !important;
  color: #f7f7f2 !important;
  box-shadow: none !important;
}

.home-hero,
.home-editorial,
.page-hero.home-hero,
.home-portrait,
.reward-lanes,
.rewards-shell {
  background: transparent !important;
  border-color: transparent !important;
}

.metric-strip,
.profile-scoreboard,
.refs-stats,
.stats-summary {
  background: #080808 !important;
  border: 0 !important;
}

.metric-strip > *,
.profile-scoreboard > *,
.refs-stats > *,
.stats-summary > * {
  background: transparent !important;
}

.app-header .wallet-btn,
.wallet-btn,
.stats-wallet-btn,
.lang-toggle,
.lang-toggle button,
.stats-lang-btn,
.btn,
.button,
.home-cta,
.choice-action,
.sc-buy,
.btn-copy,
.btn-share,
.pass-buy-btn,
[data-pass-buy],
[data-getgems],
[data-check-nft],
[data-vote-side] {
  border: 0 !important;
  background: #f7f7f2 !important;
  color: #050505 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none;
  text-shadow: none !important;
}

.wallet-label {
  text-transform: none !important;
}

.btn-secondary,
.btn-ghost,
.home-cta-secondary,
.pager-btn,
.quick-action,
[data-check-nft] {
  background: #111 !important;
  color: #f7f7f2 !important;
  border: 1px solid rgba(247, 247, 242, 0.08) !important;
}

.shop-choice-tabs,
.league-view-toggle,
.league-tier-slider,
.admin-tabs {
  background: #080808 !important;
  border: 1px solid rgba(247, 247, 242, 0.08) !important;
  box-shadow: none !important;
}

.shop-choice-tabs::before,
.league-view-toggle::before,
.league-tier-slider::before,
.admin-tabs::before {
  background: #f7f7f2 !important;
  box-shadow: none !important;
}

.shop-choice-tabs::after,
.league-view-toggle::after,
.league-tier-slider::after,
.admin-tabs::after,
.shop-choice-card::before,
.shop-choice-card::after,
.shop-choice::after,
.home-cta::before,
.home-cta::after {
  display: none !important;
  content: none !important;
}

#active-vote-card,
.vote-card,
.arena-card {
  background: #070707 !important;
  border-color: rgba(247, 247, 242, 0.08) !important;
  box-shadow: none !important;
}

#active-vote-card::before,
#active-vote-card::after,
.vote-card::before,
.vote-card::after,
.arena-card::before,
.arena-card::after,
.widget-team-orb::before,
.widget-team-orb::after,
.widget-vs::before,
.widget-vs::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}

.widget-team-orb,
.widget-vs {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.reward-card,
.reward-lane-card,
.reward-node {
  position: relative !important;
  overflow: hidden !important;
}

.reward-art {
  display: grid !important;
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  z-index: 0 !important;
  width: 58px !important;
  height: 58px !important;
  place-items: center !important;
  transform: translateY(-50%) rotate(-10deg) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #f7f7f2 !important;
  filter: grayscale(1) contrast(1.18) brightness(1.28) !important;
  font-size: 36px !important;
  line-height: 1 !important;
  opacity: 0.2 !important;
  pointer-events: none !important;
}

.reward-art::before,
.reward-art::after {
  display: none !important;
  content: none !important;
}

.reward-art-cashback {
  font-family: var(--font-display) !important;
  font-size: 48px !important;
  font-weight: 900 !important;
}

.reward-card > *:not(.reward-art),
.reward-lane-card > *:not(.reward-art),
.reward-node > *:not(.reward-art) {
  position: relative !important;
  z-index: 1 !important;
}

.reward-index {
  z-index: 12 !important;
  background: #f7f7f2 !important;
  color: #050505 !important;
  box-shadow: none !important;
}

.reward-index::before,
.reward-index::after {
  display: none !important;
  content: none !important;
}

.reward-lanes::before,
.reward-path-line {
  background: rgba(247, 247, 242, 0.34) !important;
  box-shadow: none !important;
}

.app-bnav {
  border: 0 !important;
  background: rgba(5, 5, 5, 0.96) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.54) !important;
}

.app-bnav::before,
.app-bnav .nav-slider,
.bnav-slider {
  background: #f7f7f2 !important;
  box-shadow: none !important;
}

.choice-badge,
.choice-pill,
.sc-badge,
.sc-pill,
.badge-discount,
.reward-art-corner {
  display: none !important;
}

/* v66 final monochrome pass: no blue panels, colored NFTs/hero preserved. */
.brand-stack,
.brand-stack:hover,
.brand-stack:focus,
.brand-stack:focus-visible,
.brand-stack:active {
  transform: none !important;
  scale: 1 !important;
  filter: none !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: none !important;
}

.brand-stack::before,
.brand-stack::after {
  display: none !important;
  content: none !important;
}

.brand-stack,
.brand-meme,
.brand-throne {
  text-decoration: none !important;
}

.shop-pass-art {
  display: none !important;
}

.page-hero,
.hero-copy,
.metric-strip,
.profile-hero,
.profile-scoreboard,
.profile-cashbacks,
.refs-card,
.refs-stats,
.refs-stat,
.shop-choice,
.shop-choice-card,
.shop-status-grid,
.league-map,
.league-stage,
.ls-match,
.league-ribbon,
.league-stack-section,
.story-card,
.command-board,
.quick-action,
.reward-hero,
.reward-card,
.reward-lane-card,
.pass-card,
.pass-modal-card,
.stats-summary,
.sum-card,
.m-card,
.admin-panel {
  background: #050505 !important;
  border-color: rgba(247, 247, 242, 0.06) !important;
  color: #f7f7f2 !important;
  box-shadow: none !important;
}

.home-hero,
.page-hero.home-hero,
.home-editorial,
.home-portrait,
.shop-choice,
.shop-choice-card {
  background: #050505 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.choice-art,
.sc-media {
  background: #050505 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.hero-photo,
.home-portrait img,
.choice-art,
.choice-art img,
.sc-media,
.sc-media img,
.sc-nft-img {
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

.choice-art img,
.sc-media img,
.sc-nft-img {
  width: min(360px, 98%) !important;
  height: auto !important;
  max-width: 98% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

.shop-choice-tabs,
.league-view-toggle,
.league-tier-slider,
.admin-tabs {
  background: #050505 !important;
  border-color: rgba(247, 247, 242, 0.1) !important;
}

.shop-choice-tabs button,
.league-view-toggle button,
.league-tier-slider button,
.admin-tabs button {
  color: rgba(247, 247, 242, 0.52) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.shop-choice-tabs button.is-active,
.league-view-toggle button.is-active,
.league-tier-slider button.is-active,
.admin-tabs button.is-active {
  color: #050505 !important;
  background: transparent !important;
}

.app-header .wallet-btn,
.wallet-btn,
.stats-wallet-btn {
  max-width: 128px !important;
  min-width: 88px !important;
  padding-inline: 18px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  text-transform: none !important;
}

.wallet-label {
  display: inline-block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* v67 hard monochrome finish: flat black/white UI, colored brand art only. */
:root {
  --surface-page: #050505;
  --surface-elevated: #090909;
  --surface-panel: #0d0d0d;
  --surface-soft: #141414;
  --text-primary: #f7f7f2;
  --text-secondary: #b9b9b2;
  --text-muted: #777771;
  --border-subtle: rgba(247, 247, 242, 0.1);
  --accent: #f7f7f2;
  --accent-hover: #ffffff;
  --accent-quiet: rgba(247, 247, 242, 0.1);
  --font-display: "Montserrat", "Lato", sans-serif;
  --font-body: "Lato", "Montserrat", sans-serif;
  --font-brand: "Bagel Fat One", "Montserrat", sans-serif;
}

html,
body,
.app-body,
.stats-body,
.app-main,
.tab,
.tab-home,
.tab-shop,
.tab-leagues,
.tab-refs,
.tab-rewards,
.tab-profile,
.tab-admin,
.stats-main {
  background: #050505 !important;
  background-image: none !important;
  color: #f7f7f2 !important;
}

body,
button,
input,
textarea,
select {
  font-family: var(--font-body) !important;
}

h1,
h2,
h3,
.section-h,
.display-title,
.profile-name,
.sc-name,
.lr-name,
.league-title,
.league-tier-card .lr-name,
.reward-node strong,
.command-copy strong,
.dock-chip span,
.widget-team-name,
.shop-choice-tabs button span,
.league-tier-slider button span {
  font-family: var(--font-display) !important;
  letter-spacing: 0 !important;
}

.page-kicker,
.section-eyebrow,
small,
.metric span,
.widget-team-votes,
.widget-foot,
.match-meta-row,
.shop-choice-tabs button small,
.league-tier-slider button small {
  color: rgba(247, 247, 242, 0.56) !important;
}

.app-header,
.stats-header {
  display: grid !important;
  grid-template-columns: 54px 1fr 118px !important;
  align-items: center !important;
  min-height: 70px !important;
  padding: 10px 14px !important;
  background: #050505 !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.app-header::before,
.app-header::after,
.stats-header::before,
.stats-header::after {
  display: none !important;
  content: none !important;
}

.hdr-tools {
  display: contents !important;
}

.brand-stack,
.stats-header .brand-stack {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 2 !important;
  display: grid !important;
  width: 126px !important;
  min-width: 126px !important;
  height: auto !important;
  place-items: center !important;
  transform: translate(-50%, -50%) !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: auto !important;
}

.brand-stack:hover,
.brand-stack:focus,
.brand-stack:focus-visible,
.brand-stack:active {
  transform: translate(-50%, -50%) !important;
  scale: 1 !important;
  outline: 0 !important;
}

.brand-meme,
.brand-throne {
  display: block !important;
  font-family: var(--font-brand) !important;
  font-size: 30px !important;
  font-weight: 400 !important;
  line-height: 0.76 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.42) !important;
}

.brand-meme { color: #4da6ff !important; }
.brand-throne { color: #fff7e7 !important; }

.lang-toggle,
.lang-toggle button {
  grid-column: 1 !important;
  justify-self: start !important;
  align-self: center !important;
  display: grid !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  place-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #050505 !important;
  background: #f7f7f2 !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

.wallet-btn,
.stats-wallet-btn {
  grid-column: 3 !important;
  justify-self: end !important;
  align-self: center !important;
  height: 42px !important;
  min-width: 92px !important;
  max-width: 118px !important;
  color: #050505 !important;
  background: #f7f7f2 !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  text-transform: none !important;
}

.wallet-dot,
.bal-widget,
.lang-toggle::before,
.lang-toggle::after,
.wallet-btn::before,
.wallet-btn::after {
  display: none !important;
  content: none !important;
}

.page-hero,
.home-hero,
.league-hero,
.shop-hero,
.hero-copy,
.home-editorial,
.shop-hero-copy,
.metric-strip,
.arena-section,
#active-vote-card,
.vote-card,
.widget,
.arena-card,
.home-league-dock,
.story-grid,
.story-card,
.trust-rail,
.trust-rail span,
.command-board,
.command-row,
.home-cta,
.seg-control,
.seg-control button,
.pager-btn,
.shop-choice,
.shop-choice-card,
.shop-pack-section,
.shop-grid,
.shop-card,
.shop-status-grid,
.shop-status-card,
.shop-included,
.shop-included article,
.refs-card,
.refs-stats,
.refs-stat,
.refs-list-section,
.league-map,
.league-stage,
.ls-match,
.league-stack-section,
.league-ribbon,
.league-tier-card,
.league-ledger,
.league-ledger-item,
.rewards-shell,
.rewards-head,
.reward-lanes,
.reward-node,
.profile-shell,
.profile-hero,
.profile-scoreboard,
.profile-scoreboard article,
.profile-cashbacks,
.cashback-pill,
.stats-summary,
.sum-card,
.match-list,
.m-card,
.admin-console,
.admin-panel,
.admin-pane,
.admin-card {
  color: #f7f7f2 !important;
  background: #050505 !important;
  background-color: #050505 !important;
  background-image: none !important;
  border-color: rgba(247, 247, 242, 0.08) !important;
  box-shadow: none !important;
}

.home-portrait,
.home-portrait::before,
.home-portrait::after,
.shop-pass-art,
.shop-pass-art::before,
.shop-pass-art::after {
  background: #050505 !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.shop-pass-art {
  display: none !important;
}

.hero-photo,
.home-portrait img,
.choice-art img,
.sc-media img,
.sc-nft-img {
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

.metric-strip {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  padding: 0 !important;
}

.metric,
.metric-strip .metric {
  min-height: 72px !important;
  padding: 16px 14px !important;
  background: #0c0c0c !important;
  border: 0 !important;
  border-radius: 22px !important;
  box-shadow: none !important;
}

.metric strong {
  color: #f7f7f2 !important;
}

.home-action-row,
.shop-hero-actions {
  background: transparent !important;
}

.home-cta,
.shop-primary,
.shop-secondary,
.widget-vote-btn,
.seg-control button,
.command-row,
.sc-buy,
.promo-strip button,
.refs-card button,
.telegram-btn,
.share-btn {
  color: #050505 !important;
  background: #f7f7f2 !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.home-cta-secondary,
.shop-secondary,
.seg-control button,
.command-row,
.refs-card button.secondary,
.share-btn {
  color: #f7f7f2 !important;
  background: #111 !important;
}

.shop-primary,
.shop-primary span,
.shop-primary svg {
  color: #050505 !important;
  fill: #050505 !important;
  stroke: #050505 !important;
}

.home-cta:active,
.shop-primary:active,
.shop-secondary:active,
.widget-vote-btn:active,
.seg-control button:active,
.command-row:active,
.sc-buy:active,
.refs-card button:active {
  transform: scale(0.98) !important;
}

#active-vote-card,
#active-vote-card *,
.vote-card,
.vote-card * {
  background-image: none !important;
}

#active-vote-card,
.vote-card {
  overflow: hidden !important;
  background: #070707 !important;
  border: 0 !important;
  border-radius: 30px !important;
  box-shadow: none !important;
}

#active-vote-card::before,
#active-vote-card::after,
.vote-card::before,
.vote-card::after,
.arena-card::before,
.arena-card::after,
.widget-vs::before,
.widget-vs::after,
.widget-team::before,
.widget-team::after,
.widget-team-orb::before,
.widget-team-orb::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.widget-vs {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.widget-team-orb,
.widget-team-lottie {
  background: #f7f7f2 !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 28px !important;
}

.widget-team-lottie[data-token-initial]::before {
  color: #050505 !important;
  background: transparent !important;
  text-shadow: none !important;
}

.token-logo-img,
.widget-team-lottie img {
  filter: grayscale(1) contrast(1.12) !important;
}

.widget-progress {
  height: 12px !important;
  background: #1c1c1c !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

.widget-progress-a,
.ls-progress-a,
.m-progress-a {
  background: #f7f7f2 !important;
  background-image: none !important;
}

.match-insight {
  color: #f7f7f2 !important;
  background: #111 !important;
  border: 0 !important;
}

.home-league-dock {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
}

.dock-chip,
.dock-chip.dock-bronze,
.dock-chip.dock-silver,
.dock-chip.dock-gold {
  color: #f7f7f2 !important;
  background: #0c0c0c !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.dock-chip::before,
.dock-chip::after,
.command-row::before,
.command-row::after,
.story-card::before,
.story-card::after,
.trust-rail span::before,
.trust-rail span::after {
  display: none !important;
  content: none !important;
}

.story-icon,
.command-icon,
.league-medal,
.lr-icon,
.profile-xp-card svg,
.refs-stat svg {
  color: #050505 !important;
  background: #f7f7f2 !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.story-card p {
  color: rgba(247, 247, 242, 0.64) !important;
}

.trust-rail span {
  color: #f7f7f2 !important;
  border: 0 !important;
  border-radius: 18px !important;
}

.command-row {
  justify-content: flex-start !important;
  border-radius: 24px !important;
}

.command-chevron {
  color: rgba(247, 247, 242, 0.62) !important;
}

.shop-choice-tabs,
.league-view-toggle,
.league-tier-slider,
.admin-tabs {
  display: grid !important;
  gap: 4px !important;
  padding: 4px !important;
  color: #f7f7f2 !important;
  background: #050505 !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

.shop-choice-tabs {
  grid-template-columns: repeat(3, 1fr) !important;
}

.league-view-toggle {
  grid-template-columns: repeat(2, 1fr) !important;
}

.league-tier-slider,
.admin-tabs {
  grid-template-columns: repeat(3, 1fr) !important;
}

.shop-choice-tabs::before,
.shop-choice-tabs::after,
.league-view-toggle::before,
.league-view-toggle::after,
.league-tier-slider::before,
.league-tier-slider::after,
.admin-tabs::before,
.admin-tabs::after {
  display: none !important;
  content: none !important;
}

.shop-choice-tabs button,
.league-view-toggle button,
.league-tier-slider button,
.admin-tabs button {
  color: rgba(247, 247, 242, 0.56) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  transform: none !important;
}

.shop-choice-tabs button.is-active,
.league-view-toggle button.is-active,
.league-tier-slider button.is-active,
.admin-tabs button.is-active,
.shop-choice-tabs [aria-selected="true"],
.league-view-toggle [aria-selected="true"] {
  color: #050505 !important;
  background: #f7f7f2 !important;
  box-shadow: none !important;
}

.choice-art,
.sc-media {
  display: grid !important;
  min-height: clamp(238px, 66vw, 302px) !important;
  place-items: center !important;
  background: #050505 !important;
  background-color: #050505 !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.choice-art img,
.sc-media img,
.sc-nft-img {
  width: min(430px, 114%) !important;
  max-width: 114% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
}

.choice-copy,
.sc-meta-block,
.sc-buy-block {
  color: #f7f7f2 !important;
  background: #050505 !important;
  background-image: none !important;
}

.pack-count,
.nft-pip-row span {
  color: #050505 !important;
  background: #f7f7f2 !important;
  box-shadow: none !important;
}

.promo-strip,
.promo-strip input {
  color: #f7f7f2 !important;
  background: #111 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.shop-status-grid,
.shop-included,
.shop-pack-section,
.shop-grid {
  display: none !important;
}

.league-ribbon,
.league-tier-card,
.league-stage,
.ls-match {
  color: #f7f7f2 !important;
  background: #070707 !important;
  border: 0 !important;
}

.league-tier-card .lr-token,
.lr-token,
.ls-match {
  background: #111 !important;
  background-image: none !important;
  border: 0 !important;
}

.lr-dot,
.league-dot {
  background: #f7f7f2 !important;
  box-shadow: none !important;
}

.league-tier-card .lr-desc,
.lr-desc,
.league-subcopy,
.section-sub {
  color: rgba(247, 247, 242, 0.62) !important;
}

.reward-hero,
.rewards-head {
  color: #f7f7f2 !important;
  background: #050505 !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.reward-lanes {
  background: #050505 !important;
  background-image: none !important;
  border: 0 !important;
}

.reward-lanes::before,
.reward-path-line {
  width: 2px !important;
  background: rgba(247, 247, 242, 0.2) !important;
  box-shadow: none !important;
}

.reward-node {
  color: #f7f7f2 !important;
  background: #0b0b0b !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.reward-node.free,
.reward-node.pass {
  background: #0b0b0b !important;
  background-image: none !important;
}

.reward-node.is-unavailable,
.reward-node.is-locked {
  opacity: 0.36 !important;
  filter: grayscale(1) !important;
}

.reward-node.is-available,
.reward-node.is-claimed {
  opacity: 1 !important;
}

.reward-node::before,
.reward-node::after,
.reward-art-corner {
  display: none !important;
  content: none !important;
}

.reward-art {
  display: grid !important;
  color: #f7f7f2 !important;
  filter: grayscale(1) contrast(1.12) brightness(1.16) !important;
  opacity: 0.18 !important;
}

.reward-index {
  z-index: 3 !important;
  color: #050505 !important;
  background: #f7f7f2 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.profile-shell,
.profile-hero,
.profile-scoreboard,
.profile-scoreboard article,
.profile-cashbacks {
  color: #f7f7f2 !important;
  background: #050505 !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.profile-avatar {
  position: relative !important;
  overflow: hidden !important;
  color: #050505 !important;
  background: #f7f7f2 !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.profile-avatar img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: none !important;
  opacity: 1 !important;
}

.profile-avatar.has-photo span {
  opacity: 0 !important;
}

.level-pill,
.profile-shell::after {
  color: #050505 !important;
  background: #f7f7f2 !important;
  background-image: none !important;
  box-shadow: none !important;
}

.profile-cashbacks h2 {
  margin-left: 24px !important;
  color: #f7f7f2 !important;
}

.empty-state {
  color: rgba(247, 247, 242, 0.62) !important;
}

.app-bnav {
  color: #f7f7f2 !important;
  background: #050505 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.app-bnav a,
.app-bnav button,
.bnav-item,
.nav-item {
  color: rgba(247, 247, 242, 0.62) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.app-bnav a.is-active,
.app-bnav button.is-active,
.bnav-item.is-active,
.nav-item.is-active {
  color: #050505 !important;
}

.app-bnav::before,
.app-bnav .nav-slider,
.bnav-slider {
  background: #f7f7f2 !important;
  background-image: none !important;
  box-shadow: none !important;
}

@media (max-width: 460px) {
  .app-main {
    padding-top: 24px !important;
  }

  .app-header,
  .stats-header {
    grid-template-columns: 46px 1fr 106px !important;
    min-height: 64px !important;
    padding-inline: 14px !important;
  }

  .brand-stack {
    width: 112px !important;
    min-width: 112px !important;
  }

  .brand-meme,
  .brand-throne {
    font-size: 26px !important;
  }

  .wallet-btn,
  .stats-wallet-btn {
    max-width: 106px !important;
    min-width: 86px !important;
    padding-inline: 16px !important;
  }

  .choice-art,
  .sc-media {
    min-height: 234px !important;
  }

  .choice-art img,
  .sc-media img,
  .sc-nft-img {
    width: min(390px, 116%) !important;
    max-width: 116% !important;
  }
}

/* v67 specificity lock: override older plush-blue rules that used stronger selectors. */
body.app-body .tab-home .page-hero,
body.app-body .tab-home .home-hero,
body.app-body .tab-home .home-editorial,
body.app-body .tab-home .metric-strip,
body.app-body .tab-home .arena-section,
body.app-body .tab-home #active-vote-card,
body.app-body .tab-home .home-league-dock,
body.app-body .tab-home .story-grid,
body.app-body .tab-home .story-card,
body.app-body .tab-home .trust-rail,
body.app-body .tab-home .trust-rail span,
body.app-body .tab-home .command-board,
body.app-body .tab-home .command-row,
body.app-body .tab-shop .shop-choice,
body.app-body .tab-shop .shop-choice-card,
body.app-body .tab-shop .choice-copy,
body.app-body .tab-shop .choice-buy,
body.app-body .tab-shop .shop-hero,
body.app-body .tab-shop .shop-hero-copy,
body.app-body .tab-shop .shop-pack-section,
body.app-body .tab-shop .shop-grid,
body.app-body .tab-shop .shop-card,
body.app-body .tab-shop .shop-status-grid,
body.app-body .tab-shop .shop-status-card,
body.app-body .tab-shop .shop-included,
body.app-body .tab-shop .shop-included article,
body.app-body .tab-leagues .league-map,
body.app-body .tab-leagues .league-stage,
body.app-body .tab-leagues .ls-match,
body.app-body .tab-leagues .league-stack-section,
body.app-body .tab-leagues .league-ribbon,
body.app-body .tab-leagues .league-tier-card,
body.app-body .tab-leagues .league-ledger,
body.app-body .tab-leagues .league-ledger-item,
body.app-body .tab-refs .refs-card,
body.app-body .tab-refs .refs-stats,
body.app-body .tab-refs .refs-stat,
body.app-body .tab-refs .refs-list-section,
body.app-body .tab-rewards .rewards-shell,
body.app-body .tab-rewards .rewards-head,
body.app-body .tab-rewards .reward-lanes,
body.app-body .tab-rewards .reward-node,
body.app-body .tab-profile .profile-shell,
body.app-body .tab-profile .profile-hero,
body.app-body .tab-profile .profile-scoreboard,
body.app-body .tab-profile .profile-scoreboard article,
body.app-body .tab-profile .profile-cashbacks,
body.stats-body .stats-summary,
body.stats-body .sum-card,
body.stats-body .match-list,
body.stats-body .m-card {
  background: #050505 !important;
  background-color: #050505 !important;
  background-image: none !important;
  border-color: rgba(247, 247, 242, 0.08) !important;
  box-shadow: none !important;
}

body.app-body .tab-home .metric-strip .metric,
body.app-body .tab-home .story-card,
body.app-body .tab-home .trust-rail span,
body.app-body .tab-home .command-row,
body.app-body .tab-shop .promo-strip,
body.app-body .tab-shop .promo-strip input,
body.app-body .tab-leagues .lr-token,
body.app-body .tab-leagues .league-tier-card .lr-token,
body.app-body .tab-profile .cashback-pill,
body.app-body .tab-refs .refs-stat {
  background: #111 !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body .tab-home .dock-chip,
body.app-body .tab-home .dock-chip.dock-bronze,
body.app-body .tab-home .dock-chip.dock-silver,
body.app-body .tab-home .dock-chip.dock-gold {
  color: #f7f7f2 !important;
  background: #0c0c0c !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body .tab-home .home-cta-primary,
body.app-body .tab-home .home-cta-secondary,
body.app-body .tab-home .widget-vote-btn,
body.app-body .tab-home .seg-control button,
body.app-body .tab-shop .choice-action,
body.app-body .tab-shop .shop-primary,
body.app-body .tab-shop .shop-secondary,
body.app-body .tab-shop .sc-buy,
body.app-body .tab-refs .refs-card button {
  background: #f7f7f2 !important;
  background-image: none !important;
  color: #050505 !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body .tab-home #active-vote-card,
body.app-body .tab-home #active-vote-card .widget-vs,
body.app-body .tab-home #active-vote-card .widget-team,
body.app-body .tab-home #active-vote-card .widget-team-orb {
  background-image: none !important;
  box-shadow: none !important;
}

body.app-body .tab-home #active-vote-card .widget-vs {
  background: transparent !important;
}

body.app-body .tab-home #active-vote-card::before,
body.app-body .tab-home #active-vote-card::after,
body.app-body .tab-home #active-vote-card .widget-vs::before,
body.app-body .tab-home #active-vote-card .widget-vs::after,
body.app-body .tab-home #active-vote-card .widget-team::before,
body.app-body .tab-home #active-vote-card .widget-team::after,
body.app-body .tab-home #active-vote-card .widget-team-orb::before,
body.app-body .tab-home #active-vote-card .widget-team-orb::after,
body.app-body .tab-shop .shop-choice::after,
body.app-body .tab-shop .shop-choice-card::before,
body.app-body .tab-shop .shop-choice-card::after,
body.app-body .tab-rewards .reward-node::before,
body.app-body .tab-rewards .reward-node::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}

body.app-body .tab-shop .shop-choice-tabs,
body.app-body .tab-shop .shop-choice-tabs button,
body.app-body .tab-leagues .league-view-toggle,
body.app-body .tab-leagues .league-view-toggle button,
body.app-body .tab-leagues .league-tier-slider,
body.app-body .tab-leagues .league-tier-slider button,
body.app-body .tab-admin .admin-tabs,
body.app-body .tab-admin .admin-tabs button {
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}

body.app-body .tab-shop .shop-choice-tabs::before,
body.app-body .tab-shop .shop-choice-tabs::after,
body.app-body .tab-leagues .league-view-toggle::before,
body.app-body .tab-leagues .league-view-toggle::after,
body.app-body .tab-leagues .league-tier-slider::before,
body.app-body .tab-leagues .league-tier-slider::after {
  display: none !important;
  content: none !important;
}

body.app-body .tab-shop .shop-choice-tabs button.is-active,
body.app-body .tab-leagues .league-view-toggle button.is-active,
body.app-body .tab-leagues .league-tier-slider button.is-active,
body.app-body .tab-admin .admin-tabs button.is-active {
  background: #f7f7f2 !important;
  color: #050505 !important;
}

body.app-body .tab-shop .choice-art,
body.app-body .tab-shop .sc-media {
  background: #050505 !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body .tab-shop .choice-art img,
body.app-body .tab-shop .sc-media img,
body.app-body .tab-shop .sc-nft-img {
  width: min(430px, 116%) !important;
  max-width: 116% !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

body.app-body .tab-rewards .rewards-head,
body.app-body .tab-rewards .reward-node.free,
body.app-body .tab-rewards .reward-node.pass {
  background: #050505 !important;
  background-image: none !important;
}

body.app-body .tab-rewards .reward-art {
  display: grid !important;
  filter: grayscale(1) contrast(1.12) brightness(1.18) !important;
  opacity: 0.18 !important;
  background: transparent !important;
}

body.app-body .tab-profile .profile-avatar img {
  display: block !important;
}

*:focus-visible {
  outline: 2px solid rgba(247, 247, 242, 0.62) !important;
  outline-offset: 3px !important;
}

/* v68 dark glass direction: black/gray base with #5FB6FF accent. */
:root {
  --accent: #5FB6FF;
  --accent-hover: #8CCCFF;
  --accent-quiet: rgba(95, 182, 255, 0.14);
  --glass-bg: rgba(22, 22, 24, 0.64);
  --glass-bg-strong: rgba(31, 31, 34, 0.78);
  --glass-line: rgba(255, 255, 255, 0.12);
  --glass-line-blue: rgba(95, 182, 255, 0.34);
  --glass-shadow: 0 18px 42px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.app-body .glass-surface,
body.app-body .tab-home .metric-strip .metric,
body.app-body .tab-home .arena-section,
body.app-body .tab-home #active-vote-card,
body.app-body .tab-home .dock-chip,
body.app-body .tab-home .story-card,
body.app-body .tab-home .trust-rail span,
body.app-body .tab-home .command-row,
body.app-body .tab-shop .shop-choice-card,
body.app-body .tab-shop .shop-hero,
body.app-body .tab-shop .shop-hero-copy,
body.app-body .tab-shop .choice-copy,
body.app-body .tab-shop .choice-buy,
body.app-body .tab-shop .promo-strip,
body.app-body .tab-leagues .league-view-toggle,
body.app-body .tab-leagues .league-tier-slider,
body.app-body .tab-leagues .league-stage,
body.app-body .tab-leagues .ls-match,
body.app-body .tab-leagues .league-stack-section,
body.app-body .tab-leagues .league-ribbon,
body.app-body .tab-leagues .league-tier-card,
body.app-body .tab-leagues .lr-token,
body.app-body .tab-refs .refs-card,
body.app-body .tab-refs .refs-stats,
body.app-body .tab-refs .refs-stat,
body.app-body .tab-rewards .rewards-head,
body.app-body .tab-rewards .reward-node,
body.app-body .tab-profile .profile-hero,
body.app-body .tab-profile .profile-scoreboard,
body.app-body .tab-profile .profile-scoreboard article,
body.app-body .tab-profile .profile-cashbacks,
body.stats-body .stats-summary,
body.stats-body .sum-card,
body.stats-body .m-card {
  background: var(--glass-bg) !important;
  background-color: var(--glass-bg) !important;
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)) !important;
  border: 1px solid var(--glass-line) !important;
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: blur(18px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.25) !important;
}

body.app-body .app-header,
body.app-body .app-bnav,
body.stats-body .app-header,
body.stats-body .stats-header {
  background: rgba(5, 5, 5, 0.76) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34) !important;
  backdrop-filter: blur(18px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
}

body.app-body .metric strong,
body.app-body .profile-scoreboard strong,
body.app-body .refs-stat .rs-value,
body.app-body .league-tier-card .lr-name,
body.app-body .reward-index,
body.stats-body .sum-card strong {
  color: #5FB6FF !important;
}

body.app-body .page-kicker,
body.app-body .section-eyebrow,
body.app-body .metric span,
body.app-body .match-meta-row,
body.app-body .widget-foot,
body.app-body .profile-scoreboard span,
body.app-body .reward-node span:not(.reward-art),
body.app-body .refs-stat .rs-label {
  color: rgba(235, 235, 235, 0.58) !important;
}

body.app-body .lang-toggle,
body.app-body .lang-toggle button,
body.app-body .wallet-btn,
body.app-body .stats-wallet-btn,
body.app-body .home-cta-primary,
body.app-body .tab-home .widget-vote-btn,
body.app-body .tab-shop .choice-action,
body.app-body .tab-shop .shop-primary,
body.app-body .tab-shop .sc-buy,
body.app-body .tab-refs .refs-card button,
body.app-body .promo-strip button {
  color: #050505 !important;
  background: #f4f4f4 !important;
  background-image: linear-gradient(180deg, #ffffff, #d8d8d8) !important;
  border: 0 !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

body.app-body .home-cta-secondary,
body.app-body .shop-secondary,
body.app-body .seg-control button,
body.app-body .command-row,
body.app-body .share-btn {
  color: #f7f7f2 !important;
  background: rgba(28, 28, 30, 0.72) !important;
  background-image: linear-gradient(135deg, rgba(95, 182, 255, 0.14), rgba(255, 255, 255, 0.03)) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
}

body.app-body .shop-choice-tabs,
body.app-body .league-view-toggle,
body.app-body .league-tier-slider,
body.app-body .admin-tabs {
  background: rgba(18, 18, 20, 0.76) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 26px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

body.app-body .shop-choice-tabs button.is-active,
body.app-body .league-view-toggle button.is-active,
body.app-body .league-tier-slider button.is-active,
body.app-body .admin-tabs button.is-active {
  color: #050505 !important;
  background: #5FB6FF !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 12px 24px rgba(95, 182, 255, 0.22) !important;
}

body.app-body .tab-home .home-league-dock .dock-chip,
body.app-body .tab-home .home-league-dock .dock-chip.dock-bronze,
body.app-body .tab-home .home-league-dock .dock-chip.dock-silver,
body.app-body .tab-home .home-league-dock .dock-chip.dock-gold {
  color: #f7f7f2 !important;
  background: rgba(24, 24, 26, 0.68) !important;
  background-image: linear-gradient(135deg, rgba(95, 182, 255, 0.16), rgba(255, 255, 255, 0.035)) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.app-body .story-icon,
body.app-body .command-icon,
body.app-body .league-medal,
body.app-body .lr-icon {
  color: #050505 !important;
  background: #5FB6FF !important;
  background-image: linear-gradient(180deg, #9ad2ff, #5FB6FF) !important;
  box-shadow: 0 10px 20px rgba(95, 182, 255, 0.2) !important;
}

body.app-body .widget-progress,
body.stats-body .m-progress {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body.app-body .widget-progress-a,
body.app-body .ls-progress-a,
body.stats-body .m-progress-a {
  background: linear-gradient(90deg, #5FB6FF, #f1f1f1) !important;
}

body.app-body .widget-team-orb,
body.app-body .widget-team-lottie {
  background: rgba(255, 255, 255, 0.9) !important;
  background-image: linear-gradient(135deg, rgba(95, 182, 255, 0.38), rgba(255, 255, 255, 0.92)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 14px 28px rgba(0, 0, 0, 0.24) !important;
}

body.app-body .match-insight {
  color: #f7f7f2 !important;
  background: rgba(95, 182, 255, 0.11) !important;
  border: 1px solid rgba(95, 182, 255, 0.22) !important;
}

body.app-body .tab-profile .profile-shell {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body .tab-profile .profile-hero {
  min-height: 156px !important;
  border-color: rgba(95, 182, 255, 0.26) !important;
}

body.app-body .tab-profile .profile-hero::after,
body.app-body .tab-profile .profile-shell::after,
body.app-body .level-pill {
  content: var(--profile-level, "LVL 1") !important;
  color: #050505 !important;
  background: #5FB6FF !important;
  background-image: linear-gradient(180deg, #9ad2ff, #5FB6FF) !important;
  border: 1px solid rgba(255, 255, 255, 0.42) !important;
  box-shadow: 0 10px 24px rgba(95, 182, 255, 0.28) !important;
}

body.app-body .tab-profile .profile-avatar {
  background: rgba(255, 255, 255, 0.92) !important;
  background-image: linear-gradient(135deg, rgba(95, 182, 255, 0.36), rgba(255, 255, 255, 0.92)) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.32) !important;
}

body.app-body .tab-profile .profile-cashbacks h2 {
  margin-left: 24px !important;
  color: #f7f7f2 !important;
}

body.app-body .tab-rewards .rewards-shell {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body .tab-rewards .rewards-head {
  min-height: 160px !important;
  padding: 24px !important;
  border-radius: 32px !important;
  background:
    radial-gradient(circle at 88% 16%, rgba(95, 182, 255, 0.34), transparent 30%),
    linear-gradient(135deg, rgba(31, 31, 34, 0.84), rgba(9, 9, 10, 0.8)) !important;
  border: 1px solid rgba(95, 182, 255, 0.28) !important;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.app-body .tab-rewards .rewards-head::after {
  content: "1 LVL = 100 XP" !important;
  color: #050505 !important;
  background: #5FB6FF !important;
  background-image: linear-gradient(180deg, #9ad2ff, #5FB6FF) !important;
  box-shadow: none !important;
}

body.app-body .tab-rewards .rewards-head .section-h {
  color: #f7f7f2 !important;
  text-shadow: 0 10px 26px rgba(0, 0, 0, 0.46) !important;
  -webkit-text-stroke: 0 !important;
}

body.app-body .tab-rewards .reward-points-pill {
  display: inline-flex !important;
  width: fit-content !important;
  margin-top: 12px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  color: #f7f7f2 !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body.app-body .tab-rewards .reward-node {
  min-height: 78px !important;
  color: #f7f7f2 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.app-body .tab-rewards .reward-node.is-available {
  border-color: rgba(95, 182, 255, 0.36) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.36), inset 0 0 0 1px rgba(95, 182, 255, 0.12) !important;
}

body.app-body .tab-rewards .reward-node.is-claimed {
  background: rgba(95, 182, 255, 0.16) !important;
  background-image: linear-gradient(135deg, rgba(95, 182, 255, 0.22), rgba(255, 255, 255, 0.04)) !important;
}

body.app-body .tab-rewards .reward-node strong {
  color: #f7f7f2 !important;
  text-shadow: 0 6px 18px rgba(0, 0, 0, 0.34) !important;
}

body.app-body .tab-rewards .reward-art {
  color: #5FB6FF !important;
  filter: grayscale(0.2) saturate(1.4) brightness(1.12) !important;
  opacity: 0.28 !important;
}

body.app-body .tab-rewards .reward-index {
  color: #050505 !important;
  background: #f4f4f4 !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
}

body.app-body .tab-rewards .reward-step.is-reached .reward-index,
body.app-body .tab-rewards .reward-step.is-claimed .reward-index {
  background: #5FB6FF !important;
  color: #050505 !important;
  box-shadow: 0 0 0 5px rgba(95, 182, 255, 0.12), 0 0 24px rgba(95, 182, 255, 0.28) !important;
}

body.app-body .tab-rewards .reward-lanes::before,
body.app-body .tab-rewards .reward-path-line {
  background: linear-gradient(180deg, rgba(95, 182, 255, 0.86), rgba(255, 255, 255, 0.18)) !important;
  box-shadow: 0 0 20px rgba(95, 182, 255, 0.18) !important;
}

body.app-body .tab-home #active-vote-card .widget-progress-a,
body.app-body .tab-leagues .ls-match .ls-progress-a,
body.stats-body .m-card .m-progress-a {
  background-color: #5FB6FF !important;
  background-image: linear-gradient(90deg, #5FB6FF, #f1f1f1) !important;
  box-shadow: 0 0 18px rgba(95, 182, 255, 0.22) !important;
}

@media (max-width: 460px) {
  body.app-body .tab-rewards .rewards-head {
    min-height: 138px !important;
    padding: 20px !important;
  }

  body.app-body .tab-rewards .rewards-head .section-h {
    font-size: clamp(28px, 9vw, 40px) !important;
    line-height: 0.96 !important;
  }
}

/* v69: black/gray glass cleanup. Remove old cube decor and nested panels. */
:root {
  --page-black: #030303;
  --page-gray-1: #0a0a0b;
  --page-gray-2: #121214;
  --page-gray-3: #1b1b1e;
  --glass-dark: rgba(15, 15, 17, 0.68);
  --glass-dark-strong: rgba(22, 22, 24, 0.82);
  --glass-gray-line: rgba(255, 255, 255, 0.1);
  --accent: #5FB6FF;
}

html,
body.app-body,
body.stats-body {
  background:
    radial-gradient(circle at 50% -8%, rgba(255, 255, 255, 0.075), transparent 32rem),
    linear-gradient(180deg, var(--page-gray-1), var(--page-black) 36%, #000 100%) !important;
  color: #f4f4f2 !important;
}

body.app-body::before,
body.app-body::after,
body.stats-body::before,
body.stats-body::after,
body.app-body .home-portrait::before,
body.app-body .home-portrait::after,
body.app-body .shop-hero::before,
body.app-body .shop-hero::after,
body.app-body .refs-hero::before,
body.app-body .refs-hero::after,
body.app-body .shop-choice::before,
body.app-body .shop-choice::after,
body.app-body .shop-choice-card::before,
body.app-body .shop-choice-card::after,
body.app-body .choice-art::before,
body.app-body .choice-art::after,
body.app-body .shop-pass-art::before,
body.app-body .shop-pass-art::after,
body.app-body .dock-chip::before,
body.app-body .dock-chip::after,
body.app-body .story-card::before,
body.app-body .story-card::after,
body.app-body .command-row::before,
body.app-body .command-row::after,
body.app-body .trust-rail span::before,
body.app-body .trust-rail span::after,
body.app-body .reward-node::before,
body.app-body .reward-node::after,
body.app-body .reward-art::before,
body.app-body .reward-art::after,
body.app-body .reward-art-corner,
body.app-body .reward-deco,
body.app-body .pass-modal::before,
body.app-body .pass-art::after,
body.app-body #active-vote-card::before,
body.app-body #active-vote-card::after,
body.app-body .arena-card::before,
body.app-body .arena-card::after,
body.app-body .widget-vs::before,
body.app-body .widget-vs::after,
body.app-body .widget-team::before,
body.app-body .widget-team::after,
body.app-body .widget-team-orb::before,
body.app-body .widget-team-orb::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
}

body.app-body .app-header,
body.stats-body .app-header,
body.stats-body .stats-header {
  background:
    linear-gradient(180deg, rgba(32, 32, 34, 0.88), rgba(4, 4, 5, 0.86)) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(18px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.1) !important;
}

body.app-body .app-bnav {
  background:
    linear-gradient(180deg, rgba(30, 30, 32, 0.88), rgba(3, 3, 4, 0.92)) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}

body.app-body .app-bnav::before {
  background: linear-gradient(180deg, #ffffff, #c8c8c8) !important;
  box-shadow: 0 8px 18px rgba(255, 255, 255, 0.12) !important;
}

body.app-body .bn-btn,
body.app-body .bn-btn svg {
  color: rgba(255, 255, 255, 0.64) !important;
}

body.app-body .bn-btn.is-active,
body.app-body .bn-btn.is-active svg {
  color: #030303 !important;
}

body.app-body .lang-toggle,
body.app-body .lang-toggle button,
body.app-body .wallet-btn,
body.app-body .stats-wallet-btn {
  background: #f6f6f2 !important;
  background-image: none !important;
  color: #030303 !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body .brand-stack,
body.app-body .brand-stack:active,
body.app-body .brand-stack:hover {
  transform: none !important;
  filter: none !important;
  text-decoration: none !important;
}

body.app-body .tab-home .metric-strip {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  gap: 8px !important;
}

body.app-body .tab-home .metric-strip .metric {
  background:
    linear-gradient(180deg, rgba(30, 30, 32, 0.76), rgba(8, 8, 9, 0.76)) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 24px rgba(0, 0, 0, 0.34) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

body.app-body .tab-home .metric strong,
body.app-body .tab-home .metric span {
  color: #f4f4f2 !important;
}

body.app-body .tab-home .arena-section,
body.app-body .tab-home #active-vote-card,
body.app-body .tab-home .story-grid,
body.app-body .tab-home .command-board,
body.app-body .tab-shop .shop-choice,
body.app-body .tab-shop .shop-choice-card,
body.app-body .tab-shop .shop-hero,
body.app-body .tab-shop .shop-hero-copy,
body.app-body .tab-shop .choice-copy,
body.app-body .tab-shop .choice-buy,
body.app-body .tab-shop .shop-pack-section,
body.app-body .tab-rewards .rewards-shell,
body.app-body .tab-profile .profile-shell {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.app-body .tab-home #active-vote-card {
  color: #f5f5f1 !important;
  padding-inline: clamp(16px, 4.6vw, 24px) !important;
}

body.app-body .tab-home #active-vote-card .widget-team-orb,
body.app-body .tab-home #active-vote-card .widget-team-lottie {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

body.app-body .tab-home #active-vote-card .widget-vs {
  background: transparent !important;
  color: #f5f5f1 !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body .tab-home .widget-vote-btn,
body.app-body .home-cta-primary,
body.app-body .home-cta-secondary,
body.app-body .seg-control button,
body.app-body .tab-shop .choice-action,
body.app-body .tab-shop .shop-primary,
body.app-body .tab-shop .shop-secondary,
body.app-body .tab-shop .sc-buy,
body.app-body .tab-refs .refs-card button,
body.app-body .share-btn,
body.app-body .promo-strip button {
  color: #030303 !important;
  background: #f5f5f1 !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body .home-cta-secondary,
body.app-body .tab-shop .shop-secondary,
body.app-body .seg-control button {
  color: #f5f5f1 !important;
  background: linear-gradient(180deg, #19191b, #09090a) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.app-body .tab-home .home-league-dock .dock-chip,
body.app-body .tab-home .story-card,
body.app-body .tab-home .trust-rail span,
body.app-body .tab-home .command-row,
body.app-body .tab-refs .refs-card,
body.app-body .tab-refs .refs-stats,
body.app-body .tab-profile .profile-hero,
body.app-body .tab-profile .profile-scoreboard,
body.app-body .tab-profile .profile-cashbacks,
body.app-body .tab-leagues .league-stage,
body.app-body .tab-leagues .ls-match,
body.app-body .tab-leagues .league-stack-section,
body.app-body .tab-leagues .league-ribbon,
body.app-body .tab-leagues .league-tier-card,
body.app-body .tab-rewards .rewards-head,
body.app-body .tab-rewards .reward-node,
body.app-body .pass-card,
body.stats-body .stats-summary,
body.stats-body .sum-card,
body.stats-body .m-card {
  background:
    linear-gradient(180deg, rgba(28, 28, 31, 0.72), rgba(7, 7, 8, 0.76)) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(16px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
}

body.app-body .story-icon,
body.app-body .command-icon,
body.app-body .league-medal,
body.app-body .lr-icon,
body.app-body .refs-card svg,
body.app-body .shop-hero-actions svg,
body.app-body .trust-rail svg {
  color: #f5f5f1 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body .story-icon svg,
body.app-body .command-icon svg,
body.app-body .league-medal svg,
body.app-body .lr-icon svg {
  color: currentColor !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

body.app-body .tab-shop .shop-hero-actions,
body.app-body .tab-shop .promo-strip {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-inline: 0 !important;
}

body.app-body .tab-shop .shop-primary span,
body.app-body .tab-shop .shop-secondary span {
  color: #030303 !important;
}

body.app-body .tab-shop .shop-secondary span {
  color: #f5f5f1 !important;
}

body.app-body .tab-shop .choice-art,
body.app-body .tab-shop .shop-pass-art,
body.app-body .tab-shop .sc-media {
  min-height: clamp(230px, 64vw, 292px) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.app-body .tab-shop .choice-art img,
body.app-body .tab-shop .shop-pass-art img,
body.app-body .tab-shop .sc-media img,
body.app-body .tab-shop .sc-nft-img {
  width: min(500px, 130%) !important;
  max-width: 130% !important;
  transform: scale(1.14) !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

body.app-body .tab-shop .choice-copy {
  padding-top: 10px !important;
}

body.app-body .tab-shop .pack-count {
  background: #f5f5f1 !important;
  color: #030303 !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body .tab-shop .shop-choice-tabs,
body.app-body .tab-leagues .league-view-toggle,
body.app-body .tab-leagues .league-tier-slider,
body.app-body .tab-admin .admin-tabs {
  background:
    linear-gradient(180deg, rgba(28, 28, 30, 0.78), rgba(6, 6, 7, 0.84)) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

body.app-body .tab-shop .shop-choice-tabs button.is-active,
body.app-body .tab-leagues .league-view-toggle button.is-active,
body.app-body .tab-leagues .league-tier-slider button.is-active,
body.app-body .tab-admin .admin-tabs button.is-active {
  background: #f5f5f1 !important;
  color: #030303 !important;
  box-shadow: none !important;
}

body.app-body .tab-profile .profile-hero::after,
body.app-body .tab-profile .profile-shell::after,
body.app-body .level-pill {
  background: #5FB6FF !important;
  color: #030303 !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body .tab-profile .profile-scoreboard {
  display: grid !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.app-body .tab-profile .profile-scoreboard article {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.app-body .tab-profile .profile-cashbacks h2 {
  margin-left: clamp(18px, 5vw, 26px) !important;
}

body.app-body .tab-rewards .rewards-head {
  min-height: 154px !important;
  background:
    radial-gradient(circle at 92% 10%, rgba(95, 182, 255, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(35, 35, 38, 0.78), rgba(8, 8, 9, 0.82)) !important;
}

body.app-body .tab-rewards .reward-node {
  min-height: 76px !important;
}

body.app-body .tab-rewards .reward-art {
  color: #f5f5f1 !important;
  opacity: 0.18 !important;
  background: transparent !important;
  filter: grayscale(1) brightness(1.4) contrast(1.1) !important;
}

body.app-body .tab-rewards .reward-index {
  background: #f5f5f1 !important;
  color: #030303 !important;
  box-shadow: none !important;
}

body.app-body .tab-rewards .reward-step.is-reached .reward-index,
body.app-body .tab-rewards .reward-step.is-claimed .reward-index {
  background: #5FB6FF !important;
}

body.app-body .tab-rewards .reward-lanes::before {
  background: linear-gradient(180deg, #5FB6FF, rgba(255, 255, 255, 0.28)) !important;
  box-shadow: none !important;
}

body.app-body .pass-card {
  background:
    radial-gradient(circle at 86% 18%, rgba(95, 182, 255, 0.16), transparent 30%),
    linear-gradient(180deg, rgba(22, 22, 24, 0.88), rgba(3, 3, 4, 0.94)) !important;
}

body.app-body .pass-art {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.app-body .pass-art img {
  width: 112% !important;
  max-width: 112% !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

body.app-body .widget-progress,
body.app-body .ls-progress,
body.stats-body .m-progress {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 0 !important;
}

body.app-body .widget-progress-a,
body.app-body .ls-progress-a,
body.stats-body .m-progress-a {
  background: linear-gradient(90deg, #5FB6FF, #f4f4f2) !important;
  box-shadow: none !important;
}

@media (max-width: 460px) {
  body.app-body .tab-shop .choice-art,
  body.app-body .tab-shop .shop-pass-art,
  body.app-body .tab-shop .sc-media {
    min-height: 252px !important;
  }

  body.app-body .tab-shop .choice-art img,
  body.app-body .tab-shop .shop-pass-art img,
  body.app-body .tab-shop .sc-media img {
    transform: scale(1.2) !important;
  }
}

/* v70: black/gray glass pass. Keep the plush logo, remove all old cube decor. */
:root {
  --font-display: "Montserrat", "Lato", sans-serif !important;
  --font-body: "Lato", "Montserrat", sans-serif !important;
  --font-uni: "Montserrat", "Lato", sans-serif !important;
  --surface-page: #030303 !important;
  --surface-elevated: rgba(18, 18, 19, 0.74) !important;
  --surface-sunken: rgba(255, 255, 255, 0.04) !important;
  --text-primary: #f5f5f2 !important;
  --text-secondary: rgba(245, 245, 242, 0.7) !important;
  --text-tertiary: rgba(245, 245, 242, 0.46) !important;
  --accent: #5FB6FF !important;
  --accent-hover: #8fcbff !important;
  --accent-quiet: rgba(95, 182, 255, 0.14) !important;
}

html,
body.app-body,
body.stats-body {
  background:
    radial-gradient(circle at 50% -18%, rgba(95, 182, 255, 0.12), transparent 34%),
    linear-gradient(180deg, #050505 0%, #020202 54%, #050505 100%) !important;
  color: var(--text-primary) !important;
}

body.app-body::before,
body.app-body::after,
body.app-body [class*="cube"],
body.app-body [class*="deco"],
body.app-body [class*="corner"],
body.app-body .choice-badge,
body.app-body .choice-pill,
body.app-body .nft-pip-row,
body.app-body .reward-art-corner,
body.app-body .reward-deco,
body.app-body .reward-node::before,
body.app-body .reward-node::after,
body.app-body .choice-art::before,
body.app-body .choice-art::after,
body.app-body .shop-pass-art::before,
body.app-body .shop-pass-art::after,
body.app-body .sc-media::before,
body.app-body .sc-media::after,
body.app-body #active-vote-card::before,
body.app-body #active-vote-card::after,
body.app-body .arena-card::before,
body.app-body .arena-card::after,
body.app-body .widget-team::before,
body.app-body .widget-team::after,
body.app-body .widget-team-orb::before,
body.app-body .widget-team-orb::after,
body.app-body .widget-vs::before,
body.app-body .widget-vs::after,
body.app-body .home-portrait::before,
body.app-body .home-portrait::after,
body.app-body .page-hero::before,
body.app-body .page-hero::after,
body.app-body .pass-art::before,
body.app-body .pass-art::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

body.app-body .app-main {
  background: transparent !important;
}

body.app-body .app-header,
body.stats-body .stats-header {
  background:
    linear-gradient(180deg, rgba(48, 50, 52, 0.68), rgba(5, 5, 6, 0.82)) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
  overflow: visible !important;
}

body.app-body .brand-stack,
body.stats-body .brand-stack {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: grid !important;
  place-items: center !important;
  gap: 0 !important;
  font-family: var(--font-brand) !important;
  letter-spacing: 0 !important;
  pointer-events: auto !important;
}

body.app-body .brand-stack:active,
body.app-body .brand-stack:hover,
body.stats-body .brand-stack:active,
body.stats-body .brand-stack:hover {
  transform: translate(-50%, -50%) !important;
  scale: 1 !important;
  filter: none !important;
}

body.app-body .brand-meme,
body.stats-body .brand-meme {
  color: #5FB6FF !important;
  text-shadow: 0 2px 0 #1b70bd, 0 8px 18px rgba(95, 182, 255, 0.24) !important;
}

body.app-body .brand-throne,
body.stats-body .brand-throne {
  color: #fffaf0 !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.65), 0 8px 18px rgba(255, 255, 255, 0.12) !important;
}

body.app-body .lang-toggle,
body.app-body .lang-toggle button,
body.app-body .wallet-btn,
body.app-body .bal-widget,
body.stats-body .stats-wallet-btn {
  background: rgba(255, 255, 255, 0.92) !important;
  color: #050505 !important;
  border: 0 !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.42) !important;
}

body.app-body .wallet-dot {
  display: none !important;
}

body.app-body .wallet-label {
  max-width: 104px !important;
}

body.app-body .app-bnav {
  background:
    linear-gradient(180deg, rgba(21, 22, 23, 0.86), rgba(0, 0, 0, 0.94)) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow:
    0 22px 44px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

body.app-body .app-bnav::before {
  background: #f5f5f2 !important;
  box-shadow: none !important;
}

body.app-body .bn-btn svg,
body.app-body .bn-btn {
  color: rgba(255, 255, 255, 0.72) !important;
}

body.app-body .bn-btn.is-active,
body.app-body .bn-btn.is-active svg {
  color: #050505 !important;
}

body.app-body .home-portrait,
body.app-body .home-portrait img,
body.app-body .hero-photo {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

body.app-body .metric-strip,
body.app-body .tab-home .arena-section,
body.app-body .tab-home #active-vote-card,
body.app-body .tab-shop .shop-hero,
body.app-body .tab-shop .shop-choice,
body.app-body .tab-shop .shop-choice-card,
body.app-body .tab-shop .shop-pack-section,
body.app-body .tab-shop .shop-hero-copy,
body.app-body .tab-shop .choice-art,
body.app-body .tab-shop .shop-pass-art,
body.app-body .tab-profile .profile-shell,
body.app-body .tab-rewards .rewards-shell {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.app-body .metric-strip .metric,
body.app-body .home-cta-primary,
body.app-body .home-cta-secondary,
body.app-body .home-league-dock .dock-chip,
body.app-body .story-card,
body.app-body .trust-rail span,
body.app-body .command-row,
body.app-body .refs-card,
body.app-body .refs-stats,
body.app-body .profile-hero,
body.app-body .profile-scoreboard,
body.app-body .profile-cashbacks,
body.app-body .league-stage,
body.app-body .ls-match,
body.app-body .league-ribbon,
body.app-body .league-tier-card,
body.app-body .reward-node,
body.app-body .pass-card,
body.stats-body .stats-summary,
body.stats-body .sum-card,
body.stats-body .m-card {
  background:
    radial-gradient(circle at 86% 10%, rgba(95, 182, 255, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(36, 37, 39, 0.68), rgba(7, 7, 8, 0.78)) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
  backdrop-filter: blur(16px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
}

body.app-body .tab-home #active-vote-card,
body.app-body .tab-shop .choice-art,
body.app-body .tab-shop .choice-art *,
body.app-body .tab-shop .shop-pass-art,
body.app-body .tab-shop .shop-pass-art * {
  background-image: none !important;
}

body.app-body .tab-home #active-vote-card {
  padding: clamp(14px, 4vw, 20px) !important;
}

body.app-body .tab-home .widget-team-orb,
body.app-body .tab-home .widget-team-lottie {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

body.app-body .tab-home .widget-vs {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

body.app-body .story-icon,
body.app-body .command-icon,
body.app-body .league-medal,
body.app-body .lr-icon,
body.app-body .bal-icon,
body.app-body .refs-card svg,
body.app-body .shop-hero-actions svg,
body.app-body .trust-rail svg,
body.app-body .story-card svg,
body.app-body .command-row svg {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #ffffff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

body.app-body .shop-hero-actions,
body.app-body .promo-strip,
body.app-body .choice-buy,
body.app-body .choice-copy {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.app-body .shop-primary,
body.app-body .shop-secondary,
body.app-body .choice-action,
body.app-body .widget-vote-btn,
body.app-body .seg-control button,
body.app-body .refs-card button,
body.app-body .share-btn,
body.app-body .promo-strip button,
body.app-body .btn-primary,
body.app-body .btn-ghost {
  background: #f5f5f2 !important;
  color: #050505 !important;
  border: 0 !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.34) !important;
}

body.app-body .shop-primary span,
body.app-body .shop-secondary span {
  color: #050505 !important;
}

body.app-body .shop-choice-tabs,
body.app-body .league-view-toggle,
body.app-body .league-tier-slider,
body.app-body .admin-tabs {
  background:
    linear-gradient(180deg, rgba(35, 36, 38, 0.78), rgba(7, 7, 8, 0.86)) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

body.app-body .shop-choice-tabs button,
body.app-body .league-view-toggle button,
body.app-body .league-tier-slider button,
body.app-body .admin-tabs button {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.55) !important;
  box-shadow: none !important;
}

body.app-body .shop-choice-tabs button.is-active,
body.app-body .league-view-toggle button.is-active,
body.app-body .league-tier-slider button.is-active,
body.app-body .admin-tabs button.is-active {
  background: #f5f5f2 !important;
  color: #050505 !important;
  box-shadow: none !important;
}

body.app-body .tab-shop .choice-art,
body.app-body .tab-shop .shop-pass-art,
body.app-body .tab-shop .sc-media {
  min-height: clamp(270px, 70vw, 330px) !important;
  overflow: hidden !important;
}

body.app-body .tab-shop .choice-art img,
body.app-body .tab-shop .shop-pass-art img,
body.app-body .tab-shop .sc-media img,
body.app-body .tab-shop .sc-nft-img {
  width: min(620px, 150%) !important;
  max-width: 150% !important;
  transform: scale(1.27) !important;
  transform-origin: center !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

body.app-body .pack-count {
  background: rgba(245, 245, 242, 0.96) !important;
  color: #050505 !important;
  box-shadow: none !important;
}

body.app-body .level-pill,
body.app-body .profile-shell::after {
  background: #5FB6FF !important;
  color: #050505 !important;
}

body.app-body .profile-scoreboard article {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body .profile-cashbacks h2 {
  margin-left: clamp(18px, 5vw, 26px) !important;
}

body.app-body .reward-lanes::before {
  background: linear-gradient(180deg, #5FB6FF, rgba(255, 255, 255, 0.35)) !important;
  width: 4px !important;
  box-shadow: 0 0 18px rgba(95, 182, 255, 0.26) !important;
}

body.app-body .rewards-head {
  min-height: 154px !important;
  background:
    radial-gradient(circle at 88% 8%, rgba(95, 182, 255, 0.24), transparent 32%),
    linear-gradient(135deg, rgba(48, 50, 52, 0.82), rgba(10, 10, 11, 0.9)) !important;
}

body.app-body .rewards-head h1,
body.app-body .reward-points-pill {
  color: #f8f8f4 !important;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.55) !important;
}

body.app-body .reward-index,
body.app-body .reward-step.is-reached .reward-index,
body.app-body .reward-step.is-claimed .reward-index {
  background: #5FB6FF !important;
  color: #050505 !important;
  box-shadow: 0 0 0 5px rgba(3, 3, 3, 0.95) !important;
}

body.app-body .reward-step:not(.is-reached) .reward-index {
  background: #f5f5f2 !important;
}

body.app-body .reward-art {
  color: #ffffff !important;
  opacity: 0.24 !important;
  filter: grayscale(1) brightness(1.55) contrast(1.05) !important;
}

body.app-body .pass-art {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.app-body .pass-art img {
  width: 116% !important;
  max-width: 116% !important;
  transform: translateX(-4%) scale(1.05) !important;
  mix-blend-mode: lighten !important;
  filter: grayscale(1) contrast(1.1) brightness(0.92) !important;
}

body.app-body .widget-progress,
body.app-body .ls-progress,
body.stats-body .m-progress {
  height: 10px !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

body.app-body .widget-progress-a,
body.app-body .ls-progress-a,
body.stats-body .m-progress-a {
  background: linear-gradient(90deg, #5FB6FF, #ffffff) !important;
}

body.app-body .toast.is-err {
  background: #f5f5f2 !important;
  color: #050505 !important;
}

@media (max-width: 460px) {
  body.app-body .app-main {
    padding-top: 84px !important;
  }

  body.app-body .tab-shop .choice-art,
  body.app-body .tab-shop .shop-pass-art,
  body.app-body .tab-shop .sc-media {
    min-height: 284px !important;
  }

  body.app-body .tab-shop .choice-art img,
  body.app-body .tab-shop .shop-pass-art img,
  body.app-body .tab-shop .sc-media img {
    transform: scale(1.34) !important;
  }

  body.app-body .brand-stack {
    min-width: 118px !important;
  }
}

/* v70.1: stronger specificity against older plush overrides. */
body.app-body .tab-rewards .reward-lanes {
  background: transparent !important;
  background-image: none !important;
}

body.app-body .tab-rewards .reward-node,
body.app-body .tab-rewards .reward-node.free,
body.app-body .tab-rewards .reward-node.pass,
body.app-body .tab-rewards .reward-node.is-available,
body.app-body .tab-rewards .reward-node.is-claimed,
body.app-body .tab-rewards .reward-node.is-unavailable {
  background:
    radial-gradient(circle at 86% 14%, rgba(95, 182, 255, 0.1), transparent 34%),
    linear-gradient(180deg, rgba(35, 36, 38, 0.72), rgba(6, 6, 7, 0.84)) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  color: #f5f5f2 !important;
}

body.app-body .tab-rewards .reward-node.is-unavailable {
  opacity: 0.48 !important;
}

body.app-body .tab-rewards .reward-node.is-available,
body.app-body .tab-rewards .reward-node.is-claimed {
  border-color: rgba(95, 182, 255, 0.42) !important;
}

body.app-body .tab-rewards .reward-node .reward-art {
  background: transparent !important;
}

body.app-body .tab-shop .shop-choice-card,
body.app-body .tab-shop .shop-choice-card[data-shop-selected-tier],
body.app-body .tab-shop .shop-choice,
body.app-body .tab-shop .shop-pack-section {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body .tab-home #active-vote-card,
body.app-body .tab-home .arena-card,
body.app-body .tab-home #active-vote-card.is-vote-success {
  background: transparent !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

body.app-body .tab-home .widget-bg,
body.app-body .tab-home .widget-aurora,
body.app-body .tab-home .widget-glow {
  display: none !important;
}

body.app-body .tab-home .widget-team-orb,
body.app-body .tab-home .team-a .widget-team-orb,
body.app-body .tab-home .team-b .widget-team-orb,
body.app-body .tab-home #active-vote-card .widget-team-orb,
body.app-body .tab-home #active-vote-card .team-a .widget-team-orb,
body.app-body .tab-home #active-vote-card .team-b .widget-team-orb {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* =================================================================
 * v=44 пїЅ FINAL OVERRIDE PASS (zero cubes, zero block-on-block,
 * zero icon backgrounds, only black canvas + grey hairlines).
 * Designed to override every previous decorative layer on top.
 * ================================================================= */

/* 1. Canvas пїЅ pure black gradient, no decorative cubes / grids / dots */
html,
body,
body.app-body {
  background: #050505 !important;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(40, 40, 44, 0.65), transparent 70%),
    linear-gradient(180deg, #0a0a0c 0%, #050505 50%, #000000 100%) !important;
  background-attachment: fixed !important;
}

/* Kill ANY background pattern image / cube / noise / svg-data on stage layers */
body.app-body .bg-stage,
body.app-body .bg-blob,
body.app-body .bg-blob-blue,
body.app-body .bg-blob-red,
body.app-body .bg-blob-green,
body.app-body .bg-stars,
body.app-body .bg-grain,
body.app-body .bg-cubes,
body.app-body .bg-grid,
body.app-body .bg-pattern,
body.app-body .bg-noise,
body.app-body [class*="-cube"],
body.app-body [class*="-cubes"],
body.app-body [class*="cube-"],
body.app-body [class*="grid-"],
body.app-body [class*="-grid-bg"],
body.app-body [class*="pattern-"],
body.app-body [class*="-pattern"],
body.app-body [class*="-noise"],
body.app-body [class*="floater"],
body.app-body [class*="confetti-deco"],
body.app-body .scene-cubes,
body.app-body .scene-orbs,
body.app-body .scene-particles,
body.app-body .arena-deco,
body.app-body .arena-glow,
body.app-body .hero-deco,
body.app-body .hero-glow,
body.app-body .hero-grid {
  display: none !important;
}

/* Kill decorative pseudo-elements on canvas/body */
body.app-body::before,
body.app-body::after,
body.app-body .app-main::before,
body.app-body .app-main::after,
body.app-body .tab::before,
body.app-body .tab::after {
  display: none !important;
  background: transparent !important;
  background-image: none !important;
}


/* 2. HEADER пїЅ distinct dark bar with hairline */
body.app-body .app-header {
  background: rgba(12, 12, 14, 0.86) !important;
  background-image: linear-gradient(180deg, rgba(28,28,32,0.92), rgba(8,8,10,0.86)) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
}


/* 3. BOTTOM NAV пїЅ distinct dark pill, visible from canvas */
body.app-body .app-bnav {
  background: rgba(14, 14, 16, 0.88) !important;
  background-image: linear-gradient(180deg, rgba(34,34,38,0.92), rgba(10,10,12,0.86)) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    0 16px 36px rgba(0,0,0,0.65),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
}


/* 4. ALL CARDS / PANELS / WIDGETS пїЅ transparent, blend with canvas, hairline only */
body.app-body .home-editorial,
body.app-body .home-flow-step,
body.app-body .home-trust span,
body.app-body .widget,
body.app-body .arena-card,
body.app-body #active-vote-card,
body.app-body .seg-control,
body.app-body .ios-group,
body.app-body .shop-hero,
body.app-body .shop-status-card,
body.app-body .shop-included article,
body.app-body .shop-card,
body.app-body .shop-choice,
body.app-body .shop-choice-card,
body.app-body .shop-pass-art,
body.app-body .league-hero,
body.app-body .league-bracket,
body.app-body .league-rules article,
body.app-body .league-ribbon,
body.app-body .refs-card,
body.app-body .refs-stat,
body.app-body .refs-list,
body.app-body .reward-lane,
body.app-body .reward-node,
body.app-body .reward-card,
body.app-body .rewards-head,
body.app-body .profile-shell,
body.app-body .profile-card,
body.app-body .profile-stat,
body.app-body .metric-strip .metric,
body.app-body .home-ledger-item,
body.app-body .league-ledger-item,
body.app-body .empty-state {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Outer container of each section gets a single subtle hairline */
body.app-body .home-editorial,
body.app-body .widget,
body.app-body .arena-card,
body.app-body #active-vote-card,
body.app-body .ios-group,
body.app-body .shop-hero,
body.app-body .shop-card,
body.app-body .shop-choice-card,
body.app-body .league-hero,
body.app-body .league-ribbon,
body.app-body .refs-card,
body.app-body .refs-list,
body.app-body .reward-lane,
body.app-body .profile-card {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
}

/* Inner / nested cards: NO border (no block-on-block) */
body.app-body .widget .home-flow-step,
body.app-body .widget .metric,
body.app-body .reward-lane .reward-node,
body.app-body .reward-lane .reward-card,
body.app-body .profile-card .profile-stat,
body.app-body .ios-group .ios-row,
body.app-body .home-editorial .metric,
body.app-body .league-hero .league-ledger-item,
body.app-body .home-trust span,
body.app-body .shop-status-card,
body.app-body .shop-included article,
body.app-body .league-rules article,
body.app-body .refs-stat {
  border: 0 !important;
}


/* 5. ICONS пїЅ WHITE only, no colored circular backgrounds */
body.app-body .ios-row-icon,
body.app-body .home-flow-icon,
body.app-body .shop-included article > span,
body.app-body .league-rules article > span,
body.app-body .reward-node-icon,
body.app-body .reward-card-icon,
body.app-body .profile-icon,
body.app-body [class*="-icon-blue"],
body.app-body [class*="-icon-red"],
body.app-body [class*="-icon-green"],
body.app-body [class*="-icon-orange"],
body.app-body [class*="-icon-purple"],
body.app-body [class*="-icon-gold"],
body.app-body [class*="-icon-gray"],
body.app-body [class*="-icon-pink"],
body.app-body [class*="-icon-teal"],
body.app-body [class*="-icon-indigo"] {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  --ios-icon-solid: transparent !important;
  --ios-icon-from: transparent !important;
  --ios-icon-to: transparent !important;
}
body.app-body .ios-row-icon::before,
body.app-body .ios-row-icon::after,
body.app-body .home-flow-icon::before,
body.app-body .home-flow-icon::after,
body.app-body .shop-included article > span::before,
body.app-body .shop-included article > span::after,
body.app-body .league-rules article > span::before,
body.app-body .league-rules article > span::after {
  display: none !important;
}
body.app-body .ios-row-icon svg,
body.app-body .home-flow-icon svg,
body.app-body .shop-included article > span svg,
body.app-body .league-rules article > span svg,
body.app-body .reward-node-icon svg,
body.app-body .reward-card-icon svg,
body.app-body .profile-icon svg,
body.app-body .home-trust span svg,
body.app-body .bn-icon svg,
body.app-body .bal-icon svg {
  fill: #ffffff !important;
  color: #ffffff !important;
}


/* 6. ROW dividers in iOS-style lists пїЅ keep but lighter */
body.app-body .ios-row + .ios-row::before {
  border-top-color: rgba(255, 255, 255, 0.06) !important;
}


/* 7. SHOP пїЅ bigger, cleaner card; remove button frames */
body.app-body .shop-card {
  padding: 20px 22px !important;
  gap: 18px !important;
}
body.app-body .shop-card .sc-emoji {
  width: 72px !important;
  height: 72px !important;
  background: linear-gradient(180deg, rgba(60,60,66,0.55), rgba(20,20,22,0.55)) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
}
body.app-body .shop-card .sc-name {
  font-size: 18px !important;
}
body.app-body .shop-card .sc-desc {
  font-size: 13px !important;
}
body.app-body .shop-card .sc-price {
  font-size: 20px !important;
}

/* Buttons in shop пїЅ solid pill, NO surrounding frame/box */
body.app-body .shop-card .sc-buy,
body.app-body .shop-primary,
body.app-body .shop-secondary,
body.app-body .shop-hero-actions a,
body.app-body .shop-hero-actions button,
body.app-body [data-shop-claim],
body.app-body [data-shop-external-hero] {
  background: linear-gradient(180deg, #f4f4f0, #d8d8d2) !important;
  background-image: linear-gradient(180deg, #f4f4f0, #d8d8d2) !important;
  color: #050505 !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
body.app-body .shop-hero-actions {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
body.app-body .shop-hero-actions::before,
body.app-body .shop-hero-actions::after {
  display: none !important;
}


/* 8. SHOP HERO MEMEPASS card пїЅ image must blend with canvas, no white bg */
body.app-body .shop-pass-art {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 24px 48px rgba(0,0,0,0.55) !important;
}
body.app-body .shop-pass-art img {
  background: transparent !important;
  mix-blend-mode: normal !important;
  filter: brightness(1.05) contrast(1.05) !important;
}
body.app-body .shop-pass-strip {
  background: rgba(0,0,0,0.55) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}


/* 9. WIDGET "пїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅ пїЅпїЅпїЅпїЅ" пїЅ fully blends with canvas, only hairline */
body.app-body .widget,
body.app-body #active-vote-card,
body.app-body .arena-card {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
body.app-body .widget::before,
body.app-body .widget::after,
body.app-body #active-vote-card::before,
body.app-body #active-vote-card::after {
  display: none !important;
}

/* Team orbs пїЅ flat, no glass + colored fills, just outline */
body.app-body .widget-team-orb,
body.app-body .team-a .widget-team-orb,
body.app-body .team-b .widget-team-orb {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
}
body.app-body .widget-team-orb::before,
body.app-body .widget-team-orb::after { display: none !important; }


/* 10. PROFILE / REWARDS пїЅ strip nested panels (no block-on-block) */
body.app-body .profile-shell,
body.app-body .profile-shell > *,
body.app-body .rewards-shell,
body.app-body .rewards-shell > *,
body.app-body .reward-lanes,
body.app-body .reward-lanes > * {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Outer card on profile-shell / rewards-shell ONLY (single hairline frame) */
body.app-body .profile-shell {
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 22px !important;
  padding: 20px !important;
}
body.app-body .reward-lane {
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 18px !important;
  padding: 16px !important;
  margin-bottom: 14px !important;
}
body.app-body .reward-lane .reward-node + .reward-node,
body.app-body .reward-lane .reward-card + .reward-card {
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}


/* 11. KILL all conic-gradients on team avatars / decorative orbs (no rainbows) */
body.app-body [style*="conic-gradient"],
body.app-body .arena-shine,
body.app-body .team-shine,
body.app-body .reward-glow {
  background-image: none !important;
}


/* 12. FOOTER / page-eyebrow / kicker пїЅ keep but neutral colors */
body.app-body .page-kicker,
body.app-body .section-eyebrow,
body.app-body .home-kicker,
body.app-body .league-kicker,
body.app-body .shop-kicker {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.75) !important;
}


/* 13. Toast/modal пїЅ keep visible but match canvas */
body.app-body .toast {
  background: rgba(20,20,22,0.92) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}
body.app-body .modal-card {
  background: rgba(14,14,16,0.96) !important;
  background-image: linear-gradient(180deg, rgba(36,36,40,0.92), rgba(10,10,12,0.94)) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}


/* =================================================================
 * v=72 пїЅ KILL HUGE GAP between header and content. The previous
 * design forced .home-hero / .page-hero to 760px min-height and
 * added 56-112px top/bottom padding. Make them tight.
 * ================================================================= */

body.app-body .app-header {
  margin-bottom: 8px !important;
}

body.app-body .app-main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body.app-body .tab,
body.app-body .tab-home,
body.app-body .tab-shop,
body.app-body .tab-leagues,
body.app-body .tab-refs,
body.app-body .tab-rewards {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body.app-body .page-hero,
body.app-body .home-hero,
body.app-body .page-hero.home-hero,
body.app-body .tab-home .home-hero,
body.app-body .tab-home .page-hero,
body.app-body .tab-home .page-hero.home-hero,
body.app-body .shop-hero,
body.app-body .league-hero {
  min-height: 0 !important;
  padding-top: 12px !important;
  padding-bottom: 16px !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  gap: 18px !important;
}

/* Hero photo (Pepe plush) пїЅ keep visible but compact */
body.app-body .home-portrait,
body.app-body .home-portrait img,
body.app-body .hero-photo {
  max-height: clamp(180px, 36vw, 260px) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* If hero is 2-column on desktop, keep gap reasonable */
@media (min-width: 720px) {
  body.app-body .page-hero.home-hero {
    gap: 32px !important;
    padding-top: 16px !important;
  }
}

/* First section after hero пїЅ no extra top margin */
body.app-body .arena-section,
body.app-body .home-flow,
body.app-body .home-trust,
body.app-body section.arena-section:first-of-type {
  margin-top: 16px !important;
  padding-top: 0 !important;
}

/* =================================================================
 * v=73 пїЅ Final pass: blend images, kill cubes in rewards, fix
 * active nav/tab colors, white XP icon, transparent leagues/bracket,
 * remove circular glow behind VS card.
 * ================================================================= */

/* 1. IMAGES blend with canvas пїЅ no white frames anywhere */
body.app-body img.hero-photo,
body.app-body .home-portrait img,
body.app-body .home-portrait,
body.app-body .shop-pass-art img,
body.app-body .shop-pass-art,
body.app-body .refs-sticker,
body.app-body .reward-card img,
body.app-body .profile-photo,
body.app-body .profile-photo img,
body.app-body figure {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  -webkit-filter: none !important;
  filter: none !important;
  margin: 0 auto !important;
}
body.app-body img.hero-photo,
body.app-body .home-portrait img,
body.app-body .shop-pass-art img,
body.app-body .reward-card img {
  mix-blend-mode: normal !important;
}


/* 2. REWARDS TAB пїЅ kill cubes / grid / lattice / dotted patterns */
body.app-body .tab-rewards,
body.app-body .tab-rewards *::before,
body.app-body .tab-rewards *::after,
body.app-body .tab-rewards .reward-lane,
body.app-body .tab-rewards .reward-node,
body.app-body .tab-rewards .reward-card,
body.app-body .tab-rewards .rewards-shell,
body.app-body .tab-rewards .reward-lanes,
body.app-body .tab-rewards .rewards-head,
body.app-body .tab-rewards [class*="grid"],
body.app-body .tab-rewards [class*="cube"],
body.app-body .tab-rewards [class*="-deco"],
body.app-body .tab-rewards [class*="pattern"] {
  background-image: none !important;
}
body.app-body .tab-rewards .reward-deco,
body.app-body .tab-rewards .reward-lattice,
body.app-body .tab-rewards .rewards-bg,
body.app-body .tab-rewards .scene-cubes {
  display: none !important;
}
body.app-body .tab-rewards .reward-lane {
  background: transparent !important;
}
body.app-body .tab-rewards .reward-lane > * {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* 3. BOTTOM NAV active button пїЅ icon stays WHITE/blue, NEVER black */
body.app-body .app-bnav .bn-btn.is-active,
body.app-body .app-bnav .bn-btn.is-active .bn-icon,
body.app-body .app-bnav .bn-btn.is-active .bn-l,
body.app-body .app-bnav .bn-btn[aria-current="page"],
body.app-body .app-bnav .bn-btn[aria-current="page"] .bn-icon,
body.app-body .app-bnav .bn-btn[aria-current="page"] .bn-l {
  color: #ffffff !important;
}
body.app-body .app-bnav .bn-btn.is-active svg,
body.app-body .app-bnav .bn-btn[aria-current="page"] svg {
  fill: #ffffff !important;
  color: #ffffff !important;
}
body.app-body .app-bnav .bn-btn.is-active {
  background: rgba(255,255,255,0.10) !important;
  background-image: linear-gradient(180deg, rgba(70,70,76,0.85), rgba(28,28,32,0.85)) !important;
}


/* 4. SHOP segmented (slider tabs) пїЅ active text/icon WHITE on dark pill */
body.app-body .seg-control button.is-on,
body.app-body .seg-control button[aria-selected="true"],
body.app-body .seg-control .is-on,
body.app-body .shop-tabs .is-on,
body.app-body .shop-tabs button.is-on,
body.app-body [data-shop-tabs] .is-on,
body.app-body [data-shop-tab].is-on {
  color: #ffffff !important;
  background: rgba(255,255,255,0.12) !important;
  background-image: linear-gradient(180deg, rgba(60,60,66,0.85), rgba(20,20,24,0.85)) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
}
body.app-body .seg-control button.is-on svg,
body.app-body .shop-tabs button.is-on svg,
body.app-body [data-shop-tab].is-on svg {
  fill: #ffffff !important;
  color: #ffffff !important;
}


/* 5. PROFILE пїЅ XP icon WHITE, no white frame around it */
body.app-body .profile-shell [class*="xp"],
body.app-body .profile-xp,
body.app-body .profile-xp-icon,
body.app-body .profile-stat-icon,
body.app-body .profile-icon,
body.app-body .profile-meta [class*="icon"],
body.app-body .profile-shell [data-profile-points],
body.app-body .profile-shell [class*="-badge"] {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.app-body .profile-shell svg,
body.app-body .profile-xp svg,
body.app-body .profile-xp-icon svg,
body.app-body .profile-stat-icon svg,
body.app-body .profile-icon svg,
body.app-body .profile-meta svg,
body.app-body [data-profile-points] svg {
  fill: #ffffff !important;
  color: #ffffff !important;
  background: transparent !important;
}


/* 6. LEAGUES TAB пїЅ all blocks transparent, hairline only */
body.app-body .tab-leagues .league-hero,
body.app-body .tab-leagues .league-bracket,
body.app-body .tab-leagues .league-rules article,
body.app-body .tab-leagues .league-ribbon,
body.app-body .tab-leagues .leagues-stack > *,
body.app-body .tab-leagues .league-card,
body.app-body .tab-leagues .league-tier,
body.app-body .tab-leagues .lr-tokens,
body.app-body .tab-leagues .lr-token,
body.app-body .tab-leagues .league-bracket > *,
body.app-body .tab-leagues [class*="league-"],
body.app-body .tab-leagues [class*="bracket-"],
body.app-body .tab-leagues .league-hero::before,
body.app-body .tab-leagues .league-hero::after {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.app-body .tab-leagues .league-hero::before,
body.app-body .tab-leagues .league-hero::after,
body.app-body .tab-leagues .league-ribbon::before,
body.app-body .tab-leagues .league-ribbon::after {
  display: none !important;
}
/* Outer hairline only on top-level league cards */
body.app-body .tab-leagues .league-hero,
body.app-body .tab-leagues .league-ribbon {
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 18px !important;
}
body.app-body .tab-leagues .league-rules article,
body.app-body .tab-leagues .lr-token,
body.app-body .tab-leagues .league-bracket > *,
body.app-body .tab-leagues .leagues-stack > * .lr-tokens,
body.app-body .tab-leagues .leagues-stack > * > * {
  border: 0 !important;
}


/* 7. BRACKET (пїЅпїЅпїЅпїЅпїЅ) пїЅ same: transparent, no nested fills */
body.app-body .league-bracket,
body.app-body .league-bracket *,
body.app-body .bracket-round,
body.app-body .bracket-match,
body.app-body .bracket-team,
body.app-body .bracket-line,
body.app-body [class*="bracket"] {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
body.app-body .bracket-match {
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
}


/* 8. WIDGET VS CARD пїЅ kill ALL radial-gradient/circular glows */
body.app-body .widget,
body.app-body #active-vote-card,
body.app-body .arena-card,
body.app-body .widget-vs,
body.app-body .arena-card .widget-vs,
body.app-body .widget-team,
body.app-body .widget-team-orb,
body.app-body .arena-shine,
body.app-body .arena-glow,
body.app-body .arena-card .arena-shine,
body.app-body .arena-card .arena-glow,
body.app-body .vs-glow,
body.app-body .vs-orb,
body.app-body .arena-orb {
  background-image: none !important;
}
body.app-body .widget::before,
body.app-body .widget::after,
body.app-body #active-vote-card::before,
body.app-body #active-vote-card::after,
body.app-body .arena-card::before,
body.app-body .arena-card::after,
body.app-body .widget-vs::before,
body.app-body .widget-vs::after,
body.app-body .widget-team::before,
body.app-body .widget-team::after,
body.app-body .widget-team-orb::before,
body.app-body .widget-team-orb::after,
body.app-body .arena-shine,
body.app-body .arena-glow,
body.app-body .vs-glow,
body.app-body .vs-orb {
  display: none !important;
  background: transparent !important;
  background-image: none !important;
  filter: none !important;
  -webkit-filter: none !important;
}


/* 9. PERF: cap heavy filters/animations on backgrounds */
body.app-body .bg-stage *,
body.app-body .arena-deco,
body.app-body .hero-deco,
body.app-body .scene-cubes,
body.app-body .scene-orbs,
body.app-body .scene-particles {
  filter: none !important;
  -webkit-filter: none !important;
  animation: none !important;
}

/* =================================================================
 * v=74 пїЅ KILL stripes after cubes, perf for rewards scroll, white
 * bonus icon, smaller centered titles, nuke widget circle for good.
 * ================================================================= */

/* 1. KILL all borders/outlines that remained as "stripes" after we
 *    removed grid/cube backgrounds in rewards. */
body.app-body .tab-rewards *,
body.app-body .tab-rewards .reward-node,
body.app-body .tab-rewards .reward-card,
body.app-body .tab-rewards .reward-row,
body.app-body .tab-rewards .reward-tile,
body.app-body .tab-rewards .reward-grid,
body.app-body .tab-rewards .reward-grid > *,
body.app-body .tab-rewards [class*="row"],
body.app-body .tab-rewards [class*="cell"],
body.app-body .tab-rewards [class*="stripe"],
body.app-body .tab-rewards [class*="line"],
body.app-body .tab-rewards [class*="track"] {
  border: 0 !important;
  outline: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
}
/* Re-add ONLY a single hairline on outer reward-lane (visual frame) */
body.app-body .tab-rewards .reward-lane {
  border: 1px solid rgba(255,255,255,0.08) !important;
}

/* 2. PERF: strip backdrop-filter / blur / heavy filters in rewards
 *    so scroll doesn't drop frames on mobile. */
body.app-body .tab-rewards,
body.app-body .tab-rewards *,
body.app-body .tab-rewards *::before,
body.app-body .tab-rewards *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  will-change: auto !important;
  transform: none !important;
  animation: none !important;
}


/* 3. BONUSES (refs.earned) icon пїЅ transparent bg, white SVG. */
body.app-body [data-ref-earned],
body.app-body [data-ref-earned] *,
body.app-body .refs-stat [data-ref-earned],
body.app-body .refs-stat .rs-value,
body.app-body .refs-bonus,
body.app-body .refs-bonus-icon,
body.app-body .refs-stat [class*="icon"],
body.app-body .refs-stat svg {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
body.app-body .refs-stat svg,
body.app-body [data-ref-earned] svg,
body.app-body .refs-bonus-icon svg,
body.app-body .refs-bonus svg {
  fill: #ffffff !important;
  color: #ffffff !important;
}


/* 4. REFS heading smaller, all titles centered. */
body.app-body .tab-refs .section-h,
body.app-body .tab-refs h1,
body.app-body .tab-refs h2,
body.app-body .tab-refs .refs-h {
  font-size: clamp(20px, 4vw, 24px) !important;
}
body.app-body .section-h,
body.app-body .display-title,
body.app-body .home-title,
body.app-body .shop-title,
body.app-body .league-title,
body.app-body .refs-h,
body.app-body .rewards-title,
body.app-body .profile-title,
body.app-body .page-title,
body.app-body h1.display-title,
body.app-body h2.section-h {
  text-align: center !important;
}
body.app-body .section-row {
  justify-content: center !important;
  text-align: center !important;
  align-items: center !important;
}
body.app-body .page-kicker,
body.app-body .section-eyebrow,
body.app-body .home-kicker,
body.app-body .shop-kicker,
body.app-body .league-kicker {
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  width: max-content !important;
  max-width: 100% !important;
  text-align: center !important;
}


/* 5. WIDGET пїЅ NUKE all circular elements (radial-gradient, blurred
 *    circles, decorative orbs) behind/inside arena card. */
body.app-body .arena-section,
body.app-body .arena-section *,
body.app-body .arena-section *::before,
body.app-body .arena-section *::after,
body.app-body .widget,
body.app-body .widget *::before,
body.app-body .widget *::after,
body.app-body #active-vote-card,
body.app-body #active-vote-card *::before,
body.app-body #active-vote-card *::after,
body.app-body .arena-card,
body.app-body .arena-card *::before,
body.app-body .arena-card *::after {
  background-image: none !important;
}
body.app-body .arena-section [class*="glow"],
body.app-body .arena-section [class*="halo"],
body.app-body .arena-section [class*="orb"]:not(.widget-team-orb):not(.widget-team-lottie),
body.app-body .arena-section [class*="ring"],
body.app-body .arena-section [class*="aura"],
body.app-body .arena-section [class*="shine"],
body.app-body .arena-section [class*="bloom"],
body.app-body .arena-section [class*="halo"],
body.app-body .widget [class*="glow"],
body.app-body .widget [class*="halo"],
body.app-body .widget [class*="aura"],
body.app-body .widget [class*="ring"],
body.app-body .widget [class*="shine"],
body.app-body .widget [class*="bloom"],
body.app-body .widget [class*="bg-circle"],
body.app-body .widget [class*="vs-circle"],
body.app-body .widget [class*="bg-orb"],
body.app-body .widget .vs-pulse,
body.app-body .widget .vs-glow,
body.app-body .widget .arena-pulse,
body.app-body .widget .arena-orb,
body.app-body .widget [class*="-deco"],
body.app-body .arena-card [class*="-deco"] {
  display: none !important;
  background: transparent !important;
  background-image: none !important;
}

/* Force the widget itself to a flat clean rectangle */
body.app-body .widget,
body.app-body .arena-card,
body.app-body #active-vote-card {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

/* Cap any direct inline radial-gradient anywhere inside widget */
body.app-body .widget [style*="radial-gradient"],
body.app-body .arena-card [style*="radial-gradient"],
body.app-body .arena-section [style*="radial-gradient"] {
  background-image: none !important;
}

/* =================================================================
 * v=75 пїЅ Strip ALL remaining hairline borders on blocks (user
 * wants pure flat layout). Move hero plush image up. Hide stray
 * "Telegram profile" text. Make vote work without NOT FOUND toast.
 * ================================================================= */

/* 1. KILL all outer hairline borders on cards/widgets пїЅ user wants
 *    blocks to dissolve completely into the canvas. */
body.app-body .home-editorial,
body.app-body .widget,
body.app-body .arena-card,
body.app-body #active-vote-card,
body.app-body .ios-group,
body.app-body .shop-hero,
body.app-body .shop-card,
body.app-body .shop-choice-card,
body.app-body .league-hero,
body.app-body .league-ribbon,
body.app-body .refs-card,
body.app-body .refs-list,
body.app-body .reward-lane,
body.app-body .profile-card,
body.app-body .profile-shell,
body.app-body .bracket-match,
body.app-body .tab-leagues .league-hero,
body.app-body .tab-leagues .league-ribbon,
body.app-body .tab-rewards .reward-lane,
body.app-body .tab-shop .shop-pass-art,
body.app-body .modal-card,
body.app-body .toast {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Header + bottom nav пїЅ KEEP visibility (user said earlier to keep
 * those visibly distinct). Just trim border to single-pixel hairline
 * since they're floating elements. */
body.app-body .app-header,
body.app-body .app-bnav {
  border: 1px solid rgba(255,255,255,0.06) !important;
}


/* 2. HERO image пїЅ move up, less padding above. */
body.app-body .page-hero,
body.app-body .home-hero,
body.app-body .page-hero.home-hero,
body.app-body .tab-home .home-hero {
  padding-top: 0 !important;
  margin-top: -8px !important;
  gap: 12px !important;
}
body.app-body .home-portrait,
body.app-body .home-portrait img,
body.app-body .hero-photo,
body.app-body figure.home-portrait {
  margin-top: -8px !important;
  margin-bottom: 4px !important;
  max-height: clamp(160px, 32vw, 240px) !important;
}


/* 3. Hide ANY remaining "Telegram profile" / "Telegram пїЅпїЅпїЅпїЅпїЅпїЅпїЅ"
 *    kicker that some other layout pass might have re-added. */
body.app-body .profile-shell .page-kicker,
body.app-body .profile-shell [class*="kicker"],
body.app-body [data-profile-kicker] {
  display: none !important;
}

/* =================================================================
 * v=76 пїЅ Quick actions title white+centered, hide trophy icons in
 * league rules, increase gap "пїЅпїЅпїЅ пїЅпїЅпїЅпїЅпїЅпїЅ" > tier slider, kill remaining
 * scroll lag (rewards + tab transitions).
 * ================================================================= */

/* 1. "пїЅпїЅпїЅпїЅпїЅпїЅпїЅ пїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅ" пїЅ white, centered, larger. */
body.app-body .command-board #quick-title,
body.app-body #quick-title,
body.app-body .command-board .section-sub {
  color: #ffffff !important;
  text-align: center !important;
  text-transform: none !important;
  letter-spacing: -0.014em !important;
  font-size: clamp(20px, 4vw, 26px) !important;
  font-weight: 700 !important;
  margin: 0 auto 16px !important;
  display: block !important;
}

/* 2. Hide ALL trophy/medal/cup decorative icons inside leagues tab. */
body.app-body .tab-leagues .league-rules article > span,
body.app-body .tab-leagues .lr-medal,
body.app-body .tab-leagues [class*="trophy"],
body.app-body .tab-leagues [class*="medal"],
body.app-body .tab-leagues [class*="cup"],
body.app-body .tab-leagues .league-rules svg[class*="trophy"],
body.app-body .tab-leagues svg use[href="#i-trophy"],
body.app-body .tab-leagues svg use[href="#i-medal"],
body.app-body .tab-leagues .league-icon,
body.app-body .tab-leagues .league-emoji,
body.app-body .tab-leagues .lr-icon,
body.app-body .tab-leagues .league-rules article svg,
body.app-body .tab-leagues .league-tier-slider svg,
body.app-body .tab-leagues .league-tier-slider [class*="emoji"] {
  display: none !important;
}
/* Adjust grid for league-rules article since we removed the icon column */
body.app-body .tab-leagues .league-rules article {
  grid-template-columns: 1fr !important;
  padding-left: 0 !important;
}

/* 3. "пїЅпїЅпїЅ пїЅпїЅпїЅпїЅпїЅпїЅ. пїЅпїЅпїЅпїЅ пїЅпїЅпїЅпїЅ." пїЅ bigger gap before tier slider. */
body.app-body .league-stack-section {
  margin-top: 48px !important;
}
body.app-body .league-stack-title {
  margin-bottom: 12px !important;
}
body.app-body .league-stack-section .section-sub {
  margin-bottom: 32px !important;
}
body.app-body .league-stack-section .league-tier-slider {
  margin-top: 28px !important;
}


/* 4. PERF: kill heavy effects on tab transitions + reward scroll. */
body.app-body .tab,
body.app-body .tab-rewards,
body.app-body .tab-rewards *,
body.app-body .reward-lane,
body.app-body .reward-node,
body.app-body .reward-card,
body.app-body .arena-section,
body.app-body .league-bracket,
body.app-body .league-bracket * {
  will-change: auto !important;
  contain: layout style !important;
  transform: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation-duration: 0ms !important;
  transition-duration: 120ms !important;
}
/* Allow ONLY tap feedback transitions */
body.app-body .widget-vote-btn,
body.app-body .shop-card .sc-buy,
body.app-body .bn-btn,
body.app-body .ios-row,
body.app-body .command-row,
body.app-body .reward-card button,
body.app-body .league-tier-slider button {
  transition: opacity 120ms linear, color 120ms linear, background-color 120ms linear !important;
}

/* Tab fade-in: keep but quick (no blur/transform). */
body.app-body .tab {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* =================================================================
 * v=77 пїЅ Vote-card swipe animation + bigger hero plush + better
 * 'NOT FOUND' fallback. After this every interaction has a visible
 * slide transition between matches.
 * ================================================================= */

/* 1. Vote card swipe transitions. */
body.app-body [data-vs-card] {
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity   200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: transform, opacity;
}
body.app-body [data-vs-card].vs-exit-left {
  transform: translateX(-110%) rotate(-2deg) !important;
  opacity: 0 !important;
}
body.app-body [data-vs-card].vs-exit-right {
  transform: translateX(110%) rotate(2deg) !important;
  opacity: 0 !important;
}
body.app-body [data-vs-card].vs-enter-left {
  animation: vs-enter-from-left 280ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
body.app-body [data-vs-card].vs-enter-right {
  animation: vs-enter-from-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
@keyframes vs-enter-from-left {
  from { transform: translateX(-100%) rotate(-2deg); opacity: 0; }
  to   { transform: translateX(0) rotate(0); opacity: 1; }
}
@keyframes vs-enter-from-right {
  from { transform: translateX(100%) rotate(2deg); opacity: 0; }
  to   { transform: translateX(0) rotate(0); opacity: 1; }
}

/* User-driven swipe: while finger is dragging, follow the touch.
 * setupSwipe() already sets inline transform during drag. */
body.app-body [data-vs-card][style*="translateX"] {
  transition: none !important;   /* no easing while finger drag */
}


/* 2. BIGGER hero plush image. User wants it MUCH bigger. */
body.app-body .home-portrait,
body.app-body .home-portrait img,
body.app-body .hero-photo,
body.app-body figure.home-portrait {
  max-height: clamp(260px, 56vw, 440px) !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  display: block !important;
}
/* Single column for hero on mobile (image full-width above text) */
@media (max-width: 720px) {
  body.app-body .page-hero,
  body.app-body .home-hero,
  body.app-body .page-hero.home-hero,
  body.app-body .tab-home .home-hero {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
  body.app-body .home-portrait img,
  body.app-body .hero-photo {
    max-height: clamp(280px, 60vw, 420px) !important;
  }
}

/* 3. Make swipe area visibly hint-able (subtle cursor). */
body.app-body [data-vs-card] {
  cursor: grab;
  touch-action: pan-y;
}
body.app-body [data-vs-card]:active { cursor: grabbing; }

/* =================================================================
 * v=78 пїЅ Glass effect (NOT transparent) for sliders and tabs.
 * Earlier overrides made them transparent which lost the affordance.
 * Now: real frosted glass пїЅ visible but blends with canvas.
 * ================================================================= */

/* 1. SEG control (matches prev/next, shop tabs, league tier slider) */
body.app-body .seg-control,
body.app-body .league-tier-slider,
body.app-body .shop-tabs,
body.app-body [data-shop-tabs],
body.app-body [data-league-tier-slider],
body.app-body .league-stack-section .league-tier-slider,
body.app-body .tab-shop .seg-control,
body.app-body .tab-leagues .league-tier-slider,
body.app-body .tab-rewards .seg-control,
body.app-body .tab-leagues [class*="tier-slider"] {
  background: rgba(255, 255, 255, 0.06) !important;
  background-image: linear-gradient(180deg, rgba(60,60,66,0.50), rgba(20,20,24,0.40)) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 4px 12px rgba(0,0,0,0.32) !important;
}

/* Inactive button inside slider пїЅ neutral grey text on glass */
body.app-body .seg-control button:not(.is-on),
body.app-body .league-tier-slider button:not(.is-active),
body.app-body .shop-tabs button:not(.is-on),
body.app-body [data-shop-tab]:not(.is-on),
body.app-body [data-league-tier]:not(.is-active) {
  background: transparent !important;
  background-image: none !important;
  color: rgba(255,255,255,0.65) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Active button пїЅ white pill on darker glass */
body.app-body .seg-control button.is-on,
body.app-body .league-tier-slider button.is-active,
body.app-body .shop-tabs button.is-on,
body.app-body [data-shop-tab].is-on,
body.app-body [data-league-tier].is-active {
  background: rgba(255, 255, 255, 0.14) !important;
  background-image: linear-gradient(180deg, rgba(80,80,88,0.78), rgba(30,30,34,0.78)) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 4px 12px rgba(0,0,0,0.45) !important;
}
body.app-body .seg-control button.is-on svg,
body.app-body .shop-tabs button.is-on svg,
body.app-body [data-shop-tab].is-on svg,
body.app-body .league-tier-slider button.is-active svg,
body.app-body [data-league-tier].is-active svg {
  fill: #ffffff !important;
  color: #ffffff !important;
}


/* 2. Buy/Test "пїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅ" modal button пїЅ make sure it's tappable. */
body.app-body .modal .btn-primary,
body.app-body [data-modal-confirm] {
  background: linear-gradient(180deg, #f4f4f0, #d8d8d2) !important;
  background-image: linear-gradient(180deg, #f4f4f0, #d8d8d2) !important;
  color: #050505 !important;
  font-weight: 700 !important;
  border: 0 !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45) !important;
}

/* =================================================================
 * v=79 пїЅ Refs button icons BLACK + 3D design for main-page buttons.
 * ================================================================= */

/* 1. REFS пїЅ copy/share buttons icons turn BLACK (buttons are now
 *    light/glass so white SVG gets lost). */
/* Telegram button — blue wallet pill */
body.app-body .tab-refs .btn-share-tg,
body.app-body .tab-refs [data-ref-share-tg] {
  background: linear-gradient(180deg, #2196ff 0%, #0A84FF 40%, #0066CC 100%) !important;
  background-image: linear-gradient(180deg, #2196ff 0%, #0A84FF 40%, #0066CC 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(90,184,255,0.35) !important;
  font-weight: 700 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    0 4px 14px rgba(10,132,255,0.30) !important;
}
/* All other refs buttons — dark glass wallet pill */
body.app-body .tab-refs .btn-ghost,
body.app-body .tab-refs .btn-ghost.btn-sm,
body.app-body .tab-refs [data-ref-copy],
body.app-body .tab-refs [data-ref-copy-link],
body.app-body .tab-refs .btn-share-native,
body.app-body .tab-refs [data-ref-share-native] {
  background: rgba(255,255,255,0.06) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  font-weight: 700 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
/* SVGs — white on dark buttons */
body.app-body .tab-refs .btn-ghost svg,
body.app-body .tab-refs .btn-share-native svg,
body.app-body .tab-refs [data-ref-copy] svg,
body.app-body .tab-refs [data-ref-copy-link] svg,
body.app-body .tab-refs [data-ref-share-native] svg {
  fill: #ffffff !important;
  color: #ffffff !important;
}
body.app-body .tab-refs .btn-share-tg svg,
body.app-body .tab-refs [data-ref-share-tg] svg,
body.app-body .tab-refs .btn-share-tg .bs-icon,
body.app-body .tab-refs .btn-share-tg .bs-icon svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}
/* Press effect on refs buttons */
body.app-body .tab-refs .btn-ghost:active,
body.app-body .tab-refs .btn-share-tg:active,
body.app-body .tab-refs .btn-share-native:active,
body.app-body .tab-refs [data-ref-copy]:active,
body.app-body .tab-refs [data-ref-copy-link]:active,
body.app-body .tab-refs [data-ref-share-tg]:active,
body.app-body .tab-refs [data-ref-share-native]:active {
  transform: translateY(1px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 2px 6px rgba(0,0,0,0.40) !important;
}


/* 2. VOTE BUTTONS пїЅ true 3D (multi-stop gradient, inset top highlight,
 *    inset bottom shadow, drop-shadow). Press > physical "depress". */
body.app-body .widget-vote-btn,
body.app-body .widget-vote-a,
body.app-body .widget-vote-b {
  position: relative !important;
  overflow: hidden !important;
  transform: translateZ(0) !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  padding: 16px 18px !important;
  border-radius: 980px !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.30);
  transition: transform 140ms ease-out, box-shadow 140ms ease-out !important;
}
body.app-body .widget-vote-a {
  background: linear-gradient(
    180deg,
    #6CC1FF 0%,
    #2090F0 35%,
    #0A6BCF 75%,
    #003E80 100%
  ) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.45),
    inset 0 -3px 0 rgba(0,0,0,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.18),
    0 8px 18px -2px rgba(10, 132, 255, 0.55),
    0 14px 32px rgba(0,0,0,0.55) !important;
}
body.app-body .widget-vote-b {
  background: linear-gradient(
    180deg,
    #FFAFA8 0%,
    #FF6555 35%,
    #D32E1F 75%,
    #7A0F08 100%
  ) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.42),
    inset 0 -3px 0 rgba(0,0,0,0.40),
    inset 0 0 0 1px rgba(255,255,255,0.16),
    0 8px 18px -2px rgba(255, 69, 58, 0.55),
    0 14px 32px rgba(0,0,0,0.55) !important;
}
/* Glassy specular highlight on top half */
body.app-body .widget-vote-btn::before {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0.08) 45%, transparent 60%) !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  z-index: 1 !important;
}
body.app-body .widget-vote-btn > * { position: relative; z-index: 2; }

/* Hover lift */
body.app-body .widget-vote-a:hover {
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.50),
    inset 0 -3px 0 rgba(0,0,0,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.22),
    0 12px 24px -2px rgba(10, 132, 255, 0.65),
    0 18px 38px rgba(0,0,0,0.55) !important;
  transform: translateY(-1px) !important;
}
body.app-body .widget-vote-b:hover {
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.48),
    inset 0 -3px 0 rgba(0,0,0,0.40),
    inset 0 0 0 1px rgba(255,255,255,0.20),
    0 12px 24px -2px rgba(255, 69, 58, 0.65),
    0 18px 38px rgba(0,0,0,0.55) !important;
  transform: translateY(-1px) !important;
}
/* Active/press пїЅ physical depress */
body.app-body .widget-vote-a:active,
body.app-body .widget-vote-b:active {
  transform: translateY(2px) scale(0.985) !important;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.30),
    inset 0 -1px 0 rgba(255,255,255,0.10),
    0 2px 6px rgba(0,0,0,0.40) !important;
  filter: brightness(0.95) !important;
}


/* 3. QUICK ACTION rows on home пїЅ 3D depth + chevron pop */
body.app-body .command-row,
body.app-body .ios-row {
  background: linear-gradient(180deg, rgba(50,50,56,0.55), rgba(20,20,24,0.55)) !important;
  background-image: linear-gradient(180deg, rgba(50,50,56,0.55), rgba(20,20,24,0.55)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.30),
    0 6px 14px -4px rgba(0,0,0,0.45) !important;
  border-radius: 16px !important;
  margin-bottom: 8px !important;
  transition: transform 140ms ease-out, box-shadow 140ms ease-out !important;
}
body.app-body .command-row:hover,
body.app-body .ios-row:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.30),
    0 10px 20px -4px rgba(0,0,0,0.55) !important;
}
body.app-body .command-row:active,
body.app-body .ios-row:active {
  transform: translateY(1px) !important;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.30),
    0 2px 6px rgba(0,0,0,0.40) !important;
}

/* Command icons пїЅ gradient pill chips with depth */
body.app-body .command-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(0,0,0,0.30),
    0 4px 10px rgba(0,0,0,0.40) !important;
}
body.app-body .command-icon svg { fill: #fff !important; width: 22px !important; height: 22px !important; }
body.app-body .command-icon.command-blue {
  background: linear-gradient(180deg, #5AB8FF 0%, #0A84FF 60%, #003E80 100%) !important;
}
body.app-body .command-icon.command-gold {
  background: linear-gradient(180deg, #7DD3FF 0%, #5AB8FF 60%, #0055B3 100%) !important;
}
body.app-body .command-icon.command-green {
  background: linear-gradient(180deg, #5AB8FF 0%, #0A84FF 60%, #0055B3 100%) !important;
}
body.app-body .command-icon.command-red {
  background: linear-gradient(180deg, #FF8580 0%, #FF453A 60%, #7A0F08 100%) !important;
}


/* 4. SHOP "Buy" / "Test" pill buttons пїЅ 3D match */
body.app-body .shop-card .sc-buy,
body.app-body .shop-primary,
body.app-body .shop-secondary,
body.app-body [data-shop-claim],
body.app-body [data-shop-external-hero] {
  background: linear-gradient(180deg, #f9f9f5 0%, #e2e2dc 50%, #c8c8c2 100%) !important;
  background-image: linear-gradient(180deg, #f9f9f5 0%, #e2e2dc 50%, #c8c8c2 100%) !important;
  color: #050505 !important;
  font-weight: 800 !important;
  border: 0 !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.95),
    inset 0 -2px 0 rgba(0,0,0,0.18),
    0 6px 16px rgba(0,0,0,0.45) !important;
  transition: transform 140ms ease-out, box-shadow 140ms ease-out !important;
}
body.app-body .shop-card .sc-buy:active,
body.app-body .shop-primary:active,
body.app-body .shop-secondary:active,
body.app-body [data-shop-claim]:active {
  transform: translateY(2px) !important;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.20),
    0 2px 6px rgba(0,0,0,0.35) !important;
}


/* 5. Vote progress bar пїЅ 3D fill with sheen */
body.app-body .widget-progress {
  background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.30)) !important;
  box-shadow:
    inset 0 1px 0 rgba(0,0,0,0.30),
    inset 0 -1px 0 rgba(255,255,255,0.05) !important;
}
body.app-body .widget-progress-a {
  background: linear-gradient(180deg, #6CC1FF 0%, #2090F0 50%, #0A6BCF 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    0 0 16px rgba(10, 132, 255, 0.55) !important;
}

/* =================================================================
 * v=80 пїЅ Vote button solid fill on hover, hide BRONZE stage text,
 * heavy glass (NOT transparent) on league sliders, main-page polish.
 * ================================================================= */

/* 1. VOTE buttons пїЅ on HOVER replace gradient with SOLID fill. */
body.app-body .widget-vote-a:hover,
body.app-body .widget-vote-a:focus-visible {
  background: var(--apple-blue, #0A84FF) !important;
  background-image: none !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.40),
    inset 0 -3px 0 rgba(0,0,0,0.30),
    inset 0 0 0 1px rgba(255,255,255,0.20),
    0 14px 28px -2px rgba(10, 132, 255, 0.75),
    0 20px 40px rgba(0,0,0,0.55) !important;
  transform: translateY(-1px) !important;
}
body.app-body .widget-vote-b:hover,
body.app-body .widget-vote-b:focus-visible {
  background: var(--apple-red, #FF453A) !important;
  background-image: none !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.40),
    inset 0 -3px 0 rgba(0,0,0,0.30),
    inset 0 0 0 1px rgba(255,255,255,0.20),
    0 14px 28px -2px rgba(255, 69, 58, 0.75),
    0 20px 40px rgba(0,0,0,0.55) !important;
  transform: translateY(-1px) !important;
}
body.app-body .widget-vote-a:hover::before,
body.app-body .widget-vote-b:hover::before {
  display: none !important;
}


/* 2. Hide BRONZE пїЅ 1/4 пїЅ пїЅпїЅпїЅпїЅ 2 stage text on home. */
body.app-body .arena-card .match-meta-row,
body.app-body #active-vote-card .match-meta-row,
body.app-body [data-vs-card] .match-meta-row,
body.app-body [data-vs-stage],
body.app-body [data-home-cap-left] {
  display: none !important;
}


/* 3. League view toggle (пїЅпїЅпїЅпїЅ / пїЅпїЅпїЅпїЅпїЅ) пїЅ heavy glass, NOT transparent. */
body.app-body .league-view-toggle,
body.app-body [data-league-view-toggle],
body.app-body .tab-leagues .league-view-toggle,
body.app-body .tab-leagues [data-league-view-toggle] {
  background: rgba(255, 255, 255, 0.06) !important;
  background-image: linear-gradient(180deg, rgba(60,60,66,0.55), rgba(20,20,24,0.45)) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(24px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(170%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 6px 18px rgba(0,0,0,0.40) !important;
  border-radius: 14px !important;
  padding: 4px !important;
}
body.app-body .league-view-toggle button,
body.app-body [data-league-view-toggle] button {
  background: transparent !important;
  background-image: none !important;
  color: rgba(255,255,255,0.65) !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.app-body .league-view-toggle button.is-active,
body.app-body .league-view-toggle button.is-on,
body.app-body [data-league-view-toggle] button.is-active,
body.app-body [data-league-view-toggle] button.is-on,
body.app-body .league-view-toggle button[aria-selected="true"] {
  background: linear-gradient(180deg, rgba(96,96,104,0.85), rgba(36,36,40,0.85)) !important;
  background-image: linear-gradient(180deg, rgba(96,96,104,0.85), rgba(36,36,40,0.85)) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    0 4px 12px rgba(0,0,0,0.50) !important;
}


/* 4. League tier slider (Bronze/Silver/Gold) пїЅ same heavy glass. */
body.app-body .league-tier-slider,
body.app-body [data-league-tier-slider],
body.app-body .league-stack-section .league-tier-slider {
  background: rgba(255, 255, 255, 0.06) !important;
  background-image: linear-gradient(180deg, rgba(60,60,66,0.55), rgba(20,20,24,0.45)) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(24px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(170%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 8px 22px rgba(0,0,0,0.45) !important;
  border-radius: 16px !important;
  padding: 5px !important;
}
body.app-body .league-tier-slider button {
  background: transparent !important;
  background-image: none !important;
  color: rgba(255,255,255,0.65) !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  padding: 10px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
}
body.app-body .league-tier-slider button small {
  font-size: 11px !important;
  color: rgba(255,255,255,0.50) !important;
  font-weight: 500 !important;
}
body.app-body .league-tier-slider button.is-active,
body.app-body .league-tier-slider button.is-on,
body.app-body [data-league-tier].is-active,
body.app-body [data-league-tier].is-on {
  background: linear-gradient(180deg, rgba(96,96,104,0.88), rgba(36,36,40,0.88)) !important;
  background-image: linear-gradient(180deg, rgba(96,96,104,0.88), rgba(36,36,40,0.88)) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 6px 14px rgba(0,0,0,0.55) !important;
}
body.app-body .league-tier-slider button.is-active small {
  color: rgba(255,255,255,0.85) !important;
}


/* 5. MAIN PAGE polish ------------------------------------------ */

/* Hero copy spacing пїЅ tighter, more elegant */
body.app-body .home-editorial {
  text-align: center !important;
  padding: 0 8px !important;
}
body.app-body .home-editorial .page-kicker,
body.app-body .home-editorial [data-home-round] {
  margin: 0 auto 8px !important;
}
body.app-body .home-editorial .display-title,
body.app-body .home-editorial .home-title {
  font-size: clamp(22px, 5vw, 30px) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.022em !important;
  margin: 0 auto 12px !important;
  max-width: 22ch !important;
}
body.app-body .home-editorial .lead-copy,
body.app-body .home-editorial .home-copy {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: rgba(255,255,255,0.65) !important;
  margin: 0 auto 16px !important;
  max-width: 32ch !important;
}

/* Metric strip пїЅ equal columns, subtle dividers */
body.app-body .metric-strip,
body.app-body .home-ledger {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 4px !important;
  padding: 12px 4px 0 !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  margin-top: 4px !important;
}
body.app-body .metric,
body.app-body .home-ledger-item {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  position: relative !important;
}
body.app-body .metric + .metric::before,
body.app-body .home-ledger-item + .home-ledger-item::before {
  content: "" !important;
  position: absolute !important;
  left: -2px !important;
  top: 25% !important;
  bottom: 25% !important;
  width: 1px !important;
  background: rgba(255,255,255,0.10) !important;
}
body.app-body .metric span,
body.app-body .home-ledger-item span {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.40) !important;
}
body.app-body .metric strong,
body.app-body .home-ledger-item strong {
  font-size: 22px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  color: #ffffff !important;
  letter-spacing: -0.018em !important;
}

/* Section titles on home пїЅ extra breathing room */
body.app-body .arena-section .section-row {
  margin-top: 32px !important;
  margin-bottom: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
}
body.app-body .arena-section .section-eyebrow {
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.45) !important;
  font-weight: 600 !important;
  margin: 0 !important;
}
body.app-body .arena-section .section-h {
  font-size: clamp(20px, 4vw, 26px) !important;
  margin: 0 !important;
  text-align: center !important;
  letter-spacing: -0.018em !important;
}

/* Active match widget пїЅ clean inner padding */
body.app-body #active-vote-card,
body.app-body .arena-card,
body.app-body .widget {
  padding: 24px 20px !important;
}

/* VS label between teams пїЅ bigger */
body.app-body .widget-vs-label {
  font-size: 22px !important;
  letter-spacing: 0.05em !important;
  color: rgba(255,255,255,0.30) !important;
}

/* Team names пїЅ bolder */
body.app-body .widget-team-name {
  font-size: 16px !important;
  font-weight: 700 !important;
  margin-top: 4px !important;
}
body.app-body .widget-team-votes {
  font-size: 12px !important;
  color: rgba(255,255,255,0.55) !important;
}

/* Foot of widget пїЅ nft progress + counter */
body.app-body .widget-foot {
  margin-top: 14px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.45) !important;
}

/* Match insight under progress */
body.app-body .match-insight {
  margin-top: 12px !important;
  display: flex !important;
  justify-content: space-between !important;
  font-size: 12px !important;
  color: rgba(255,255,255,0.50) !important;
}
body.app-body [data-home-leading] {
  color: rgba(255,255,255,0.78) !important;
  font-weight: 500 !important;
}
body.app-body [data-home-vote-hint] {
  color: rgba(10,132,255,0.85) !important;
  font-weight: 600 !important;
}

/* =================================================================
 * v=81 пїЅ Reward result modal: WHITE sheet showing what dropped.
 * Confetti, big emoji art, "пїЅпїЅпїЅпїЅпїЅпїЅпїЅ" CTA. Already-claimed rewards
 * become visibly disabled.
 * ================================================================= */

body.app-body .reward-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.app-body .reward-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

body.app-body .reward-modal-card {
  position: relative;
  width: min(420px, 92vw);
  padding: 36px 28px 24px;
  border-radius: 28px;
  background: linear-gradient(180deg, #ffffff 0%, #f3f3ee 100%) !important;
  color: #050505 !important;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  transform: scale(0.85) translateY(20px);
  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}
body.app-body .reward-modal.is-open .reward-modal-card {
  transform: scale(1) translateY(0);
}

body.app-body .reward-modal-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 0;
  background: rgba(0, 0, 0, 0.06);
  color: #050505;
  font-size: 20px; line-height: 1;
  cursor: pointer;
  transition: background 160ms ease-out, transform 160ms ease-out;
}
body.app-body .reward-modal-close:hover { background: rgba(0,0,0,0.12); transform: rotate(90deg); }

body.app-body .reward-modal-art {
  width: 132px; height: 132px;
  margin: 8px auto 4px;
  border-radius: 30px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #7DD3FF 0%, #5AB8FF 60%, #0055B3 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.85),
    inset 0 -3px 0 rgba(0, 0, 0, 0.18),
    0 16px 32px -6px rgba(232, 149, 0, 0.55),
    0 24px 48px rgba(0, 0, 0, 0.20);
  animation: reward-art-bob 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes reward-art-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-6px) rotate(2deg); }
}
body.app-body .reward-modal-emoji {
  font-size: 72px;
  line-height: 1;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.20));
}

body.app-body .reward-modal-kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8A8A8A;
}
body.app-body .reward-modal-title {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.2;
  color: #050505;
}
body.app-body .reward-modal-sub {
  margin: 0 0 8px;
  font-size: 14px;
  color: #6A6A6A;
  line-height: 1.4;
}

body.app-body .reward-modal-ok {
  margin-top: 8px;
  width: 100%;
  padding: 16px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #1d1d1f 0%, #050505 100%);
  color: #ffffff;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -2px 0 rgba(0,0,0,0.40),
    0 12px 24px rgba(0, 0, 0, 0.45);
  transition: transform 160ms ease-out, box-shadow 160ms ease-out;
}
body.app-body .reward-modal-ok:hover {
  background: linear-gradient(180deg, #2c2c2e 0%, #0a0a0a 100%);
  transform: translateY(-1px);
}
body.app-body .reward-modal-ok:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.40),
    0 2px 6px rgba(0,0,0,0.40);
}


/* Already-claimed reward step пїЅ visibly disabled (greyscale + lock) */
body.app-body .reward-step.is-claimed,
body.app-body [data-reward-claimed="true"],
body.app-body .reward-card.is-claimed {
  opacity: 0.42 !important;
  filter: grayscale(0.6) !important;
  pointer-events: none !important;
  position: relative;
}
body.app-body .reward-step.is-claimed::after,
body.app-body [data-reward-claimed="true"]::after {
  content: "?";
  position: absolute;
  top: 8px; right: 8px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--apple-green, #0A84FF);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 4px 8px rgba(48, 209, 88, 0.45);
}

/* =================================================================
 * v=82 пїЅ XP rebalance (vote=100, ref=50). Hard-hide BRONZE meta.
 * ================================================================= */

/* Hard-kill stage meta-row everywhere on home tab. */
body.app-body .tab-home .match-meta-row,
body.app-body .tab-home [data-vs-stage],
body.app-body .tab-home [data-home-cap-left],
body.app-body .tab-home .match-stage,
body.app-body .tab-home .vs-stage,
body.app-body .tab-home .arena-meta,
body.app-body .tab-home [class*="match-meta"],
body.app-body .tab-home [class*="vs-stage"],
body.app-body .tab-home [class*="match-stage"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =================================================================
 * v=83 пїЅ Claimed reward must be VISIBLY locked. Hard-hide
 * `[data-home-round]` everywhere it might return.
 * ================================================================= */

/* 1. ANY data-home-round / page-kicker on home tab is gone forever. */
body.app-body .tab-home [data-home-round],
body.app-body .tab-home .page-kicker,
body.app-body .tab-home .home-editorial .page-kicker,
body.app-body .tab-home .home-editorial > .page-kicker,
body.app-body .tab-home .arena-section .section-eyebrow,
body.app-body .home-editorial > p:first-child:not(.lead-copy):not(.home-copy) {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* 2. Reward claimed visual пїЅ clear lock on the SPECIFIC button only,
 *    not the whole row (other tier may still be claimable). */
body.app-body .reward-step.is-claimed {
  /* keep article visible пїЅ just sub-buttons handle their own state */
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
}
body.app-body .reward-step.is-claimed::after {
  display: none !important;   /* don't add tick on whole row */
}
body.app-body .reward-node.is-claimed,
body.app-body button.reward-node.is-claimed {
  opacity: 1 !important;
  filter: none !important;
  pointer-events: none !important;
  cursor: default !important;
  background: linear-gradient(180deg, rgba(48, 209, 88, 0.18) 0%, rgba(48, 209, 88, 0.06) 100%) !important;
  background-image: linear-gradient(180deg, rgba(48, 209, 88, 0.18) 0%, rgba(48, 209, 88, 0.06) 100%) !important;
  border: 1px solid rgba(48, 209, 88, 0.45) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 4px 10px rgba(48, 209, 88, 0.18) !important;
  position: relative;
}
body.app-body .reward-node.is-claimed::before {
  content: "?";
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--apple-green, #0A84FF);
  color: #050505;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 4px 8px rgba(48, 209, 88, 0.45);
  z-index: 5;
}
body.app-body .reward-node.is-claimed .reward-art {
  filter: grayscale(0.5) brightness(0.85) !important;
  opacity: 0.55 !important;
}
body.app-body .reward-node.is-claimed strong {
  color: var(--apple-green, #0A84FF) !important;
  font-weight: 800 !important;
}
body.app-body .reward-node.is-claimed span:first-of-type {
  color: rgba(48, 209, 88, 0.70) !important;
}

/* Available пїЅ green ring to invite a tap (no inversion) */
body.app-body .reward-node.is-available {
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 6px 16px rgba(0,0,0,0.30) !important;
  cursor: pointer !important;
}
body.app-body .reward-node.is-available::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.45);
  animation: reward-pulse 1.8s ease-in-out infinite;
}
@keyframes reward-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(48, 209, 88, 0); }
  50%      { box-shadow: 0 0 0 6px rgba(48, 209, 88, 0.12); }
}

/* Unavailable / locked пїЅ dim grey */
body.app-body .reward-node.is-unavailable,
body.app-body .reward-node.is-locked {
  opacity: 0.35 !important;
  filter: grayscale(0.7) !important;
  pointer-events: none !important;
  cursor: default !important;
}

/* =================================================================
 * v=84 пїЅ Reward modal in BLACK style. Decorative pixel/gem details
 * around primary CTAs (inspired by MineOre site). More polish on
 * cards and buttons.
 * ================================================================= */

/* 1. REWARD MODAL пїЅ flip from white to black-onyx style. */
body.app-body .reward-modal {
  background: rgba(0, 0, 0, 0.78) !important;
  backdrop-filter: blur(28px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
}
body.app-body .reward-modal-card {
  background: linear-gradient(180deg, #1a1a1c 0%, #0a0a0c 100%) !important;
  background-image: linear-gradient(180deg, #1a1a1c 0%, #0a0a0c 100%) !important;
  color: #f4f4f0 !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow:
    0 36px 72px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -2px 0 rgba(0,0,0,0.55) !important;
  /* decorative pixel-cubes floating around the card edges */
  position: relative;
  isolation: isolate;
}
body.app-body .reward-modal-card::before,
body.app-body .reward-modal-card::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  background: linear-gradient(135deg, #5AB8FF 0%, #0055B3 100%);
  box-shadow: 0 4px 12px rgba(255, 214, 10, 0.55);
  z-index: -1;
}
body.app-body .reward-modal-card::before {
  top: -6px; left: 24px;
  transform: rotate(15deg);
  border-radius: 3px;
}
body.app-body .reward-modal-card::after {
  bottom: 60px; right: -6px;
  width: 18px; height: 18px;
  transform: rotate(-12deg);
  border-radius: 4px;
  background: linear-gradient(135deg, #5AB8FF 0%, #0066CC 100%);
  box-shadow: 0 4px 12px rgba(10, 132, 255, 0.55);
}

body.app-body .reward-modal-close {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f4f4f0 !important;
}
body.app-body .reward-modal-close:hover {
  background: rgba(255, 255, 255, 0.18) !important;
}

body.app-body .reward-modal-art {
  background: linear-gradient(180deg, #7DD3FF 0%, #5AB8FF 60%, #0055B3 100%) !important;
  background-image: linear-gradient(180deg, #7DD3FF 0%, #5AB8FF 60%, #0055B3 100%) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.85),
    inset 0 -3px 0 rgba(0, 0, 0, 0.30),
    0 16px 36px -6px rgba(255, 203, 82, 0.55),
    0 28px 60px rgba(0, 0, 0, 0.60) !important;
}

body.app-body .reward-modal-kicker {
  color: rgba(255, 214, 10, 0.85) !important;
  letter-spacing: 0.18em !important;
}
body.app-body .reward-modal-title {
  color: #ffffff !important;
  font-size: 26px !important;
}
body.app-body .reward-modal-sub {
  color: rgba(255, 255, 255, 0.55) !important;
}

body.app-body .reward-modal-ok {
  background: linear-gradient(180deg, #7DD3FF 0%, #5AB8FF 50%, #0055B3 100%) !important;
  background-image: linear-gradient(180deg, #7DD3FF 0%, #5AB8FF 50%, #0055B3 100%) !important;
  color: #050505 !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.85),
    inset 0 -3px 0 rgba(0, 0, 0, 0.25),
    0 12px 28px rgba(255, 214, 10, 0.45),
    0 6px 14px rgba(0, 0, 0, 0.55) !important;
  position: relative;
  overflow: hidden;
}
body.app-body .reward-modal-ok::before {
  content: "";
  position: absolute;
  top: 0; left: -50%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  animation: shine-sweep 2.4s ease-in-out infinite;
}
@keyframes shine-sweep {
  0%   { transform: translateX(0); }
  60%  { transform: translateX(400%); }
  100% { transform: translateX(400%); }
}
body.app-body .reward-modal-ok:hover {
  background: linear-gradient(180deg, #FFEC80 0%, #7DD3FF 50%, #C7951A 100%) !important;
  transform: translateY(-1px);
}
body.app-body .reward-modal-ok:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.30),
    0 2px 6px rgba(0, 0, 0, 0.40) !important;
}


/* 2. DECORATIVE pixel-cubes around active vote card (MineOre-style). */
body.app-body .arena-card,
body.app-body #active-vote-card {
  position: relative !important;
  isolation: isolate;
}
body.app-body .arena-card::before {
  content: "";
  position: absolute;
  top: -10px; left: 18px;
  width: 18px; height: 18px;
  background: linear-gradient(135deg, #5AB8FF 0%, #0066CC 100%);
  border-radius: 4px;
  transform: rotate(15deg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    0 6px 14px rgba(10, 132, 255, 0.55);
  z-index: -1;
}
body.app-body .arena-card::after {
  content: "";
  position: absolute;
  bottom: 24px; right: -8px;
  width: 14px; height: 14px;
  background: linear-gradient(135deg, #FF8580 0%, #D70015 100%);
  border-radius: 3px;
  transform: rotate(-12deg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    0 6px 14px rgba(255, 69, 58, 0.55);
  z-index: -1;
}


/* 3. Vote buttons пїЅ add decorative chip on press CTA (subtle "spark"). */
body.app-body .widget-vote-a,
body.app-body .widget-vote-b {
  overflow: visible !important;
}
body.app-body .widget-cta {
  position: relative !important;
}
body.app-body .widget-cta::before,
body.app-body .widget-cta::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 2px;
  z-index: -1;
}
body.app-body .widget-cta::before {
  top: -8px; left: 12px;
  background: linear-gradient(135deg, #7DD3FF, #0055B3);
  transform: rotate(20deg);
  box-shadow: 0 4px 10px rgba(255, 214, 10, 0.45);
}
body.app-body .widget-cta::after {
  bottom: -6px; right: 28px;
  width: 8px; height: 8px;
  background: linear-gradient(135deg, #FF8580, #D70015);
  transform: rotate(-15deg);
  box-shadow: 0 3px 8px rgba(255, 69, 58, 0.50);
}


/* 4. Quick action rows пїЅ add a tiny diamond accent on hover/active. */
body.app-body .command-row {
  position: relative !important;
  isolation: isolate;
}
body.app-body .command-row::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -6px;
  width: 10px; height: 10px;
  background: linear-gradient(135deg, #7DD3FF, #0055B3);
  border-radius: 2px;
  transform: translateY(-50%) rotate(45deg);
  opacity: 0;
  transition: opacity 200ms ease-out, right 200ms ease-out;
  box-shadow: 0 2px 8px rgba(255, 214, 10, 0.45);
  z-index: -1;
}
body.app-body .command-row:hover::before {
  opacity: 1;
  right: -10px;
}


/* 5. Hero Pepe пїЅ add subtle floating pixel cubes around it (only on
 *    desktop/wide screens to keep mobile tight). */
@media (min-width: 720px) {
  body.app-body .home-portrait {
    position: relative !important;
    isolation: isolate;
  }
  body.app-body .home-portrait::before,
  body.app-body .home-portrait::after {
    content: "";
    position: absolute;
    width: 22px; height: 22px;
    border-radius: 5px;
    z-index: -1;
    animation: cube-float 5s ease-in-out infinite;
  }
  body.app-body .home-portrait::before {
    top: 8%; left: -2%;
    background: linear-gradient(135deg, #5AB8FF, #0066CC);
    transform: rotate(20deg);
    box-shadow: 0 8px 20px rgba(10, 132, 255, 0.55);
  }
  body.app-body .home-portrait::after {
    bottom: 16%; right: -4%;
    width: 28px; height: 28px;
    background: linear-gradient(135deg, #7DD3FF, #0055B3);
    transform: rotate(-15deg);
    box-shadow: 0 8px 20px rgba(255, 214, 10, 0.55);
    animation-delay: -2s;
  }
}
@keyframes cube-float {
  0%, 100% { transform: rotate(20deg) translateY(0); }
  50%      { transform: rotate(35deg) translateY(-8px); }
}


/* 6. Match progress bar пїЅ add cube decoration at the head of the fill. */
body.app-body .widget-progress {
  position: relative !important;
  overflow: visible !important;
}
body.app-body .widget-progress-a {
  position: relative !important;
}
body.app-body .widget-progress-a::after {
  content: "";
  position: absolute;
  top: 50%; right: -6px;
  width: 12px; height: 12px;
  border-radius: 3px;
  background: linear-gradient(135deg, #7DD3FF, #5AB8FF);
  transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 0 16px rgba(255, 214, 10, 0.65);
  z-index: 2;
}


/* 7. Section "пїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅ пїЅпїЅпїЅпїЅ." пїЅ wrap title with a small decorative
 *    accent line. */
body.app-body .arena-section .section-h {
  position: relative !important;
  display: inline-block !important;
}
body.app-body .arena-section .section-h::before,
body.app-body .arena-section .section-h::after {
  content: "";
  display: inline-block;
  width: 18px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 214, 10, 0.85));
  vertical-align: middle;
  margin: 0 12px;
  border-radius: 2px;
}
body.app-body .arena-section .section-h::after {
  background: linear-gradient(90deg, rgba(255, 214, 10, 0.85), transparent);
}
body.app-body .arena-section .section-row {
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
}


/* 8. Bottom nav пїЅ pill chip on active button extra polished. */
body.app-body .app-bnav {
  background: linear-gradient(180deg, rgba(36,36,40,0.92), rgba(8,8,10,0.92)) !important;
  background-image: linear-gradient(180deg, rgba(36,36,40,0.92), rgba(8,8,10,0.92)) !important;
  box-shadow:
    0 24px 60px -16px rgba(0,0,0,0.85),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.50) !important;
}
body.app-body .bn-btn.is-active {
  background: linear-gradient(180deg, rgba(96,96,104,0.85), rgba(36,36,40,0.85)) !important;
  background-image: linear-gradient(180deg, rgba(96,96,104,0.85), rgba(36,36,40,0.85)) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 -1px 0 rgba(0,0,0,0.30),
    0 4px 12px rgba(0,0,0,0.55) !important;
}

/* =================================================================
 * v=86 пїЅ Kill v=84 decorative cubes, white toast text, 3D realistic
 * buttons, reward modal in app dark+blue colors, gap on Quick Actions,
 * hide stray "Referral engine" if it returns.
 * ================================================================= */

/* 1. KILL all decorative pixel-cubes added in v=84. */
body.app-body .arena-card::before,
body.app-body .arena-card::after,
body.app-body #active-vote-card::before,
body.app-body #active-vote-card::after,
body.app-body .widget::before,
body.app-body .widget::after,
body.app-body .widget-cta::before,
body.app-body .widget-cta::after,
body.app-body .home-portrait::before,
body.app-body .home-portrait::after,
body.app-body .widget-progress-a::after,
body.app-body .reward-modal-card::before,
body.app-body .reward-modal-card::after,
body.app-body .arena-section .section-h::before,
body.app-body .arena-section .section-h::after,
body.app-body .command-row::before {
  display: none !important;
  content: none !important;
}


/* 2. TOAST пїЅ text MUST be white (currently red on error). */
body.app-body .toast {
  color: #ffffff !important;
}
body.app-body .toast.is-err {
  color: #ffffff !important;
  background: rgba(255, 69, 58, 0.40) !important;
  border: 1px solid rgba(255, 69, 58, 0.65) !important;
}
body.app-body .toast.is-err * {
  color: #ffffff !important;
}


/* 3. QUICK ACTIONS пїЅ bigger gap from preceding section. */
body.app-body .command-board,
body.app-body .arena-section + .command-board,
body.app-body .home-flow + .command-board {
  margin-top: 56px !important;
  padding-top: 8px !important;
}
body.app-body .command-board #quick-title {
  margin-bottom: 24px !important;
}


/* 4. Hide stray "Referral engine" if any layout pass restores it. */
body.app-body .tab-refs .page-kicker,
body.app-body .tab-refs .refs-hero .page-kicker,
body.app-body .tab-refs [data-refs-kicker] {
  display: none !important;
}


/* 5. REWARD MODAL пїЅ app dark+blue (not gold/white). */
body.app-body .reward-modal {
  background: rgba(0, 0, 0, 0.78) !important;
}
body.app-body .reward-modal-card {
  background: linear-gradient(180deg, #16161a 0%, #050507 100%) !important;
  background-image: linear-gradient(180deg, #16161a 0%, #050507 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(10, 132, 255, 0.32) !important;
  box-shadow:
    0 36px 72px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 0 1px rgba(10, 132, 255, 0.15) !important;
}
body.app-body .reward-modal-art {
  background: linear-gradient(180deg, #5AB8FF 0%, #0A84FF 50%, #003E80 100%) !important;
  background-image: linear-gradient(180deg, #5AB8FF 0%, #0A84FF 50%, #003E80 100%) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    inset 0 -3px 0 rgba(0, 0, 0, 0.30),
    0 16px 36px -6px rgba(10, 132, 255, 0.55),
    0 28px 60px rgba(0, 0, 0, 0.60) !important;
}
body.app-body .reward-modal-emoji {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.40)) !important;
}
body.app-body .reward-modal-kicker {
  color: rgba(90, 184, 255, 0.95) !important;
  letter-spacing: 0.18em !important;
}
body.app-body .reward-modal-title { color: #ffffff !important; }
body.app-body .reward-modal-sub  { color: rgba(255, 255, 255, 0.55) !important; }
body.app-body .reward-modal-close {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
}
body.app-body .reward-modal-close:hover {
  background: rgba(10, 132, 255, 0.20) !important;
  border-color: rgba(10, 132, 255, 0.55) !important;
}
body.app-body .reward-modal-ok {
  background: linear-gradient(180deg, #5AB8FF 0%, #0A84FF 50%, #003E80 100%) !important;
  background-image: linear-gradient(180deg, #5AB8FF 0%, #0A84FF 50%, #003E80 100%) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.40) !important;
  border: 1px solid rgba(90, 184, 255, 0.45) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.45),
    inset 0 -3px 0 rgba(0, 0, 0, 0.30),
    0 12px 28px rgba(10, 132, 255, 0.55),
    0 6px 14px rgba(0, 0, 0, 0.55) !important;
}
body.app-body .reward-modal-ok::before { display: none !important; }
body.app-body .reward-modal-ok:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
}
body.app-body .reward-modal-ok:active {
  transform: translateY(2px) !important;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.40),
    0 2px 6px rgba(0, 0, 0, 0.40) !important;
}


/* 6. 3D realistic buttons пїЅ universal upgrade for all primary CTAs. */
body.app-body .widget-vote-a,
body.app-body .widget-vote-b,
body.app-body .shop-card .sc-buy,
body.app-body .shop-primary,
body.app-body .btn.btn-primary,
body.app-body [data-modal-confirm],
body.app-body .reward-modal-ok,
body.app-body .wallet-btn:not(.is-connected) {
  /* Realistic 3D plate пїЅ top highlight, gradient core, dark base ridge */
  position: relative !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.30) !important;
  border-style: solid !important;
  border-width: 1px !important;
  font-weight: 800 !important;
  transition: transform 120ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 120ms cubic-bezier(0.4, 0, 0.2, 1),
              filter 120ms ease-out !important;
}
/* Pressed state пїЅ physical depression */
body.app-body .widget-vote-a:active,
body.app-body .widget-vote-b:active,
body.app-body .shop-card .sc-buy:active,
body.app-body .shop-primary:active,
body.app-body .btn.btn-primary:active,
body.app-body [data-modal-confirm]:active,
body.app-body .reward-modal-ok:active,
body.app-body .wallet-btn:not(.is-connected):active {
  transform: translateY(2.5px) scale(0.985) !important;
  filter: brightness(0.94) !important;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.45),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

/* 3D vote buttons enhanced пїЅ deeper bevel */
body.app-body .widget-vote-a {
  border-color: rgba(90, 184, 255, 0.55) !important;
  box-shadow:
    inset 0 2.5px 0 rgba(255, 255, 255, 0.50),
    inset 0 -4px 0 rgba(0, 25, 60, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 4px 0 #003E80,
    0 6px 8px rgba(0, 30, 60, 0.55),
    0 14px 28px -2px rgba(10, 132, 255, 0.55),
    0 22px 44px rgba(0, 0, 0, 0.55) !important;
}
body.app-body .widget-vote-b {
  border-color: rgba(255, 105, 97, 0.55) !important;
  box-shadow:
    inset 0 2.5px 0 rgba(255, 255, 255, 0.50),
    inset 0 -4px 0 rgba(80, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 4px 0 #7A0F08,
    0 6px 8px rgba(80, 0, 0, 0.55),
    0 14px 28px -2px rgba(255, 69, 58, 0.55),
    0 22px 44px rgba(0, 0, 0, 0.55) !important;
}
body.app-body .widget-vote-a:active {
  box-shadow:
    inset 0 2px 5px rgba(0, 25, 60, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    0 1px 2px rgba(0, 0, 0, 0.35) !important;
}
body.app-body .widget-vote-b:active {
  box-shadow:
    inset 0 2px 5px rgba(80, 0, 0, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

/* Quick action / iOS rows пїЅ tighter 3D depression on tap */
body.app-body .command-row,
body.app-body .ios-row {
  transition: transform 120ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 120ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body.app-body .command-row:active,
body.app-body .ios-row:active {
  transform: translateY(1.5px) !important;
}


/* 7. Refresh subtitle / lead-copy on home пїЅ tighter 18px max width. */
body.app-body .home-editorial .lead-copy,
body.app-body .home-editorial .home-copy {
  margin-top: 8px !important;
}

/* =================================================================
 * v=87 пїЅ Unified 3D button "mt-btn-3d" applied to all major CTAs.
 * Realistic physical depth via layered shadows + colored ridge.
 * Press > sinks 3px, ridge collapses, brightness dims.
 * ================================================================= */

/* CORE 3D BUTTON RECIPE пїЅ applied via wide selector list at bottom */
body.app-body .mt-btn-3d,
body.app-body .widget-vote-a,
body.app-body .widget-vote-b,
body.app-body .reward-modal-ok,
body.app-body .shop-card .sc-buy,
body.app-body .shop-primary,
body.app-body .btn.btn-primary,
body.app-body [data-modal-confirm],
body.app-body .btn-share-tg,
body.app-body [data-pass-buy],
body.app-body .wallet-btn:not(.is-connected),
body.app-body .stats-wallet-btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px 24px !important;
  border-radius: 999px !important;
  border: 1px solid var(--btn-3d-border, rgba(90, 184, 255, 0.55)) !important;
  background:
    linear-gradient(180deg,
      var(--btn-3d-top,    #5AB8FF) 0%,
      var(--btn-3d-mid,    #0A84FF) 45%,
      var(--btn-3d-bottom, #0066CC) 100%) !important;
  background-image:
    linear-gradient(180deg,
      var(--btn-3d-top,    #5AB8FF) 0%,
      var(--btn-3d-mid,    #0A84FF) 45%,
      var(--btn-3d-bottom, #0066CC) 100%) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.40) !important;
  cursor: pointer !important;
  user-select: none !important;
  overflow: hidden !important;
  /* The 5-layer shadow stack that makes it look like a physical button */
  box-shadow:
    /* top inner glossy highlight */
    inset 0 2px 0 rgba(255, 255, 255, 0.45),
    /* bottom inner shadow (depth) */
    inset 0 -3px 0 var(--btn-3d-shadow-inner, rgba(0, 30, 60, 0.55)),
    /* thin ring */
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    /* solid colored ridge пїЅ the "side" of the button */
    0 4px 0 var(--btn-3d-ridge, #003E80),
    /* shadow under ridge */
    0 6px 8px var(--btn-3d-shadow-mid, rgba(0, 30, 60, 0.45)),
    /* outer color glow */
    0 12px 24px -2px var(--btn-3d-glow, rgba(10, 132, 255, 0.50)),
    /* deep canvas shadow */
    0 22px 38px rgba(0, 0, 0, 0.55) !important;
  transition:
    transform 110ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 110ms cubic-bezier(0.4, 0, 0.2, 1),
    filter 110ms ease-out !important;
}

/* Specular sheen пїЅ diagonal sweep on top half */
body.app-body .mt-btn-3d::before,
body.app-body .widget-vote-a::before,
body.app-body .widget-vote-b::before,
body.app-body .reward-modal-ok::before,
body.app-body .shop-card .sc-buy::before,
body.app-body .shop-primary::before,
body.app-body .btn.btn-primary::before,
body.app-body [data-modal-confirm]::before,
body.app-body .btn-share-tg::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px 1px 50% 1px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.05) 70%, transparent) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
body.app-body .mt-btn-3d > *,
body.app-body .widget-vote-a > *,
body.app-body .widget-vote-b > *,
body.app-body .reward-modal-ok > *,
body.app-body .shop-card .sc-buy > *,
body.app-body .shop-primary > *,
body.app-body .btn.btn-primary > *,
body.app-body [data-modal-confirm] > *,
body.app-body .btn-share-tg > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Hover пїЅ slight lift + brighter glow */
body.app-body .mt-btn-3d:hover,
body.app-body .widget-vote-a:hover,
body.app-body .widget-vote-b:hover,
body.app-body .reward-modal-ok:hover,
body.app-body .shop-card .sc-buy:hover,
body.app-body .shop-primary:hover,
body.app-body .btn.btn-primary:hover,
body.app-body [data-modal-confirm]:hover,
body.app-body .btn-share-tg:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
}

/* PRESSED пїЅ physical depression. Ridge collapses to 1px, button sinks. */
body.app-body .mt-btn-3d:active,
body.app-body .widget-vote-a:active,
body.app-body .widget-vote-b:active,
body.app-body .reward-modal-ok:active,
body.app-body .shop-card .sc-buy:active,
body.app-body .shop-primary:active,
body.app-body .btn.btn-primary:active,
body.app-body [data-modal-confirm]:active,
body.app-body .btn-share-tg:active {
  transform: translateY(3px) scale(0.985) !important;
  filter: brightness(0.92) !important;
  box-shadow:
    inset 0 3px 6px rgba(0, 0, 0, 0.45),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 1px 0 var(--btn-3d-ridge, #003E80),
    0 2px 4px rgba(0, 0, 0, 0.40),
    0 4px 8px var(--btn-3d-shadow-mid, rgba(0, 30, 60, 0.30)) !important;
}


/* COLOR VARIANTS пїЅ set CSS vars to swap palette per button */
body.app-body .widget-vote-a {
  --btn-3d-top:          #5AB8FF;
  --btn-3d-mid:          #0A84FF;
  --btn-3d-bottom:       #0066CC;
  --btn-3d-border:       rgba(90, 184, 255, 0.55);
  --btn-3d-ridge:        #003E80;
  --btn-3d-shadow-inner: rgba(0, 25, 60, 0.55);
  --btn-3d-shadow-mid:   rgba(0, 30, 60, 0.55);
  --btn-3d-glow:         rgba(10, 132, 255, 0.55);
}
body.app-body .widget-vote-b {
  --btn-3d-top:          #FF8580;
  --btn-3d-mid:          #FF453A;
  --btn-3d-bottom:       #C0241B;
  --btn-3d-border:       rgba(255, 105, 97, 0.55);
  --btn-3d-ridge:        #7A0F08;
  --btn-3d-shadow-inner: rgba(80, 0, 0, 0.55);
  --btn-3d-shadow-mid:   rgba(80, 0, 0, 0.55);
  --btn-3d-glow:         rgba(255, 69, 58, 0.55);
}
body.app-body .reward-modal-ok,
body.app-body .btn-share-tg {
  --btn-3d-top:    #5AB8FF;
  --btn-3d-mid:    #0A84FF;
  --btn-3d-bottom: #003E80;
  --btn-3d-ridge:  #002654;
  --btn-3d-glow:   rgba(10, 132, 255, 0.65);
  --btn-3d-border: rgba(90, 184, 255, 0.45);
}
body.app-body .shop-card .sc-buy,
body.app-body .shop-primary,
body.app-body .btn.btn-primary,
body.app-body [data-modal-confirm] {
  --btn-3d-top:    #5AB8FF;
  --btn-3d-mid:    #0A84FF;
  --btn-3d-bottom: #003E80;
  --btn-3d-ridge:  #002654;
  --btn-3d-glow:   rgba(10, 132, 255, 0.55);
  --btn-3d-border: rgba(90, 184, 255, 0.45);
}
body.app-body .wallet-btn:not(.is-connected),
body.app-body .stats-wallet-btn {
  --btn-3d-top:    #5AB8FF;
  --btn-3d-mid:    #0A84FF;
  --btn-3d-bottom: #0066CC;
  --btn-3d-ridge:  #003E80;
  --btn-3d-glow:   rgba(10, 132, 255, 0.45);
  --btn-3d-border: rgba(90, 184, 255, 0.45);
  padding: 8px 16px !important;
  font-size: 12px !important;
}
body.app-body [data-pass-buy] {
  --btn-3d-top:    #7DD3FF;
  --btn-3d-mid:    #5AB8FF;
  --btn-3d-bottom: #0055B3;
  --btn-3d-ridge:  #6F5500;
  --btn-3d-glow:   rgba(255, 214, 10, 0.55);
  --btn-3d-border: rgba(255, 230, 102, 0.65);
  color: #050505 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}


/* Ghost / share-native button stays subtle (NOT 3D-elevated) */
body.app-body .btn.btn-ghost,
body.app-body .btn.btn-ghost.btn-sm,
body.app-body .btn-share-native {
  background: linear-gradient(180deg, rgba(72, 72, 76, 0.65), rgba(28, 28, 32, 0.65)) !important;
  background-image: linear-gradient(180deg, rgba(72, 72, 76, 0.65), rgba(28, 28, 32, 0.65)) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 4px 10px rgba(0, 0, 0, 0.40) !important;
}
body.app-body .btn.btn-ghost svg,
body.app-body .btn-share-native svg {
  fill: #ffffff !important;
}
body.app-body .btn.btn-ghost:active,
body.app-body .btn-share-native:active {
  transform: translateY(2px) !important;
  filter: brightness(0.92) !important;
}


/* Refs copy buttons remain LIGHT-pearl (per earlier user request) but
 * adopt the same 3D depression mechanic */
body.app-body .tab-refs .btn-ghost.btn-sm {
  background: linear-gradient(180deg, #f9f9f5 0%, #e2e2dc 50%, #c8c8c2 100%) !important;
  background-image: linear-gradient(180deg, #f9f9f5 0%, #e2e2dc 50%, #c8c8c2 100%) !important;
  color: #050505 !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.85),
    inset 0 -2px 0 rgba(0, 0, 0, 0.18),
    0 3px 0 rgba(0, 0, 0, 0.18),
    0 5px 10px rgba(0, 0, 0, 0.40) !important;
}
body.app-body .tab-refs .btn-ghost.btn-sm svg {
  fill: #050505 !important;
}
body.app-body .tab-refs .btn-ghost.btn-sm:active {
  transform: translateY(2px) !important;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.20),
    inset 0 -1px 0 rgba(255, 255, 255, 0.40),
    0 1px 2px rgba(0, 0, 0, 0.30) !important;
  filter: brightness(0.95) !important;
}

/* =================================================================
 * v=88 пїЅ Page slide transitions between tabs (PEREHOD.txt style),
 * "shadow-offset" yellow button (BUTTON EFFECT TOP), "fill-from-left"
 * outline button (пїЅпїЅпїЅпїЅпїЅпїЅ пїЅпїЅпїЅ 2). Applied to selected CTAs.
 * ================================================================= */

/* 1. PAGE SLIDE TRANSITION between tabs.
 *    Each tab section sits in absolute layer that slides in from
 *    right while the previous slides out left. Children with
 *    .enter-N animate with staggered delay. */
body.app-body .app-main {
  position: relative !important;
  overflow-x: hidden !important;
}
body.app-body .tab {
  animation: page-enter 520ms cubic-bezier(0.4, 0.1, 0.7, 0.95) both !important;
}
@keyframes page-enter {
  0%   { opacity: 0; transform: translateX(8%); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(0); }
}

/* Stagger child reveals пїЅ direct children of a freshly-shown tab fade
 * in with sequential delay. */
body.app-body .tab.tab-home > *,
body.app-body .tab.tab-shop > *,
body.app-body .tab.tab-leagues > *,
body.app-body .tab.tab-rewards > *,
body.app-body .tab.tab-refs > *,
body.app-body .tab.tab-profile > * {
  animation: child-enter 480ms cubic-bezier(0.1, 0.7, 0.6, 0.9) both !important;
}
body.app-body .tab > *:nth-child(1) { animation-delay: 100ms !important; }
body.app-body .tab > *:nth-child(2) { animation-delay: 180ms !important; }
body.app-body .tab > *:nth-child(3) { animation-delay: 260ms !important; }
body.app-body .tab > *:nth-child(4) { animation-delay: 340ms !important; }
body.app-body .tab > *:nth-child(5) { animation-delay: 420ms !important; }
body.app-body .tab > *:nth-child(6) { animation-delay: 500ms !important; }
body.app-body .tab > *:nth-child(7) { animation-delay: 580ms !important; }
body.app-body .tab > *:nth-child(8) { animation-delay: 660ms !important; }
@keyframes child-enter {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Reduce-motion respect */
@media (prefers-reduced-motion: reduce) {
  body.app-body .tab,
  body.app-body .tab > * {
    animation: none !important;
  }
}


/* 2. SHADOW-OFFSET BUTTON (BUTTON EFFECT TOP пїЅ yellow plate with
 *    box-shadow offset 5px?5px that flips on hover + scales down
 *    + reveals red>pink gradient overlay). Applied to share/getgems
 *    secondary calls-to-action. */
body.app-body .mt-btn-top,
body.app-body .shop-secondary,
body.app-body [data-shop-claim],
body.app-body [data-shop-external-hero] {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px 24px !important;
  min-width: 170px !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, sans-serif) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  color: #050505 !important;
  background: #5AB8FF !important;
  background-color: #5AB8FF !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  overflow: hidden !important;
  z-index: 1 !important;
  /* signature offset shadow пїЅ bottom-right by default */
  box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.85) !important;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
              color 180ms ease-out !important;
}
body.app-body .mt-btn-top::after,
body.app-body .shop-secondary::after,
body.app-body [data-shop-claim]::after,
body.app-body [data-shop-external-hero]::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to right, #FF6961, #FF453A) !important;
  opacity: 0 !important;
  transition: opacity 220ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: -1 !important;
  display: block !important;
}
body.app-body .mt-btn-top:hover,
body.app-body .shop-secondary:hover,
body.app-body [data-shop-claim]:hover,
body.app-body [data-shop-external-hero]:hover {
  transform: scale(0.94) !important;
  box-shadow: -5px -5px 0 0 rgba(0, 0, 0, 0.85) !important;
  color: #ffffff !important;
}
body.app-body .mt-btn-top:hover::after,
body.app-body .shop-secondary:hover::after,
body.app-body [data-shop-claim]:hover::after,
body.app-body [data-shop-external-hero]:hover::after {
  opacity: 1 !important;
}
body.app-body .mt-btn-top:active,
body.app-body .shop-secondary:active,
body.app-body [data-shop-claim]:active,
body.app-body [data-shop-external-hero]:active {
  transform: scale(0.92) translate(-1px, -1px) !important;
  box-shadow: -2px -2px 0 0 rgba(0, 0, 0, 0.85) !important;
}
body.app-body .mt-btn-top svg,
body.app-body .shop-secondary svg,
body.app-body [data-shop-claim] svg,
body.app-body [data-shop-external-hero] svg {
  fill: currentColor !important;
}


/* 3. OUTLINE FILL-FROM-LEFT BUTTON (пїЅпїЅпїЅпїЅпїЅпїЅ пїЅпїЅпїЅ 2). Outline by
 *    default, red fill slides in from left on hover, text>white.
 *    Applied to ghost/share-native + lr-token / refs share secondary. */
body.app-body .mt-btn-fill,
body.app-body .league-tier-slider button:not(.is-active),
body.app-body .lr-token,
body.app-body .seg-control button:not(.is-on),
body.app-body [data-vs-prev],
body.app-body [data-vs-next] {
  position: relative !important;
  overflow: hidden !important;
  text-decoration: none !important;
  border: 2px solid rgba(255, 255, 255, 0.40) !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.85) !important;
  letter-spacing: 0.06em !important;
  transition: color 320ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 320ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
body.app-body .mt-btn-fill > *,
body.app-body .league-tier-slider button:not(.is-active) > *,
body.app-body .lr-token > *,
body.app-body .seg-control button:not(.is-on) > *,
body.app-body [data-vs-prev] > *,
body.app-body [data-vs-next] > * {
  position: relative !important;
  z-index: 2 !important;
}
body.app-body .mt-btn-fill::after,
body.app-body .league-tier-slider button:not(.is-active)::after,
body.app-body .lr-token::after,
body.app-body .seg-control button:not(.is-on)::after,
body.app-body [data-vs-prev]::after,
body.app-body [data-vs-next]::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 0 !important;
  height: 100% !important;
  background: var(--apple-blue, #0A84FF) !important;
  transition: width 320ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 0 !important;
}
body.app-body .mt-btn-fill:hover,
body.app-body .league-tier-slider button:not(.is-active):hover,
body.app-body .lr-token:hover,
body.app-body .seg-control button:not(.is-on):hover,
body.app-body [data-vs-prev]:hover,
body.app-body [data-vs-next]:hover {
  color: #ffffff !important;
  border-color: var(--apple-blue, #0A84FF) !important;
}
body.app-body .mt-btn-fill:hover::after,
body.app-body .league-tier-slider button:not(.is-active):hover::after,
body.app-body .lr-token:hover::after,
body.app-body .seg-control button:not(.is-on):hover::after,
body.app-body [data-vs-prev]:hover::after,
body.app-body [data-vs-next]:hover::after {
  width: 100% !important;
}


/* 4. Adjust shop-secondary / claim button label alignment */
body.app-body .shop-secondary span,
body.app-body [data-shop-claim] span {
  font-size: 14px !important;
}

/* =================================================================
 * v=89 пїЅ Vote buttons "twist" 3D animation, refs heading gap,
 * compact prev/next, no red hover, shop tabs black-on-active,
 * slow slider transitions, stripes-in-rewards purge.
 * ================================================================= */

/* 1. VOTE BUTTONS пїЅ 3D twist strip animation (BUTTON3D.md style).
 *    JS injects: 2? .botontext (top/bottom face) + 4? .twist (strips).
 *    Each strip has ::before (top half) and ::after (bottom half)
 *    with matrix3d transforms пїЅ on hover they flip. */

body.app-body .widget-vote-a,
body.app-body .widget-vote-b {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 56px !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  cursor: pointer !important;
  border-radius: 14px !important;
  perspective: 1000px !important;
}
body.app-body .widget-vote-a::before,
body.app-body .widget-vote-b::before { display: none !important; }

body.app-body .widget-vote-a .botontext,
body.app-body .widget-vote-b .botontext {
  position: absolute !important;
  height: 100% !important;
  width: 100% !important;
  z-index: 3 !important;
  text-align: center !important;
  line-height: 56px !important;
  font-family: var(--font-system, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}
/* First text пїЅ visible before hover (sits at top of card) */
body.app-body .widget-vote-a .botontext:nth-of-type(1),
body.app-body .widget-vote-b .botontext:nth-of-type(1) {
  color: #ffffff !important;
  bottom: 100% !important;
  transform-origin: center bottom 0 !important;
  transform: matrix3d(1,0,0,0, 0,0,-1,-0.003, 0,1,0,0, 0,0,0,1) !important;
  transition: transform 500ms cubic-bezier(0.97, 0.0, 0.395, 0.995) !important;
}
body.app-body .widget-vote-a:hover .botontext:nth-of-type(1),
body.app-body .widget-vote-b:hover .botontext:nth-of-type(1) {
  transform: matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0.003, 0,50,0,1) !important;
}
/* Second text пїЅ appears on hover from bottom */
body.app-body .widget-vote-a .botontext:nth-of-type(2),
body.app-body .widget-vote-b .botontext:nth-of-type(2) {
  color: #ffffff !important;
  top: 100% !important;
  transform-origin: center top 0 !important;
  transform: matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,-0.003, 0,-50,0,1) !important;
  transition: transform 500ms cubic-bezier(0.97, 0.0, 0.395, 0.995) !important;
}
body.app-body .widget-vote-a:hover .botontext:nth-of-type(2),
body.app-body .widget-vote-b:hover .botontext:nth-of-type(2) {
  transform: matrix3d(1,0,0,0, 0,0,-1,0.003, 0,1,0,0, 0,0,0,1) !important;
}

/* The 4 strips that form the flipping ribbon */
body.app-body .widget-vote-a .twist,
body.app-body .widget-vote-b .twist {
  display: block !important;
  height: 100% !important;
  width: calc(25% + 1px) !important;
  position: relative !important;
  float: left !important;
  margin-left: -1px !important;
}
body.app-body .widget-vote-a .twist:nth-of-type(1),
body.app-body .widget-vote-b .twist:nth-of-type(1) { margin-left: 0 !important; }

/* Top face of strip (visible before hover) пїЅ Apple Blue */
body.app-body .widget-vote-a .twist::before {
  content: "" !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(180deg, #5AB8FF, #0A84FF 60%, #0066CC) !important;
  bottom: 100% !important;
  position: absolute !important;
  transform-origin: center bottom 0 !important;
  transform: matrix3d(1,0,0,0, 0,0,-1,-0.003, 0,1,0,0, 0,0,0,1) !important;
  transition: all 500ms cubic-bezier(0.97, 0.0, 0.395, 0.995) !important;
}
/* Top face for Team B пїЅ Apple Red (button itself can be red, only HOVER is forbidden as red) */
body.app-body .widget-vote-b .twist::before {
  content: "" !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(180deg, #FF8580, #FF453A 60%, #C0241B) !important;
  bottom: 100% !important;
  position: absolute !important;
  transform-origin: center bottom 0 !important;
  transform: matrix3d(1,0,0,0, 0,0,-1,-0.003, 0,1,0,0, 0,0,0,1) !important;
  transition: all 500ms cubic-bezier(0.97, 0.0, 0.395, 0.995) !important;
}
/* Bottom face пїЅ DARKER variant of same color */
body.app-body .widget-vote-a .twist::after {
  content: "" !important;
  position: absolute !important;
  width: 100% !important;
  top: 100% !important;
  height: 100% !important;
  background: linear-gradient(180deg, #003E80, #001F40) !important;
  transform-origin: center top 0 !important;
  transform: matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,-0.003, 0,-56,0,1) !important;
  transition: all 500ms cubic-bezier(0.97, 0.0, 0.395, 0.995) !important;
}
body.app-body .widget-vote-b .twist::after {
  content: "" !important;
  position: absolute !important;
  width: 100% !important;
  top: 100% !important;
  height: 100% !important;
  background: linear-gradient(180deg, #7A0F08, #3D0700) !important;
  transform-origin: center top 0 !important;
  transform: matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,-0.003, 0,-56,0,1) !important;
  transition: all 500ms cubic-bezier(0.97, 0.0, 0.395, 0.995) !important;
}

/* HOVER пїЅ strips flip */
body.app-body .widget-vote-a:hover .twist::before,
body.app-body .widget-vote-b:hover .twist::before {
  transform: matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0.003, 0,56,0,1) !important;
}
body.app-body .widget-vote-a:hover .twist::after,
body.app-body .widget-vote-b:hover .twist::after {
  transform: matrix3d(1,0,0,0, 0,0,-1,0.003, 0,1,0,0, 0,0,0,1) !important;
}
/* Stagger the flip across 4 strips */
body.app-body .widget-vote-a .twist:nth-of-type(1)::before,
body.app-body .widget-vote-a .twist:nth-of-type(1)::after,
body.app-body .widget-vote-b .twist:nth-of-type(1)::before,
body.app-body .widget-vote-b .twist:nth-of-type(1)::after { transition-delay: 0s !important; }
body.app-body .widget-vote-a .twist:nth-of-type(2)::before,
body.app-body .widget-vote-a .twist:nth-of-type(2)::after,
body.app-body .widget-vote-b .twist:nth-of-type(2)::before,
body.app-body .widget-vote-b .twist:nth-of-type(2)::after { transition-delay: 100ms !important; }
body.app-body .widget-vote-a .twist:nth-of-type(3)::before,
body.app-body .widget-vote-a .twist:nth-of-type(3)::after,
body.app-body .widget-vote-b .twist:nth-of-type(3)::before,
body.app-body .widget-vote-b .twist:nth-of-type(3)::after { transition-delay: 200ms !important; }
body.app-body .widget-vote-a .twist:nth-of-type(4)::before,
body.app-body .widget-vote-a .twist:nth-of-type(4)::after,
body.app-body .widget-vote-b .twist:nth-of-type(4)::before,
body.app-body .widget-vote-b .twist:nth-of-type(4)::after { transition-delay: 300ms !important; }


/* 2. NO RED HOVER EFFECTS пїЅ replace shadow-offset button hover from
 *    red gradient > blue gradient. */
body.app-body .shop-secondary::after,
body.app-body [data-shop-claim]::after,
body.app-body [data-shop-external-hero]::after {
  background: linear-gradient(to right, #5AB8FF, #0A84FF) !important;
}


/* 3. SHOP "пїЅпїЅпїЅпїЅпїЅпїЅпїЅ Getgems" пїЅ blue press effect overlay. Already
 *    inherits from rule #2. Add explicit blue press feedback. */
body.app-body [data-shop-external-hero]:active,
body.app-body .shop-primary:active,
body.app-body .shop-secondary:active,
body.app-body [data-shop-claim]:active {
  background: linear-gradient(180deg, #0A84FF, #0066CC) !important;
  background-image: linear-gradient(180deg, #0A84FF, #0066CC) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 2px 5px rgba(0, 25, 60, 0.55),
    0 1px 3px rgba(0, 0, 0, 0.40) !important;
}


/* 4. PREV / NEXT buttons пїЅ compact, side-by-side, smaller */
body.app-body .seg-control,
body.app-body [data-match-seg] {
  max-width: 280px !important;
  margin: 0 auto 16px !important;
  padding: 3px !important;
  border-radius: 999px !important;
}
body.app-body [data-vs-prev],
body.app-body [data-vs-next] {
  flex: 0 1 50% !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  border-radius: 999px !important;
  border-width: 1px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}


/* 5. SHOP TAB / SEG-CONTROL пїЅ active = WHITE pill, BLACK text */
body.app-body .seg-control button.is-on,
body.app-body .shop-tabs button.is-on,
body.app-body [data-shop-tab].is-on,
body.app-body [data-shop-tabs] .is-on {
  background: #ffffff !important;
  background-image: linear-gradient(180deg, #ffffff, #e8e8e2) !important;
  color: #050505 !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -2px 0 rgba(0, 0, 0, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.45) !important;
}
body.app-body .seg-control button.is-on svg,
body.app-body .shop-tabs button.is-on svg,
body.app-body [data-shop-tab].is-on svg {
  fill: #050505 !important;
}


/* 6. SLIDER (seg/league/shop tabs) пїЅ slow movement on selection.
 *    All transitions ramped up to 500ms with bezier. */
body.app-body .seg-control button,
body.app-body .league-tier-slider button,
body.app-body .league-view-toggle button,
body.app-body [data-shop-tab],
body.app-body [data-league-tier],
body.app-body [data-vs-prev],
body.app-body [data-vs-next] {
  transition:
    background-color 500ms cubic-bezier(0.4, 0, 0.2, 1),
    background 500ms cubic-bezier(0.4, 0, 0.2, 1),
    color 500ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 500ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 500ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 500ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}


/* 7. REFS heading пїЅ bigger gap from header. */
body.app-body .tab-refs .refs-hero,
body.app-body .tab-refs .page-hero,
body.app-body .tab-refs > :first-child,
body.app-body .tab-refs .display-title {
  margin-top: 32px !important;
  padding-top: 16px !important;
}
body.app-body .tab-refs .display-title,
body.app-body .tab-refs .section-h,
body.app-body .tab-refs h1,
body.app-body .tab-refs h2 {
  margin-bottom: 24px !important;
}


/* 8. REWARDS пїЅ kill stripes that came back from v=88 page-transition
 *    delays creating visible separator lines on tab children. */
body.app-body .tab-rewards > *,
body.app-body .tab-rewards .reward-lane,
body.app-body .tab-rewards .reward-step,
body.app-body .tab-rewards .reward-node,
body.app-body .tab-rewards [class*="row"],
body.app-body .tab-rewards [class*="track"],
body.app-body .tab-rewards [class*="stripe"] {
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
/* Re-add ONE outer hairline on .reward-lane */
body.app-body .tab-rewards .reward-lane {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
/* Reward-step nth-child stripe-effect from page-transition CSS пїЅ kill */
body.app-body .tab-rewards > *:nth-child(n) {
  animation-delay: 0ms !important;
  border-bottom: 0 !important;
}


/* 9. TON CONNECT modal пїЅ light theme already set in JS, but force
 *    text dark just in case via custom properties Tonkeeper uses. */
:root {
  --tc-text-primary: #050505 !important;
  --tc-text-secondary: rgba(0, 0, 0, 0.65) !important;
}

/* =================================================================
 * v=90 пїЅ Vote buttons: unique clean 3D design distinct from all
 * other CTAs. No twist injection, no shared styles with shop/share/
 * wallet buttons. Beveled solid plates with own depth signature.
 * ================================================================= */

/* OVERRIDE all previous twist-strip styles back to clean state */
body.app-body .widget-vote-a,
body.app-body .widget-vote-b {
  /* Reset everything from v=87/v=88/v=89 */
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 64px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 16px !important;
  font-family: 'Bagel Fat One', var(--font-system, sans-serif) !important;
  font-size: 22px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  overflow: hidden !important;
  user-select: none !important;
  perspective: none !important;
  transition:
    transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
    filter 200ms ease-out,
    box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Reset all weird pseudo-elements and child injections */
body.app-body .widget-vote-a .twist,
body.app-body .widget-vote-b .twist,
body.app-body .widget-vote-a .botontext,
body.app-body .widget-vote-b .botontext {
  display: none !important;
}
body.app-body .widget-vote-a::after,
body.app-body .widget-vote-b::after {
  display: none !important;
  content: none !important;
}

/* Common ::before пїЅ diagonal sheen across top half */
body.app-body .widget-vote-a::before,
body.app-body .widget-vote-b::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px 1px 50% 1px !important;
  border-radius: 14px 14px 0 0 !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.18) 60%, transparent 100%) !important;
  pointer-events: none !important;
  display: block !important;
  z-index: 0 !important;
}

/* Vote A пїЅ Apple Blue distinct beveled plate */
body.app-body .widget-vote-a {
  color: #ffffff !important;
  background: linear-gradient(180deg, #5AB8FF 0%, #1A8FFF 25%, #0A6BD8 60%, #003F87 100%) !important;
  background-image: linear-gradient(180deg, #5AB8FF 0%, #1A8FFF 25%, #0A6BD8 60%, #003F87 100%) !important;
  border: 2px solid rgba(0, 18, 50, 0.65) !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.30),
    0 -1px 0 rgba(0, 18, 50, 0.60),
    0 2px 4px rgba(0, 0, 0, 0.35) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    inset 0 -3px 0 rgba(0, 18, 50, 0.50),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 5px 0 rgba(0, 18, 50, 0.85),
    0 7px 10px rgba(0, 18, 50, 0.55),
    0 16px 26px -3px rgba(10, 132, 255, 0.55),
    0 24px 42px rgba(0, 0, 0, 0.55) !important;
}
body.app-body .widget-vote-a:hover {
  filter: brightness(1.10) saturate(1.05) !important;
  transform: translateY(-1px) !important;
}
body.app-body .widget-vote-a:active {
  transform: translateY(4px) scale(0.985) !important;
  filter: brightness(0.94) !important;
  box-shadow:
    inset 0 3px 6px rgba(0, 18, 50, 0.65),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    0 1px 0 rgba(0, 18, 50, 0.85),
    0 2px 4px rgba(0, 0, 0, 0.45) !important;
}

/* Vote B пїЅ Apple Red distinct beveled plate */
body.app-body .widget-vote-b {
  color: #ffffff !important;
  background: linear-gradient(180deg, #FF8580 0%, #FF5A4D 25%, #D7281C 60%, #7A0F08 100%) !important;
  background-image: linear-gradient(180deg, #FF8580 0%, #FF5A4D 25%, #D7281C 60%, #7A0F08 100%) !important;
  border: 2px solid rgba(60, 0, 0, 0.65) !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.30),
    0 -1px 0 rgba(80, 0, 0, 0.60),
    0 2px 4px rgba(0, 0, 0, 0.35) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    inset 0 -3px 0 rgba(80, 0, 0, 0.50),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 5px 0 rgba(80, 0, 0, 0.85),
    0 7px 10px rgba(80, 0, 0, 0.55),
    0 16px 26px -3px rgba(255, 69, 58, 0.50),
    0 24px 42px rgba(0, 0, 0, 0.55) !important;
}
body.app-body .widget-vote-b:hover {
  filter: brightness(1.10) saturate(1.05) !important;
  transform: translateY(-1px) !important;
}
body.app-body .widget-vote-b:active {
  transform: translateY(4px) scale(0.985) !important;
  filter: brightness(0.94) !important;
  box-shadow:
    inset 0 3px 6px rgba(80, 0, 0, 0.65),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    0 1px 0 rgba(80, 0, 0, 0.85),
    0 2px 4px rgba(0, 0, 0, 0.45) !important;
}

/* CTA container пїЅ visible gap between A and B buttons */
body.app-body .widget-cta {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  margin-top: 16px !important;
  padding: 0 !important;
}

/* Disabled state пїЅ keep depth, mute color */
body.app-body .widget-vote-a:disabled,
body.app-body .widget-vote-b:disabled {
  filter: grayscale(0.55) brightness(0.65) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Override the universal .mt-btn-3d rule from v=87 пїЅ vote buttons
 * should NOT inherit it (different signature). */
body.app-body .widget-vote-a,
body.app-body .widget-vote-b {
  background-color: transparent !important;
}

/* =================================================================
 * v=91 пїЅ Slider sliding indicator (smooth pill that slides to the
 * tapped button), text always visible on selected pill, container
 * radius matches inner buttons, prev/next press doesn't hide text,
 * performance pass for low-end devices.
 * ================================================================= */

/* 1. SLIDER INDICATOR пїЅ sliding pill that animates to active button */
body.app-body .seg-control,
body.app-body .league-tier-slider,
body.app-body .league-view-toggle,
body.app-body .shop-choice-tabs,
body.app-body [data-shop-tabs],
body.app-body [data-shop-choice-tabs] {
  position: relative !important;
  border-radius: 999px !important;
  padding: 5px !important;
  isolation: isolate;
}

/* Indicator sits behind the buttons. Smooth transform/width animation. */
body.app-body .slider-indicator {
  position: absolute !important;
  top: 5px !important;
  bottom: 5px !important;
  left: 0 !important;
  width: 0;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #ffffff, #e8e8e2) !important;
  background-image: linear-gradient(180deg, #ffffff, #e8e8e2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -2px 0 rgba(0, 0, 0, 0.10),
    0 4px 12px rgba(0, 0, 0, 0.40) !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;
  opacity: 0;
  z-index: 0 !important;
  pointer-events: none !important;
  transform: translateX(0);
  will-change: transform, width !important;
  transition:
    transform 480ms cubic-bezier(0.34, 1.18, 0.64, 1),
    width 480ms cubic-bezier(0.34, 1.18, 0.64, 1),
    opacity 240ms ease-out !important;
}

/* Buttons inside slider must sit ABOVE the indicator and have a
 * transparent active background (the indicator IS the active fill) */
body.app-body .seg-control button,
body.app-body .league-tier-slider button,
body.app-body .league-view-toggle button,
body.app-body .shop-choice-tabs button,
body.app-body [data-shop-tab],
body.app-body [data-league-tier],
body.app-body [data-shop-tier],
body.app-body [data-league-view] {
  position: relative !important;
  z-index: 2 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 999px !important;
}

/* Active button: BLACK text on the white indicator. Children stay
 * visible (color tokens explicitly black, no white-out on hover) */
body.app-body .seg-control button.is-on,
body.app-body .seg-control button[aria-selected="true"],
body.app-body .league-tier-slider button.is-active,
body.app-body .league-tier-slider button.is-on,
body.app-body .league-view-toggle button.is-active,
body.app-body .league-view-toggle button.is-on,
body.app-body .shop-choice-tabs button.is-active,
body.app-body .shop-choice-tabs button.is-on,
body.app-body [data-shop-tab].is-on,
body.app-body [data-league-tier].is-active,
body.app-body [data-league-view].is-active,
body.app-body [data-shop-tier].is-active {
  color: #050505 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.app-body .seg-control button.is-on *,
body.app-body .league-tier-slider button.is-active *,
body.app-body .league-view-toggle button.is-active *,
body.app-body .shop-choice-tabs button.is-active *,
body.app-body [data-shop-tab].is-on *,
body.app-body [data-league-tier].is-active *,
body.app-body [data-league-view].is-active *,
body.app-body [data-shop-tier].is-active * {
  color: #050505 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
body.app-body .seg-control button.is-on svg,
body.app-body .league-tier-slider button.is-active svg,
body.app-body .league-view-toggle button.is-active svg,
body.app-body .shop-choice-tabs button.is-active svg,
body.app-body [data-shop-tab].is-on svg,
body.app-body [data-league-tier].is-active svg,
body.app-body [data-league-view].is-active svg,
body.app-body [data-shop-tier].is-active svg {
  fill: #050505 !important;
  color: #050505 !important;
}

/* Inactive button text пїЅ readable grey */
body.app-body .seg-control button:not(.is-on):not(.is-active),
body.app-body .league-tier-slider button:not(.is-active):not(.is-on),
body.app-body .league-view-toggle button:not(.is-active):not(.is-on),
body.app-body .shop-choice-tabs button:not(.is-active):not(.is-on) {
  color: rgba(255, 255, 255, 0.78) !important;
}
body.app-body .seg-control button:not(.is-on):not(.is-active) *,
body.app-body .league-tier-slider button:not(.is-active):not(.is-on) *,
body.app-body .league-view-toggle button:not(.is-active):not(.is-on) *,
body.app-body .shop-choice-tabs button:not(.is-active):not(.is-on) * {
  color: inherit !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Disable old "fill from left" pseudo on slider buttons (it conflicts) */
body.app-body .league-tier-slider button:not(.is-active)::after,
body.app-body .league-tier-slider button:not(.is-on)::after,
body.app-body .seg-control button:not(.is-on)::after,
body.app-body .league-view-toggle button:not(.is-active)::after,
body.app-body .shop-choice-tabs button:not(.is-active)::after,
body.app-body [data-shop-tab]:not(.is-on)::after,
body.app-body [data-vs-prev]::after,
body.app-body [data-vs-next]::after {
  display: none !important;
  content: none !important;
}


/* 2. CONTAINER RADIUS = INNER BUTTON RADIUS
 *    All slider buttons are pill-radius-999px, so their parents must
 *    match. Already set above for top-level sliders. League and
 *    shop sliders need height-aware padding so indicator fits. */
body.app-body .league-tier-slider {
  padding: 6px !important;
}
body.app-body .league-tier-slider button {
  padding: 10px 16px !important;
  min-height: 44px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
body.app-body .league-tier-slider button small,
body.app-body .league-tier-slider button .small {
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: none !important;
  opacity: 1 !important;
  display: block !important;
}
body.app-body .league-tier-slider button.is-active small,
body.app-body .league-tier-slider button.is-on small {
  color: rgba(0, 0, 0, 0.65) !important;
}
body.app-body .league-tier-slider button:not(.is-active):not(.is-on) small {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* shop choice пїЅ keep "пїЅпїЅпїЅпїЅпїЅ/пїЅпїЅпїЅпїЅпїЅпїЅпїЅ" visible at all times */
body.app-body .shop-choice-tabs button {
  padding: 10px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1px !important;
  min-height: 56px !important;
}
body.app-body .shop-choice-tabs button span {
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  display: block !important;
}
body.app-body .shop-choice-tabs button small {
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: lowercase !important;
  opacity: 1 !important;
  display: block !important;
  margin-top: 2px !important;
}
body.app-body .shop-choice-tabs button.is-active small,
body.app-body .shop-choice-tabs button.is-on small {
  color: rgba(0, 0, 0, 0.55) !important;
}
body.app-body .shop-choice-tabs button:not(.is-active):not(.is-on) small {
  color: rgba(255, 255, 255, 0.55) !important;
}


/* 3. PREV/NEXT пїЅ press effect doesn't cover text */
body.app-body [data-vs-prev],
body.app-body [data-vs-next] {
  position: relative !important;
  z-index: 2 !important;
  overflow: visible !important;
}
body.app-body [data-vs-prev] > *,
body.app-body [data-vs-next] > * {
  position: relative !important;
  z-index: 3 !important;
}


/* 4. PERFORMANCE PASS пїЅ speed up low-end devices.
 *    Reduce backdrop-filter usage, isolate paint, prefer transform. */

/* Disable backdrop-filter on older devices via media query */
@media (max-width: 720px) {
  body.app-body .home-flow-step,
  body.app-body .home-trust span,
  body.app-body .home-editorial,
  body.app-body .ios-group,
  body.app-body .league-rules article,
  body.app-body .reward-lane,
  body.app-body .refs-card,
  body.app-body .refs-stat,
  body.app-body .refs-list,
  body.app-body .shop-status-card,
  body.app-body .shop-included article {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Containment пїЅ paint isolation for heavy areas */
body.app-body .tab-rewards .reward-lane,
body.app-body .tab-leagues .league-ribbon,
body.app-body .tab-leagues .league-bracket,
body.app-body .tab-shop .shop-grid,
body.app-body .tab-shop .shop-card,
body.app-body .tab-home .arena-card,
body.app-body .tab-home #active-vote-card,
body.app-body .tab-refs .refs-card {
  contain: layout style paint !important;
}

/* Strip will-change from elements that aren't actively animating */
body.app-body .reward-step:not(.is-claimed),
body.app-body .b-match,
body.app-body .home-flow-step,
body.app-body .ios-row,
body.app-body .command-row,
body.app-body .shop-card {
  will-change: auto !important;
}

/* Reduce-motion пїЅ kill all animations & transitions for accessibility */
@media (prefers-reduced-motion: reduce) {
  body.app-body *,
  body.app-body *::before,
  body.app-body *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  body.app-body .slider-indicator { transition: none !important; }
}


/* 5. TON CONNECT modal пїЅ force LIGHT styling via CSS too in case the
 *    SDK theme prop is ignored. */
:root {
  --tc-color-text-primary: #050505 !important;
  --tc-color-text-secondary: rgba(0, 0, 0, 0.65) !important;
  --tc-modal-bg: #ffffff !important;
  --tc-modal-fg: #050505 !important;
}
body.app-body tc-root,
body.app-body [data-tc-modal] {
  --tc-color-text-primary: #050505 !important;
  --tc-color-text-secondary: rgba(0, 0, 0, 0.65) !important;
  color: #050505 !important;
}

/* =================================================================
 * v=92 пїЅ Quick Actions: circular gradient icons (settings-style)
 * + full 3D button rows + blue hover state.
 * ================================================================= */

/* 1. Quick action ROWS пїЅ proper 3D button styling. */
body.app-body .command-row,
body.app-body .ios-row {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 18px !important;
  margin-bottom: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(50, 50, 56, 0.58), rgba(20, 20, 24, 0.58)) !important;
  background-image: linear-gradient(180deg, rgba(50, 50, 56, 0.58), rgba(20, 20, 24, 0.58)) !important;
  cursor: pointer !important;
  overflow: hidden !important;
  text-align: left !important;
  width: 100% !important;
  color: #ffffff !important;
  /* 3D depth: top highlight + bottom shadow + drop shadow + ridge */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 3px 0 rgba(0, 0, 0, 0.45),
    0 5px 8px rgba(0, 0, 0, 0.45),
    0 12px 20px -4px rgba(0, 0, 0, 0.55) !important;
  transition:
    transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
    background-color 220ms ease-out,
    background-image 220ms ease-out,
    border-color 220ms ease-out !important;
}
body.app-body .command-row::after,
body.app-body .ios-row::after {
  display: none !important;
  content: none !important;
}

/* HOVER пїЅ turns blue (same gradient as other CTAs) */
body.app-body .command-row:hover,
body.app-body .ios-row:hover {
  background: linear-gradient(180deg, #5AB8FF 0%, #1A8FFF 30%, #0A6BD8 70%, #003F87 100%) !important;
  background-image: linear-gradient(180deg, #5AB8FF 0%, #1A8FFF 30%, #0A6BD8 70%, #003F87 100%) !important;
  border-color: rgba(0, 18, 50, 0.65) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 0 rgba(0, 18, 50, 0.40),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 4px 0 rgba(0, 18, 50, 0.85),
    0 7px 10px rgba(0, 18, 50, 0.55),
    0 16px 28px -4px rgba(10, 132, 255, 0.55),
    0 24px 40px rgba(0, 0, 0, 0.55) !important;
}
body.app-body .command-row:hover *,
body.app-body .ios-row:hover * {
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(0, 18, 50, 0.45) !important;
}
body.app-body .command-row:hover .command-icon,
body.app-body .ios-row:hover .ios-row-icon {
  background: linear-gradient(180deg, #ffffff, #e8e8e2) !important;
  background-image: linear-gradient(180deg, #ffffff, #e8e8e2) !important;
  border: 0 !important;
}
body.app-body .command-row:hover .command-icon svg,
body.app-body .ios-row:hover .ios-row-icon svg {
  fill: #0A84FF !important;
  color: #0A84FF !important;
}
body.app-body .command-row:hover .command-chevron svg,
body.app-body .ios-row:hover .ios-row-chevron svg {
  fill: rgba(255, 255, 255, 0.90) !important;
}

/* PRESS пїЅ physical depression (ridge collapses, button sinks) */
body.app-body .command-row:active,
body.app-body .ios-row:active {
  transform: translateY(2px) scale(0.99) !important;
  box-shadow:
    inset 0 2px 5px rgba(0, 18, 50, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    0 1px 0 rgba(0, 18, 50, 0.85),
    0 2px 5px rgba(0, 0, 0, 0.45) !important;
  filter: brightness(0.95) !important;
}


/* 2. Quick action ICONS пїЅ settings-style circular gradient bevels */
body.app-body .command-row .command-icon,
body.app-body .ios-row .ios-row-icon {
  width: 40px !important;
  height: 40px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  overflow: hidden !important;
  border: 0 !important;
  /* Default gradient пїЅ overridden by per-icon color classes below */
  background: linear-gradient(180deg, #5AB8FF, #0A84FF 60%, #003F87) !important;
  background-image: linear-gradient(180deg, #5AB8FF, #0A84FF 60%, #003F87) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 0 rgba(0, 0, 0, 0.30),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.20),
    0 3px 8px rgba(0, 0, 0, 0.40) !important;
  transition:
    background 220ms ease-out,
    box-shadow 220ms ease-out,
    transform 220ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Diagonal sheen on top half */
body.app-body .command-row .command-icon::before,
body.app-body .ios-row .ios-row-icon::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px 1px 50% 1px !important;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 100%) !important;
  pointer-events: none !important;
  display: block !important;
}
body.app-body .command-row .command-icon svg,
body.app-body .ios-row .ios-row-icon svg {
  width: 20px !important;
  height: 20px !important;
  fill: #ffffff !important;
  position: relative !important;
  z-index: 1 !important;
  filter: drop-shadow(0 1px 0 rgba(0, 18, 50, 0.45)) !important;
}

/* Color variants пїЅ settings-style palette */
body.app-body .command-icon.command-blue,
body.app-body .ios-icon-blue {
  background: linear-gradient(180deg, #5AB8FF, #0A84FF 55%, #003F87) !important;
  background-image: linear-gradient(180deg, #5AB8FF, #0A84FF 55%, #003F87) !important;
}
body.app-body .command-icon.command-gold,
body.app-body .ios-icon-gold {
  background: linear-gradient(180deg, #7DD3FF, #5AB8FF 55%, #0055B3) !important;
  background-image: linear-gradient(180deg, #7DD3FF, #5AB8FF 55%, #0055B3) !important;
}
body.app-body .command-icon.command-gold svg,
body.app-body .ios-icon-gold svg {
  fill: #2A1A00 !important;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.55)) !important;
}
body.app-body .command-icon.command-green,
body.app-body .ios-icon-green {
  background: linear-gradient(180deg, #5AB8FF, #0A84FF 55%, #0055B3) !important;
  background-image: linear-gradient(180deg, #5AB8FF, #0A84FF 55%, #0055B3) !important;
}
body.app-body .command-icon.command-red,
body.app-body .ios-icon-red {
  background: linear-gradient(180deg, #FF8580, #FF453A 55%, #7A0F08) !important;
  background-image: linear-gradient(180deg, #FF8580, #FF453A 55%, #7A0F08) !important;
}
body.app-body .command-icon.command-orange,
body.app-body .ios-icon-orange {
  background: linear-gradient(180deg, #FFC061, #FF9F0A 55%, #C77400) !important;
  background-image: linear-gradient(180deg, #FFC061, #FF9F0A 55%, #C77400) !important;
}
body.app-body .command-icon.command-purple,
body.app-body .ios-icon-purple {
  background: linear-gradient(180deg, #D89AF7, #BF5AF2 55%, #8944AB) !important;
  background-image: linear-gradient(180deg, #D89AF7, #BF5AF2 55%, #8944AB) !important;
}
body.app-body .command-icon.command-teal,
body.app-body .ios-icon-teal {
  background: linear-gradient(180deg, #88E2FF, #64D2FF 55%, #007EAA) !important;
  background-image: linear-gradient(180deg, #88E2FF, #64D2FF 55%, #007EAA) !important;
}


/* 3. Row text пїЅ clean hierarchy */
body.app-body .command-row .command-copy,
body.app-body .ios-row .ios-row-text {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}
body.app-body .command-row .command-copy strong,
body.app-body .ios-row .ios-row-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.014em !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.app-body .command-row .command-copy small,
body.app-body .ios-row .ios-row-subtitle {
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  color: rgba(255, 255, 255, 0.62) !important;
}
body.app-body .command-row:hover .command-copy strong,
body.app-body .ios-row:hover .ios-row-title {
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(0, 18, 50, 0.55) !important;
}
body.app-body .command-row:hover .command-copy small,
body.app-body .ios-row:hover .ios-row-subtitle {
  color: rgba(255, 255, 255, 0.85) !important;
  text-shadow: 0 1px 0 rgba(0, 18, 50, 0.45) !important;
}

body.app-body .command-row .command-chevron,
body.app-body .ios-row .ios-row-chevron {
  display: inline-flex !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}
body.app-body .command-row .command-chevron svg,
body.app-body .ios-row .ios-row-chevron svg {
  width: 10px !important;
  height: 14px !important;
  fill: rgba(255, 255, 255, 0.40) !important;
  transition: transform 220ms ease-out, fill 220ms ease-out !important;
}
body.app-body .command-row:hover .command-chevron svg,
body.app-body .ios-row:hover .ios-row-chevron svg {
  transform: translateX(3px) !important;
}

/* iOS row dividers no longer needed (each row is self-contained card) */
body.app-body .ios-row + .ios-row::before {
  display: none !important;
}
body.app-body .ios-row + .ios-row {
  margin-left: 0 !important;
  padding-left: 18px !important;
}

/* =================================================================
 * v=93 пїЅ Opaque league/tier sliders (no bleed-through), TON Connect
 * modal forced dark text on white.
 * ================================================================= */

/* 1. SLIDER OPACITY пїЅ fully opaque dark backdrop, no bleed-through */
body.app-body .seg-control,
body.app-body .league-tier-slider,
body.app-body .league-view-toggle,
body.app-body .shop-choice-tabs,
body.app-body [data-shop-tabs],
body.app-body [data-shop-choice-tabs],
body.app-body [data-league-tier-slider],
body.app-body [data-league-view-toggle] {
  background: #16161a !important;
  background-image: linear-gradient(180deg, #2a2a2e 0%, #16161a 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.40),
    0 6px 18px rgba(0, 0, 0, 0.55) !important;
  position: relative !important;
  z-index: 5 !important;
  isolation: isolate !important;
}

/* Indicator pill пїЅ solid white, no transparency */
body.app-body .slider-indicator {
  background: #ffffff !important;
  background-image: linear-gradient(180deg, #ffffff 0%, #e8e8e2 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 0 rgba(0, 0, 0, 0.10),
    0 4px 12px rgba(0, 0, 0, 0.55) !important;
}

/* Make sure inactive button background is fully transparent so the
 * dark slider track shows through, no half-tone artifacts. */
body.app-body .seg-control button:not(.is-on),
body.app-body .league-tier-slider button:not(.is-active),
body.app-body .league-view-toggle button:not(.is-active),
body.app-body .shop-choice-tabs button:not(.is-active) {
  background: transparent !important;
  background-image: none !important;
}


/* 2. LEAGUE-TIER SLIDER specifically: prevent text bleed from below.
 *    The lr-name "пїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅ пїЅпїЅпїЅпїЅ" was showing through because both
 *    layers were transparent. Slider now sits on its own paint layer. */
body.app-body .league-tier-slider {
  position: sticky !important;
  top: 100px !important;
  margin: 16px 0 24px !important;
  z-index: 10 !important;
}
body.app-body .league-stack-section {
  position: relative !important;
  z-index: 1 !important;
}
body.app-body .league-stack-section > .league-tier-slider {
  z-index: 12 !important;
}
body.app-body .leagues-stack {
  position: relative !important;
  z-index: 1 !important;
}


/* 3. TON CONNECT modal пїЅ force black text on white (SDK CSS vars +
 *    descendant rules). The SDK uses Web Components with shadow DOM
 *    so we override at multiple levels: :root vars, host element,
 *    deep descendants. */
:root {
  /* Common var names across @tonconnect/ui versions */
  --tc-color-text-primary: #050505 !important;
  --tc-color-text-secondary: #444444 !important;
  --tc-text-primary: #050505 !important;
  --tc-text-secondary: #444444 !important;
  --tc-modal-bg: #ffffff !important;
  --tc-card-bg: #ffffff !important;
  --tc-background-primary: #ffffff !important;
  --tc-background-secondary: #f4f4f0 !important;
  --color-text-primary: #050505 !important;
  --color-text-secondary: #444444 !important;
  --color-background-primary: #ffffff !important;
}

/* Tonkeeper / TC modal host elements */
body tc-root,
body tc-modal,
body tc-modal-page,
body tc-wallets-modal,
body tc-action-modal,
body [data-tc-modal],
body [data-tc-wallets-modal],
body div[id^="tc-widget-root"],
body div[id^="tc-modal"] {
  --tc-color-text-primary: #050505 !important;
  --tc-color-text-secondary: #444444 !important;
  --tc-text-primary: #050505 !important;
  --tc-text-secondary: #444444 !important;
  color: #050505 !important;
}

/* Headings inside the modal пїЅ last-resort. SDK rendered with light
 * grey text on white; force dark. */
body tc-root h1,
body tc-root h2,
body tc-root h3,
body tc-root p,
body tc-root span:not([class*="connect"]):not([class*="primary"]),
body tc-modal h1,
body tc-modal h2,
body tc-modal h3,
body tc-modal p,
body [data-tc-modal] h1,
body [data-tc-modal] h2,
body [data-tc-modal] h3,
body [data-tc-modal] p {
  color: #050505 !important;
}

/* =================================================================
 * v=94 пїЅ Kill rewards "track" lines / palki for good. Remove
 * .reward-lanes::before, .reward-path-line, all separator pseudos.
 * ================================================================= */

body.app-body .tab-rewards .reward-lanes::before,
body.app-body .tab-rewards .reward-lanes::after,
body.app-body .tab-rewards .reward-path-line,
body.app-body .tab-rewards .reward-path,
body.app-body .tab-rewards .reward-track,
body.app-body .tab-rewards .reward-rail,
body.app-body .tab-rewards .reward-step::before,
body.app-body .tab-rewards .reward-step::after,
body.app-body .tab-rewards [class*="path-line"],
body.app-body .tab-rewards [class*="reward-rail"],
body.app-body .tab-rewards [class*="reward-track"],
body.app-body .reward-lanes::before,
body.app-body .reward-lanes::after,
body.app-body .reward-path-line {
  display: none !important;
  content: none !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

/* Outer container of rewards must be paint-isolated so any leftover
 * pseudo-elements can't leak visually. */
body.app-body .tab-rewards .reward-lanes,
body.app-body .tab-rewards .reward-lane {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
  position: relative !important;
}
body.app-body .tab-rewards .reward-lanes::before,
body.app-body .tab-rewards .reward-lanes::after {
  display: none !important;
}

/* =================================================================
 * v=95 пїЅ Smaller headings in пїЅпїЅпїЅпїЅпїЅ/пїЅпїЅпїЅпїЅ, slider container radius
 * exactly matches inner buttons (full pill).
 * ================================================================= */

/* 1. Smaller headings in leagues tab. */
body.app-body .tab-leagues .section-h,
body.app-body .tab-leagues #bracket-title,
body.app-body .tab-leagues .league-stack-title,
body.app-body .tab-leagues #league-stack-title,
body.app-body .league-map .section-h,
body.app-body .league-stack-section .section-h {
  font-size: clamp(20px, 4.5vw, 26px) !important;
  letter-spacing: -0.018em !important;
  line-height: 1.15 !important;
  margin: 16px 0 12px !important;
  text-align: center !important;
}

/* 2. League hero title пїЅ smaller too (the "пїЅпїЅпїЅпїЅпїЅпїЅ пїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅ..." block) */
body.app-body .tab-leagues .league-hero .display-title,
body.app-body .tab-leagues .league-hero h1,
body.app-body .tab-leagues #league-title {
  font-size: clamp(20px, 5vw, 28px) !important;
  letter-spacing: -0.020em !important;
  line-height: 1.15 !important;
}


/* 3. Slider container radius == inner button radius (full pill).
 *    Force on ALL variants to match the rounded indicator. */
body.app-body .seg-control,
body.app-body .league-tier-slider,
body.app-body .league-view-toggle,
body.app-body .shop-choice-tabs,
body.app-body [data-shop-tabs],
body.app-body [data-shop-choice-tabs],
body.app-body [data-league-tier-slider],
body.app-body [data-league-view-toggle] {
  border-radius: 999px !important;
  padding: 5px !important;
  overflow: hidden !important;
}

/* Each button inside пїЅ also full pill, exactly matching container shape */
body.app-body .seg-control button,
body.app-body .league-tier-slider button,
body.app-body .league-view-toggle button,
body.app-body .shop-choice-tabs button,
body.app-body [data-shop-tab],
body.app-body [data-league-tier],
body.app-body [data-league-view],
body.app-body [data-shop-tier] {
  border-radius: 999px !important;
}

/* Slider indicator пїЅ full pill, sits perfectly inside the rounded track */
body.app-body .slider-indicator {
  border-radius: 999px !important;
}

/* League-tier-slider extra polish пїЅ reduce padding on inner buttons
 * so the small/big text fits cleanly without breaking the pill shape */
body.app-body .league-tier-slider button,
body.app-body [data-league-tier] {
  padding: 8px 14px !important;
  min-height: 44px !important;
}

/* =================================================================
 * v=96 пїЅ Smaller vote buttons.
 * ================================================================= */

body.app-body .widget-vote-a,
body.app-body .widget-vote-b {
  height: 46px !important;
  padding: 0 14px !important;
  font-size: 16px !important;
  letter-spacing: 0.03em !important;
  border-radius: 12px !important;
  border-width: 1.5px !important;
}
body.app-body .widget-vote-a::before,
body.app-body .widget-vote-b::before {
  border-radius: 10px 10px 0 0 !important;
}
/* Trim the chunky 5px ridge > tighter 3px to match new size */
body.app-body .widget-vote-a {
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.50),
    inset 0 -2px 0 rgba(0, 18, 50, 0.50),
    inset 0 0 0 1px rgba(255, 255, 255, 0.20),
    0 3px 0 rgba(0, 18, 50, 0.85),
    0 5px 8px rgba(0, 18, 50, 0.50),
    0 10px 18px -2px rgba(10, 132, 255, 0.50),
    0 16px 28px rgba(0, 0, 0, 0.50) !important;
}
body.app-body .widget-vote-b {
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.50),
    inset 0 -2px 0 rgba(80, 0, 0, 0.50),
    inset 0 0 0 1px rgba(255, 255, 255, 0.20),
    0 3px 0 rgba(80, 0, 0, 0.85),
    0 5px 8px rgba(80, 0, 0, 0.50),
    0 10px 18px -2px rgba(255, 69, 58, 0.50),
    0 16px 28px rgba(0, 0, 0, 0.50) !important;
}
body.app-body .widget-vote-a:active {
  transform: translateY(2.5px) scale(0.985) !important;
  box-shadow:
    inset 0 2px 4px rgba(0, 18, 50, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    0 1px 0 rgba(0, 18, 50, 0.85),
    0 2px 4px rgba(0, 0, 0, 0.45) !important;
}
body.app-body .widget-vote-b:active {
  transform: translateY(2.5px) scale(0.985) !important;
  box-shadow:
    inset 0 2px 4px rgba(80, 0, 0, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    0 1px 0 rgba(80, 0, 0, 0.85),
    0 2px 4px rgba(0, 0, 0, 0.45) !important;
}

/* Tighter gap between A/B */
body.app-body .widget-cta {
  gap: 10px !important;
  margin-top: 12px !important;
}

/* =================================================================
 * v=97 пїЅ Kill OLD slider ::before indicators on league-view-toggle
 * and league-tier-slider (Codex left them with non-pill radius).
 * Force pill radius. Final reward "пїЅпїЅпїЅпїЅпїЅпїЅпїЅ" purge.
 * ================================================================= */

/* 1. KILL all OLD ::before/::after indicators on sliders that
 *    conflict with our JS .slider-indicator. */
body.app-body .league-view-toggle::before,
body.app-body .league-view-toggle::after,
body.app-body .league-tier-slider::before,
body.app-body .league-tier-slider::after,
body.app-body .seg-control::before,
body.app-body .seg-control::after,
body.app-body .shop-choice-tabs::before,
body.app-body .shop-choice-tabs::after,
body.app-body [data-league-view-toggle]::before,
body.app-body [data-league-view-toggle]::after,
body.app-body [data-league-tier-slider]::before,
body.app-body [data-league-tier-slider]::after,
body.app-body [data-shop-tabs]::before,
body.app-body [data-shop-tabs]::after,
body.app-body [data-shop-choice-tabs]::before,
body.app-body [data-shop-choice-tabs]::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}

/* 2. Force pill radius (full 999px) on slider container.
 *    Use HIGHER-specificity selector with double class to win. */
body.app-body .league-view-toggle.league-view-toggle,
body.app-body .league-tier-slider.league-tier-slider,
body.app-body .seg-control.seg-control,
body.app-body .shop-choice-tabs.shop-choice-tabs,
body.app-body [data-league-view-toggle][data-league-view-toggle],
body.app-body [data-league-tier-slider][data-league-tier-slider],
body.app-body [data-shop-choice-tabs][data-shop-choice-tabs] {
  border-radius: 999px !important;
  overflow: hidden !important;
}


/* 3. REWARDS пїЅ kill the "пїЅпїЅпїЅпїЅпїЅпїЅпїЅ" between/around reward steps.
 *    The "Award Path" connecting line comes from .reward-step::after
 *    OR a specific child. NUKE all decoration in this area. */
body.app-body .tab-rewards .reward-step,
body.app-body .tab-rewards .reward-step::before,
body.app-body .tab-rewards .reward-step::after,
body.app-body .tab-rewards .reward-step > .reward-index::before,
body.app-body .tab-rewards .reward-step > .reward-index::after,
body.app-body .tab-rewards .reward-index::before,
body.app-body .tab-rewards .reward-index::after,
body.app-body .reward-step::before,
body.app-body .reward-step::after,
body.app-body .reward-index::before,
body.app-body .reward-index::after {
  border: 0 !important;
}
body.app-body .tab-rewards .reward-step::before,
body.app-body .tab-rewards .reward-step::after,
body.app-body .tab-rewards .reward-index::before,
body.app-body .tab-rewards .reward-index::after,
body.app-body .reward-step::before,
body.app-body .reward-step::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  background-image: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* The reward-index (the small "1"/"2"/"3" between buttons) пїЅ keep its
 * text but kill any line/connector behind it. */
body.app-body .tab-rewards .reward-index {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  position: relative !important;
}

/* In rewards-shell, hide any path/track/rail decoration entirely */
body.app-body .tab-rewards .rewards-shell::before,
body.app-body .tab-rewards .rewards-shell::after,
body.app-body .tab-rewards [class*="path"]:not(.reward-step):not(.reward-node),
body.app-body .tab-rewards [class*="track"]:not(.reward-step):not(.reward-node),
body.app-body .tab-rewards [class*="rail"]:not(.reward-step):not(.reward-node),
body.app-body .tab-rewards [class*="line"]:not(.reward-step):not(.reward-node),
body.app-body .tab-rewards [class*="bridge"]:not(.reward-step):not(.reward-node),
body.app-body .tab-rewards [class*="connector"]:not(.reward-step):not(.reward-node) {
  display: none !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
}

/* =================================================================
 * v=98 пїЅ Rewards: scroll perf optimization (content-visibility,
 * paint containment, no backdrop-filter on items).
 * Pass modal: slide-up bottom sheet for buying PASS at 100 TON.
 * ================================================================= */

/* 1. REWARDS scroll perf пїЅ make 30+ steps scroll smoothly. */
body.app-body .tab-rewards {
  overscroll-behavior-y: contain !important;
}
body.app-body .tab-rewards .reward-lanes {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  /* Promote to its own compositor layer so scrolling is GPU-only */
  transform: translateZ(0) !important;
  contain: layout style paint !important;
  isolation: isolate !important;
}
body.app-body .tab-rewards .reward-step {
  /* content-visibility: off-screen reward rows skip layout/paint
   * until they enter viewport. HUGE perf win on long lists. */
  content-visibility: auto !important;
  contain-intrinsic-size: auto 90px !important;
  contain: layout style paint !important;
  /* Strip ALL filters/backdrops пїЅ they were the worst scroll jank. */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  will-change: auto !important;
  transform: none !important;
  /* Disable transitions (no animations during scroll) */
  transition: none !important;
  animation: none !important;
}
body.app-body .tab-rewards .reward-node {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  will-change: auto !important;
  transition: background-color 120ms linear, color 120ms linear !important;
  contain: layout style paint !important;
  /* Simplify box-shadow to single drop (was multi-layer) */
}
body.app-body .tab-rewards .reward-node.is-claimed {
  /* On-claimed rewards keep their visual but no animations */
  animation: none !important;
}
body.app-body .tab-rewards .reward-node::after {
  /* Disable animated pulse glow on available rewards (causes paint) */
  animation: none !important;
}
body.app-body .tab-rewards .reward-art {
  /* Sticker icons don't need filters during scroll */
  filter: none !important;
  will-change: auto !important;
}
body.app-body .tab-rewards .reward-index {
  contain: layout style !important;
}

/* When user is actively scrolling, kill all hover effects */
@media (hover: none) {
  body.app-body .tab-rewards .reward-node:hover {
    transform: none !important;
    box-shadow: inherit !important;
  }
}


/* 2. PASS MODAL > BOTTOM SHEET that slides up from bottom. */
body.app-body .pass-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9000 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 240ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  padding: 0 !important;
}
body.app-body .pass-modal[aria-hidden="false"],
body.app-body .pass-modal.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Bottom sheet card пїЅ slides up from below the viewport */
body.app-body .pass-modal .pass-card {
  position: relative !important;
  width: 100% !important;
  max-width: 480px !important;
  margin: 0 !important;
  padding: 22px 22px 32px !important;
  border-radius: 28px 28px 0 0 !important;
  background: linear-gradient(180deg, #16161a 0%, #050507 100%) !important;
  background-image: linear-gradient(180deg, #16161a 0%, #050507 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-bottom: 0 !important;
  color: #ffffff !important;
  box-shadow:
    0 -16px 48px rgba(0, 0, 0, 0.85),
    0 -2px 0 rgba(10, 132, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  transform: translateY(100%) !important;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  align-items: stretch !important;
  text-align: center !important;
}
body.app-body .pass-modal[aria-hidden="false"] .pass-card,
body.app-body .pass-modal.is-open .pass-card {
  transform: translateY(0) !important;
}

/* Drag handle indicator at top of sheet */
body.app-body .pass-modal .pass-card::before {
  content: "" !important;
  position: absolute !important;
  top: 8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 40px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.25) !important;
  display: block !important;
}

/* Close button пїЅ top right of sheet */
body.app-body .pass-modal .modal-close,
body.app-body .pass-modal .pass-close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 32px !important;
  height: 32px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border: 0 !important;
  color: #ffffff !important;
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  font-weight: 700 !important;
  transition: background 200ms !important;
}
body.app-body .pass-modal .pass-close:hover {
  background: rgba(255, 255, 255, 0.20) !important;
}

/* Sheet content пїЅ centered, larger margin from drag handle */
body.app-body .pass-modal .pass-card h3 {
  margin: 16px 0 0 !important;
  font-family: 'Bagel Fat One', sans-serif !important;
  font-size: 28px !important;
  letter-spacing: 0.005em !important;
  color: #ffffff !important;
  text-align: center !important;
}

body.app-body .pass-modal .pass-art {
  width: 140px !important;
  height: 140px !important;
  margin: 4px auto 8px !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow:
    0 16px 32px rgba(10, 132, 255, 0.30),
    0 4px 12px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}
body.app-body .pass-modal .pass-art img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

body.app-body .pass-modal .pass-benefits {
  display: grid !important;
  gap: 8px !important;
  padding: 14px 16px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
  text-align: left !important;
}
body.app-body .pass-modal .pass-benefits article {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 12px !important;
  border: 0 !important;
}
body.app-body .pass-modal .pass-benefits article + article {
  padding-top: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body.app-body .pass-modal .pass-benefits span {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.50) !important;
  flex-shrink: 0 !important;
}
body.app-body .pass-modal .pass-benefits strong {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-align: right !important;
}

body.app-body .pass-modal .pass-price {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 4px 0 0 !important;
}
body.app-body .pass-modal .pass-price strong {
  font-family: 'Bagel Fat One', sans-serif !important;
  font-size: 56px !important;
  line-height: 1 !important;
  color: var(--apple-yellow, #5AB8FF) !important;
  text-shadow: 0 4px 12px rgba(255, 214, 10, 0.40) !important;
}
body.app-body .pass-modal .pass-price span {
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  color: rgba(255, 214, 10, 0.85) !important;
  text-transform: uppercase !important;
}

body.app-body .pass-modal [data-pass-buy] {
  width: 100% !important;
  padding: 16px !important;
  border-radius: 14px !important;
  border: 0 !important;
  background: linear-gradient(180deg, #7DD3FF, #5AB8FF 50%, #0055B3) !important;
  background-image: linear-gradient(180deg, #7DD3FF, #5AB8FF 50%, #0055B3) !important;
  color: #050505 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.85),
    inset 0 -3px 0 rgba(0, 0, 0, 0.25),
    0 12px 28px rgba(255, 214, 10, 0.35),
    0 4px 12px rgba(0, 0, 0, 0.45) !important;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), filter 200ms !important;
}
body.app-body .pass-modal [data-pass-buy]:hover {
  filter: brightness(1.10) !important;
  transform: translateY(-1px) !important;
}
body.app-body .pass-modal [data-pass-buy]:active {
  transform: translateY(2px) !important;
  filter: brightness(0.95) !important;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.30),
    0 2px 6px rgba(0, 0, 0, 0.40) !important;
}

@media (max-width: 480px) {
  body.app-body .pass-modal .pass-card {
    padding: 22px 18px 28px !important;
  }
  body.app-body .pass-modal .pass-art {
    width: 120px !important;
    height: 120px !important;
  }
  body.app-body .pass-modal .pass-price strong {
    font-size: 48px !important;
  }
}

/* =================================================================
 * v=99 пїЅ Buy bottom sheet, tier slider buttons no borders, ALL
 * Quick Action icons in BLUE.
 * ================================================================= */

/* 1. BUY SHEET пїЅ slide-up bottom sheet for shop "Buy" tap */
body.app-body .buy-sheet {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9000 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 240ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.app-body .buy-sheet.is-open,
body.app-body .buy-sheet[aria-hidden="false"] {
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.app-body .buy-sheet-card {
  position: relative !important;
  width: 100% !important;
  max-width: 480px !important;
  margin: 0 !important;
  padding: 24px 22px 28px !important;
  border-radius: 28px 28px 0 0 !important;
  background: linear-gradient(180deg, #16161a 0%, #050507 100%) !important;
  background-image: linear-gradient(180deg, #16161a 0%, #050507 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-bottom: 0 !important;
  color: #ffffff !important;
  box-shadow:
    0 -16px 48px rgba(0, 0, 0, 0.85),
    0 -2px 0 rgba(10, 132, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  transform: translateY(100%) !important;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  align-items: stretch !important;
  text-align: center !important;
}
body.app-body .buy-sheet.is-open .buy-sheet-card,
body.app-body .buy-sheet[aria-hidden="false"] .buy-sheet-card {
  transform: translateY(0) !important;
}

/* Drag handle indicator */
body.app-body .buy-sheet-card::before {
  content: "" !important;
  position: absolute !important;
  top: 8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 40px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.25) !important;
  display: block !important;
}

body.app-body .buy-sheet-close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 32px !important;
  height: 32px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border: 0 !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: background 200ms !important;
}
body.app-body .buy-sheet-close:hover { background: rgba(255, 255, 255, 0.20) !important; }

body.app-body .buy-sheet-kicker {
  margin: 12px 0 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgba(90, 184, 255, 0.85) !important;
}
body.app-body .buy-sheet-name {
  margin: 0 !important;
  font-family: 'Bagel Fat One', sans-serif !important;
  font-size: 26px !important;
  letter-spacing: 0.005em !important;
  color: #ffffff !important;
}
body.app-body .buy-sheet-meta {
  display: flex !important;
  justify-content: center !important;
  align-items: baseline !important;
  gap: 12px !important;
  margin: 4px 0 0 !important;
}
body.app-body .buy-sheet-price {
  font-family: 'Bagel Fat One', sans-serif !important;
  font-size: 36px !important;
  line-height: 1 !important;
  color: #5AB8FF !important;
  text-shadow: 0 4px 12px rgba(255, 214, 10, 0.40) !important;
}
body.app-body .buy-sheet-votes {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: rgba(90, 184, 255, 0.85) !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}
body.app-body .buy-sheet-balance {
  margin: 0 !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  letter-spacing: 0.04em !important;
}

body.app-body .buy-sheet-actions {
  display: grid !important;
  gap: 10px !important;
  margin-top: 12px !important;
}

body.app-body .buy-sheet-btn {
  display: grid !important;
  grid-template-columns: 44px 1fr !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 14px 18px !important;
  border: 0 !important;
  border-radius: 16px !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), filter 200ms !important;
}
body.app-body .buy-pay-emoji,
body.app-body .buy-nft-emoji {
  font-size: 28px !important;
  line-height: 1 !important;
  text-align: center !important;
}
body.app-body .buy-pay-text,
body.app-body .buy-nft-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
body.app-body .buy-pay-title,
body.app-body .buy-nft-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -0.014em !important;
  line-height: 1.1 !important;
}
body.app-body .buy-pay-sub,
body.app-body .buy-nft-sub {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  opacity: 0.75 !important;
}

/* Pay button пїЅ gold (primary action) */
body.app-body .buy-sheet-pay {
  background: linear-gradient(180deg, #7DD3FF, #5AB8FF 50%, #0055B3) !important;
  background-image: linear-gradient(180deg, #7DD3FF, #5AB8FF 50%, #0055B3) !important;
  color: #050505 !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.85),
    inset 0 -3px 0 rgba(0, 0, 0, 0.20),
    0 8px 22px rgba(255, 214, 10, 0.40),
    0 4px 10px rgba(0, 0, 0, 0.45) !important;
}
body.app-body .buy-sheet-pay:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
}
body.app-body .buy-sheet-pay:active {
  transform: translateY(2px) !important;
  filter: brightness(0.92) !important;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.30),
    0 2px 6px rgba(0, 0, 0, 0.40) !important;
}
/* Disabled пїЅ not enough TON balance */
body.app-body .buy-sheet-pay.is-disabled,
body.app-body .buy-sheet-pay:disabled {
  background: linear-gradient(180deg, #555, #333) !important;
  background-image: linear-gradient(180deg, #555, #333) !important;
  color: rgba(255, 255, 255, 0.55) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: none !important;
  transform: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.40),
    0 2px 6px rgba(0, 0, 0, 0.45) !important;
  opacity: 0.65 !important;
}

/* NFT button пїЅ blue (secondary action) */
body.app-body .buy-sheet-nft {
  background: linear-gradient(180deg, #5AB8FF, #1A8FFF 50%, #003F87) !important;
  background-image: linear-gradient(180deg, #5AB8FF, #1A8FFF 50%, #003F87) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.45),
    inset 0 -3px 0 rgba(0, 18, 50, 0.40),
    0 8px 22px rgba(10, 132, 255, 0.45),
    0 4px 10px rgba(0, 0, 0, 0.45) !important;
}
body.app-body .buy-sheet-nft:hover {
  filter: brightness(1.10) !important;
  transform: translateY(-1px) !important;
}
body.app-body .buy-sheet-nft:active {
  transform: translateY(2px) !important;
  filter: brightness(0.94) !important;
  box-shadow:
    inset 0 2px 4px rgba(0, 18, 50, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.40) !important;
}


/* 2. TIER SLIDER (Bronze/Silver/Gold) пїЅ NO borders on inner buttons */
body.app-body .league-tier-slider button,
body.app-body [data-league-tier],
body.app-body .league-tier-slider button.is-active,
body.app-body .league-tier-slider button.is-on,
body.app-body [data-league-tier].is-active,
body.app-body [data-league-tier].is-on,
body.app-body .league-tier-slider button:not(.is-active),
body.app-body .league-tier-slider button:not(.is-on) {
  border: 0 !important;
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow: none !important;
}


/* 3. ALL Quick Action ICONS > BLUE gradient (uniform) */
body.app-body .command-row .command-icon,
body.app-body .ios-row .ios-row-icon,
body.app-body .command-icon,
body.app-body .ios-row-icon,
body.app-body .command-icon.command-blue,
body.app-body .command-icon.command-gold,
body.app-body .command-icon.command-green,
body.app-body .command-icon.command-red,
body.app-body .command-icon.command-orange,
body.app-body .command-icon.command-purple,
body.app-body .command-icon.command-teal,
body.app-body .ios-icon-blue,
body.app-body .ios-icon-gold,
body.app-body .ios-icon-green,
body.app-body .ios-icon-red,
body.app-body .ios-icon-orange,
body.app-body .ios-icon-purple,
body.app-body .ios-icon-teal {
  background: linear-gradient(180deg, #5AB8FF, #0A84FF 55%, #003F87) !important;
  background-image: linear-gradient(180deg, #5AB8FF, #0A84FF 55%, #003F87) !important;
  border: 2px solid #5AB8FF !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 0 rgba(0, 18, 50, 0.40),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.20),
    0 0 0 1px rgba(90, 184, 255, 0.65),
    0 4px 12px rgba(10, 132, 255, 0.45) !important;
}
body.app-body .command-row .command-icon svg,
body.app-body .ios-row .ios-row-icon svg {
  fill: #ffffff !important;
  filter: drop-shadow(0 1px 0 rgba(0, 18, 50, 0.50)) !important;
}
/* ============================================================
   GLASS CTA — premium glassy pill from Кнопка стекло.txt
   Used by Купить голоса / Открыть лиги on the home tab.
   ============================================================ */

@property --gcta-angle-1 {
  syntax: "<angle>";
  inherits: false;
  initial-value: -75deg;
}
@property --gcta-angle-2 {
  syntax: "<angle>";
  inherits: false;
  initial-value: -45deg;
}

.home-action-row { isolation: isolate; }

.glass-cta-wrap {
  --anim--hover-time: 400ms;
  --anim--hover-ease: cubic-bezier(0.25, 1, 0.5, 1);
  position: relative;
  z-index: 2;
  border-radius: 999vw;
  background: transparent !important;
  pointer-events: none;
  transition: all var(--anim--hover-time) var(--anim--hover-ease);
  font-size: clamp(13px, 3.6vw, 16px);
  display: block;
  width: 100%;
  min-width: 0;
}

.glass-cta-shadow {
  --shadow-cuttoff-fix: 2em;
  position: absolute;
  width: calc(100% + var(--shadow-cuttoff-fix));
  height: calc(100% + var(--shadow-cuttoff-fix));
  top: calc(0% - var(--shadow-cuttoff-fix) / 2);
  left: calc(0% - var(--shadow-cuttoff-fix) / 2);
  filter: blur(clamp(2px, 0.125em, 12px));
  -webkit-filter: blur(clamp(2px, 0.125em, 12px));
  overflow: visible;
  pointer-events: none;
}

.glass-cta-shadow::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: 999vw;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.2));
  width: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
  height: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
  top: calc(var(--shadow-cuttoff-fix) - 0.5em);
  left: calc(var(--shadow-cuttoff-fix) - 0.875em);
  padding: 0.125em;
  box-sizing: border-box;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: all var(--anim--hover-time) var(--anim--hover-ease);
  overflow: visible;
  opacity: 1;
}

.glass-cta {
  --border-width: clamp(1px, 0.0625em, 4px);
  all: unset;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  pointer-events: auto;
  z-index: 3;
  display: block;
  width: 100%;
  text-align: center;
  background: linear-gradient(
    -75deg,
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0.85),
    rgba(255, 255, 255, 0.55)
  ) !important;
  border-radius: 999vw !important;
  border: 0 !important;
  box-shadow:
    inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
    inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
    0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.2),
    0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2),
    0 0 0 0 rgba(255, 255, 255, 1) !important;
  backdrop-filter: blur(clamp(1px, 0.125em, 4px));
  -webkit-backdrop-filter: blur(clamp(1px, 0.125em, 4px));
  transition: all var(--anim--hover-time) var(--anim--hover-ease);
  overflow: visible;
  min-height: 0;
  padding: 0;
  margin: 0;
  text-transform: none;
  letter-spacing: normal;
  font-family: inherit;
}

.glass-cta:hover {
  transform: scale(0.975);
  backdrop-filter: blur(0.01em);
  -webkit-backdrop-filter: blur(0.01em);
  box-shadow:
    inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
    inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
    0 0.15em 0.05em -0.1em rgba(0, 0, 0, 0.25),
    0 0 0.05em 0.1em inset rgba(255, 255, 255, 0.5),
    0 0 0 0 rgba(255, 255, 255, 1) !important;
}

.glass-cta span {
  position: relative;
  display: block;
  user-select: none;
  -webkit-user-select: none;
  font-family: "Inter", "Lato", system-ui, -apple-system, sans-serif;
  letter-spacing: -0.03em;
  font-weight: 600;
  font-size: 1em;
  color: rgba(40, 40, 40, 1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 0em 0.25em 0.05em rgba(0, 0, 0, 0.1);
  transition: all var(--anim--hover-time) var(--anim--hover-ease);
  padding-inline: 1.1em;
  padding-block: 0.95em;
  white-space: nowrap;
  text-align: center;
}

.glass-cta:hover span {
  text-shadow: 0.025em 0.025em 0.025em rgba(0, 0, 0, 0.12);
}

.glass-cta span::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  width: calc(100% - var(--border-width));
  height: calc(100% - var(--border-width));
  top: calc(0% + var(--border-width) / 2);
  left: calc(0% + var(--border-width) / 2);
  box-sizing: border-box;
  border-radius: 999vw;
  overflow: clip;
  background: linear-gradient(
    var(--gcta-angle-2),
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 40% 50%,
    rgba(255, 255, 255, 0) 55%
  );
  z-index: 3;
  mix-blend-mode: screen;
  pointer-events: none;
  background-size: 200% 200%;
  background-position: 0% 50%;
  background-repeat: no-repeat;
  transition:
    background-position calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease),
    --gcta-angle-2 calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease);
}

.glass-cta:hover span::after { background-position: 25% 50%; }
.glass-cta:active span::after { background-position: 50% 15%; --gcta-angle-2: -15deg; }

@media (hover: none) and (pointer: coarse) {
  .glass-cta span::after,
  .glass-cta:active span::after { --gcta-angle-2: -45deg; }
}

.glass-cta::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: 999vw;
  width: calc(100% + var(--border-width));
  height: calc(100% + var(--border-width));
  top: calc(0% - var(--border-width) / 2);
  left: calc(0% - var(--border-width) / 2);
  padding: var(--border-width);
  box-sizing: border-box;
  background:
    conic-gradient(
      from var(--gcta-angle-1) at 50% 50%,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0) 5% 40%,
      rgba(0, 0, 0, 0.5) 50%,
      rgba(0, 0, 0, 0) 60% 95%,
      rgba(0, 0, 0, 0.5)
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition:
    all var(--anim--hover-time) var(--anim--hover-ease),
    --gcta-angle-1 500ms ease;
  box-shadow: inset 0 0 0 calc(var(--border-width) / 2) rgba(255, 255, 255, 0.5);
}

.glass-cta:hover::after { --gcta-angle-1: -125deg; }
.glass-cta:active::after { --gcta-angle-1: -75deg; }

@media (hover: none) and (pointer: coarse) {
  .glass-cta::after,
  .glass-cta:hover::after,
  .glass-cta:active::after { --gcta-angle-1: -75deg; }
}

.glass-cta-wrap:has(.glass-cta:hover) .glass-cta-shadow {
  filter: blur(clamp(2px, 0.0625em, 6px));
  -webkit-filter: blur(clamp(2px, 0.0625em, 6px));
  transition: filter var(--anim--hover-time) var(--anim--hover-ease);
}

.glass-cta-wrap:has(.glass-cta:hover) .glass-cta-shadow::after {
  top: calc(var(--shadow-cuttoff-fix) - 0.875em);
  opacity: 1;
}

.glass-cta-wrap:has(.glass-cta:active) {
  transform: rotate3d(1, 0, 0, 22deg);
}

.glass-cta-wrap:has(.glass-cta:active) .glass-cta {
  box-shadow:
    inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
    inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
    0 0.125em 0.125em -0.125em rgba(0, 0, 0, 0.2),
    0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2),
    0 0.225em 0.05em 0 rgba(0, 0, 0, 0.05),
    0 0.25em 0 0 rgba(255, 255, 255, 0.75),
    inset 0 0.25em 0.05em 0 rgba(0, 0, 0, 0.15) !important;
}

.glass-cta-wrap:has(.glass-cta:active) .glass-cta-shadow {
  filter: blur(clamp(2px, 0.125em, 12px));
  -webkit-filter: blur(clamp(2px, 0.125em, 12px));
}

.glass-cta-wrap:has(.glass-cta:active) .glass-cta-shadow::after {
  top: calc(var(--shadow-cuttoff-fix) - 0.5em);
  opacity: 0.75;
}

.glass-cta-wrap:has(.glass-cta:active) .glass-cta span {
  text-shadow: 0.025em 0.25em 0.05em rgba(0, 0, 0, 0.12);
}

/* override any earlier .home-cta gradients/borders that might leak */
body.app-body .home-action-row .glass-cta,
body.app-body .home-action-row .glass-cta:focus,
body.app-body .home-action-row .glass-cta:focus-visible,
body.app-body .home-action-row .glass-cta:focus:not(:focus-visible) {
  outline: none !important;
}

/* ============================================================
   YELLOW PURGE — replace all yellow/gold gradients with platinum/blue.
   Keeps "Gold" tier semantically but skins it as platinum-silver.
   ============================================================ */

:root,
body.app-body,
body {
  --color-gold: #c8cfd8 !important;
  --plush-gold: #c8cfd8 !important;
  --apple-yellow: #0A84FF !important;
  --btn-3d-top: #ffffff !important;
  --btn-3d-mid: #5AB8FF !important;
}

/* Gold gradient swatches (#ffe7a0 -> #d7a956 -> #90631e) become PLATINUM. */
.command-gold,
body.app-body .command-icon.command-gold,
body.app-body [class*="-icon-gold"],
body.app-body .ios-icon-gold,
body.app-body .command-icon.command-gold svg,
body.app-body .ios-icon-gold svg {
  background: linear-gradient(180deg, #ffffff, #c8cfd8 55%, #6e7480) !important;
  background-image: linear-gradient(180deg, #ffffff, #c8cfd8 55%, #6e7480) !important;
  color: #1a1d22 !important;
}

.dock-gold,
.dock-chip.dock-gold,
body.app-body .tab-home .dock-chip.dock-gold,
body.app-body .tab-home .home-league-dock .dock-chip.dock-gold {
  background: linear-gradient(180deg, #ffffff, #c8cfd8 60%, #6e7480) !important;
  background-image: linear-gradient(180deg, #ffffff, #c8cfd8 60%, #6e7480) !important;
  color: #1a1d22 !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
}

/* League tier slider — Gold becomes Platinum, Bronze keeps bronze. */
.league-tier-slider[data-tier="gold"] {
  --tier-fill-a: #ffffff !important;
  --tier-fill-b: #c8cfd8 !important;
}

/* Reward medal Gold */
.lr-medal-gold {
  --medal-a: #ffffff !important;
  --medal-b: #c8cfd8 !important;
  filter: drop-shadow(0 10px 18px rgba(200, 207, 216, 0.35)) !important;
}

/* lg-gold border */
.lg-gold {
  border-color: rgba(200, 207, 216, 0.55) !important;
}

/* ls-gold (league select gold) */
.ls-gold,
.ls-gold::before {
  background-image: linear-gradient(180deg, #ffffff, #c8cfd8 60%, #6e7480) !important;
}

/* Apple-yellow buttons (#7DD3FF/#5AB8FF/#0055B3) -> app blue */
body.app-body .command-icon.command-gold,
body.app-body .ios-icon-gold {
  background: linear-gradient(180deg, #ffffff, #c8cfd8 55%, #6e7480) !important;
  background-image: linear-gradient(180deg, #ffffff, #c8cfd8 55%, #6e7480) !important;
}

/* Pay button (buy-sheet golden) -> app blue */
.buy-sheet-pay,
.buy-sheet-btn.buy-sheet-pay {
  background: linear-gradient(180deg, #5AB8FF, #0A84FF 55%, #003F87) !important;
  background-image: linear-gradient(180deg, #5AB8FF, #0A84FF 55%, #003F87) !important;
  color: #ffffff !important;
  border-color: rgba(90, 184, 255, 0.7) !important;
}

/* Half-orange splash buttons (#ffd35a 0 49%, #0A84FF 50% 100%) — make it cool */
[style*="ffd35a"],
[style*="FFD35A"] {
  background: linear-gradient(135deg, #ffffff 0 49%, #0A84FF 50% 100%) !important;
}

/* Catch-all: any remaining inline yellow stripe -> blue */
.command-icon.command-gold {
  background: linear-gradient(180deg, #ffffff, #c8cfd8 55%, #6e7480) !important;
  color: #1a1d22 !important;
}

/* Conic gradient ribbon (was orange-yellow-orange) */
.tier-ribbon-conic,
[style*="from 210deg, #ff6a52"] {
  background: conic-gradient(from 210deg, #5AB8FF, #ffffff, #5AB8FF) !important;
}

/* Direct hex overrides for any selector that still bleeds yellow */
*[style*="#5AB8FF" i],
*[style*="#7DD3FF" i],
*[style*="#5AB8FF" i],
*[style*="#7DD3FF" i],
*[style*="#0055B3" i],
*[style*="#0055B3" i],
*[style*="#FFE7A0" i],
*[style*="#D7A956" i] {
  background: linear-gradient(180deg, #5AB8FF, #0A84FF 50%, #003F87) !important;
  background-image: linear-gradient(180deg, #5AB8FF, #0A84FF 50%, #003F87) !important;
  color: #ffffff !important;
}

/* Cream paper background -> cool grey */
.note-paper,
[style*="f6efe1"] {
  background: linear-gradient(180deg, #f3f6fa, #d8dee8) !important;
  color: #1a1d22 !important;
}

/* If any element still has yellow text, fix it */
[style*="color: #5AB8FF" i],
[style*="color:#5AB8FF" i] {
  color: #5AB8FF !important;
}

/* Star/sparkle bullets often coloured gold — neutralize to white-blue */
.lr-step-coin,
.reward-coin,
.coin-yellow {
  background: radial-gradient(circle at 50% 35%, #ffffff, #5AB8FF 60%, #0A84FF) !important;
  color: #ffffff !important;
}

/* ============================================================
   v=102 FINAL DESIGN PASS — unified blue palette, 3D CTAs,
   smaller vote buttons, tier-slider hidden, claim=blue, etc.
   ============================================================ */

/* Hard reset of ALL leftover yellow/cream/green branding ----------------- */
:root, body.app-body, body {
  --accent: #0A84FF !important;
  --accent-soft: rgba(90,184,255,.16) !important;
  --accent-strong: #003F87 !important;
  --accent-line: rgba(90,184,255,.45) !important;
  --bg-base: #000000 !important;
  --bg-card: #0E1928 !important;
  --bg-card-2: #142537 !important;
  --line-soft: rgba(255,255,255,.08) !important;
  --line-blue: rgba(90,184,255,.32) !important;
}

/* 0) Black bg site-wide (under header + main) ---------------------------- */
html, body, body.app-body, body.app-body main.app-main,
header, header.app-header, .app-header {
  background: #000000 !important;
  background-color: #000000 !important;
}
body.app-body main.app-main { background-image: none !important; }

/* 1) Trophy in Quick Actions: same blue icon as the rest ----------------- */
body.app-body .command-icon.command-gold,
.command-icon.command-gold {
  background: linear-gradient(180deg, #5AB8FF, #0A84FF 55%, #003F87) !important;
  background-image: linear-gradient(180deg, #5AB8FF, #0A84FF 55%, #003F87) !important;
  border: 2px solid #5AB8FF !important;
  box-shadow:
    0 0 0 1px rgba(90,184,255,.65),
    0 6px 18px rgba(10,132,255,.32) !important;
  color: #ffffff !important;
}
body.app-body .command-icon.command-gold svg,
.command-icon.command-gold svg,
.command-icon.command-gold svg use {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* 2) Season Rewards header — gorgeous blue hero block --------------------- */
.tab-rewards .rewards-shell { padding-top: 6px; }
.tab-rewards .rewards-head {
  position: relative;
  padding: 24px 22px 26px;
  margin: 8px 12px 22px;
  border-radius: 28px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(90,184,255,.32), transparent 60%),
    radial-gradient(120% 120% at 100% 100%, rgba(0,63,135,.5), transparent 60%),
    linear-gradient(180deg, #142537 0%, #0A1A2C 100%) !important;
  border: 1px solid rgba(90,184,255,.4) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 12px 32px rgba(0,0,0,.45) !important;
  overflow: hidden;
  isolation: isolate;
}
.tab-rewards .rewards-head::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, transparent 55%, rgba(255,255,255,.08) 70%, transparent 85%),
    radial-gradient(60% 80% at 90% -10%, rgba(90,184,255,.35), transparent 70%);
  pointer-events: none;
}
.tab-rewards .rewards-head .page-kicker {
  color: #5AB8FF !important;
  font-size: 11px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  margin: 0 0 8px !important;
  font-weight: 700;
}
.tab-rewards .rewards-head .section-h,
.tab-rewards .rewards-head h1 {
  color: #ffffff !important;
  font-family: 'Bagel Fat One', 'Lato', sans-serif !important;
  font-size: clamp(24px, 7vw, 36px) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  margin: 0 !important;
  letter-spacing: -.01em !important;
  text-shadow: 0 2px 14px rgba(0,63,135,.55);
}

/* 3) Vote buttons — smaller + identical press, edges align with progress -- */
.widget-progress {
  margin: 10px 14px !important;
  height: 6px !important;
  border-radius: 999px !important;
}
.arena-card .widget-cta,
.widget-cta {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin: 10px 14px 14px !important;
  padding: 0 !important;
}
.widget-vote-btn,
button.widget-vote-btn,
button.widget-vote-a,
button.widget-vote-b,
.widget-vote-a, .widget-vote-b {
  all: unset !important;
  cursor: pointer;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  font-family: 'Bagel Fat One', 'Lato', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, #5AB8FF, #0A84FF 60%, #003F87) !important;
  background-image: linear-gradient(180deg, #5AB8FF, #0A84FF 60%, #003F87) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(90,184,255,.6) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 0 rgba(0,0,0,.28),
    0 6px 14px rgba(0,63,135,.4),
    0 0 0 1px rgba(90,184,255,.32) !important;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease !important;
  text-align: center !important;
  margin: 0 !important;
}
.widget-vote-btn:hover { filter: brightness(1.06); }
.widget-vote-btn:active,
button.widget-vote-btn:active,
button.widget-vote-a:active,
button.widget-vote-b:active,
.widget-vote-a:active,
.widget-vote-b:active {
  transform: translateY(2px) !important;
  box-shadow:
    inset 0 2px 0 rgba(0,0,0,.28),
    inset 0 -1px 0 rgba(255,255,255,.18),
    0 2px 6px rgba(0,63,135,.5) !important;
  filter: brightness(.95) !important;
}

/* 4) Hide leftover .glass-cta wrappers, restore 3D Купить/Открыть ---------- */
.glass-cta-wrap, .glass-cta-shadow, .glass-cta { display: none !important; }
.home-action-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin-top: 18px !important;
}
.home-action-row .home-cta,
.home-action-row .home-cta-3d {
  all: unset;
  cursor: pointer;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100%;
  min-height: 56px;
  padding: 12px 14px !important;
  border-radius: 18px !important;
  position: relative;
  font-family: 'Bagel Fat One', 'Lato', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: -.005em !important;
  color: #ffffff !important;
  text-transform: none !important;
  text-align: center !important;
  background: linear-gradient(180deg, #5AB8FF, #0A84FF 55%, #003F87) !important;
  background-image: linear-gradient(180deg, #5AB8FF, #0A84FF 55%, #003F87) !important;
  border: 1px solid rgba(90,184,255,.6) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -3px 0 rgba(0,0,0,.28),
    0 8px 18px rgba(0,63,135,.45),
    0 0 0 1px rgba(90,184,255,.32) !important;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease !important;
}
.home-action-row .home-cta-secondary {
  background: linear-gradient(180deg, #1a2a40, #0e1a2c 55%, #050b16) !important;
  background-image: linear-gradient(180deg, #1a2a40, #0e1a2c 55%, #050b16) !important;
  border-color: rgba(90,184,255,.45) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -3px 0 rgba(0,0,0,.5),
    0 8px 18px rgba(0,0,0,.55),
    0 0 0 1px rgba(90,184,255,.25) !important;
}
.home-action-row .home-cta:active,
.home-action-row .home-cta-3d:active {
  transform: translateY(2px) !important;
  box-shadow:
    inset 0 2px 0 rgba(0,0,0,.32),
    inset 0 -1px 0 rgba(255,255,255,.18),
    0 2px 8px rgba(0,63,135,.5) !important;
  filter: brightness(.95) !important;
}
.home-action-row .home-cta .home-cta-ico,
.home-action-row .home-cta > span:first-child {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.home-action-row .home-cta svg {
  width: 22px; height: 22px;
  fill: #ffffff !important;
  color: #ffffff !important;
}
.home-action-row .home-cta b {
  display: inline-block;
  line-height: 1 !important;
  font-family: inherit !important;
  font-weight: 700 !important;
}

/* 5) Hide league tier slider entirely ------------------------------------- */
.league-tier-slider,
[data-league-tier-slider],
.league-stack-section .league-tier-slider {
  display: none !important;
}

/* 6) Bottom nav: WHITE pill with BLACK icon for active -------------------- */
.app-bnav .bn-btn { transition: background .2s ease, color .2s ease; }
.app-bnav .bn-btn.is-active,
.app-bnav .bn-btn[aria-current="true"],
nav.app-bnav .bn-btn.is-active {
  background: linear-gradient(180deg, #ffffff, #e6ebf2) !important;
  background-image: linear-gradient(180deg, #ffffff, #e6ebf2) !important;
  color: #0a0c12 !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -2px 0 rgba(0,0,0,.06),
    0 4px 14px rgba(255,255,255,.18) !important;
  border: 0 !important;
}
.app-bnav .bn-btn.is-active::before,
.app-bnav .bn-btn.is-active::after { background: transparent !important; }
.app-bnav .bn-btn.is-active .bn-icon,
.app-bnav .bn-btn.is-active .bn-icon svg,
.app-bnav .bn-btn.is-active .bn-icon svg path,
.app-bnav .bn-btn.is-active .bn-icon svg use,
.app-bnav .bn-btn.is-active .bn-l,
.app-bnav .bn-btn.is-active span {
  color: #0a0c12 !important;
  fill: #0a0c12 !important;
  stroke: #0a0c12 !important;
}

/* 7) Shop / balance numbers — never yellow, always blue ------------------- */
.tab-shop strong,
.shop-status-card strong,
.shop-choice-card strong,
.shop-pass-strip span,
strong[data-shop-owned],
strong[data-shop-ready],
strong[data-shop-wallet-status],
strong[data-home-balance],
strong[data-league-balance],
strong[data-profile-ton],
strong[data-home-pool],
strong[data-league-pool],
.metric strong,
.league-ledger-item strong {
  color: #5AB8FF !important;
  background: none !important;
  background-image: none !important;
  -webkit-text-fill-color: #5AB8FF !important;
  text-shadow: 0 0 12px rgba(10,132,255,.25) !important;
}
.shop-pass-strip { color: #5AB8FF !important; }

/* 8) Hide pair next/prev pagination buttons ------------------------------- */
.seg-control[data-match-seg],
[data-vs-prev],
[data-vs-next],
button[data-vs-prev],
button[data-vs-next] {
  display: none !important;
}

/* 9) Claimed reward — BLUE (not green) ------------------------------------ */
.reward-step.is-claimed,
.reward-node.is-claimed,
body.app-body .tab-rewards .reward-step.is-claimed,
body.app-body .tab-rewards .reward-node.is-claimed {
  background: linear-gradient(180deg, rgba(90,184,255,.18), rgba(10,132,255,.18)) !important;
  background-image: linear-gradient(180deg, rgba(90,184,255,.18), rgba(10,132,255,.18)) !important;
  border-color: rgba(90,184,255,.55) !important;
  color: #ffffff !important;
  filter: none !important;
}
.reward-step.is-claimed .reward-index,
.reward-node.is-claimed .reward-index,
body.app-body .tab-rewards .reward-step.is-claimed .reward-index,
body.app-body .tab-rewards .reward-node.is-claimed .reward-index,
body.app-body .reward-step.is-claimed .reward-index {
  background: linear-gradient(180deg, #5AB8FF, #0A84FF 55%, #003F87) !important;
  color: #ffffff !important;
  border-color: rgba(90,184,255,.6) !important;
}
.reward-step.is-claimed::before,
.reward-step.is-claimed::after { background: rgba(90,184,255,.4) !important; }
.claimed-pill, .is-claimed-pill, .reward-claimed-tag,
[class*="claim"][class*="success"],
.claim-success {
  background: rgba(10,132,255,.22) !important;
  color: #5AB8FF !important;
  border-color: rgba(90,184,255,.55) !important;
}

/* 10) Gift / decorative art — blue tint ----------------------------------- */
.tab-rewards .reward-coin,
.tab-rewards [class*="-coin"],
.tab-rewards [class*="-medal"]:not(.lr-medal-bronze) {
  background: radial-gradient(circle at 50% 35%, #ffffff, #5AB8FF 60%, #0A84FF) !important;
  color: #ffffff !important;
  border-color: rgba(90,184,255,.6) !important;
}
.bn-icon svg use[href="#i-gift"],
svg use[href="#i-gift"] { color: inherit; }

/* 11) Referral header — bigger ------------------------------------------- */
.tab-refs .display-title,
body.app-body .tab-refs .display-title,
.refs-hero .display-title,
#refs-title {
  font-size: clamp(36px, 9.5vw, 56px) !important;
  line-height: 1.02 !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
  font-family: 'Bagel Fat One', 'Lato', sans-serif !important;
}

/* 12) Leagues blocks blend with bg ---------------------------------------- */
body.app-body .tab-leagues .league-bracket,
body.app-body .tab-leagues .league-stack-section,
body.app-body .tab-leagues .league-rules,
body.app-body .tab-leagues .league-rules article,
body.app-body .tab-leagues .league-map,
body.app-body .tab-leagues .leagues-stack,
body.app-body .tab-leagues .league-view-toggle,
body.app-body .tab-leagues .league-hero {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.app-body .tab-leagues .league-rules article {
  border: 1px solid rgba(90,184,255,.18) !important;
}
body.app-body .tab-leagues .league-view-toggle button.is-active {
  background: linear-gradient(180deg, #5AB8FF, #0A84FF 55%, #003F87) !important;
  color: #ffffff !important;
  border-color: rgba(90,184,255,.6) !important;
}

/* 13) Unified palette for sliding sheets / popups ------------------------- */
.buy-sheet-card,
.pass-modal-card,
.bottom-sheet-card,
.modal-card,
.sheet-card,
[class*="-sheet-card"],
[class*="-modal-card"],
.tc-modal,
.tc-modal__container {
  background: linear-gradient(180deg, #142537 0%, #0A1A2C 100%) !important;
  background-image: linear-gradient(180deg, #142537 0%, #0A1A2C 100%) !important;
  border: 1px solid rgba(90,184,255,.32) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 -8px 30px rgba(0,0,0,.6) !important;
}
.buy-sheet-kicker,
.pass-modal-kicker,
.modal-kicker,
[class*="-sheet"] [class*="-kicker"] {
  color: #5AB8FF !important;
}
.buy-sheet-name, .buy-sheet-balance,
.pass-modal-name, .pass-modal-balance,
.modal-title, .modal-name,
[class*="-sheet-name"], [class*="-sheet-balance"] {
  color: #ffffff !important;
}
.buy-sheet-price { color: #5AB8FF !important; }
.buy-sheet-close { color: rgba(255,255,255,.7) !important; }

/* 14) Pay button (gold leftover) в†’ blue, NFT button stays night-blue ----- */
.buy-sheet-pay,
.buy-sheet-btn.buy-sheet-pay {
  background: linear-gradient(180deg, #5AB8FF, #0A84FF 55%, #003F87) !important;
  color: #ffffff !important;
  border-color: rgba(90,184,255,.6) !important;
}
.buy-sheet-nft,
.buy-sheet-btn.buy-sheet-nft {
  background: linear-gradient(180deg, #1a2a40, #0e1a2c) !important;
  color: #ffffff !important;
  border-color: rgba(90,184,255,.4) !important;
}

/* 15) Page hero blocks (shop/leagues/refs/home): black-blue family -------- */
body.app-body .page-hero,
body.app-body .home-hero,
body.app-body .shop-hero,
body.app-body .league-hero,
body.app-body .refs-hero {
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(90,184,255,.14), transparent 65%),
    linear-gradient(180deg, #0E1928 0%, #050b16 100%) !important;
  border: 1px solid rgba(90,184,255,.24) !important;
}

/* =================================================================
 * v102 — User-requested cleanup (2026-05-01):
 *   - Hide home buttons "Купить голоса" / "Открыть лиги" (don't fit on phone)
 *   - Hide Bronze/Silver/Gold league dock chips
 *   - Hide arena-card vote buttons (don't fit on phone)
 *   - Make claimed reward badge BLUE
 *   - Hide empty glass placeholder ("квадратная линза") on refs tab when
 *     the lottie sticker fails to load
 * ================================================================= */

/* NOTE: home-action-row stays VISIBLE — v103 (b) below already makes the
   two buttons compact (46px / 12px font) so both fit on a phone. */
body.app-body .home-league-dock,
body.app-body .arena-card .widget-cta,
body.app-body .widget-vote-btn {
  display: none !important;
}

/* "Claimed" badge text on already-claimed rewards: bright blue */
body.app-body .reward-node.is-claimed strong,
body.app-body .reward-step.is-claimed .reward-node.is-claimed strong,
body.app-body article.reward-step.is-claimed .reward-node.is-claimed > strong {
  color: #1B7CFF !important;
  text-shadow: 0 0 12px rgba(27,124,255,0.45) !important;
  font-weight: 800 !important;
}

/* Quadratic glass-frame on refs tab — the lottie sticker container can
   render as an empty rounded box when the JSON file is missing or the
   lottie player hasn't initialised. Hide it: the page-hero copy alone
   is enough. */
body.app-body .tab-refs .refs-sticker:empty,
body.app-body .tab-refs .refs-illustration:empty,
body.app-body .tab-refs .lottie-sticker:empty {
  display: none !important;
}



/* ============================================================
   v=103 — fit-fix + revert rewards header + hide leagues
   sub-blocks + flat home blocks + slim white bottom nav.
   ============================================================ */

/* (a) REVERT Rewards header to default — only blue claimed remains. */
.tab-rewards .rewards-shell { padding-top: 0 !important; }
.tab-rewards .rewards-head {
  position: static !important;
  padding: 12px 16px !important;
  margin: 0 0 10px !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  isolation: auto !important;
}
.tab-rewards .rewards-head::before,
.tab-rewards .rewards-head::after { display: none !important; content: none !important; }
.tab-rewards .rewards-head .page-kicker {
  color: rgba(255,255,255,.55) !important;
  font-size: 12px !important;
  letter-spacing: .12em !important;
  margin: 0 0 4px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
}
.tab-rewards .rewards-head .section-h,
.tab-rewards .rewards-head h1 {
  color: #ffffff !important;
  font-family: 'Lato', system-ui, sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  line-height: 1.2 !important;
}

/* (b) Buttons MUST FIT on phone. */
.home-action-row {
  gap: 8px !important;
  margin-top: 14px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  width: 100% !important;
}
.home-action-row .home-cta,
.home-action-row .home-cta-3d {
  min-height: 46px !important;
  height: 46px !important;
  padding: 8px 8px !important;
  font-size: 12px !important;
  gap: 6px !important;
  letter-spacing: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
.home-action-row .home-cta .home-cta-ico,
.home-action-row .home-cta > span:first-child {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 auto !important;
}
.home-action-row .home-cta svg {
  width: 16px !important;
  height: 16px !important;
}
.home-action-row .home-cta b {
  font-size: 12px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  font-weight: 700 !important;
}

/* Vote buttons — smaller, fit two-up with progress bar */
.widget-vote-btn,
button.widget-vote-btn,
button.widget-vote-a,
button.widget-vote-b,
.widget-vote-a, .widget-vote-b {
  height: 34px !important;
  min-height: 34px !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  border-radius: 10px !important;
  padding: 0 6px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
.arena-card .widget-cta,
.widget-cta {
  gap: 6px !important;
  margin: 8px 14px 12px !important;
}

/* (c) Hide league sub-controls completely */
.league-view-toggle,
[data-league-view-toggle],
.league-rules,
.league-stack-section,
.league-tier-slider,
[data-league-tier-slider] {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* (d) HOME page: blocks blend with bg, no borders, no card chrome */
body.app-body .tab-home .metric-strip,
body.app-body .tab-home .metric-strip > .metric,
body.app-body .tab-home .metric,
body.app-body .tab-home .story-card,
body.app-body .tab-home .story-grid,
body.app-body .tab-home .story-grid .story-card,
body.app-body .tab-home .arena-card,
body.app-body .tab-home .arena-section,
body.app-body .tab-home .command-board,
body.app-body .tab-home .command-list,
body.app-body .tab-home .command-list .command-row,
body.app-body .tab-home .home-league-dock,
body.app-body .tab-home .dock-chip,
body.app-body .tab-home .page-hero,
body.app-body .tab-home .home-hero,
body.app-body .tab-home .home-editorial,
body.app-body .tab-home .hero-copy {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.app-body .tab-home .metric { padding: 8px 10px !important; }
body.app-body .tab-home .metric strong { color: #5AB8FF !important; }

/* (e) HEADER fully blends — no chrome, just black */
body.app-body header.app-header,
body.app-body .app-header,
header.app-header,
.app-header {
  background: transparent !important;
  background-image: none !important;
  background-color: #000000 !important;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* (f) Bottom nav: white pill across the WHOLE active button, icon black */
.app-bnav .bn-btn.is-active {
  background: #ffffff !important;
  background-image: none !important;
  border-radius: 16px !important;
  padding: 6px 10px !important;
  border: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 4px 12px rgba(255,255,255,.18) !important;
}
.app-bnav .bn-btn.is-active::before,
.app-bnav .bn-btn.is-active::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
}
.app-bnav .bn-btn.is-active,
.app-bnav .bn-btn.is-active * {
  color: #000000 !important;
}
.app-bnav .bn-btn.is-active .bn-icon svg,
.app-bnav .bn-btn.is-active .bn-icon svg * {
  fill: #000000 !important;
  stroke: #000000 !important;
  color: #000000 !important;
}

/* Kill any global ::before/::after slider rail under bottom nav */
.app-bnav::before, .app-bnav::after,
.app-bnav .nav-indicator, .app-bnav .nav-pill,
.bn-slider, .bn-indicator {
  display: none !important;
  background: transparent !important;
  content: none !important;
}

/* (g) CLAIMED reward = blue (re-stated cleanly, the only rewards rule) */
body.app-body .reward-step.is-claimed,
body.app-body .reward-node.is-claimed,
.reward-step.is-claimed,
.reward-node.is-claimed {
  background: linear-gradient(180deg, rgba(90,184,255,.16), rgba(10,132,255,.16)) !important;
  border-color: rgba(90,184,255,.5) !important;
  color: #ffffff !important;
  filter: none !important;
}
body.app-body .reward-step.is-claimed .reward-index,
body.app-body .reward-node.is-claimed .reward-index,
.reward-step.is-claimed .reward-index,
.reward-node.is-claimed .reward-index {
  background: linear-gradient(180deg, #5AB8FF, #0A84FF 55%, #003F87) !important;
  color: #ffffff !important;
  border-color: rgba(90,184,255,.6) !important;
}

/* (h) Page hero in HOME: kill v=102 hero gradient, totally flat */
body.app-body .tab-home .page-hero,
body.app-body .tab-home .home-hero {
  background: transparent !important;
  border: 0 !important;
  padding: 16px 14px !important;
}

/* ============================================================
   v=104 — KILL ALL FRAMES / STRIPES across every tab.
   ============================================================ */

/* Universal: any card/article/section inside any tab loses border + shadow + bg-card */
body.app-body .tab article,
body.app-body .tab section,
body.app-body .tab .arena-card,
body.app-body .tab .widget,
body.app-body .tab .bracket-match,
body.app-body .tab .bracket-team,
body.app-body .tab .bracket-pair,
body.app-body .tab .bracket-row,
body.app-body .tab .bracket-round,
body.app-body .tab [class*="bracket"],
body.app-body .tab .league-card,
body.app-body .tab .league-rules article,
body.app-body .tab .shop-status-card,
body.app-body .tab .shop-included article,
body.app-body .tab .shop-choice-card,
body.app-body .tab .shop-grid > *,
body.app-body .tab .refs-card,
body.app-body .tab .refs-stat,
body.app-body .tab .refs-list-section,
body.app-body .tab .refs-list li,
body.app-body .tab .reward-step,
body.app-body .tab .reward-node,
body.app-body .tab .reward-lanes,
body.app-body .tab .profile-hero,
body.app-body .tab .profile-scoreboard article,
body.app-body .tab .profile-cashbacks,
body.app-body .tab .cashback-list > *,
body.app-body .tab .metric,
body.app-body .tab .metric-strip,
body.app-body .tab .story-card,
body.app-body .tab .command-row,
body.app-body .tab .command-board,
body.app-body .tab .command-list,
body.app-body .tab .home-league-dock,
body.app-body .tab .dock-chip,
body.app-body .tab .page-hero,
body.app-body .tab .home-hero,
body.app-body .tab .league-hero,
body.app-body .tab .shop-hero,
body.app-body .tab .refs-hero,
body.app-body .tab .arena-section,
body.app-body .tab .seg-control,
body.app-body .tab .league-bracket,
body.app-body .tab .league-bracket > *,
body.app-body .tab .leagues-stack,
body.app-body .tab .leagues-stack > * {
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Kill ALL section/article ::before/::after dividers on tab content */
body.app-body .tab article::before,
body.app-body .tab article::after,
body.app-body .tab section::before,
body.app-body .tab section::after,
body.app-body .tab .bracket-match::before,
body.app-body .tab .bracket-match::after,
body.app-body .tab .reward-step::before,
body.app-body .tab .reward-step::after,
body.app-body .tab .reward-lanes::before,
body.app-body .tab .reward-lanes::after,
body.app-body .tab .reward-path-line,
body.app-body .tab .league-bracket::before,
body.app-body .tab .league-bracket::after,
body.app-body .tab .league-bracket > *::before,
body.app-body .tab .league-bracket > *::after,
body.app-body .tab .arena-card::before,
body.app-body .tab .arena-card::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Header: kill its frame too — was causing the top hairline */
body.app-body .app-header,
body.app-body header.app-header,
header.app-header,
.app-header {
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background: #000000 !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Outer page wrapper — no frames, no rim */
body.app-body main.app-main,
body.app-body .app-main,
main.app-main,
.app-main {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: #000000 !important;
  background-image: none !important;
}

/* Bracket-match border that was forced — explicit override (was the
   "stripe" outline visible around match cards on the leagues tab) */
body.app-body .bracket-match,
body.app-body .tab-leagues .bracket-match,
.bracket-match {
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Hero gradients in v=102 page-hero rule — kill them too */
body.app-body .page-hero,
body.app-body .home-hero,
body.app-body .shop-hero,
body.app-body .league-hero,
body.app-body .refs-hero {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Any leftover divider line between tab sub-sections */
body.app-body .tab > section + section,
body.app-body .tab section[class*="-section"] {
  border-top: 0 !important;
}

/* ============================================================
   v=105 — match app bg to home image bg, restore home blocks,
   blend bottom nav, revert Rewards header/state to original,
   keep ONLY: blue "Claimed" text.
   ============================================================ */

/* (1) App bg matches the home image bg (#0E0F12 — image-mono-bg). */
html, body, body.app-body,
body.app-body main.app-main, .app-main,
header.app-header, .app-header,
body.app-body .tab,
body.app-body .tab-home,
body.app-body .tab-shop,
body.app-body .tab-leagues,
body.app-body .tab-refs,
body.app-body .tab-rewards,
body.app-body .tab-profile,
body.app-body .tab-admin {
  background: #0E0F12 !important;
  background-color: #0E0F12 !important;
  background-image: none !important;
}

/* (2) Bottom nav blends — same color as rewards card, no chrome */
body.app-body .app-bnav,
nav.app-bnav,
.app-bnav {
  background: #0E0F12 !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* (3) Restore HOME tab BLOCKS + borders (undo v=103 / v=104 flat) */
body.app-body .tab-home .metric-strip {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  margin: 12px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
body.app-body .tab-home .metric-strip .metric,
body.app-body .tab-home .metric {
  background:
    linear-gradient(180deg, rgba(35,36,38,0.72), rgba(6,6,7,0.84)) !important;
  background-image:
    linear-gradient(180deg, rgba(35,36,38,0.72), rgba(6,6,7,0.84)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  padding: 12px 10px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
body.app-body .tab-home .metric strong {
  color: #5AB8FF !important;
  font-size: 22px !important;
  font-weight: 800 !important;
}
body.app-body .tab-home .metric span {
  color: rgba(255,255,255,0.55) !important;
  font-size: 11px !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  text-align: center;
}
body.app-body .tab-home .story-card,
body.app-body .tab-home .story-grid > .story-card,
body.app-body .tab-home .arena-card,
body.app-body .tab-home #active-vote-card,
body.app-body .tab-home .command-row {
  background:
    linear-gradient(180deg, rgba(35,36,38,0.72), rgba(6,6,7,0.84)) !important;
  background-image:
    linear-gradient(180deg, rgba(35,36,38,0.72), rgba(6,6,7,0.84)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* (4) REVERT REWARDS HEADER — clean default look (no v=102 hero block) */
body.app-body .tab-rewards .rewards-head,
.tab-rewards .rewards-head {
  position: static !important;
  padding: 12px 16px !important;
  margin: 0 0 10px !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  isolation: auto !important;
}
body.app-body .tab-rewards .rewards-head::before,
body.app-body .tab-rewards .rewards-head::after,
.tab-rewards .rewards-head::before,
.tab-rewards .rewards-head::after {
  display: none !important;
  content: none !important;
}
body.app-body .tab-rewards .rewards-head .page-kicker,
.tab-rewards .rewards-head .page-kicker {
  color: rgba(255,255,255,0.5) !important;
  font-size: 12px !important;
  letter-spacing: .12em !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  margin: 0 0 4px !important;
  text-shadow: none !important;
  font-family: inherit !important;
}
body.app-body .tab-rewards .rewards-head .section-h,
body.app-body .tab-rewards .rewards-head h1,
.tab-rewards .rewards-head .section-h,
.tab-rewards .rewards-head h1 {
  color: #ffffff !important;
  font-family: 'Lato', system-ui, sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  line-height: 1.2 !important;
}

/* (5) REVERT REWARD STEPS — no blue gradient on .is-claimed.
   Use the SAME background/border as non-claimed nodes. */
body.app-body .tab-rewards .reward-step.is-claimed,
body.app-body .reward-step.is-claimed,
.reward-step.is-claimed,
body.app-body .tab-rewards .reward-node.is-claimed,
body.app-body .reward-node.is-claimed,
.reward-node.is-claimed {
  background:
    radial-gradient(circle at 86% 14%, rgba(95,182,255,0.1), transparent 34%),
    linear-gradient(180deg, rgba(35,36,38,0.72), rgba(6,6,7,0.84)) !important;
  background-image:
    radial-gradient(circle at 86% 14%, rgba(95,182,255,0.1), transparent 34%),
    linear-gradient(180deg, rgba(35,36,38,0.72), rgba(6,6,7,0.84)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow:
    0 14px 28px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
  color: #f5f5f2 !important;
  filter: none !important;
}
body.app-body .tab-rewards .reward-node.is-available,
body.app-body .tab-rewards .reward-node.is-claimed {
  border-color: rgba(95,182,255,0.42) !important;
}

/* Revert v=102 .reward-index blue gradient on claimed — keep original look */
body.app-body .reward-step.is-claimed .reward-index,
body.app-body .reward-node.is-claimed .reward-index,
body.app-body .tab-rewards .reward-step.is-claimed .reward-index,
body.app-body .tab-rewards .reward-node.is-claimed .reward-index,
.reward-step.is-claimed .reward-index,
.reward-node.is-claimed .reward-index {
  background: revert !important;
  background-image: revert !important;
  color: revert !important;
  border: revert !important;
  border-color: revert !important;
}

/* (6) THE ONLY claimed-styling rule kept: "Claimed" TEXT IS BLUE */
.reward-node.is-claimed strong,
body.app-body .tab-rewards .reward-node.is-claimed strong,
.reward-step.is-claimed .reward-node.is-claimed strong {
  color: #5AB8FF !important;
  -webkit-text-fill-color: #5AB8FF !important;
}

/* ============================================================
   v=106 — SAMPLED image bg = #050505. Use exactly that color
   everywhere (replaces v=105 #0E0F12 guess).
   ============================================================ */
html, body, body.app-body,
body.app-body main.app-main, .app-main,
header.app-header, .app-header,
body.app-body .tab,
body.app-body .tab-home,
body.app-body .tab-shop,
body.app-body .tab-leagues,
body.app-body .tab-refs,
body.app-body .tab-rewards,
body.app-body .tab-profile,
body.app-body .tab-admin,
body.app-body .app-bnav,
nav.app-bnav,
.app-bnav {
  background: #050505 !important;
  background-color: #050505 !important;
  background-image: none !important;
}

/* ============================================================
   v=107 — bottom-nav pure-white pill, restore Quick Actions,
   redo Rewards from scratch (no borders, no blue outlines, no
   blue ring on level), keep ONLY blue "Claimed" text.
   ============================================================ */

/* (A) BOTTOM NAV — pure white pill on selected, black icon, nothing else */
body.app-body .app-bnav .bn-btn,
.app-bnav .bn-btn {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: rgba(255,255,255,0.55) !important;
}
body.app-body .app-bnav .bn-btn.is-active,
nav.app-bnav .bn-btn.is-active,
.app-bnav .bn-btn.is-active {
  background: #ffffff !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  color: #000000 !important;
  padding: 8px 12px !important;
}
body.app-body .app-bnav .bn-btn.is-active::before,
body.app-body .app-bnav .bn-btn.is-active::after,
.app-bnav .bn-btn.is-active::before,
.app-bnav .bn-btn.is-active::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
}
body.app-body .app-bnav .bn-btn.is-active,
body.app-body .app-bnav .bn-btn.is-active *,
.app-bnav .bn-btn.is-active,
.app-bnav .bn-btn.is-active * {
  color: #000000 !important;
  fill: #000000 !important;
  stroke: #000000 !important;
}
body.app-body .app-bnav .bn-btn.is-active svg,
body.app-body .app-bnav .bn-btn.is-active svg path,
body.app-body .app-bnav .bn-btn.is-active svg use,
.app-bnav .bn-btn.is-active svg,
.app-bnav .bn-btn.is-active svg path,
.app-bnav .bn-btn.is-active svg use {
  fill: #000000 !important;
  stroke: #000000 !important;
  color: #000000 !important;
}

/* (B) RESTORE Quick Actions — visible card rows with bg, no border */
body.app-body .tab-home .command-board,
body.app-body .command-board {
  background: transparent !important;
  border: 0 !important;
  margin: 16px 0 !important;
  padding: 0 !important;
}
body.app-body .tab-home .command-board > h2,
body.app-body .command-board > h2 {
  color: rgba(255,255,255,0.7) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin: 0 0 10px !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}
body.app-body .tab-home .command-list,
body.app-body .command-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  background: transparent !important;
  border: 0 !important;
}
body.app-body .tab-home .command-list .command-row,
body.app-body .command-list .command-row,
body.app-body .command-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 12px 14px !important;
  background: linear-gradient(180deg, rgba(35,36,38,0.72), rgba(6,6,7,0.84)) !important;
  background-image: linear-gradient(180deg, rgba(35,36,38,0.72), rgba(6,6,7,0.84)) !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
  color: #ffffff !important;
  text-align: left !important;
  cursor: pointer;
}
body.app-body .command-row .command-icon {
  flex: 0 0 auto !important;
  width: 36px !important;
  height: 36px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 10px !important;
}
body.app-body .command-row .command-icon svg {
  width: 18px !important;
  height: 18px !important;
  color: #ffffff !important;
  fill: #ffffff !important;
}
body.app-body .command-row .command-copy {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 2px !important;
}
body.app-body .command-row .command-copy strong {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
body.app-body .command-row .command-copy small {
  color: rgba(255,255,255,0.55) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}
body.app-body .command-row .command-chevron {
  flex: 0 0 auto !important;
  color: rgba(255,255,255,0.3) !important;
}
body.app-body .command-row .command-chevron svg {
  width: 16px !important;
  height: 16px !important;
}

/* (C) REWARDS FROM SCRATCH — flat, no borders, no blue rings */
body.app-body .tab-rewards .rewards-shell,
.tab-rewards .rewards-shell {
  padding: 0 12px 16px !important;
  background: transparent !important;
  border: 0 !important;
}
body.app-body .tab-rewards .reward-lanes,
.tab-rewards .reward-lanes {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.app-body .tab-rewards .reward-step,
body.app-body .reward-step,
.reward-step {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Reward nodes (Free + Pass) — solid dark, NO border, NO outline */
body.app-body .tab-rewards .reward-node,
body.app-body .reward-node,
body.app-body .reward-step .reward-node,
.reward-node,
.reward-step .reward-node,
body.app-body .tab-rewards .reward-step .reward-node.is-claimed,
body.app-body .tab-rewards .reward-step .reward-node.is-available,
body.app-body .tab-rewards .reward-step .reward-node.is-unavailable,
body.app-body .tab-rewards .reward-node.is-claimed,
body.app-body .tab-rewards .reward-node.is-available,
body.app-body .tab-rewards .reward-node.is-unavailable,
.reward-node.is-claimed,
.reward-node.is-available,
.reward-node.is-unavailable {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 14px 16px !important;
  min-height: 76px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(35,36,38,0.72), rgba(6,6,7,0.84)) !important;
  background-image: linear-gradient(180deg, rgba(35,36,38,0.72), rgba(6,6,7,0.84)) !important;
  border: 0 !important;
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow: none !important;
  color: rgba(255,255,255,0.9) !important;
  filter: none !important;
}
body.app-body .reward-node span,
.reward-node span {
  font-size: 11px !important;
  color: rgba(255,255,255,0.5) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-weight: 500 !important;
}
body.app-body .reward-node strong,
.reward-node strong {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}
body.app-body .reward-node.is-unavailable,
.reward-node.is-unavailable {
  opacity: 0.45 !important;
}
body.app-body .reward-node .reward-art,
.reward-node .reward-art {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* LEVEL circle — NO blue ring, NO blue gradient. Plain white circle, black number. */
body.app-body .tab-rewards .reward-index,
body.app-body .reward-step .reward-index,
body.app-body .reward-index,
.reward-index,
body.app-body .reward-step.is-claimed .reward-index,
body.app-body .reward-step.is-reached .reward-index,
body.app-body .reward-node.is-claimed .reward-index,
.reward-step.is-claimed .reward-index,
.reward-node.is-claimed .reward-index {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  color: #000000 !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  font-family: 'Lato', system-ui, sans-serif !important;
  display: grid !important;
  place-items: center !important;
  text-shadow: none !important;
  filter: none !important;
}

/* The ONLY blue rule for rewards: "Claimed" text */
body.app-body .reward-node.is-claimed strong,
.reward-node.is-claimed strong,
body.app-body .tab-rewards .reward-node.is-claimed strong {
  color: #5AB8FF !important;
  -webkit-text-fill-color: #5AB8FF !important;
}

/* Rewards header — kept simple from v=105 (no hero block) */
body.app-body .tab-rewards .rewards-head {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 16px 4px 12px !important;
  margin: 0 !important;
}
body.app-body .tab-rewards .rewards-head .page-kicker {
  color: rgba(255,255,255,0.5) !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  margin: 0 0 4px !important;
  text-shadow: none !important;
  font-family: inherit !important;
}
body.app-body .tab-rewards .rewards-head .section-h,
body.app-body .tab-rewards .rewards-head h1 {
  color: #ffffff !important;
  font-family: 'Lato', system-ui, sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  line-height: 1.15 !important;
  margin: 0 !important;
}

/* ============================================================
   v=108 — Rewards: rounder, minimum text (icon + status only),
   keep structure, keep header untouched, keep #050505 bg.
   ============================================================ */

/* Rounder + roomier reward blocks */
body.app-body .tab-rewards .reward-node,
body.app-body .reward-node,
.reward-node,
body.app-body .tab-rewards .reward-step .reward-node.is-claimed,
body.app-body .tab-rewards .reward-step .reward-node.is-available,
body.app-body .tab-rewards .reward-step .reward-node.is-unavailable,
.reward-node.is-claimed,
.reward-node.is-available,
.reward-node.is-unavailable {
  border-radius: 22px !important;
  padding: 18px 14px !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 6px !important;
  min-height: 96px !important;
}

/* Minimum text — hide the "FREE" / "PASS" eyebrow span,
   keep emoji (.reward-art) + bold status label only. */
body.app-body .tab-rewards .reward-node > span:not(.reward-art),
body.app-body .reward-node > span:not(.reward-art),
.reward-node > span:not(.reward-art) {
  display: none !important;
}

/* Bigger, centered emoji */
body.app-body .reward-node .reward-art,
.reward-node .reward-art {
  font-size: 32px !important;
  line-height: 1 !important;
  margin: 0 0 4px !important;
  text-align: center !important;
}

/* Status label compact + clean */
body.app-body .reward-node strong,
.reward-node strong {
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}

/* Level circle bigger + rounder context */
body.app-body .tab-rewards .reward-index,
body.app-body .reward-index,
.reward-index {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  font-size: 15px !important;
}

/* Step row gap a touch larger for breathing room */
body.app-body .tab-rewards .reward-step,
body.app-body .reward-step,
.reward-step {
  gap: 10px !important;
}
body.app-body .tab-rewards .reward-lanes,
.tab-rewards .reward-lanes {
  gap: 12px !important;
}


/* ============================================================
   v=109 — CRITICAL yellow purge (buy-sheet), reward cleanup,
   XP badge block, refs sizing, nav slide animation, bracket restyle.
   ============================================================ */

/* в”Ђв”Ђв”Ђ 1. CRITICAL: Kill ALL yellow in buy-sheet в”Ђв”Ђв”Ђ */
body.app-body .buy-sheet-price,
body.app-body .buy-sheet .buy-sheet-price,
body.app-body [data-buy-sheet-price],
.buy-sheet-price {
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(90,184,255,0.35) !important;
}
body.app-body .buy-sheet-meta strong,
body.app-body .buy-sheet-votes,
body.app-body [data-buy-sheet-votes] {
  color: rgba(90,184,255,0.9) !important;
}

/* Nuclear yellow purge — catch anything else */
body.app-body [style*="FFD60A"],
body.app-body [style*="ffd60a"],
body.app-body [style*="yellow"] {
  color: #5AB8FF !important;
}

/* в”Ђв”Ђв”Ђ 2. Hide reward emoji/images в”Ђв”Ђв”Ђ */
body.app-body .reward-node .reward-art,
body.app-body .tab-rewards .reward-art,
.reward-node .reward-art,
.reward-art {
  display: none !important;
}

/* в”Ђв”Ђв”Ђ 3. Reward blocks: ALL 4 corners rounded в”Ђв”Ђв”Ђ */
body.app-body .tab-rewards .reward-node,
body.app-body .reward-node,
.reward-node {
  border-radius: 22px !important;
  overflow: hidden !important;
}

/* в”Ђв”Ђв”Ђ 4. Rewards header: hide "Season path" + "3 500 XP В· LVL 36" text в”Ђв”Ђв”Ђ */
body.app-body .tab-rewards .rewards-head .page-kicker,
body.app-body .rewards-head .page-kicker {
  display: none !important;
}
body.app-body .rewards-head .reward-xp-note,
body.app-body .rewards-head .section-sub,
body.app-body .rewards-head .rewards-xp-badge {
  display: none !important;
}

/* в”Ђв”Ђв”Ђ 5. New XP/LVL badge block (inserted via JS) в”Ђв”Ђв”Ђ */
body.app-body .xp-level-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 16px 14px !important;
  padding: 12px 20px !important;
  background: rgba(90,184,255,0.08) !important;
  border: 1px solid rgba(90,184,255,0.20) !important;
  border-radius: 16px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: 0.02em !important;
}
body.app-body .xp-level-badge .xp-val {
  color: #5AB8FF !important;
  font-weight: 800 !important;
}
body.app-body .xp-level-badge .lvl-val {
  color: rgba(255,255,255,0.7) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* в”Ђв”Ђв”Ђ 6. Referrals: stats block = Telegram button size в”Ђв”Ђв”Ђ */
body.app-body .refs-stats,
body.app-body .tab-refs .refs-stats {
  display: flex !important;
  gap: 10px !important;
  margin: 12px 16px !important;
}
body.app-body .refs-stat,
body.app-body .tab-refs .refs-stat {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 14px !important;
  background: rgba(90,184,255,0.08) !important;
  border: 1px solid rgba(90,184,255,0.15) !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
}
body.app-body .refs-stat .rs-label {
  color: rgba(255,255,255,0.6) !important;
  font-size: 12px !important;
}
body.app-body .refs-stat .rs-value {
  color: #5AB8FF !important;
  font-weight: 800 !important;
  font-size: 15px !important;
}

/* в”Ђв”Ђв”Ђ 7. Bottom nav: smooth slide animation в”Ђв”Ђв”Ђ */
body.app-body .app-bnav .bn-btn {
  transition: background 0.3s cubic-bezier(0.4,0,0.2,1),
              color 0.3s cubic-bezier(0.4,0,0.2,1),
              transform 0.3s cubic-bezier(0.4,0,0.2,1) !important;
}
body.app-body .app-bnav .bn-btn.is-active {
  transition: background 0.3s cubic-bezier(0.4,0,0.2,1),
              color 0.3s cubic-bezier(0.4,0,0.2,1),
              transform 0.25s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.3s ease !important;
  animation: navSlideIn 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;
}

@keyframes navSlideIn {
  0% { transform: scale(0.85); opacity: 0.4; }
  60% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ─── 8. Живая сетка — redesign from scratch ─── */
body.app-body .league-map {
  padding: 0 12px 20px !important;
}
body.app-body .league-map .section-h {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 16px 4px !important;
  letter-spacing: -0.01em !important;
}

/* Stage containers */
body.app-body .league-stage {
  margin-bottom: 20px !important;
  background: transparent !important;
  border: 0 !important;
}
body.app-body .league-stage .ls-head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 4px 10px !important;
  border: 0 !important;
  background: transparent !important;
}
body.app-body .league-stage .ls-head span {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #5AB8FF !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}
body.app-body .league-stage .ls-head strong {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.45) !important;
  letter-spacing: 0.02em !important;
}

/* Match cards */
body.app-body .ls-matches {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
body.app-body .ls-match {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 14px 16px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px !important;
  cursor: pointer !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}
body.app-body .ls-match:active {
  background: rgba(90,184,255,0.08) !important;
  border-color: rgba(90,184,255,0.25) !important;
}
body.app-body .ls-match.is-live {
  border-color: rgba(90,184,255,0.3) !important;
  background: rgba(90,184,255,0.06) !important;
}
body.app-body .ls-match.is-done {
  opacity: 0.6 !important;
}

/* VS row */
body.app-body .ls-versus {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
body.app-body .ls-team {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  flex: 1 !important;
}
body.app-body .ls-team:last-child {
  text-align: right !important;
}
body.app-body .ls-team.is-winner {
  color: #5AB8FF !important;
}
body.app-body .ls-team.is-loser {
  color: rgba(255,255,255,0.35) !important;
  text-decoration: line-through !important;
}
body.app-body .ls-versus i {
  font-style: normal !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  flex-shrink: 0 !important;
}

/* Progress bar */
body.app-body .ls-progress {
  height: 4px !important;
  border-radius: 2px !important;
  background: rgba(255,255,255,0.08) !important;
  overflow: hidden !important;
}
body.app-body .ls-progress span {
  display: block !important;
  height: 100% !important;
  border-radius: 2px !important;
  background: linear-gradient(90deg, #5AB8FF, #0A84FF) !important;
  transition: width 0.4s ease !important;
}

/* Footer row */
body.app-body .ls-foot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
body.app-body .ls-foot b {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.5) !important;
}
body.app-body .ls-foot em {
  font-style: normal !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #5AB8FF !important;
}

/* ============================================================
   v=132 — Top nav + Checkin path + Tasks + Roulette
   ============================================================ */

/* Top nav */
body.app-body .app-topnav {
  display: flex !important;
  gap: 6px !important;
  padding: 8px 12px !important;
  margin: 0 12px 8px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}
body.app-body .app-topnav::-webkit-scrollbar { display: none !important; }
body.app-body .tn-btn {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(255,255,255,0.55) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}
body.app-body .tn-btn svg {
  width: 16px !important;
  height: 16px !important;
  fill: currentColor !important;
}
body.app-body .tn-btn.is-active {
  background: linear-gradient(135deg, #0A84FF, #5AB8FF) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(10,132,255,0.4) !important;
}
body.app-body .hdr-tickets .bal-icon {
  font-size: 18px !important;
}

/* Checkin path */
body.app-body .checkin-path {
  position: relative !important;
  width: 100% !important;
  max-width: 360px !important;
  height: 480px !important;
  margin: 0 auto 24px !important;
}
body.app-body .checkin-path-line {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
body.app-body .checkin-path-line path[data-checkin-path-fill] {
  filter: drop-shadow(0 0 6px rgba(10,132,255,0.5)) !important;
  transition: stroke-dashoffset 0.8s ease !important;
}
body.app-body .checkin-step {
  position: absolute !important;
  left: var(--x) !important;
  top: var(--y) !important;
  transform: translate(-50%, -50%) !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.06) !important;
  border: 2px solid rgba(255,255,255,0.12) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  color: rgba(255,255,255,0.7) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 2 !important;
}
body.app-body .checkin-step.is-final {
  width: 80px !important;
  height: 80px !important;
  background: radial-gradient(circle at 30% 30%, #5AB8FF, #0A84FF) !important;
  border-color: #5AB8FF !important;
  color: #fff !important;
  box-shadow: 0 0 30px rgba(10,132,255,0.6), inset 0 0 20px rgba(255,255,255,0.3) !important;
  animation: ticket-pulse 2s ease-in-out infinite !important;
}
body.app-body .checkin-step.is-final svg {
  width: 40px !important;
  height: 40px !important;
}
@keyframes ticket-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.08); }
}
body.app-body .checkin-step.is-done {
  background: linear-gradient(135deg, #0A84FF, #5AB8FF) !important;
  border-color: #5AB8FF !important;
  color: #fff !important;
  box-shadow: 0 0 16px rgba(10,132,255,0.6) !important;
}
body.app-body .checkin-step.is-current {
  border-color: #FF3B30 !important;
  box-shadow: 0 0 20px rgba(255,59,48,0.6) !important;
  animation: step-current-pulse 1.4s ease-in-out infinite !important;
}
@keyframes step-current-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.12); }
}
body.app-body .checkin-eyebrow {
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.4) !important;
  margin: 0 0 4px !important;
  font-weight: 700 !important;
}

/* Tasks */
body.app-body .tasks-hero {
  padding: 16px !important;
  margin-bottom: 8px !important;
}
body.app-body .tasks-tabs {
  display: flex !important;
  gap: 6px !important;
  padding: 4px !important;
  margin: 0 16px 16px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
body.app-body .tasks-tabs button {
  flex: 1 !important;
  padding: 10px !important;
  border-radius: 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(255,255,255,0.6) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
body.app-body .tasks-tabs button.is-active {
  background: linear-gradient(135deg, #0A84FF, #5AB8FF) !important;
  color: #fff !important;
}
body.app-body .tasks-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 0 16px 24px !important;
}
body.app-body .task-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  gap: 12px !important;
}
body.app-body .task-card.is-done {
  opacity: 0.5 !important;
}
body.app-body .task-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
  flex: 1 !important;
}
body.app-body .task-info strong {
  font-size: 15px !important;
  color: #fff !important;
  font-weight: 700 !important;
}
body.app-body .task-reward {
  font-size: 12px !important;
  color: #5AB8FF !important;
  font-weight: 700 !important;
}
body.app-body .task-actions {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
}
body.app-body .task-link {
  font-size: 12px !important;
  color: #5AB8FF !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}
body.app-body .task-btn {
  padding: 8px 14px !important;
  border-radius: 10px !important;
  border: 0 !important;
  background: linear-gradient(135deg, #0A84FF, #5AB8FF) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}
body.app-body .task-btn.is-done {
  background: rgba(52,199,89,0.2) !important;
  color: #34C759 !important;
}

/* Roulette */
body.app-body .roulette-hero {
  padding: 16px !important;
  margin-bottom: 8px !important;
}
body.app-body .roulette-shell {
  padding: 0 16px 24px !important;
}
body.app-body .roulette-ticket-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 14px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(10,132,255,0.15), rgba(90,184,255,0.10)) !important;
  border: 1px solid rgba(10,132,255,0.3) !important;
  margin-bottom: 16px !important;
}
body.app-body .roulette-ticket-bar span {
  font-size: 14px !important;
  color: rgba(255,255,255,0.7) !important;
}
body.app-body .roulette-ticket-bar strong {
  font-size: 24px !important;
  color: #5AB8FF !important;
  font-weight: 900 !important;
}
body.app-body .roulette-stage {
  position: relative !important;
  width: 100% !important;
  height: 140px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(10,132,255,0.10), rgba(0,0,0,0.4)) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  margin-bottom: 16px !important;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.6) !important;
}
body.app-body .roulette-pointer {
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 4px !important;
  height: 100% !important;
  background: linear-gradient(180deg, #5AB8FF, #0A84FF) !important;
  z-index: 5 !important;
  box-shadow: 0 0 20px rgba(10,132,255,0.9) !important;
}
body.app-body .roulette-pointer::before {
  content: '' !important;
  position: absolute !important;
  top: -4px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 8px solid transparent !important;
  border-right: 8px solid transparent !important;
  border-top: 10px solid #5AB8FF !important;
}
body.app-body .roulette-fade-l,
body.app-body .roulette-fade-r {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 60px !important;
  pointer-events: none !important;
  z-index: 4 !important;
}
body.app-body .roulette-fade-l {
  left: 0 !important;
  background: linear-gradient(90deg, #050505 0%, transparent 100%) !important;
}
body.app-body .roulette-fade-r {
  right: 0 !important;
  background: linear-gradient(270deg, #050505 0%, transparent 100%) !important;
}
body.app-body .roulette-track {
  display: flex !important;
  height: 100% !important;
  align-items: center !important;
  padding: 0 8px !important;
  will-change: transform !important;
}
body.app-body .r-item {
  flex: 0 0 100px !important;
  width: 100px !important;
  height: 100px !important;
  margin: 0 5px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: rgba(10,132,255,0.06) !important;
  position: relative !important;
  border: 1px solid rgba(10,132,255,0.18) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.app-body .r-lottie {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.app-body .r-lottie svg {
  width: 100% !important;
  height: 100% !important;
}
body.app-body .roulette-spin-btn {
  display: block !important;
  width: 100% !important;
  padding: 18px !important;
  border-radius: 16px !important;
  border: 0 !important;
  background: linear-gradient(135deg, #0A84FF, #5AB8FF) !important;
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, opacity 0.2s ease !important;
  box-shadow: 0 8px 24px rgba(10,132,255,0.4) !important;
}
body.app-body .roulette-spin-btn:disabled {
  opacity: 0.4 !important;
  cursor: default !important;
  box-shadow: none !important;
}
body.app-body .roulette-spin-btn:not(:disabled):active {
  transform: scale(0.97) !important;
}
body.app-body .roulette-status {
  text-align: center !important;
  margin: 12px 0 16px !important;
  font-size: 13px !important;
  color: #5AB8FF !important;
  font-weight: 600 !important;
  min-height: 16px !important;
}
body.app-body .roulette-prizes-grid,
body.app-body .roulette-history-h,
body.app-body .roulette-history {
  display: none !important;
}

/* Roulette modal */
body.app-body .roulette-modal {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,0.85) !important;
  z-index: 9999 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
}
body.app-body .roulette-modal.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}
body.app-body .roulette-modal-card {
  position: relative !important;
  width: min(320px, 80vw) !important;
  padding: 32px 24px !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, #1a1a1a, #0a0a0a) !important;
  border: 2px solid rgba(10,132,255,0.4) !important;
  text-align: center !important;
  animation: gift-pop 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
@keyframes gift-pop {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
body.app-body .roulette-modal-glow {
  position: absolute !important;
  inset: -20px !important;
  border-radius: 28px !important;
  background: radial-gradient(circle, rgba(10,132,255,0.4), transparent) !important;
  z-index: -1 !important;
  animation: glow-pulse 2s ease-in-out infinite !important;
}
@keyframes glow-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
body.app-body .roulette-modal-img,
body.app-body .roulette-modal-lottie {
  width: 180px !important;
  height: 180px !important;
  border-radius: 20px !important;
  object-fit: cover !important;
  margin: 0 auto 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 3px solid #5AB8FF !important;
  box-shadow: 0 0 40px rgba(10,132,255,0.6) !important;
  background: rgba(10,132,255,0.08) !important;
  overflow: hidden !important;
}
body.app-body .roulette-modal-lottie svg {
  width: 100% !important;
  height: 100% !important;
}
body.app-body .roulette-modal-kicker {
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #5AB8FF !important;
  margin: 0 0 6px !important;
  font-weight: 700 !important;
}
body.app-body .roulette-modal-name {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #fff !important;
  margin: 0 0 24px !important;
}
body.app-body .roulette-modal-btn {
  padding: 12px 32px !important;
  border-radius: 12px !important;
  border: 0 !important;
  background: linear-gradient(135deg, #0A84FF, #5AB8FF) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

/* Скрываю всё ненужное: старый top-nav, lang-toggle (всегда RU) */
body.app-body .app-topnav,
body.app-body .hdr-nav,
body.app-body .lang-toggle {
  display: none !important;
}

/* ═════════ ШАПКА — толстая, две строки чтобы всё помещалось ═════════ */
body.app-body .app-header {
  display: grid !important;
  grid-template-columns: 56px 1fr auto !important;
  grid-template-rows: 1fr auto !important;
  align-items: center !important;
  column-gap: 10px !important;
  row-gap: 4px !important;
  padding: 8px 12px !important;
  height: 92px !important;
  min-height: 92px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: rgba(5,5,5,0.94) !important;
  backdrop-filter: blur(14px) saturate(150%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

/* ГАМБУРГЕР: крупный, без рамки, без фона, спан-2 строки */
body.app-body .hdr-burger,
body.app-body button.hdr-burger {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #fff !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 50 !important;
  -webkit-tap-highlight-color: rgba(10,132,255,0.2) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  touch-action: manipulation !important;
  pointer-events: auto !important;
}
body.app-body .hdr-burger:focus,
body.app-body .hdr-burger:focus-visible,
body.app-body .hdr-burger:hover {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
body.app-body .hdr-burger svg {
  width: 38px !important;
  height: 38px !important;
  fill: currentColor !important;
  pointer-events: none !important;
}
body.app-body .hdr-burger:active {
  opacity: 0.6 !important;
}

/* ЛОГОТИП: оригинальные размеры (вертикально стек, крупный), верхняя строка */
body.app-body .brand-stack {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: grid !important;
  align-items: center !important;
  justify-self: start !important;
  min-width: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
  color: #fff !important;
  text-transform: uppercase !important;
}
body.app-body .brand-stack .brand-meme,
body.app-body .brand-stack .brand-throne {
  font-family: var(--font-brand, 'Bagel Fat One', system-ui) !important;
  font-size: clamp(20px, 5.4vw, 28px) !important;
  font-weight: 400 !important;
  line-height: 0.82 !important;
  letter-spacing: 0.005em !important;
}
body.app-body .brand-stack .brand-meme  { color: #1B7CFF !important; }
body.app-body .brand-stack .brand-throne { color: #fff !important; }

/* WALLET: верхняя строка справа */
body.app-body .hdr-tools {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
body.app-body .hdr-tools .wallet-btn {
  padding: 8px 16px !important;
  height: 36px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  border: 0 !important;
  background: linear-gradient(135deg, #0A84FF, #5AB8FF) !important;
  color: #fff !important;
  white-space: nowrap !important;
}
body.app-body .hdr-tools .wallet-label {
  white-space: nowrap !important;
}

/* BALANCE-виджет: нижняя строка под логотипом, белый pill чёрный текст/иконка */
body.app-body .hdr-tools .bal-widget,
body.app-body .app-header > .bal-widget,
body.app-body .app-header .bal-widget {
  grid-column: 2 / span 2 !important;
  grid-row: 2 !important;
  justify-self: start !important;
  padding: 4px 12px !important;
  height: 28px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #ffffff !important;
  color: #000000 !important;
  border-radius: 999px !important;
  width: fit-content !important;
}
body.app-body .hdr-tools .bal-widget .bal-icon svg,
body.app-body .app-header .bal-widget .bal-icon svg {
  fill: #000 !important;
  width: 16px !important;
  height: 16px !important;
}
body.app-body .hdr-tools .bal-widget .bal-value,
body.app-body .app-header .bal-widget .bal-value {
  color: #000 !important;
}

@media (max-width: 380px) {
  body.app-body .app-header {
    grid-template-columns: 48px 1fr auto !important;
    column-gap: 8px !important;
    padding: 6px 10px !important;
  }
  body.app-body .hdr-burger { width: 48px !important; height: 48px !important; }
  body.app-body .hdr-burger svg { width: 32px !important; height: 32px !important; }
  body.app-body .brand-stack .brand-meme,
  body.app-body .brand-stack .brand-throne { font-size: 18px !important; }
  body.app-body .hdr-tools .wallet-btn { padding: 6px 12px !important; height: 32px !important; font-size: 12px !important; }
}

/* ═════════ НИЖНЯЯ НАВИГАЦИЯ — 6 табов, круглый слайдер по центру ═════════ */
body.app-body .app-bnav {
  --nav-size: 48px !important;
  --nav-gap: 6px !important;
  display: grid !important;
  grid-template-columns: repeat(6, var(--nav-size)) !important;
  gap: var(--nav-gap) !important;
  z-index: 50 !important;
  padding: 6px !important;
}
@media (max-width: 380px) {
  body.app-body .app-bnav {
    --nav-size: 44px !important;
    --nav-gap: 4px !important;
    padding: 5px !important;
  }
}
body.app-body .app-bnav[data-active-tab="home"]     { --nav-index: 0 !important; }
body.app-body .app-bnav[data-active-tab="leagues"]  { --nav-index: 1 !important; }
body.app-body .app-bnav[data-active-tab="shop"]     { --nav-index: 2 !important; }
body.app-body .app-bnav[data-active-tab="rewards"]  { --nav-index: 3 !important; }
body.app-body .app-bnav[data-active-tab="tasks"]    { --nav-index: 4 !important; }
body.app-body .app-bnav[data-active-tab="roulette"] { --nav-index: 5 !important; }
body.app-body .app-bnav[data-active-tab="profile"]  { --nav-index: 0 !important; }
body.app-body .app-bnav[data-active-tab="ai"]       { --nav-index: 0 !important; }

/* Слайдер (white pill) — КРУГЛЫЙ, точно в центре активной иконки */
body.app-body .app-bnav::before {
  content: '' !important;
  position: absolute !important;
  width: var(--nav-size) !important;
  height: var(--nav-size) !important;
  top: 6px !important;
  left: 6px !important;
  bottom: auto !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 4px 14px rgba(10,132,255,0.18), inset 0 1px 0 rgba(255,255,255,0.6) !important;
  transform: translateX(calc(var(--nav-index) * (var(--nav-size) + var(--nav-gap)))) !important;
  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
@media (max-width: 380px) {
  body.app-body .app-bnav::before {
    top: 5px !important;
    left: 5px !important;
  }
}

body.app-body .bn-btn {
  width: var(--nav-size) !important;
  height: var(--nav-size) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  color: rgba(255,255,255,0.55) !important;
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
  border: 0 !important;
}
body.app-body .bn-btn.is-active {
  color: #000 !important;
}
body.app-body .bn-btn .bn-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.app-body .bn-btn .bn-icon svg {
  width: 22px !important;
  height: 22px !important;
  fill: currentColor !important;
  display: block !important;
}
body.app-body .bn-btn .bn-l {
  display: none !important;
}

/* Hamburger menu — drawer with all tabs */
body.app-body .hdr-burger {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  background: rgba(255,255,255,0.05) !important;
  color: #fff !important;
  cursor: pointer !important;
  margin-right: 4px !important;
}
body.app-body .hdr-burger svg {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
}
body.app-body .nav-drawer {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.7) !important;
  backdrop-filter: blur(8px) !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: stretch !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.25s ease !important;
}
body.app-body .nav-drawer.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}
body.app-body .nav-drawer-card {
  width: min(320px, 80%) !important;
  margin-right: auto !important;
  height: 100% !important;
  background: linear-gradient(180deg, #0a0a0a, #050505) !important;
  border-right: 1px solid rgba(255,255,255,0.08) !important;
  padding: 24px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  transform: translateX(-100%) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
body.app-body .nav-drawer.is-open .nav-drawer-card {
  transform: translateX(0) !important;
}
body.app-body .nav-drawer-close {
  align-self: flex-end !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  border: 0 !important;
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  font-size: 18px !important;
  cursor: pointer !important;
  margin-bottom: 16px !important;
}
body.app-body .nav-drawer-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  border: 0 !important;
  background: rgba(255,255,255,0.04) !important;
  color: rgba(255,255,255,0.85) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: background 0.2s ease !important;
}
body.app-body .nav-drawer-item:hover {
  background: rgba(255,255,255,0.08) !important;
}
body.app-body .nav-drawer-item.is-active {
  background: linear-gradient(135deg, #0A84FF, #5AB8FF) !important;
  color: #fff !important;
}
body.app-body .nav-drawer-item svg {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
}

/* Hide old top-nav row (replaced by hamburger) */
body.app-body .app-topnav {
  display: none !important;
}

/* Force-show vote buttons — flat, mobile-friendly, no 3D flip */
body.app-body .widget-vote-btn {
  position: relative !important;
  min-height: 56px !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  border-radius: 14px !important;
  border: 0 !important;
  cursor: pointer !important;
  color: #fff !important;
  background: linear-gradient(135deg, #0A84FF, #5AB8FF) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35) !important;
  transform: none !important;
  perspective: none !important;
  transform-style: flat !important;
  text-transform: uppercase !important;
}
body.app-body .widget-vote-btn::before,
body.app-body .widget-vote-btn::after {
  display: none !important;
}
body.app-body .widget-vote-a {
  background: linear-gradient(135deg, #0A84FF, #5AB8FF) !important;
}
body.app-body .widget-vote-b {
  background: linear-gradient(135deg, #1B7CFF, #5AB8FF) !important;
}
body.app-body .widget-vote-btn:active:not(:disabled) {
  transform: scale(0.97) !important;
}
body.app-body .widget-vote-btn:disabled {
  opacity: 0.4 !important;
  cursor: default !important;
}
body.app-body .widget-cta {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-top: 14px !important;
  padding: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Круглые орбы команд в блоке голосования */
body.app-body .widget-team-orb {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,0.08) !important;
  border: 2px solid rgba(255,255,255,0.12) !important;
  margin: 0 auto !important;
}
body.app-body .widget-team-lottie,
body.app-body .widget-team-orb img,
body.app-body .widget-team-orb svg {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}
body.app-body .widget-team.team-a .widget-team-orb {
  border-color: rgba(10,132,255,0.5) !important;
  box-shadow: 0 0 16px rgba(10,132,255,0.25) !important;
}
body.app-body .widget-team.team-b .widget-team-orb {
  border-color: rgba(90,184,255,0.5) !important;
  box-shadow: 0 0 16px rgba(90,184,255,0.25) !important;
}

/* AI Assistant tab */
body.app-body .ai-shell {
  display: flex !important;
  flex-direction: column !important;
  height: calc(100vh - 80px) !important;
  padding: 16px !important;
  gap: 12px !important;
}
body.app-body .ai-head {
  text-align: center !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
body.app-body .ai-head .section-h {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #fff !important;
  margin: 4px 0 6px !important;
}
body.app-body .ai-sub {
  font-size: 12px !important;
  color: rgba(255,255,255,0.5) !important;
  margin: 0 !important;
}
body.app-body .ai-chat {
  flex: 1 !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 8px 0 !important;
}
body.app-body .ai-msg {
  max-width: 80% !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  word-wrap: break-word !important;
  white-space: pre-wrap !important;
}
body.app-body .ai-msg-bot {
  align-self: flex-start !important;
  background: rgba(10,132,255,0.12) !important;
  border: 1px solid rgba(10,132,255,0.25) !important;
  color: #e5f2ff !important;
  border-bottom-left-radius: 4px !important;
}
body.app-body .ai-msg-user {
  align-self: flex-end !important;
  background: linear-gradient(135deg, #0A84FF, #5AB8FF) !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-bottom-right-radius: 4px !important;
}
body.app-body .ai-thinking {
  font-style: italic !important;
  opacity: 0.6 !important;
}
body.app-body .ai-form {
  display: flex !important;
  gap: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}
body.app-body .ai-input {
  flex: 1 !important;
  padding: 14px 16px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: rgba(255,255,255,0.04) !important;
  color: #fff !important;
  font-size: 15px !important;
  outline: none !important;
}
body.app-body .ai-input:focus {
  border-color: #5AB8FF !important;
  background: rgba(10,132,255,0.05) !important;
}
body.app-body .ai-send {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  border: 0 !important;
  background: linear-gradient(135deg, #0A84FF, #5AB8FF) !important;
  color: #fff !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.app-body .ai-send svg {
  width: 20px !important;
  height: 20px !important;
}

/* в”Ђв”Ђв”Ђ 9. Extra: kill any inline yellow set by JS в”Ђв”Ђв”Ђ */
body.app-body .buy-sheet-price[style],
body.app-body [data-buy-sheet-price][style] {
  color: #ffffff !important;
}


/* ============================================================
   v=110 — Reward rows rounded, emoji truly killed,
   metric strip в†’ single block, cashbacks centered.
   ============================================================ */

/* в”Ђв”Ђв”Ђ A. Reward ROW (.reward-step) = rounded card в”Ђв”Ђв”Ђ */
body.app-body .tab-rewards .reward-step,
body.app-body .reward-step,
.reward-step {
  border-radius: 18px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  padding: 12px !important;
  margin-bottom: 2px !important;
}

/* в”Ђв”Ђв”Ђ B. Reward NODES inside = also fully rounded on all 4 corners в”Ђв”Ђв”Ђ */
body.app-body .tab-rewards .reward-step .reward-node,
body.app-body .reward-step .reward-node,
body.app-body .tab-rewards article.reward-step .reward-node.free,
body.app-body .tab-rewards article.reward-step .reward-node.pass,
body.app-body .tab-rewards .reward-node.is-claimed,
body.app-body .tab-rewards .reward-node.is-available,
body.app-body .tab-rewards .reward-node.is-unavailable {
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* ─── C. KILL emoji/images — maximum specificity ─── */
body.app-body .tab-rewards .reward-step .reward-node .reward-art,
body.app-body .tab-rewards .reward-step .reward-node .reward-art,
body.app-body .tab-rewards article.reward-step .reward-node .reward-art,
body.app-body .tab-rewards .reward-node .reward-art,
body.app-body .tab-rewards .reward-art,
body.app-body .reward-step .reward-art,
body.app-body .reward-node .reward-art,
body.app-body .reward-art,
.reward-art,
span.reward-art,
[class*="reward-art"] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  font-size: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* в”Ђв”Ђв”Ђ D. Hide "Free"/"Pass" text labels, show only status (Claimed/Gift/+1) в”Ђв”Ђв”Ђ */
body.app-body .tab-rewards .reward-node > span:not(.reward-art),
body.app-body .reward-node > span:not(.reward-art) {
  display: none !important;
}

/* в”Ђв”Ђв”Ђ E. Remove lines/borders between reward rows в”Ђв”Ђв”Ђ */
body.app-body .tab-rewards .reward-step::before,
body.app-body .tab-rewards .reward-step::after,
body.app-body .reward-step::before,
body.app-body .reward-step::after {
  display: none !important;
  content: none !important;
}
body.app-body .tab-rewards .reward-lanes {
  border: 0 !important;
  box-shadow: none !important;
}

/* в”Ђв”Ђв”Ђ F. Metric strip в†’ one unified block в”Ђв”Ђв”Ђ */
body.app-body .metric-strip,
body.app-body .home-editorial .metric-strip {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px !important;
  padding: 0 !important;
  overflow: hidden !important;
}
body.app-body .metric-strip .metric,
body.app-body .home-editorial .metric-strip .metric {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 8px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative !important;
}
body.app-body .metric-strip .metric + .metric::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 20% !important;
  bottom: 20% !important;
  width: 1px !important;
  background: rgba(255,255,255,0.1) !important;
  display: block !important;
}
body.app-body .metric-strip .metric span {
  font-size: 11px !important;
  color: rgba(255,255,255,0.5) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}
body.app-body .metric-strip .metric strong {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}

/* ─── G. Cashbacks section — centered ─── */
body.app-body .profile-cashbacks {
  text-align: center !important;
}
body.app-body .profile-cashbacks h2 {
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 16px 0 8px !important;
}
body.app-body .profile-cashbacks .cashback-list:empty::after {
  content: 'No active cashbacks' !important;
  display: block !important;
  text-align: center !important;
  color: rgba(255,255,255,0.4) !important;
  font-size: 13px !important;
  padding: 20px 0 !important;
}
body.app-body .profile-cashbacks .cashback-list {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}


/* ============================================================
   v=111 — Refs stats unified block, shop bg match NFT,
   wallet-style buttons everywhere.
   ============================================================ */

/* в”Ђв”Ђв”Ђ 1. Refs stats: one unified pill block в”Ђв”Ђв”Ђ */
.refs-stats {
  display: flex !important;
  grid-template-columns: unset !important;
  gap: 0 !important;
  margin: 16px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  height: 52px !important;
}
.refs-stat {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 16px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  position: relative !important;
  min-height: unset !important;
  height: 100% !important;
}
.refs-stat + .refs-stat::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 25% !important;
  bottom: 25% !important;
  width: 1px !important;
  background: rgba(255,255,255,0.12) !important;
  display: block !important;
}
.refs-stat .rs-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.55) !important;
  letter-spacing: 0.02em !important;
}
.refs-stat .rs-value {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}

/* в”Ђв”Ђв”Ђ 2. Shop background = pure black to match NFT card bg в”Ђв”Ђв”Ђ */
.tab-shop {
  background: #050505 !important;
}
.shop-choice {
  background: #050505 !important;
}
.shop-choice-card {
  background: #050505 !important;
  border-color: rgba(255,255,255,0.06) !important;
}
.shop-hero {
  background: #050505 !important;
}
.shop-pass-art img {
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5) !important;
}
.shop-pass-art::before {
  background: rgba(10,132,255,0.10) !important;
}

/* в”Ђв”Ђв”Ђ 3. Wallet-style pill buttons в”Ђв”Ђв”Ђ */

/* Base wallet-pill style — reusable class */
.btn-wallet-style,
.shop-primary,
.shop-secondary,
.btn-share,
.btn-share-native,
.btn-copy,
.btn-copy-link,
.sc-buy,
.home-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 48px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1) !important;
  text-decoration: none !important;
}

/* Primary wallet pill (filled blue like the Wallet button) */
.shop-primary,
.btn-share-native,
.home-cta.home-cta-primary,
.sc-buy {
  background: linear-gradient(180deg, #2196ff 0%, #0A84FF 40%, #0066CC 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(90,184,255,0.35) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    0 4px 14px rgba(10,132,255,0.30) !important;
}
.shop-primary:active,
.btn-share-native:active,
.home-cta.home-cta-primary:active,
.sc-buy:active {
  transform: scale(0.97) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 2px 6px rgba(10,132,255,0.20) !important;
}

/* Secondary wallet pill (glass/dark like inactive wallet) */
.shop-secondary,
.btn-share:not(.btn-share-native),
.btn-copy,
.btn-copy-link,
.home-cta.home-cta-secondary {
  background: rgba(255,255,255,0.06) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
.shop-secondary:active,
.btn-share:not(.btn-share-native):active,
.btn-copy:active,
.btn-copy-link:active,
.home-cta.home-cta-secondary:active {
  transform: scale(0.97) !important;
  background: rgba(255,255,255,0.10) !important;
}

/* Getgems link button in shop-choice-card — wallet style too */
.shop-choice-card a,
.shop-choice-card .sc-buy {
  border-radius: 999px !important;
}

/* Quick action command rows — wallet-style chevron pill */
.command-row {
  border-radius: 16px !important;
  transition: background 0.2s ease !important;
}
.command-row:active {
  background: rgba(255,255,255,0.06) !important;
}
.command-icon {
  border-radius: 999px !important;
}

/* Promo code submit button — wallet style */
.promo-strip button[type="submit"] {
  border-radius: 999px !important;
  background: linear-gradient(180deg, #2196ff 0%, #0A84FF 40%, #0066CC 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(90,184,255,0.30) !important;
  min-height: 44px !important;
  padding: 0 20px !important;
  font-weight: 700 !important;
}

/* ─── 4. ALL buttons app-wide — wallet pill style ─── */

/* Telegram share — primary blue pill */
body.app-body .tab-refs .btn.btn-share.btn-share-tg,
body.app-body .btn-share-tg,
.btn-share-tg {
  background: linear-gradient(180deg, #2196ff 0%, #0A84FF 40%, #0066CC 100%) !important;
  background-image: linear-gradient(180deg, #2196ff 0%, #0A84FF 40%, #0066CC 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(90,184,255,0.35) !important;
  border-radius: 999px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    0 4px 14px rgba(10,132,255,0.30) !important;
  min-height: 48px !important;
}
body.app-body .btn-share-tg:active {
  transform: scale(0.97) !important;
}

/* All other refs buttons — dark glass pill */
body.app-body .tab-refs .btn.btn-share:not(.btn-share-tg),
body.app-body .tab-refs .btn.btn-ghost,
body.app-body .tab-refs .btn-ghost.btn-sm,
body.app-body .tab-refs .btn {
  background: rgba(255,255,255,0.06) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
  min-height: 48px !important;
}
body.app-body .tab-refs .btn:not(.btn-share-tg):active {
  transform: scale(0.97) !important;
  background: rgba(255,255,255,0.10) !important;
}

/* Shop buttons — same wallet pill */
body.app-body .shop-primary,
body.app-body .tab-shop .shop-primary {
  background: linear-gradient(180deg, #2196ff 0%, #0A84FF 40%, #0066CC 100%) !important;
  background-image: linear-gradient(180deg, #2196ff 0%, #0A84FF 40%, #0066CC 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(90,184,255,0.35) !important;
  border-radius: 999px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    0 4px 14px rgba(10,132,255,0.30) !important;
}
body.app-body .shop-secondary,
body.app-body .tab-shop .shop-secondary {
  background: rgba(255,255,255,0.06) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* Choice card buy button */
body.app-body .sc-buy,
body.app-body .choice-action {
  background: linear-gradient(180deg, #2196ff 0%, #0A84FF 40%, #0066CC 100%) !important;
  background-image: linear-gradient(180deg, #2196ff 0%, #0A84FF 40%, #0066CC 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(90,184,255,0.35) !important;
  border-radius: 999px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    0 4px 14px rgba(10,132,255,0.30) !important;
}

/* Refs code block — dark */
body.app-body .refs-link {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  color: rgba(255,255,255,0.7) !important;
}

/* в”Ђв”Ђв”Ђ 5. NUCLEAR: override ALL refs buttons at max specificity в”Ђв”Ђв”Ђ */
body.app-body .tab-refs .btn.btn-ghost.btn-sm,
body.app-body .tab-refs .btn.btn-ghost,
body.app-body .tab-refs button.btn.btn-ghost.btn-sm,
body.app-body .tab-refs button.btn.btn-ghost,
body.app-body .tab-refs button.btn.btn-share.btn-share-native,
body.app-body .tab-refs [data-ref-copy],
body.app-body .tab-refs [data-ref-copy-link] {
  background: rgba(255,255,255,0.06) !important;
  background-image: none !important;
  background-color: rgba(255,255,255,0.06) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
body.app-body .tab-refs .btn.btn-ghost.btn-sm svg,
body.app-body .tab-refs .btn.btn-ghost svg,
body.app-body .tab-refs button.btn.btn-share.btn-share-native svg,
body.app-body .tab-refs [data-ref-copy] svg,
body.app-body .tab-refs [data-ref-copy-link] svg {
  fill: #ffffff !important;
  color: #ffffff !important;
}
body.app-body .tab-refs button.btn.btn-share.btn-share-tg,
body.app-body .tab-refs [data-ref-share-tg] {
  background: linear-gradient(180deg, #2196ff 0%, #0A84FF 40%, #0066CC 100%) !important;
  background-image: linear-gradient(180deg, #2196ff 0%, #0A84FF 40%, #0066CC 100%) !important;
  background-color: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(90,184,255,0.35) !important;
  border-radius: 999px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    0 4px 14px rgba(10,132,255,0.30) !important;
}
body.app-body .tab-refs button.btn.btn-share.btn-share-tg svg,
body.app-body .tab-refs button.btn.btn-share.btn-share-tg .bs-icon,
body.app-body .tab-refs button.btn.btn-share.btn-share-tg .bs-icon svg {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* ─── 6. Hide "Купить голоса" + "Открыть лиги" on home ─── */
body.app-body .home-action-row,
body.app-body .tab-home .home-action-row {
  display: none !important;
}

/* в”Ђв”Ђв”Ђ 7. Refs cashback block в”Ђв”Ђв”Ђ */
body.app-body .refs-cashback-section {
  margin: 16px !important;
  padding: 16px 20px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 18px !important;
}
body.app-body .refs-cashback-h {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 10px !important;
  letter-spacing: 0.01em !important;
}
body.app-body .refs-cashback-empty {
  text-align: center !important;
  color: rgba(255,255,255,0.35) !important;
  font-size: 13px !important;
  padding: 12px 0 !important;
  margin: 0 !important;
}
body.app-body .refs-cashback-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* ============================================================
   v=112 — ALL buttons → wallet pill style, globally.
   ============================================================ */

/* Primary action buttons — blue wallet pill (like Wallet btn) */
body.app-body .tab-shop .shop-primary,
body.app-body .tab-shop .choice-action,
body.app-body .tab-shop .sc-buy,
body.app-body .tab-home .widget-vote-btn,
body.app-body .home-cta.home-cta-primary,
body.app-body .btn-primary,
body.app-body .btn.btn-primary,
body.app-body [data-modal-confirm],
body.app-body .reward-modal-ok,
body.app-body [data-pass-buy],
body.app-body .promo-strip button[type="submit"],
body.app-body .admin-form button[type="submit"],
body.app-body .admin-tournament-form > button {
  background: linear-gradient(180deg, #2196ff 0%, #0A84FF 40%, #0066CC 100%) !important;
  background-image: linear-gradient(180deg, #2196ff 0%, #0A84FF 40%, #0066CC 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(90,184,255,0.35) !important;
  border-radius: 999px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    0 4px 14px rgba(10,132,255,0.30) !important;
  min-height: 48px !important;
  padding: 0 22px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}
body.app-body .tab-shop .shop-primary span,
body.app-body .tab-shop .choice-action span,
body.app-body .tab-shop .sc-buy span,
body.app-body .home-cta.home-cta-primary span,
body.app-body .home-cta.home-cta-primary b,
body.app-body .btn-primary span,
body.app-body [data-modal-confirm] span,
body.app-body .promo-strip button[type="submit"] span {
  color: #ffffff !important;
}
body.app-body .tab-shop .shop-primary svg,
body.app-body .tab-shop .choice-action svg,
body.app-body .btn-primary svg,
body.app-body [data-modal-confirm] svg,
body.app-body .home-cta.home-cta-primary svg {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* Secondary action buttons — dark glass wallet pill */
body.app-body .tab-shop .shop-secondary,
body.app-body .home-cta.home-cta-secondary,
body.app-body .btn-ghost,
body.app-body .btn.btn-ghost,
body.app-body .btn.btn-ghost.btn-sm,
body.app-body .pager-btn,
body.app-body .quick-action,
body.app-body [data-check-nft],
body.app-body .command-row {
  background: rgba(255,255,255,0.06) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
  min-height: 48px !important;
  font-weight: 700 !important;
}
body.app-body .tab-shop .shop-secondary span,
body.app-body .home-cta.home-cta-secondary span,
body.app-body .home-cta.home-cta-secondary b,
body.app-body .btn-ghost span,
body.app-body .command-row span,
body.app-body .command-row strong,
body.app-body .command-row small {
  color: #ffffff !important;
}
body.app-body .btn-ghost svg,
body.app-body .btn.btn-ghost svg,
body.app-body .command-row svg,
body.app-body .home-cta.home-cta-secondary svg,
body.app-body .tab-shop .shop-secondary svg {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* Command rows — keep rounded but 16px not 999px */
body.app-body .command-row {
  border-radius: 16px !important;
  padding: 12px 16px !important;
}

/* Vote buttons — wallet pill */
body.app-body .widget-vote-btn {
  border-radius: 999px !important;
  min-height: 44px !important;
}

/* Active/press state for ALL wallet buttons */
body.app-body .shop-primary:active,
body.app-body .shop-secondary:active,
body.app-body .choice-action:active,
body.app-body .sc-buy:active,
body.app-body .widget-vote-btn:active,
body.app-body .home-cta:active,
body.app-body .btn-primary:active,
body.app-body .btn-ghost:active,
body.app-body .command-row:active,
body.app-body .promo-strip button:active,
body.app-body [data-modal-confirm]:active {
  transform: scale(0.97) !important;
}

/* Segmented controls — keep their own style */
body.app-body .seg-control button,
body.app-body .league-view-toggle button,
body.app-body .shop-choice-tabs button {
  border-radius: 999px !important;
}

/* ============================================================
   v=113 — BOTTOM NAV: flexbox layout instead of position:fixed.
   Telegram WebView breaks position:fixed, so we use a flex
   column layout: body is 100dvh, main scrolls, nav stays put.
   ============================================================ */

html {
  height: 100% !important;
  height: 100dvh !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body,
html body.app-body {
  height: 100% !important;
  height: 100dvh !important;
  max-height: 100% !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-top: max(8px, env(safe-area-inset-top, 0px)) !important;
  display: flex !important;
  flex-direction: column !important;
  transform: none !important;
  will-change: auto !important;
  perspective: none !important;
  contain: none !important;
  filter: none !important;
}

html body.app-body > header,
html body.app-body > .app-header,
html body.app-body > header.app-header {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

html body.app-body > main,
html body.app-body > .app-main {
  flex: 1 1 0% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding-bottom: 16px !important;
  min-height: 0 !important;
  max-height: none !important;
  transform: none !important;
  will-change: auto !important;
  position: relative !important;
}

html body.app-body > nav,
html body.app-body > nav.app-bnav,
html body.app-body > .app-bnav,
body.app-body nav.app-bnav,
body.app-body .app-bnav,
nav.app-bnav,
.app-bnav {
  position: relative !important;
  position: -webkit-sticky !important;
  bottom: 0 !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  z-index: 9999 !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  border-radius: 0 !important;
  background: #050505 !important;
  background-image: none !important;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.5) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body.app-body > nav .bn-btn,
body.app-body nav.app-bnav .bn-btn,
body.app-body .app-bnav .bn-btn {
  flex: 1 !important;
  max-width: 72px !important;
}

/* ============================================================
   v=114 — BIG UI OVERHAUL
   - XP pill in rewards
   - Profile cashbacks styling
   - Gradient hover buttons (from devpool visual)
   - Nav slider animation
   - Better story grid
   - Tab slide transitions
   ============================================================ */

/* --- @property defs for gradient hover buttons --- */
@property --gx-pos-x {
  syntax: "<percentage>";
  initial-value: 11%;
  inherits: false;
}
@property --gx-pos-y {
  syntax: "<percentage>";
  initial-value: 140%;
  inherits: false;
}
@property --gx-spread-x {
  syntax: "<percentage>";
  initial-value: 150%;
  inherits: false;
}
@property --gx-spread-y {
  syntax: "<percentage>";
  initial-value: 180%;
  inherits: false;
}
@property --gx-c1 {
  syntax: "<color>";
  initial-value: #000;
  inherits: false;
}
@property --gx-c2 {
  syntax: "<color>";
  initial-value: #001030;
  inherits: false;
}
@property --gx-c3 {
  syntax: "<color>";
  initial-value: #0A4080;
  inherits: false;
}
@property --gx-c4 {
  syntax: "<color>";
  initial-value: #0A84FF;
  inherits: false;
}
@property --gx-c5 {
  syntax: "<color>";
  initial-value: #5AB8FF;
  inherits: false;
}
@property --gx-border-angle {
  syntax: "<angle>";
  initial-value: 20deg;
  inherits: true;
}
@property --gx-stop1 { syntax: "<percentage>"; initial-value: 37%; inherits: false; }
@property --gx-stop2 { syntax: "<percentage>"; initial-value: 61%; inherits: false; }
@property --gx-stop3 { syntax: "<percentage>"; initial-value: 78%; inherits: false; }
@property --gx-stop4 { syntax: "<percentage>"; initial-value: 90%; inherits: false; }
@property --gx-stop5 { syntax: "<percentage>"; initial-value: 100%; inherits: false; }

/* --- 1. REWARDS XP PILL (JS-generated .reward-points-pill) --- */
body.app-body .reward-points-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 10px !important;
  padding: 6px 18px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  color: #0A84FF !important;
}

/* --- 2. PROFILE CASHBACKS --- */
body.app-body .profile-cashbacks {
  margin-top: 16px !important;
  padding: 16px !important;
  background: rgba(255,255,255,0.04) !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}
body.app-body .profile-cashbacks-h {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 12px !important;
}
body.app-body .cashback-empty {
  color: rgba(255,255,255,0.35) !important;
  font-size: 14px !important;
  text-align: center !important;
  padding: 20px 0 !important;
}

/* --- 3. GRADIENT HOVER BUTTONS (adapted from devpool visual) --- */
body.app-body .command-row {
  background: radial-gradient(
    var(--gx-spread-x) var(--gx-spread-y) at var(--gx-pos-x) var(--gx-pos-y),
    var(--gx-c1) var(--gx-stop1),
    var(--gx-c2) var(--gx-stop2),
    var(--gx-c3) var(--gx-stop3),
    var(--gx-c4) var(--gx-stop4),
    var(--gx-c5) var(--gx-stop5)
  ) !important;
  background-image: radial-gradient(
    var(--gx-spread-x) var(--gx-spread-y) at var(--gx-pos-x) var(--gx-pos-y),
    var(--gx-c1) var(--gx-stop1),
    var(--gx-c2) var(--gx-stop2),
    var(--gx-c3) var(--gx-stop3),
    var(--gx-c4) var(--gx-stop4),
    var(--gx-c5) var(--gx-stop5)
  ) !important;
  border: 1px solid rgba(90,184,255,0.12) !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
  transition:
    --gx-pos-x 0.5s,
    --gx-pos-y 0.5s,
    --gx-spread-x 0.5s,
    --gx-spread-y 0.5s,
    --gx-c1 0.5s,
    --gx-c2 0.5s,
    --gx-c3 0.5s,
    --gx-c4 0.5s,
    --gx-c5 0.5s,
    --gx-stop1 0.5s,
    --gx-stop2 0.5s,
    --gx-stop3 0.5s,
    --gx-stop4 0.5s,
    --gx-stop5 0.5s,
    transform 0.2s ease,
    box-shadow 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

body.app-body .command-row::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  padding: 1px !important;
  background-image: linear-gradient(var(--gx-border-angle), rgba(90,184,255,0.1), rgba(90,184,255,0.4)) !important;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  mask-composite: exclude !important;
  -webkit-mask-composite: xor !important;
  pointer-events: none !important;
  transition: --gx-border-angle 0.5s !important;
}

body.app-body .command-row:hover,
body.app-body .command-row:active {
  --gx-pos-x: 0% !important;
  --gx-pos-y: 92% !important;
  --gx-spread-x: 120% !important;
  --gx-spread-y: 103% !important;
  --gx-c1: #0A84FF !important;
  --gx-c2: #0066CC !important;
  --gx-c3: #003366 !important;
  --gx-c4: #001830 !important;
  --gx-c5: #000 !important;
  --gx-border-angle: 190deg !important;
  --gx-stop1: 0% !important;
  --gx-stop2: 9% !important;
  --gx-stop3: 21% !important;
  --gx-stop4: 71% !important;
  --gx-stop5: 86% !important;
  box-shadow: 0 4px 20px rgba(10,132,255,0.25) !important;
}

/* Fill sweep on hover (from devpool visual "переход") */
body.app-body .command-row::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, transparent, rgba(10,132,255,0.08), transparent) !important;
  transform: scaleX(0) !important;
  transform-origin: left center !important;
  transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.6, 0.9) !important;
  pointer-events: none !important;
  border-radius: inherit !important;
}
body.app-body .command-row:hover::after {
  transform: scaleX(1) !important;
}

/* --- 4. NAV SLIDER ANIMATION --- */
body.app-body .app-bnav .bn-btn {
  transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease !important;
}
body.app-body .app-bnav .bn-btn.is-active {
  animation: navSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
@keyframes navSlideIn {
  0% { transform: scale(0.8); opacity: 0.5; }
  100% { transform: scale(1); opacity: 1; }
}

/* --- 5. BETTER STORY GRID --- */
body.app-body .story-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  padding: 0 16px !important;
  margin: 24px 0 !important;
}
body.app-body .story-card {
  grid-column: span 1 !important;
  min-height: 160px !important;
  padding: 20px 16px !important;
  border-radius: 20px !important;
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 8px !important;
  transition: transform 0.3s ease, border-color 0.3s ease !important;
}
body.app-body .story-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(10,132,255,0.25) !important;
}
body.app-body .story-card.is-tall {
  grid-column: span 1 !important;
  min-height: 160px !important;
}
body.app-body .story-icon {
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  background: rgba(10,132,255,0.15) !important;
  flex-shrink: 0 !important;
}
body.app-body .story-icon svg {
  width: 20px !important;
  height: 20px !important;
  fill: #0A84FF !important;
}
body.app-body .story-card strong {
  font-size: 13px !important;
  color: #ffffff !important;
}
body.app-body .story-card p {
  font-size: 11px !important;
  color: rgba(255,255,255,0.45) !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}
@media (max-width: 480px) {
  body.app-body .story-grid {
    grid-template-columns: 1fr !important;
  }
  body.app-body .story-card {
    flex-direction: row !important;
    text-align: left !important;
    min-height: auto !important;
    padding: 16px !important;
  }
}

/* --- 6. TAB SLIDE TRANSITIONS --- */
body.app-body .tab {
  animation: tabFadeSlideIn 0.3s ease both !important;
}
@keyframes tabFadeSlideIn {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* --- 7. Hide "Купить голоса" / "Открыть лиги" on home (keep hidden) --- */
body.app-body .home-action-row {
  display: none !important;
}

/* --- 8. SHOP CARD SPACING --- */
/* NFT card image bigger */
body.app-body .shop-pass-art {
  min-height: 280px !important;
  margin-bottom: 24px !important;
}
body.app-body .shop-pass-art img {
  width: 100% !important;
  max-width: 320px !important;
  height: auto !important;
}
/* More distance between card image and vote slider */
body.app-body .shop-choice-card {
  margin-bottom: 28px !important;
}
/* Less distance between slider/tabs and header */
body.app-body .shop-choice {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body.app-body .shop-choice-tabs {
  margin-bottom: 10px !important;
}
body.app-body .shop-hero {
  margin-top: 8px !important;
  padding-top: 0 !important;
  gap: 20px !important;
}

/* --- 9. REFS STATS — unified rounded pill block --- */
body.app-body .refs-stats {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 24px !important;
  padding: 0 !important;
  margin: 16px 0 !important;
  overflow: hidden !important;
}
body.app-body .refs-stat {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 12px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  gap: 4px !important;
}
body.app-body .refs-stat + .refs-stat {
  border-left: 1px solid rgba(255,255,255,0.08) !important;
}
body.app-body .refs-stat .rs-label {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: rgba(255,255,255,0.45) !important;
  font-weight: 600 !important;
}
body.app-body .refs-stat .rs-value {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #0A84FF !important;
}

/* --- 10. PROFILE CASHBACKS — bordered block --- */
body.app-body .profile-cashbacks,
body.app-body .tab-profile .profile-cashbacks,
body.app-body .profile-shell .profile-cashbacks {
  margin-top: 20px !important;
  padding: 20px !important;
  background: rgba(10,132,255,0.04) !important;
  background-image: none !important;
  border-radius: 24px !important;
  border: 2px solid rgba(90,184,255,0.30) !important;
  box-shadow: 0 0 24px rgba(10,132,255,0.10), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
body.app-body .profile-cashbacks-h {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 14px !important;
  letter-spacing: 0.02em !important;
}
body.app-body .cashback-empty {
  color: rgba(255,255,255,0.30) !important;
  font-size: 14px !important;
  text-align: center !important;
  padding: 24px 0 !important;
  margin: 0 !important;
}

/* ============================================================
   v=115 — Shop card flip
   ============================================================ */

/* Shop card flip animation */
@keyframes shopCardFlip {
  0%   { transform: perspective(800px) rotateY(0deg); opacity: 1; }
  40%  { transform: perspective(800px) rotateY(90deg); opacity: 0.4; }
  60%  { transform: perspective(800px) rotateY(90deg); opacity: 0.4; }
  100% { transform: perspective(800px) rotateY(0deg); opacity: 1; }
}
body.app-body .shop-card-flip {
  animation: shopCardFlip 0.5s ease-in-out !important;
}

/* Shop buy button styling */
body.app-body .shop-buy-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 24px !important;
  background: linear-gradient(135deg, #0A84FF, #5AB8FF) !important;
  color: #ffffff !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  box-shadow: 0 4px 16px rgba(10,132,255,0.3) !important;
}
body.app-body .shop-buy-btn:active {
  transform: scale(0.95) !important;
}
body.app-body .shop-buy-btn svg {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
}

/* ============================================================
   v=116 — Refs metric strip (same as home) + equal share btns
   ============================================================ */

/* Refs metric strip: 2 columns, same visual as home metric-strip */
body.app-body .refs-metric-strip,
body.app-body .tab-refs .refs-metric-strip {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1px !important;
  margin: 16px 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(10, 132, 255, 0.22) !important;
  border-radius: 16px !important;
  background: linear-gradient(90deg, rgba(10,132,255,0.16), rgba(77,163,255,0.12), rgba(255,255,255,0.07)), rgba(255,255,255,0.06) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,0.24), 0 1px 0 rgba(255,255,255,0.08) inset !important;
}
body.app-body .refs-metric-strip .metric {
  background: radial-gradient(circle at 18% 0%, rgba(10,132,255,0.12), transparent 40%), linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.04)) !important;
  padding: 16px !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.app-body .refs-metric-strip .metric span {
  display: block !important;
  margin-bottom: 7px !important;
  color: rgba(255,255,255,0.45) !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
body.app-body .refs-metric-strip .metric strong {
  display: block !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.04em !important;
  color: #ffffff !important;
}

/* Share buttons: equal width, same height */
body.app-body .refs-share-row {
  display: flex !important;
  gap: 10px !important;
}
body.app-body .refs-share-row .btn-share {
  flex: 1 1 0% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px 16px !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  min-width: 0 !important;
}

/* ============================================================
   v=117 — Inline copy icons, rewards metric-strip
   ============================================================ */

/* Refs: compact inline copy icon button */
body.app-body .refs-code-row,
body.app-body .refs-link-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
body.app-body .refs-code-row .refs-code,
body.app-body .refs-link-row .refs-link {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.app-body .refs-copy-icon {
  flex-shrink: 0 !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}
body.app-body .refs-copy-icon:active {
  background: rgba(255,255,255,0.18) !important;
  transform: scale(0.9) !important;
}
body.app-body .refs-copy-icon svg {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
}

/* Rewards: XP/LVL metric strip — same style as home */
body.app-body .rewards-metric-strip {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1px !important;
  margin: 16px 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(10, 132, 255, 0.22) !important;
  border-radius: 16px !important;
  background: linear-gradient(90deg, rgba(10,132,255,0.16), rgba(77,163,255,0.12), rgba(255,255,255,0.07)), rgba(255,255,255,0.06) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,0.24), 0 1px 0 rgba(255,255,255,0.08) inset !important;
}
body.app-body .rewards-metric-strip .metric {
  background: radial-gradient(circle at 18% 0%, rgba(10,132,255,0.12), transparent 40%), linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.04)) !important;
  padding: 16px !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.app-body .rewards-metric-strip .metric span {
  display: block !important;
  margin-bottom: 7px !important;
  color: rgba(255,255,255,0.45) !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
body.app-body .rewards-metric-strip .metric strong {
  display: block !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.04em !important;
  color: #ffffff !important;
}

/* Kill old reward-points-pill if any leftover */
body.app-body .reward-points-pill {
  display: none !important;
}

/* ============================================================
   v=119 — Rewards: restore blue-tinted reward emoji
   ============================================================ */

body.app-body .tab-rewards .reward-node .reward-art,
body.app-body .tab-rewards .reward-art,
body.app-body .reward-step .reward-art,
body.app-body .reward-node .reward-art,
body.app-body .reward-art,
body.app-body span.reward-art,
body.app-body [class*="reward-art"] {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 28px !important;
  line-height: 1 !important;
  color: #5fb6ff !important;
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,0.30), rgba(95,182,255,0.16) 48%, rgba(95,182,255,0.04) 100%) !important;
  border: 1px solid rgba(95,182,255,0.24) !important;
  border-radius: 14px !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.28),
    0 0 22px rgba(95,182,255,0.16),
    inset 0 1px 0 rgba(255,255,255,0.24) !important;
  filter: grayscale(1) sepia(1) saturate(4.8) hue-rotate(164deg) brightness(1.18) contrast(1.04) !important;
  mix-blend-mode: normal !important;
  transform: none !important;
  pointer-events: none !important;
}

body.app-body .tab-rewards .reward-node {
  grid-template-columns: auto minmax(0, 1fr) !important;
  column-gap: 12px !important;
  align-items: center !important;
}

body.app-body .tab-rewards .reward-node strong {
  grid-column: 2 !important;
  align-self: center !important;
}

body.app-body .tab-rewards .reward-node.is-unavailable .reward-art,
body.app-body .tab-rewards .reward-node.is-locked .reward-art {
  opacity: 0.42 !important;
  filter: grayscale(1) sepia(1) saturate(2.6) hue-rotate(164deg) brightness(0.78) contrast(0.95) !important;
}

body.app-body .tab-rewards .reward-node.is-available .reward-art,
body.app-body .tab-rewards .reward-node.is-claimed .reward-art {
  opacity: 1 !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,0.30),
    0 0 30px rgba(95,182,255,0.28),
    inset 0 1px 0 rgba(255,255,255,0.30) !important;
}

/* v=120 — beat the legacy "KILL emoji/images" layer with a final rewards-only selector. */
body.app-body .tab-rewards article.reward-step .reward-node span.reward-art.reward-art,
body.app-body .tab-rewards .reward-step .reward-node span.reward-art.reward-art,
body.app-body .tab-rewards button.reward-node span.reward-art.reward-art {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  inset: auto !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  overflow: visible !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  font-size: 28px !important;
  line-height: 1 !important;
  color: #5fb6ff !important;
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,0.30), rgba(95,182,255,0.18) 48%, rgba(95,182,255,0.05) 100%) !important;
  border: 1px solid rgba(95,182,255,0.24) !important;
  border-radius: 14px !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.28),
    0 0 22px rgba(95,182,255,0.18),
    inset 0 1px 0 rgba(255,255,255,0.24) !important;
  filter: grayscale(1) sepia(1) saturate(4.8) hue-rotate(164deg) brightness(1.18) contrast(1.04) !important;
  transform: none !important;
  pointer-events: none !important;
}

body.app-body .tab-rewards article.reward-step .reward-node.is-unavailable span.reward-art.reward-art,
body.app-body .tab-rewards article.reward-step .reward-node.is-locked span.reward-art.reward-art {
  opacity: 0.42 !important;
  filter: grayscale(1) sepia(1) saturate(2.6) hue-rotate(164deg) brightness(0.78) contrast(0.95) !important;
}

/* v=121 - shop card page-turn, sliding bottom nav pill, oversized clipped reward art. */
body.app-body .tab-shop .shop-choice-card,
body.app-body .shop-choice-card[data-shop-featured] {
  transform-origin: center center !important;
  will-change: transform, opacity, filter !important;
  backface-visibility: hidden !important;
  perspective: 900px !important;
  overflow: hidden !important;
}

body.app-body .tab-shop .shop-choice-card.shop-slide-out.shop-slide-next {
  animation: shop-page-out-next 165ms cubic-bezier(0.55, 0, 1, 0.45) both !important;
}

body.app-body .tab-shop .shop-choice-card.shop-slide-out.shop-slide-prev {
  animation: shop-page-out-prev 165ms cubic-bezier(0.55, 0, 1, 0.45) both !important;
}

body.app-body .tab-shop .shop-choice-card.shop-slide-in.shop-slide-next {
  animation: shop-page-in-next 520ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

body.app-body .tab-shop .shop-choice-card.shop-slide-in.shop-slide-prev {
  animation: shop-page-in-prev 520ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

@keyframes shop-page-out-next {
  to {
    opacity: 0;
    filter: blur(7px);
    transform: translate3d(58px, 0, 0) scale(0.985);
  }
}

@keyframes shop-page-out-prev {
  to {
    opacity: 0;
    filter: blur(7px);
    transform: translate3d(-58px, 0, 0) scale(0.985);
  }
}

@keyframes shop-page-in-next {
  from {
    opacity: 0;
    filter: blur(9px);
    transform: translate3d(-58px, 0, 0) scale(0.985);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes shop-page-in-prev {
  from {
    opacity: 0;
    filter: blur(9px);
    transform: translate3d(58px, 0, 0) scale(0.985);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

body.app-body .app-bnav[data-active-tab="home"] { --nav-index: 0; }
body.app-body .app-bnav[data-active-tab="leagues"] { --nav-index: 1; }
body.app-body .app-bnav[data-active-tab="shop"] { --nav-index: 2; }
body.app-body .app-bnav[data-active-tab="rewards"] { --nav-index: 3; }
body.app-body .app-bnav[data-active-tab="refs"] { --nav-index: 4; }
body.app-body .app-bnav[data-active-tab="profile"],
body.app-body .app-bnav[data-active-tab="admin"] { --nav-index: 5; }

body.app-body nav.app-bnav,
body.app-body .app-bnav {
  --nav-index: 0;
  --nav-pad-x: 16px;
  isolation: isolate !important;
}

body.app-body nav.app-bnav::before,
body.app-body .app-bnav::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 0 !important;
  left: var(--nav-pad-x) !important;
  top: 8px !important;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  width: calc((100% - (var(--nav-pad-x) * 2)) / 6) !important;
  height: auto !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #ffffff 0%, #dce8ef 100%) !important;
  box-shadow: 0 12px 26px rgba(0,0,0,0.35), inset 0 -2px 0 rgba(0,0,0,0.08) !important;
  transform: translate3d(calc(var(--nav-index) * 100%), 0, 0) !important;
  transition: transform 560ms cubic-bezier(0.16, 1, 0.3, 1), width 260ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: none !important;
}

body.app-body .app-bnav .bn-btn {
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

body.app-body .app-bnav .bn-btn.is-active {
  animation: none !important;
  background: transparent !important;
  color: #050505 !important;
  transform: none !important;
}

body.app-body .app-bnav .bn-btn.is-active svg,
body.app-body .app-bnav .bn-btn.is-active svg path,
body.app-body .app-bnav .bn-btn.is-active svg use {
  color: #050505 !important;
  fill: #050505 !important;
}

body.app-body .tab-rewards article.reward-step .reward-node,
body.app-body .tab-rewards .reward-step .reward-node,
body.app-body .tab-rewards button.reward-node {
  position: relative !important;
  overflow: hidden !important;
  padding-right: 82px !important;
  isolation: isolate !important;
}

body.app-body .tab-rewards article.reward-step .reward-node span.reward-art.reward-art,
body.app-body .tab-rewards .reward-step .reward-node span.reward-art.reward-art,
body.app-body .tab-rewards button.reward-node span.reward-art.reward-art {
  position: absolute !important;
  inset: auto -8px -38px auto !important;
  width: 106px !important;
  min-width: 106px !important;
  max-width: 106px !important;
  height: 106px !important;
  min-height: 106px !important;
  max-height: 106px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  font-size: 74px !important;
  line-height: 1 !important;
  color: #5fb6ff !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: grayscale(1) sepia(1) saturate(5.2) hue-rotate(164deg) brightness(1.22) contrast(1.06) drop-shadow(0 14px 20px rgba(0,0,0,0.38)) !important;
  opacity: 0.78 !important;
  transform: rotate(-10deg) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

body.app-body .tab-rewards .reward-node > *:not(.reward-art) {
  position: relative !important;
  z-index: 2 !important;
}

body.app-body .tab-rewards article.reward-step .reward-node.is-unavailable span.reward-art.reward-art,
body.app-body .tab-rewards article.reward-step .reward-node.is-locked span.reward-art.reward-art {
  opacity: 0.18 !important;
  filter: grayscale(1) sepia(1) saturate(2.2) hue-rotate(164deg) brightness(0.76) contrast(0.95) drop-shadow(0 10px 16px rgba(0,0,0,0.28)) !important;
}

body.app-body .tab-rewards article.reward-step .reward-node.is-available span.reward-art.reward-art,
body.app-body .tab-rewards article.reward-step .reward-node.is-claimed span.reward-art.reward-art {
  opacity: 0.9 !important;
}

@media (prefers-reduced-motion: reduce) {
  body.app-body .tab-shop .shop-choice-card.shop-slide-out,
  body.app-body .tab-shop .shop-choice-card.shop-slide-in {
    animation: none !important;
  }
  body.app-body nav.app-bnav::before,
  body.app-body .app-bnav::before {
    transition-duration: 0.01ms !important;
  }
}

/* v=123 - equal compact action buttons on the home screen. */
body.app-body .tab-home .match-insight,
body.app-body .tab-home .story-grid > .story-card,
body.app-body .tab-home .story-card.is-tall {
  min-height: 72px !important;
  height: 72px !important;
  max-height: 72px !important;
  box-sizing: border-box !important;
  border-radius: 18px !important;
}

body.app-body .tab-home .match-insight {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  width: calc(100% + 16px) !important;
  max-width: none !important;
  margin: 12px -8px 0 !important;
  padding: 14px 16px !important;
  overflow: hidden !important;
}

body.app-body .tab-home .match-insight > span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.app-body .tab-home .story-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 12px !important;
}

body.app-body .tab-home .story-grid > .story-card,
body.app-body .tab-home .story-card.is-tall {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  align-items: center !important;
  align-content: center !important;
  justify-items: start !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  text-align: left !important;
  overflow: hidden !important;
}

body.app-body .tab-home .story-grid > .story-card .story-icon {
  width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
}

body.app-body .tab-home .story-grid > .story-card strong {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

body.app-body .tab-home .story-grid > .story-card p {
  display: none !important;
}

@media (max-width: 640px) {
  body.app-body .tab-home .story-grid {
    grid-template-columns: 1fr !important;
    padding-inline: 8px !important;
  }
}

/* =================================================================
 * v=104 — User cleanup pass (2026-05-02):
 *   1) Three home story-cards (Купи NFT / Получи голос / Держи долю)
 *      must be the SAME height. Drop the .is-tall override.
 *   2) Shop pack swap: nice fade/slide animation when switching
 *      between 1 / 5 / 10 vote tiers (the JS adds .is-swapping for
 *      ~280 ms — see app.js renderShopFeatured).
 *   3) Refs stats card: label and value on the SAME row across every
 *      .refs-stat block. Strip the SVG icon if any.
 * ================================================================= */

/* (1) Equal-size story cards */
body.app-body .tab-home .story-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 10px !important;
}
body.app-body .tab-home .story-grid > .story-card,
body.app-body .tab-home .story-grid > .story-card.is-tall {
  height: 100% !important;
  min-height: 0 !important;
  grid-row: span 1 !important;
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}
@media (max-width: 640px) {
  body.app-body .tab-home .story-grid {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
  }
}

/* (2) Shop choice-card swap animation */
body.app-body .tab-shop .shop-choice-card {
  transition:
    opacity 240ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 240ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
body.app-body .tab-shop .shop-choice-card.is-swapping {
  opacity: 0 !important;
  transform: translateX(-32px) scale(0.97) !important;
  filter: blur(2px) !important;
  pointer-events: none !important;
}
body.app-body .tab-shop .shop-choice-card.is-entering {
  animation: shopPackEnter 320ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
}
@keyframes shopPackEnter {
  0% { opacity: 0; transform: translateX(36px) scale(0.97); filter: blur(3px); }
  60% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
}

/* (3) Refs stats — label and value on the same row, no icon */
body.app-body .tab-refs .refs-stats {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}
body.app-body .tab-refs .refs-stats .refs-stat {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  min-height: 48px !important;
  text-align: left !important;
}
body.app-body .tab-refs .refs-stats .refs-stat .rs-label {
  flex: 1 1 auto !important;
  text-align: left !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.app-body .tab-refs .refs-stats .refs-stat .rs-value {
  flex: 0 0 auto !important;
  text-align: right !important;
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
/* Hide every icon inside refs-stat (svg + img + .mt-svg-icon wrapper). */
body.app-body .tab-refs .refs-stats .refs-stat svg,
body.app-body .tab-refs .refs-stats .refs-stat img,
body.app-body .tab-refs .refs-stats .refs-stat .mt-svg-icon,
body.app-body .tab-refs .refs-stats .refs-stat [class*="icon"] {
  display: none !important;
}

/* ============================================================
   v=131 — Prize Pool + Check-in (10=1 vote) + Gift Exchange
   ============================================================ */

body.app-body .prize-pool-banner {
  margin: 16px 16px 0 !important;
  padding: 20px !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(52,199,89,0.15), rgba(10,132,255,0.10)) !important;
  border: 1px solid rgba(52,199,89,0.3) !important;
  text-align: center !important;
}
body.app-body .prize-pool-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-bottom: 8px !important;
}
body.app-body .prize-pool-label {
  font-size: 14px !important;
  color: rgba(255,255,255,0.6) !important;
  font-weight: 600 !important;
}
body.app-body .prize-pool-value {
  font-size: 28px !important;
  font-weight: 900 !important;
  color: #34C759 !important;
}
body.app-body .prize-pool-meta {
  font-size: 12px !important;
  color: rgba(255,255,255,0.4) !important;
  display: flex !important;
  justify-content: center !important;
  gap: 6px !important;
}

body.app-body .checkin-shell {
  padding: 24px 16px !important;
}
body.app-body .checkin-head {
  text-align: center !important;
  margin-bottom: 16px !important;
}
body.app-body .checkin-head .section-h {
  font-size: 28px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 0 0 8px !important;
}
body.app-body .checkin-streak {
  font-size: 16px !important;
  color: #0A84FF !important;
  font-weight: 700 !important;
}
body.app-body .checkin-rule {
  text-align: center !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.5) !important;
  margin: 0 0 12px !important;
  font-weight: 600 !important;
}
body.app-body .checkin-progress-bar {
  position: relative !important;
  height: 32px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,0.08) !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
}
body.app-body .checkin-progress-fill {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  border-radius: 16px !important;
  background: linear-gradient(90deg, #0A84FF, #5AB8FF) !important;
  transition: width 0.4s ease !important;
}
body.app-body .checkin-progress-text {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4) !important;
}
body.app-body .checkin-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
}
body.app-body .checkin-day {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 6px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  transition: all 0.2s ease !important;
}
body.app-body .checkin-day.is-big {
  grid-column: span 5 !important;
  background: linear-gradient(135deg, rgba(10,132,255,0.15), rgba(90,184,255,0.10)) !important;
  border-color: rgba(10,132,255,0.3) !important;
}
body.app-body .checkin-day.is-done {
  background: rgba(10,132,255,0.20) !important;
  border-color: rgba(10,132,255,0.4) !important;
}
body.app-body .checkin-day.is-done .cd-num {
  color: #0A84FF !important;
}
body.app-body .checkin-day.is-current {
  border-color: #0A84FF !important;
  box-shadow: 0 0 12px rgba(10,132,255,0.3) !important;
}
body.app-body .cd-num {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,0.7) !important;
}
body.app-body .checkin-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 16px !important;
  border-radius: 16px !important;
  border: 0 !important;
  background: linear-gradient(135deg, #0A84FF, #5AB8FF) !important;
  color: #ffffff !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, opacity 0.2s ease !important;
}
body.app-body .checkin-btn:disabled {
  opacity: 0.4 !important;
  cursor: default !important;
}
body.app-body .checkin-btn:not(:disabled):active {
  transform: scale(0.97) !important;
}
body.app-body .checkin-status {
  text-align: center !important;
  margin-top: 12px !important;
  font-size: 14px !important;
  color: #0A84FF !important;
  font-weight: 600 !important;
}

body.app-body .gift-exchange-shell {
  padding: 24px 16px !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}
body.app-body .gift-exchange-shell .section-h {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 0 0 8px !important;
  text-align: center !important;
}
body.app-body .gift-rule {
  text-align: center !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.5) !important;
  margin: 0 0 16px !important;
  font-weight: 600 !important;
}
body.app-body .gift-exchange-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
body.app-body .gift-balance {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 15px !important;
  color: rgba(255,255,255,0.7) !important;
}
body.app-body .gift-balance strong {
  font-size: 20px !important;
  color: #ffffff !important;
  font-weight: 900 !important;
}
body.app-body .gift-exchange-btn {
  padding: 12px 20px !important;
  border-radius: 14px !important;
  border: 0 !important;
  background: linear-gradient(135deg, #FF9500, #FFB800) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, opacity 0.2s ease !important;
}
body.app-body .gift-exchange-btn:disabled {
  opacity: 0.4 !important;
  cursor: default !important;
}
body.app-body .gift-exchange-btn:not(:disabled):active {
  transform: scale(0.97) !important;
}
body.app-body .gift-status {
  text-align: center !important;
  margin-top: 12px !important;
  font-size: 14px !important;
  color: #FF9500 !important;
  font-weight: 600 !important;
}

/* ============================================================
   v=200 final contract: TZ_FOR_GPT production cleanup.
   Single source of truth lives at the very end to override old
   experimental layers without deleting working behavior.
   ============================================================ */

:root {
  --mt-bg: #020304;
  --mt-ink: #f7f7f5;
  --mt-muted: rgba(247, 247, 245, 0.58);
  --mt-soft: rgba(247, 247, 245, 0.10);
  --mt-glass: rgba(18, 20, 22, 0.72);
  --mt-glass-strong: rgba(25, 28, 31, 0.88);
  --mt-line: rgba(255, 255, 255, 0.08);
  --mt-blue: #5FB6FF;
  --mt-blue-2: #a8d8ff;
  --mt-radius: 24px;
  --mt-radius-sm: 16px;
  --mt-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  --mt-font-ui: "Montserrat", "Lato", sans-serif;
  --mt-font-text: "Lato", "Montserrat", sans-serif;
  --mt-font-brand: "Bagel Fat One", "Montserrat", sans-serif;
}

html,
body.app-body {
  background: var(--mt-bg) !important;
  color: var(--mt-ink) !important;
  font-family: var(--mt-font-ui) !important;
  min-height: 100% !important;
  -webkit-tap-highlight-color: transparent !important;
}

body.app-body::before,
body.app-body::after,
body.app-body [class*="cube"],
body.app-body [class*="Cube"],
body.app-body [class*="decor"],
body.app-body .reward-art-corner,
body.app-body .reward-deco,
body.app-body .choice-badge,
body.app-body .choice-pill {
  display: none !important;
  content: none !important;
}

body.app-body button,
body.app-body a {
  -webkit-tap-highlight-color: transparent !important;
}

body.app-body .app-main {
  width: min(100%, 460px) !important;
  margin: 0 auto !important;
  padding: 18px 8px calc(104px + env(safe-area-inset-bottom)) !important;
}

body.app-body .tab {
  padding: 0 !important;
}

/* Header: two-row grid, no overlap, logo restored. */
body.app-body .app-header,
body.app-body header.app-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  display: grid !important;
  grid-template-columns: 56px 1fr auto !important;
  grid-template-rows: 44px 34px !important;
  align-items: center !important;
  column-gap: 10px !important;
  row-gap: 4px !important;
  width: min(100% - 16px, 460px) !important;
  height: 92px !important;
  margin: 0 auto 18px !important;
  padding: 8px 12px !important;
  background: linear-gradient(180deg, rgba(22, 24, 27, 0.88), rgba(4, 5, 6, 0.82)) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--mt-line) !important;
  border-radius: 0 0 26px 26px !important;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.44) !important;
  backdrop-filter: blur(14px) saturate(150%) !important;
}

body.app-body .lang-toggle,
body.app-body [data-lang-toggle],
body.app-body [data-lang-cycle] {
  display: none !important;
}

body.app-body .hdr-burger,
body.app-body button.hdr-burger {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  width: 56px !important;
  height: 56px !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--mt-ink) !important;
  appearance: none !important;
}

body.app-body .hdr-burger svg {
  width: 38px !important;
  height: 38px !important;
  fill: currentColor !important;
  pointer-events: none !important;
}

body.app-body .brand-stack {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  display: grid !important;
  align-items: center !important;
  min-width: 0 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  transform: none !important;
  transition: none !important;
}

body.app-body .brand-stack:active,
body.app-body .brand-stack:hover,
body.app-body .brand-stack:focus {
  transform: none !important;
  filter: none !important;
}

body.app-body .brand-stack .brand-meme,
body.app-body .brand-stack .brand-throne {
  font-family: var(--mt-font-brand) !important;
  font-size: clamp(21px, 5.6vw, 30px) !important;
  font-weight: 400 !important;
  line-height: 0.82 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

body.app-body .brand-stack .brand-meme { color: #1B7CFF !important; }
body.app-body .brand-stack .brand-throne { color: #fff !important; }

body.app-body .hdr-tools {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body.app-body .wallet-btn {
  min-width: 92px !important;
  height: 38px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #f6f6f1 !important;
  color: #050505 !important;
  box-shadow: none !important;
  font: 800 12px/1 var(--mt-font-ui) !important;
  letter-spacing: 0 !important;
  transform: none !important;
}

body.app-body .wallet-btn .wallet-dot { display: none !important; }
body.app-body .wallet-btn:active { transform: scale(0.97) !important; }

body.app-body .app-header > .bal-widget,
body.app-body .app-header .bal-widget {
  grid-column: 2 / span 2 !important;
  grid-row: 2 !important;
  justify-self: start !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  height: 28px !important;
  padding: 4px 12px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #000 !important;
  box-shadow: none !important;
  font: 900 13px/1 var(--mt-font-ui) !important;
}

body.app-body .bal-widget svg,
body.app-body .bal-widget .bal-icon svg {
  width: 16px !important;
  height: 16px !important;
  fill: #000 !important;
}

body.app-body .bal-widget .bal-value { color: #000 !important; }

@media (max-width: 380px) {
  body.app-body .app-header,
  body.app-body header.app-header {
    grid-template-columns: 48px 1fr auto !important;
    column-gap: 8px !important;
    padding: 6px 10px !important;
  }
  body.app-body .hdr-burger,
  body.app-body button.hdr-burger {
    width: 48px !important;
    height: 48px !important;
  }
  body.app-body .hdr-burger svg {
    width: 32px !important;
    height: 32px !important;
  }
  body.app-body .wallet-btn {
    min-width: 0 !important;
    width: 64px !important;
    padding: 0 12px !important;
    font-size: 11px !important;
  }
  body.app-body .brand-stack .brand-meme,
  body.app-body .brand-stack .brand-throne {
    font-size: 19px !important;
  }
}

/* Bottom navigation: six equal buttons, one moving circular slider. */
body.app-body .app-bnav,
body.app-body nav.app-bnav {
  --nav-size: 48px;
  --nav-gap: 6px;
  --nav-index: 0;
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  z-index: 90 !important;
  display: grid !important;
  grid-template-columns: repeat(6, var(--nav-size)) !important;
  gap: var(--nav-gap) !important;
  width: auto !important;
  padding: 6px !important;
  border: 1px solid var(--mt-line) !important;
  border-radius: 999px !important;
  background: rgba(5, 5, 5, 0.90) !important;
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.56) !important;
  transform: translateX(-50%) !important;
  backdrop-filter: blur(14px) saturate(150%) !important;
}

body.app-body .app-bnav[data-active-tab="home"]     { --nav-index: 0 !important; }
body.app-body .app-bnav[data-active-tab="leagues"]  { --nav-index: 1 !important; }
body.app-body .app-bnav[data-active-tab="shop"]     { --nav-index: 2 !important; }
body.app-body .app-bnav[data-active-tab="rewards"]  { --nav-index: 3 !important; }
body.app-body .app-bnav[data-active-tab="tasks"]    { --nav-index: 4 !important; }
body.app-body .app-bnav[data-active-tab="roulette"] { --nav-index: 5 !important; }
body.app-body .app-bnav[data-active-tab="profile"],
body.app-body .app-bnav[data-active-tab="ai"],
body.app-body .app-bnav[data-active-tab="admin"]    { --nav-index: 0 !important; }

body.app-body .app-bnav::before,
body.app-body nav.app-bnav::before {
  content: "" !important;
  position: absolute !important;
  top: 6px !important;
  left: 6px !important;
  width: var(--nav-size) !important;
  height: var(--nav-size) !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(95, 182, 255, 0.18) !important;
  transform: translateX(calc(var(--nav-index) * (var(--nav-size) + var(--nav-gap)))) !important;
  transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 0 !important;
}

body.app-body .app-bnav::after,
body.app-body .app-bnav .nav-indicator,
body.app-body .app-bnav .nav-pill {
  display: none !important;
}

body.app-body .app-bnav .bn-btn {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--nav-size) !important;
  height: var(--nav-size) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.58) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: color 220ms ease, transform 120ms ease !important;
}

body.app-body .app-bnav .bn-btn.is-active {
  color: #000 !important;
}

body.app-body .app-bnav .bn-btn:active {
  transform: scale(0.94) !important;
}

body.app-body .app-bnav .bn-icon svg {
  width: 22px !important;
  height: 22px !important;
  fill: currentColor !important;
}

body.app-body .app-bnav .bn-l { display: none !important; }

@media (max-width: 380px) {
  body.app-body .app-bnav,
  body.app-body nav.app-bnav {
    --nav-size: 44px;
    --nav-gap: 4px;
    padding: 5px !important;
  }
  body.app-body .app-bnav::before,
  body.app-body nav.app-bnav::before {
    top: 5px !important;
    left: 5px !important;
  }
}

/* Shared glass blocks. */
body.app-body .metric-strip,
body.app-body .league-view-toggle,
body.app-body .league-tier-slider,
body.app-body .refs-card,
body.app-body .refs-stats,
body.app-body .profile-hero,
body.app-body .profile-scoreboard,
body.app-body .profile-cashbacks,
body.app-body .checkin-shell,
body.app-body .prize-pool-banner,
body.app-body .roulette-shell,
body.app-body .tasks-list,
body.app-body .task-card,
body.app-body .admin-shell {
  background: linear-gradient(145deg, rgba(28, 30, 33, 0.76), rgba(9, 10, 11, 0.70)) !important;
  border: 1px solid var(--mt-line) !important;
  border-radius: var(--mt-radius) !important;
  box-shadow: var(--mt-shadow) !important;
  backdrop-filter: blur(14px) saturate(130%) !important;
}

body.app-body .metric-strip {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 10px !important;
  overflow: hidden !important;
}

body.app-body .metric-strip .metric {
  min-height: 72px !important;
  padding: 12px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  box-shadow: none !important;
}

body.app-body .metric-strip .metric + .metric::before,
body.app-body .metric-strip .metric::before,
body.app-body .metric-strip .metric::after {
  display: none !important;
}

body.app-body .metric-strip .metric span {
  display: block !important;
  margin: 0 0 8px !important;
  color: var(--mt-muted) !important;
  font: 800 9px/1.1 var(--mt-font-ui) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

body.app-body .metric-strip .metric strong {
  color: var(--mt-ink) !important;
  font: 900 26px/1 var(--mt-font-ui) !important;
  letter-spacing: -0.02em !important;
}

/* Home vote card: no radial circle, clear tokens/buttons. */
body.app-body .arena-section,
body.app-body #active-vote-card,
body.app-body .arena-card,
body.app-body [data-vs-card] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body #active-vote-card,
body.app-body [data-vs-card] {
  padding: 0 !important;
  overflow: visible !important;
}

body.app-body #active-vote-card::before,
body.app-body #active-vote-card::after,
body.app-body .arena-card::before,
body.app-body .arena-card::after,
body.app-body [data-vs-card]::before,
body.app-body [data-vs-card]::after,
body.app-body .widget-team::before,
body.app-body .widget-team::after,
body.app-body .widget-team-orb::before,
body.app-body .widget-team-orb::after {
  display: none !important;
  content: none !important;
}

body.app-body .vote-widget,
body.app-body .widget-body {
  background: linear-gradient(150deg, rgba(23, 25, 28, 0.84), rgba(7, 8, 9, 0.76)) !important;
  border: 1px solid var(--mt-line) !important;
  border-radius: 28px !important;
  box-shadow: var(--mt-shadow) !important;
  overflow: hidden !important;
}

body.app-body .widget-team-orb {
  width: 72px !important;
  height: 72px !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.app-body .token-fallback-mark {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  border-radius: inherit !important;
  background: linear-gradient(135deg, #dfe5e8, #8b8d91) !important;
  color: #070707 !important;
  font: 900 21px/1 var(--mt-font-ui) !important;
}

body.app-body .token-logo-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

body.app-body .widget-team-name,
body.app-body [data-vs-name-a],
body.app-body [data-vs-name-b] {
  color: var(--mt-ink) !important;
  font: 900 18px/1 var(--mt-font-ui) !important;
}

body.app-body .widget-votes,
body.app-body [data-vs-votes-a],
body.app-body [data-vs-votes-b] {
  color: var(--mt-muted) !important;
  font-family: var(--mt-font-text) !important;
}

body.app-body .widget-progress,
body.app-body .progress-track {
  height: 10px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  overflow: hidden !important;
}

body.app-body [data-vs-bar],
body.app-body .progress-fill {
  height: 100% !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--mt-blue), #fff) !important;
  animation: mtBarIn 520ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

@keyframes mtBarIn {
  from { transform: scaleX(0.68); transform-origin: left; }
  to { transform: scaleX(1); transform-origin: left; }
}

body.app-body .widget-vote-btn {
  min-height: 56px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: #f6f6f1 !important;
  color: #050505 !important;
  box-shadow: none !important;
  font: 900 13px/1 var(--mt-font-ui) !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  perspective: none !important;
  transform-style: flat !important;
  transform: none !important;
}

body.app-body .widget-vote-btn::before,
body.app-body .widget-vote-btn::after {
  display: none !important;
}

body.app-body .widget-vote-btn:active:not(:disabled) {
  transform: scale(0.96) !important;
}

body.app-body .widget-vote-btn:disabled {
  opacity: 0.42 !important;
}

body.app-body .seg-control button,
body.app-body .home-cta,
body.app-body .dock-chip,
body.app-body .story-card,
body.app-body .command-row {
  border: 1px solid var(--mt-line) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: var(--mt-ink) !important;
  box-shadow: none !important;
  transform: none !important;
}

body.app-body .home-action-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

body.app-body .home-cta {
  min-height: 56px !important;
  border-radius: 18px !important;
}

body.app-body .home-cta:active,
body.app-body .seg-control button:active,
body.app-body .dock-chip:active,
body.app-body .story-card:active,
body.app-body .command-row:active {
  transform: scale(0.97) !important;
}

body.app-body .dock-bronze,
body.app-body .dock-silver,
body.app-body .dock-gold {
  background: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.035)) !important;
}

/* Shop: no 1/5/10 slider, no duplicated catalog panels, one base NFT pack. */
body.app-body .shop-choice-tabs,
body.app-body [data-shop-choice-tabs],
body.app-body [data-shop-tier],
body.app-body .shop-status-grid,
body.app-body .shop-included,
body.app-body .shop-pass-art,
body.app-body .shop-pack-section {
  display: none !important;
}

body.app-body .tab-shop .shop-choice {
  margin: 0 !important;
  padding: 0 !important;
}

body.app-body .tab-shop .shop-choice-card {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  padding: 0 18px 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.app-body .tab-shop .choice-art {
  position: relative !important;
  width: 100% !important;
  min-height: 246px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid var(--mt-line) !important;
  border-radius: 28px !important;
  background: linear-gradient(145deg, rgba(18,20,22,0.72), rgba(0,0,0,0.78)) !important;
  overflow: hidden !important;
}

body.app-body .tab-shop .choice-art img {
  width: min(96%, 370px) !important;
  height: auto !important;
  max-height: 212px !important;
  object-fit: contain !important;
  filter: none !important;
}

body.app-body .tab-shop .choice-copy,
body.app-body .tab-shop .choice-buy {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

body.app-body .tab-shop .choice-copy h2 {
  margin: 0 !important;
  color: #fff !important;
  font: 900 30px/0.95 var(--mt-font-ui) !important;
  letter-spacing: -0.03em !important;
  text-transform: uppercase !important;
}

body.app-body .tab-shop .choice-copy p {
  display: none !important;
}

body.app-body .tab-shop .choice-buy strong {
  color: #fff !important;
  font: 900 30px/1 var(--mt-font-ui) !important;
}

body.app-body .tab-shop .choice-action,
body.app-body .tab-shop .shop-primary,
body.app-body .tab-shop .shop-secondary {
  min-height: 54px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: #f6f6f1 !important;
  color: #050505 !important;
  box-shadow: none !important;
  font: 900 13px/1 var(--mt-font-ui) !important;
  text-decoration: none !important;
  transform: none !important;
}

body.app-body .tab-shop .shop-hero {
  margin: 0 !important;
  padding: 0 18px 22px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body .tab-shop .shop-hero-copy {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body .tab-shop .shop-title,
body.app-body .tab-shop .shop-copy {
  display: none !important;
}

body.app-body .tab-shop .shop-hero-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

/* League controls: glass but opaque enough, no 3D. */
body.app-body .league-view-toggle,
body.app-body .league-tier-slider,
body.app-body .tasks-tabs {
  display: grid !important;
  grid-auto-flow: column !important;
  gap: 6px !important;
  padding: 6px !important;
  border-radius: 999px !important;
  background: rgba(20, 22, 24, 0.92) !important;
  box-shadow: none !important;
}

body.app-body .league-view-toggle::before,
body.app-body .league-tier-slider::before,
body.app-body .tasks-tabs::before {
  display: none !important;
}

body.app-body .league-view-toggle button,
body.app-body .league-tier-slider button,
body.app-body .tasks-tabs button {
  min-height: 44px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(255,255,255,0.52) !important;
  box-shadow: none !important;
  transform: none !important;
  font: 900 13px/1 var(--mt-font-ui) !important;
}

body.app-body .league-view-toggle button.is-active,
body.app-body .league-tier-slider button.is-active,
body.app-body .tasks-tabs button.is-active {
  background: #fff !important;
  color: #050505 !important;
}

body.app-body .league-ribbon,
body.app-body .league-stage,
body.app-body .ls-match {
  border: 1px solid var(--mt-line) !important;
  background: rgba(255,255,255,0.04) !important;
  color: var(--mt-ink) !important;
  box-shadow: none !important;
}

/* Profile: readable rows, blue level badge. */
body.app-body .tab-profile .profile-shell {
  padding: 16px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.app-body .tab-profile .profile-hero {
  display: grid !important;
  grid-template-columns: 88px 1fr auto !important;
  gap: 16px !important;
  align-items: center !important;
  padding: 18px !important;
  position: relative !important;
}

body.app-body .tab-profile .profile-hero::after,
body.app-body .tab-profile .profile-shell::after {
  content: var(--profile-level, "LVL 1") !important;
  position: absolute !important;
  right: 18px !important;
  top: 18px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  background: var(--mt-blue) !important;
  color: #050505 !important;
  font: 900 11px/1 var(--mt-font-ui) !important;
  box-shadow: none !important;
}

body.app-body .tab-profile .profile-avatar {
  width: 88px !important;
  height: 88px !important;
  border-radius: 28px !important;
  background: linear-gradient(145deg, #f4f4f0, #8a8d91) !important;
  overflow: hidden !important;
}

body.app-body .tab-profile .profile-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

body.app-body .tab-profile .profile-scoreboard {
  display: grid !important;
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.app-body .tab-profile .profile-scoreboard article {
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.app-body .profile-scoreboard strong {
  order: 0 !important;
  color: #fff !important;
  font: 900 30px/1 var(--mt-font-ui) !important;
}

body.app-body .profile-scoreboard span,
body.app-body .profile-scoreboard small {
  order: 1 !important;
  color: var(--mt-muted) !important;
  font: 700 12px/1 var(--mt-font-text) !important;
  text-transform: uppercase !important;
}

body.app-body .profile-cashbacks {
  padding: 18px 20px !important;
}

body.app-body .profile-cashbacks h2,
body.app-body .profile-cashbacks-h {
  margin: 0 0 16px !important;
  padding-left: 0 !important;
  color: #fff !important;
  font: 900 25px/1 var(--mt-font-ui) !important;
}

/* Rewards/check-in: blue accents, text always legible. */
body.app-body .tab-rewards .prize-pool-banner,
body.app-body .tab-rewards .checkin-shell {
  margin: 14px 8px !important;
  padding: 18px !important;
}

body.app-body .tab-rewards .checkin-head .section-h,
body.app-body .tab-rewards .prize-pool-value {
  color: #fff !important;
  text-shadow: none !important;
  font-family: var(--mt-font-ui) !important;
}

body.app-body .tab-rewards .checkin-streak,
body.app-body .tab-rewards .checkin-status {
  color: var(--mt-blue) !important;
}

body.app-body .tab-rewards .checkin-step {
  background: #fff !important;
  color: #050505 !important;
  border: 0 !important;
  box-shadow: 0 8px 24px rgba(95, 182, 255, 0.14) !important;
}

body.app-body .tab-rewards .checkin-step.is-done,
body.app-body .tab-rewards .checkin-step.is-current {
  background: var(--mt-blue) !important;
  color: #050505 !important;
}

body.app-body .tab-rewards .checkin-progress-fill {
  background: linear-gradient(90deg, var(--mt-blue), #fff) !important;
}

body.app-body .tab-rewards .checkin-btn,
body.app-body .roulette-spin-btn,
body.app-body .task-btn {
  border: 0 !important;
  border-radius: 18px !important;
  background: #fff !important;
  color: #050505 !important;
  box-shadow: none !important;
  font-family: var(--mt-font-ui) !important;
}

/* Stats page inherits the app palette when it loads app.css. */
body.stats-body {
  background: var(--mt-bg) !important;
  color: var(--mt-ink) !important;
  font-family: var(--mt-font-ui) !important;
}

body.stats-body .stats-header,
body.stats-body .stats-card,
body.stats-body .m-card {
  background: linear-gradient(145deg, rgba(28, 30, 33, 0.76), rgba(9, 10, 11, 0.70)) !important;
  border: 1px solid var(--mt-line) !important;
  border-radius: var(--mt-radius) !important;
  box-shadow: var(--mt-shadow) !important;
}

body.stats-body .stats-foot {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body.app-body *,
  body.app-body *::before,
  body.app-body *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Vision: monochrome plush glass. Final override for v200. */
:root {
  --mt-bg: #020304;
  --mt-panel: rgba(255, 255, 255, 0.055);
  --mt-panel-strong: rgba(255, 255, 255, 0.095);
  --mt-panel-soft: rgba(255, 255, 255, 0.035);
  --mt-ink: #f7f7f4;
  --mt-muted: rgba(247, 247, 244, 0.62);
  --mt-dim: rgba(247, 247, 244, 0.36);
  --mt-line: rgba(255, 255, 255, 0.10);
  --mt-line-soft: rgba(255, 255, 255, 0.055);
  --mt-accent: #5fb6ff;
  --mt-accent-soft: rgba(95, 182, 255, 0.20);
  --mt-shadow: 0 20px 60px rgba(0, 0, 0, 0.44);
  --mt-radius: 28px;
  --mt-radius-sm: 18px;
  --mt-font-ui: "Montserrat", "Lato", sans-serif;
  --mt-font-display: "Montserrat", "Lato", sans-serif;
  --shadow-acid: 0 10px 32px rgba(95, 182, 255, 0.22), 0 1px 0 rgba(255, 255, 255, 0.14) inset;
}

html,
body.app-body {
  background:
    radial-gradient(circle at 50% -18%, rgba(95, 182, 255, 0.10), transparent 34rem),
    linear-gradient(180deg, #050607 0%, #020304 58%, #000 100%) !important;
  color: var(--mt-ink) !important;
  font-family: var(--mt-font-ui) !important;
  -webkit-tap-highlight-color: transparent;
}

body.app-body button,
body.app-body a,
body.app-body [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

body.app-body .app-shell {
  padding-top: 18px !important;
  padding-bottom: 116px !important;
}

body.app-body .tab {
  animation: tabEnter 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes tabEnter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.app-body .app-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 120 !important;
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) auto !important;
  grid-template-rows: 44px 30px !important;
  align-items: center !important;
  gap: 4px 10px !important;
  min-height: 92px !important;
  height: 92px !important;
  margin: 0 0 22px !important;
  padding: 8px 12px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--mt-line) !important;
  border-radius: 0 0 26px 26px !important;
  background: linear-gradient(180deg, rgba(18, 18, 18, 0.86), rgba(3, 4, 5, 0.76)) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.46) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
}

body.app-body .hdr-burger {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  width: 46px !important;
  height: 46px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: #050505 !important;
  box-shadow: none !important;
}

body.app-body .hdr-burger::before,
body.app-body .hdr-burger::after {
  background: #050505 !important;
  box-shadow: none !important;
}

body.app-body .brand-stack {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  align-self: center !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
  pointer-events: auto !important;
  text-decoration: none !important;
}

body.app-body .brand-stack:active,
body.app-body .brand-stack:hover {
  transform: none !important;
  filter: none !important;
}

body.app-body .brand-text,
body.app-body .brand-meme,
body.app-body .brand-throne {
  font-family: "Bagel Fat One", "Montserrat", sans-serif !important;
  line-height: 0.82 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

body.app-body .brand-meme,
body.app-body .brand-text .brand-meme {
  color: var(--mt-accent) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5) !important;
}

body.app-body .brand-throne,
body.app-body .brand-text .brand-throne {
  color: #fff !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45) !important;
}

body.app-body .hdr-tools {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body.app-body .lang-toggle {
  display: none !important;
}

body.app-body .wallet-btn {
  min-width: 92px !important;
  min-height: 40px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #f8f8f4 !important;
  color: #050505 !important;
  box-shadow: none !important;
  font-family: var(--mt-font-ui) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: none !important;
  transform: none !important;
}

body.app-body .wallet-btn::before,
body.app-body .wallet-btn::after,
body.app-body .wallet-dot {
  display: none !important;
}

body.app-body .wallet-btn:active {
  transform: scale(0.97) !important;
}

body.app-body .bal-widget {
  grid-column: 2 / 4 !important;
  grid-row: 2 !important;
  justify-self: stretch !important;
  min-height: 28px !important;
  padding: 0 12px !important;
  border: 1px solid var(--mt-line-soft) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #050505 !important;
  box-shadow: none !important;
  font-family: var(--mt-font-ui) !important;
}

body.app-body .bal-widget .bal-label,
body.app-body .bal-widget .bal-value {
  color: #050505 !important;
}

@media (max-width: 380px) {
  body.app-body .wallet-btn {
    min-width: 56px !important;
    padding-inline: 14px !important;
  }

  body.app-body .wallet-label {
    max-width: 48px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

body.app-body .app-bnav {
  --nav-items: 6;
  --nav-size: 50px;
  --nav-gap: 7px;
  position: fixed !important;
  left: 16px !important;
  right: 16px !important;
  bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  z-index: 110 !important;
  height: calc(var(--nav-size) + (var(--nav-gap) * 2)) !important;
  display: grid !important;
  grid-template-columns: repeat(var(--nav-items), 1fr) !important;
  align-items: center !important;
  gap: 0 !important;
  padding: var(--nav-gap) !important;
  border: 1px solid var(--mt-line-soft) !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, 0.78) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.56) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
}

body.app-body .app-bnav::before {
  content: "" !important;
  position: absolute !important;
  top: var(--nav-gap) !important;
  left: calc(var(--nav-gap) + ((((100vw - 32px) - (var(--nav-gap) * 2)) / var(--nav-items) - var(--nav-size)) / 2)) !important;
  width: var(--nav-size) !important;
  height: var(--nav-size) !important;
  border-radius: 999px !important;
  background: #f8f8f4 !important;
  box-shadow: 0 8px 18px rgba(95, 182, 255, 0.20) !important;
  transform: translateX(calc(((100vw - 32px - (var(--nav-gap) * 2)) / var(--nav-items)) * var(--nav-index, 0))) !important;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: none !important;
}

body.app-body .app-bnav[data-active-tab="home"] { --nav-index: 0; }
body.app-body .app-bnav[data-active-tab="leagues"] { --nav-index: 1; }
body.app-body .app-bnav[data-active-tab="shop"] { --nav-index: 2; }
body.app-body .app-bnav[data-active-tab="rewards"] { --nav-index: 3; }
body.app-body .app-bnav[data-active-tab="tasks"] { --nav-index: 4; }
body.app-body .app-bnav[data-active-tab="roulette"] { --nav-index: 5; }

body.app-body .bnav-btn,
body.app-body .bn-btn {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: var(--nav-size) !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.56) !important;
  box-shadow: none !important;
  transition: color 180ms ease, transform 120ms ease !important;
}

body.app-body .bnav-btn.is-active,
body.app-body .bn-btn.is-active {
  color: #050505 !important;
  background: transparent !important;
}

body.app-body .bnav-btn:active,
body.app-body .bn-btn:active {
  transform: scale(0.94) !important;
}

body.app-body .bnav-label,
body.app-body .bn-label {
  display: none !important;
}

body.app-body .page-hero,
body.app-body .home-hero,
body.app-body .shop-hero,
body.app-body .refs-hero,
body.app-body .profile-shell,
body.app-body .rewards-shell,
body.app-body .task-shell,
body.app-body .roulette-shell,
body.app-body .command-board,
body.app-body .story-grid,
body.app-body .league-map,
body.app-body .league-stack-section {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body .home-portrait {
  margin-top: 8px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.app-body .home-portrait::before,
body.app-body .home-portrait::after,
body.app-body .hero-photo::before,
body.app-body .hero-photo::after {
  display: none !important;
}

body.app-body .hero-photo {
  background: transparent !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  box-shadow: none !important;
}

body.app-body .metric-strip,
body.app-body .profile-scoreboard,
body.app-body .refs-stats,
body.app-body .shop-status-grid {
  border: 1px solid var(--mt-line-soft) !important;
  border-radius: var(--mt-radius) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.035)) !important;
  box-shadow: var(--mt-shadow) !important;
  backdrop-filter: blur(14px) saturate(135%) !important;
}

body.app-body .metric,
body.app-body .profile-scoreboard > *,
body.app-body .refs-stats > * {
  background: transparent !important;
  border: 0 !important;
  color: var(--mt-ink) !important;
  font-family: var(--mt-font-ui) !important;
}

body.app-body .metric span,
body.app-body .profile-scoreboard span,
body.app-body .refs-stats span {
  color: var(--mt-muted) !important;
  font-family: var(--mt-font-ui) !important;
  letter-spacing: 0.04em !important;
}

body.app-body .metric strong,
body.app-body .profile-scoreboard strong,
body.app-body .refs-stats strong {
  color: var(--mt-ink) !important;
  font-family: var(--mt-font-ui) !important;
}

body.app-body .arena-section,
body.app-body #active-vote-card,
body.app-body .vote-widget,
body.app-body .league-stage,
body.app-body .ls-match,
body.app-body .league-ribbon,
body.app-body .story-card,
body.app-body .command-row,
body.app-body .refs-card,
body.app-body .profile-hero,
body.app-body .profile-cashbacks,
body.app-body .checkin-shell,
body.app-body .prize-pool-banner,
body.app-body .reward-node,
body.app-body .task-card,
body.app-body .roulette-card {
  border: 1px solid var(--mt-line-soft) !important;
  border-radius: var(--mt-radius) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.028)) !important;
  color: var(--mt-ink) !important;
  box-shadow: var(--mt-shadow) !important;
  backdrop-filter: blur(14px) saturate(130%) !important;
}

body.app-body .arena-section {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body #active-vote-card,
body.app-body .vote-widget {
  overflow: hidden !important;
}

body.app-body #active-vote-card::before,
body.app-body #active-vote-card::after,
body.app-body .vote-widget::before,
body.app-body .vote-widget::after,
body.app-body .arena-section::before,
body.app-body .arena-section::after {
  display: none !important;
}

body.app-body .widget-team-orb {
  width: 78px !important;
  height: 78px !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.app-body .widget-team:not(.is-loser) .widget-team-orb::before,
body.app-body .widget-team:not(.is-loser) .widget-team-orb::after {
  display: none !important;
}

body.app-body .widget-team.is-loser {
  opacity: 0.42 !important;
  filter: grayscale(1) blur(0.2px) !important;
}

body.app-body .widget-team.is-loser .widget-team-orb::before,
body.app-body .widget-team.is-loser .widget-team-orb::after {
  content: "" !important;
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  top: 50% !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  display: block !important;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.35) !important;
}

body.app-body .widget-team.is-loser .widget-team-orb::before {
  transform: rotate(17deg) !important;
}

body.app-body .widget-team.is-loser .widget-team-orb::after {
  transform: rotate(-17deg) !important;
}

body.app-body .token-fallback-mark,
body.app-body .team-logo-fallback {
  border-radius: 22px !important;
  background: linear-gradient(135deg, var(--mt-accent), #f8f8f4) !important;
  color: #050505 !important;
  box-shadow: none !important;
  font-family: var(--mt-font-ui) !important;
}

body.app-body .widget-team-name,
body.app-body .ls-side,
body.app-body .league-token-row,
body.app-body .shop-title,
body.app-body .choice-title,
body.app-body .section-title,
body.app-body .command-title,
body.app-body .profile-name,
body.app-body .reward-title {
  font-family: var(--mt-font-display) !important;
  color: var(--mt-ink) !important;
  letter-spacing: -0.02em !important;
}

body.app-body .vs-track,
body.app-body .ls-bar,
body.app-body .m-bar {
  height: 11px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  overflow: hidden !important;
}

body.app-body .vs-fill,
body.app-body .ls-fill,
body.app-body .m-fill {
  background: linear-gradient(90deg, var(--mt-accent), #f8f8f4) !important;
  animation: mtBarIn 620ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

@keyframes mtBarIn {
  from {
    transform: scaleX(0);
    transform-origin: left;
  }
  to {
    transform: scaleX(1);
    transform-origin: left;
  }
}

body.app-body .widget-vote-btn,
body.app-body .shop-primary,
body.app-body .shop-secondary,
body.app-body .shop-buy,
body.app-body .seg-control button,
body.app-body .command-row,
body.app-body .copy-btn,
body.app-body .refs-share,
body.app-body .task-btn,
body.app-body .roulette-spin-btn {
  min-height: 54px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #f8f8f4 !important;
  color: #050505 !important;
  box-shadow: none !important;
  font-family: var(--mt-font-ui) !important;
  font-weight: 800 !important;
  text-transform: none !important;
  transform: none !important;
  transition: transform 120ms ease, opacity 160ms ease, background-color 160ms ease !important;
}

body.app-body .widget-vote-btn::before,
body.app-body .widget-vote-btn::after,
body.app-body .shop-primary::before,
body.app-body .shop-primary::after,
body.app-body .shop-secondary::before,
body.app-body .shop-secondary::after,
body.app-body .shop-buy::before,
body.app-body .shop-buy::after {
  display: none !important;
}

body.app-body .widget-vote-btn:active,
body.app-body .shop-primary:active,
body.app-body .shop-secondary:active,
body.app-body .shop-buy:active,
body.app-body .seg-control button:active,
body.app-body .copy-btn:active,
body.app-body .refs-share:active {
  transform: scale(0.96) !important;
}

body.app-body .widget-vote-btn[disabled],
body.app-body .shop-buy[disabled] {
  opacity: 0.55 !important;
}

body.app-body .seg-control,
body.app-body .league-view-toggle,
body.app-body .league-tier-slider,
body.app-body .shop-choice-tabs {
  border: 1px solid var(--mt-line-soft) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) !important;
  transform: none !important;
}

body.app-body .seg-control::before,
body.app-body .league-view-toggle::before,
body.app-body .league-tier-slider::before,
body.app-body .shop-choice-tabs::before,
body.app-body .seg-control::after,
body.app-body .league-view-toggle::after,
body.app-body .league-tier-slider::after,
body.app-body .shop-choice-tabs::after {
  box-shadow: none !important;
  transform: none !important;
}

body.app-body .shop-choice-tabs,
body.app-body [data-shop-choice-tabs],
body.app-body [data-shop-tier] {
  display: none !important;
}

body.app-body .shop-choice,
body.app-body .shop-hero,
body.app-body .shop-pack-section {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body .shop-pack-section,
body.app-body .shop-included,
body.app-body .shop-status-grid {
  display: none !important;
}

body.app-body .shop-choice-card,
body.app-body .shop-choice-card[data-shop-featured] {
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 22px !important;
  padding: 0 18px 26px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.app-body .choice-art {
  min-height: 230px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.app-body .choice-art img {
  width: min(92vw, 342px) !important;
  max-width: none !important;
  height: auto !important;
  object-fit: contain !important;
  filter: none !important;
}

body.app-body .shop-pass-art {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body .shop-pass-art img {
  filter: none !important;
}

body.app-body .choice-badge,
body.app-body .choice-pill,
body.app-body .reward-deco,
body.app-body .reward-art-corner,
body.app-body .floating-cube,
body.app-body .cube,
body.app-body [class*="cube"] {
  display: none !important;
}

body.app-body .choice-dots span {
  background: #f8f8f4 !important;
  opacity: 0.85 !important;
}

body.app-body .league-ribbon,
body.app-body .league-stage,
body.app-body .ls-match {
  background: rgba(255, 255, 255, 0.045) !important;
  border-color: var(--mt-line-soft) !important;
}

body.app-body .league-icon,
body.app-body .lr-icon,
body.app-body .command-icon,
body.app-body .story-icon {
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
  border: 0 !important;
}

body.app-body .dock-chip,
body.app-body .dock-bronze,
body.app-body .dock-silver,
body.app-body .dock-gold {
  border: 1px solid var(--mt-line-soft) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  color: var(--mt-ink) !important;
  box-shadow: none !important;
}

body.app-body .story-grid {
  display: grid !important;
  gap: 12px !important;
}

body.app-body .story-card {
  min-height: 72px !important;
  display: grid !important;
  grid-template-columns: 44px 1fr !important;
  align-items: center !important;
  gap: 12px !important;
}

body.app-body .story-card p {
  display: none !important;
}

body.app-body .trust-rail span,
body.app-body .command-row {
  background: rgba(255, 255, 255, 0.055) !important;
  border: 1px solid var(--mt-line-soft) !important;
}

body.app-body .profile-shell {
  display: grid !important;
  gap: 16px !important;
}

body.app-body .profile-hero {
  align-items: center !important;
}

body.app-body .profile-avatar,
body.app-body .profile-avatar img {
  background: linear-gradient(135deg, #fff, var(--mt-accent)) !important;
  color: #050505 !important;
  border: 0 !important;
}

body.app-body .profile-shell::after,
body.app-body .profile-level {
  background: var(--mt-accent) !important;
  color: #050505 !important;
  border: 0 !important;
}

body.app-body .profile-cashbacks {
  padding: 24px !important;
}

body.app-body .profile-cashbacks h2 {
  margin: 0 0 18px !important;
  padding-inline: 4px !important;
}

body.app-body .rewards-shell {
  padding: 0 10px 24px !important;
}

body.app-body .prize-pool-banner,
body.app-body .rewards-head,
body.app-body .checkin-head {
  border: 1px solid var(--mt-line-soft) !important;
  border-radius: var(--mt-radius) !important;
  background:
    radial-gradient(circle at 86% 20%, rgba(95, 182, 255, 0.18), transparent 10rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.035)) !important;
  color: var(--mt-ink) !important;
  text-shadow: none !important;
  box-shadow: var(--mt-shadow) !important;
}

body.app-body .reward-lanes,
body.app-body .checkin-path {
  background: transparent !important;
}

body.app-body .reward-lanes::before,
body.app-body .checkin-path::before {
  background: linear-gradient(180deg, var(--mt-accent), rgba(255, 255, 255, 0.78)) !important;
  width: 4px !important;
  box-shadow: 0 0 18px rgba(95, 182, 255, 0.22) !important;
}

body.app-body .reward-index,
body.app-body .checkin-day {
  background: #f8f8f4 !important;
  color: #050505 !important;
  border: 0 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28) !important;
}

body.app-body .reward-node,
body.app-body .checkin-step {
  overflow: hidden !important;
}

body.app-body .reward-node .reward-emoji,
body.app-body .checkin-step .reward-emoji {
  color: var(--mt-accent) !important;
  filter: grayscale(1) brightness(1.6) sepia(1) saturate(3) hue-rotate(170deg) !important;
  font-size: clamp(44px, 16vw, 70px) !important;
  opacity: 0.58 !important;
  position: absolute !important;
  right: -16px !important;
  bottom: -22px !important;
  pointer-events: none !important;
}

body.app-body .is-locked,
body.app-body .is-future {
  opacity: 0.44 !important;
}

body.app-body .is-reached,
body.app-body .is-claimable {
  opacity: 1 !important;
}

body.stats-body {
  background:
    radial-gradient(circle at 50% -20%, rgba(95, 182, 255, 0.10), transparent 32rem),
    #020304 !important;
  color: var(--mt-ink) !important;
  font-family: var(--mt-font-ui) !important;
}

body.stats-body .app-header.stats-header {
  background: linear-gradient(180deg, rgba(18, 18, 18, 0.86), rgba(3, 4, 5, 0.76)) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--mt-line) !important;
  border-radius: 0 0 26px 26px !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.46) !important;
}

body.stats-body .stats-card,
body.stats-body .m-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.028)) !important;
  border: 1px solid var(--mt-line-soft) !important;
  color: var(--mt-ink) !important;
}

/* v201 hard header/nav lock: wins against older accumulated theme blocks. */
html body.app-body > header.app-header {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) auto !important;
  grid-template-rows: 44px 30px !important;
  min-height: 92px !important;
  height: 92px !important;
  padding: 8px 12px !important;
  margin: 0 0 24px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 0 0 26px 26px !important;
  background: linear-gradient(180deg, rgba(18, 18, 18, 0.88), rgba(2, 3, 4, 0.78)) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.48) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
}

html body.app-body > header.app-header .hdr-burger {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  width: 46px !important;
  height: 46px !important;
  align-self: center !important;
  justify-self: start !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #f8f8f4 !important;
  color: #050505 !important;
  box-shadow: none !important;
}

html body.app-body > header.app-header .hdr-burger svg {
  width: 24px !important;
  height: 24px !important;
}

html body.app-body > header.app-header .brand-stack {
  position: static !important;
  inset: auto !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: grid !important;
  place-items: center !important;
  align-self: center !important;
  justify-self: center !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}

html body.app-body > header.app-header .brand-stack * {
  transform: none !important;
}

html body.app-body > header.app-header .brand-meme,
html body.app-body > header.app-header .brand-throne {
  display: block !important;
  font-family: "Bagel Fat One", "Montserrat", sans-serif !important;
  font-size: 27px !important;
  line-height: 0.78 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}

html body.app-body > header.app-header .brand-meme {
  color: #5fb6ff !important;
}

html body.app-body > header.app-header .brand-throne {
  color: #fff !important;
}

html body.app-body > header.app-header .hdr-tools {
  position: static !important;
  inset: auto !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: end !important;
}

html body.app-body > header.app-header .wallet-btn.wallet-btn {
  min-width: 86px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #f8f8f4 !important;
  color: #050505 !important;
  box-shadow: none !important;
  filter: none !important;
  text-transform: none !important;
}

html body.app-body > header.app-header .bal-widget {
  grid-column: 2 / 4 !important;
  grid-row: 2 !important;
  align-self: center !important;
  justify-self: start !important;
  width: auto !important;
  min-width: 68px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 12px !important;
  background: #f8f8f4 !important;
  color: #050505 !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

html body.app-body > header.app-header .bal-widget svg,
html body.app-body > header.app-header .bal-widget * {
  color: #050505 !important;
  fill: currentColor !important;
}

html body.app-body > nav.app-bnav .bn-btn,
html body.app-body > nav.app-bnav .bnav-btn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: var(--nav-size) !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

html body.app-body > nav.app-bnav .bn-btn.is-active,
html body.app-body > nav.app-bnav .bnav-btn.is-active {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  background: transparent !important;
  color: #050505 !important;
}

html body.app-body > nav.app-bnav.app-bnav {
  --nav-items: 6 !important;
  --nav-size: 50px !important;
  --nav-gap: 7px !important;
  left: 16px !important;
  right: auto !important;
  width: calc(100% - 32px) !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  justify-items: stretch !important;
  align-items: center !important;
  gap: 0 !important;
  padding: var(--nav-gap) !important;
}

html body.app-body > nav.app-bnav.app-bnav::before {
  left: calc(var(--nav-gap) + ((((100vw - 32px) - (var(--nav-gap) * 2)) / 6 - var(--nav-size)) / 2)) !important;
  transform: translateX(calc(((100vw - 32px - (var(--nav-gap) * 2)) / 6) * var(--nav-index, 0))) !important;
}

html body.app-body > nav.app-bnav .bn-icon,
html body.app-body > nav.app-bnav .bn-icon svg {
  transform: none !important;
  width: 22px !important;
  height: 22px !important;
}

html body.app-body .shop-hero-actions .shop-primary,
html body.app-body .shop-hero-actions .shop-secondary,
html body.app-body .shop-hero-actions .shop-primary *,
html body.app-body .shop-hero-actions .shop-secondary * {
  color: #050505 !important;
  fill: currentColor !important;
  opacity: 1 !important;
}

/* v205 mobile repair layer: header, drawer, bottom nav, shop, bracket, roulette. */
html,
body.app-body {
  width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  background:
    radial-gradient(circle at 50% -14rem, rgba(95, 182, 255, 0.18), transparent 30rem),
    linear-gradient(180deg, #050607 0%, #000 58%, #050505 100%) !important;
  color: #f7f7f2 !important;
  font-family: "Lato", "Montserrat", sans-serif !important;
  -webkit-tap-highlight-color: transparent !important;
  --mt-blue: #5fb6ff;
  --mt-white: #f7f7f2;
  --mt-soft: rgba(255, 255, 255, 0.72);
  --mt-muted: rgba(255, 255, 255, 0.52);
  --mt-glass: rgba(255, 255, 255, 0.055);
  --mt-glass-strong: rgba(255, 255, 255, 0.105);
  --mt-line: rgba(255, 255, 255, 0.12);
  --mt-radius-xl: 28px;
  --mt-radius-lg: 22px;
  --mt-shadow-hard: 0 18px 42px rgba(0, 0, 0, 0.48);
}

body.app-body {
  padding: 0 8px calc(104px + env(safe-area-inset-bottom)) !important;
}

body.app-body .app-main {
  width: 100% !important;
  max-width: 460px !important;
  margin: 0 auto !important;
  padding: 20px 0 0 !important;
}

body.app-body .tab[hidden] {
  display: none !important;
}

body.app-body .tab {
  animation: mt-tab-in 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes mt-tab-in {
  from { opacity: 0; transform: translate3d(14px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

body.app-body > header.app-header,
html body.app-body > header.app-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 120 !important;
  display: block !important;
  width: calc(100% + 16px) !important;
  max-width: none !important;
  height: 76px !important;
  min-height: 76px !important;
  margin: 0 -8px 22px !important;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px !important;
  border: 0 !important;
  border-radius: 0 0 26px 26px !important;
  background:
    linear-gradient(180deg, rgba(22, 22, 22, 0.92), rgba(0, 0, 0, 0.78)),
    rgba(0, 0, 0, 0.8) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.58) !important;
  backdrop-filter: blur(18px) saturate(130%) !important;
}

body.app-body > header.app-header .hdr-burger,
html body.app-body > header.app-header .hdr-burger {
  position: absolute !important;
  left: 14px !important;
  top: calc(10px + env(safe-area-inset-top)) !important;
  width: 48px !important;
  height: 48px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: #030303 !important;
  box-shadow: 0 6px 0 rgba(95, 182, 255, 0.18), 0 14px 26px rgba(0, 0, 0, 0.36) !important;
}

body.app-body > header.app-header .hdr-burger svg {
  width: 23px !important;
  height: 23px !important;
  fill: currentColor !important;
}

body.app-body > header.app-header .brand-stack,
html body.app-body > header.app-header .brand-stack {
  position: absolute !important;
  left: 50% !important;
  top: calc(34px + env(safe-area-inset-top)) !important;
  transform: translate(-50%, -50%) !important;
  display: grid !important;
  place-items: center !important;
  width: max-content !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none !important;
  text-decoration: none !important;
}

body.app-body > header.app-header .brand-stack:hover,
body.app-body > header.app-header .brand-stack:active {
  transform: translate(-50%, -50%) !important;
  filter: none !important;
}

body.app-body > header.app-header .brand-meme,
body.app-body > header.app-header .brand-throne,
html body.app-body > header.app-header .brand-meme,
html body.app-body > header.app-header .brand-throne {
  display: block !important;
  font-family: "Bagel Fat One", "Montserrat", sans-serif !important;
  font-size: 27px !important;
  line-height: 0.78 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  text-align: center !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.42) !important;
}

body.app-body > header.app-header .brand-meme { color: var(--mt-blue) !important; }
body.app-body > header.app-header .brand-throne { color: #fff !important; }

body.app-body > header.app-header .hdr-tools,
html body.app-body > header.app-header .hdr-tools {
  position: absolute !important;
  right: 14px !important;
  top: calc(10px + env(safe-area-inset-top)) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body.app-body > header.app-header .wallet-btn,
html body.app-body > header.app-header .wallet-btn.wallet-btn {
  min-width: 88px !important;
  max-width: 118px !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: #030303 !important;
  box-shadow: none !important;
  filter: none !important;
  font: 900 13px/1 "Montserrat", sans-serif !important;
  text-transform: none !important;
  transform: none !important;
}

body.app-body > header.app-header .wallet-dot,
body.app-body > header.app-header .wallet-btn::before,
body.app-body > header.app-header .wallet-btn::after {
  display: none !important;
  content: none !important;
}

body.app-body > header.app-header .wallet-label {
  max-width: 82px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

body.app-body > header.app-header .bal-widget,
html body.app-body > header.app-header .bal-widget {
  display: none !important;
}

body.app-body .nav-drawer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 240 !important;
  display: grid !important;
  place-items: stretch start !important;
  padding: calc(12px + env(safe-area-inset-top)) 14px 14px !important;
  background: rgba(0, 0, 0, 0.46) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 180ms ease !important;
  backdrop-filter: blur(10px) !important;
}

body.app-body .nav-drawer.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.app-body .nav-drawer-card {
  width: min(86vw, 330px) !important;
  max-height: calc(100dvh - 28px - env(safe-area-inset-top)) !important;
  overflow: auto !important;
  padding: 14px !important;
  border: 1px solid var(--mt-line) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(145deg, rgba(34, 34, 34, 0.96), rgba(4, 4, 4, 0.94)) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.68) !important;
  transform: translateX(-14px) scale(0.98) !important;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.app-body .nav-drawer.is-open .nav-drawer-card {
  transform: translateX(0) scale(1) !important;
}

body.app-body .nav-drawer-close {
  width: 42px !important;
  height: 42px !important;
  margin: 0 0 8px auto !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #000 !important;
  font: 900 22px/1 "Montserrat", sans-serif !important;
}

body.app-body .nav-drawer-item {
  width: 100% !important;
  min-height: 54px !important;
  display: grid !important;
  grid-template-columns: 28px 1fr !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 6px 0 !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: #fff !important;
  box-shadow: none !important;
  font: 900 14px/1.1 "Montserrat", sans-serif !important;
  text-align: left !important;
}

body.app-body .nav-drawer-item svg {
  width: 22px !important;
  height: 22px !important;
  fill: #fff !important;
}

body.app-body .nav-drawer-item.is-active {
  background: #fff !important;
  color: #000 !important;
}

body.app-body .nav-drawer-item.is-active svg {
  fill: #000 !important;
}

body.app-body > nav.app-bnav.app-bnav {
  --nav-items: 6 !important;
  --nav-size: 52px !important;
  --nav-gap: 8px !important;
  position: fixed !important;
  left: 14px !important;
  right: 14px !important;
  bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  z-index: 150 !important;
  width: auto !important;
  max-width: 432px !important;
  height: calc(var(--nav-size) + (var(--nav-gap) * 2)) !important;
  margin-inline: auto !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 0 !important;
  align-items: center !important;
  padding: var(--nav-gap) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, 0.82) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.62) !important;
  backdrop-filter: blur(18px) saturate(130%) !important;
  overflow: hidden !important;
}

body.app-body > nav.app-bnav.app-bnav::before {
  content: "" !important;
  position: absolute !important;
  top: var(--nav-gap) !important;
  left: calc(var(--nav-gap) + (((100% - (var(--nav-gap) * 2)) / var(--nav-items) - var(--nav-size)) / 2)) !important;
  width: var(--nav-size) !important;
  height: var(--nav-size) !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: 0 8px 0 rgba(95, 182, 255, 0.20) !important;
  transform: translate3d(calc(((100vw - 28px - (var(--nav-gap) * 2)) / var(--nav-items)) * var(--nav-index, 0)), 0, 0) !important;
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: none !important;
}

@media (min-width: 461px) {
  body.app-body > nav.app-bnav.app-bnav::before {
    transform: translate3d(calc(((432px - (var(--nav-gap) * 2)) / var(--nav-items)) * var(--nav-index, 0)), 0, 0) !important;
  }
}

body.app-body > nav.app-bnav[data-active-tab="home"] { --nav-index: 0 !important; }
body.app-body > nav.app-bnav[data-active-tab="leagues"] { --nav-index: 1 !important; }
body.app-body > nav.app-bnav[data-active-tab="shop"] { --nav-index: 2 !important; }
body.app-body > nav.app-bnav[data-active-tab="rewards"] { --nav-index: 3 !important; }
body.app-body > nav.app-bnav[data-active-tab="tasks"] { --nav-index: 4 !important; }
body.app-body > nav.app-bnav[data-active-tab="roulette"] { --nav-index: 5 !important; }

body.app-body > nav.app-bnav .bn-btn {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  height: var(--nav-size) !important;
  min-width: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.58) !important;
  box-shadow: none !important;
}

body.app-body > nav.app-bnav .bn-btn.is-active {
  color: #000 !important;
  background: transparent !important;
}

body.app-body > nav.app-bnav .bn-icon,
body.app-body > nav.app-bnav .bn-icon svg {
  width: 22px !important;
  height: 22px !important;
  fill: currentColor !important;
  color: currentColor !important;
}

body.app-body .page-kicker,
body.app-body .section-eyebrow,
body.app-body .lead-copy,
body.app-body .shop-copy,
body.app-body .league-copy,
body.app-body .shop-included,
body.app-body .shop-status-grid,
body.app-body .shop-pack-section > .section-eyebrow,
body.app-body .shop-pack-section > .section-sub,
body.app-body .shop-pack-section > .shop-pack-title,
body.app-body .shop-grid,
body.app-body .shop-pass-art,
body.app-body .shop-title {
  display: none !important;
}

body.app-body .display-title,
body.app-body .section-h,
body.app-body .home-title,
body.app-body .league-title,
body.app-body .tasks-hero .display-title {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 950 !important;
  letter-spacing: -0.03em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  text-shadow: 0 8px 0 rgba(255, 255, 255, 0.08) !important;
}

body.app-body .metric-strip {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  padding: 8px !important;
  border: 0 !important;
  border-radius: 26px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  box-shadow: none !important;
  backdrop-filter: blur(16px) !important;
}

body.app-body .metric {
  min-height: 74px !important;
  padding: 12px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

body.app-body .metric span {
  font: 900 9px/1.1 "Montserrat", sans-serif !important;
  color: rgba(255, 255, 255, 0.58) !important;
}

body.app-body .metric strong {
  font: 950 28px/1 "Montserrat", sans-serif !important;
  color: #fff !important;
}

body.app-body .home-portrait,
body.app-body .hero-photo {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

body.app-body .home-portrait::before,
body.app-body .home-portrait::after,
body.app-body .hero-photo::before,
body.app-body .hero-photo::after,
body.app-body .ambient-cube,
body.app-body .decor-cube,
body.app-body [class*="cube"] {
  display: none !important;
  content: none !important;
}

body.app-body .home-action-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin: 14px 0 30px !important;
}

body.app-body .home-cta,
body.app-body .seg-control button,
body.app-body .shop-primary,
body.app-body .shop-secondary,
body.app-body .task-btn,
body.app-body .roulette-spin-btn,
body.app-body .ai-send,
body.app-body .ai-attach {
  border: 0 !important;
  border-radius: 20px !important;
  min-height: 56px !important;
  background: #fff !important;
  color: #000 !important;
  box-shadow: 0 8px 0 rgba(95, 182, 255, 0.22), 0 18px 36px rgba(0, 0, 0, 0.34) !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 950 !important;
  text-transform: none !important;
}

body.app-body .home-cta svg,
body.app-body .shop-primary svg,
body.app-body .shop-secondary svg,
body.app-body .ai-send svg,
body.app-body .ai-attach svg {
  fill: currentColor !important;
  color: currentColor !important;
}

body.app-body .home-cta:active,
body.app-body .seg-control button:active,
body.app-body .shop-primary:active,
body.app-body .shop-secondary:active,
body.app-body .task-btn:active,
body.app-body .roulette-spin-btn:active,
body.app-body .ai-send:active,
body.app-body .ai-attach:active {
  transform: scale(0.96) !important;
}

body.app-body .home-league-dock {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 8px 0 28px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body .dock-chip {
  min-height: 72px !important;
  padding: 13px 12px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(150,150,150,0.68)) !important;
  color: #000 !important;
  box-shadow: 0 8px 0 rgba(0,0,0,0.38) !important;
  font-family: "Montserrat", sans-serif !important;
  overflow: hidden !important;
}

body.app-body .dock-chip::before,
body.app-body .dock-chip::after {
  display: none !important;
  content: none !important;
}

body.app-body .dock-chip span,
body.app-body .dock-chip strong {
  color: #000 !important;
  text-shadow: none !important;
}

body.app-body .arena-section {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.app-body #active-vote-card,
body.app-body .vote-widget {
  border: 0 !important;
  border-radius: 30px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  overflow: hidden !important;
}

body.app-body #active-vote-card::before,
body.app-body #active-vote-card::after,
body.app-body .vote-widget::before,
body.app-body .vote-widget::after,
body.app-body .widget-vs::before,
body.app-body .widget-vs::after,
body.app-body .widget-team-orb::before,
body.app-body .widget-team-orb::after,
body.app-body .widget-team-lottie::before,
body.app-body .widget-team-lottie::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

body.app-body .widget-vs {
  background: transparent !important;
}

body.app-body .widget-team-orb {
  width: 82px !important;
  height: 82px !important;
  border-radius: 22px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.app-body .token-fallback-mark {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, var(--mt-blue), #fafafa) !important;
  color: #000 !important;
  font: 950 20px/1 "Montserrat", sans-serif !important;
}

body.app-body .widget-team-name {
  color: #fff !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 950 !important;
}

body.app-body .widget-vote-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

body.app-body .widget-vote {
  min-height: 58px !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: #fff !important;
  color: #000 !important;
  box-shadow: 0 8px 0 rgba(95, 182, 255, 0.18) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 950 !important;
}

body.app-body .widget-vote[disabled] {
  opacity: 0.46 !important;
}

body.app-body .widget-progress > span,
body.app-body .ls-progress > span,
body.app-body .m-bar > span {
  height: 9px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--mt-blue), #e8e8e8) !important;
}

body.app-body .seg-control {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-top: 14px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body .story-grid,
body.app-body .command-board,
body.app-body .trust-rail {
  display: grid !important;
  gap: 10px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body .story-card,
body.app-body .command-row,
body.app-body .trust-rail span {
  min-height: 72px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 16px !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: #fff !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px) !important;
}

body.app-body .story-card p {
  display: none !important;
}

body.app-body .story-icon,
body.app-body .command-icon {
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}

body.app-body .story-icon svg,
body.app-body .command-icon svg,
body.app-body .command-chevron svg {
  fill: #fff !important;
  color: #fff !important;
}

body.app-body .shop-choice {
  display: grid !important;
  gap: 18px !important;
  padding: 0 !important;
  margin: 0 0 24px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.app-body .shop-choice::before,
body.app-body .shop-choice::after,
body.app-body .shop-choice-card::before,
body.app-body .shop-choice-card::after,
body.app-body .choice-art::before,
body.app-body .choice-art::after {
  display: none !important;
  content: none !important;
}

body.app-body .shop-choice-tabs,
body.app-body [data-shop-choice-tabs] {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  height: 62px !important;
  padding: 6px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.app-body .shop-choice-tabs::before,
body.app-body .shop-choice-tabs::after,
body.app-body [data-shop-choice-tabs]::before,
body.app-body [data-shop-choice-tabs]::after {
  display: none !important;
  content: none !important;
}

body.app-body .shop-choice-tabs button {
  position: relative !important;
  z-index: 1 !important;
  height: 50px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.55) !important;
  box-shadow: none !important;
  transform: none !important;
  font-family: "Montserrat", sans-serif !important;
}

body.app-body .shop-choice-tabs button.is-active {
  background: #fff !important;
  color: #000 !important;
  box-shadow: none !important;
}

body.app-body .shop-choice-tabs button span {
  display: block !important;
  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

body.app-body .shop-choice-tabs button small {
  display: block !important;
  margin-top: 2px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

body.app-body .shop-choice-card,
body.app-body .shop-choice-card[data-shop-featured] {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-areas:
    "art art"
    "copy buy" !important;
  gap: 14px !important;
  padding: 0 18px 18px !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.app-body .choice-art {
  grid-area: art !important;
  position: relative !important;
  height: clamp(220px, 57vw, 284px) !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.app-body .choice-art img,
body.app-body .sc-nft-img {
  width: min(112%, 360px) !important;
  max-width: none !important;
  height: auto !important;
  object-fit: contain !important;
  filter: none !important;
  transform: scale(1.24) !important;
  transform-origin: center !important;
  mix-blend-mode: normal !important;
}

body.app-body .choice-copy {
  grid-area: copy !important;
  align-self: center !important;
}

body.app-body .choice-copy h2 {
  margin: 0 !important;
  color: #fff !important;
  font: 950 clamp(28px, 9vw, 38px)/0.92 "Montserrat", sans-serif !important;
  text-transform: uppercase !important;
}

body.app-body .choice-copy p {
  display: none !important;
}

body.app-body .choice-buy {
  grid-area: buy !important;
  align-self: center !important;
  display: grid !important;
  justify-items: end !important;
  gap: 10px !important;
}

body.app-body .choice-buy strong {
  color: #fff !important;
  font: 950 30px/1 "Montserrat", sans-serif !important;
}

body.app-body .choice-buy .shop-buy-btn,
body.app-body .choice-buy .sc-buy,
body.app-body .shop-card .sc-buy {
  min-width: 126px !important;
  min-height: 56px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: #fff !important;
  color: #000 !important;
  box-shadow: none !important;
  font: 950 13px/1 "Montserrat", sans-serif !important;
}

body.app-body .pack-count,
body.app-body .choice-badge,
body.app-body .choice-pill {
  display: none !important;
}

body.app-body .nft-pip-row {
  position: absolute !important;
  left: 50% !important;
  bottom: 8px !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  gap: 5px !important;
}

body.app-body .nft-pip-row span {
  width: 10px !important;
  height: 10px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #fff, var(--mt-blue)) !important;
}

body.app-body .shop-hero,
body.app-body .shop-hero-copy,
body.app-body .shop-pack-section,
body.app-body .promo-strip {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.app-body .shop-hero-actions {
  display: grid !important;
  gap: 10px !important;
  margin: 4px 0 0 !important;
}

body.app-body .shop-hero-actions .shop-primary,
body.app-body .shop-hero-actions .shop-secondary {
  color: #000 !important;
  background: #fff !important;
  text-shadow: none !important;
}

body.app-body .promo-strip {
  display: grid !important;
  grid-template-columns: 1fr 96px !important;
  gap: 8px !important;
  margin: 14px 0 0 !important;
}

body.app-body .promo-strip input {
  border: 0 !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
}

body.app-body .promo-strip button {
  border: 0 !important;
  border-radius: 18px !important;
  background: #fff !important;
  color: #000 !important;
  font: 950 14px/1 "Montserrat", sans-serif !important;
}

body.app-body .mt-bracket-map {
  position: relative !important;
  min-height: 620px !important;
  margin: 8px 0 20px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  color: #fff !important;
  overflow: hidden !important;
}

body.app-body .br-logo {
  position: absolute !important;
  left: 50% !important;
  top: 32px !important;
  transform: translateX(-50%) !important;
  display: grid !important;
  place-items: center !important;
}

body.app-body .br-logo span,
body.app-body .br-logo strong {
  font-family: "Bagel Fat One", "Montserrat", sans-serif !important;
  line-height: 0.82 !important;
  letter-spacing: 0 !important;
}

body.app-body .br-logo span {
  color: var(--mt-blue) !important;
  font-size: 32px !important;
}

body.app-body .br-logo strong {
  color: #fff !important;
  font-size: 38px !important;
}

body.app-body .br-side {
  position: absolute !important;
  top: 118px !important;
  display: grid !important;
  gap: 44px !important;
}

body.app-body .br-left { left: 10px !important; }
body.app-body .br-right { right: 10px !important; }

body.app-body .br-slot {
  width: 126px !important;
  height: 42px !important;
  display: grid !important;
  grid-template-columns: 24px 1fr !important;
  align-items: end !important;
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
  font-family: "Montserrat", sans-serif !important;
  text-align: left !important;
}

body.app-body .br-slot .br-num {
  font-size: 24px !important;
  font-weight: 950 !important;
}

body.app-body .br-slot strong {
  position: relative !important;
  display: block !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.76) !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

body.app-body .br-slot.is-loser {
  opacity: 0.38 !important;
  filter: blur(0.3px) !important;
}

body.app-body .br-slot.is-loser strong {
  text-decoration: line-through !important;
  text-decoration-thickness: 3px !important;
}

body.app-body .br-quarter-label {
  position: absolute !important;
  top: 338px !important;
  color: #fff !important;
  font: 950 28px/1 "Montserrat", sans-serif !important;
}

body.app-body .br-quarter-left { left: 10px !important; }
body.app-body .br-quarter-right { right: 10px !important; }

body.app-body .br-mid {
  position: absolute !important;
  top: 306px !important;
  left: 50% !important;
  width: 168px !important;
  display: grid !important;
  gap: 130px !important;
  transform: translateX(-50%) !important;
}

body.app-body .br-semi {
  height: 46px !important;
  display: grid !important;
  grid-template-columns: 40px 1fr 18px 1fr !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.76) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
  font-family: "Montserrat", sans-serif !important;
}

body.app-body .br-semi span,
body.app-body .br-semi strong,
body.app-body .br-semi em {
  color: #fff !important;
  font-style: normal !important;
  font-weight: 950 !important;
}

body.app-body .br-final {
  position: absolute !important;
  left: 50% !important;
  top: 386px !important;
  transform: translateX(-50%) !important;
  display: grid !important;
  place-items: center !important;
  gap: 12px !important;
}

body.app-body .br-final > span {
  color: #fff !important;
  font: 950 34px/1 "Montserrat", sans-serif !important;
}

body.app-body .br-final button {
  width: 170px !important;
  min-height: 46px !important;
  display: grid !important;
  grid-template-columns: 1fr 20px 1fr !important;
  gap: 6px !important;
  align-items: center !important;
  border: 0 !important;
  border-top: 2px solid rgba(255,255,255,0.76) !important;
  border-bottom: 2px solid rgba(255,255,255,0.76) !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
  font-family: "Montserrat", sans-serif !important;
}

body.app-body .br-final button em {
  font-style: normal !important;
}

body.app-body .br-levels {
  position: absolute !important;
  left: 50% !important;
  bottom: 34px !important;
  transform: translateX(-50%) !important;
  color: rgba(255,255,255,0.78) !important;
  font: 950 34px/1 "Montserrat", sans-serif !important;
  letter-spacing: 0.02em !important;
}

body.app-body .league-map,
body.app-body .league-stack-section,
body.app-body .leagues-stack,
body.app-body .league-ribbon,
body.app-body .lr-token {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.app-body .league-view-toggle,
body.app-body .league-tier-slider,
body.app-body .tasks-tabs {
  height: 58px !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
  padding: 6px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.06) !important;
  box-shadow: none !important;
}

body.app-body .league-tier-slider { grid-template-columns: repeat(3, 1fr) !important; }

body.app-body .league-view-toggle button,
body.app-body .league-tier-slider button,
body.app-body .tasks-tabs button {
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(255,255,255,0.56) !important;
  box-shadow: none !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 950 !important;
}

body.app-body .league-view-toggle button.is-active,
body.app-body .league-tier-slider button.is-active,
body.app-body .tasks-tabs button.is-active {
  background: #fff !important;
  color: #000 !important;
}

body.app-body .tasks-list,
body.app-body .task-card,
body.app-body .roulette-shell,
body.app-body .refs-card,
body.app-body .refs-stats,
body.app-body .profile-shell,
body.app-body .profile-hero,
body.app-body .profile-scoreboard,
body.app-body .profile-cashbacks,
body.app-body .ai-shell,
body.app-body .forum-shell,
body.app-body .staking-shell,
body.app-body .forum-post,
body.app-body .stake-card {
  border: 0 !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,0.045) !important;
  color: #fff !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px) !important;
}

body.app-body .task-card,
body.app-body .forum-post {
  padding: 16px !important;
}

body.app-body .roulette-stage {
  min-height: 154px !important;
  border: 0 !important;
  border-radius: 26px !important;
  background: rgba(255,255,255,0.045) !important;
  overflow: hidden !important;
}

body.app-body .r-item {
  width: 116px !important;
  height: 128px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,0.06) !important;
}

body.app-body .r-lottie {
  width: 112px !important;
  height: 112px !important;
  margin: 8px auto 0 !important;
  border-radius: 22px !important;
  font-size: 66px !important;
  filter: grayscale(1) sepia(1) saturate(2.4) hue-rotate(170deg) brightness(1.16) !important;
}

body.app-body .roulette-modal-lottie {
  width: 220px !important;
  height: 220px !important;
  margin: 0 auto !important;
  font-size: 112px !important;
}

body.app-body .ai-form {
  display: grid !important;
  grid-template-columns: 48px 1fr 48px !important;
  gap: 8px !important;
  padding: 8px !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,0.06) !important;
}

body.app-body .ai-input {
  min-width: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
}

body.app-body .ai-preview {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,0.08) !important;
}

body.app-body .ai-preview[hidden] {
  display: none !important;
}

body.app-body .ai-preview img,
body.app-body .ai-msg-image {
  width: 54px !important;
  height: 54px !important;
  border-radius: 14px !important;
  object-fit: cover !important;
}

body.app-body .profile-scoreboard {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  padding: 10px !important;
}

body.app-body .profile-scoreboard > * {
  display: grid !important;
  gap: 2px !important;
  padding: 8px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,0.045) !important;
}

body.app-body .profile-cashbacks {
  padding: 18px 20px !important;
}

body.app-body .profile-cashbacks h2 {
  margin-left: 0 !important;
}

@media (max-width: 380px) {
  body.app-body {
    padding-inline: 6px !important;
  }

  body.app-body .app-main {
    max-width: 100% !important;
  }

  body.app-body > header.app-header .brand-meme,
  body.app-body > header.app-header .brand-throne {
    font-size: 23px !important;
  }

  body.app-body > header.app-header .wallet-btn {
    min-width: 76px !important;
    padding-inline: 12px !important;
    font-size: 12px !important;
  }

  body.app-body .br-slot {
    width: 112px !important;
  }

  body.app-body .choice-art img {
    transform: scale(1.16) !important;
  }
}

/* v206 mobile bugfix layer: session-safe UI affordances and clean phone nav. */
body.app-body .nav-drawer-lang {
  width: 100% !important;
  min-height: 52px !important;
  display: grid !important;
  grid-template-columns: 42px 1fr !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 10px 0 0 !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: rgba(95, 182, 255, 0.12) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-family: "Montserrat", sans-serif !important;
  text-align: left !important;
}

body.app-body .nav-drawer-lang span {
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #000 !important;
  font: 950 12px/1 "Montserrat", sans-serif !important;
}

body.app-body .nav-drawer-lang b {
  font: 950 14px/1 "Montserrat", sans-serif !important;
}

body.app-body > nav.app-bnav.app-bnav::before {
  left: calc(
    var(--nav-gap) +
    ((((100% - (var(--nav-gap) * 2)) / var(--nav-items)) * var(--nav-index, 0))) +
    ((((100% - (var(--nav-gap) * 2)) / var(--nav-items)) - var(--nav-size)) / 2)
  ) !important;
  transform: none !important;
  transition: left 520ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@media (min-width: 461px) {
  body.app-body > nav.app-bnav.app-bnav::before {
    left: calc(
      var(--nav-gap) +
      ((((100% - (var(--nav-gap) * 2)) / var(--nav-items)) * var(--nav-index, 0))) +
      ((((100% - (var(--nav-gap) * 2)) / var(--nav-items)) - var(--nav-size)) / 2)
    ) !important;
    transform: none !important;
  }
}

body.app-body #active-vote-card,
body.app-body #active-vote-card .vote-widget,
body.app-body .arena-section {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body #active-vote-card *,
body.app-body .vote-widget * {
  text-shadow: none !important;
}

body.app-body #active-vote-card::before,
body.app-body #active-vote-card::after,
body.app-body .vote-widget::before,
body.app-body .vote-widget::after,
body.app-body .widget-vs::before,
body.app-body .widget-vs::after,
body.app-body .widget-team::before,
body.app-body .widget-team::after,
body.app-body .widget-team-orb::before,
body.app-body .widget-team-orb::after,
body.app-body .widget-team-lottie::before,
body.app-body .widget-team-lottie::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.app-body .widget-vote:not([disabled]) {
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.app-body .widget-vote.is-locked:not([disabled]) {
  opacity: 0.78 !important;
}

body.app-body .choice-buy .choice-action,
body.app-body .shop-hero-actions a,
body.app-body .shop-hero-actions button,
body.app-body .shop-secondary,
body.app-body .shop-primary {
  display: inline-grid !important;
  place-items: center !important;
  min-height: 56px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: #fff !important;
  color: #000 !important;
  box-shadow: none !important;
  font: 950 13px/1 "Montserrat", sans-serif !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

body.app-body .choice-buy .choice-action *,
body.app-body .shop-hero-actions a *,
body.app-body .shop-hero-actions button * {
  color: #000 !important;
  fill: currentColor !important;
  opacity: 1 !important;
}

body.app-body .tab-shop .shop-choice-card.shop-slide-out.shop-slide-next {
  animation: mt-shop-out-next 260ms cubic-bezier(0.5, 0, 0.75, 0) both !important;
}

body.app-body .tab-shop .shop-choice-card.shop-slide-out.shop-slide-prev {
  animation: mt-shop-out-prev 260ms cubic-bezier(0.5, 0, 0.75, 0) both !important;
}

body.app-body .tab-shop .shop-choice-card.shop-slide-in.shop-slide-next {
  animation: mt-shop-in-next 390ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

body.app-body .tab-shop .shop-choice-card.shop-slide-in.shop-slide-prev {
  animation: mt-shop-in-prev 390ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

@keyframes mt-shop-out-next {
  to { opacity: 0; transform: translate3d(-48px, 0, 0); }
}

@keyframes mt-shop-out-prev {
  to { opacity: 0; transform: translate3d(48px, 0, 0); }
}

@keyframes mt-shop-in-next {
  from { opacity: 0; transform: translate3d(52px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes mt-shop-in-prev {
  from { opacity: 0; transform: translate3d(-52px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

body.app-body .tab-shop .choice-art {
  height: clamp(252px, 66vw, 320px) !important;
}

body.app-body .tab-shop .choice-art img {
  width: min(128%, 410px) !important;
  transform: scale(1.33) !important;
}

body.app-body .roulette-shell,
body.app-body .tasks-list,
body.app-body .forum-shell,
body.app-body .staking-shell,
body.app-body .profile-shell,
body.app-body .refs-card,
body.app-body .refs-stats,
body.app-body .ai-shell {
  border: 0 !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025)) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,0.38) !important;
}

body.app-body .r-item {
  position: relative !important;
}

body.app-body .r-lottie {
  font-size: 86px !important;
  transform: translateY(22px) scale(1.28) !important;
  transform-origin: 50% 100% !important;
  opacity: 0.96 !important;
  filter: grayscale(1) sepia(1) saturate(2.4) hue-rotate(170deg) brightness(1.16) !important;
}

body.app-body .stake-periods,
body.app-body .forum-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) auto !important;
  gap: 8px !important;
}

body.app-body .stake-periods {
  grid-template-columns: repeat(3, 1fr) !important;
}

body.app-body .stake-periods button,
body.app-body .forum-tabs button {
  min-height: 46px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  box-shadow: none !important;
  font: 950 12px/1 "Montserrat", sans-serif !important;
}

body.app-body .stake-periods button.is-active,
body.app-body .forum-tabs button.is-active {
  background: #fff !important;
  color: #000 !important;
}

body.app-body .wallet-btn,
body.app-body .hdr-burger,
body.app-body button,
body.app-body a {
  -webkit-tap-highlight-color: transparent !important;
}

body.app-body .floating-cube,
body.app-body .ambient-cube,
body.app-body .decor-cube,
body.app-body [class*="cube"],
body.app-body [class*="Cube"] {
  display: none !important;
  content: none !important;
}

/* v207: mobile repair layer — glass black/gray with #5FB6FF accent */
:root {
  --mt-bg: #030507;
  --mt-ink: #f8f8f5;
  --mt-muted: rgba(248, 248, 245, 0.58);
  --mt-line: rgba(255, 255, 255, 0.08);
  --mt-glass: rgba(255, 255, 255, 0.045);
  --mt-glass-2: rgba(255, 255, 255, 0.075);
  --mt-blue: #5FB6FF;
  --mt-blue-soft: rgba(95, 182, 255, 0.18);
}

html,
body.app-body {
  min-height: 100%;
  background:
    radial-gradient(circle at 50% -18%, rgba(95, 182, 255, 0.16), transparent 34%),
    linear-gradient(180deg, #06080a 0%, var(--mt-bg) 38%, #000 100%) !important;
  color: var(--mt-ink) !important;
  font-family: "Lato", sans-serif !important;
  overflow-x: hidden !important;
}

body.app-body {
  max-width: 460px !important;
  margin: 0 auto !important;
  padding: 0 0 calc(112px + env(safe-area-inset-bottom)) !important;
  -webkit-tap-highlight-color: transparent !important;
}

body.app-body::before,
body.app-body::after,
body.app-body .app-bg,
body.app-body .bg-cubes,
body.app-body .noise-layer,
body.app-body .ambient-shape,
body.app-body [class*="cube"],
body.app-body [class*="Cube"] {
  display: none !important;
  content: none !important;
}

body.app-body .app-main,
body.app-body main#main {
  width: 100% !important;
  max-width: 460px !important;
  margin: 0 auto !important;
  padding: 0 10px calc(118px + env(safe-area-inset-bottom)) !important;
}

body.app-body h1,
body.app-body h2,
body.app-body h3,
body.app-body .display-title,
body.app-body .section-h,
body.app-body .lr-name,
body.app-body .sc-name,
body.app-body .choice-copy h2 {
  font-family: "Montserrat", sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Header */
body.app-body > header.app-header {
  position: sticky !important;
  top: calc(8px + env(safe-area-inset-top)) !important;
  z-index: 80 !important;
  width: calc(100% - 16px) !important;
  height: 66px !important;
  margin: 8px auto 22px !important;
  padding: 8px 9px !important;
  display: grid !important;
  grid-template-columns: 50px 1fr 96px !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid var(--mt-line) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.025)),
    rgba(6, 8, 10, 0.84) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.48) !important;
  backdrop-filter: blur(18px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.15) !important;
}

body.app-body > header.app-header .hdr-burger {
  grid-column: 1 !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  box-shadow: none !important;
  display: grid !important;
  place-items: center !important;
}

body.app-body > header.app-header .hdr-burger svg {
  width: 22px !important;
  height: 22px !important;
  fill: currentColor !important;
}

body.app-body > header.app-header .brand-stack {
  grid-column: 2 !important;
  justify-self: center !important;
  align-self: center !important;
  display: grid !important;
  place-items: center !important;
  min-width: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
  pointer-events: auto !important;
}

body.app-body > header.app-header .brand-stack:active,
body.app-body > header.app-header .brand-stack:hover,
body.app-body > header.app-header .brand-stack:focus {
  transform: none !important;
  filter: none !important;
}

body.app-body > header.app-header .brand-meme,
body.app-body > header.app-header .brand-throne {
  display: block !important;
  margin: 0 !important;
  font-family: "Bagel Fat One", "Montserrat", sans-serif !important;
  font-size: 24px !important;
  line-height: 0.82 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.34) !important;
}

body.app-body > header.app-header .brand-meme { color: var(--mt-blue) !important; }
body.app-body > header.app-header .brand-throne { color: #fff !important; }

body.app-body > header.app-header .hdr-tools {
  grid-column: 3 !important;
  justify-self: end !important;
  display: block !important;
}

body.app-body > header.app-header .wallet-btn {
  width: 96px !important;
  height: 48px !important;
  min-width: 96px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #fff, #dfe4e6) !important;
  color: #050505 !important;
  box-shadow: none !important;
  padding: 0 12px !important;
  display: grid !important;
  place-items: center !important;
  font: 900 13px/1 "Montserrat", sans-serif !important;
}

body.app-body > header.app-header .wallet-dot,
body.app-body > header.app-header .bal-widget,
body.app-body > header.app-header [data-balance-widget] {
  display: none !important;
}

body.app-body > header.app-header .wallet-label {
  max-width: 76px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #050505 !important;
}

/* Drawer / hamburger */
body.app-body .nav-drawer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 120 !important;
  background: rgba(0, 0, 0, 0.56) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

body.app-body .nav-drawer-card {
  width: calc(100% - 24px) !important;
  max-width: 420px !important;
  margin: calc(18px + env(safe-area-inset-top)) auto 0 !important;
  padding: 16px !important;
  border: 1px solid var(--mt-line) !important;
  border-radius: 30px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.025)),
    rgba(8, 9, 10, .92) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.62) !important;
}

body.app-body .nav-drawer-close {
  background: #fff !important;
  color: #000 !important;
  border: 0 !important;
  border-radius: 999px !important;
}

body.app-body .nav-drawer-item,
body.app-body .nav-drawer-lang {
  min-height: 54px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.055) !important;
  color: #fff !important;
  box-shadow: none !important;
  font: 850 15px/1 "Montserrat", sans-serif !important;
}

body.app-body .nav-drawer-item svg {
  color: #fff !important;
  fill: currentColor !important;
  opacity: .9 !important;
}

body.app-body .nav-drawer-item.is-active {
  background: rgba(95, 182, 255, .16) !important;
  color: #fff !important;
}

/* Bottom navigation */
body.app-body > nav.app-bnav.app-bnav {
  --nav-items: 6;
  --nav-gap: 5px;
  --nav-size: clamp(43px, 13vw, 52px);
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  z-index: 90 !important;
  width: calc((var(--nav-size) * 6) + (var(--nav-gap) * 7)) !important;
  max-width: calc(100vw - 18px) !important;
  height: calc(var(--nav-size) + (var(--nav-gap) * 2)) !important;
  padding: var(--nav-gap) !important;
  display: grid !important;
  grid-template-columns: repeat(6, var(--nav-size)) !important;
  gap: var(--nav-gap) !important;
  justify-content: center !important;
  align-items: center !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.015)),
    rgba(0,0,0,.88) !important;
  box-shadow: 0 20px 54px rgba(0,0,0,.64) !important;
  backdrop-filter: blur(18px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.1) !important;
  transform: translateX(-50%) !important;
  overflow: hidden !important;
}

body.app-body > nav.app-bnav[data-active-tab="home"] { --nav-index: 0 !important; }
body.app-body > nav.app-bnav[data-active-tab="leagues"] { --nav-index: 1 !important; }
body.app-body > nav.app-bnav[data-active-tab="shop"] { --nav-index: 2 !important; }
body.app-body > nav.app-bnav[data-active-tab="rewards"] { --nav-index: 3 !important; }
body.app-body > nav.app-bnav[data-active-tab="tasks"] { --nav-index: 4 !important; }
body.app-body > nav.app-bnav[data-active-tab="roulette"] { --nav-index: 5 !important; }

body.app-body > nav.app-bnav.app-bnav::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  top: var(--nav-gap) !important;
  left: var(--nav-gap) !important;
  width: var(--nav-size) !important;
  height: var(--nav-size) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #fff, #dfe4e6) !important;
  box-shadow: 0 8px 20px rgba(95, 182, 255, 0.22) !important;
  transform: translateX(calc(var(--nav-index, 0) * (var(--nav-size) + var(--nav-gap)))) !important;
  transition: transform 520ms cubic-bezier(.16, 1, .3, 1) !important;
}

body.app-body > nav.app-bnav .bn-btn {
  position: relative !important;
  z-index: 1 !important;
  width: var(--nav-size) !important;
  height: var(--nav-size) !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(255,255,255,.66) !important;
  box-shadow: none !important;
  display: grid !important;
  place-items: center !important;
  transform: none !important;
}

body.app-body > nav.app-bnav .bn-btn.is-active {
  color: #000 !important;
  background: transparent !important;
}

body.app-body > nav.app-bnav .bn-icon,
body.app-body > nav.app-bnav .bn-icon svg {
  width: 20px !important;
  height: 20px !important;
  fill: currentColor !important;
  color: currentColor !important;
}

body.app-body > nav.app-bnav .bn-l { display: none !important; }

/* Shared controls */
body.app-body button,
body.app-body a,
body.app-body input,
body.app-body textarea,
body.app-body select {
  -webkit-tap-highlight-color: transparent !important;
}

body.app-body button:focus,
body.app-body a:focus,
body.app-body input:focus,
body.app-body textarea:focus {
  outline: none !important;
}

body.app-body button:focus-visible,
body.app-body a:focus-visible,
body.app-body input:focus-visible,
body.app-body textarea:focus-visible {
  outline: 2px solid var(--mt-blue) !important;
  outline-offset: 2px !important;
}

body.app-body button:active,
body.app-body .choice-action:active,
body.app-body .choice-tool:active,
body.app-body .task-btn:active,
body.app-body .checkin-btn:active {
  transform: scale(.97) !important;
}

/* Home */
body.app-body .home-hero,
body.app-body .page-hero {
  margin: 0 0 18px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body .home-portrait {
  margin: 0 auto 14px !important;
  width: min(94vw, 420px) !important;
  min-height: 210px !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.app-body .home-portrait::before,
body.app-body .home-portrait::after {
  display: none !important;
}

body.app-body .hero-photo {
  width: min(92vw, 390px) !important;
  max-height: 250px !important;
  object-fit: contain !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

body.app-body .metric-strip {
  width: 100% !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body .metric-strip > div {
  min-height: 76px !important;
  padding: 14px 13px !important;
  border: 1px solid var(--mt-line) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.045) !important;
  box-shadow: none !important;
}

body.app-body .metric-strip span {
  color: var(--mt-muted) !important;
  font: 900 9px/1.15 "Montserrat", sans-serif !important;
  letter-spacing: .04em !important;
}

body.app-body .metric-strip strong {
  margin-top: 12px !important;
  color: #fff !important;
  font: 900 24px/1 "Montserrat", sans-serif !important;
}

body.app-body .arena-section {
  margin: 18px 0 20px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body .arena-section .section-row,
body.app-body .arena-section .section-eyebrow {
  display: none !important;
}

body.app-body #active-vote-card,
body.app-body #active-vote-card .vote-widget,
body.app-body [data-active-widget] {
  position: relative !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.app-body #active-vote-card::before,
body.app-body #active-vote-card::after,
body.app-body #active-vote-card .vote-widget::before,
body.app-body #active-vote-card .vote-widget::after,
body.app-body .widget-vs::before,
body.app-body .widget-vs::after,
body.app-body .widget-team::before,
body.app-body .widget-team::after,
body.app-body .widget-team-orb::before,
body.app-body .widget-team-orb::after {
  display: none !important;
  content: none !important;
}

body.app-body .vote-widget {
  padding: 16px 4px 0 !important;
}

body.app-body .widget-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin: 0 0 14px !important;
  color: rgba(255,255,255,.5) !important;
  font: 900 10px/1 "Montserrat", sans-serif !important;
}

body.app-body .widget-vs-grid {
  display: grid !important;
  grid-template-columns: 1fr 48px 1fr !important;
  gap: 10px !important;
  align-items: center !important;
}

body.app-body .widget-team {
  display: grid !important;
  justify-items: center !important;
  gap: 9px !important;
}

body.app-body .widget-team-orb {
  width: 86px !important;
  height: 86px !important;
  border-radius: 26px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.02)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
}

body.app-body .token-fallback-mark {
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  background:
    linear-gradient(135deg, rgba(95,182,255,.95), rgba(245,245,245,.92) 48%, rgba(130,130,130,.82)) !important;
  color: #07111a !important;
  display: grid !important;
  place-items: center !important;
  font: 950 22px/1 "Montserrat", sans-serif !important;
}

body.app-body .token-logo-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

body.app-body .widget-vs {
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #050505 !important;
  display: grid !important;
  place-items: center !important;
  font: 950 13px/1 "Montserrat", sans-serif !important;
  box-shadow: none !important;
}

body.app-body .widget-name {
  color: #fff !important;
  font: 950 18px/1 "Montserrat", sans-serif !important;
}

body.app-body .widget-votes {
  color: var(--mt-muted) !important;
  font: 800 11px/1 "Lato", sans-serif !important;
}

body.app-body .widget-progress {
  margin-top: 16px !important;
}

body.app-body .widget-bar-track {
  height: 12px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.08) !important;
  overflow: hidden !important;
}

body.app-body .widget-bar-fill,
body.app-body [data-vs-bar] {
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, var(--mt-blue), #fff) !important;
  transition: width 540ms cubic-bezier(.16,1,.3,1) !important;
}

body.app-body .widget-meta {
  margin-top: 9px !important;
  color: rgba(255,255,255,.5) !important;
}

body.app-body .widget-leader {
  margin: 12px 0 14px !important;
  min-height: 44px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.045) !important;
  color: #fff !important;
  font: 850 12px/1.2 "Montserrat", sans-serif !important;
}

body.app-body .widget-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

body.app-body .widget-vote,
body.app-body .seg-control button,
body.app-body [data-vs-prev],
body.app-body [data-vs-next] {
  min-height: 54px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #fff, #dfe4e6) !important;
  color: #050505 !important;
  box-shadow: none !important;
  font: 950 12px/1 "Montserrat", sans-serif !important;
  opacity: 1 !important;
}

body.app-body .widget-vote:disabled {
  opacity: .42 !important;
}

body.app-body .widget-vote.is-locked:not(:disabled) {
  opacity: 1 !important;
  filter: none !important;
}

body.app-body .seg-control {
  margin-top: 12px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.app-body .home-league-dock {
  margin: 16px 0 24px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}

body.app-body .dock-chip {
  min-height: 64px !important;
  padding: 12px !important;
  border: 1px solid var(--mt-line) !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.055) !important;
  color: #fff !important;
  box-shadow: none !important;
  text-align: left !important;
}

body.app-body .dock-chip small {
  color: var(--mt-muted) !important;
}

body.app-body .story-grid {
  display: grid !important;
  gap: 10px !important;
  margin: 22px 0 !important;
}

body.app-body .story-card {
  min-height: 78px !important;
  display: grid !important;
  grid-template-columns: 52px 1fr !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px !important;
  border: 1px solid var(--mt-line) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.035) !important;
  box-shadow: none !important;
}

body.app-body .story-card > span,
body.app-body .command-icon,
body.app-body .shop-included article > span {
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
  display: grid !important;
  place-items: center !important;
}

body.app-body .story-card p {
  display: none !important;
}

body.app-body .story-card strong {
  color: #fff !important;
  font: 900 17px/1.1 "Montserrat", sans-serif !important;
}

body.app-body .trust-rail {
  display: grid !important;
  gap: 8px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body .trust-rail span {
  min-height: 48px !important;
  border: 1px solid var(--mt-line) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.035) !important;
  color: var(--mt-muted) !important;
}

body.app-body .command-board {
  margin: 24px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body .command-list {
  display: grid !important;
  gap: 10px !important;
}

body.app-body .command-row {
  min-height: 66px !important;
  padding: 10px 14px !important;
  border: 1px solid var(--mt-line) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.035) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Shop */
body.app-body .tab-shop .shop-hero,
body.app-body .tab-shop .shop-status-grid,
body.app-body .tab-shop .shop-included,
body.app-body .tab-shop .shop-pack-section {
  display: none !important;
}

body.app-body .shop-choice {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body .shop-choice-tabs,
body.app-body .league-view-toggle,
body.app-body .league-tier-slider,
body.app-body .tasks-tabs,
body.app-body .forum-tabs,
body.app-body .stake-periods {
  position: relative !important;
  min-height: 56px !important;
  padding: 5px !important;
  border: 1px solid var(--mt-line) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.055) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.app-body .shop-choice-tabs .slider-indicator,
body.app-body .league-view-toggle .slider-indicator,
body.app-body .league-tier-slider .slider-indicator,
body.app-body .tasks-tabs .slider-indicator,
body.app-body .forum-tabs .slider-indicator {
  position: absolute !important;
  top: 5px !important;
  bottom: 5px !important;
  left: 0 !important;
  z-index: 0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: none !important;
  transition:
    transform 520ms cubic-bezier(.16,1,.3,1),
    width 520ms cubic-bezier(.16,1,.3,1),
    opacity 180ms ease !important;
}

body.app-body .shop-choice-tabs button,
body.app-body .league-view-toggle button,
body.app-body .league-tier-slider button,
body.app-body .tasks-tabs button,
body.app-body .forum-tabs button,
body.app-body .stake-periods button {
  position: relative !important;
  z-index: 1 !important;
  min-height: 46px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(255,255,255,.52) !important;
  box-shadow: none !important;
  font: 900 13px/1 "Montserrat", sans-serif !important;
}

body.app-body .shop-choice-tabs button.is-active,
body.app-body .league-view-toggle button.is-active,
body.app-body .league-tier-slider button.is-active,
body.app-body .tasks-tabs button.is-active,
body.app-body .forum-tabs button.is-active,
body.app-body .stake-periods button.is-active {
  color: #000 !important;
}

body.app-body .shop-choice-card {
  margin-top: 18px !important;
  padding: 0 0 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.app-body .choice-art {
  height: clamp(238px, 62vw, 305px) !important;
  margin: 0 6px 18px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 26px !important;
  background: #000 !important;
  box-shadow: none !important;
}

body.app-body .choice-art img {
  width: min(118%, 410px) !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  transform: scale(1.42) !important;
  filter: none !important;
}

body.app-body .choice-art .pack-count {
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #000 !important;
  font: 950 11px/1 "Montserrat", sans-serif !important;
}

body.app-body .nft-pip-row span {
  width: 12px !important;
  height: 9px !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #fff, var(--mt-blue)) !important;
}

body.app-body .choice-copy {
  padding: 0 18px !important;
  background: transparent !important;
}

body.app-body .choice-copy h2 {
  margin: 0 !important;
  color: #fff !important;
  font: 950 clamp(28px, 8vw, 40px)/.92 "Montserrat", sans-serif !important;
}

body.app-body .choice-copy p {
  display: none !important;
}

body.app-body .choice-buy {
  margin: 18px 18px 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 128px !important;
  align-items: center !important;
  gap: 12px !important;
  background: transparent !important;
}

body.app-body .choice-buy strong {
  color: #fff !important;
  font: 950 32px/1 "Montserrat", sans-serif !important;
}

body.app-body .choice-buy small {
  color: var(--mt-muted) !important;
  font-size: 12px !important;
}

body.app-body .choice-action,
body.app-body .choice-tool,
body.app-body .shop-primary,
body.app-body .shop-secondary {
  min-height: 54px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #fff, #dfe4e6) !important;
  color: #050505 !important;
  box-shadow: none !important;
  font: 950 13px/1 "Montserrat", sans-serif !important;
  text-decoration: none !important;
}

body.app-body .choice-tools {
  margin: 16px 18px 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

body.app-body .choice-tool {
  display: grid !important;
  place-items: center !important;
}

/* Leagues bracket */
body.app-body .league-hero,
body.app-body .league-ledger {
  display: none !important;
}

body.app-body .league-map,
body.app-body .league-stack-section {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body .mt-bracket-map {
  position: relative !important;
  width: 100% !important;
  min-height: 560px !important;
  margin: 16px 0 20px !important;
  padding: 26px 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  box-shadow: none !important;
  color: #fff !important;
  overflow: hidden !important;
}

body.app-body .br-logo {
  text-align: center !important;
  margin-bottom: 18px !important;
}

body.app-body .br-logo span,
body.app-body .br-logo strong {
  display: block !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 950 !important;
  line-height: .9 !important;
}

body.app-body .br-logo span { color: var(--mt-blue) !important; font-size: 30px !important; }
body.app-body .br-logo strong { color: #fff !important; font-size: 38px !important; }

body.app-body .br-side {
  position: absolute !important;
  top: 124px !important;
  display: grid !important;
  gap: 34px !important;
  width: 38% !important;
}

body.app-body .br-left { left: 10px !important; }
body.app-body .br-right { right: 10px !important; }

body.app-body .br-slot,
body.app-body .br-semi,
body.app-body .br-final button {
  min-height: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
  text-align: left !important;
}

body.app-body .br-slot .br-line,
body.app-body .br-semi::after,
body.app-body .br-final button::before {
  display: block !important;
  width: 100% !important;
  height: 1px !important;
  margin: 6px 0 0 !important;
  background: rgba(255,255,255,.88) !important;
  content: "" !important;
}

body.app-body .br-num {
  color: #fff !important;
  font: 950 20px/1 "Montserrat", sans-serif !important;
}

body.app-body .br-slot strong,
body.app-body .br-semi strong,
body.app-body .br-final strong {
  color: #fff !important;
  font: 900 13px/1 "Montserrat", sans-serif !important;
}

body.app-body .br-slot.is-loser {
  opacity: .38 !important;
  filter: blur(.2px) !important;
}

body.app-body .br-mid {
  position: absolute !important;
  top: 250px !important;
  left: 50% !important;
  width: 36% !important;
  transform: translateX(-50%) !important;
  display: grid !important;
  gap: 74px !important;
}

body.app-body .br-final {
  position: absolute !important;
  left: 50% !important;
  top: 365px !important;
  width: 38% !important;
  transform: translateX(-50%) !important;
  text-align: center !important;
}

body.app-body .br-final > span {
  display: block !important;
  margin-bottom: 14px !important;
  color: #fff !important;
  font: 950 26px/1 "Montserrat", sans-serif !important;
}

body.app-body .br-quarter-label {
  position: absolute !important;
  top: 314px !important;
  color: #fff !important;
  font: 950 24px/1 "Montserrat", sans-serif !important;
}

body.app-body .br-quarter-left { left: 12px !important; }
body.app-body .br-quarter-right { right: 12px !important; }

body.app-body .br-levels {
  position: absolute !important;
  left: 50% !important;
  bottom: 22px !important;
  transform: translateX(-50%) !important;
  color: rgba(255,255,255,.8) !important;
  font: 950 38px/1 "Montserrat", sans-serif !important;
}

body.app-body .league-ribbon,
body.app-body .league-tier-card {
  border: 1px solid var(--mt-line) !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,.04) !important;
  box-shadow: none !important;
}

/* Rewards / tasks / roulette / profile / refs / AI */
body.app-body .prize-pool-banner,
body.app-body .checkin-shell,
body.app-body .tasks-list,
body.app-body .task-card,
body.app-body .roulette-shell,
body.app-body .refs-card,
body.app-body .refs-stats,
body.app-body .profile-hero,
body.app-body .profile-scoreboard,
body.app-body .profile-cashbacks,
body.app-body .ai-shell,
body.app-body .forum-shell,
body.app-body .staking-shell {
  border: 1px solid var(--mt-line) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
    rgba(255,255,255,.025) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.34) !important;
}

body.app-body .profile-cashbacks h2,
body.app-body .profile-cashbacks .section-h {
  padding-left: 20px !important;
}

body.app-body .checkin-head,
body.app-body .prize-pool-inner {
  color: #fff !important;
}

body.app-body .checkin-path {
  overflow: hidden !important;
}

body.app-body .checkin-step {
  background: #fff !important;
  color: #050505 !important;
  box-shadow: 0 0 0 4px rgba(95,182,255,.12) !important;
}

body.app-body .checkin-step.is-done,
body.app-body .checkin-step.is-current {
  background: linear-gradient(180deg, var(--mt-blue), #fff) !important;
}

body.app-body .checkin-progress-fill {
  background: linear-gradient(90deg, var(--mt-blue), #fff) !important;
}

body.app-body .checkin-btn,
body.app-body .task-btn,
body.app-body .roulette-spin,
body.app-body .ai-send,
body.app-body .refs-card button,
body.app-body .refs-card a {
  min-height: 52px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #fff, #dfe4e6) !important;
  color: #050505 !important;
  box-shadow: none !important;
  font: 950 13px/1 "Montserrat", sans-serif !important;
}

body.app-body .r-item {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid var(--mt-line) !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.04) !important;
}

body.app-body .r-lottie {
  width: 112px !important;
  height: 112px !important;
  margin: auto !important;
  transform: translateY(34px) scale(1.34) !important;
  filter: grayscale(1) sepia(1) saturate(2.1) hue-rotate(168deg) brightness(1.18) !important;
}

body.app-body .roulette-modal .r-lottie,
body.app-body .reward-result-emoji,
body.app-body [data-reward-modal-emoji] {
  filter: none !important;
}

body.app-body .task-card {
  min-height: 78px !important;
  padding: 14px !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 12px !important;
  align-items: center !important;
}

body.app-body .ai-shell textarea,
body.app-body .ai-shell input,
body.app-body .refs-card input,
body.app-body .staking-shell input {
  border: 1px solid var(--mt-line) !important;
  border-radius: 18px !important;
  background: rgba(0,0,0,.42) !important;
  color: #fff !important;
}

body.app-body .profile-hero {
  display: grid !important;
  grid-template-columns: 88px 1fr auto !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 18px !important;
}

body.app-body .profile-avatar,
body.app-body [data-profile-avatar] {
  width: 84px !important;
  height: 84px !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #fff, var(--mt-blue)) !important;
  color: #050505 !important;
}

body.app-body .profile-lvl,
body.app-body [data-profile-level] {
  background: var(--mt-blue) !important;
  color: #050505 !important;
}

body.app-body .profile-scoreboard {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  overflow: hidden !important;
}

body.app-body .profile-scoreboard > * {
  background: transparent !important;
  border-color: var(--mt-line) !important;
}

/* Keep SVG icons white on dark controls, without colored icon tiles. */
body.app-body .command-icon svg,
body.app-body .story-card svg,
body.app-body .nav-drawer-item svg,
body.app-body .task-card svg,
body.app-body .refs-card svg,
body.app-body .ai-shell svg,
body.app-body .staking-shell svg {
  color: #fff !important;
  fill: currentColor !important;
}

@media (max-width: 360px) {
  body.app-body > header.app-header {
    grid-template-columns: 46px 1fr 86px !important;
    height: 62px !important;
  }

  body.app-body > header.app-header .wallet-btn {
    width: 86px !important;
    min-width: 86px !important;
    font-size: 12px !important;
  }

  body.app-body .widget-team-orb {
    width: 74px !important;
    height: 74px !important;
    border-radius: 22px !important;
  }

  body.app-body .choice-buy {
    grid-template-columns: 1fr 112px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.app-body *,
  body.app-body *::before,
  body.app-body *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* v209 phone repair layer: clean glass header/nav, visible controls, no legacy glow blocks. */
body.app-body {
  --mt-bg: #030303;
  --mt-glass: rgba(255, 255, 255, 0.055);
  --mt-glass-strong: rgba(255, 255, 255, 0.092);
  --mt-line: rgba(255, 255, 255, 0.12);
  --mt-line-soft: rgba(255, 255, 255, 0.07);
  --mt-text: #f7f7f4;
  --mt-muted: rgba(255, 255, 255, 0.58);
  --mt-blue: #5FB6FF;
  --mt-shadow: 0 22px 54px rgba(0, 0, 0, 0.56);
  background: var(--mt-bg) !important;
  color: var(--mt-text) !important;
  font-family: "Lato", sans-serif !important;
  overflow-x: hidden !important;
}

body.app-body .app-main {
  width: 100% !important;
  max-width: 460px !important;
  margin: 0 auto !important;
  padding: 0 9px calc(112px + env(safe-area-inset-bottom)) !important;
}

body.app-body *,
body.app-body *::before,
body.app-body *::after {
  -webkit-tap-highlight-color: transparent !important;
}

/* Header: hamburger left, logo truly centered, wallet only on the right. */
body.app-body > header.app-header {
  position: sticky !important;
  top: calc(8px + env(safe-area-inset-top)) !important;
  z-index: 120 !important;
  width: calc(100% - 16px) !important;
  max-width: 444px !important;
  height: 62px !important;
  margin: 8px auto 32px !important;
  padding: 7px 8px !important;
  display: grid !important;
  grid-template-columns: 48px 1fr 96px !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid var(--mt-line-soft) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.018)),
    rgba(7, 7, 8, 0.82) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.62) !important;
  backdrop-filter: blur(18px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.15) !important;
  overflow: visible !important;
}

body.app-body > header.app-header::before,
body.app-body > header.app-header::after,
body.app-body .brand-stack::before,
body.app-body .brand-stack::after {
  display: none !important;
  content: none !important;
}

body.app-body > header.app-header .hdr-burger {
  grid-column: 1 !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  box-shadow: none !important;
}

body.app-body > header.app-header .hdr-burger svg {
  width: 21px !important;
  height: 21px !important;
  fill: currentColor !important;
}

body.app-body > header.app-header .brand-stack {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 2 !important;
  width: 118px !important;
  height: 44px !important;
  transform: translate(-50%, -50%) !important;
  display: grid !important;
  place-items: center !important;
  pointer-events: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

body.app-body > header.app-header .brand-meme,
body.app-body > header.app-header .brand-throne {
  display: block !important;
  margin: 0 !important;
  font-family: "Bagel Fat One", "Montserrat", sans-serif !important;
  font-size: 23px !important;
  line-height: .82 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 0 rgba(0,0,0,.45) !important;
}

body.app-body > header.app-header .brand-meme { color: var(--mt-blue) !important; }
body.app-body > header.app-header .brand-throne { color: #fff !important; }

body.app-body > header.app-header .hdr-tools {
  grid-column: 3 !important;
  justify-self: end !important;
  z-index: 3 !important;
}

body.app-body > header.app-header .wallet-btn {
  width: 96px !important;
  height: 46px !important;
  min-width: 96px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #f7f7f2 !important;
  color: #050505 !important;
  box-shadow: none !important;
  font: 900 13px/1 "Montserrat", sans-serif !important;
}

body.app-body > header.app-header .wallet-label {
  max-width: 76px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #050505 !important;
}

body.app-body > header.app-header .wallet-dot,
body.app-body > header.app-header .bal-widget,
body.app-body > header.app-header [data-balance-widget] {
  display: none !important;
}

/* Drawer menu. */
body.app-body .nav-drawer-card {
  max-height: calc(100dvh - 32px - env(safe-area-inset-top)) !important;
  overflow-y: auto !important;
  border: 1px solid var(--mt-line) !important;
  border-radius: 30px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.025)),
    rgba(8, 8, 9, .94) !important;
  box-shadow: var(--mt-shadow) !important;
}

body.app-body .nav-drawer-item,
body.app-body .nav-drawer-lang {
  border: 0 !important;
  border-radius: 19px !important;
  background: rgba(255,255,255,.055) !important;
  color: #fff !important;
  box-shadow: none !important;
}

body.app-body .nav-drawer-item svg,
body.app-body .nav-drawer-lang svg {
  color: #fff !important;
  fill: currentColor !important;
}

/* Bottom nav: exact circular slider under each icon. */
body.app-body > nav.app-bnav.app-bnav {
  --nav-items: 6;
  --nav-pad: 6px;
  --nav-gap: 5px;
  --nav-size: min(50px, calc((100vw - 54px) / 6));
  left: 50% !important;
  right: auto !important;
  bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  width: calc((var(--nav-size) * 6) + (var(--nav-gap) * 5) + (var(--nav-pad) * 2)) !important;
  max-width: calc(100vw - 18px) !important;
  height: calc(var(--nav-size) + (var(--nav-pad) * 2)) !important;
  padding: var(--nav-pad) !important;
  display: grid !important;
  grid-template-columns: repeat(6, var(--nav-size)) !important;
  gap: var(--nav-gap) !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--mt-line-soft) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.015)),
    rgba(0,0,0,.90) !important;
  box-shadow: 0 16px 46px rgba(0,0,0,.66) !important;
  transform: translateX(-50%) !important;
  overflow: hidden !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}

body.app-body > nav.app-bnav[data-active-tab="home"] { --nav-index: 0 !important; }
body.app-body > nav.app-bnav[data-active-tab="leagues"] { --nav-index: 1 !important; }
body.app-body > nav.app-bnav[data-active-tab="shop"] { --nav-index: 2 !important; }
body.app-body > nav.app-bnav[data-active-tab="rewards"] { --nav-index: 3 !important; }
body.app-body > nav.app-bnav[data-active-tab="tasks"] { --nav-index: 4 !important; }
body.app-body > nav.app-bnav[data-active-tab="roulette"] { --nav-index: 5 !important; }

body.app-body > nav.app-bnav.app-bnav::before {
  content: "" !important;
  position: absolute !important;
  left: var(--nav-pad) !important;
  top: var(--nav-pad) !important;
  width: var(--nav-size) !important;
  height: var(--nav-size) !important;
  border-radius: 50% !important;
  background: #f7f7f2 !important;
  box-shadow: none !important;
  transform: translateX(calc(var(--nav-index, 0) * (var(--nav-size) + var(--nav-gap)))) !important;
  transition: transform 540ms cubic-bezier(.16,1,.3,1) !important;
}

body.app-body > nav.app-bnav .bn-btn {
  width: var(--nav-size) !important;
  height: var(--nav-size) !important;
  border-radius: 50% !important;
  color: rgba(255,255,255,.62) !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.app-body > nav.app-bnav .bn-btn.is-active {
  color: #000 !important;
}

body.app-body > nav.app-bnav .bn-icon,
body.app-body > nav.app-bnav .bn-icon svg {
  width: 20px !important;
  height: 20px !important;
  color: currentColor !important;
  fill: currentColor !important;
}

/* Remove old decorative cubes/corners/orbs without touching real token logos. */
body.app-body .app-main::before,
body.app-body .app-main::after,
body.app-body .tab::before,
body.app-body .tab::after,
body.app-body .shop-choice::before,
body.app-body .shop-choice::after,
body.app-body .shop-choice-card::before,
body.app-body .shop-choice-card::after,
body.app-body .choice-art::before,
body.app-body .choice-art::after,
body.app-body .reward-node::before,
body.app-body .reward-node::after,
body.app-body .rewards-shell::before,
body.app-body .rewards-shell::after,
body.app-body .arena-card::before,
body.app-body .arena-card::after,
body.app-body .vote-widget::before,
body.app-body .vote-widget::after,
body.app-body .widget-vs::before,
body.app-body .widget-vs::after,
body.app-body .widget-team::before,
body.app-body .widget-team::after,
body.app-body .widget-team-orb::before,
body.app-body .widget-team-orb::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}

/* Home: all controls compact and phone-readable. */
body.app-body .metric-strip {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body .metric-strip .metric {
  min-height: 72px !important;
  padding: 13px 12px !important;
  border: 1px solid var(--mt-line-soft) !important;
  border-radius: 22px !important;
  background: var(--mt-glass) !important;
  box-shadow: none !important;
}

body.app-body .metric-strip span {
  font: 800 9px/1.15 "Montserrat", sans-serif !important;
  color: var(--mt-muted) !important;
  letter-spacing: .02em !important;
}

body.app-body .metric-strip strong {
  color: #fff !important;
  font: 900 24px/1 "Montserrat", sans-serif !important;
}

body.app-body .home-action-row,
body.app-body .story-grid,
body.app-body .command-list {
  gap: 10px !important;
}

body.app-body .home-action-row .home-action,
body.app-body .story-card,
body.app-body .command-row,
body.app-body .task-card {
  min-height: 70px !important;
  border: 1px solid var(--mt-line-soft) !important;
  border-radius: 22px !important;
  background: var(--mt-glass) !important;
  box-shadow: none !important;
}

body.app-body .story-card {
  grid-template-columns: 44px 1fr !important;
}

body.app-body .story-card p {
  display: none !important;
}

body.app-body .story-card > span,
body.app-body .command-icon,
body.app-body .home-action svg {
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}

body.app-body .home-action-row .home-action,
body.app-body .command-row,
body.app-body .story-card strong {
  color: #fff !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 900 !important;
}

/* Vote block: no giant circle/halo, full contrast, tappable buttons. */
body.app-body .arena-section,
body.app-body #active-vote-card,
body.app-body .vote-widget,
body.app-body [data-active-widget] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.app-body .vote-widget {
  padding: 10px 0 0 !important;
}

body.app-body .widget-vs-grid {
  display: grid !important;
  grid-template-columns: 1fr 42px 1fr !important;
  gap: 9px !important;
  align-items: center !important;
}

body.app-body .widget-team-orb {
  width: 86px !important;
  height: 86px !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.07) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.app-body .token-logo-img,
body.app-body .widget-team-lottie,
body.app-body .token-fallback-mark {
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  object-fit: cover !important;
}

body.app-body .token-fallback-mark {
  display: grid !important;
  place-items: center !important;
  color: #06121a !important;
  background: linear-gradient(135deg, var(--mt-blue), #fff 54%, #898989) !important;
  font: 950 20px/1 "Montserrat", sans-serif !important;
}

body.app-body .widget-name {
  color: #fff !important;
  font: 950 18px/1 "Montserrat", sans-serif !important;
}

body.app-body .widget-votes,
body.app-body .widget-meta {
  color: var(--mt-muted) !important;
}

body.app-body .widget-vs {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: #f7f7f2 !important;
  color: #050505 !important;
  box-shadow: none !important;
  font: 950 12px/1 "Montserrat", sans-serif !important;
}

body.app-body .widget-bar-track {
  height: 12px !important;
  background: rgba(255,255,255,.08) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

body.app-body .widget-bar-fill,
body.app-body [data-vs-bar] {
  background: linear-gradient(90deg, var(--mt-blue), #f7f7f2) !important;
  transition: width 560ms cubic-bezier(.16,1,.3,1) !important;
}

body.app-body .widget-vote,
body.app-body [data-vs-prev],
body.app-body [data-vs-next] {
  min-height: 54px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #f7f7f2 !important;
  color: #050505 !important;
  opacity: 1 !important;
  box-shadow: none !important;
  font: 950 12px/1 "Montserrat", sans-serif !important;
}

body.app-body .widget-vote:disabled {
  opacity: .55 !important;
}

body.app-body .home-league-dock {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  margin: 16px 0 24px !important;
}

body.app-body .dock-chip {
  min-height: 64px !important;
  border: 1px solid var(--mt-line-soft) !important;
  border-radius: 22px !important;
  background: var(--mt-glass) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Sliders: plain, not 3D. */
body.app-body .shop-choice-tabs,
body.app-body .league-view-toggle,
body.app-body .league-tier-slider,
body.app-body .tasks-tabs,
body.app-body .forum-tabs,
body.app-body .stake-periods {
  position: relative !important;
  min-height: 56px !important;
  padding: 5px !important;
  border: 1px solid var(--mt-line-soft) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.055) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.app-body .shop-choice-tabs::before,
body.app-body .shop-choice-tabs::after,
body.app-body .league-view-toggle::before,
body.app-body .league-view-toggle::after,
body.app-body .league-tier-slider::before,
body.app-body .league-tier-slider::after {
  display: none !important;
  content: none !important;
}

body.app-body .slider-indicator {
  position: absolute !important;
  top: 5px !important;
  bottom: 5px !important;
  left: 0 !important;
  z-index: 0 !important;
  border-radius: 999px !important;
  background: #f7f7f2 !important;
  box-shadow: none !important;
  transition:
    transform 540ms cubic-bezier(.16,1,.3,1),
    width 540ms cubic-bezier(.16,1,.3,1),
    opacity 160ms ease !important;
}

body.app-body .shop-choice-tabs button,
body.app-body .league-view-toggle button,
body.app-body .league-tier-slider button,
body.app-body .tasks-tabs button,
body.app-body .forum-tabs button,
body.app-body .stake-periods button {
  position: relative !important;
  z-index: 1 !important;
  min-height: 46px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(255,255,255,.55) !important;
  box-shadow: none !important;
  font: 900 13px/1 "Montserrat", sans-serif !important;
}

body.app-body .shop-choice-tabs button.is-active,
body.app-body .league-view-toggle button.is-active,
body.app-body .league-tier-slider button.is-active,
body.app-body .tasks-tabs button.is-active,
body.app-body .forum-tabs button.is-active,
body.app-body .stake-periods button.is-active {
  color: #050505 !important;
}

/* Shop: no nested blue/gray blocks, readable buttons, same-size NFT card. */
body.app-body .tab-shop .shop-hero,
body.app-body .tab-shop .shop-status-grid,
body.app-body .tab-shop .shop-included,
body.app-body .tab-shop .shop-pack-section {
  display: none !important;
}

body.app-body .shop-choice,
body.app-body .shop-choice-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body .shop-choice-card {
  margin-top: 18px !important;
  padding: 0 0 14px !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-areas:
    "art art"
    "copy copy"
    "buy buy"
    "tools tools" !important;
  gap: 0 !important;
  overflow: visible !important;
}

body.app-body .choice-art {
  grid-area: art !important;
  height: clamp(248px, 66vw, 318px) !important;
  margin: 0 0 18px !important;
  border: 0 !important;
  border-radius: 26px !important;
  background: #000 !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

body.app-body .choice-art img {
  width: 112% !important;
  max-width: none !important;
  height: auto !important;
  transform: scale(1.48) !important;
  object-fit: contain !important;
  filter: none !important;
}

body.app-body .choice-copy {
  grid-area: copy !important;
  padding: 0 18px !important;
  background: transparent !important;
}

body.app-body .choice-copy h2 {
  color: #fff !important;
  font: 950 clamp(29px, 8vw, 40px)/.95 "Montserrat", sans-serif !important;
  text-transform: none !important;
}

body.app-body .choice-copy p,
body.app-body .choice-pill,
body.app-body .choice-badge {
  display: none !important;
}

body.app-body .choice-buy {
  grid-area: buy !important;
  margin: 18px 18px 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 130px !important;
  align-items: center !important;
  gap: 12px !important;
  background: transparent !important;
}

body.app-body .choice-buy strong {
  color: #fff !important;
  font: 950 32px/1 "Montserrat", sans-serif !important;
}

body.app-body .choice-buy small {
  color: var(--mt-muted) !important;
}

body.app-body .choice-action,
body.app-body .choice-tool {
  min-height: 54px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: #f7f7f2 !important;
  color: #050505 !important;
  box-shadow: none !important;
  display: grid !important;
  place-items: center !important;
  text-decoration: none !important;
  font: 950 13px/1 "Montserrat", sans-serif !important;
}

body.app-body .choice-tools {
  grid-area: tools !important;
  margin: 16px 18px 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  background: transparent !important;
}

body.app-body .tab-shop .shop-choice-card.shop-slide-out.shop-slide-next { animation: mt-shop-out-next 260ms cubic-bezier(.5,0,.75,0) both !important; }
body.app-body .tab-shop .shop-choice-card.shop-slide-out.shop-slide-prev { animation: mt-shop-out-prev 260ms cubic-bezier(.5,0,.75,0) both !important; }
body.app-body .tab-shop .shop-choice-card.shop-slide-in.shop-slide-next { animation: mt-shop-in-next 390ms cubic-bezier(.16,1,.3,1) both !important; }
body.app-body .tab-shop .shop-choice-card.shop-slide-in.shop-slide-prev { animation: mt-shop-in-prev 390ms cubic-bezier(.16,1,.3,1) both !important; }

/* Rewards/roulette/tasks/profile/AI: glass surfaces, no block-on-block clutter. */
body.app-body .rewards-shell,
body.app-body .tasks-list,
body.app-body .task-card,
body.app-body .roulette-shell,
body.app-body .refs-card,
body.app-body .refs-stats,
body.app-body .profile-hero,
body.app-body .profile-scoreboard,
body.app-body .profile-cashbacks,
body.app-body .ai-shell,
body.app-body .forum-shell,
body.app-body .staking-shell {
  border: 1px solid var(--mt-line-soft) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.022)),
    rgba(255,255,255,.026) !important;
  box-shadow: none !important;
}

body.app-body .profile-scoreboard > *,
body.app-body .profile-cashbacks > *,
body.app-body .reward-step {
  background: transparent !important;
}

body.app-body .profile-cashbacks h2,
body.app-body .profile-cashbacks .section-h {
  padding-left: 22px !important;
}

body.app-body .profile-lvl,
body.app-body [data-profile-level],
body.app-body .checkin-step.is-current,
body.app-body .checkin-step.is-done {
  background: var(--mt-blue) !important;
  color: #050505 !important;
}

body.app-body .reward-node {
  border: 1px solid var(--mt-line-soft) !important;
  background: rgba(255,255,255,.045) !important;
  color: #fff !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.app-body .reward-emoji,
body.app-body .reward-node .reward-icon,
body.app-body .reward-node [aria-hidden="true"] {
  color: var(--mt-blue) !important;
  filter: grayscale(1) sepia(1) saturate(4) hue-rotate(168deg) brightness(1.25) !important;
}

body.app-body .r-item {
  overflow: hidden !important;
  border: 1px solid var(--mt-line-soft) !important;
  background: rgba(255,255,255,.045) !important;
}

body.app-body .r-lottie {
  width: 126px !important;
  height: 126px !important;
  margin: 0 auto !important;
  transform: translateY(42px) scale(1.36) rotate(-5deg) !important;
  transform-origin: 50% 100% !important;
  filter: grayscale(1) sepia(1) saturate(3) hue-rotate(168deg) brightness(1.18) !important;
}

body.app-body .roulette-modal-lottie,
body.app-body [data-roulette-modal-lottie],
body.app-body [data-reward-modal-emoji] {
  filter: none !important;
  transform: none !important;
}

body.app-body .ai-shell textarea,
body.app-body .refs-card input,
body.app-body .staking-shell input {
  border: 1px solid var(--mt-line-soft) !important;
  background: rgba(0,0,0,.44) !important;
  color: #fff !important;
}

body.app-body .ai-attach,
body.app-body .ai-send,
body.app-body .refs-card button,
body.app-body .refs-card a,
body.app-body .task-btn,
body.app-body .roulette-spin {
  border: 0 !important;
  background: #f7f7f2 !important;
  color: #050505 !important;
  box-shadow: none !important;
}

body.app-body .command-icon,
body.app-body .story-card svg,
body.app-body .nav-drawer-item svg,
body.app-body .task-card svg,
body.app-body .refs-card svg,
body.app-body .ai-shell svg,
body.app-body .staking-shell svg {
  background: transparent !important;
  color: #fff !important;
  fill: currentColor !important;
}

@media (max-width: 360px) {
  body.app-body > header.app-header {
    grid-template-columns: 44px 1fr 86px !important;
    height: 60px !important;
  }

  body.app-body > header.app-header .wallet-btn {
    width: 86px !important;
    min-width: 86px !important;
    font-size: 12px !important;
  }

  body.app-body > header.app-header .brand-meme,
  body.app-body > header.app-header .brand-throne {
    font-size: 21px !important;
  }

  body.app-body .choice-buy {
    grid-template-columns: 1fr 116px !important;
  }
}

/* v210 phone-first repair: stable header, nav, shop, vote, rewards and roulette. */
body.app-body {
  --mt-page: #030303;
  --mt-ink: #f7f7f2;
  --mt-muted-2: rgba(247,247,242,.58);
  --mt-glass-clean: rgba(255,255,255,.055);
  --mt-glass-clean-2: rgba(255,255,255,.085);
  --mt-line-clean: rgba(255,255,255,.13);
  --mt-blue: #5FB6FF;
  background:
    radial-gradient(100% 78% at 50% -12%, rgba(95,182,255,.13), transparent 54%),
    linear-gradient(180deg, #050505 0%, #020202 100%) !important;
  color: var(--mt-ink) !important;
  font-family: "Montserrat", "Lato", sans-serif !important;
}

body.app-body .app-main {
  max-width: 460px !important;
  padding: 0 10px calc(110px + env(safe-area-inset-bottom)) !important;
}

body.app-body * {
  -webkit-tap-highlight-color: transparent !important;
}

/* Header: hamburger left, logo centered, no vote balance in header. */
body.app-body > header.app-header {
  position: sticky !important;
  top: calc(8px + env(safe-area-inset-top)) !important;
  z-index: 200 !important;
  width: calc(100% - 16px) !important;
  max-width: 444px !important;
  height: 62px !important;
  margin: 8px auto 34px !important;
  padding: 7px 8px !important;
  display: grid !important;
  grid-template-columns: 48px 1fr 96px !important;
  gap: 8px !important;
  align-items: center !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.02)),
    rgba(5,5,5,.88) !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.64) !important;
  backdrop-filter: blur(18px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.18) !important;
  overflow: visible !important;
}

body.app-body > header.app-header::before,
body.app-body > header.app-header::after,
body.app-body > header.app-header .brand-stack::before,
body.app-body > header.app-header .brand-stack::after {
  display: none !important;
  content: none !important;
}

body.app-body > header.app-header .hdr-burger,
body.app-body > header.app-header button.hdr-burger {
  grid-column: 1 !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  box-shadow: none !important;
}

body.app-body > header.app-header .hdr-burger svg {
  width: 22px !important;
  height: 22px !important;
  fill: currentColor !important;
}

body.app-body > header.app-header .brand-stack {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 132px !important;
  height: 46px !important;
  transform: translate(-50%, -50%) !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 0 !important;
  pointer-events: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: visible !important;
}

body.app-body > header.app-header .brand-meme,
body.app-body > header.app-header .brand-throne {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
  font-family: "Bagel Fat One", "Montserrat", sans-serif !important;
  font-size: 24px !important;
  line-height: .8 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 0 rgba(0,0,0,.48) !important;
}

body.app-body > header.app-header .brand-meme { color: var(--mt-blue) !important; }
body.app-body > header.app-header .brand-throne { color: #fff !important; }

body.app-body > header.app-header .hdr-tools {
  grid-column: 3 !important;
  justify-self: end !important;
  z-index: 3 !important;
}

body.app-body > header.app-header .wallet-btn {
  width: 96px !important;
  height: 46px !important;
  min-width: 96px !important;
  padding: 0 13px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #f7f7f2 !important;
  color: #050505 !important;
  box-shadow: none !important;
  font: 900 13px/1 "Montserrat", sans-serif !important;
}

body.app-body > header.app-header .wallet-label {
  max-width: 76px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #050505 !important;
}

body.app-body > header.app-header .wallet-dot,
body.app-body > header.app-header .bal-widget,
body.app-body > header.app-header [data-balance-widget] {
  display: none !important;
}

/* Drawer: full phone menu, readable, no icon tiles. */
body.app-body .nav-drawer {
  z-index: 260 !important;
  background: rgba(0,0,0,.55) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

body.app-body .nav-drawer-card {
  width: min(340px, calc(100vw - 26px)) !important;
  max-height: calc(100dvh - 28px - env(safe-area-inset-top)) !important;
  overflow-y: auto !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 30px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.025)),
    rgba(5,5,5,.95) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.76) !important;
}

body.app-body .nav-drawer-close {
  background: #f7f7f2 !important;
  color: #050505 !important;
}

body.app-body .nav-drawer-item,
body.app-body .nav-drawer-lang {
  min-height: 52px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
  box-shadow: none !important;
}

body.app-body .nav-drawer-item.is-active {
  background: rgba(95,182,255,.2) !important;
}

body.app-body .nav-drawer-item svg,
body.app-body .nav-drawer-lang svg {
  background: transparent !important;
  color: #fff !important;
  fill: currentColor !important;
}

/* Bottom nav: six equal slots, circular sliding pill, no drift. */
body.app-body > nav.app-bnav.app-bnav {
  --nav-index: 0;
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  width: min(372px, calc(100vw - 20px)) !important;
  height: 64px !important;
  padding: 6px !important;
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 0 !important;
  align-items: center !important;
  justify-content: stretch !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.014)),
    rgba(0,0,0,.92) !important;
  box-shadow: 0 18px 54px rgba(0,0,0,.68) !important;
  transform: translateX(-50%) !important;
  overflow: hidden !important;
  backdrop-filter: blur(18px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.1) !important;
}

body.app-body > nav.app-bnav[data-active-tab="home"] { --nav-index: 0 !important; }
body.app-body > nav.app-bnav[data-active-tab="leagues"] { --nav-index: 1 !important; }
body.app-body > nav.app-bnav[data-active-tab="shop"] { --nav-index: 2 !important; }
body.app-body > nav.app-bnav[data-active-tab="rewards"] { --nav-index: 3 !important; }
body.app-body > nav.app-bnav[data-active-tab="tasks"] { --nav-index: 4 !important; }
body.app-body > nav.app-bnav[data-active-tab="roulette"] { --nav-index: 5 !important; }

body.app-body > nav.app-bnav.app-bnav::before {
  content: "" !important;
  position: absolute !important;
  left: 6px !important;
  top: 6px !important;
  width: calc((100% - 12px) / 6) !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: #f7f7f2 !important;
  box-shadow: none !important;
  transform: translateX(calc(var(--nav-index, 0) * 100%)) !important;
  transition: transform 520ms cubic-bezier(.16,1,.3,1) !important;
}

body.app-body > nav.app-bnav .bn-btn {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 52px !important;
  min-width: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: rgba(255,255,255,.62) !important;
  box-shadow: none !important;
}

body.app-body > nav.app-bnav .bn-btn.is-active {
  color: #050505 !important;
}

body.app-body > nav.app-bnav .bn-icon,
body.app-body > nav.app-bnav .bn-icon svg {
  width: 20px !important;
  height: 20px !important;
  color: currentColor !important;
  fill: currentColor !important;
}

/* Remove old decorative cubes/corners/orbs and debug-looking leftovers. */
body.app-body .app-main::before,
body.app-body .app-main::after,
body.app-body .tab::before,
body.app-body .tab::after,
body.app-body .shop-choice::before,
body.app-body .shop-choice::after,
body.app-body .shop-choice-card::before,
body.app-body .shop-choice-card::after,
body.app-body .choice-art::before,
body.app-body .choice-art::after,
body.app-body .reward-node::before,
body.app-body .reward-node::after,
body.app-body .rewards-shell::before,
body.app-body .rewards-shell::after,
body.app-body .arena-card::before,
body.app-body .arena-card::after,
body.app-body .vote-widget::before,
body.app-body .vote-widget::after,
body.app-body .widget-vs::before,
body.app-body .widget-vs::after,
body.app-body .widget-team::before,
body.app-body .widget-team::after,
body.app-body .widget-team-orb::before,
body.app-body .widget-team-orb::after,
body.app-body .widget-team-lottie::before,
body.app-body .widget-team-lottie::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}

/* Home header metrics and actions. */
body.app-body .home-hero {
  gap: 14px !important;
}

body.app-body .home-portrait {
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.app-body .home-portrait .hero-photo {
  width: min(86vw, 360px) !important;
  margin: 0 auto !important;
  display: block !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

body.app-body .metric-strip {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.app-body .metric-strip .metric {
  min-height: 72px !important;
  padding: 13px 12px !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.055) !important;
  box-shadow: none !important;
}

body.app-body .metric-strip span {
  color: rgba(255,255,255,.58) !important;
  font: 800 9px/1.15 "Montserrat", sans-serif !important;
  letter-spacing: .015em !important;
}

body.app-body .metric-strip strong {
  color: #fff !important;
  font: 950 24px/1 "Montserrat", sans-serif !important;
}

body.app-body .home-action-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

body.app-body .home-action-row .home-cta,
body.app-body .home-action-row .home-action {
  min-height: 58px !important;
  width: 100% !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: #f7f7f2 !important;
  color: #050505 !important;
  box-shadow: none !important;
  transform: none !important;
  font: 950 12px/1 "Montserrat", sans-serif !important;
}

body.app-body .home-action-row .home-cta-secondary,
body.app-body .home-action-row .home-action:nth-child(2) {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}

/* Vote card: fix actual DOM, remove giant circle, make vote buttons clickable. */
body.app-body .arena-section,
body.app-body #active-vote-card,
body.app-body [data-active-widget] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.app-body #active-vote-card {
  padding: 14px 0 0 !important;
  color: #fff !important;
}

body.app-body #active-vote-card .widget-vs {
  width: 100% !important;
  height: auto !important;
  min-height: 148px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  justify-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.app-body #active-vote-card .widget-team {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  justify-items: center !important;
  gap: 8px !important;
  text-align: center !important;
  background: transparent !important;
}

body.app-body #active-vote-card .widget-team-orb {
  width: 88px !important;
  height: 88px !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.075) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.app-body #active-vote-card .widget-team-lottie,
body.app-body #active-vote-card .token-logo-img,
body.app-body #active-vote-card .token-fallback-mark {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  border-radius: inherit !important;
  object-fit: cover !important;
}

body.app-body #active-vote-card .token-logo-img {
  filter: none !important;
}

body.app-body #active-vote-card .token-fallback-mark {
  color: #06121a !important;
  background: linear-gradient(135deg, var(--mt-blue), #f7f7f2 56%, #9b9b9b) !important;
  font: 950 21px/1 "Montserrat", sans-serif !important;
}

body.app-body #active-vote-card .widget-vs-label {
  width: 44px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: #f7f7f2 !important;
  color: #050505 !important;
  box-shadow: none !important;
  font: 950 12px/1 "Montserrat", sans-serif !important;
}

body.app-body #active-vote-card .widget-team-name {
  color: #fff !important;
  font: 950 18px/1 "Montserrat", sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

body.app-body #active-vote-card .widget-team-votes {
  color: rgba(255,255,255,.58) !important;
  font: 800 11px/1 "Lato", sans-serif !important;
}

body.app-body #active-vote-card .widget-progress {
  width: 100% !important;
  height: 12px !important;
  margin: 12px 0 10px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.08) !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

body.app-body #active-vote-card .widget-progress-a {
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, var(--mt-blue), #f7f7f2) !important;
  transition: width 580ms cubic-bezier(.16,1,.3,1) !important;
}

body.app-body #active-vote-card .widget-foot,
body.app-body #active-vote-card .match-insight {
  color: rgba(255,255,255,.58) !important;
}

body.app-body #active-vote-card .match-insight {
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.045) !important;
}

body.app-body #active-vote-card .widget-cta {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

body.app-body #active-vote-card .widget-vote-btn,
body.app-body #active-vote-card [data-vs-vote],
body.app-body .seg-control [data-vs-prev],
body.app-body .seg-control [data-vs-next] {
  min-height: 54px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #f7f7f2 !important;
  color: #050505 !important;
  opacity: 1 !important;
  box-shadow: none !important;
  pointer-events: auto !important;
  font: 950 12px/1 "Montserrat", sans-serif !important;
}

body.app-body #active-vote-card .widget-vote-btn:disabled {
  opacity: .52 !important;
  pointer-events: none !important;
}

body.app-body .seg-control {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body .home-league-dock {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  margin: 16px 0 26px !important;
}

body.app-body .dock-chip {
  min-height: 64px !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.055) !important;
  color: #fff !important;
  box-shadow: none !important;
}

body.app-body .story-card,
body.app-body .command-row,
body.app-body .task-card {
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.045) !important;
  box-shadow: none !important;
}

body.app-body .story-card {
  grid-template-columns: 44px 1fr !important;
}

body.app-body .story-card p {
  display: none !important;
}

body.app-body .story-card > span,
body.app-body .command-icon,
body.app-body .task-card svg {
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Plain pill sliders, no 3D remnants. */
body.app-body .shop-choice-tabs,
body.app-body .league-view-toggle,
body.app-body .league-tier-slider,
body.app-body .tasks-tabs,
body.app-body .forum-tabs,
body.app-body .stake-periods {
  position: relative !important;
  min-height: 56px !important;
  padding: 5px !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.055) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.app-body .shop-choice-tabs::before,
body.app-body .shop-choice-tabs::after,
body.app-body .league-view-toggle::before,
body.app-body .league-view-toggle::after,
body.app-body .league-tier-slider::before,
body.app-body .league-tier-slider::after {
  display: none !important;
  content: none !important;
}

body.app-body .slider-indicator {
  position: absolute !important;
  top: 5px !important;
  bottom: 5px !important;
  left: 0 !important;
  z-index: 0 !important;
  border-radius: 999px !important;
  background: #f7f7f2 !important;
  box-shadow: none !important;
  transition:
    transform 520ms cubic-bezier(.16,1,.3,1),
    width 520ms cubic-bezier(.16,1,.3,1),
    opacity 160ms ease !important;
}

body.app-body .shop-choice-tabs button,
body.app-body .league-view-toggle button,
body.app-body .league-tier-slider button,
body.app-body .tasks-tabs button,
body.app-body .forum-tabs button,
body.app-body .stake-periods button {
  position: relative !important;
  z-index: 1 !important;
  min-height: 46px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(255,255,255,.58) !important;
  box-shadow: none !important;
  transform: none !important;
  font: 900 13px/1 "Montserrat", sans-serif !important;
}

body.app-body .shop-choice-tabs button.is-active,
body.app-body .league-view-toggle button.is-active,
body.app-body .league-tier-slider button.is-active,
body.app-body .tasks-tabs button.is-active,
body.app-body .forum-tabs button.is-active,
body.app-body .stake-periods button.is-active {
  color: #050505 !important;
}

/* Shop: only selected pack, same art size, visible text/buttons. */
body.app-body .tab-shop .shop-hero,
body.app-body .tab-shop .shop-status-grid,
body.app-body .tab-shop .shop-included,
body.app-body .tab-shop .shop-pack-section {
  display: none !important;
}

body.app-body .shop-choice,
body.app-body .shop-choice-card {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.app-body .shop-choice-card {
  margin-top: 18px !important;
  padding: 0 0 14px !important;
  display: grid !important;
  grid-template-areas:
    "art"
    "copy"
    "buy"
    "tools" !important;
  gap: 0 !important;
  overflow: visible !important;
}

body.app-body .choice-art {
  grid-area: art !important;
  height: clamp(252px, 68vw, 322px) !important;
  margin: 0 0 20px !important;
  border: 0 !important;
  border-radius: 28px !important;
  background: #000 !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

body.app-body .choice-art img {
  width: 122% !important;
  max-width: none !important;
  height: auto !important;
  display: block !important;
  margin: auto !important;
  object-fit: contain !important;
  transform: scale(1.58) !important;
  filter: none !important;
}

body.app-body .choice-copy {
  grid-area: copy !important;
  padding: 0 18px !important;
  background: transparent !important;
}

body.app-body .choice-copy h2 {
  color: #fff !important;
  font: 950 clamp(29px, 8vw, 40px)/.95 "Montserrat", sans-serif !important;
}

body.app-body .choice-copy p,
body.app-body .choice-pill,
body.app-body .choice-badge {
  display: none !important;
}

body.app-body .choice-buy {
  grid-area: buy !important;
  margin: 18px 18px 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 128px !important;
  align-items: center !important;
  gap: 12px !important;
  background: transparent !important;
}

body.app-body .choice-buy strong {
  color: #fff !important;
  font: 950 32px/1 "Montserrat", sans-serif !important;
}

body.app-body .choice-buy small {
  color: rgba(255,255,255,.58) !important;
}

body.app-body .choice-action,
body.app-body .choice-tool,
body.app-body .shop-primary,
body.app-body .shop-buy-btn {
  min-height: 54px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: #f7f7f2 !important;
  color: #050505 !important;
  box-shadow: none !important;
  display: grid !important;
  place-items: center !important;
  text-decoration: none !important;
  font: 950 13px/1 "Montserrat", sans-serif !important;
}

body.app-body .choice-tools {
  grid-area: tools !important;
  margin: 16px 18px 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  background: transparent !important;
}

body.app-body .tab-shop .shop-choice-card.shop-slide-out.shop-slide-next { animation: mt-shop-out-next 260ms cubic-bezier(.5,0,.75,0) both !important; }
body.app-body .tab-shop .shop-choice-card.shop-slide-out.shop-slide-prev { animation: mt-shop-out-prev 260ms cubic-bezier(.5,0,.75,0) both !important; }
body.app-body .tab-shop .shop-choice-card.shop-slide-in.shop-slide-next { animation: mt-shop-in-next 390ms cubic-bezier(.16,1,.3,1) both !important; }
body.app-body .tab-shop .shop-choice-card.shop-slide-in.shop-slide-prev { animation: mt-shop-in-prev 390ms cubic-bezier(.16,1,.3,1) both !important; }

/* Rewards, roulette, profile, tasks, refs, AI, forum, staking. */
body.app-body .rewards-shell,
body.app-body .tasks-list,
body.app-body .task-card,
body.app-body .roulette-shell,
body.app-body .refs-card,
body.app-body .refs-stats,
body.app-body .profile-hero,
body.app-body .profile-scoreboard,
body.app-body .profile-cashbacks,
body.app-body .ai-shell,
body.app-body .forum-shell,
body.app-body .staking-shell {
  border: 1px solid rgba(255,255,255,.11) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.022)),
    rgba(255,255,255,.026) !important;
  box-shadow: none !important;
}

body.app-body .profile-cashbacks h2,
body.app-body .profile-cashbacks .section-h {
  padding-left: 22px !important;
}

body.app-body .profile-scoreboard > *,
body.app-body .reward-step {
  background: transparent !important;
}

body.app-body .profile-lvl,
body.app-body [data-profile-level],
body.app-body .checkin-step.is-current,
body.app-body .checkin-step.is-done {
  background: var(--mt-blue) !important;
  color: #050505 !important;
}

body.app-body .reward-node {
  border: 1px solid rgba(255,255,255,.1) !important;
  background: rgba(255,255,255,.045) !important;
  color: #fff !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.app-body .reward-node .reward-art,
body.app-body .reward-emoji,
body.app-body .reward-node .reward-icon,
body.app-body .reward-node [aria-hidden="true"] {
  color: var(--mt-blue) !important;
  filter: grayscale(1) sepia(1) saturate(4) hue-rotate(168deg) brightness(1.28) !important;
}

body.app-body .r-item {
  min-width: 116px !important;
  height: 118px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.045) !important;
}

body.app-body .r-lottie {
  width: 148px !important;
  height: 148px !important;
  margin: 0 auto !important;
  font-size: 92px !important;
  transform: translateY(46px) scale(1.32) rotate(-5deg) !important;
  transform-origin: 50% 100% !important;
  filter: grayscale(1) sepia(1) saturate(3) hue-rotate(168deg) brightness(1.24) !important;
}

body.app-body .roulette-modal-lottie,
body.app-body [data-roulette-modal-lottie],
body.app-body [data-reward-modal-emoji] {
  filter: none !important;
  transform: none !important;
}

body.app-body .roulette-spin-btn,
body.app-body .roulette-spin,
body.app-body .task-btn,
body.app-body .ai-attach,
body.app-body .ai-send,
body.app-body .refs-card button,
body.app-body .refs-card a,
body.app-body .stake-start,
body.app-body .stake-check {
  min-height: 52px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: #f7f7f2 !important;
  color: #050505 !important;
  box-shadow: none !important;
  font: 950 13px/1 "Montserrat", sans-serif !important;
}

body.app-body .ai-shell textarea,
body.app-body .ai-shell input,
body.app-body .refs-card input,
body.app-body .staking-shell input {
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 18px !important;
  background: rgba(0,0,0,.46) !important;
  color: #fff !important;
}

body.app-body .command-icon,
body.app-body .story-card svg,
body.app-body .task-card svg,
body.app-body .refs-card svg,
body.app-body .ai-shell svg,
body.app-body .staking-shell svg,
body.app-body .forum-shell svg {
  background: transparent !important;
  color: #fff !important;
  fill: currentColor !important;
  box-shadow: none !important;
}

body.app-body .pass-art,
body.app-body .pass-art img {
  background: transparent !important;
  mix-blend-mode: normal !important;
}

body.app-body button:active,
body.app-body a:active {
  transform: scale(.97) !important;
}

@media (max-width: 360px) {
  body.app-body > header.app-header {
    grid-template-columns: 46px 1fr 86px !important;
    height: 60px !important;
  }

  body.app-body > header.app-header .wallet-btn {
    width: 86px !important;
    min-width: 86px !important;
    font-size: 12px !important;
  }

  body.app-body > header.app-header .brand-meme,
  body.app-body > header.app-header .brand-throne {
    font-size: 22px !important;
  }

  body.app-body #active-vote-card .widget-team-orb {
    width: 76px !important;
    height: 76px !important;
    border-radius: 22px !important;
  }

  body.app-body .choice-buy {
    grid-template-columns: 1fr 112px !important;
  }
}

/* v211 stability pass: fix surviving layout conflicts from older override layers. */
body.app-body {
  --mt-blue: #5FB6FF;
  --mt-page: #030303;
  --mt-panel: rgba(255,255,255,.055);
  --mt-panel-2: rgba(255,255,255,.082);
  --mt-line: rgba(255,255,255,.12);
  background:
    radial-gradient(94% 72% at 50% -14%, rgba(95,182,255,.16), transparent 56%),
    linear-gradient(180deg, #050505 0%, #000 100%) !important;
}

body.app-body .app-main {
  padding-top: 0 !important;
}

/* Header must not inherit absolute positioning from older builds. */
body.app-body > header.app-header {
  position: sticky !important;
  inset: auto !important;
  top: calc(8px + env(safe-area-inset-top)) !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  width: calc(100vw - 18px) !important;
  max-width: 444px !important;
  height: 64px !important;
  margin: calc(8px + env(safe-area-inset-top)) auto 34px !important;
  padding: 7px 8px !important;
  grid-template-columns: 50px 1fr 104px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.025)),
    rgba(0,0,0,.9) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.72) !important;
}

body.app-body > header.app-header .hdr-burger,
body.app-body > header.app-header button.hdr-burger,
body.app-body > header.app-header .hdr-tools,
body.app-body > header.app-header .wallet-btn,
body.app-body > header.app-header button.wallet-btn {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
}

body.app-body > header.app-header .hdr-burger,
body.app-body > header.app-header button.hdr-burger {
  grid-column: 1 !important;
  justify-self: start !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.app-body > header.app-header .hdr-tools {
  grid-column: 3 !important;
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0 !important;
}

body.app-body > header.app-header .wallet-btn,
body.app-body > header.app-header button.wallet-btn {
  width: 104px !important;
  min-width: 104px !important;
  max-width: 104px !important;
  height: 48px !important;
  overflow: hidden !important;
}

body.app-body > header.app-header .brand-stack {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
}

/* Bottom nav: fixed to viewport edges, slider centered under each icon. */
body.app-body > nav.app-bnav.app-bnav {
  position: fixed !important;
  left: 10px !important;
  right: 10px !important;
  bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  width: auto !important;
  max-width: 424px !important;
  margin-inline: auto !important;
  height: 68px !important;
  padding: 6px !important;
  transform: none !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  overflow: hidden !important;
}

body.app-body > nav.app-bnav.app-bnav::before {
  left: 6px !important;
  top: 6px !important;
  width: calc((100% - 12px) / 6) !important;
  height: 56px !important;
  border-radius: 999px !important;
  transform: translateX(calc(var(--nav-index, 0) * 100%)) !important;
  transition: transform 560ms cubic-bezier(.16,1,.3,1) !important;
}

body.app-body > nav.app-bnav .bn-btn {
  height: 56px !important;
  border-radius: 999px !important;
}

/* Avoid press transforms on navigation and sliders; they were throwing geometry off. */
body.app-body > header.app-header button:active,
body.app-body > header.app-header a:active,
body.app-body > nav.app-bnav button:active,
body.app-body .shop-choice-tabs button:active,
body.app-body .league-view-toggle button:active,
body.app-body .league-tier-slider button:active,
body.app-body .tasks-tabs button:active,
body.app-body .forum-tabs button:active,
body.app-body .stake-periods button:active {
  transform: none !important;
}

/* Plain, readable mobile sliders. */
body.app-body .seg-control,
body.app-body .shop-choice-tabs,
body.app-body .league-view-toggle,
body.app-body .league-tier-slider,
body.app-body .tasks-tabs,
body.app-body .forum-tabs,
body.app-body .stake-periods {
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.035)),
    rgba(0,0,0,.52) !important;
  border: 1px solid var(--mt-line) !important;
  box-shadow: none !important;
}

body.app-body .slider-indicator {
  border-radius: 999px !important;
  background: #f7f7f2 !important;
  box-shadow: none !important;
}

/* Vote card: remove the last visible halo/circle and keep all controls active. */
body.app-body .arena-section,
body.app-body #active-vote-card,
body.app-body #active-vote-card .widget-vs,
body.app-body #active-vote-card .widget-team,
body.app-body #active-vote-card .widget-team-orb {
  background-image: none !important;
  box-shadow: none !important;
}

body.app-body #active-vote-card,
body.app-body #active-vote-card .widget-vs {
  position: relative !important;
  z-index: 1 !important;
}

body.app-body #active-vote-card .widget-team-orb {
  isolation: isolate !important;
}

body.app-body #active-vote-card .widget-team-orb::before,
body.app-body #active-vote-card .widget-team-orb::after,
body.app-body #active-vote-card .widget-vs::before,
body.app-body #active-vote-card .widget-vs::after {
  display: none !important;
  content: none !important;
}

body.app-body #active-vote-card .widget-vote-btn,
body.app-body #active-vote-card [data-vs-vote] {
  color: #050505 !important;
  background: #f7f7f2 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

body.app-body #active-vote-card .widget-vote-btn:not(:disabled):active {
  transform: scale(.96) !important;
}

/* Shop: selected pack only, readable buttons, consistent NFT card size. */
body.app-body .shop-choice {
  padding-top: 2px !important;
}

body.app-body .shop-choice-card {
  min-height: 0 !important;
}

body.app-body .choice-art {
  height: clamp(278px, 72vw, 340px) !important;
  background: #000 !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body .choice-art img {
  width: 132% !important;
  transform: scale(1.64) !important;
  filter: none !important;
}

body.app-body .choice-action,
body.app-body .choice-tool,
body.app-body .shop-primary,
body.app-body .shop-secondary,
body.app-body .shop-buy-btn {
  color: #050505 !important;
  background: #f7f7f2 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

body.app-body .choice-tools,
body.app-body .choice-buy,
body.app-body .promo-strip,
body.app-body .shop-hero-actions {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Roulette: large cropped static gift art in the strip; Lottie remains only in the win modal. */
body.app-body .roulette-stage {
  min-height: 154px !important;
  overflow: hidden !important;
}

body.app-body .r-item {
  width: 132px !important;
  min-width: 132px !important;
  height: 132px !important;
  overflow: hidden !important;
}

body.app-body .r-lottie {
  width: 178px !important;
  height: 178px !important;
  font-size: 118px !important;
  transform: translateY(54px) scale(1.42) rotate(-6deg) !important;
  transform-origin: center bottom !important;
}

body.app-body .roulette-modal-card [data-roulette-modal-lottie],
body.app-body .roulette-modal-card .roulette-modal-lottie {
  width: 190px !important;
  height: 190px !important;
}

/* Tasks, refs, profile, AI, forum and staking keep visible glass surfaces, not nested blue blocks. */
body.app-body .task-card,
body.app-body .refs-card,
body.app-body .refs-stats,
body.app-body .profile-hero,
body.app-body .profile-scoreboard,
body.app-body .profile-cashbacks,
body.app-body .ai-shell,
body.app-body .forum-shell,
body.app-body .staking-shell,
body.app-body .rewards-shell,
body.app-body .roulette-shell {
  background:
    linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.024)),
    rgba(0,0,0,.42) !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.42) !important;
}

body.app-body .profile-scoreboard {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 10px !important;
}

body.app-body .profile-scoreboard article {
  border: 0 !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.045) !important;
}

body.app-body .profile-lvl,
body.app-body [data-profile-level] {
  background: var(--mt-blue) !important;
  color: #050505 !important;
}

body.app-body .profile-cashbacks h2,
body.app-body .profile-cashbacks .profile-cashbacks-h {
  margin-left: 18px !important;
}

body.app-body .refs-stats {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  padding: 10px !important;
}

body.app-body .refs-stats article {
  border: 0 !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.045) !important;
}

body.app-body .ai-form {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 48px !important;
  gap: 8px !important;
}

/* Rewards: keep emoji rewards, tint them blue, and remove the old corner square. */
body.app-body .reward-node,
body.app-body .reward-step,
body.app-body .reward-lanes {
  overflow: hidden !important;
}

body.app-body .reward-node .reward-art,
body.app-body .reward-node [aria-hidden="true"] {
  color: var(--mt-blue) !important;
  font-size: 48px !important;
  opacity: .7 !important;
  transform: translate(28%, 28%) rotate(-8deg) scale(1.35) !important;
  transform-origin: right bottom !important;
}

body.app-body .reward-node::before,
body.app-body .reward-node::after {
  display: none !important;
  content: none !important;
}

/* Phone-first tightening. */
@media (max-width: 380px) {
  body.app-body > header.app-header {
    grid-template-columns: 48px 1fr 96px !important;
  }

  body.app-body > header.app-header .wallet-btn,
  body.app-body > header.app-header button.wallet-btn {
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    font-size: 12px !important;
  }

  body.app-body .home-action-row,
  body.app-body #active-vote-card .widget-cta,
  body.app-body .choice-tools {
    gap: 8px !important;
  }
}

/* v212 mobile repair: stable shell, readable controls, no legacy halos. */
@media (max-width: 620px) {
  html,
  body.app-body {
    min-width: 0 !important;
    overflow-x: hidden !important;
    background:
      radial-gradient(circle at 50% -18%, rgba(95,182,255,.16), transparent 30%),
      linear-gradient(180deg, #050505 0%, #080808 44%, #020202 100%) !important;
    color: #f7f7f2 !important;
  }

  body.app-body {
    padding: 8px 8px calc(96px + env(safe-area-inset-bottom)) !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  body.app-body .app-main {
    width: min(100%, 430px) !important;
    margin: 0 auto !important;
    padding: 0 0 28px !important;
  }

  body.app-body > header.app-header {
    --header-h: 64px;
    position: sticky !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    z-index: 1000 !important;
    display: grid !important;
    grid-template-columns: 54px 1fr 108px !important;
    align-items: center !important;
    width: min(calc(100vw - 16px), 430px) !important;
    min-height: var(--header-h) !important;
    height: var(--header-h) !important;
    margin: 0 auto 30px !important;
    padding: 6px !important;
    border: 0 !important;
    border-radius: 28px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.035)),
      rgba(12,12,12,.88) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.16),
      0 16px 36px rgba(0,0,0,.48) !important;
    backdrop-filter: blur(18px) saturate(130%) !important;
    overflow: visible !important;
  }

  body.app-body > header.app-header::before,
  body.app-body > header.app-header::after {
    display: none !important;
    content: none !important;
  }

  body.app-body > header.app-header .hdr-burger,
  body.app-body > header.app-header button.hdr-burger {
    grid-column: 1 !important;
    position: static !important;
    display: grid !important;
    place-items: center !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: #f7f7f2 !important;
    background: rgba(255,255,255,.055) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;
    transform: none !important;
  }

  body.app-body > header.app-header .hdr-burger svg {
    width: 24px !important;
    height: 24px !important;
    fill: currentColor !important;
  }

  body.app-body > header.app-header .brand-stack {
    grid-column: 2 !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 126px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translate(-50%, -50%) !important;
    display: grid !important;
    place-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    text-decoration: none !important;
    overflow: visible !important;
    pointer-events: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.app-body > header.app-header .brand-stack:active,
  body.app-body > header.app-header .brand-stack:hover,
  body.app-body > header.app-header .brand-stack:focus {
    transform: translate(-50%, -50%) !important;
    filter: none !important;
  }

  body.app-body > header.app-header .brand-meme,
  body.app-body > header.app-header .brand-throne {
    display: block !important;
    width: 100% !important;
    line-height: .8 !important;
    font-family: "Bagel Fat One", "Montserrat", sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-shadow: 0 2px 0 rgba(0,0,0,.46) !important;
  }

  body.app-body > header.app-header .brand-meme {
    color: #5FB6FF !important;
    font-size: 22px !important;
  }

  body.app-body > header.app-header .brand-throne {
    color: #f7f7f2 !important;
    font-size: 25px !important;
  }

  body.app-body > header.app-header .hdr-tools {
    grid-column: 3 !important;
    position: static !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 108px !important;
    min-width: 108px !important;
    transform: none !important;
  }

  body.app-body > header.app-header .wallet-btn,
  body.app-body > header.app-header button.wallet-btn {
    display: grid !important;
    place-items: center !important;
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
    height: 50px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #f7f7f2 !important;
    color: #050505 !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: hidden !important;
  }

  body.app-body > header.app-header .wallet-label {
    display: block !important;
    max-width: 82px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-family: "Montserrat", "Lato", sans-serif !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  body.app-body > header.app-header .wallet-dot,
  body.app-body > header.app-header .bal-widget,
  body.app-body > header.app-header [data-balance-widget] {
    display: none !important;
  }

  body.app-body .nav-drawer {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1200 !important;
    display: block !important;
    pointer-events: none !important;
    opacity: 0 !important;
    background: rgba(0,0,0,.68) !important;
    backdrop-filter: blur(10px) !important;
    transition: opacity 180ms ease !important;
  }

  body.app-body .nav-drawer.is-open {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.app-body .nav-drawer-card {
    width: min(330px, calc(100vw - 28px)) !important;
    max-height: calc(100dvh - 28px) !important;
    margin: 14px 0 0 14px !important;
    padding: 12px !important;
    overflow: auto !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 28px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.035)),
      rgba(8,8,8,.94) !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.55) !important;
    transform: translateX(-16px) scale(.98) !important;
    transition: transform 260ms cubic-bezier(.16,1,.3,1) !important;
  }

  body.app-body .nav-drawer.is-open .nav-drawer-card {
    transform: translateX(0) scale(1) !important;
  }

  body.app-body .nav-drawer-close {
    width: 44px !important;
    height: 44px !important;
    margin-left: auto !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: #050505 !important;
    background: #f7f7f2 !important;
  }

  body.app-body .nav-drawer-item,
  body.app-body .nav-drawer-lang {
    min-height: 52px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.045) !important;
    color: #f7f7f2 !important;
    box-shadow: none !important;
  }

  body.app-body .nav-drawer-item svg,
  body.app-body .nav-drawer-lang svg {
    color: #f7f7f2 !important;
    fill: currentColor !important;
    background: transparent !important;
  }

  body.app-body .nav-drawer-item.is-active {
    color: #050505 !important;
    background: #f7f7f2 !important;
  }

  body.app-body .nav-drawer-item.is-active svg {
    color: #050505 !important;
  }

  body.app-body > nav.app-bnav.app-bnav {
    --nav-index: 0;
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    z-index: 1100 !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 0 !important;
    width: min(calc(100vw - 26px), 386px) !important;
    height: 68px !important;
    min-height: 68px !important;
    padding: 8px !important;
    margin: 0 !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02)),
      rgba(0,0,0,.86) !important;
    box-shadow: 0 20px 52px rgba(0,0,0,.58) !important;
    backdrop-filter: blur(18px) saturate(130%) !important;
    transform: translateX(-50%) !important;
    overflow: hidden !important;
  }

  body.app-body > nav.app-bnav[data-active-tab="home"] { --nav-index: 0 !important; }
  body.app-body > nav.app-bnav[data-active-tab="leagues"] { --nav-index: 1 !important; }
  body.app-body > nav.app-bnav[data-active-tab="shop"] { --nav-index: 2 !important; }
  body.app-body > nav.app-bnav[data-active-tab="rewards"] { --nav-index: 3 !important; }
  body.app-body > nav.app-bnav[data-active-tab="tasks"] { --nav-index: 4 !important; }
  body.app-body > nav.app-bnav[data-active-tab="roulette"] { --nav-index: 5 !important; }

  body.app-body > nav.app-bnav.app-bnav::before {
    content: "" !important;
    position: absolute !important;
    left: 8px !important;
    top: 8px !important;
    z-index: 0 !important;
    width: calc((100% - 16px) / 6) !important;
    height: calc(100% - 16px) !important;
    border-radius: 50% !important;
    background: #f7f7f2 !important;
    box-shadow: none !important;
    transform: translateX(calc(var(--nav-index) * 100%)) !important;
    transition: transform 420ms cubic-bezier(.16,1,.3,1) !important;
    pointer-events: none !important;
  }

  body.app-body > nav.app-bnav .bn-btn {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 52px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: rgba(247,247,242,.58) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  body.app-body > nav.app-bnav .bn-btn.is-active {
    color: #050505 !important;
  }

  body.app-body > nav.app-bnav .bn-icon,
  body.app-body > nav.app-bnav .bn-icon svg {
    width: 22px !important;
    height: 22px !important;
    color: currentColor !important;
    fill: currentColor !important;
    background: transparent !important;
  }

  body.app-body > nav.app-bnav .bn-l {
    display: none !important;
  }

  body.app-body button,
  body.app-body a,
  body.app-body input,
  body.app-body textarea {
    -webkit-tap-highlight-color: transparent !important;
  }

  body.app-body .shop-choice-tabs,
  body.app-body .tasks-tabs,
  body.app-body .forum-tabs,
  body.app-body .stake-periods,
  body.app-body [data-league-view-toggle],
  body.app-body [data-league-tier-slider],
  body.app-body .seg-control {
    position: relative !important;
    display: grid !important;
    gap: 4px !important;
    padding: 4px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.045) !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  body.app-body .shop-choice-tabs {
    grid-template-columns: repeat(3, 1fr) !important;
    margin: 0 0 18px !important;
  }

  body.app-body .tasks-tabs,
  body.app-body .forum-tabs,
  body.app-body .stake-periods,
  body.app-body [data-league-view-toggle],
  body.app-body [data-league-tier-slider],
  body.app-body .seg-control {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  body.app-body .shop-choice-tabs::before,
  body.app-body .shop-choice-tabs::after,
  body.app-body .tasks-tabs::before,
  body.app-body .tasks-tabs::after,
  body.app-body .forum-tabs::before,
  body.app-body .forum-tabs::after,
  body.app-body .stake-periods::before,
  body.app-body .stake-periods::after,
  body.app-body .seg-control::before,
  body.app-body .seg-control::after {
    display: none !important;
    content: none !important;
  }

  body.app-body .slider-indicator {
    position: absolute !important;
    inset: 4px auto 4px 4px !important;
    z-index: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #f7f7f2 !important;
    box-shadow: none !important;
    transition:
      transform 440ms cubic-bezier(.16,1,.3,1),
      width 220ms ease !important;
  }

  body.app-body .shop-choice-tabs button,
  body.app-body .tasks-tabs button,
  body.app-body .forum-tabs button,
  body.app-body .stake-periods button,
  body.app-body [data-league-view-toggle] button,
  body.app-body [data-league-tier-slider] button,
  body.app-body .seg-control button {
    position: relative !important;
    z-index: 1 !important;
    min-height: 50px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: rgba(247,247,242,.56) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-family: "Montserrat", "Lato", sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    transform: none !important;
  }

  body.app-body .shop-choice-tabs button.is-active,
  body.app-body .tasks-tabs button.is-active,
  body.app-body .forum-tabs button.is-active,
  body.app-body .stake-periods button.is-active,
  body.app-body [data-league-view-toggle] button.is-active,
  body.app-body [data-league-tier-slider] button.is-active,
  body.app-body .seg-control button.is-active {
    color: #050505 !important;
  }

  body.app-body .shop-choice-tabs button span {
    display: block !important;
    font-size: 25px !important;
    line-height: .86 !important;
  }

  body.app-body .shop-choice-tabs button small {
    display: block !important;
    margin-top: 5px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  body.app-body .home-action-row,
  body.app-body #active-vote-card .widget-cta,
  body.app-body .choice-tools,
  body.app-body .shop-hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body.app-body .home-action-row > *,
  body.app-body #active-vote-card .widget-vote-btn,
  body.app-body .choice-action,
  body.app-body .choice-tool,
  body.app-body .shop-primary,
  body.app-body .shop-secondary,
  body.app-body .task-btn,
  body.app-body .roulette-spin-btn,
  body.app-body .stake-start,
  body.app-body .stake-check,
  body.app-body .forum-publish button,
  body.app-body .ai-send,
  body.app-body .ai-attach {
    min-height: 52px !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #050505 !important;
    background: #f7f7f2 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    opacity: 1 !important;
    font-family: "Montserrat", "Lato", sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    transform: none !important;
  }

  body.app-body .home-action-row > *:active,
  body.app-body #active-vote-card .widget-vote-btn:not(:disabled):active,
  body.app-body .choice-action:active,
  body.app-body .choice-tool:active,
  body.app-body .shop-primary:active,
  body.app-body .shop-secondary:active,
  body.app-body .task-btn:active,
  body.app-body .roulette-spin-btn:active {
    transform: scale(.96) !important;
  }

  body.app-body .metric-strip,
  body.app-body .story-card,
  body.app-body .trust-rail span,
  body.app-body .command-row,
  body.app-body .league-ribbon,
  body.app-body .league-stage,
  body.app-body .league-tier-card,
  body.app-body .shop-choice-card,
  body.app-body .shop-pass-art,
  body.app-body .shop-status-grid,
  body.app-body .shop-pack-section,
  body.app-body .shop-card,
  body.app-body .refs-card,
  body.app-body .refs-stats,
  body.app-body .task-card,
  body.app-body .tasks-list,
  body.app-body .roulette-shell,
  body.app-body .ai-shell,
  body.app-body .forum-shell,
  body.app-body .staking-shell,
  body.app-body .profile-hero,
  body.app-body .profile-scoreboard,
  body.app-body .profile-cashbacks,
  body.app-body .rewards-shell {
    border: 1px solid rgba(255,255,255,.075) !important;
    border-radius: 28px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.022)),
      rgba(8,8,8,.58) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.38) !important;
    backdrop-filter: blur(14px) saturate(120%) !important;
  }

  body.app-body .home-action-row > *,
  body.app-body .command-row,
  body.app-body .story-card,
  body.app-body .trust-rail span {
    border: 0 !important;
    background: rgba(255,255,255,.04) !important;
    color: #f7f7f2 !important;
  }

  body.app-body .story-card {
    min-height: 72px !important;
    display: grid !important;
    grid-template-columns: 44px 1fr !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  body.app-body .story-card p {
    display: none !important;
  }

  body.app-body .story-card span,
  body.app-body .command-icon {
    width: 44px !important;
    height: 44px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(95,182,255,.16) !important;
    color: #f7f7f2 !important;
  }

  body.app-body .metric-strip {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    padding: 8px !important;
    border-radius: 26px !important;
  }

  body.app-body .metric-strip > * {
    min-width: 0 !important;
    padding: 12px 8px !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.035) !important;
    color: #f7f7f2 !important;
  }

  body.app-body .metric-strip span,
  body.app-body .metric-strip small {
    color: rgba(247,247,242,.54) !important;
    font-family: "Lato", sans-serif !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
  }

  body.app-body .metric-strip strong,
  body.app-body .metric-strip b {
    color: #f7f7f2 !important;
    font-family: "Montserrat", "Lato", sans-serif !important;
    font-size: 22px !important;
    font-weight: 900 !important;
  }

  body.app-body .home-portrait {
    margin-top: 8px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  body.app-body .home-portrait::before,
  body.app-body .home-portrait::after,
  body.app-body .hero-photo::before,
  body.app-body .hero-photo::after {
    display: none !important;
    content: none !important;
  }

  body.app-body .home-portrait .hero-photo,
  body.app-body .hero-photo {
    display: block !important;
    width: min(100%, 390px) !important;
    max-height: 300px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    background: transparent !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    box-shadow: none !important;
  }

  body.app-body .display-title,
  body.app-body .section-h,
  body.app-body .profile-name,
  body.app-body .lr-name {
    color: #f7f7f2 !important;
    font-family: "Montserrat", "Lato", sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: -.01em !important;
    text-shadow: none !important;
  }

  body.app-body .lead-copy,
  body.app-body .page-kicker,
  body.app-body .section-eyebrow,
  body.app-body .section-sub {
    color: rgba(247,247,242,.62) !important;
  }

  body.app-body .arena-section {
    margin-top: 28px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.app-body .arena-section::before,
  body.app-body .arena-section::after,
  body.app-body #active-vote-card::before,
  body.app-body #active-vote-card::after,
  body.app-body #active-vote-card .vote-widget::before,
  body.app-body #active-vote-card .vote-widget::after,
  body.app-body #active-vote-card .widget-vs::before,
  body.app-body #active-vote-card .widget-vs::after,
  body.app-body #active-vote-card .widget-team::before,
  body.app-body #active-vote-card .widget-team::after,
  body.app-body #active-vote-card .widget-team-orb::before,
  body.app-body #active-vote-card .widget-team-orb::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
  }

  body.app-body #active-vote-card {
    padding: 18px 14px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 30px !important;
    background: rgba(8,8,8,.56) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.44) !important;
    overflow: hidden !important;
  }

  body.app-body #active-vote-card .widget-vs {
    display: grid !important;
    grid-template-columns: 1fr 42px 1fr !important;
    gap: 10px !important;
    align-items: start !important;
    padding: 4px 0 12px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.app-body #active-vote-card .widget-team {
    min-width: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.app-body #active-vote-card .widget-team-orb {
    width: clamp(76px, 23vw, 94px) !important;
    height: clamp(76px, 23vw, 94px) !important;
    margin: 0 auto 10px !important;
    border: 0 !important;
    border-radius: 22px !important;
    background:
      linear-gradient(135deg, #5FB6FF 0%, #dcebf4 48%, #111 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22) !important;
    overflow: hidden !important;
  }

  body.app-body #active-vote-card .widget-team-lottie,
  body.app-body #active-vote-card .token-logo-img,
  body.app-body #active-vote-card .token-fallback-mark {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: none !important;
  }

  body.app-body #active-vote-card .token-fallback-mark {
    display: grid !important;
    place-items: center !important;
    border-radius: inherit !important;
    color: #050505 !important;
    font-family: "Montserrat", "Lato", sans-serif !important;
    font-size: 22px !important;
    font-weight: 900 !important;
  }

  body.app-body #active-vote-card .widget-vs-label {
    display: grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 38px !important;
    margin-top: 25px !important;
    border-radius: 50% !important;
    background: #f7f7f2 !important;
    color: #050505 !important;
    font-family: "Montserrat", "Lato", sans-serif !important;
    font-weight: 900 !important;
  }

  body.app-body #active-vote-card .widget-team-name {
    color: #f7f7f2 !important;
    font-family: "Montserrat", "Lato", sans-serif !important;
    font-size: 18px !important;
    font-weight: 900 !important;
  }

  body.app-body #active-vote-card .widget-team-votes {
    color: rgba(247,247,242,.55) !important;
    font-family: "Lato", sans-serif !important;
    font-size: 11px !important;
  }

  body.app-body #active-vote-card .widget-progress {
    height: 12px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.08) !important;
    overflow: hidden !important;
  }

  body.app-body #active-vote-card .widget-progress-a {
    height: 100% !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, #5FB6FF 0%, #f7f7f2 56%, #a6ff57 100%) !important;
    transition: width 560ms cubic-bezier(.16,1,.3,1) !important;
  }

  body.app-body #active-vote-card .match-insight {
    border: 0 !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.04) !important;
    color: #f7f7f2 !important;
  }

  body.app-body #active-vote-card .widget-vote-btn:disabled {
    opacity: .42 !important;
    color: #050505 !important;
    background: rgba(247,247,242,.72) !important;
  }

  body.app-body .home-league-dock {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    margin: 18px 0 34px !important;
  }

  body.app-body .dock-chip {
    min-height: 74px !important;
    border: 0 !important;
    border-radius: 22px !important;
    background:
      linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.025)),
      rgba(8,8,8,.58) !important;
    color: #f7f7f2 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body.app-body .shop-choice-card {
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  body.app-body .shop-choice-card.shop-slide-out.shop-slide-next {
    animation: shopCardOutNext 170ms ease-in both !important;
  }

  body.app-body .shop-choice-card.shop-slide-out.shop-slide-prev {
    animation: shopCardOutPrev 170ms ease-in both !important;
  }

  body.app-body .shop-choice-card.shop-slide-in.shop-slide-next {
    animation: shopCardInNext 440ms cubic-bezier(.16,1,.3,1) both !important;
  }

  body.app-body .shop-choice-card.shop-slide-in.shop-slide-prev {
    animation: shopCardInPrev 440ms cubic-bezier(.16,1,.3,1) both !important;
  }

  @keyframes shopCardOutNext {
    to { opacity: 0; transform: translateX(-22px); }
  }

  @keyframes shopCardOutPrev {
    to { opacity: 0; transform: translateX(22px); }
  }

  @keyframes shopCardInNext {
    from { opacity: 0; transform: translateX(42px); }
    to { opacity: 1; transform: translateX(0); }
  }

  @keyframes shopCardInPrev {
    from { opacity: 0; transform: translateX(-42px); }
    to { opacity: 1; transform: translateX(0); }
  }

  body.app-body .choice-art {
    height: clamp(250px, 69vw, 315px) !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 28px !important;
    background: #050505 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  body.app-body .choice-art::before,
  body.app-body .choice-art::after {
    display: none !important;
    content: none !important;
  }

  body.app-body .choice-art img {
    display: block !important;
    width: 124% !important;
    max-width: none !important;
    height: 124% !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: -8% 0 0 -12% !important;
    transform: none !important;
    filter: none !important;
  }

  body.app-body .choice-art .pack-count {
    right: 8px !important;
    top: 8px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #f7f7f2 !important;
    color: #050505 !important;
  }

  body.app-body .nft-pip-row span {
    background: #5FB6FF !important;
    box-shadow: none !important;
  }

  body.app-body .choice-copy {
    padding: 22px 18px 8px !important;
  }

  body.app-body .choice-copy h2 {
    color: #f7f7f2 !important;
    font-family: "Montserrat", "Lato", sans-serif !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
  }

  body.app-body .choice-copy p,
  body.app-body .choice-badge,
  body.app-body .choice-pill,
  body.app-body .sc-desc {
    display: none !important;
  }

  body.app-body .choice-buy {
    display: grid !important;
    grid-template-columns: 1fr 130px !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 6px 18px 20px !important;
    background: transparent !important;
  }

  body.app-body .choice-buy strong {
    color: #f7f7f2 !important;
    font-family: "Montserrat", "Lato", sans-serif !important;
    font-size: 30px !important;
    font-weight: 900 !important;
  }

  body.app-body .choice-buy small {
    color: rgba(247,247,242,.52) !important;
    font-size: 11px !important;
  }

  body.app-body .choice-tools {
    padding: 0 0 10px !important;
    background: transparent !important;
  }

  body.app-body .page-hero.shop-hero,
  body.app-body .shop-pack-section,
  body.app-body .shop-status-grid,
  body.app-body .shop-included,
  body.app-body .shop-pass-art {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  body.app-body .shop-pass-art {
    display: none !important;
  }

  body.app-body .shop-primary,
  body.app-body .shop-secondary {
    color: #050505 !important;
  }

  body.app-body .roulette-stage {
    min-height: 166px !important;
    border-radius: 28px !important;
    background: rgba(255,255,255,.035) !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    overflow: hidden !important;
  }

  body.app-body .r-item {
    width: 148px !important;
    min-width: 148px !important;
    height: 148px !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    background: rgba(255,255,255,.045) !important;
  }

  body.app-body .r-lottie {
    width: 198px !important;
    height: 198px !important;
    font-size: 132px !important;
    transform: translateY(62px) scale(1.45) rotate(-8deg) !important;
    filter: grayscale(1) contrast(1.2) brightness(1.16) !important;
  }

  body.app-body .roulette-modal-card [data-roulette-modal-lottie],
  body.app-body .roulette-modal-card .roulette-modal-lottie {
    filter: none !important;
  }

  body.app-body .reward-art-corner,
  body.app-body .reward-deco,
  body.app-body .reward-node .reward-art-corner,
  body.app-body .reward-node .reward-deco,
  body.app-body .reward-lanes::before,
  body.app-body .reward-lanes::after {
    display: none !important;
    content: none !important;
  }

  body.app-body .rewards-shell {
    padding: 14px 0 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  body.app-body .rewards-head {
    margin: 0 0 18px !important;
    padding: 22px !important;
    border-radius: 30px !important;
    background:
      linear-gradient(135deg, rgba(95,182,255,.95) 0%, rgba(95,182,255,.66) 45%, #f7f7f2 45%, #e7e7e1 100%) !important;
    color: #050505 !important;
    box-shadow: inset 0 -8px 0 rgba(0,0,0,.12), 0 20px 42px rgba(0,0,0,.42) !important;
  }

  body.app-body .rewards-head h1,
  body.app-body .rewards-head .display-title,
  body.app-body .rewards-head p,
  body.app-body .rewards-head span {
    color: #050505 !important;
    text-shadow: none !important;
  }

  body.app-body .reward-step {
    background: transparent !important;
  }

  body.app-body .reward-node {
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.065) !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.045) !important;
    box-shadow: none !important;
  }

  body.app-body .reward-step:not(.is-reached) .reward-node {
    opacity: .46 !important;
  }

  body.app-body .reward-index {
    z-index: 2 !important;
    background: #f7f7f2 !important;
    color: #050505 !important;
    box-shadow: none !important;
  }

  body.app-body .reward-node .reward-art,
  body.app-body .reward-node [aria-hidden="true"] {
    position: absolute !important;
    right: -16px !important;
    bottom: -26px !important;
    z-index: 0 !important;
    color: #5FB6FF !important;
    font-size: 74px !important;
    line-height: 1 !important;
    opacity: .48 !important;
    filter: grayscale(1) sepia(1) saturate(2.1) hue-rotate(166deg) brightness(1.16) !important;
    transform: rotate(-10deg) !important;
  }

  body.app-body .reward-node > *:not(.reward-art) {
    position: relative !important;
    z-index: 1 !important;
  }

  body.app-body .profile-shell {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.app-body .profile-hero,
  body.app-body .profile-scoreboard,
  body.app-body .profile-cashbacks {
    background: rgba(8,8,8,.58) !important;
  }

  body.app-body .profile-scoreboard {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  body.app-body .profile-scoreboard article {
    background: rgba(255,255,255,.035) !important;
    border: 0 !important;
    border-radius: 20px !important;
  }

  body.app-body .profile-lvl {
    background: #5FB6FF !important;
    color: #050505 !important;
  }

  body.app-body .profile-cashbacks {
    padding: 22px !important;
  }

  body.app-body .profile-cashbacks h2,
  body.app-body .profile-cashbacks .profile-cashbacks-h {
    margin: 0 0 18px !important;
    padding-left: 2px !important;
  }

  body.app-body .refs-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 8px !important;
  }

  body.app-body .refs-stats article {
    min-height: 74px !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.04) !important;
  }

  body.app-body .forum-feed {
    display: grid !important;
    gap: 10px !important;
  }

  body.app-body .forum-post {
    display: grid !important;
    grid-template-columns: 52px 1fr !important;
    gap: 12px !important;
    padding: 14px !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.035) !important;
  }

  body.app-body .forum-token {
    width: 52px !important;
    height: 52px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #f7f7f2 !important;
    color: #050505 !important;
  }

  body.app-body .forum-like {
    min-height: 38px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #050505 !important;
    background: #f7f7f2 !important;
  }

  body.app-body .ai-form {
    grid-template-columns: 48px 1fr 48px !important;
    align-items: center !important;
  }

  body.app-body .ai-input,
  body.app-body .stake-input,
  body.app-body .forum-publish input,
  body.app-body .forum-publish textarea {
    min-height: 50px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.045) !important;
    color: #f7f7f2 !important;
  }

  body.app-body .ai-preview {
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.045) !important;
  }
}

@media (max-width: 380px) {
  body.app-body > header.app-header {
    grid-template-columns: 50px 1fr 100px !important;
  }

  body.app-body > header.app-header .wallet-btn,
  body.app-body > header.app-header button.wallet-btn {
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
  }

  body.app-body > header.app-header .brand-stack {
    width: 114px !important;
  }

  body.app-body > header.app-header .brand-meme {
    font-size: 20px !important;
  }

  body.app-body > header.app-header .brand-throne {
    font-size: 22px !important;
  }

  body.app-body .choice-buy {
    grid-template-columns: 1fr 118px !important;
  }
}

/* v213 hard mobile shell override.
   Older emergency layers use more specific selectors with !important. Keep this
   short and surgical so the phone chrome cannot drift again. */
@media (max-width: 620px) {
  html body.app-body > header.app-header.app-header {
    position: sticky !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    left: auto !important;
    right: auto !important;
    z-index: 1000 !important;
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) 108px !important;
    align-items: center !important;
    width: min(calc(100vw - 16px), 430px) !important;
    min-width: 0 !important;
    max-width: 430px !important;
    height: 64px !important;
    min-height: 64px !important;
    margin: 0 auto 30px !important;
    padding: 6px !important;
    border: 0 !important;
    border-radius: 28px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.035)),
      rgba(10,10,10,.9) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 16px 34px rgba(0,0,0,.48) !important;
    transform: none !important;
    overflow: visible !important;
  }

  html body.app-body > header.app-header.app-header .brand-stack {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 126px !important;
    height: 46px !important;
    pointer-events: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.app-body > header.app-header.app-header .hdr-burger {
    position: static !important;
    grid-column: 1 !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
  }

  html body.app-body > header.app-header.app-header .hdr-tools {
    position: static !important;
    grid-column: 3 !important;
    justify-self: end !important;
    width: 108px !important;
    transform: none !important;
  }

  html body.app-body > header.app-header.app-header .wallet-btn {
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
    height: 50px !important;
    color: #050505 !important;
    background: #f7f7f2 !important;
    box-shadow: none !important;
  }

  html body.app-body > header.app-header.app-header .bal-widget {
    display: none !important;
  }

  html body.app-body > nav.app-bnav.app-bnav.app-bnav {
    --nav-index: 0;
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    z-index: 1100 !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 0 !important;
    width: min(calc(100vw - 24px), 386px) !important;
    min-width: 0 !important;
    max-width: 386px !important;
    height: 68px !important;
    min-height: 68px !important;
    padding: 8px !important;
    margin: 0 !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02)),
      rgba(0,0,0,.88) !important;
    box-shadow: 0 20px 52px rgba(0,0,0,.58) !important;
    transform: translateX(-50%) !important;
    overflow: hidden !important;
  }

  html body.app-body > nav.app-bnav.app-bnav.app-bnav::before {
    content: "" !important;
    position: absolute !important;
    left: 8px !important;
    top: 8px !important;
    z-index: 0 !important;
    width: calc((100% - 16px) / 6) !important;
    height: calc(100% - 16px) !important;
    border-radius: 50% !important;
    background: #f7f7f2 !important;
    box-shadow: none !important;
    transform: translate3d(calc(var(--nav-index) * 100%), 0, 0) !important;
    transition: transform 420ms cubic-bezier(.16,1,.3,1) !important;
  }

  html body.app-body > nav.app-bnav[data-active-tab="home"] { --nav-index: 0 !important; }
  html body.app-body > nav.app-bnav[data-active-tab="leagues"] { --nav-index: 1 !important; }
  html body.app-body > nav.app-bnav[data-active-tab="shop"] { --nav-index: 2 !important; }
  html body.app-body > nav.app-bnav[data-active-tab="rewards"] { --nav-index: 3 !important; }
  html body.app-body > nav.app-bnav[data-active-tab="tasks"] { --nav-index: 4 !important; }
  html body.app-body > nav.app-bnav[data-active-tab="roulette"] { --nav-index: 5 !important; }

  html body.app-body > nav.app-bnav.app-bnav.app-bnav .bn-btn {
    width: 100% !important;
    height: 52px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(247,247,242,.58) !important;
  }

  html body.app-body > nav.app-bnav.app-bnav.app-bnav .bn-btn.is-active {
    color: #050505 !important;
  }
}

@media (max-width: 380px) {
  html body.app-body > header.app-header.app-header {
    grid-template-columns: 50px minmax(0, 1fr) 100px !important;
  }

  html body.app-body > header.app-header.app-header .wallet-btn {
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
  }
}

/* v214 mobile repair layer.
   Vision: phone-native black glass. This layer intentionally overrides the
   accumulated experimental styles above without touching desktop/tablet. */
@media (max-width: 620px) {
  :root {
    --mt-bg: #050505;
    --mt-panel: rgba(255,255,255,.045);
    --mt-panel-strong: rgba(255,255,255,.085);
    --mt-line: rgba(255,255,255,.09);
    --mt-text: #f8f8f4;
    --mt-muted: rgba(248,248,244,.58);
    --mt-blue: #5FB6FF;
    --mt-radius: 24px;
  }

  html,
  body.app-body {
    background: var(--mt-bg) !important;
    color: var(--mt-text) !important;
    overflow-x: hidden !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  body.app-body .app-main {
    width: min(100vw, 430px) !important;
    margin: 0 auto !important;
    padding: 0 8px 112px !important;
  }

  html body.app-body > header.app-header.app-header {
    position: sticky !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    display: block !important;
    width: min(calc(100vw - 16px), 430px) !important;
    height: 62px !important;
    margin: 0 auto 36px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 30px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.035)),
      rgba(0,0,0,.88) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      inset 0 -1px 0 rgba(255,255,255,.05),
      0 18px 42px rgba(0,0,0,.58) !important;
    backdrop-filter: blur(16px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
    overflow: visible !important;
  }

  html body.app-body > header.app-header.app-header .hdr-burger {
    position: absolute !important;
    left: 7px !important;
    top: 50% !important;
    display: grid !important;
    place-items: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: #050505 !important;
    background: #f8f8f4 !important;
    box-shadow: none !important;
    transform: translateY(-50%) !important;
  }

  html body.app-body > header.app-header.app-header .hdr-burger svg {
    width: 21px !important;
    height: 21px !important;
    fill: currentColor !important;
  }

  html body.app-body > header.app-header.app-header .brand-stack,
  html body.app-body > header.app-header.app-header .brand-stack:hover,
  html body.app-body > header.app-header.app-header .brand-stack:active,
  html body.app-body > header.app-header.app-header .brand-stack:focus {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    z-index: 2 !important;
    display: grid !important;
    place-items: center !important;
    width: 132px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
    transform: translate(-50%, -50%) !important;
  }

  html body.app-body > header.app-header.app-header .brand-meme,
  html body.app-body > header.app-header.app-header .brand-throne {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
    font-family: "Arial Rounded MT Bold", "Montserrat", sans-serif !important;
    font-style: normal !important;
    font-weight: 900 !important;
    line-height: .82 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 2px 0 rgba(0,0,0,.35) !important;
  }

  html body.app-body > header.app-header.app-header .brand-meme {
    color: #2e95ff !important;
    font-size: 23px !important;
  }

  html body.app-body > header.app-header.app-header .brand-throne {
    color: #f8f8f4 !important;
    font-size: 26px !important;
  }

  html body.app-body > header.app-header.app-header .hdr-tools {
    position: absolute !important;
    right: 7px !important;
    top: 50% !important;
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
  }

  html body.app-body > header.app-header.app-header .wallet-btn,
  html body.app-body > header.app-header.app-header button.wallet-btn {
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #050505 !important;
    background: #f8f8f4 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html body.app-body > header.app-header.app-header .wallet-dot,
  html body.app-body > header.app-header.app-header .bal-widget {
    display: none !important;
  }

  html body.app-body > header.app-header.app-header .wallet-label {
    display: block !important;
    max-width: 82px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font: 900 12px/1 "Montserrat", "Lato", sans-serif !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  body.app-body .nav-drawer {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1500 !important;
    display: block !important;
    pointer-events: none !important;
    background: rgba(0,0,0,0) !important;
    transition: background 220ms ease !important;
  }

  body.app-body .nav-drawer.is-open {
    pointer-events: auto !important;
    background: rgba(0,0,0,.52) !important;
  }

  body.app-body .nav-drawer-card {
    position: absolute !important;
    left: 10px !important;
    top: max(12px, env(safe-area-inset-top)) !important;
    width: min(318px, calc(100vw - 20px)) !important;
    max-height: calc(100dvh - 24px) !important;
    padding: 16px !important;
    border: 0 !important;
    border-radius: 30px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.035)),
      rgba(8,8,8,.94) !important;
    box-shadow: 0 30px 80px rgba(0,0,0,.66) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
    overflow-y: auto !important;
    transform: translateX(-110%) !important;
    transition: transform 320ms cubic-bezier(.16,1,.3,1) !important;
  }

  body.app-body .nav-drawer.is-open .nav-drawer-card {
    transform: translateX(0) !important;
  }

  body.app-body .nav-drawer-item,
  body.app-body .nav-drawer-lang {
    min-height: 54px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.045) !important;
    color: var(--mt-text) !important;
    box-shadow: none !important;
  }

  body.app-body .nav-drawer-item.is-active {
    background: #f8f8f4 !important;
    color: #050505 !important;
  }

  html body.app-body > nav.app-bnav.app-bnav.app-bnav {
    --nav-index: 0;
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    z-index: 1200 !important;
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    width: min(calc(100vw - 24px), 386px) !important;
    height: 68px !important;
    padding: 8px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
      rgba(0,0,0,.9) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 20px 54px rgba(0,0,0,.62) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    transform: translateX(-50%) !important;
    overflow: hidden !important;
  }

  html body.app-body > nav.app-bnav.app-bnav.app-bnav::before {
    content: "" !important;
    position: absolute !important;
    left: 8px !important;
    top: 8px !important;
    z-index: 0 !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: #f8f8f4 !important;
    box-shadow: none !important;
    transform: translate3d(calc(var(--nav-index) * ((100% - 16px) / 6)), 0, 0) !important;
    transition: transform 430ms cubic-bezier(.16,1,.3,1) !important;
  }

  html body.app-body > nav.app-bnav[data-active-tab="home"] { --nav-index: 0 !important; }
  html body.app-body > nav.app-bnav[data-active-tab="leagues"] { --nav-index: 1 !important; }
  html body.app-body > nav.app-bnav[data-active-tab="shop"] { --nav-index: 2 !important; }
  html body.app-body > nav.app-bnav[data-active-tab="rewards"] { --nav-index: 3 !important; }
  html body.app-body > nav.app-bnav[data-active-tab="tasks"] { --nav-index: 4 !important; }
  html body.app-body > nav.app-bnav[data-active-tab="roulette"] { --nav-index: 5 !important; }

  html body.app-body > nav.app-bnav.app-bnav.app-bnav .bn-btn {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 52px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(248,248,244,.55) !important;
    transform: none !important;
  }

  html body.app-body > nav.app-bnav.app-bnav.app-bnav .bn-btn.is-active {
    color: #050505 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.app-body > nav.app-bnav.app-bnav.app-bnav .bn-btn svg {
    width: 19px !important;
    height: 19px !important;
  }

  body.app-body .home-hero,
  body.app-body .page-hero {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.app-body .home-portrait,
  body.app-body .home-portrait::before,
  body.app-body .home-portrait::after {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
  }

  body.app-body .metric-strip,
  body.app-body .home-editorial .metric-strip {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.app-body .metric-strip > div {
    min-height: 76px !important;
    padding: 14px !important;
    border: 0 !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.055) !important;
    box-shadow: none !important;
  }

  body.app-body .metric-strip span {
    color: rgba(248,248,244,.56) !important;
    font: 800 9px/1.15 "Montserrat", sans-serif !important;
    letter-spacing: .03em !important;
  }

  body.app-body .metric-strip strong {
    color: #f8f8f4 !important;
    font: 900 25px/1 "Montserrat", sans-serif !important;
  }

  body.app-body .arena-section {
    margin-top: 28px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.app-body #active-vote-card,
  body.app-body #active-vote-card .vote-widget {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.app-body #active-vote-card {
    padding: 16px 0 0 !important;
    overflow: visible !important;
  }

  body.app-body #active-vote-card::before,
  body.app-body #active-vote-card::after,
  body.app-body #active-vote-card .vote-widget::before,
  body.app-body #active-vote-card .vote-widget::after,
  body.app-body #active-vote-card .widget-vs::before,
  body.app-body #active-vote-card .widget-vs::after,
  body.app-body #active-vote-card .widget-team::before,
  body.app-body #active-vote-card .widget-team::after,
  body.app-body #active-vote-card .widget-team-orb::before,
  body.app-body #active-vote-card .widget-team-orb::after,
  body.app-body #active-vote-card .widget-team-lottie::before,
  body.app-body #active-vote-card .widget-team-lottie::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
  }

  body.app-body #active-vote-card .widget-vs {
    display: grid !important;
    grid-template-columns: 1fr 46px 1fr !important;
    align-items: start !important;
    gap: 10px !important;
    padding: 18px 8px !important;
    border-radius: 26px !important;
    background: rgba(255,255,255,.045) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
  }

  body.app-body #active-vote-card .widget-team {
    min-width: 0 !important;
    display: grid !important;
    justify-items: center !important;
    gap: 8px !important;
  }

  body.app-body #active-vote-card .widget-team-orb {
    display: grid !important;
    place-items: center !important;
    width: 78px !important;
    height: 78px !important;
    border: 0 !important;
    border-radius: 24px !important;
    background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(95,182,255,.7) 52%, rgba(255,255,255,.52)) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    filter: none !important;
  }

  body.app-body #active-vote-card .widget-team-lottie,
  body.app-body #active-vote-card .token-logo-img,
  body.app-body #active-vote-card .token-fallback-mark {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
    overflow: hidden !important;
  }

  body.app-body #active-vote-card .token-logo-img {
    object-fit: cover !important;
    transform: scale(1.12) !important;
  }

  body.app-body #active-vote-card .token-fallback-mark {
    color: #050505 !important;
    background: transparent !important;
    font: 950 22px/1 "Montserrat", sans-serif !important;
    letter-spacing: -.03em !important;
  }

  body.app-body #active-vote-card .widget-vs-label {
    align-self: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: #f8f8f4 !important;
    color: #050505 !important;
    font: 900 13px/1 "Montserrat", sans-serif !important;
    box-shadow: none !important;
  }

  body.app-body #active-vote-card .widget-team-name {
    color: #f8f8f4 !important;
    font: 950 17px/1 "Montserrat", sans-serif !important;
    letter-spacing: -.02em !important;
    text-transform: uppercase !important;
  }

  body.app-body #active-vote-card .widget-team-votes {
    color: rgba(248,248,244,.56) !important;
    font: 800 11px/1 "Lato", sans-serif !important;
  }

  body.app-body #active-vote-card .widget-progress {
    height: 12px !important;
    margin: 14px 8px 8px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.09) !important;
    overflow: hidden !important;
  }

  body.app-body #active-vote-card .widget-progress-a {
    height: 100% !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, var(--mt-blue), #f8f8f4) !important;
    transition: width 520ms cubic-bezier(.16,1,.3,1) !important;
  }

  body.app-body #active-vote-card .widget-foot,
  body.app-body #active-vote-card .match-insight {
    color: rgba(248,248,244,.56) !important;
    padding-inline: 8px !important;
  }

  body.app-body #active-vote-card .match-insight {
    margin-top: 10px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.045) !important;
    color: #f8f8f4 !important;
  }

  body.app-body #active-vote-card .widget-cta {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 12px !important;
    padding: 0 8px !important;
  }

  body.app-body #active-vote-card .widget-vote-btn,
  body.app-body #active-vote-card [data-vs-vote] {
    min-height: 56px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #f8f8f4 !important;
    color: #050505 !important;
    box-shadow: none !important;
    font: 900 12px/1 "Montserrat", sans-serif !important;
    transform: none !important;
  }

  body.app-body #active-vote-card .widget-vote-btn:not(:disabled):active {
    transform: scale(.96) !important;
  }

  body.app-body #active-vote-card .widget-vote-btn:disabled {
    opacity: .72 !important;
  }

  body.app-body .seg-control {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 14px 0 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.app-body .seg-control button {
    min-height: 46px !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #f8f8f4 !important;
    background: rgba(255,255,255,.07) !important;
    box-shadow: none !important;
  }

  body.app-body .story-grid,
  body.app-body .command-board,
  body.app-body .trust-rail {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.app-body .story-card,
  body.app-body .command-row,
  body.app-body .trust-rail span {
    border: 0 !important;
    background: rgba(255,255,255,.045) !important;
    box-shadow: none !important;
  }

  body.app-body .story-card {
    display: grid !important;
    grid-template-columns: 54px 1fr !important;
    align-items: center !important;
    min-height: 72px !important;
    padding: 10px 14px !important;
  }

  body.app-body .story-card .story-icon,
  body.app-body .command-icon {
    background: transparent !important;
    color: #f8f8f4 !important;
    box-shadow: none !important;
  }

  body.app-body .home-league-dock {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin: 18px 0 30px !important;
  }

  body.app-body .dock-chip {
    min-height: 64px !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.07) !important;
    color: #f8f8f4 !important;
    box-shadow: none !important;
  }

  body.app-body .dock-chip.dock-bronze,
  body.app-body .dock-chip.dock-silver,
  body.app-body .dock-chip.dock-gold {
    background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.035)) !important;
  }

  body.app-body .tab-shop .shop-hero,
  body.app-body .tab-shop .shop-status-grid,
  body.app-body .tab-shop .shop-included {
    display: none !important;
  }

  body.app-body .tab-shop .shop-choice {
    display: grid !important;
    gap: 18px !important;
    padding: 0 0 112px !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.app-body .tab-shop .shop-choice::before,
  body.app-body .tab-shop .shop-choice::after,
  body.app-body .tab-shop .shop-choice-card::before,
  body.app-body .tab-shop .shop-choice-card::after {
    display: none !important;
    content: none !important;
  }

  body.app-body .shop-choice-tabs,
  body.app-body [data-shop-choice-tabs] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    min-height: 58px !important;
    padding: 5px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.055) !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  body.app-body .shop-choice-tabs::before,
  body.app-body .shop-choice-tabs::after,
  body.app-body [data-shop-choice-tabs]::before,
  body.app-body [data-shop-choice-tabs]::after {
    display: none !important;
    content: none !important;
  }

  body.app-body .shop-choice-tabs button {
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: rgba(248,248,244,.55) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  body.app-body .shop-choice-tabs button.is-active {
    background: #f8f8f4 !important;
    color: #050505 !important;
  }

  body.app-body .shop-choice-tabs button span {
    font: 950 22px/1 "Montserrat", sans-serif !important;
  }

  body.app-body .shop-choice-tabs button small {
    font: 900 11px/1 "Lato", sans-serif !important;
  }

  body.app-body .shop-choice-card,
  body.app-body .shop-choice-card[data-shop-featured] {
    min-height: auto !important;
    padding: 0 18px 22px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  body.app-body .choice-art {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    height: 248px !important;
    margin: 0 -2px 20px !important;
    border: 0 !important;
    border-radius: 30px !important;
    background: #030303 !important;
    overflow: hidden !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
  }

  body.app-body .choice-art img {
    width: 102% !important;
    max-width: 340px !important;
    height: auto !important;
    object-fit: contain !important;
    transform: scale(1.22) !important;
    filter: none !important;
  }

  body.app-body .choice-art .pack-count {
    position: absolute !important;
    right: 10px !important;
    top: 10px !important;
    min-height: 30px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: #f8f8f4 !important;
    color: #050505 !important;
    font: 900 11px/30px "Montserrat", sans-serif !important;
  }

  body.app-body .nft-pip-row {
    position: absolute !important;
    left: 50% !important;
    bottom: 10px !important;
    transform: translateX(-50%) !important;
  }

  body.app-body .choice-copy {
    margin: 0 0 16px !important;
  }

  body.app-body .choice-copy h2 {
    margin: 0 !important;
    color: #f8f8f4 !important;
    font: 950 29px/.95 "Montserrat", sans-serif !important;
    letter-spacing: -.035em !important;
    text-transform: uppercase !important;
  }

  body.app-body .choice-copy p {
    display: none !important;
  }

  body.app-body .choice-buy {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 128px !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 58px !important;
    margin: 0 !important;
  }

  body.app-body .choice-buy strong {
    color: #f8f8f4 !important;
    font: 950 31px/1 "Montserrat", sans-serif !important;
  }

  body.app-body .choice-buy small {
    color: rgba(248,248,244,.55) !important;
    font-size: 11px !important;
  }

  body.app-body .choice-action,
  body.app-body .choice-action:visited {
    display: grid !important;
    place-items: center !important;
    width: 128px !important;
    min-width: 128px !important;
    min-height: 56px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: #f8f8f4 !important;
    color: #050505 !important;
    box-shadow: none !important;
    font: 950 13px/1 "Montserrat", sans-serif !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  body.app-body .choice-tools {
    display: grid !important;
    gap: 10px !important;
    margin: 22px 0 0 !important;
  }

  body.app-body .choice-tool,
  body.app-body .shop-primary,
  body.app-body .shop-secondary {
    display: grid !important;
    place-items: center !important;
    min-height: 50px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #f8f8f4 !important;
    color: #050505 !important;
    box-shadow: none !important;
    font: 900 12px/1 "Montserrat", sans-serif !important;
    text-decoration: none !important;
  }

  body.app-body .choice-tool + .choice-tool,
  body.app-body .shop-secondary {
    background: rgba(255,255,255,.075) !important;
    color: #f8f8f4 !important;
  }

  body.app-body .roulette-stage {
    border: 0 !important;
    border-radius: 28px !important;
    background: rgba(255,255,255,.045) !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  body.app-body .r-item {
    width: 132px !important;
    height: 132px !important;
    border: 0 !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.045) !important;
    overflow: hidden !important;
  }

  body.app-body .r-lottie {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  body.app-body .tasks-tabs,
  body.app-body .forum-tabs,
  body.app-body .league-view-toggle,
  body.app-body .league-tier-slider {
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.055) !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  body.app-body .tasks-tabs button,
  body.app-body .forum-tabs button,
  body.app-body [data-league-view],
  body.app-body [data-league-tier] {
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: rgba(248,248,244,.58) !important;
    box-shadow: none !important;
  }

  body.app-body .tasks-tabs button.is-active,
  body.app-body .forum-tabs button.is-active,
  body.app-body [data-league-view].is-active,
  body.app-body [data-league-tier].is-active {
    background: #f8f8f4 !important;
    color: #050505 !important;
  }

  body.app-body .profile-shell,
  body.app-body .profile-hero,
  body.app-body .profile-scoreboard,
  body.app-body .profile-cashbacks,
  body.app-body .tasks-hero,
  body.app-body .tasks-list,
  body.app-body .ai-shell,
  body.app-body .forum-shell,
  body.app-body .staking-shell {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.app-body .profile-hero,
  body.app-body .profile-scoreboard > div,
  body.app-body .profile-cashbacks,
  body.app-body .task-card,
  body.app-body .ai-msg,
  body.app-body .forum-post,
  body.app-body .staking-card,
  body.app-body .refs-card,
  body.app-body .refs-stats article {
    border: 0 !important;
    border-radius: var(--mt-radius) !important;
    background: rgba(255,255,255,.045) !important;
    box-shadow: none !important;
  }
}

/* v215: stabilize phone shop layout + bottom indicator math. */
@media (max-width: 620px) {
  html body.app-body > nav.app-bnav.app-bnav.app-bnav {
    --nav-x: 0px;
  }

  html body.app-body > nav.app-bnav[data-active-tab="home"] { --nav-x: 0px !important; }
  html body.app-body > nav.app-bnav[data-active-tab="leagues"] { --nav-x: calc(100% + 7px) !important; }
  html body.app-body > nav.app-bnav[data-active-tab="shop"] { --nav-x: calc(200% + 14px) !important; }
  html body.app-body > nav.app-bnav[data-active-tab="rewards"] { --nav-x: calc(300% + 21px) !important; }
  html body.app-body > nav.app-bnav[data-active-tab="tasks"] { --nav-x: calc(400% + 28px) !important; }
  html body.app-body > nav.app-bnav[data-active-tab="roulette"] { --nav-x: calc(500% + 35px) !important; }

  html body.app-body > nav.app-bnav.app-bnav.app-bnav::before {
    transform: translate3d(var(--nav-x), 0, 0) !important;
  }

  body.app-body .tab-shop {
    overflow: hidden !important;
  }

  body.app-body .tab-shop .shop-choice {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  body.app-body .shop-choice-tabs,
  body.app-body [data-shop-choice-tabs] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 18px !important;
  }

  body.app-body .shop-choice-card,
  body.app-body .shop-choice-card[data-shop-featured] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 16px 22px !important;
    overflow: hidden !important;
  }

  body.app-body .choice-art {
    width: 100% !important;
    max-width: 100% !important;
    height: 244px !important;
  }

  body.app-body .choice-copy,
  body.app-body .choice-buy,
  body.app-body .choice-tools {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.app-body .choice-copy h2 {
    max-width: 230px !important;
  }

  body.app-body .choice-buy {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 120px !important;
    padding: 0 !important;
  }

  body.app-body .choice-action,
  body.app-body .choice-action:visited {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    color: #050505 !important;
  }

  body.app-body .choice-tool,
  body.app-body .choice-tool:visited {
    color: #050505 !important;
  }
}

/* v216: phone shop overlap fix after hash-routing repair. */
@media (max-width: 620px) {
  body.app-body .tab-shop .shop-choice-tabs,
  body.app-body .tab-shop [data-shop-choice-tabs] {
    position: relative !important;
    z-index: 4 !important;
    margin-bottom: 26px !important;
  }

  body.app-body .tab-shop .shop-choice-card,
  body.app-body .tab-shop .shop-choice-card[data-shop-featured] {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 0 !important;
  }
}

/* v218: final phone-first Meme Throne design system.
   Palette is intentionally limited to project black/white/gray/#5FB6FF. */
@media (max-width: 620px) {
  :root {
    --mt-black: #050505;
    --mt-black-2: #0b0b0c;
    --mt-ink: #f7f7f2;
    --mt-ink-soft: rgba(247,247,242,.72);
    --mt-ink-mute: rgba(247,247,242,.46);
    --mt-gray: #8d939b;
    --mt-gray-2: #24262a;
    --mt-blue: #5FB6FF;
    --mt-blue-soft: rgba(95,182,255,.24);
    --mt-glass: rgba(255,255,255,.065);
    --mt-glass-2: rgba(255,255,255,.095);
    --mt-line: rgba(255,255,255,.105);
    --mt-radius-sm: 18px;
    --mt-radius: 26px;
    --mt-radius-lg: 34px;
    --mt-shadow: 0 24px 70px rgba(0,0,0,.52);
    --mt-ease: cubic-bezier(.16,1,.3,1);
    --mt-ease-link: cubic-bezier(.77,0,.175,1);
  }

  html {
    width: 100% !important;
    min-height: 100% !important;
    background: var(--mt-black) !important;
    color: var(--mt-ink) !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100% !important;
  }

  html *,
  html *::before,
  html *::after {
    box-sizing: border-box !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  body.app-body,
  body.stats-body {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    background:
      radial-gradient(circle at 50% -10%, rgba(95,182,255,.16), transparent 34%),
      linear-gradient(180deg, #0b0b0d 0%, #050505 46%, #000 100%) !important;
    color: var(--mt-ink) !important;
    font-family: "Lato", sans-serif !important;
    letter-spacing: 0 !important;
  }

  body.app-body::before,
  body.app-body::after,
  .tab::before,
  .tab::after,
  .shop-choice-card::before,
  .shop-choice-card::after,
  .choice-art::before,
  .choice-art::after,
  .arena-card::before,
  .arena-card::after,
  .widget-vs::before,
  .widget-vs::after,
  .home-league-dock::before,
  .home-league-dock::after,
  .reward-lanes::before,
  .reward-lanes::after {
    background-image: none !important;
  }

  body.app-body::before,
  body.app-body::after {
    content: none !important;
    display: none !important;
  }

  .app-main {
    width: min(100%, 430px) !important;
    margin: 0 auto !important;
    padding: 104px 10px 106px !important;
    overflow: hidden !important;
  }

  .tab {
    width: 100% !important;
    min-height: calc(100dvh - 210px) !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--mt-ink) !important;
    will-change: transform, opacity !important;
  }

  .tab[hidden] {
    display: none !important;
  }

  .tab.mt-page-enter-next {
    animation: mt-page-in-next 620ms var(--mt-ease) both !important;
  }

  .tab.mt-page-enter-prev {
    animation: mt-page-in-prev 620ms var(--mt-ease) both !important;
  }

  .tab.mt-page-enter-next > *,
  .tab.mt-page-enter-prev > * {
    animation: mt-page-child-in 540ms var(--mt-ease) both !important;
  }

  .tab.mt-page-enter-next > *:nth-child(2),
  .tab.mt-page-enter-prev > *:nth-child(2) { animation-delay: 60ms !important; }
  .tab.mt-page-enter-next > *:nth-child(3),
  .tab.mt-page-enter-prev > *:nth-child(3) { animation-delay: 110ms !important; }
  .tab.mt-page-enter-next > *:nth-child(4),
  .tab.mt-page-enter-prev > *:nth-child(4) { animation-delay: 160ms !important; }

  @keyframes mt-page-in-next {
    from { opacity: 0; transform: translate3d(42px, 0, 0); filter: blur(8px); }
    to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
  }

  @keyframes mt-page-in-prev {
    from { opacity: 0; transform: translate3d(-42px, 0, 0); filter: blur(8px); }
    to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
  }

  @keyframes mt-page-child-in {
    from { opacity: 0; transform: translate3d(0, 20px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
  }

  .app-header,
  body.stats-body .app-header {
    position: fixed !important;
    z-index: 500 !important;
    top: max(12px, env(safe-area-inset-top)) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    height: 68px !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    padding: 9px 10px !important;
    border: 1px solid rgba(255,255,255,.11) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.035)),
      rgba(5,5,5,.78) !important;
    backdrop-filter: blur(22px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
    box-shadow: 0 18px 46px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    overflow: visible !important;
  }

  .hdr-burger,
  .wallet-btn,
  .nav-drawer-lang,
  .app-header .lang-toggle button {
    min-width: 50px !important;
    height: 50px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--mt-ink) !important;
    color: var(--mt-black) !important;
    box-shadow: none !important;
    display: inline-grid !important;
    place-items: center !important;
    font: 900 12px/1 "Montserrat", sans-serif !important;
    cursor: pointer !important;
    transition: transform 130ms var(--mt-ease), background 220ms var(--mt-ease) !important;
  }

  .hdr-burger:active,
  .wallet-btn:active,
  .nav-drawer-lang:active {
    transform: scale(.96) !important;
  }

  .hdr-burger svg {
    width: 20px !important;
    height: 20px !important;
    fill: currentColor !important;
  }

  .brand-stack,
  .app-header .brand-stack {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 134px !important;
    height: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
    text-decoration: none !important;
    pointer-events: auto !important;
    transition: none !important;
  }

  .brand-stack:active,
  .brand-stack:hover {
    transform: translate(-50%, -50%) !important;
    filter: none !important;
  }

  .brand-meme,
  .brand-throne {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Bagel Fat One", "Montserrat", sans-serif !important;
    font-weight: 400 !important;
    line-height: .82 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 2px 0 rgba(0,0,0,.28) !important;
  }

  .brand-meme {
    font-size: 21px !important;
    color: var(--mt-blue) !important;
  }

  .brand-throne {
    font-size: 22px !important;
    color: var(--mt-ink) !important;
  }

  .hdr-tools {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .wallet-btn {
    min-width: 104px !important;
    padding: 0 18px !important;
    color: var(--mt-black) !important;
  }

  .wallet-dot,
  .bal-widget,
  .hdr-tools .lang-toggle,
  .app-header .bal-widget {
    display: none !important;
  }

  .nav-drawer {
    position: fixed !important;
    inset: 0 !important;
    z-index: 700 !important;
    padding: 92px 10px 18px !important;
    background: rgba(0,0,0,.42) !important;
    backdrop-filter: blur(14px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 240ms var(--mt-ease) !important;
  }

  .nav-drawer.is-open {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .nav-drawer-card {
    width: min(100%, 410px) !important;
    max-height: calc(100dvh - 112px) !important;
    margin: 0 auto !important;
    padding: 14px !important;
    border: 1px solid var(--mt-line) !important;
    border-radius: 32px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.04)),
      rgba(8,8,9,.9) !important;
    box-shadow: var(--mt-shadow) !important;
    overflow-y: auto !important;
    transform: translateY(-18px) scale(.98) !important;
    transition: transform 420ms var(--mt-ease) !important;
  }

  .nav-drawer.is-open .nav-drawer-card {
    transform: translateY(0) scale(1) !important;
  }

  .nav-drawer-close {
    position: sticky !important;
    top: 0 !important;
    margin: 0 0 10px auto !important;
    width: 44px !important;
    height: 44px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--mt-ink) !important;
    color: var(--mt-black) !important;
    font: 900 20px/1 "Montserrat", sans-serif !important;
  }

  .nav-drawer-item {
    width: 100% !important;
    min-height: 58px !important;
    padding: 0 16px !important;
    margin: 0 0 8px !important;
    border: 1px solid transparent !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.05) !important;
    color: var(--mt-ink) !important;
    display: grid !important;
    grid-template-columns: 24px 1fr !important;
    gap: 12px !important;
    align-items: center !important;
    text-align: left !important;
    font: 900 15px/1 "Montserrat", sans-serif !important;
  }

  .nav-drawer-item svg {
    width: 21px !important;
    height: 21px !important;
    fill: currentColor !important;
    color: var(--mt-blue) !important;
  }

  .nav-drawer-item.is-active {
    background: var(--mt-ink) !important;
    color: var(--mt-black) !important;
  }

  .nav-drawer-lang {
    width: 100% !important;
    margin-top: 10px !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  .app-bnav {
    --mt-nav-index: 0;
    --mt-nav-slot: calc((100% - 20px) / 6);
    position: fixed !important;
    z-index: 520 !important;
    left: 12px !important;
    right: 12px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: 406px !important;
    height: 72px !important;
    margin: 0 auto !important;
    padding: 10px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
      rgba(4,4,4,.86) !important;
    backdrop-filter: blur(22px) saturate(155%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(155%) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.06) !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  .app-bnav[data-active-tab="home"] { --mt-nav-index: 0; }
  .app-bnav[data-active-tab="leagues"] { --mt-nav-index: 1; }
  .app-bnav[data-active-tab="shop"] { --mt-nav-index: 2; }
  .app-bnav[data-active-tab="rewards"] { --mt-nav-index: 3; }
  .app-bnav[data-active-tab="tasks"] { --mt-nav-index: 4; }
  .app-bnav[data-active-tab="roulette"] { --mt-nav-index: 5; }

  .app-bnav::before {
    content: "" !important;
    position: absolute !important;
    top: 10px !important;
    left: calc(10px + ((var(--mt-nav-slot) - 52px) / 2) + (var(--mt-nav-index) * var(--mt-nav-slot))) !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 999px !important;
    background: var(--mt-ink) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 10px 24px rgba(95,182,255,.24) !important;
    transform: none !important;
    transition: left 560ms var(--mt-ease) !important;
  }

  .bn-btn {
    position: relative !important;
    z-index: 1 !important;
    min-width: 0 !important;
    min-height: 52px !important;
    width: 100% !important;
    height: 52px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(247,247,242,.58) !important;
    display: grid !important;
    place-items: center !important;
    transition: color 260ms var(--mt-ease), transform 130ms var(--mt-ease) !important;
  }

  .bn-btn.is-active {
    color: var(--mt-black) !important;
  }

  .bn-btn:active {
    transform: scale(.94) !important;
  }

  .bn-icon,
  .bn-icon svg {
    width: 21px !important;
    height: 21px !important;
    display: block !important;
    fill: currentColor !important;
  }

  h1, h2, h3,
  .display-title,
  .section-h,
  .profile-name,
  .choice-copy h2,
  .league-ribbon h3,
  .task-info strong,
  .command-row strong {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: -.02em !important;
    color: var(--mt-ink) !important;
  }

  .display-title,
  .section-h {
    font-size: clamp(31px, 10.8vw, 48px) !important;
    line-height: .9 !important;
    text-transform: uppercase !important;
    text-shadow: 0 5px 0 rgba(255,255,255,.07), 0 18px 34px rgba(0,0,0,.48) !important;
  }

  p,
  small,
  span,
  label,
  input,
  textarea,
  button {
    font-family: "Lato", sans-serif !important;
  }

  .page-kicker,
  .section-eyebrow,
  .checkin-eyebrow,
  .prize-pool-label,
  .refs-card label,
  .shop-status-card span,
  .metric span,
  .profile-scoreboard span {
    color: var(--mt-ink-mute) !important;
    font: 900 10px/1.1 "Montserrat", sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
  }

  .lead-copy,
  .ai-sub,
  .empty-state,
  .stake-note,
  .profile-handle {
    color: var(--mt-ink-soft) !important;
    font: 700 15px/1.45 "Lato", sans-serif !important;
  }

  .page-hero,
  .metric-strip,
  .arena-card,
  .story-card,
  .trust-rail span,
  .command-row,
  .league-stage,
  .ls-match,
  .league-ribbon,
  .shop-choice-card,
  .shop-status-card,
  .shop-pass-art,
  .prize-pool-banner,
  .checkin-shell,
  .task-card,
  .roulette-ticket-bar,
  .roulette-stage,
  .ai-shell,
  .refs-card,
  .refs-stats article,
  .forum-shell,
  .staking-shell,
  .profile-hero,
  .profile-scoreboard article,
  .profile-cashbacks,
  .admin-console,
  .admin-pane,
  .modal-card,
  .pass-card,
  .buy-sheet-card {
    border: 1px solid var(--mt-line) !important;
    border-radius: var(--mt-radius) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.082), rgba(255,255,255,.026)),
      rgba(255,255,255,.035) !important;
    box-shadow: 0 20px 58px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.075) !important;
    backdrop-filter: blur(16px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(135%) !important;
    color: var(--mt-ink) !important;
  }

  .page-hero {
    padding: 0 !important;
    margin: 0 0 20px !important;
    display: block !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .home-portrait {
    width: 100% !important;
    height: 282px !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .home-portrait .hero-photo,
  .hero-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: drop-shadow(0 28px 48px rgba(0,0,0,.52)) !important;
    mix-blend-mode: normal !important;
  }

  .home-editorial {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .home-editorial .display-title,
  .home-editorial .lead-copy {
    display: none !important;
  }

  .metric-strip {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 0 14px !important;
    padding: 10px !important;
    border-radius: 26px !important;
  }

  .metric {
    min-width: 0 !important;
    padding: 13px 10px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.045) !important;
    text-align: left !important;
  }

  .metric strong {
    display: block !important;
    margin-top: 12px !important;
    color: var(--mt-blue) !important;
    font: 900 28px/1 "Montserrat", sans-serif !important;
    text-shadow: 0 0 22px rgba(95,182,255,.34) !important;
  }

  .home-action-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 0 24px !important;
  }

  .home-cta,
  .shop-primary,
  .choice-action,
  .checkin-btn,
  .ref-copy-btn,
  .ref-share-btn,
  .stake-start,
  .forum-publish button,
  .admin-form button {
    position: relative !important;
    isolation: isolate !important;
    min-height: 56px !important;
    padding: 0 20px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--mt-ink) !important;
    color: var(--mt-black) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    font: 900 13px/1 "Montserrat", sans-serif !important;
    text-transform: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: transform 160ms var(--mt-ease), color 480ms var(--mt-ease-link) !important;
  }

  .home-cta::before,
  .shop-primary::before,
  .choice-action::before,
  .checkin-btn::before,
  .ref-copy-btn::before,
  .ref-share-btn::before,
  .stake-start::before,
  .forum-publish button::before,
  .admin-form button::before {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;
    top: 50% !important;
    right: 14px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 999px !important;
    background: var(--mt-blue) !important;
    transform: translateY(-50%) !important;
    transition: width 520ms var(--mt-ease-link), height 520ms var(--mt-ease-link), right 520ms var(--mt-ease-link) !important;
  }

  .home-cta:hover::before,
  .shop-primary:hover::before,
  .choice-action:hover::before,
  .checkin-btn:hover::before,
  .ref-copy-btn:hover::before,
  .ref-share-btn:hover::before,
  .stake-start:hover::before,
  .forum-publish button:hover::before,
  .admin-form button:hover::before {
    width: 100% !important;
    height: 100% !important;
    right: 0 !important;
  }

  .home-cta:active,
  .shop-primary:active,
  .choice-action:active,
  .checkin-btn:active,
  .ref-copy-btn:active,
  .ref-share-btn:active,
  .stake-start:active,
  .forum-publish button:active,
  .admin-form button:active {
    transform: scale(.965) !important;
  }

  .home-cta svg,
  .shop-primary svg,
  .shop-secondary svg {
    width: 16px !important;
    height: 16px !important;
    fill: currentColor !important;
  }

  .home-cta-secondary {
    background: rgba(255,255,255,.075) !important;
    color: var(--mt-ink) !important;
  }

  .home-cta-secondary::before {
    background: rgba(95,182,255,.28) !important;
  }

  .arena-section {
    margin: 6px 0 18px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .arena-section .section-row {
    padding: 0 !important;
    margin: 0 0 12px !important;
    display: block !important;
  }

  .arena-section .section-eyebrow {
    display: none !important;
  }

  .arena-section .section-h {
    font-size: clamp(34px, 12vw, 52px) !important;
    max-width: 340px !important;
  }

  .arena-card {
    position: relative !important;
    width: 100% !important;
    padding: 18px 14px 14px !important;
    border-radius: 30px !important;
    overflow: hidden !important;
  }

  .widget-vs {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 44px minmax(0,1fr) !important;
    gap: 8px !important;
    align-items: start !important;
    padding: 4px 0 0 !important;
    background: transparent !important;
  }

  .widget-team {
    min-width: 0 !important;
    display: grid !important;
    justify-items: center !important;
    gap: 8px !important;
    opacity: 1 !important;
  }

  .widget-team-orb {
    width: 88px !important;
    height: 88px !important;
    border: 1px solid var(--mt-line) !important;
    border-radius: 25px !important;
    background:
      linear-gradient(145deg, rgba(95,182,255,.30), rgba(255,255,255,.08) 48%, rgba(0,0,0,.2)),
      rgba(255,255,255,.05) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 16px 38px rgba(0,0,0,.32) !important;
    overflow: hidden !important;
  }

  .widget-team-lottie,
  .widget-team-lottie canvas,
  .widget-team-lottie img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  .widget-vs-label {
    width: 44px !important;
    height: 44px !important;
    margin: 22px auto 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--mt-ink) !important;
    color: var(--mt-black) !important;
    display: grid !important;
    place-items: center !important;
    font: 900 13px/1 "Montserrat", sans-serif !important;
  }

  .widget-team-name {
    font: 900 18px/1 "Montserrat", sans-serif !important;
    color: var(--mt-ink) !important;
    text-transform: uppercase !important;
  }

  .widget-team-votes {
    font: 800 11px/1 "Lato", sans-serif !important;
    color: var(--mt-ink-mute) !important;
  }

  .widget-team.is-loser {
    opacity: .38 !important;
    filter: blur(.35px) grayscale(.75) !important;
  }

  .widget-team.is-loser .widget-team-name {
    text-decoration: line-through !important;
    text-decoration-thickness: 4px !important;
    text-decoration-color: var(--mt-blue) !important;
  }

  .widget-progress,
  .ls-progress,
  .m-progress {
    height: 12px !important;
    margin: 18px 2px 8px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.075) !important;
    overflow: hidden !important;
  }

  .widget-progress-a,
  .ls-progress-fill,
  .m-progress-fill {
    height: 100% !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, var(--mt-blue), var(--mt-ink)) !important;
    box-shadow: 0 0 18px rgba(95,182,255,.28) !important;
    transition: width 620ms var(--mt-ease) !important;
  }

  .widget-foot,
  .match-insight {
    display: flex !important;
    justify-content: space-between !important;
    gap: 10px !important;
    color: var(--mt-ink-mute) !important;
    font: 900 11px/1 "Montserrat", sans-serif !important;
  }

  .match-insight {
    margin: 14px 0 !important;
    padding: 12px 14px !important;
    border-radius: 18px !important;
    background: rgba(95,182,255,.10) !important;
    color: var(--mt-ink-soft) !important;
  }

  .widget-cta {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 14px !important;
  }

  .widget-vote-btn {
    position: relative !important;
    height: 56px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--mt-ink) !important;
    color: transparent !important;
    overflow: hidden !important;
    box-shadow: none !important;
    font: 900 12px/1 "Montserrat", sans-serif !important;
    transition: transform 160ms var(--mt-ease), opacity 180ms var(--mt-ease) !important;
  }

  .widget-vote-btn::before,
  .widget-vote-btn::after {
    content: attr(data-label) !important;
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    color: var(--mt-black) !important;
    transition: transform 360ms var(--mt-ease) !important;
  }

  .widget-vote-btn::after {
    color: var(--mt-ink) !important;
    background: var(--mt-blue) !important;
    transform: translateY(100%) !important;
  }

  .widget-vote-btn:hover::before,
  .widget-vote-btn:active::before {
    transform: translateY(-100%) !important;
  }

  .widget-vote-btn:hover::after,
  .widget-vote-btn:active::after {
    transform: translateY(0) !important;
  }

  .widget-vote-btn:active {
    transform: scale(.96) !important;
  }

  .widget-vote-btn:disabled {
    opacity: .48 !important;
  }

  .seg-control {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 12px 0 18px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .seg-control button,
  .shop-secondary,
  .task-btn,
  .task-link,
  .roulette-spin-btn,
  .stake-check,
  .admin-tabs button,
  .forum-tabs button,
  .tasks-tabs button,
  .league-view-toggle button,
  [data-league-view],
  [data-league-tier] {
    min-height: 52px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.075) !important;
    color: var(--mt-ink) !important;
    box-shadow: none !important;
    font: 900 13px/1 "Montserrat", sans-serif !important;
    transition: transform 150ms var(--mt-ease), background 240ms var(--mt-ease), color 240ms var(--mt-ease) !important;
  }

  .seg-control button:active,
  .shop-secondary:active,
  .task-btn:active,
  .task-link:active,
  .roulette-spin-btn:active,
  .stake-check:active {
    transform: scale(.96) !important;
  }

  .tasks-tabs,
  .forum-tabs,
  .league-view-toggle,
  .league-tier-slider,
  .shop-choice-tabs {
    width: 100% !important;
    min-height: 60px !important;
    padding: 6px !important;
    border: 1px solid var(--mt-line) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.055) !important;
    box-shadow: none !important;
    backdrop-filter: blur(14px) !important;
    overflow: hidden !important;
  }

  .tasks-tabs button.is-active,
  .forum-tabs button.is-active,
  .admin-tabs button.is-active,
  .shop-choice-tabs button.is-active,
  [data-league-view].is-active,
  [data-league-tier].is-active {
    background: var(--mt-ink) !important;
    color: var(--mt-black) !important;
  }

  .home-league-dock {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 0 22px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .dock-chip {
    min-height: 78px !important;
    padding: 14px 12px !important;
    border: 1px solid var(--mt-line) !important;
    border-radius: 22px !important;
    background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.035)) !important;
    color: var(--mt-ink) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    text-align: left !important;
  }

  .dock-chip span {
    color: var(--mt-ink) !important;
    font: 900 13px/1 "Montserrat", sans-serif !important;
  }

  .dock-chip strong {
    display: block !important;
    margin-top: 8px !important;
    color: var(--mt-ink-mute) !important;
    font: 900 11px/1.15 "Lato", sans-serif !important;
  }

  .dock-chip::after {
    content: "" !important;
    position: absolute !important;
    right: -20px !important;
    bottom: -22px !important;
    width: 78px !important;
    height: 78px !important;
    border-radius: 24px !important;
    background: radial-gradient(circle at 35% 25%, #fff, var(--mt-blue) 55%, transparent 57%) !important;
    opacity: .26 !important;
    transform: rotate(-18deg) !important;
  }

  .story-grid,
  .trust-rail,
  .command-list,
  .tasks-list,
  .refs-shell,
  .leagues-stack,
  .league-bracket,
  .shop-grid {
    display: grid !important;
    gap: 10px !important;
    margin: 18px 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .story-card {
    min-height: 76px !important;
    padding: 16px !important;
    display: grid !important;
    grid-template-columns: 42px 1fr !important;
    gap: 14px !important;
    align-items: center !important;
  }

  .story-card .story-icon,
  .command-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 999px !important;
    background: rgba(95,182,255,.16) !important;
    color: var(--mt-blue) !important;
    display: grid !important;
    place-items: center !important;
  }

  .story-card p {
    display: none !important;
  }

  .trust-rail span {
    min-height: 50px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .command-board {
    margin-top: 26px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .command-row {
    min-height: 72px !important;
    padding: 14px !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0,1fr) 18px !important;
    gap: 14px !important;
    align-items: center !important;
    text-align: left !important;
    text-decoration: none !important;
  }

  .command-row small {
    color: var(--mt-ink-mute) !important;
  }

  .command-chevron,
  .command-chevron svg {
    color: var(--mt-ink-mute) !important;
    fill: currentColor !important;
  }

  .tab-shop {
    padding-top: 0 !important;
  }

  .shop-choice {
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .shop-choice-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    margin: 0 0 18px !important;
  }

  .shop-choice-tabs button {
    height: 48px !important;
    min-height: 48px !important;
    display: grid !important;
    place-items: center !important;
    gap: 2px !important;
    background: transparent !important;
    color: var(--mt-ink-mute) !important;
  }

  .shop-choice-tabs button span {
    font: 900 25px/1 "Montserrat", sans-serif !important;
    color: inherit !important;
  }

  .shop-choice-tabs button small {
    font: 900 11px/1 "Lato", sans-serif !important;
    color: inherit !important;
  }

  .shop-choice-card {
    width: 100% !important;
    min-height: 512px !important;
    margin: 0 0 24px !important;
    padding: 16px !important;
    display: grid !important;
    grid-template-rows: 258px auto auto !important;
    gap: 16px !important;
    overflow: hidden !important;
  }

  .choice-art {
    width: 100% !important;
    height: 258px !important;
    border: 0 !important;
    border-radius: 26px !important;
    background: #000 !important;
    overflow: hidden !important;
    display: grid !important;
    place-items: center !important;
  }

  .choice-art img {
    width: 118% !important;
    height: 118% !important;
    object-fit: contain !important;
    object-position: center !important;
    filter: none !important;
  }

  .choice-art .pack-count {
    right: 10px !important;
    top: 10px !important;
    border: 0 !important;
    background: var(--mt-ink) !important;
    color: var(--mt-black) !important;
    font: 900 11px/1 "Montserrat", sans-serif !important;
  }

  .choice-copy {
    min-width: 0 !important;
  }

  .choice-copy h2 {
    max-width: 260px !important;
    margin: 0 !important;
    font-size: 31px !important;
    line-height: .95 !important;
    text-transform: uppercase !important;
  }

  .choice-pill,
  .choice-badge {
    display: none !important;
  }

  .choice-buy {
    display: grid !important;
    grid-template-columns: 1fr 128px !important;
    gap: 12px !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 !important;
  }

  .choice-price {
    color: var(--mt-blue) !important;
    font: 900 34px/1 "Montserrat", sans-serif !important;
    text-shadow: 0 0 24px rgba(95,182,255,.28) !important;
  }

  .choice-price small {
    margin-left: 6px !important;
    color: var(--mt-ink-mute) !important;
    font: 900 11px/1 "Lato", sans-serif !important;
  }

  .choice-action {
    min-width: 128px !important;
    width: 128px !important;
  }

  .choice-tools,
  .shop-hero-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 12px !important;
  }

  .choice-tool,
  .choice-tool:visited,
  .shop-secondary,
  .shop-secondary:visited {
    min-height: 52px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.075) !important;
    color: var(--mt-ink) !important;
    display: inline-grid !important;
    place-items: center !important;
    text-decoration: none !important;
    font: 900 12px/1 "Montserrat", sans-serif !important;
  }

  .shop-primary,
  .shop-primary:visited {
    color: var(--mt-black) !important;
  }

  .shop-hero {
    display: grid !important;
    gap: 14px !important;
    margin-top: 0 !important;
  }

  .shop-hero .display-title,
  .shop-hero .lead-copy,
  .shop-status-grid {
    display: none !important;
  }

  .shop-pass-art {
    padding: 14px !important;
    border-radius: 28px !important;
    overflow: hidden !important;
  }

  .shop-pass-art img {
    width: 100% !important;
    height: 230px !important;
    object-fit: contain !important;
    background: #000 !important;
    border-radius: 22px !important;
  }

  .shop-pass-strip {
    margin-top: 10px !important;
    padding: 12px 14px !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,.55) !important;
    color: var(--mt-ink) !important;
    display: flex !important;
    justify-content: space-between !important;
    font: 900 12px/1 "Montserrat", sans-serif !important;
  }

  .league-map,
  .league-stack-section {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  .league-stage {
    padding: 16px !important;
    margin: 0 0 14px !important;
  }

  .ls-head,
  .league-stage header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 12px !important;
  }

  .ls-match {
    min-height: 104px !important;
    padding: 14px !important;
    margin: 10px 0 !important;
    border-radius: 22px !important;
  }

  .ls-match-top,
  .ls-meta {
    display: none !important;
  }

  .ls-teams {
    display: grid !important;
    grid-template-columns: 1fr 42px 1fr !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .ls-team-name,
  .league-ribbon h3 {
    color: var(--mt-ink) !important;
  }

  .ls-match .is-loser,
  .token-row.is-loser {
    opacity: .42 !important;
    filter: grayscale(.8) blur(.25px) !important;
    text-decoration: line-through !important;
    text-decoration-thickness: 4px !important;
    text-decoration-color: var(--mt-blue) !important;
  }

  .league-tier-slider {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    margin: 0 0 18px !important;
  }

  .league-ribbon {
    padding: 22px 18px !important;
    margin: 0 0 14px !important;
    overflow: hidden !important;
  }

  .league-ribbon h3 {
    font-size: clamp(30px, 9vw, 44px) !important;
    line-height: .92 !important;
    text-transform: uppercase !important;
  }

  .league-ribbon .league-icon {
    background: rgba(95,182,255,.14) !important;
    color: var(--mt-blue) !important;
    border-radius: 999px !important;
  }

  .token-row,
  .lr-token {
    border: 1px solid var(--mt-line) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.045) !important;
    color: var(--mt-ink) !important;
  }

  .prize-pool-banner {
    padding: 18px !important;
    margin: 0 0 14px !important;
  }

  .prize-pool-value {
    display: block !important;
    margin-top: 8px !important;
    color: var(--mt-blue) !important;
    font: 900 34px/1 "Montserrat", sans-serif !important;
  }

  .checkin-shell {
    padding: 18px !important;
    overflow: hidden !important;
  }

  .checkin-head {
    margin-bottom: 16px !important;
  }

  .checkin-path {
    position: relative !important;
    height: 480px !important;
    border-radius: 28px !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(95,182,255,.18), transparent 48%),
      rgba(255,255,255,.025) !important;
    overflow: hidden !important;
  }

  .checkin-path-line path:first-child {
    stroke: rgba(255,255,255,.14) !important;
  }

  .checkin-path-line path[data-checkin-path-fill] {
    stroke: var(--mt-blue) !important;
    filter: drop-shadow(0 0 12px rgba(95,182,255,.42)) !important;
  }

  .checkin-step {
    width: 50px !important;
    height: 50px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.11) !important;
    color: var(--mt-ink) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.36) !important;
    display: grid !important;
    place-items: center !important;
    font: 900 16px/1 "Montserrat", sans-serif !important;
  }

  .checkin-step.is-done,
  .checkin-step.is-current {
    background: var(--mt-ink) !important;
    color: var(--mt-black) !important;
    box-shadow: 0 0 0 6px rgba(95,182,255,.14), 0 16px 34px rgba(95,182,255,.22) !important;
  }

  .checkin-step.is-final svg {
    width: 24px !important;
    height: 24px !important;
  }

  .checkin-progress-bar {
    height: 42px !important;
    margin: 14px 0 !important;
    border: 1px solid var(--mt-line) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.045) !important;
    overflow: hidden !important;
  }

  .checkin-progress-fill {
    background: linear-gradient(90deg, var(--mt-blue), var(--mt-ink)) !important;
  }

  .checkin-progress-text {
    color: var(--mt-ink) !important;
    font: 900 12px/1 "Montserrat", sans-serif !important;
  }

  .tasks-hero .lead-copy,
  .tasks-hero .page-kicker {
    display: none !important;
  }

  .tasks-tabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    margin-bottom: 18px !important;
  }

  .task-card {
    min-height: 84px !important;
    padding: 16px !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
  }

  .task-info {
    display: grid !important;
    gap: 8px !important;
  }

  .task-reward {
    color: var(--mt-blue) !important;
    font: 900 13px/1 "Lato", sans-serif !important;
  }

  .task-actions {
    display: grid !important;
    gap: 8px !important;
    justify-items: end !important;
  }

  .task-btn,
  .task-link {
    min-width: 106px !important;
    min-height: 46px !important;
    padding: 0 14px !important;
    background: var(--mt-ink) !important;
    color: var(--mt-black) !important;
    text-decoration: none !important;
  }

  .roulette-shell {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .roulette-ticket-bar {
    min-height: 64px !important;
    padding: 0 18px !important;
    margin-bottom: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
  }

  .roulette-ticket-bar strong {
    color: var(--mt-blue) !important;
    font: 900 24px/1 "Montserrat", sans-serif !important;
  }

  .roulette-stage {
    height: 168px !important;
    padding: 16px 0 !important;
    overflow: hidden !important;
  }

  .roulette-track {
    height: 132px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .r-item {
    flex: 0 0 132px !important;
    width: 132px !important;
    height: 132px !important;
    border: 1px solid var(--mt-line) !important;
    border-radius: 28px !important;
    background: rgba(255,255,255,.055) !important;
    overflow: hidden !important;
  }

  .r-lottie {
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    color: var(--mt-blue) !important;
  }

  .roulette-pointer {
    background: var(--mt-blue) !important;
    box-shadow: 0 0 22px rgba(95,182,255,.45) !important;
  }

  .roulette-spin-btn {
    width: 100% !important;
    min-height: 58px !important;
    margin-top: 14px !important;
    background: var(--mt-ink) !important;
    color: var(--mt-black) !important;
  }

  .ai-shell,
  .forum-shell,
  .staking-shell,
  .profile-shell,
  .refs-shell,
  .admin-console {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .ai-head,
  .forum-head,
  .staking-head,
  .refs-hero-lite,
  .admin-console-head {
    margin-bottom: 16px !important;
  }

  .ai-chat {
    min-height: 290px !important;
    display: grid !important;
    gap: 10px !important;
    align-content: end !important;
    margin-bottom: 12px !important;
  }

  .ai-msg,
  .forum-post {
    border: 1px solid var(--mt-line) !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.055) !important;
    color: var(--mt-ink) !important;
    padding: 14px !important;
    font: 700 14px/1.42 "Lato", sans-serif !important;
  }

  .ai-form {
    min-height: 64px !important;
    padding: 8px !important;
    border: 1px solid var(--mt-line) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.07) !important;
    display: grid !important;
    grid-template-columns: 48px 1fr 48px !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .ai-input,
  .stake-input,
  .forum-publish input,
  .forum-publish textarea,
  .admin-form input,
  .admin-form select,
  .admin-filter select {
    width: 100% !important;
    min-height: 48px !important;
    border: 1px solid transparent !important;
    border-radius: 18px !important;
    background: rgba(0,0,0,.35) !important;
    color: var(--mt-ink) !important;
    padding: 0 14px !important;
    font: 800 14px/1 "Lato", sans-serif !important;
    outline: none !important;
  }

  .forum-publish textarea {
    min-height: 112px !important;
    padding-top: 14px !important;
    line-height: 1.35 !important;
  }

  .ai-attach,
  .ai-send {
    width: 48px !important;
    height: 48px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--mt-ink) !important;
    color: var(--mt-black) !important;
    display: grid !important;
    place-items: center !important;
  }

  .ai-attach svg,
  .ai-send svg {
    width: 20px !important;
    height: 20px !important;
  }

  .refs-card {
    padding: 20px !important;
    display: grid !important;
    gap: 12px !important;
  }

  .ref-field {
    min-height: 54px !important;
    padding: 0 16px !important;
    border: 1px solid var(--mt-line) !important;
    border-radius: 18px !important;
    background: rgba(0,0,0,.32) !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  .ref-field strong {
    color: var(--mt-ink) !important;
    font: 900 14px/1 "Montserrat", sans-serif !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .refs-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 12px 0 !important;
  }

  .refs-stats article {
    min-height: 86px !important;
    padding: 16px !important;
  }

  .refs-stats strong {
    display: block !important;
    margin-top: 12px !important;
    color: var(--mt-blue) !important;
    font: 900 30px/1 "Montserrat", sans-serif !important;
  }

  .forum-tabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr 52px !important;
    gap: 4px !important;
    margin-bottom: 14px !important;
  }

  .forum-feed,
  .forum-publish {
    display: grid !important;
    gap: 10px !important;
  }

  .forum-publish {
    padding: 16px !important;
    border: 1px solid var(--mt-line) !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.045) !important;
  }

  .stake-ca {
    padding: 14px !important;
    margin: 0 0 14px !important;
    border: 1px solid var(--mt-line) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.045) !important;
    color: var(--mt-ink-soft) !important;
    word-break: break-all !important;
    font: 800 12px/1.35 "Lato", sans-serif !important;
  }

  .stake-periods {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  .stake-periods button,
  .stake-check {
    width: 100% !important;
  }

  .stake-periods button.is-active {
    background: var(--mt-ink) !important;
    color: var(--mt-black) !important;
  }

  .profile-hero {
    min-height: 136px !important;
    padding: 18px !important;
    display: grid !important;
    grid-template-columns: 94px minmax(0,1fr) !important;
    gap: 16px !important;
    align-items: center !important;
    margin-bottom: 12px !important;
  }

  .profile-avatar {
    width: 94px !important;
    height: 94px !important;
    border-radius: 28px !important;
    background: linear-gradient(145deg, var(--mt-blue), var(--mt-ink)) !important;
    color: var(--mt-black) !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    box-shadow: 0 18px 36px rgba(95,182,255,.18) !important;
  }

  .profile-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .profile-avatar span {
    color: var(--mt-black) !important;
    font: 900 34px/1 "Montserrat", sans-serif !important;
  }

  .profile-name {
    font-size: clamp(26px, 8vw, 36px) !important;
    line-height: .92 !important;
    margin: 0 0 8px !important;
    text-transform: uppercase !important;
  }

  .profile-scoreboard {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .profile-scoreboard article {
    min-height: 62px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .profile-scoreboard strong {
    color: var(--mt-blue) !important;
    font: 900 26px/1 "Montserrat", sans-serif !important;
  }

  .profile-cashbacks {
    margin-top: 14px !important;
    padding: 20px !important;
  }

  .profile-cashbacks-h {
    margin: 0 0 18px !important;
    font-size: 29px !important;
  }

  .cashback-list {
    display: grid !important;
    gap: 10px !important;
  }

  .cashback-pill {
    border: 1px solid var(--mt-line) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.045) !important;
    padding: 14px !important;
  }

  .admin-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }

  .admin-pane {
    padding: 16px !important;
  }

  .admin-form,
  .admin-tournament-form {
    display: grid !important;
    gap: 10px !important;
  }

  .modal,
  .pass-modal,
  .buy-sheet {
    backdrop-filter: blur(12px) !important;
    background: rgba(0,0,0,.62) !important;
  }

  .pass-art {
    border: 0 !important;
    border-radius: 24px !important;
    background: #000 !important;
    overflow: hidden !important;
  }

  .pass-art img {
    width: 100% !important;
    height: 170px !important;
    object-fit: cover !important;
    filter: grayscale(.15) contrast(1.05) !important;
    mix-blend-mode: normal !important;
  }

  .toast {
    border: 1px solid var(--mt-line) !important;
    border-radius: 999px !important;
    background: var(--mt-ink) !important;
    color: var(--mt-black) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.4) !important;
    font: 900 13px/1 "Montserrat", sans-serif !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .tab.mt-page-enter-next,
    .tab.mt-page-enter-prev,
    .tab.mt-page-enter-next > *,
    .tab.mt-page-enter-prev > *,
    .app-bnav::before,
    .home-cta::before,
    .shop-primary::before,
    .choice-action::before,
    .widget-vote-btn::before,
    .widget-vote-btn::after {
      animation: none !important;
      transition: none !important;
    }
  }
}

/* v220: tail-loaded mobile visual authority. Keeps all pages in black/white/gray/#5FB6FF. */
@media (max-width: 620px) {
  :root {
    --mt-black: #050505;
    --mt-ink: #f8f8f4;
    --mt-ink-soft: rgba(248,248,244,.72);
    --mt-ink-mute: rgba(248,248,244,.48);
    --mt-gray: #8c929a;
    --mt-blue: #5FB6FF;
    --mt-line: rgba(255,255,255,.12);
    --mt-ease: cubic-bezier(.16,1,.3,1);
    --mt-link-ease: cubic-bezier(.77,0,.175,1);
  }

  body.app-body,
  body.stats-body {
    background:
      radial-gradient(circle at 50% -22%, rgba(95,182,255,.18), transparent 30%),
      linear-gradient(180deg, #0a0a0b 0%, #050505 42%, #000 100%) !important;
    color: var(--mt-ink) !important;
    font-family: "Lato", sans-serif !important;
  }

  .app-main {
    padding-top: 112px !important;
  }

  .app-header,
  body.stats-body .app-header {
    height: 66px !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)),
      rgba(5,5,5,.78) !important;
    backdrop-filter: blur(24px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
    box-shadow: 0 18px 54px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.08) !important;
    overflow: visible !important;
  }

  .hdr-burger,
  .stats-back,
  .nav-drawer-lang,
  .app-header .lang-toggle button {
    width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.10) !important;
    color: var(--mt-ink) !important;
    box-shadow: none !important;
  }

  .wallet-btn,
  .stats-wallet-btn {
    min-width: 92px !important;
    height: 50px !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--mt-ink) !important;
    color: var(--mt-black) !important;
    box-shadow: none !important;
    font: 900 12px/1 "Montserrat", sans-serif !important;
  }

  .wallet-label {
    max-width: 90px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .brand-stack,
  .app-header .brand-stack {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 132px !important;
    height: 46px !important;
    transform: translate(-50%, -50%) !important;
    overflow: visible !important;
    pointer-events: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: none !important;
  }

  .brand-stack:active,
  .brand-stack:hover,
  .brand-stack:focus {
    transform: translate(-50%, -50%) !important;
    opacity: 1 !important;
    filter: none !important;
  }

  .brand-meme {
    font: 400 22px/.78 "Bagel Fat One", "Montserrat", sans-serif !important;
    color: var(--mt-blue) !important;
    text-shadow: 0 2px 0 #0c0c0c !important;
  }

  .brand-throne {
    font: 400 23px/.78 "Bagel Fat One", "Montserrat", sans-serif !important;
    color: var(--mt-ink) !important;
    text-shadow: 0 2px 0 #0c0c0c !important;
  }

  .bal-widget,
  .wallet-dot,
  .app-header .lang-toggle,
  .hdr-tools .lang-toggle {
    display: none !important;
  }

  .app-bnav {
    --mt-nav-index: 0;
    --mt-nav-slot: calc((100% - 20px) / 6);
    height: 72px !important;
    padding: 10px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03)),
      rgba(3,3,3,.86) !important;
    backdrop-filter: blur(24px) saturate(155%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(155%) !important;
    box-shadow: 0 18px 54px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.06) !important;
    overflow: hidden !important;
  }

  .app-bnav[data-active-tab="home"] { --mt-nav-index: 0; }
  .app-bnav[data-active-tab="leagues"] { --mt-nav-index: 1; }
  .app-bnav[data-active-tab="shop"] { --mt-nav-index: 2; }
  .app-bnav[data-active-tab="rewards"] { --mt-nav-index: 3; }
  .app-bnav[data-active-tab="tasks"] { --mt-nav-index: 4; }
  .app-bnav[data-active-tab="roulette"] { --mt-nav-index: 5; }

  .app-bnav::before {
    content: "" !important;
    position: absolute !important;
    top: 10px !important;
    left: calc(10px + ((var(--mt-nav-slot) - 52px) / 2) + (var(--mt-nav-index) * var(--mt-nav-slot))) !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 999px !important;
    background: var(--mt-ink) !important;
    box-shadow: 0 10px 24px rgba(95,182,255,.22) !important;
    transition: left 620ms var(--mt-ease) !important;
  }

  .bn-btn,
  .bn-btn svg {
    color: rgba(248,248,244,.58) !important;
    fill: currentColor !important;
  }

  .bn-btn.is-active,
  .bn-btn.is-active svg {
    color: var(--mt-black) !important;
  }

  .page-hero,
  .arena-section,
  .league-map,
  .league-stack-section,
  .shop-choice,
  .roulette-shell,
  .refs-shell,
  .profile-shell,
  .admin-console {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .metric-strip,
  .arena-card,
  .story-card,
  .trust-rail span,
  .command-row,
  .league-stage,
  .ls-match,
  .league-ribbon,
  .shop-pass-art,
  .prize-pool-banner,
  .checkin-shell,
  .task-card,
  .roulette-ticket-bar,
  .roulette-stage,
  .ai-shell,
  .refs-card,
  .refs-stats article,
  .forum-shell,
  .staking-shell,
  .profile-hero,
  .profile-scoreboard article,
  .profile-cashbacks,
  .admin-pane,
  .modal-card,
  .pass-card,
  .buy-sheet-card {
    border: 1px solid var(--mt-line) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.026)),
      rgba(255,255,255,.035) !important;
    box-shadow: 0 18px 52px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.07) !important;
    backdrop-filter: blur(16px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(135%) !important;
  }

  .dock-chip::after,
  .command-row::before,
  .story-card::before,
  .trust-rail span::before,
  .shop-choice-card::before,
  .shop-choice-card::after,
  .choice-art::before,
  .choice-art::after,
  .reward-node::before,
  .reward-node::after,
  .reward-step::before,
  .reward-step::after,
  .profile-hero::before,
  .profile-hero::after,
  .arena-card::before,
  .arena-card::after,
  #active-vote-card::before,
  #active-vote-card::after,
  .widget-vs::before,
  .widget-vs::after {
    content: none !important;
    display: none !important;
  }

  .home-portrait,
  .home-portrait .hero-photo {
    background: transparent !important;
    box-shadow: none !important;
  }

  .home-portrait .hero-photo {
    filter: drop-shadow(0 26px 42px rgba(0,0,0,.56)) !important;
  }

  .metric {
    background: rgba(255,255,255,.045) !important;
  }

  .metric strong,
  .choice-price,
  .prize-pool-value,
  .roulette-ticket-bar strong,
  .task-reward {
    color: var(--mt-blue) !important;
  }

  .section-h,
  .display-title,
  .choice-copy h2,
  .league-ribbon h3,
  .profile-name,
  .command-board .section-h,
  .refs-title,
  .ai-title,
  .tasks-title,
  .roulette-title {
    color: var(--mt-ink) !important;
    font-family: "Montserrat", sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: -.01em !important;
  }

  .home-cta,
  .shop-primary,
  .choice-action,
  .checkin-btn,
  .ref-copy-btn,
  .ref-share-btn,
  .stake-start,
  .forum-publish button {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    background: var(--mt-ink) !important;
    color: var(--mt-black) !important;
    border: 0 !important;
    box-shadow: none !important;
    transition: transform 150ms var(--mt-ease), color 520ms var(--mt-link-ease) !important;
  }

  .home-cta::before,
  .shop-primary::before,
  .choice-action::before,
  .checkin-btn::before,
  .ref-copy-btn::before,
  .ref-share-btn::before,
  .stake-start::before,
  .forum-publish button::before {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;
    top: 50% !important;
    right: 14px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 999px !important;
    background: var(--mt-blue) !important;
    transform: translateY(-50%) !important;
    transition: width 520ms var(--mt-link-ease), height 520ms var(--mt-link-ease), right 520ms var(--mt-link-ease) !important;
  }

  .home-cta:hover::before,
  .home-cta:active::before,
  .shop-primary:hover::before,
  .shop-primary:active::before,
  .choice-action:hover::before,
  .choice-action:active::before,
  .checkin-btn:hover::before,
  .checkin-btn:active::before,
  .ref-copy-btn:hover::before,
  .ref-copy-btn:active::before,
  .ref-share-btn:hover::before,
  .ref-share-btn:active::before,
  .stake-start:hover::before,
  .stake-start:active::before,
  .forum-publish button:hover::before,
  .forum-publish button:active::before {
    width: 100% !important;
    height: 100% !important;
    right: 0 !important;
  }

  .home-cta:active,
  .shop-primary:active,
  .choice-action:active,
  .checkin-btn:active,
  .ref-copy-btn:active,
  .ref-share-btn:active,
  .stake-start:active,
  .forum-publish button:active {
    transform: scale(.965) !important;
  }

  .widget-vote-btn {
    background: var(--mt-ink) !important;
    color: transparent !important;
  }

  .widget-vote-btn::before,
  .widget-vote-btn::after {
    content: attr(data-label) !important;
    color: var(--mt-black) !important;
  }

  .widget-vote-btn::after {
    color: var(--mt-ink) !important;
    background: var(--mt-blue) !important;
  }

  .arena-card,
  #active-vote-card {
    background:
      linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.018)),
      rgba(255,255,255,.026) !important;
  }

  .widget-team-orb {
    background:
      linear-gradient(145deg, rgba(95,182,255,.28), rgba(255,255,255,.10) 52%, rgba(0,0,0,.22)),
      rgba(255,255,255,.05) !important;
  }

  .widget-progress,
  .ls-progress,
  .m-progress {
    height: 12px !important;
    background: rgba(255,255,255,.085) !important;
  }

  .widget-progress-a,
  .ls-progress-fill,
  .m-progress-fill {
    background: linear-gradient(90deg, var(--mt-blue), var(--mt-ink)) !important;
  }

  .tasks-tabs,
  .forum-tabs,
  .league-view-toggle,
  .league-tier-slider,
  .shop-choice-tabs {
    border: 1px solid var(--mt-line) !important;
    background: rgba(255,255,255,.055) !important;
    box-shadow: none !important;
  }

  .tasks-tabs button,
  .forum-tabs button,
  .league-view-toggle button,
  .league-tier-slider button,
  .shop-choice-tabs button {
    background: transparent !important;
    color: var(--mt-ink-mute) !important;
    box-shadow: none !important;
  }

  .tasks-tabs button.is-active,
  .forum-tabs button.is-active,
  .league-view-toggle button.is-active,
  .league-tier-slider button.is-active,
  .shop-choice-tabs button.is-active,
  .shop-choice-tabs button[aria-selected="true"] {
    background: var(--mt-ink) !important;
    color: var(--mt-black) !important;
  }

  .shop-choice-card {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .choice-art {
    height: 276px !important;
    background: #000 !important;
    border: 1px solid var(--mt-line) !important;
  }

  .choice-art img {
    width: 126% !important;
    height: 126% !important;
    filter: none !important;
    transform: translateZ(0) !important;
  }

  .choice-tools,
  .shop-hero-actions {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .choice-tool,
  .shop-secondary {
    color: var(--mt-ink) !important;
    background: rgba(255,255,255,.07) !important;
  }

  .shop-primary,
  .shop-primary span {
    color: var(--mt-black) !important;
  }

  .profile-level,
  .level-badge,
  [data-profile-level] {
    background: var(--mt-blue) !important;
    color: var(--mt-black) !important;
    border: 0 !important;
  }

  .profile-scoreboard {
    display: grid !important;
    gap: 8px !important;
    margin: 14px 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .profile-scoreboard article {
    min-height: 58px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
  }

  .profile-cashbacks {
    padding: 20px 18px !important;
  }

  .profile-cashbacks h2 {
    margin: 0 0 18px !important;
    padding-left: 2px !important;
  }

  .reward-lanes {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .rewards-head,
  .reward-node,
  .reward-index {
    background:
      linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.026)),
      rgba(255,255,255,.035) !important;
    border: 1px solid var(--mt-line) !important;
    color: var(--mt-ink) !important;
  }

  .rewards-head h2,
  .rewards-head strong {
    color: var(--mt-ink) !important;
    text-shadow: none !important;
  }

  .reward-node .reward-art,
  .reward-node [aria-hidden="true"] {
    color: var(--mt-blue) !important;
    filter: grayscale(1) sepia(1) saturate(3) hue-rotate(165deg) brightness(1.25) !important;
  }

  .reward-step:not(.is-reached):not(.is-claimed) {
    opacity: .55 !important;
  }

  .tab.mt-page-enter-next {
    animation: mt-page-slide-next-v220 620ms var(--mt-ease) both !important;
  }

  .tab.mt-page-enter-prev {
    animation: mt-page-slide-prev-v220 620ms var(--mt-ease) both !important;
  }

  @keyframes mt-page-slide-next-v220 {
    from { opacity: 0; transform: translate3d(46px, 0, 0); filter: blur(8px); }
    to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
  }

  @keyframes mt-page-slide-prev-v220 {
    from { opacity: 0; transform: translate3d(-46px, 0, 0); filter: blur(8px); }
    to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
  }

  input,
  textarea,
  select {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid var(--mt-line) !important;
    color: var(--mt-ink) !important;
    border-radius: 18px !important;
  }
}

/* v222: final mobile authority. This block intentionally sits last. */
@media (max-width: 820px) {
  :root {
    --mt-black: #050505;
    --mt-panel: rgba(10, 10, 11, .76);
    --mt-line: rgba(255,255,255,.13);
    --mt-ink: #f7f7f2;
    --mt-ink-soft: rgba(247,247,242,.72);
    --mt-ink-mute: rgba(247,247,242,.48);
    --mt-blue: #5FB6FF;
    --mt-ease: cubic-bezier(.16, 1, .3, 1);
  }

  html,
  body.app-body {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    background:
      radial-gradient(circle at 50% -18%, rgba(95,182,255,.16), transparent 26%),
      linear-gradient(180deg, #08090a 0%, #050505 44%, #000 100%) !important;
    color: var(--mt-ink) !important;
    font-family: "Lato", sans-serif !important;
  }

  body.app-body::before,
  body.app-body::after,
  .app-main::before,
  .app-main::after {
    display: none !important;
    content: none !important;
  }

  .app-main {
    width: min(430px, 100%) !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    padding: 104px 10px 116px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  html body.app-body > header.app-header.app-header {
    position: fixed !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    left: 50% !important;
    right: auto !important;
    width: min(430px, calc(100vw - 18px)) !important;
    max-width: 430px !important;
    height: 66px !important;
    padding: 0 8px !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 26px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.025)),
      rgba(0,0,0,.80) !important;
    box-shadow: 0 18px 34px rgba(0,0,0,.42) !important;
    backdrop-filter: blur(18px) saturate(135%) !important;
    z-index: 80 !important;
  }

  .app-header .hdr-burger {
    position: static !important;
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.08) !important;
    color: var(--mt-ink) !important;
    box-shadow: none !important;
  }

  .app-header .hdr-burger svg {
    width: 22px !important;
    height: 22px !important;
    fill: currentColor !important;
  }

  .app-header .brand-stack {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 136px !important;
    height: 46px !important;
    transform: translate(-50%, -50%) !important;
    display: grid !important;
    place-items: center !important;
    pointer-events: none !important;
    text-decoration: none !important;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.38)) !important;
  }

  .app-header .brand-stack:active,
  .app-header .brand-stack:hover {
    transform: translate(-50%, -50%) !important;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.38)) !important;
  }

  .app-header .brand-meme { color: var(--mt-blue) !important; }
  .app-header .brand-throne { color: var(--mt-ink) !important; }

  .app-header .hdr-tools {
    position: static !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
  }

  .app-header .wallet-btn {
    min-width: 104px !important;
    height: 48px !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--mt-ink) !important;
    color: var(--mt-black) !important;
    box-shadow: none !important;
    font: 900 13px/1 "Montserrat", sans-serif !important;
  }

  .app-header .wallet-dot,
  .app-header .bal-widget,
  .app-header .lang-toggle {
    display: none !important;
  }

  html body.app-body > nav.app-bnav.app-bnav.app-bnav {
    --nav-count: 6;
    --nav-index: 0;
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    width: min(430px, calc(100vw - 24px)) !important;
    max-width: 430px !important;
    height: 72px !important;
    padding: 9px !important;
    transform: translateX(-50%) !important;
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    align-items: center !important;
    gap: 0 !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)),
      rgba(0,0,0,.86) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,.48) !important;
    backdrop-filter: blur(18px) saturate(130%) !important;
    overflow: hidden !important;
    z-index: 90 !important;
  }

  html body.app-body > nav.app-bnav[data-active-tab="home"] { --nav-index: 0; }
  html body.app-body > nav.app-bnav[data-active-tab="leagues"] { --nav-index: 1; }
  html body.app-body > nav.app-bnav[data-active-tab="shop"] { --nav-index: 2; }
  html body.app-body > nav.app-bnav[data-active-tab="rewards"] { --nav-index: 3; }
  html body.app-body > nav.app-bnav[data-active-tab="tasks"] { --nav-index: 4; }
  html body.app-body > nav.app-bnav[data-active-tab="roulette"] { --nav-index: 5; }

  html body.app-body > nav.app-bnav.app-bnav.app-bnav::before {
    content: "" !important;
    position: absolute !important;
    top: 9px !important;
    left: calc(9px + ((100% - 18px) / var(--nav-count) - 54px) / 2 + var(--nav-index) * ((100% - 18px) / var(--nav-count))) !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 999px !important;
    background: var(--mt-ink) !important;
    box-shadow: 0 7px 0 rgba(95,182,255,.24) !important;
    transform: none !important;
    transition: left 520ms var(--mt-ease), box-shadow 240ms ease !important;
    z-index: 0 !important;
  }

  html body.app-body > nav.app-bnav .bn-btn {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 54px !important;
    min-width: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: rgba(255,255,255,.58) !important;
    box-shadow: none !important;
    transform: none !important;
    transition: color 240ms ease, transform 120ms ease !important;
  }

  html body.app-body > nav.app-bnav .bn-btn.is-active { color: var(--mt-black) !important; }
  html body.app-body > nav.app-bnav .bn-btn:active { transform: scale(.94) !important; }
  html body.app-body > nav.app-bnav .bn-icon,
  html body.app-body > nav.app-bnav svg {
    width: 22px !important;
    height: 22px !important;
    fill: currentColor !important;
    color: currentColor !important;
  }

  .nav-drawer-item[data-tab="refs"],
  .command-row[data-tab="refs"],
  .tab-refs {
    display: none !important;
  }

  .nav-drawer {
    z-index: 120 !important;
    background: rgba(0,0,0,.64) !important;
    backdrop-filter: blur(12px) !important;
  }

  .nav-drawer-card {
    width: min(360px, calc(100vw - 28px)) !important;
    margin: 12px !important;
    padding: 18px !important;
    border: 1px solid var(--mt-line) !important;
    border-radius: 30px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
      rgba(8,8,8,.94) !important;
    box-shadow: 0 24px 50px rgba(0,0,0,.55) !important;
  }

  .nav-drawer-item,
  .nav-drawer-lang {
    min-height: 54px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.055) !important;
    color: var(--mt-ink) !important;
  }

  .nav-drawer-item svg { fill: var(--mt-ink) !important; }
  .tab { width: 100% !important; max-width: 100% !important; }
  .tab.mt-page-enter-next { animation: mt-page-slide-next-v222 560ms var(--mt-ease) both !important; }
  .tab.mt-page-enter-prev { animation: mt-page-slide-prev-v222 560ms var(--mt-ease) both !important; }

  @keyframes mt-page-slide-next-v222 {
    from { opacity: 0; transform: translate3d(30px, 0, 0); filter: blur(5px); }
    to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
  }

  @keyframes mt-page-slide-prev-v222 {
    from { opacity: 0; transform: translate3d(-30px, 0, 0); filter: blur(5px); }
    to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
  }

  .league-hero,
  .league-rules,
  .ai-head {
    display: none !important;
  }

  .league-view-toggle,
  .tasks-tabs,
  .forum-tabs,
  .stake-periods,
  .league-tier-slider {
    position: relative !important;
    width: 100% !important;
    min-height: 58px !important;
    margin: 0 0 18px !important;
    padding: 6px !important;
    display: grid !important;
    border: 1px solid var(--mt-line) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.055) !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .league-view-toggle { grid-template-columns: repeat(2, 1fr) !important; }
  .tasks-tabs { grid-template-columns: repeat(2, 1fr) !important; }
  .forum-tabs,
  .stake-periods,
  .league-tier-slider { grid-template-columns: repeat(3, 1fr) !important; }

  .league-view-toggle::before,
  .league-tier-slider::before,
  .tasks-tabs::before,
  .forum-tabs::before,
  .stake-periods::before,
  .shop-choice-tabs::before {
    display: none !important;
    content: none !important;
  }

  .league-view-toggle button,
  .tasks-tabs button,
  .forum-tabs button,
  .stake-periods button,
  .league-tier-slider button {
    height: 46px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--mt-ink-mute) !important;
    box-shadow: none !important;
    font: 900 13px/1 "Montserrat", sans-serif !important;
  }

  .league-view-toggle button.is-active,
  .tasks-tabs button.is-active,
  .forum-tabs button.is-active,
  .stake-periods button.is-active,
  .league-tier-slider button.is-active {
    background: var(--mt-ink) !important;
    color: var(--mt-black) !important;
  }

  .league-map,
  .league-stack-section,
  .tasks-hero,
  .tasks-list,
  .roulette-shell,
  .ai-shell,
  .forum-shell,
  .staking-shell,
  .profile-shell {
    width: 100% !important;
    margin: 0 0 16px !important;
    padding: 18px !important;
    border: 1px solid var(--mt-line) !important;
    border-radius: 30px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.022)),
      rgba(7,7,8,.64) !important;
    box-shadow: 0 20px 38px rgba(0,0,0,.38) !important;
    backdrop-filter: blur(16px) saturate(125%) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .league-map .section-h,
  .tasks-hero .display-title,
  .forum-head .section-h,
  .staking-head .section-h,
  .profile-name {
    margin: 0 0 16px !important;
    color: var(--mt-ink) !important;
    font-family: "Montserrat", sans-serif !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-size: clamp(28px, 8vw, 44px) !important;
    line-height: .92 !important;
  }

  .league-bracket { width: 100% !important; overflow: hidden !important; }
  .mt-bracket-map {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 18px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "logo logo"
      "ql qr"
      "left right"
      "semi semi"
      "final final"
      "levels levels" !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 26px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .mt-bracket-map > * {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
  }

  .br-logo { grid-area: logo !important; text-align: center !important; margin-bottom: 4px !important; }
  .br-logo span,
  .br-logo strong {
    display: block !important;
    font: 950 26px/.8 "Montserrat", sans-serif !important;
    color: var(--mt-ink) !important;
    text-shadow: none !important;
  }
  .br-logo span { color: var(--mt-blue) !important; }
  .br-quarter-left { grid-area: ql !important; }
  .br-quarter-right { grid-area: qr !important; }
  .br-quarter-label { color: var(--mt-ink-soft) !important; font: 900 14px/1 "Montserrat", sans-serif !important; }
  .br-left { grid-area: left !important; }
  .br-right { grid-area: right !important; }
  .br-side { display: grid !important; gap: 8px !important; }

  .br-slot {
    width: 100% !important;
    min-width: 0 !important;
    height: 54px !important;
    padding: 8px 10px !important;
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: center !important;
    gap: 8px !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.04) !important;
    color: var(--mt-ink) !important;
  }

  .br-slot .br-line { display: none !important; }
  .br-num {
    width: 24px !important;
    height: 24px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: var(--mt-ink) !important;
    color: var(--mt-black) !important;
    font: 900 12px/1 "Montserrat", sans-serif !important;
  }

  .br-slot strong,
  .br-semi strong,
  .br-final strong {
    font: 950 13px/1 "Montserrat", sans-serif !important;
    color: var(--mt-ink) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .br-slot.is-loser { opacity: .38 !important; filter: grayscale(1) blur(.25px) !important; }
  .br-mid-left {
    grid-area: semi !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .br-semi,
  .br-final button {
    width: 100% !important;
    min-height: 58px !important;
    padding: 10px !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 8px !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 18px !important;
    background: rgba(95,182,255,.08) !important;
    color: var(--mt-ink) !important;
  }

  .br-semi > span,
  .br-final > span {
    grid-column: 1 / -1 !important;
    color: var(--mt-ink-mute) !important;
    font: 900 11px/1 "Montserrat", sans-serif !important;
  }

  .br-final { grid-area: final !important; display: grid !important; gap: 8px !important; text-align: center !important; }
  .br-levels { grid-area: levels !important; text-align: center !important; color: var(--mt-ink-soft) !important; font: 950 22px/1 "Montserrat", sans-serif !important; }

  .league-ribbon,
  .task-card,
  .forum-post,
  .profile-hero,
  .profile-scoreboard article,
  .profile-cashbacks,
  .roulette-ticket-bar,
  .r-item {
    border: 1px solid rgba(255,255,255,.08) !important;
    background: rgba(255,255,255,.04) !important;
    box-shadow: none !important;
  }

  .league-ribbon { margin-top: 16px !important; padding: 18px !important; border-radius: 28px !important; }
  .lr-name { color: var(--mt-ink) !important; font: 950 34px/.9 "Montserrat", sans-serif !important; }
  .lr-sub { color: var(--mt-ink-soft) !important; }
  .lr-token { min-height: 48px !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 16px !important; background: rgba(255,255,255,.035) !important; }

  .tasks-hero .lead-copy,
  .page-kicker {
    display: none !important;
  }

  .tasks-list { display: grid !important; gap: 10px !important; }
  .tasks-list[hidden] { display: none !important; }
  .task-card,
  .forum-post {
    min-height: 76px !important;
    padding: 14px !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 12px !important;
    border-radius: 22px !important;
  }
  .task-info strong,
  .forum-post strong { color: var(--mt-ink) !important; font: 900 17px/1.1 "Montserrat", sans-serif !important; }
  .task-reward,
  .forum-post p { color: var(--mt-ink-soft) !important; }

  .task-btn,
  .task-link,
  .forum-like,
  .staking-shell button,
  .roulette-spin-btn,
  .ai-attach,
  .ai-send {
    min-height: 48px !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--mt-ink) !important;
    color: var(--mt-black) !important;
    box-shadow: none !important;
    font: 900 13px/1 "Montserrat", sans-serif !important;
  }
  .task-btn.is-done { opacity: .52 !important; }

  .roulette-ticket-bar {
    height: 58px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 20px !important;
  }

  .roulette-stage {
    height: 180px !important;
    margin: 18px 0 !important;
    border: 0 !important;
    border-radius: 28px !important;
    background: rgba(255,255,255,.035) !important;
    overflow: hidden !important;
  }
  .roulette-track { height: 100% !important; align-items: center !important; will-change: transform !important; }
  .r-item { width: 132px !important; height: 132px !important; flex: 0 0 132px !important; margin: 0 6px !important; border-radius: 26px !important; overflow: hidden !important; }
  .r-lottie { width: 190% !important; height: 190% !important; margin: -40% 0 0 -45% !important; }
  .roulette-pointer { background: var(--mt-blue) !important; box-shadow: 0 0 22px rgba(95,182,255,.5) !important; }

  .ai-shell {
    min-height: calc(100dvh - 208px) !important;
    display: grid !important;
    grid-template-rows: 1fr auto auto !important;
    gap: 12px !important;
  }
  .ai-chat { min-height: 290px !important; padding: 0 !important; overflow-y: auto !important; }
  .ai-msg { max-width: 88% !important; margin-bottom: 10px !important; padding: 14px !important; border-radius: 18px !important; color: var(--mt-ink) !important; background: rgba(255,255,255,.055) !important; border: 1px solid rgba(255,255,255,.08) !important; }
  .ai-msg-user { margin-left: auto !important; background: rgba(95,182,255,.16) !important; }
  .ai-form { padding: 8px !important; display: grid !important; grid-template-columns: 50px 1fr 50px !important; gap: 8px !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 26px !important; background: rgba(255,255,255,.045) !important; }
  .ai-input,
  .stake-input,
  .forum-publish input,
  .forum-publish textarea {
    min-height: 50px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 18px !important;
    background: rgba(0,0,0,.34) !important;
    color: var(--mt-ink) !important;
  }
  .ai-attach,
  .ai-send { min-width: 50px !important; width: 50px !important; height: 50px !important; padding: 0 !important; display: grid !important; place-items: center !important; }
  .ai-attach svg,
  .ai-send svg { width: 22px !important; height: 22px !important; fill: currentColor !important; }

  .forum-feed,
  .forum-publish,
  .staking-shell { display: grid !important; gap: 12px !important; }
  .forum-token { width: 54px !important; height: 54px !important; border: 0 !important; border-radius: 16px !important; background: var(--mt-blue) !important; color: var(--mt-black) !important; font: 950 16px/1 "Montserrat", sans-serif !important; }
  .stake-ca { padding: 12px !important; border-radius: 18px !important; background: rgba(255,255,255,.04) !important; color: var(--mt-ink-soft) !important; font: 800 12px/1.35 "Lato", sans-serif !important; word-break: break-all !important; }

  .profile-shell { display: grid !important; gap: 14px !important; }
  .profile-hero {
    min-height: 132px !important;
    padding: 16px !important;
    display: grid !important;
    grid-template-columns: 92px 1fr auto !important;
    align-items: center !important;
    gap: 14px !important;
    border-radius: 28px !important;
  }
  .profile-avatar { width: 88px !important; height: 88px !important; border-radius: 24px !important; background: radial-gradient(circle at 30% 22%, rgba(255,255,255,.85), transparent 22%), linear-gradient(135deg, var(--mt-blue), #dfe6eb) !important; color: var(--mt-black) !important; }
  .profile-copy { min-width: 0 !important; }
  .profile-name { margin: 0 0 8px !important; font-size: clamp(28px, 8vw, 40px) !important; word-break: break-word !important; }
  .profile-handle { color: var(--mt-ink-soft) !important; }
  .profile-level,
  .level-badge,
  [data-profile-level] { background: var(--mt-blue) !important; color: var(--mt-black) !important; }
  .profile-scoreboard { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
  .profile-scoreboard article { min-height: 78px !important; padding: 14px !important; border-radius: 22px !important; }
  .profile-scoreboard span { color: var(--mt-ink-mute) !important; font: 900 11px/1 "Montserrat", sans-serif !important; }
  .profile-scoreboard strong { color: var(--mt-ink) !important; font: 950 30px/1 "Montserrat", sans-serif !important; }
  .profile-cashbacks { padding: 18px !important; border-radius: 26px !important; }
  .profile-cashbacks-h { margin: 0 0 18px !important; padding-left: 4px !important; color: var(--mt-ink) !important; font: 950 28px/.95 "Montserrat", sans-serif !important; }
  .cashback-empty { margin: 0 !important; padding: 14px 4px !important; color: var(--mt-ink-soft) !important; }

  .home-league-dock .dock-chip,
  .story-card,
  .trust-rail span,
  .command-row {
    border-color: rgba(255,255,255,.08) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.016)),
      rgba(5,5,5,.72) !important;
    color: var(--mt-ink) !important;
  }

  html body.app-body .mt-bracket-map {
    min-height: 0 !important;
    margin: 10px 0 0 !important;
    padding: 18px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "logo logo"
      "ql qr"
      "left right"
      "semi semi"
      "final final"
      "levels levels" !important;
    align-items: stretch !important;
    gap: 12px !important;
    background: transparent !important;
    overflow: visible !important;
  }

  html body.app-body .mt-bracket-map > *,
  html body.app-body .br-side,
  html body.app-body .br-mid,
  html body.app-body .br-final,
  html body.app-body .br-quarter-label,
  html body.app-body .br-levels,
  html body.app-body .br-slot,
  html body.app-body .br-semi,
  html body.app-body .br-final button {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }

  html body.app-body .br-logo { grid-area: logo !important; }
  html body.app-body .br-quarter-left { grid-area: ql !important; }
  html body.app-body .br-quarter-right { grid-area: qr !important; text-align: right !important; }
  html body.app-body .br-left { grid-area: left !important; }
  html body.app-body .br-right { grid-area: right !important; }
  html body.app-body .br-mid-left { grid-area: semi !important; }
  html body.app-body .br-final { grid-area: final !important; }
  html body.app-body .br-levels { grid-area: levels !important; text-align: center !important; }

  html body.app-body .br-side {
    display: grid !important;
    gap: 8px !important;
  }

  html body.app-body .br-mid-left {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body.app-body .br-slot,
  html body.app-body .br-semi,
  html body.app-body .br-final button {
    min-height: 54px !important;
    padding: 9px 10px !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.04) !important;
    text-align: left !important;
  }

  html body.app-body .br-slot .br-line,
  html body.app-body .br-semi::after,
  html body.app-body .br-final button::before {
    display: none !important;
    content: none !important;
  }

  html body.app-body .br-slot {
    display: grid !important;
    grid-template-columns: 26px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
  }

  html body.app-body .br-num {
    width: 26px !important;
    height: 26px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: var(--mt-ink) !important;
    color: var(--mt-black) !important;
    font: 950 12px/1 "Montserrat", sans-serif !important;
  }

  html body.app-body .br-slot strong,
  html body.app-body .br-semi strong,
  html body.app-body .br-final strong {
    color: var(--mt-ink) !important;
    font: 950 13px/1 "Montserrat", sans-serif !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body.app-body .br-semi,
  html body.app-body .br-final button {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    text-align: center !important;
  }

  html body.app-body .br-semi > span,
  html body.app-body .br-final > span {
    grid-column: 1 / -1 !important;
    margin: 0 0 6px !important;
    color: var(--mt-ink-mute) !important;
    font: 900 11px/1 "Montserrat", sans-serif !important;
  }

  html body.app-body .br-final {
    display: grid !important;
    gap: 8px !important;
    text-align: center !important;
  }

  html body.app-body .br-levels {
    color: var(--mt-ink-soft) !important;
    font: 950 22px/1 "Montserrat", sans-serif !important;
  }
}

/* v224: true final override, kept at EOF. */
/* v225: specificity fixes for legacy mobile overrides. */
@media (max-width: 820px) {
  body.app-body .tab-leagues .league-view-toggle button.is-active,
  body.app-body .tab-shop .shop-choice-tabs button.is-active,
  body.app-body .tab-tasks .tasks-tabs button.is-active,
  body.app-body .tab-forum .forum-tabs button.is-active,
  body.app-body .tab-staking .stake-periods button.is-active,
  body.app-body .tab-staking .staking-periods button.is-active,
  body.app-body .tab-leagues .league-tier-slider button.is-active {
    background: var(--mt-ink) !important;
    background-image: none !important;
    color: var(--mt-black) !important;
    box-shadow: none !important;
  }

  body.app-body .tab-leagues .league-map > .section-row {
    display: none !important;
  }

  body.app-body .tab-leagues .league-view-toggle {
    margin-top: 8px !important;
    margin-bottom: 18px !important;
  }
}
@media (max-width: 820px) {
  body.app-body .tab {
    padding-top: 24px !important;
  }

  body.app-body .tab-home {
    padding-top: 0 !important;
  }

  body.app-body .tab-refs,
  body.app-body [data-nav-drawer] [data-tab="refs"],
  body.app-body .command-row[data-target="refs"],
  body.app-body .command-row[data-tab="refs"],
  body.app-body .app-bnav [data-tab="refs"] {
    display: none !important;
  }

  html body.app-body > nav.app-bnav.app-bnav.app-bnav {
    grid-template-columns: repeat(6, 1fr) !important;
    align-items: center !important;
    justify-items: center !important;
    padding: 7px !important;
    gap: 7px !important;
    overflow: hidden !important;
  }

  html body.app-body > nav.app-bnav.app-bnav.app-bnav::before {
    width: 54px !important;
    height: 54px !important;
    top: 7px !important;
    left: calc(7px + var(--nav-index, 0) * ((100% - 14px) / 6)) !important;
    transform: translateX(calc((((100% - 14px) / 6) - 54px) / 2)) !important;
    border-radius: 999px !important;
    transition: left 460ms cubic-bezier(.16, 1, .3, 1), transform 460ms cubic-bezier(.16, 1, .3, 1) !important;
  }

  body.app-body .league-view-toggle,
  body.app-body .shop-choice-tabs,
  body.app-body .tasks-tabs,
  body.app-body .task-tabs,
  body.app-body .forum-tabs,
  body.app-body .stake-periods,
  body.app-body .staking-periods,
  body.app-body .league-tier-slider {
    height: 56px !important;
    min-height: 56px !important;
    margin: 10px 0 28px !important;
    padding: 5px !important;
    display: grid !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.018)), rgba(0,0,0,.84) !important;
    box-shadow: 0 14px 28px rgba(0,0,0,.36) !important;
    overflow: hidden !important;
  }

  body.app-body .league-view-toggle button,
  body.app-body .shop-choice-tabs button,
  body.app-body .tasks-tabs button,
  body.app-body .task-tabs button,
  body.app-body .forum-tabs button,
  body.app-body .stake-periods button,
  body.app-body .staking-periods button,
  body.app-body .league-tier-slider button {
    height: 46px !important;
    min-height: 46px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: rgba(247,247,242,.55) !important;
    box-shadow: none !important;
    font: 900 13px/1 "Montserrat", sans-serif !important;
  }

  body.app-body .league-view-toggle button.is-active,
  body.app-body .shop-choice-tabs button.is-active,
  body.app-body .tasks-tabs button.is-active,
  body.app-body .task-tabs button.is-active,
  body.app-body .forum-tabs button.is-active,
  body.app-body .stake-periods button.is-active,
  body.app-body .staking-periods button.is-active,
  body.app-body .staking-periods button[aria-pressed="true"],
  body.app-body .league-tier-slider button.is-active {
    background: var(--mt-ink) !important;
    color: var(--mt-black) !important;
    box-shadow: none !important;
  }

  body.app-body .league-view-toggle::before,
  body.app-body .league-view-toggle::after,
  body.app-body .shop-choice-tabs::before,
  body.app-body .shop-choice-tabs::after,
  body.app-body .tasks-tabs::before,
  body.app-body .tasks-tabs::after,
  body.app-body .task-tabs::before,
  body.app-body .task-tabs::after,
  body.app-body .forum-tabs::before,
  body.app-body .forum-tabs::after,
  body.app-body .stake-periods::before,
  body.app-body .stake-periods::after,
  body.app-body .staking-periods::before,
  body.app-body .staking-periods::after,
  body.app-body .league-tier-slider::before,
  body.app-body .league-tier-slider::after {
    display: none !important;
    content: none !important;
  }

  body.app-body .tab-leagues .section-row,
  body.app-body .league-map > .section-row {
    margin: 0 0 18px !important;
    padding: 0 !important;
  }

  body.app-body .league-map .section-h {
    margin: 0 0 18px !important;
    font: 950 28px/.95 "Montserrat", sans-serif !important;
    color: var(--mt-ink) !important;
  }

  html body.app-body .mt-bracket-map {
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 16px 12px 92px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "logo logo"
      "ql qr"
      "left right"
      "semi semi"
      "final final"
      "levels levels" !important;
    gap: 10px !important;
    overflow: visible !important;
    background: transparent !important;
  }

  html body.app-body .mt-bracket-map > *,
  html body.app-body .br-side,
  html body.app-body .br-mid,
  html body.app-body .br-final,
  html body.app-body .br-quarter-label,
  html body.app-body .br-levels,
  html body.app-body .br-slot,
  html body.app-body .br-semi,
  html body.app-body .br-final button {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }

  html body.app-body .br-logo {
    grid-area: logo !important;
    min-height: 44px !important;
    margin-bottom: 2px !important;
    font-size: 28px !important;
    line-height: .9 !important;
  }

  html body.app-body .br-logo span {
    display: inline !important;
  }

  html body.app-body .br-quarter-left { grid-area: ql !important; }
  html body.app-body .br-quarter-right { grid-area: qr !important; text-align: right !important; }
  html body.app-body .br-left { grid-area: left !important; }
  html body.app-body .br-right { grid-area: right !important; }
  html body.app-body .br-mid-left { grid-area: semi !important; }
  html body.app-body .br-final { grid-area: final !important; }
  html body.app-body .br-levels { grid-area: levels !important; text-align: center !important; }

  html body.app-body .br-side,
  html body.app-body .br-mid-left,
  html body.app-body .br-final {
    display: grid !important;
    gap: 8px !important;
  }

  html body.app-body .br-mid-left {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body.app-body .br-slot,
  html body.app-body .br-semi,
  html body.app-body .br-final button {
    min-height: 48px !important;
    padding: 8px !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 15px !important;
    background: rgba(255,255,255,.04) !important;
  }

  html body.app-body .br-slot {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
  }

  html body.app-body .br-slot .br-line,
  html body.app-body .br-semi::after,
  html body.app-body .br-final button::before {
    display: none !important;
    content: none !important;
  }

  html body.app-body .br-num {
    width: 22px !important;
    height: 22px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: var(--mt-ink) !important;
    color: var(--mt-black) !important;
    font: 950 11px/1 "Montserrat", sans-serif !important;
  }

  html body.app-body .br-slot strong,
  html body.app-body .br-semi strong,
  html body.app-body .br-final strong {
    color: var(--mt-ink) !important;
    font: 950 12px/1 "Montserrat", sans-serif !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.app-body .staking-head,
  body.app-body .staking-shell header,
  body.app-body .forum-head,
  body.app-body .forum-shell header {
    display: block !important;
    margin: 0 0 14px !important;
  }

  body.app-body .staking-title,
  body.app-body .staking-shell h1,
  body.app-body .forum-title,
  body.app-body .forum-shell h1 {
    display: block !important;
    margin: 0 0 10px !important;
    font: 950 clamp(34px, 10vw, 48px)/.92 "Montserrat", sans-serif !important;
    letter-spacing: -.03em !important;
    color: var(--mt-ink) !important;
  }

  body.app-body .stake-ca {
    margin: 0 0 10px !important;
  }

  body.app-body .staking-shell form,
  body.app-body .stake-form {
    display: grid !important;
    grid-template-columns: 1fr auto auto !important;
    gap: 8px !important;
    align-items: center !important;
  }

  body.app-body .staking-shell input,
  body.app-body .stake-input {
    min-width: 0 !important;
    width: 100% !important;
  }

  body.app-body .forum-post {
    grid-template-columns: 58px 1fr auto !important;
    text-align: left !important;
  }

  body.app-body .ai-shell {
    padding-top: 14px !important;
  }

  body.app-body .ai-head {
    display: none !important;
  }

  body.app-body .ai-chat {
    padding-top: 0 !important;
  }

  body.app-body .ai-attach,
  body.app-body .ai-send {
    color: var(--mt-black) !important;
    opacity: 1 !important;
  }

  body.app-body .ai-attach svg,
  body.app-body .ai-send svg,
  body.app-body .ai-attach path,
  body.app-body .ai-send path {
    fill: currentColor !important;
    stroke: currentColor !important;
  }

  body.app-body .tasks-hero {
    padding: 0 !important;
    margin: 0 0 18px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.app-body .tasks-hero h1 {
    margin: 0 0 18px !important;
    font: 950 clamp(34px, 10vw, 54px)/.86 "Montserrat", sans-serif !important;
    letter-spacing: -.04em !important;
    color: var(--mt-ink) !important;
  }

  body.app-body .tasks-list {
    padding-bottom: 86px !important;
  }

  body.app-body .task-card {
    grid-template-columns: 1fr auto !important;
    min-height: 72px !important;
  }

  body.app-body .roulette-shell {
    padding-top: 14px !important;
  }

  body.app-body .roulette-title,
  body.app-body .roulette-shell h1 {
    display: none !important;
  }

  body.app-body .profile-shell {
    padding-top: 10px !important;
    padding-bottom: 92px !important;
  }

  body.app-body .profile-scoreboard {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.app-body .profile-scoreboard article {
    min-height: 68px !important;
    padding: 12px 10px !important;
  }

  body.app-body .profile-scoreboard strong {
    font-size: 26px !important;
  }

  body.app-body .profile-cashbacks-h {
    padding-left: 8px !important;
  }
}

/* v228: final mobile spacing and shop simplification; keep this block at EOF. */
body.app-body {
  --mt-header-offset: 132px;
}

body.app-body main#main.app-main {
  padding-top: var(--mt-header-offset) !important;
}

body.app-body main#main.app-main > .tab {
  padding-top: 24px !important;
}

body.app-body .shop-choice-tabs,
body.app-body .league-view-toggle,
body.app-body .tasks-tabs,
body.app-body .forum-tabs,
body.app-body .stake-periods,
body.app-body .staking-periods {
  margin: 0 0 30px !important;
}

body.app-body .tab-leagues .league-view-toggle {
  margin-bottom: 38px !important;
}

body.app-body .tab-leagues .league-map .section-row {
  margin: 0 0 24px !important;
}

body.app-body .tab-leagues .mt-bracket-map {
  margin-top: 10px !important;
}

body.app-body .tab-staking .staking-shell {
  display: grid !important;
  gap: 16px !important;
}

body.app-body .tab-staking .stake-input {
  margin: 12px 0 0 !important;
}

body.app-body .tab-shop .shop-hero,
body.app-body .tab-shop .shop-status-grid,
body.app-body .tab-shop .shop-included,
body.app-body .tab-shop .shop-pack-section {
  display: none !important;
}

body.app-body .tab-shop .shop-choice {
  display: grid !important;
  gap: 24px !important;
  width: min(100%, 430px) !important;
  margin-inline: auto !important;
  padding: 0 10px 118px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body .tab-shop .shop-choice::before,
body.app-body .tab-shop .shop-choice::after,
body.app-body .tab-shop .shop-choice-card::before,
body.app-body .tab-shop .shop-choice-card::after {
  display: none !important;
  content: none !important;
}

body.app-body .tab-shop .shop-choice-tabs,
body.app-body .tab-shop [data-shop-choice-tabs] {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  height: 66px !important;
  padding: 6px !important;
  border-radius: 26px !important;
  background: rgba(4, 12, 18, .82) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.34) !important;
  overflow: hidden !important;
}

body.app-body .tab-shop .shop-choice-tabs .slider-indicator,
body.app-body .tab-shop [data-shop-choice-tabs] .slider-indicator {
  border-radius: 21px !important;
  background: linear-gradient(180deg, #fffdf8, #c9e4f7) !important;
  box-shadow: none !important;
}

body.app-body .tab-shop .shop-choice-tabs button,
body.app-body .tab-shop [data-shop-choice-tabs] button {
  height: 54px !important;
  min-width: 0 !important;
  border-radius: 21px !important;
  background: transparent !important;
  border: 0 !important;
  color: rgba(255,255,255,.52) !important;
  box-shadow: none !important;
  transform: none !important;
}

body.app-body .tab-shop .shop-choice-tabs button.is-active,
body.app-body .tab-shop [data-shop-choice-tabs] button.is-active {
  color: #050505 !important;
  background: transparent !important;
}

body.app-body .tab-shop .shop-choice-tabs button span {
  font: 950 23px/1 "Montserrat", sans-serif !important;
}

body.app-body .tab-shop .shop-choice-tabs button small {
  font: 900 11px/1.05 "Montserrat", sans-serif !important;
}

body.app-body .tab-shop .shop-choice-card,
body.app-body .tab-shop .shop-choice-card[data-shop-featured] {
  width: 100% !important;
  min-height: 550px !important;
  display: grid !important;
  grid-template-rows: auto auto auto 1fr !important;
  align-content: start !important;
  gap: 22px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.app-body .tab-shop .choice-art {
  width: 100% !important;
  height: clamp(260px, 56vw, 330px) !important;
  border-radius: 28px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(0,0,0,.18) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  overflow: hidden !important;
}

body.app-body .tab-shop .choice-art img {
  width: min(92%, 360px) !important;
  max-height: 82% !important;
  object-fit: contain !important;
  transform: scale(1.15) !important;
}

body.app-body .tab-shop .choice-copy {
  padding: 0 18px !important;
}

body.app-body .tab-shop .choice-copy h2 {
  margin: 0 0 8px !important;
  color: var(--mt-ink) !important;
  font: 950 clamp(30px, 8vw, 42px)/.88 "Montserrat", sans-serif !important;
  letter-spacing: -.04em !important;
}

body.app-body .tab-shop .choice-copy p {
  margin: 0 !important;
  color: rgba(255,255,255,.72) !important;
  font: 700 14px/1.45 "Lato", sans-serif !important;
}

body.app-body .tab-shop .choice-buy {
  padding: 0 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

body.app-body .tab-shop .choice-buy strong {
  color: var(--mt-ink) !important;
  font: 950 34px/1 "Montserrat", sans-serif !important;
}

body.app-body .tab-shop .choice-action {
  min-height: 58px !important;
  padding: 0 28px !important;
  border-radius: 20px !important;
  display: inline-grid !important;
  place-items: center !important;
  color: #050505 !important;
  background: linear-gradient(180deg, #fffef8, #d2e9fa) !important;
  border: 0 !important;
  box-shadow: 0 8px 0 rgba(140,180,204,.55) !important;
  font: 950 13px/1 "Montserrat", sans-serif !important;
  text-transform: uppercase !important;
}

body.app-body .tab-shop .choice-tools {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  padding: 0 18px !important;
}

body.app-body .tab-shop .choice-tool {
  min-height: 50px !important;
  border-radius: 18px !important;
  color: #050505 !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: none !important;
  border: 0 !important;
}

body.app-body .tab-shop .choice-symbol {
  min-height: 230px !important;
  border-radius: 28px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--mt-ink) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(95,182,255,.22), transparent 50%),
    rgba(255,255,255,.035) !important;
  font: 950 clamp(56px, 16vw, 86px)/1 "Montserrat", sans-serif !important;
  letter-spacing: -.06em !important;
}

body.app-body .tab-shop .choice-buy-stack {
  display: grid !important;
  grid-template-columns: 1fr !important;
}

body.app-body .tab-shop .ton-topup-box,
body.app-body .tab-shop .ton-topup-receive {
  margin: 0 18px !important;
  min-height: 62px !important;
  padding: 12px 16px !important;
  border-radius: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

body.app-body .tab-shop .ton-topup-box span,
body.app-body .tab-shop .ton-topup-receive span {
  color: rgba(255,255,255,.58) !important;
  font: 900 11px/1 "Montserrat", sans-serif !important;
  text-transform: uppercase !important;
}

body.app-body .tab-shop .ton-topup-box input {
  width: 130px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--mt-ink) !important;
  text-align: right !important;
  font: 950 28px/1 "Montserrat", sans-serif !important;
}

body.app-body .tab-shop .ton-topup-receive strong {
  color: #5FB6FF !important;
  font: 950 24px/1 "Montserrat", sans-serif !important;
}

/* v229: clamp shop internals to the phone column after legacy wide rules. */
body.app-body .tab-shop .shop-choice > *,
body.app-body .tab-shop .shop-choice-tabs,
body.app-body .tab-shop [data-shop-choice-tabs],
body.app-body .tab-shop .shop-choice-card,
body.app-body .tab-shop .shop-choice-card[data-shop-featured],
body.app-body .tab-shop .choice-art,
body.app-body .tab-shop .choice-copy,
body.app-body .tab-shop .choice-buy,
body.app-body .tab-shop .choice-tools,
body.app-body .tab-shop .ton-topup-box,
body.app-body .tab-shop .ton-topup-receive {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

body.app-body .tab-shop .shop-choice-tabs button,
body.app-body .tab-shop [data-shop-choice-tabs] button {
  width: auto !important;
  max-width: none !important;
}

/* v230: reset legacy shop grid/positioning that caused overlap. */
body.app-body .tab-shop .shop-choice {
  padding-top: 0 !important;
  align-content: start !important;
}

body.app-body .tab-shop .shop-choice-tabs,
body.app-body .tab-shop [data-shop-choice-tabs] {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  margin-top: 0 !important;
  margin-block-start: 0 !important;
  transform: none !important;
}

body.app-body .tab-shop .shop-choice-card,
body.app-body .tab-shop .shop-choice-card[data-shop-featured] {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto auto auto !important;
  grid-auto-flow: row !important;
  grid-template-areas: none !important;
  align-items: start !important;
}

body.app-body .tab-shop .choice-art,
body.app-body .tab-shop .choice-copy,
body.app-body .tab-shop .choice-buy,
body.app-body .tab-shop .choice-tools,
body.app-body .tab-shop .choice-symbol,
body.app-body .tab-shop .ton-topup-box,
body.app-body .tab-shop .ton-topup-receive {
  position: relative !important;
  inset: auto !important;
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  grid-area: auto !important;
  transform: none !important;
}

body.app-body .tab-shop .choice-art img {
  width: min(112%, 430px) !important;
  max-width: none !important;
}

/* v231: balanced top rhythm after verification. */
body.app-body {
  --mt-header-offset: 118px;
}

body.app-body main#main.app-main > .tab {
  padding-top: 18px !important;
}

body.app-body .tab-leagues .league-hero {
  display: none !important;
}

/* ================================================================
   v=261 final — close button SVG + rewards page open animation
   ================================================================ */
body.app-body .nav-drawer-close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: rgba(255,255,255,0.18) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transition: background 0.18s ease, transform 0.18s ease !important;
}
body.app-body .nav-drawer-close:hover { background: rgba(255,255,255,0.14) !important; }
body.app-body .nav-drawer-close:active { transform: scale(0.92) !important; }
body.app-body .nav-drawer-close svg {
  width: 22px !important;
  height: 22px !important;
  fill: currentColor !important;
  pointer-events: none !important;
}

/* Анимация открытия страницы Путь к голосу (rewards) — fade + rise */
@keyframes mt-rewards-rise {
  0%   { opacity: 0; transform: translateY(20px) scale(0.985); filter: blur(6px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes mt-rewards-step-pop {
  0%   { opacity: 0; transform: scale(0.4); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
/* Анимации rewards играются ТОЛЬКО при .is-entering (первый visit таба).
   Без is-entering — никакой анимации. Это убирает повторное проигрывание
   когда пользователь возвращается на таб или когда таб ре-рендерится. */
body.app-body .tab-rewards.is-entering .checkin-step,
body.app-body .tab-rewards.is-entering .reward-card,
body.app-body .tab-rewards.is-entering .prize-pool-banner {
  animation: mt-rewards-step-pop 0.5s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
body.app-body .tab-rewards.is-entering .checkin-step:nth-child(2)  { animation-delay: 60ms !important; }
body.app-body .tab-rewards.is-entering .checkin-step:nth-child(3)  { animation-delay: 110ms !important; }
body.app-body .tab-rewards.is-entering .checkin-step:nth-child(4)  { animation-delay: 160ms !important; }
body.app-body .tab-rewards.is-entering .checkin-step:nth-child(5)  { animation-delay: 210ms !important; }
body.app-body .tab-rewards.is-entering .checkin-step:nth-child(6)  { animation-delay: 260ms !important; }
body.app-body .tab-rewards.is-entering .checkin-step:nth-child(7)  { animation-delay: 310ms !important; }
body.app-body .tab-rewards.is-entering .checkin-step:nth-child(8)  { animation-delay: 360ms !important; }
body.app-body .tab-rewards.is-entering .checkin-step:nth-child(9)  { animation-delay: 410ms !important; }
body.app-body .tab-rewards.is-entering .checkin-step:nth-child(10) { animation-delay: 460ms !important; }
body.app-body .tab-rewards.is-entering .checkin-step:nth-child(11) { animation-delay: 510ms !important; }

/* SVG-путь — линия "наливается" только при первом входе. */
@keyframes mt-checkin-path-fill {
  from { stroke-dashoffset: 1500; }
  to   { stroke-dashoffset: var(--mt-checkin-target, 1500); }
}
body.app-body .tab-rewards.is-entering [data-checkin-path-fill] {
  animation: mt-checkin-path-fill 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both !important;
}

/* ================================================================
   v=262 final — 3D coverflow flip on vote-card swipe
   ================================================================ */
body.app-body .arena-section,
body.app-body [data-arena],
body.app-body .home-arena {
  perspective: 1400px !important;
  perspective-origin: 50% 40% !important;
}

body.app-body [data-vs-card] {
  transform-style: preserve-3d !important;
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 220ms ease,
              filter 220ms ease !important;
  will-change: transform, opacity, filter !important;
}

/* EXIT — карточка уезжает с поворотом и уходом вглубь */
body.app-body [data-vs-card].vs-flip-out-left {
  animation: mt-card-flip-out-left 320ms cubic-bezier(0.55, 0, 0.7, 0.2) both !important;
}
body.app-body [data-vs-card].vs-flip-out-right {
  animation: mt-card-flip-out-right 320ms cubic-bezier(0.55, 0, 0.7, 0.2) both !important;
}

/* ENTER — следующая карточка прилетает с поворотом */
body.app-body [data-vs-card].vs-enter-left {
  animation: mt-card-flip-in-from-right 460ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
body.app-body [data-vs-card].vs-enter-right {
  animation: mt-card-flip-in-from-left 460ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

@keyframes mt-card-flip-out-left {
  0%   {
    transform: perspective(1400px) rotateY(0) translateX(0) translateZ(0) scale(1);
    opacity: 1;
    filter: blur(0) brightness(1);
  }
  100% {
    transform: perspective(1400px) rotateY(-58deg) translateX(-46%) translateZ(-220px) scale(0.85);
    opacity: 0;
    filter: blur(2px) brightness(0.6);
  }
}
@keyframes mt-card-flip-out-right {
  0%   {
    transform: perspective(1400px) rotateY(0) translateX(0) translateZ(0) scale(1);
    opacity: 1;
    filter: blur(0) brightness(1);
  }
  100% {
    transform: perspective(1400px) rotateY(58deg) translateX(46%) translateZ(-220px) scale(0.85);
    opacity: 0;
    filter: blur(2px) brightness(0.6);
  }
}
@keyframes mt-card-flip-in-from-right {
  0%   {
    transform: perspective(1400px) rotateY(58deg) translateX(46%) translateZ(-220px) scale(0.85);
    opacity: 0;
    filter: blur(2px) brightness(0.6);
  }
  60%  {
    transform: perspective(1400px) rotateY(-6deg) translateX(-3%) translateZ(20px) scale(1.02);
    opacity: 1;
    filter: blur(0) brightness(1.05);
  }
  100% {
    transform: perspective(1400px) rotateY(0) translateX(0) translateZ(0) scale(1);
    opacity: 1;
    filter: blur(0) brightness(1);
  }
}
@keyframes mt-card-flip-in-from-left {
  0%   {
    transform: perspective(1400px) rotateY(-58deg) translateX(-46%) translateZ(-220px) scale(0.85);
    opacity: 0;
    filter: blur(2px) brightness(0.6);
  }
  60%  {
    transform: perspective(1400px) rotateY(6deg) translateX(3%) translateZ(20px) scale(1.02);
    opacity: 1;
    filter: blur(0) brightness(1.05);
  }
  100% {
    transform: perspective(1400px) rotateY(0) translateX(0) translateZ(0) scale(1);
    opacity: 1;
    filter: blur(0) brightness(1);
  }
}

/* Лёгкая 3D-тень при покое — намек на объём */
body.app-body [data-vs-card] {
  box-shadow:
    0 28px 60px rgba(10,132,255,0.18),
    0 8px 16px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* Когда пользователь свайпает пальцем — отключаем easing */
body.app-body [data-vs-card][style*="translateX"] {
  transition: none !important;
}

/* ================================================================
   v=263 final — fix lottery sheet open animation + backdrop
   ================================================================ */
html body.app-body .lottery-create-sheet {
  position: fixed !important;
  inset: auto 10px calc(8px + env(safe-area-inset-bottom, 0px)) 10px !important;
  z-index: 1200 !important;
  width: min(calc(100vw - 20px), 430px) !important;
  margin: 0 auto !important;
  max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box !important;
  background: #fff !important;
  color: #050607 !important;
  border-radius: 28px 28px 22px 22px !important;
  padding: 16px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  box-shadow: 0 -22px 70px rgba(0,0,0,.5), 0 -2px 0 rgba(255,255,255,0.1) inset !important;
  transform: translate3d(0, calc(100% + 60px), 0) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition:
    transform 0.46s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.34s ease-out !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 7px !important;
  align-content: start !important;
}
html body.app-body .lottery-create-sheet[hidden] {
  display: none !important;
}
html body.app-body .lottery-create-sheet.is-open,
html body.app-body .lottery-create-sheet.is-opening {
  transform: translate3d(0, 0, 0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
html body.app-body .lottery-create-sheet.is-closing {
  transform: translate3d(0, calc(100% + 60px), 0) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Backdrop через body class — мягкий fade-in вместо мгновенного «мутного экрана» */
body.app-body.is-lottery-sheet-open::after {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.62) !important;
  backdrop-filter: blur(6px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(140%) !important;
  z-index: 1199 !important;
  pointer-events: none !important;
  animation: mt-lottery-backdrop-fade-in 0.32s ease-out both !important;
}
@keyframes mt-lottery-backdrop-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

body.app-body .roulette-track.is-fast-spinning {
  animation: mt-roulette-fast-roll var(--mt-roulette-fast-duration, 760ms) linear infinite !important;
}

@keyframes mt-roulette-fast-roll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-1 * var(--mt-roulette-fast-distance, 3200px)), 0, 0); }
}

/* ================================================================
   v=263 final — fix double page entrance animation
   Гарантируем что .is-entering играет animation ровно ОДИН раз и
   selector-cascade не перекрывается с .is-active.
   ================================================================ */
body.app-body .tab:not(.is-entering) {
  animation: none !important;
}
body.app-body .tab.is-active:not(.is-entering) .checkin-step,
body.app-body .tab.is-active:not(.is-entering) .reward-card,
body.app-body .tab.is-active:not(.is-entering) .prize-pool-banner,
body.app-body .tab.is-active:not(.is-entering) [data-checkin-path-fill] {
  animation: none !important;
}

/* ================================================================
   v=264 final — remove blue borders around roulette result modal
   ================================================================ */
body.app-body .roulette-modal-card,
html body.app-body .roulette-modal-card {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04) inset !important;
}
body.app-body .roulette-modal-glow,
html body.app-body .roulette-modal-glow {
  display: none !important;
}
body.app-body .roulette-modal-img,
body.app-body .roulette-modal-lottie,
body.app-body [data-roulette-modal-lottie],
body.app-body .roulette-modal-card [data-roulette-modal-lottie],
html body.app-body .roulette-modal-img,
html body.app-body .roulette-modal-lottie,
html body.app-body [data-roulette-modal-lottie] {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ================================================================
   v=265 final — fix unclickable buttons in Telegram WebView
   Children of action buttons must NOT intercept tap events,
   otherwise e.target lands on SVG/span and closest() may fail
   in some WebKit builds.
   ================================================================ */
body.app-body .task-btn,
body.app-body .reward-node,
body.app-body .checkin-btn,
body.app-body .roulette-spin-btn,
body.app-body .home-cta,
body.app-body .home-action-row button,
body.app-body .widget-vote-btn {
  -webkit-tap-highlight-color: rgba(95,182,255,.18) !important;
  touch-action: manipulation !important;
  position: relative !important;
}

body.app-body .task-btn > *,
body.app-body .reward-node > *,
body.app-body .checkin-btn > *,
body.app-body .roulette-spin-btn > *,
body.app-body .home-cta > *,
body.app-body .widget-vote-btn > * {
  pointer-events: none !important;
}

/* Ensure no overlay above the buttons accidentally swallows taps */
body.app-body .task-btn:not(.is-done):not(:disabled),
body.app-body .reward-node:not(.is-claimed):not(:disabled),
body.app-body .checkin-btn:not(:disabled),
body.app-body .roulette-spin-btn:not(:disabled) {
  z-index: 2 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* ================================================================
   v=266 — kill blue tap-highlight + ensure all buttons are clickable
   ================================================================ */
html body.app-body * {
  -webkit-tap-highlight-color: transparent !important;
}
html body.app-body .task-btn,
html body.app-body .reward-node,
html body.app-body .checkin-btn,
html body.app-body .roulette-spin-btn,
html body.app-body .home-cta,
html body.app-body .home-action-row button,
html body.app-body .widget-vote-btn,
html body.app-body .admin-tab-btn,
html body.app-body .admin-action,
html body.app-body button[data-admin-launch],
html body.app-body button[data-admin-tournament-launch],
html body.app-body .lottery-create-sticky,
html body.app-body [data-lottery-create-open] {
  -webkit-tap-highlight-color: transparent !important;
}

/* ================================================================
   v=267 — task card claim-out animation
   Когда юзер нажимает «Забрать» и backend подтверждает успех,
   класс is-task-claimed-out даётся на .task-card → блок плавно
   складывается (max-height + opacity + scale) → DOM-узел удаляется.
   ================================================================ */
html body.app-body .task-card {
  transition:
    max-height 0.48s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.36s ease,
    transform 0.36s cubic-bezier(0.4, 0, 0.2, 1),
    margin 0.48s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.48s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: max-height, opacity, transform !important;
}

html body.app-body .task-card.is-task-claimed-out {
  max-height: 0 !important;
  opacity: 0 !important;
  transform: translateX(20%) scale(0.92) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  pointer-events: none !important;
  border-color: transparent !important;
  filter: blur(2px) !important;
}

/* ================================================================
   v=246 — empty-tournament empty-state + admin clear button
   ================================================================ */

/* Bracket: «Пока нет токенов» */
html body.app-body .league-bracket-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 60px 24px !important;
  text-align: center !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, rgba(95,182,255,0.06), rgba(95,182,255,0.02)) !important;
  border: 1px dashed rgba(95,182,255,0.25) !important;
}
html body.app-body .league-bracket-empty-icon {
  font-size: 56px !important;
  filter: drop-shadow(0 0 24px rgba(95,182,255,0.4)) !important;
  opacity: 0.85 !important;
}
html body.app-body .league-bracket-empty h3 {
  margin: 0 !important;
  font: 900 22px/1.1 "Montserrat", sans-serif !important;
  color: #f7f7f2 !important;
}
html body.app-body .league-bracket-empty p {
  margin: 0 !important;
  font: 500 14px/1.4 "Lato", sans-serif !important;
  color: rgba(247,247,242,0.65) !important;
  max-width: 280px !important;
}

/* Home arena когда турнир пуст — приглушаем без полного скрытия */
html body.app-body [data-active-widget].is-empty-bracket {
  opacity: 0.55 !important;
}

/* Admin: кнопка «Очистить все турниры» — красная, чтобы не путать с Submit */
html body.app-body .admin-tournament-clear-btn {
  display: block !important;
  width: 100% !important;
  margin-top: 12px !important;
  padding: 14px 18px !important;
  border: 1px solid rgba(255,80,80,0.4) !important;
  border-radius: 16px !important;
  background: rgba(255,60,60,0.12) !important;
  color: #ff8a8a !important;
  font: 800 14px/1.2 "Montserrat", sans-serif !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.1s ease !important;
}
html body.app-body .admin-tournament-clear-btn:hover {
  background: rgba(255,60,60,0.22) !important;
}
html body.app-body .admin-tournament-clear-btn:active {
  transform: scale(0.97) !important;
}
html body.app-body .admin-tournament-clear-btn:disabled {
  opacity: 0.5 !important;
  cursor: progress !important;
}

/* ================================================================
   v=247 — admin bracket-size chip selector (2/4/8 tokens)
   ================================================================ */
html body.app-body .admin-bracket-size {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 4px 0 18px !important;
  padding: 14px !important;
  border-radius: 16px !important;
  background: rgba(95,182,255,0.06) !important;
  border: 1px dashed rgba(95,182,255,0.25) !important;
}
html body.app-body .admin-bracket-size-label {
  flex: 1 1 100% !important;
  font: 800 12px/1 "Montserrat", sans-serif !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: rgba(247,247,242,0.7) !important;
  margin-bottom: 4px !important;
}
html body.app-body .admin-bracket-chip {
  flex: 1 1 calc(25% - 6px) !important;
  min-width: 64px !important;
  padding: 10px 6px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(247,247,242,0.12) !important;
  background: rgba(247,247,242,0.04) !important;
  color: rgba(247,247,242,0.78) !important;
  font: 700 13px/1.1 "Montserrat", sans-serif !important;
  cursor: pointer !important;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.1s ease !important;
}
html body.app-body .admin-bracket-chip:hover {
  background: rgba(95,182,255,0.12) !important;
  border-color: rgba(95,182,255,0.4) !important;
}
html body.app-body .admin-bracket-chip.is-active {
  background: linear-gradient(180deg, rgba(95,182,255,0.85), rgba(95,182,255,0.65)) !important;
  border-color: rgba(95,182,255,0.85) !important;
  color: #050607 !important;
  font-weight: 900 !important;
  box-shadow: 0 6px 18px rgba(95,182,255,0.35) !important;
}
html body.app-body .admin-bracket-chip:active {
  transform: scale(0.95) !important;
}
/* v249: reliable forum file picker inside Telegram WebView. */
body.app-body .forum-logo-upload {
  position: relative !important;
  min-height: 54px !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 8px 8px 16px !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 18px !important;
  background: rgba(0,0,0,.34) !important;
}

body.app-body .forum-logo-upload input[type="file"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  inset: auto auto 0 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  pointer-events: none !important;
}

body.app-body .forum-logo-upload > span {
  min-width: 0 !important;
  color: var(--mt-ink) !important;
  font: 900 13px/1.15 "Montserrat", sans-serif !important;
}

body.app-body .forum-file-trigger {
  position: relative !important;
  z-index: 2 !important;
  pointer-events: none !important;
  display: inline-grid !important;
  place-items: center !important;
  min-width: 104px !important;
  min-height: 42px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--mt-blue) !important;
  color: #fff !important;
  box-shadow: none !important;
  font: 950 13px/1 "Montserrat", sans-serif !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}

body.app-body .forum-file-trigger.has-file {
  background: #fff !important;
  color: #050607 !important;
}

body.app-body .forum-file-preview {
  min-height: 72px !important;
  display: grid !important;
  grid-template-columns: 58px 1fr !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.06) !important;
  color: var(--mt-ink) !important;
}

body.app-body .forum-file-preview[hidden] {
  display: none !important;
}

body.app-body .forum-file-preview img,
body.app-body .forum-file-preview video {
  width: 58px !important;
  height: 58px !important;
  object-fit: cover !important;
  border-radius: 14px !important;
  background: #050607 !important;
}

body.app-body .forum-file-preview span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--mt-ink-soft) !important;
  font: 800 12px/1.2 "Lato", sans-serif !important;
}

/* v251: forum feed messages stay inside phone viewport, links are readable/clickable. */
body.app-body .forum-chat-feed {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  gap: 12px !important;
  overflow: visible !important;
}

body.app-body .forum-message,
body.app-body .forum-message-post,
body.app-body .forum-message-token {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 10px !important;
  overflow: visible !important;
}

body.app-body .forum-avatar {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

body.app-body .forum-bubble {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

body.app-body .forum-message-head {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 8px !important;
}

body.app-body .forum-token-line {
  max-width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 8px !important;
}

body.app-body .forum-message-head > div,
body.app-body .forum-token-line > div {
  min-width: 0 !important;
}

body.app-body .forum-message-head strong,
body.app-body .forum-message-head span,
body.app-body .forum-token-line strong,
body.app-body .forum-token-line small {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.app-body .forum-bubble p {
  max-width: 100% !important;
  margin: 10px 0 0 !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  color: var(--mt-ink-soft) !important;
}

body.app-body .forum-text-link {
  position: relative !important;
  z-index: 5 !important;
  pointer-events: auto !important;
  color: #5fb6ff !important;
  font-weight: 900 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 3px !important;
  overflow-wrap: anywhere !important;
  word-break: break-all !important;
  -webkit-tap-highlight-color: transparent !important;
}

body.app-body .forum-text-link:visited,
body.app-body .forum-text-link:hover,
body.app-body .forum-text-link:active {
  color: #5fb6ff !important;
}

body.app-body .forum-message-actions {
  max-width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: visible !important;
}

body.app-body .forum-message-actions > * {
  max-width: 100% !important;
}

body.app-body .forum-post-media {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 18px !important;
  object-fit: cover !important;
  overflow: hidden !important;
}

/* v253: staking is temporarily closed. Keep the tab inert and readable. */
body.app-body .staking-shell.staking-coming-soon {
  min-height: calc(100dvh - 210px) !important;
  width: 100% !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 20px 112px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.app-body .staking-soon-view {
  width: 100% !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
}

body.app-body .staking-soon-view h1 {
  margin: 0 !important;
  color: #fff !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: clamp(44px, 15vw, 72px) !important;
  font-weight: 950 !important;
  line-height: .9 !important;
  letter-spacing: 0 !important;
}