/* Phase 5O - Original Myteria shell production fix.
   Goal: restore the old store shell behavior without resurrecting the legacy React app.
   - Old-style text header, no login CTA, Bundles nav included
   - Myteria background image restored
   - Blobs/party art scroll with the document instead of acting fixed
   - Old-style simple footer over Blob3
   - Less glass, stronger production-looking responsive behavior
*/

:root {
  --myteria-shell-bg: #210735;
  --myteria-shell-pink: #fa5bc7;
  --myteria-shell-purple: #6237f7;
  --myteria-shell-mobile: #525865;
  --myteria-shell-text: #ffffff;
  --myteria-shell-muted: #c9c9d6;
}

html {
  background: var(--myteria-shell-bg) !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
}

html::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -4 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(31, 13, 63, .70), rgba(35, 7, 53, .82)),
    url('/assets/images/brand/myteria-bg.webp') center / cover no-repeat !important;
  filter: none !important;
}

html::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -3 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 78% 18%, rgba(98, 55, 247, .28), transparent 34rem),
    radial-gradient(circle at 16% 28%, rgba(250, 91, 199, .14), transparent 28rem) !important;
}

body {
  background: transparent !important;
  color: #fff !important;
  overflow-x: hidden !important;
  min-height: 100vh !important;
}

#root,
main#root,
.page.-home,
.page.-cart,
.legal-shell {
  position: relative !important;
  isolation: isolate !important;
  overflow-x: clip !important;
  min-height: 100vh !important;
}

/* Document-scrolling decoration layer. This intentionally does not use fixed positioning. */
.bg,
.bg.-desktop,
.legal-bg {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  min-height: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  background: transparent !important;
}

.bg *,
.legal-bg *,
.blobs {
  position: absolute !important;
  pointer-events: none !important;
  user-select: none !important;
}

.blobs {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.steve,
.legal-bg .steve {
  top: 150px !important;
  right: 8vw !important;
  width: min(600px, 34vw) !important;
  max-width: 600px !important;
  height: auto !important;
  opacity: .72 !important;
  z-index: 1 !important;
  filter: saturate(.95) brightness(.88) !important;
  transform: none !important;
}

.blob-1,
.legal-bg .blob-1 {
  top: -2px !important;
  right: 0 !important;
  width: clamp(620px, 52vw, 980px) !important;
  min-width: 560px !important;
  max-width: none !important;
  height: auto !important;
  opacity: .96 !important;
  transform: none !important;
  z-index: 0 !important;
}

.blob-2,
.legal-bg .blob-2 {
  left: -24px !important;
  top: 400px !important;
  width: clamp(260px, 24vw, 460px) !important;
  height: auto !important;
  opacity: .74 !important;
  transform: none !important;
  z-index: 0 !important;
}

.blob-3,
.legal-bg .blob-3 {
  right: 0 !important;
  bottom: 0 !important;
  width: clamp(560px, 44vw, 860px) !important;
  height: auto !important;
  max-width: none !important;
  opacity: .98 !important;
  transform: none !important;
  z-index: 0 !important;
}

/* Main content stays above decorative layer. */
.main-header,
.page,
.slider,
.section,
.checkout-progress,
.page.-cart,
.cart-shell,
.history-hero,
.legal-hero,
.legal-card,
.main-footer {
  position: relative !important;
  z-index: 2 !important;
}

/* Header: old store layout, Myteria text logo, no glass, no login CTA. */
.main-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-top: 30px solid transparent !important;
  border-bottom: 40px solid transparent !important;
  padding: 16px 8% !important;
  min-height: auto !important;
  height: auto !important;
  width: auto !important;
  margin: 0 !important;
  background: transparent !important;
  border-left: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.main-header .header-lhs,
.main-header .header-rhs,
.main-header .header-nav {
  display: flex !important;
  align-items: center !important;
}

.main-header .header-rhs {
  gap: 0 !important;
}

.main-header .header-nav {
  margin-right: 24px !important;
  gap: 0 !important;
}

.main-title {
  display: block !important;
  color: var(--myteria-shell-pink) !important;
  font-family: Inter, Montserrat, sans-serif !important;
  font-size: clamp(30px, 2.25vw, 36px) !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-shadow: none !important;
}

.main-title a {
  color: inherit !important;
  text-decoration: none !important;
  display: inline-block !important;
  line-height: 1 !important;
}

.main-title img {
  display: none !important;
}

.main-title a::before {
  content: "Myteria" !important;
  display: inline-block !important;
}

.main-header .header-nav-item {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-family: Inter, sans-serif !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  text-decoration: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.main-header .header-nav-item:not(:last-child) {
  margin-right: 56px !important;
}

.main-header .header-nav-item.-selected,
.main-header .header-nav-item.active,
.main-header .header-nav-item[aria-current="page"] {
  font-weight: 900 !important;
  color: #fff !important;
  letter-spacing: 0 !important;
}

.main-header .header-nav-item::before,
.main-header .header-nav-item::after {
  content: none !important;
  display: none !important;
}

.main-header .header-buttons,
.main-header [data-login-btn] {
  display: none !important;
}

/* User account dropdown: solid, usable, above blobs. */
.main-header [data-userbox],
.main-header .usr-box {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  z-index: 10000 !important;
}

.main-header .usr-box {
  min-height: 50px !important;
  gap: 10px !important;
  color: #fff !important;
  margin-left: 16px !important;
}

.main-header .usr-box img {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background: #e6e6eb !important;
}

.main-header .usr-box > span {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  max-width: 136px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.main-header .usr-dropdown {
  display: none;
  position: absolute !important;
  top: calc(100% + 12px) !important;
  right: 0 !important;
  min-width: 214px !important;
  padding: 8px !important;
  z-index: 100000 !important;
  background: #272729 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 16px 28px rgba(0, 0, 0, .34) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: auto !important;
}

.main-header .usr-dropdown-header {
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  margin-bottom: 4px !important;
  padding: 8px 10px 10px !important;
}

.main-header .usr-dropdown-link,
.main-header .usr-dropdown-logout {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 10px 12px !important;
  color: #d7d3e8 !important;
  border-radius: 6px !important;
  background: transparent !important;
  border: 0 !important;
  text-align: left !important;
  text-decoration: none !important;
  font-family: Inter, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.main-header .usr-dropdown-link:hover,
.main-header .usr-dropdown-logout:hover,
.main-header .usr-dropdown-link:focus-visible,
.main-header .usr-dropdown-logout:focus-visible {
  color: #fff !important;
  background: rgba(255,255,255,.08) !important;
  outline: 0 !important;
}

/* Footer: old shell behavior. No experimental card, no internal blob image. */
.main-footer,
.main-footer.legal-footer {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  text-align: right !important;
  color: #fff !important;
  padding: 56px 8% 72px !important;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
}

.footer-blob3 {
  display: none !important;
}

.main-footer .footer-content,
.main-footer.legal-footer .footer-content {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.main-footer .footer-title,
.main-footer.legal-footer .footer-title {
  color: #fff !important;
  font-family: Montserrat, Inter, sans-serif !important;
  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  margin: 0 0 16px !important;
  text-shadow: none !important;
}

.main-footer .footer-title::first-letter,
.main-footer.legal-footer .footer-title::first-letter {
  text-transform: uppercase !important;
}

.main-footer .footer-tagline,
.main-footer .footer-copy,
.main-footer.legal-footer .footer-tagline,
.main-footer.legal-footer .footer-copy {
  display: none !important;
}

.main-footer .footer-nav,
.main-footer.legal-footer .footer-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.main-footer .footer-nav-item,
.main-footer.legal-footer .footer-nav-item {
  display: inline-flex !important;
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-width: 0 !important;
  height: auto !important;
  font-family: Inter, sans-serif !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

.main-footer .footer-nav-item:not(:last-child),
.main-footer.legal-footer .footer-nav-item:not(:last-child) {
  margin-right: 48px !important;
}

.main-footer .footer-nav-item::before,
.main-footer .footer-nav-item::after,
.main-footer.legal-footer .footer-nav-item::before,
.main-footer.legal-footer .footer-nav-item::after {
  display: none !important;
  content: none !important;
}

.main-footer .footer-nav-item:hover,
.main-footer.legal-footer .footer-nav-item:hover,
.main-footer .footer-nav-item:focus-visible,
.main-footer.legal-footer .footer-nav-item:focus-visible {
  color: #fff !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px !important;
  outline: none !important;
}

/* Remove excessive glass from production surfaces while preserving depth. */
.card,
.bundle-card,
.coin-card,
.rank-card,
.cart-panel,
.cart-summary,
.history-card,
.legal-card,
.legal-hero,
.myteria-popup-shell,
.myteria-confirm-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.card,
.bundle-card,
.coin-card,
.rank-card {
  background-color: rgba(31, 18, 63, .92) !important;
}

.legal-shell {
  background: transparent !important;
}

.legal-shell::before,
.legal-shell::after,
.legal-hero::before,
.legal-hero::after {
  display: none !important;
}

.legal-hero,
.legal-card {
  background: rgba(22, 13, 48, .92) !important;
  border: 1px solid rgba(172, 90, 249, .28) !important;
  box-shadow: 0 18px 38px rgba(0,0,0,.22) !important;
}

/* Responsive tuning for zoomed desktops and smaller laptops. */
@media screen and (max-width: 1280px) {
  .main-header .header-nav-item:not(:last-child) {
    margin-right: 32px !important;
  }

  .blob-1,
  .legal-bg .blob-1 {
    width: clamp(560px, 58vw, 920px) !important;
    min-width: 520px !important;
  }

  .steve,
  .legal-bg .steve {
    width: min(500px, 38vw) !important;
  }

  .main-footer .footer-nav-item:not(:last-child),
  .main-footer.legal-footer .footer-nav-item:not(:last-child) {
    margin-right: 32px !important;
  }
}

@media screen and (max-width: 960px) {
  .main-header {
    padding-left: 6% !important;
    padding-right: 6% !important;
  }

  .main-header .header-nav-item:not(:last-child) {
    margin-right: 24px !important;
  }

  .main-header .header-nav-item {
    font-size: 13px !important;
  }

  .blob-1,
  .legal-bg .blob-1 {
    right: -120px !important;
  }
}

/* Old mobile shell, but keep it dark/Myteria instead of the bad light-mode fallback. */
@media screen and (max-width: 840px) {
  html::before {
    background:
      linear-gradient(180deg, rgba(32, 15, 68, .86), rgba(29, 8, 48, .92)),
      url('/assets/images/brand/myteria-bg.webp') center / cover no-repeat !important;
  }

  .bg.-desktop,
  .legal-bg {
    display: none !important;
  }

  .main-header {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 6% !important;
    border: 0 !important;
    z-index: 9000 !important;
    background: #26114b !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.18) !important;
  }

  .main-title {
    font-size: 22px !important;
    color: #fff !important;
  }

  .main-header .header-nav,
  .main-header .header-buttons,
  .main-header [data-userbox],
  .main-header .usr-box {
    display: none !important;
  }

  .main-header .action.-menu,
  .main-header .action.-cart {
    display: inline-flex !important;
    color: #fff !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .main-header .action.-menu {
    margin-right: 12px !important;
  }

  .main-header .action.-cart {
    position: relative !important;
  }

  .main-header .action.-cart .count {
    display: block !important;
    background: var(--myteria-shell-purple) !important;
    color: #fff !important;
    font-size: 10px !important;
    line-height: 16px !important;
    font-weight: 700 !important;
    text-align: center !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    border: 2px solid #26114b !important;
    box-sizing: content-box !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    transform: translate(33%, -33%) !important;
  }

  .page.-home .slider {
    margin-top: 0 !important;
  }

  .main-footer,
  .main-footer.legal-footer {
    background: #26114b !important;
    color: #fff !important;
    padding: 24px 8% !important;
    align-items: flex-end !important;
    text-align: right !important;
  }

  .main-footer .footer-title,
  .main-footer.legal-footer .footer-title {
    color: #fff !important;
    font-size: 20px !important;
    margin-bottom: 8px !important;
  }

  .main-footer .footer-nav,
  .main-footer.legal-footer .footer-nav {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
  }

  .main-footer .footer-nav-item,
  .main-footer.legal-footer .footer-nav-item {
    color: var(--myteria-shell-muted) !important;
    font-size: 10px !important;
  }

  .main-footer .footer-nav-item:not(:last-child),
  .main-footer.legal-footer .footer-nav-item:not(:last-child) {
    padding-right: 6px !important;
    border-right: thin solid #8e97ab !important;
    margin-right: 6px !important;
  }
}

@media screen and (max-width: 480px) {
  .main-header {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }

  .main-footer,
  .main-footer.legal-footer {
    align-items: flex-start !important;
    text-align: left !important;
  }

  .main-footer .footer-nav,
  .main-footer.legal-footer .footer-nav {
    justify-content: flex-start !important;
  }
}