/* 2026-07-16: last-loaded pastel foxline OpenAI alpha finish layer. */
html[data-theme="pastel-foxline"] body {
  background:
    linear-gradient(180deg, rgba(255, 247, 251, 0.72), rgba(237, 248, 255, 0.84)),
    url("assets/brand/pastel-foxline/pastel-galaxy-background-openai.png") center top / cover fixed,
    #fff7fb !important;
  color: #342039 !important;
}

html[data-theme="pastel-foxline"] body::before {
  background:
    linear-gradient(180deg, rgba(255, 247, 251, 0.5), rgba(255, 250, 242, 0.48)),
    url("assets/brand/pastel-foxline/pastel-galaxy-background-openai.png") center top / cover fixed !important;
  opacity: 0.9 !important;
}

html[data-theme="pastel-foxline"] .site-header,
html[data-theme="pastel-foxline"] body > header.site-header,
html[data-theme="pastel-foxline"] html body > header.site-header {
  border-color: rgba(216, 117, 168, 0.58) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow:
    0 16px 42px rgba(98, 68, 120, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.9) !important;
}

html[data-theme="pastel-foxline"] .nav-link,
html[data-theme="pastel-foxline"] body[data-role="owner_admin"] .nav-link,
html[data-theme="pastel-foxline"] .home-nav-link,
html[data-theme="pastel-foxline"] .category-card,
html[data-theme="pastel-foxline"] .button,
html[data-theme="pastel-foxline"] button.button,
html[data-theme="pastel-foxline"] a.button,
html[data-theme="pastel-foxline"] .home-join,
html[data-theme="pastel-foxline"] .auth-cta,
html[data-theme="pastel-foxline"] .search-button,
html[data-theme="pastel-foxline"] .inbox-button,
html[data-theme="pastel-foxline"] .account-button,
html[data-theme="pastel-foxline"] .icon-button,
html[data-theme="pastel-foxline"] header.site-header > .header-actions > .inbox-button,
html[data-theme="pastel-foxline"] header.site-header > .header-actions > .account-button,
html[data-theme="pastel-foxline"] header.site-header > button.nav-toggle.icon-button {
  border-color: rgba(104, 77, 124, 0.24) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(255, 250, 242, 0.68)),
    rgba(255, 255, 255, 0.82) !important;
  color: #342039 !important;
  text-shadow: none !important;
  box-shadow:
    0 9px 24px rgba(98, 68, 120, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.84) !important;
}

html[data-theme="pastel-foxline"] body > header.site-header > nav#site-nav .nav-link,
html[data-theme="pastel-foxline"] html body > header.site-header > nav#site-nav .nav-link,
html[data-theme="pastel-foxline"] body[data-page="home"] > header.site-header > nav#site-nav .nav-link {
  border-color: rgba(104, 77, 124, 0.24) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(255, 250, 242, 0.68)),
    rgba(255, 255, 255, 0.82) !important;
  color: #342039 !important;
  text-shadow: none !important;
  box-shadow:
    0 9px 24px rgba(98, 68, 120, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.84) !important;
}

html[data-theme="pastel-foxline"] body > header.site-header > nav#site-nav .nav-link.is-active,
html[data-theme="pastel-foxline"] html body > header.site-header > nav#site-nav .nav-link.is-active,
html[data-theme="pastel-foxline"] body[data-page="home"] > header.site-header > nav#site-nav .nav-link.is-active {
  background: linear-gradient(135deg, rgba(255, 239, 247, 0.95), rgba(237, 249, 255, 0.9)) !important;
  box-shadow:
    inset 0 -6px 0 rgba(132, 191, 114, 0.72),
    0 12px 30px rgba(143, 120, 201, 0.16) !important;
}

html[data-theme="pastel-foxline"] .button.primary,
html[data-theme="pastel-foxline"] .home-join,
html[data-theme="pastel-foxline"] .auth-cta {
  background: linear-gradient(135deg, #ffb3d1, #a8e6cf) !important;
  border-color: rgba(216, 117, 168, 0.5) !important;
  color: #342039 !important;
}

html[data-theme="pastel-foxline"] .button.secondary,
html[data-theme="pastel-foxline"] .button.ghost,
html[data-theme="pastel-foxline"] .icon-action-button,
html[data-theme="pastel-foxline"] .search-button,
html[data-theme="pastel-foxline"] header.site-header > .header-actions > .inbox-button,
html[data-theme="pastel-foxline"] header.site-header > .header-actions > .account-button,
html[data-theme="pastel-foxline"] header.site-header > button.nav-toggle.icon-button {
  background: linear-gradient(135deg, rgba(255, 250, 242, 0.94), rgba(237, 249, 255, 0.84)) !important;
}

html[data-theme="pastel-foxline"] .nav-link:hover,
html[data-theme="pastel-foxline"] .nav-link:focus-visible,
html[data-theme="pastel-foxline"] .nav-link.is-active,
html[data-theme="pastel-foxline"] .home-nav-link:hover,
html[data-theme="pastel-foxline"] .home-nav-link:focus-visible,
html[data-theme="pastel-foxline"] .home-nav-link.is-active,
html[data-theme="pastel-foxline"] .category-card:hover,
html[data-theme="pastel-foxline"] .category-card:focus-visible {
  border-color: rgba(216, 117, 168, 0.62) !important;
  background: linear-gradient(135deg, rgba(255, 239, 247, 0.95), rgba(237, 249, 255, 0.9)) !important;
  box-shadow:
    inset 0 -6px 0 rgba(132, 191, 114, 0.72),
    0 12px 30px rgba(143, 120, 201, 0.16) !important;
}

html[data-theme="pastel-foxline"] .page-head,
html[data-theme="pastel-foxline"] .home-copy,
html[data-theme="pastel-foxline"] .home-masthead,
html[data-theme="pastel-foxline"] .category-rail,
html[data-theme="pastel-foxline"] .band,
html[data-theme="pastel-foxline"] .hero-card,
html[data-theme="pastel-foxline"] .compact-card,
html[data-theme="pastel-foxline"] .drop-card,
html[data-theme="pastel-foxline"] .vibe-card,
html[data-theme="pastel-foxline"] .tiny-panel,
html[data-theme="pastel-foxline"] .profile-panel,
html[data-theme="pastel-foxline"] .portal-status,
html[data-theme="pastel-foxline"] .search-result-card,
html[data-theme="pastel-foxline"] .community-feature,
html[data-theme="pastel-foxline"] .creator-hero,
html[data-theme="pastel-foxline"] .creator-card,
html[data-theme="pastel-foxline"] .locked-panel,
html[data-theme="pastel-foxline"] .vault-asset-card,
html[data-theme="pastel-foxline"] .vault-detail-modal,
html[data-theme="pastel-foxline"] .quest-detail-modal,
html[data-theme="pastel-foxline"] .reward-level-card,
html[data-theme="pastel-foxline"] .reward-formula-card,
html[data-theme="pastel-foxline"] .reward-guardrail-card,
html[data-theme="pastel-foxline"] .digital-reward-card,
html[data-theme="pastel-foxline"] .reward-ledger-card,
html[data-theme="pastel-foxline"] .reward-metric,
html[data-theme="pastel-foxline"] .reward-formula-row,
html[data-theme="pastel-foxline"] .reward-level-row,
html[data-theme="pastel-foxline"] .reward-ledger-row,
html[data-theme="pastel-foxline"] .reward-rule-list article,
html[data-theme="pastel-foxline"] .approval-lane-tab,
html[data-theme="pastel-foxline"] .admin-approval-card,
html[data-theme="pastel-foxline"] .admin-quest-list-row,
html[data-theme="pastel-foxline"] .admin-assignable-quest-card,
html[data-theme="pastel-foxline"] .admin-quest-workspace-card {
  border-color: rgba(104, 77, 124, 0.18) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 250, 242, 0.72)),
    rgba(255, 255, 255, 0.84) !important;
  color: #342039 !important;
  box-shadow: 0 18px 44px rgba(98, 68, 120, 0.14) !important;
}

html[data-theme="pastel-foxline"] .quest-banner-frame {
  position: relative !important;
  border-radius: 28px !important;
}

html[data-theme="pastel-foxline"] .quest-banner-frame::after {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background: linear-gradient(135deg, rgba(255, 244, 250, 0.08), rgba(237, 249, 255, 0.06)) !important;
  content: "" !important;
  mix-blend-mode: screen !important;
}

html[data-theme="pastel-foxline"] .quest-banner {
  filter: drop-shadow(0 16px 34px rgba(98, 68, 120, 0.16)) !important;
}

html[data-theme="pastel-foxline"] .home-hero::before,
html[data-theme="pastel-foxline"] .join-hero::before,
html[data-theme="pastel-foxline"] .auth-hero::before,
html[data-theme="pastel-foxline"] .page-hero::before {
  background-image: url("assets/brand/pastel-foxline/pastel-galaxy-background-openai.png") !important;
}

html[data-theme="pastel-foxline"] .hero::after {
  background:
    linear-gradient(90deg, rgba(255, 247, 251, 0.96) 0%, rgba(255, 247, 251, 0.72) 44%, rgba(237, 249, 255, 0.26) 100%),
    linear-gradient(180deg, rgba(255, 250, 242, 0.18), rgba(255, 247, 251, 0.84)) !important;
}

html[data-theme="pastel-foxline"] body:is([data-page="first-quest"], [data-page="profile-setup"]) .join-hero.first-quest-hero::before {
  opacity: 0.26 !important;
  background: url("assets/brand/pastel-foxline/mascot-card-openai-alpha.png") no-repeat right 6% center / min(18rem, 34%) auto !important;
}

html[data-theme="pastel-foxline"] .page-title,
html[data-theme="pastel-foxline"] h1,
html[data-theme="pastel-foxline"] h2,
html[data-theme="pastel-foxline"] h3,
html[data-theme="pastel-foxline"] strong,
html[data-theme="pastel-foxline"] .reward-formula-row strong,
html[data-theme="pastel-foxline"] .reward-level-row strong,
html[data-theme="pastel-foxline"] .reward-ledger-row strong,
html[data-theme="pastel-foxline"] .digital-reward-card h3,
html[data-theme="pastel-foxline"] .approval-inbox-summary h2 {
  color: #342039 !important;
  background: none !important;
  text-shadow: none !important;
  -webkit-text-fill-color: currentColor !important;
}

html[data-theme="pastel-foxline"] .home-copy h1 {
  color: #d875a8 !important;
  background: none !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #d875a8 !important;
}

html[data-theme="pastel-foxline"] .mission-copy {
  border-color: rgba(216, 117, 168, 0.26) !important;
  background:
    linear-gradient(135deg, rgba(255, 244, 250, 0.92), rgba(237, 249, 255, 0.84)),
    rgba(255, 255, 255, 0.88) !important;
  color: #342039 !important;
  box-shadow: 0 16px 34px rgba(98, 68, 120, 0.12) !important;
}

html[data-theme="pastel-foxline"] body[data-page="home"] .home-how-it-works .mission-copy,
html[data-theme="pastel-foxline"] body .home-how-it-works .mission-copy,
html[data-theme="pastel-foxline"] html body .home-how-it-works .mission-copy {
  border-color: rgba(216, 117, 168, 0.26) !important;
  background:
    linear-gradient(135deg, rgba(255, 244, 250, 0.92), rgba(237, 249, 255, 0.84)),
    rgba(255, 255, 255, 0.88) !important;
  color: #342039 !important;
  box-shadow: 0 16px 34px rgba(98, 68, 120, 0.12) !important;
}

html[data-theme="pastel-foxline"] .locked-panel {
  border-color: rgba(216, 117, 168, 0.28) !important;
  background:
    linear-gradient(135deg, rgba(255, 244, 250, 0.9), rgba(237, 249, 255, 0.84)),
    rgba(255, 255, 255, 0.88) !important;
  color: #342039 !important;
  box-shadow: 0 18px 44px rgba(98, 68, 120, 0.14) !important;
}

html[data-theme="pastel-foxline"] body[data-page="home"] #home-how-it-works .mission-copy {
  border-color: rgba(216, 117, 168, 0.26) !important;
  background:
    linear-gradient(135deg, rgba(255, 244, 250, 0.92), rgba(237, 249, 255, 0.84)),
    rgba(255, 255, 255, 0.88) !important;
  color: #342039 !important;
  box-shadow: 0 16px 34px rgba(98, 68, 120, 0.12) !important;
}

html[data-theme="pastel-foxline"] p,
html[data-theme="pastel-foxline"] small,
html[data-theme="pastel-foxline"] em,
html[data-theme="pastel-foxline"] .page-head p,
html[data-theme="pastel-foxline"] .home-copy p,
html[data-theme="pastel-foxline"] .reward-metric span,
html[data-theme="pastel-foxline"] .reward-metric em,
html[data-theme="pastel-foxline"] .reward-formula-row em,
html[data-theme="pastel-foxline"] .reward-formula-row small,
html[data-theme="pastel-foxline"] .reward-level-row em,
html[data-theme="pastel-foxline"] .reward-ledger-row em,
html[data-theme="pastel-foxline"] .digital-reward-card small,
html[data-theme="pastel-foxline"] .reward-footnote,
html[data-theme="pastel-foxline"] .approval-inbox-summary p {
  color: #71627d !important;
  text-shadow: none !important;
}

html[data-theme="pastel-foxline"] .eyebrow,
html[data-theme="pastel-foxline"] .tag,
html[data-theme="pastel-foxline"] .status-pill,
html[data-theme="pastel-foxline"] .approval-lane-chip {
  border-color: rgba(216, 117, 168, 0.34) !important;
  background: rgba(255, 239, 247, 0.72) !important;
  color: #7f4b6a !important;
  text-shadow: none !important;
}

html[data-theme="pastel-foxline"] input,
html[data-theme="pastel-foxline"] textarea,
html[data-theme="pastel-foxline"] select,
html[data-theme="pastel-foxline"] .header-search input,
html[data-theme="pastel-foxline"] .search-results-form input {
  border-color: rgba(104, 77, 124, 0.24) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: #342039 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72) !important;
}

html[data-theme="pastel-foxline"] .nav-icon,
html[data-theme="pastel-foxline"] .feature-icon,
html[data-theme="pastel-foxline"] .large-art,
html[data-theme="pastel-foxline"] .category-card img,
html[data-theme="pastel-foxline"] .home-nav-link img,
html[data-theme="pastel-foxline"] .drop-card img,
html[data-theme="pastel-foxline"] .vibe-card img,
html[data-theme="pastel-foxline"] .stat-chip img,
html[data-theme="pastel-foxline"] .digital-reward-card img,
html[data-theme="pastel-foxline"] .icon-action-button img,
html[data-theme="pastel-foxline"] .search-button img,
html[data-theme="pastel-foxline"] .nav-toggle img {
  filter: drop-shadow(0 5px 10px rgba(98, 68, 120, 0.16)) !important;
}

html[data-theme="pastel-foxline"] .large-art[src*="mascot"],
html[data-theme="pastel-foxline"] .auth-fox,
html[data-theme="pastel-foxline"] img[alt*="mascot" i] {
  filter: drop-shadow(0 14px 24px rgba(143, 120, 201, 0.22)) !important;
}

html[data-theme="pastel-foxline"] .inbox-count {
  background: #d875a8 !important;
  color: #fffaf2 !important;
  box-shadow: 0 8px 18px rgba(216, 117, 168, 0.24) !important;
}

html[data-theme="pastel-foxline"] .account-button #account-initials::before,
html[data-theme="pastel-foxline"] .account-button #account-initials::after {
  background: #342039 !important;
  box-shadow: none !important;
}

html[data-theme="pastel-foxline"] .toast,
html[data-theme="pastel-foxline"] .nav-dropdown,
html[data-theme="pastel-foxline"] .inbox-popover,
html[data-theme="pastel-foxline"] .account-menu,
html[data-theme="pastel-foxline"] .auth-handoff-panel,
html[data-theme="pastel-foxline"] .review-modal-card,
html[data-theme="pastel-foxline"] .modal-card {
  border-color: rgba(97, 185, 223, 0.34) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: #342039 !important;
  box-shadow: 0 18px 44px rgba(98, 68, 120, 0.14) !important;
}

html[data-theme="pastel-foxline"] .nav-dropdown,
html[data-theme="pastel-foxline"] .inbox-popover,
html[data-theme="pastel-foxline"] .account-menu {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 250, 242, 0.66)),
    url("assets/brand/pastel-foxline/pastel-galaxy-cabinet-dropdown-openai.png") center / cover,
    rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(14px) saturate(1.12) !important;
}

/* 2026-07-18: final game-client app layer for desktop and mobile previews. */
:root {
  --game-ink: #f8fbff;
  --game-muted: rgba(219, 230, 255, 0.8);
  --game-panel: rgba(6, 9, 31, 0.78);
  --game-panel-strong: rgba(7, 8, 32, 0.94);
  --game-hot: #ff4fd8;
  --game-blue: #31d7ff;
  --game-lime: #bbff35;
  --game-purple: #8d5bff;
  --game-frame: rgba(82, 233, 255, 0.4);
}

html[data-theme="pastel-foxline"] body {
  min-height: 100vh !important;
  overflow-x: hidden !important;
  background:
    linear-gradient(110deg, rgba(5, 7, 24, 0.94), rgba(14, 8, 42, 0.86) 42%, rgba(6, 21, 44, 0.92)),
    #050718 !important;
  color: var(--game-ink) !important;
}

html[data-theme="pastel-foxline"] body::before {
  background:
    linear-gradient(90deg, rgba(4, 7, 24, 0.55), rgba(4, 7, 24, 0.08) 48%, rgba(4, 7, 24, 0.74)),
    linear-gradient(45deg, rgba(255, 79, 216, 0.2) 0 1px, transparent 1px 92px),
    linear-gradient(315deg, rgba(49, 215, 255, 0.18) 0 1px, transparent 1px 118px),
    url("assets/brand/pastel-foxline/foxxo-quest-pastel-vibe-banner-openai-alpha.png") center top / cover no-repeat,
    #050718 !important;
  opacity: 1 !important;
}

html[data-theme="pastel-foxline"] body::after {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 60px),
    linear-gradient(160deg, rgba(255, 79, 216, 0.24), transparent 36%, rgba(49, 215, 255, 0.22) 78%) !important;
  opacity: 0.78 !important;
}

html[data-theme="pastel-foxline"] .site-header,
html[data-theme="pastel-foxline"] body > header.site-header,
html[data-theme="pastel-foxline"] html body > header.site-header {
  display: none !important;
}

html[data-theme="pastel-foxline"] main#app {
  position: relative !important;
  z-index: 2 !important;
}

html[data-theme="pastel-foxline"] .game-app-hud {
  position: sticky !important;
  top: max(8px, env(safe-area-inset-top)) !important;
  z-index: 95 !important;
  display: grid !important;
  grid-template-columns: minmax(245px, 0.76fr) minmax(330px, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  width: min(1210px, calc(100% - 28px)) !important;
  min-height: 74px !important;
  margin: 8px auto 12px !important;
  padding: 10px !important;
  border: 1px solid rgba(82, 233, 255, 0.46) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(135deg, rgba(255, 79, 216, 0.18), rgba(49, 215, 255, 0.14)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 82px),
    rgba(4, 8, 29, 0.9) !important;
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(18px) saturate(1.28) !important;
}

html[data-theme="pastel-foxline"] .game-hud-player,
html[data-theme="pastel-foxline"] .game-hud-resources,
html[data-theme="pastel-foxline"] .game-hud-actions {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

html[data-theme="pastel-foxline"] .game-hud-player {
  gap: 11px !important;
}

html[data-theme="pastel-foxline"] .game-hud-avatar {
  position: relative !important;
  display: grid !important;
  width: 58px !important;
  height: 58px !important;
  place-items: center !important;
  border: 2px solid var(--game-blue) !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, rgba(255, 79, 216, 0.4), rgba(49, 215, 255, 0.3)) !important;
  box-shadow: 0 0 24px rgba(49, 215, 255, 0.38) !important;
}

html[data-theme="pastel-foxline"] .game-hud-avatar img {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  filter: drop-shadow(0 0 12px rgba(255, 79, 216, 0.42)) !important;
}

html[data-theme="pastel-foxline"] .game-hud-avatar b {
  position: absolute !important;
  right: -6px !important;
  bottom: -4px !important;
  display: grid !important;
  min-width: 24px !important;
  height: 24px !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, 0.64) !important;
  border-radius: 50% !important;
  background: #101827 !important;
  color: var(--game-lime) !important;
  font-size: 0.72rem !important;
  line-height: 1 !important;
}

html[data-theme="pastel-foxline"] .game-hud-name {
  display: grid !important;
  min-width: 0 !important;
  gap: 4px !important;
}

html[data-theme="pastel-foxline"] .game-hud-name strong,
html[data-theme="pastel-foxline"] .game-hud-resource strong {
  overflow: hidden !important;
  color: #fff !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-shadow: 0 0 12px rgba(255, 79, 216, 0.32) !important;
  -webkit-text-fill-color: #fff !important;
}

html[data-theme="pastel-foxline"] .game-hud-name strong {
  font-size: 0.92rem !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-theme="pastel-foxline"] .game-hud-name em {
  color: var(--game-muted) !important;
  font-size: 0.68rem !important;
  font-style: normal !important;
  text-shadow: none !important;
}

html[data-theme="pastel-foxline"] .game-hud-name i {
  display: block !important;
  width: min(170px, 28vw) !important;
  height: 7px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.14) !important;
}

html[data-theme="pastel-foxline"] .game-hud-name i span {
  display: block !important;
  width: var(--value, 28%) !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, var(--game-hot), var(--game-lime)) !important;
}

html[data-theme="pastel-foxline"] .game-hud-resources {
  justify-content: center !important;
  gap: 10px !important;
}

html[data-theme="pastel-foxline"] .game-hud-resource,
html[data-theme="pastel-foxline"] .game-hud-actions button,
html[data-theme="pastel-foxline"] .game-rail-action {
  border: 1px solid rgba(141, 91, 255, 0.52) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(82, 233, 255, 0.1)),
    rgba(8, 10, 34, 0.84) !important;
  color: #fff !important;
  cursor: pointer !important;
  font: inherit !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07) !important;
}

html[data-theme="pastel-foxline"] .game-hud-resource {
  display: grid !important;
  grid-template-columns: 28px minmax(58px, auto) 22px !important;
  gap: 6px !important;
  align-items: center !important;
  min-width: 124px !important;
  min-height: 44px !important;
  padding: 6px 8px !important;
  border-radius: 999px !important;
}

html[data-theme="pastel-foxline"] .game-hud-resource img,
html[data-theme="pastel-foxline"] .game-hud-actions img,
html[data-theme="pastel-foxline"] .game-rail-action img {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 10px rgba(49, 215, 255, 0.38)) !important;
}

html[data-theme="pastel-foxline"] .game-hud-resource span {
  display: none !important;
}

html[data-theme="pastel-foxline"] .game-hud-resource b {
  display: grid !important;
  width: 22px !important;
  height: 22px !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: var(--game-hot) !important;
  color: #16051e !important;
  font-size: 1rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

html[data-theme="pastel-foxline"] .game-hud-actions {
  justify-content: end !important;
  gap: 8px !important;
}

html[data-theme="pastel-foxline"] .game-hud-actions button {
  display: grid !important;
  width: 46px !important;
  height: 46px !important;
  place-items: center !important;
  border-radius: 14px !important;
}

html[data-theme="pastel-foxline"] .game-action-rail {
  position: fixed !important;
  top: 108px !important;
  left: max(12px, calc((100vw - 1280px) / 2)) !important;
  z-index: 70 !important;
  display: grid !important;
  gap: 10px !important;
  width: 86px !important;
}

html[data-theme="pastel-foxline"] .game-rail-action {
  position: relative !important;
  display: grid !important;
  min-height: 82px !important;
  place-items: center !important;
  gap: 4px !important;
  padding: 8px 6px !important;
  border-radius: 18px !important;
  text-align: center !important;
}

html[data-theme="pastel-foxline"] .game-rail-action span:last-child {
  color: #f8fbff !important;
  font-size: 0.68rem !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  text-shadow: 0 0 10px rgba(49, 215, 255, 0.2) !important;
}

html[data-theme="pastel-foxline"] .game-rail-action.is-active {
  border-color: rgba(187, 255, 53, 0.78) !important;
  box-shadow: 0 0 24px rgba(187, 255, 53, 0.2), inset 0 -5px 0 rgba(187, 255, 53, 0.18) !important;
}

html[data-theme="pastel-foxline"] .game-rail-badge {
  position: absolute !important;
  top: -7px !important;
  right: -6px !important;
  display: grid !important;
  min-width: 22px !important;
  height: 22px !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: var(--game-hot) !important;
  color: #fff !important;
  font-size: 0.68rem !important;
  font-weight: 950 !important;
}

html[data-theme="pastel-foxline"] .page-head,
html[data-theme="pastel-foxline"] .band,
html[data-theme="pastel-foxline"] .data-card,
html[data-theme="pastel-foxline"] .feature-card,
html[data-theme="pastel-foxline"] .quest-card,
html[data-theme="pastel-foxline"] .vault-asset-card,
html[data-theme="pastel-foxline"] .profile-tile,
html[data-theme="pastel-foxline"] .game-loop-command,
html[data-theme="pastel-foxline"] .game-action-card,
html[data-theme="pastel-foxline"] .game-achievement-card,
html[data-theme="pastel-foxline"] .quest-game-command,
html[data-theme="pastel-foxline"] .game-pass-card,
html[data-theme="pastel-foxline"] .digital-reward-card,
html[data-theme="pastel-foxline"] .drop-card,
html[data-theme="pastel-foxline"] .vibe-card,
html[data-theme="pastel-foxline"] .reward-metric,
html[data-theme="pastel-foxline"] .reward-level-row,
html[data-theme="pastel-foxline"] .reward-formula-row,
html[data-theme="pastel-foxline"] .reward-ledger-row {
  border-color: var(--game-frame) !important;
  background:
    linear-gradient(135deg, rgba(255, 79, 216, 0.14), rgba(49, 215, 255, 0.1)),
    linear-gradient(45deg, transparent 0 58%, rgba(187, 255, 53, 0.1) 58% 61%, transparent 61%),
    var(--game-panel) !important;
  color: var(--game-ink) !important;
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07) !important;
}

html[data-theme="pastel-foxline"] .page-title,
html[data-theme="pastel-foxline"] h1,
html[data-theme="pastel-foxline"] h2,
html[data-theme="pastel-foxline"] h3,
html[data-theme="pastel-foxline"] strong,
html[data-theme="pastel-foxline"] .member-card-title,
html[data-theme="pastel-foxline"] .feature-card h3,
html[data-theme="pastel-foxline"] .quest-card h3,
html[data-theme="pastel-foxline"] .game-action-card strong,
html[data-theme="pastel-foxline"] .reward-level-row strong,
html[data-theme="pastel-foxline"] .reward-ledger-row strong {
  color: #fff !important;
  text-shadow: 0 0 18px rgba(255, 79, 216, 0.3) !important;
  -webkit-text-fill-color: #fff !important;
}

html[data-theme="pastel-foxline"] p,
html[data-theme="pastel-foxline"] small,
html[data-theme="pastel-foxline"] em,
html[data-theme="pastel-foxline"] .page-head p,
html[data-theme="pastel-foxline"] .feature-card p,
html[data-theme="pastel-foxline"] .game-action-card p,
html[data-theme="pastel-foxline"] .quest-card p,
html[data-theme="pastel-foxline"] .reward-metric span,
html[data-theme="pastel-foxline"] .reward-metric em,
html[data-theme="pastel-foxline"] .reward-formula-row em,
html[data-theme="pastel-foxline"] .reward-level-row em,
html[data-theme="pastel-foxline"] .reward-ledger-row em {
  color: var(--game-muted) !important;
  text-shadow: none !important;
}

html[data-theme="pastel-foxline"] .eyebrow,
html[data-theme="pastel-foxline"] .tag,
html[data-theme="pastel-foxline"] .status-pill,
html[data-theme="pastel-foxline"] .approval-lane-chip {
  border-color: rgba(255, 79, 216, 0.42) !important;
  background: rgba(255, 79, 216, 0.16) !important;
  color: #ffd8f6 !important;
  text-shadow: none !important;
}

html[data-theme="pastel-foxline"] .tag.good,
html[data-theme="pastel-foxline"] .status-pill.good {
  border-color: rgba(187, 255, 53, 0.52) !important;
  background: rgba(187, 255, 53, 0.12) !important;
  color: #ebffb6 !important;
}

html[data-theme="pastel-foxline"] .tag.warn,
html[data-theme="pastel-foxline"] .status-pill.warn {
  border-color: rgba(255, 215, 109, 0.52) !important;
  background: rgba(255, 215, 109, 0.12) !important;
  color: #ffe7a6 !important;
}

html[data-theme="pastel-foxline"] .button.primary,
html[data-theme="pastel-foxline"] button.button.primary,
html[data-theme="pastel-foxline"] a.button.primary {
  border-color: rgba(255, 255, 255, 0.42) !important;
  background: linear-gradient(135deg, #ff4fd8, #31d7ff) !important;
  color: #fff !important;
  box-shadow: 0 0 24px rgba(255, 79, 216, 0.24), inset 0 -4px 0 rgba(0, 0, 0, 0.18) !important;
  -webkit-text-fill-color: #fff !important;
}

html[data-theme="pastel-foxline"] .button.secondary,
html[data-theme="pastel-foxline"] .button.ghost,
html[data-theme="pastel-foxline"] button.button.secondary,
html[data-theme="pastel-foxline"] a.button.secondary {
  border-color: rgba(82, 233, 255, 0.44) !important;
  background: rgba(49, 215, 255, 0.12) !important;
  color: #e7fbff !important;
  -webkit-text-fill-color: #e7fbff !important;
}

html[data-theme="pastel-foxline"] .member-home-hero,
html[data-theme="pastel-foxline"] .profile-scene,
html[data-theme="pastel-foxline"] .portal-board,
html[data-theme="pastel-foxline"] .reward-hero-grid,
html[data-theme="pastel-foxline"] .game-loop-shell,
html[data-theme="pastel-foxline"] .quest-game-command,
html[data-theme="pastel-foxline"] .game-pass-section {
  width: min(1120px, calc(100% - 28px)) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

html[data-theme="pastel-foxline"] .member-home-hero {
  position: relative !important;
  isolation: isolate !important;
  min-height: clamp(380px, 45vw, 560px) !important;
  overflow: hidden !important;
  border: 2px solid rgba(255, 79, 216, 0.56) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(90deg, rgba(5, 7, 24, 0.9) 0%, rgba(5, 7, 24, 0.48) 42%, rgba(5, 7, 24, 0.76) 100%),
    linear-gradient(0deg, rgba(255, 79, 216, 0.22) 0 2px, transparent 2px 78px),
    url("assets/brand/pastel-foxline/foxxo-quest-pastel-vibe-banner-openai-alpha.png") center / cover no-repeat !important;
  box-shadow:
    0 24px 58px rgba(0, 0, 0, 0.34),
    0 0 44px rgba(255, 79, 216, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="pastel-foxline"] .member-home-hero::before {
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  content: "" !important;
  background:
    linear-gradient(120deg, transparent 0 46%, rgba(255, 79, 216, 0.28) 46% 47%, transparent 47%),
    linear-gradient(300deg, transparent 0 68%, rgba(49, 215, 255, 0.24) 68% 69%, transparent 69%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 96px) !important;
  mix-blend-mode: screen !important;
}

html[data-theme="pastel-foxline"] .member-home-hero > div {
  position: relative !important;
  z-index: 1 !important;
  max-width: 40rem !important;
}

html[data-theme="pastel-foxline"] .member-home-hero .page-title {
  margin-block: 16px 14px !important;
  color: #fff !important;
  font-family: Impact, "Arial Black", Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: clamp(3.1rem, 8vw, 6.7rem) !important;
  font-style: normal !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  line-height: 0.88 !important;
  text-transform: uppercase !important;
  text-shadow:
    0 4px 0 #43105f,
    0 8px 0 rgba(8, 0, 22, 0.88),
    2px 0 0 rgba(49, 215, 255, 0.62),
    -2px 0 0 rgba(255, 79, 216, 0.72),
    0 0 24px rgba(255, 79, 216, 0.54),
    0 0 36px rgba(49, 215, 255, 0.28) !important;
  -webkit-text-fill-color: #fff !important;
}

html[data-theme="pastel-foxline"] .member-home-hero p {
  max-width: 35rem !important;
  color: rgba(235, 243, 255, 0.86) !important;
  font-size: clamp(1rem, 1.6vw, 1.28rem) !important;
  font-weight: 750 !important;
  line-height: 1.35 !important;
}

html[data-theme="pastel-foxline"] .member-home-hero img {
  position: relative !important;
  z-index: 1 !important;
  width: min(360px, 32vw) !important;
  max-height: clamp(240px, 34vw, 470px) !important;
  justify-self: end !important;
  filter:
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.5))
    drop-shadow(0 0 34px rgba(49, 215, 255, 0.36)) !important;
}

@media (min-width: 1240px) {
  html[data-theme="pastel-foxline"] .page-shell,
  html[data-theme="pastel-foxline"] .home-stage,
  html[data-theme="pastel-foxline"] .drop-zone,
  html[data-theme="pastel-foxline"] .band {
    width: min(1120px, calc(100% - 180px)) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }
}

@media (max-width: 980px) {
  html[data-theme="pastel-foxline"] .game-app-hud {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    width: min(100% - 18px, 680px) !important;
    padding: 8px !important;
  }

  html[data-theme="pastel-foxline"] .game-hud-resources {
    justify-content: stretch !important;
  }

  html[data-theme="pastel-foxline"] .game-hud-resource {
    min-width: 0 !important;
    width: 100% !important;
    grid-template-columns: 26px minmax(0, 1fr) 20px !important;
  }

  html[data-theme="pastel-foxline"] .game-hud-actions,
  html[data-theme="pastel-foxline"] .game-action-rail {
    display: none !important;
  }
}

@media (max-width: 760px) {
  :root {
    --mobile-tabbar-h: 86px;
  }

  html[data-theme="pastel-foxline"] body {
    padding-bottom: calc(var(--mobile-tabbar-h) + env(safe-area-inset-bottom, 0px)) !important;
  }

  html[data-theme="pastel-foxline"] .home-stage,
  html[data-theme="pastel-foxline"] .page-shell,
  html[data-theme="pastel-foxline"] .band,
  html[data-theme="pastel-foxline"] .drop-zone {
    width: min(100% - 18px, 560px) !important;
  }

  html[data-theme="pastel-foxline"] .game-app-hud {
    top: max(6px, env(safe-area-inset-top)) !important;
    border-radius: 22px !important;
  }

  html[data-theme="pastel-foxline"] .game-hud-avatar {
    width: 50px !important;
    height: 50px !important;
  }

  html[data-theme="pastel-foxline"] .game-hud-avatar img {
    width: 42px !important;
    height: 42px !important;
  }

  html[data-theme="pastel-foxline"] .game-hud-resources {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  html[data-theme="pastel-foxline"] .game-hud-resource {
    min-height: 38px !important;
    padding: 5px !important;
  }

  html[data-theme="pastel-foxline"] .game-hud-resource img {
    width: 23px !important;
    height: 23px !important;
  }

  html[data-theme="pastel-foxline"] .game-hud-resource strong {
    font-size: 0.68rem !important;
  }

  html[data-theme="pastel-foxline"] .game-hud-resource b {
    width: 18px !important;
    height: 18px !important;
    font-size: 0.78rem !important;
  }

  html[data-theme="pastel-foxline"] .member-home-hero {
    grid-template-columns: 1fr !important;
    min-height: 560px !important;
    align-content: end !important;
    margin-top: 8px !important;
    padding: 22px !important;
    background-position: center top !important;
  }

  html[data-theme="pastel-foxline"] .member-home-hero .page-title {
    font-size: clamp(3rem, 15vw, 4.8rem) !important;
  }

  html[data-theme="pastel-foxline"] .member-home-hero img {
    width: min(82vw, 360px) !important;
    justify-self: center !important;
    order: -1 !important;
  }

  html[data-theme="pastel-foxline"] .mobile-tabbar {
    border-color: rgba(49, 215, 255, 0.34) !important;
    background:
      linear-gradient(135deg, rgba(255, 79, 216, 0.18), rgba(49, 215, 255, 0.14)),
      rgba(5, 7, 24, 0.94) !important;
    box-shadow:
      0 -20px 42px rgba(0, 0, 0, 0.36),
      inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  }

  html[data-theme="pastel-foxline"] .mobile-tabbar::before {
    background:
      linear-gradient(120deg, transparent 0 42%, rgba(255, 79, 216, 0.32) 42% 46%, transparent 46%),
      linear-gradient(300deg, transparent 0 68%, rgba(49, 215, 255, 0.3) 68% 72%, transparent 72%) !important;
  }

  html[data-theme="pastel-foxline"] .mobile-tab {
    color: rgba(248, 251, 255, 0.7) !important;
  }

  html[data-theme="pastel-foxline"] .mobile-tab span {
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
  }

  html[data-theme="pastel-foxline"] .mobile-tab.is-active {
    border-color: rgba(187, 255, 53, 0.58) !important;
    background:
      linear-gradient(135deg, rgba(187, 255, 53, 0.2), rgba(49, 215, 255, 0.16)),
      rgba(255, 255, 255, 0.06) !important;
    color: var(--game-lime) !important;
  }
}

@media (max-width: 430px) {
  html[data-theme="pastel-foxline"] .game-app-hud,
  html[data-theme="pastel-foxline"] .game-app-hud * {
    box-sizing: border-box !important;
  }

  html[data-theme="pastel-foxline"] .game-app-hud {
    width: calc(100% - 14px) !important;
    padding: 7px !important;
  }

  html[data-theme="pastel-foxline"] .game-hud-resources {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  html[data-theme="pastel-foxline"] .game-hud-resource {
    grid-template-columns: 22px minmax(0, 1fr) 17px !important;
    gap: 3px !important;
    min-width: 0 !important;
    padding: 5px 4px !important;
  }

  html[data-theme="pastel-foxline"] .game-hud-resource img {
    width: 21px !important;
    height: 21px !important;
  }

  html[data-theme="pastel-foxline"] .game-hud-resource strong {
    min-width: 0 !important;
    font-size: 0.62rem !important;
    text-align: center !important;
  }

  html[data-theme="pastel-foxline"] .game-hud-resource b {
    width: 17px !important;
    height: 17px !important;
  }

  html[data-theme="pastel-foxline"] .member-home-hero {
    min-height: 548px !important;
    padding: 20px !important;
    text-align: center !important;
  }

  html[data-theme="pastel-foxline"] .member-home-hero > div {
    max-width: 100% !important;
  }

  html[data-theme="pastel-foxline"] .member-home-hero .page-title {
    max-width: 100% !important;
    font-size: clamp(2.35rem, 11vw, 3.15rem) !important;
    line-height: 0.94 !important;
    overflow-wrap: normal !important;
    text-wrap: balance !important;
  }

  html[data-theme="pastel-foxline"] .member-home-hero p {
    max-width: 100% !important;
    font-size: 0.86rem !important;
  }

  html[data-theme="pastel-foxline"] .member-home-hero .button-row {
    justify-content: center !important;
  }
}

html[data-theme="pastel-foxline"] .quest-chain span,
html[data-theme="pastel-foxline"] .game-loop-stat,
html[data-theme="pastel-foxline"] .game-loop-next {
  border: 1px solid rgba(82, 233, 255, 0.36) !important;
  background:
    linear-gradient(135deg, rgba(255, 79, 216, 0.12), rgba(49, 215, 255, 0.1)),
    rgba(7, 9, 33, 0.82) !important;
  color: var(--game-ink) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07) !important;
}

html[data-theme="pastel-foxline"] .quest-chain span.is-active,
html[data-theme="pastel-foxline"] .game-loop-stat.mint,
html[data-theme="pastel-foxline"] .game-loop-stat.gold,
html[data-theme="pastel-foxline"] .game-loop-stat.cyan,
html[data-theme="pastel-foxline"] .game-loop-stat.pink {
  border-color: rgba(187, 255, 53, 0.46) !important;
  background:
    linear-gradient(135deg, rgba(187, 255, 53, 0.14), rgba(49, 215, 255, 0.11)),
    rgba(7, 9, 33, 0.86) !important;
}

html[data-theme="pastel-foxline"] .quest-chain b,
html[data-theme="pastel-foxline"] .quest-chain em,
html[data-theme="pastel-foxline"] .game-loop-stat strong,
html[data-theme="pastel-foxline"] .game-loop-stat span,
html[data-theme="pastel-foxline"] .game-loop-next strong,
html[data-theme="pastel-foxline"] .game-loop-next span {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html[data-theme="pastel-foxline"] .quest-chain em,
html[data-theme="pastel-foxline"] .game-loop-stat span,
html[data-theme="pastel-foxline"] .game-loop-next span {
  color: var(--game-muted) !important;
  -webkit-text-fill-color: var(--game-muted) !important;
}

@media (max-width: 760px) {
  html[data-theme="pastel-foxline"] .page-head {
    overflow: hidden !important;
    padding: 18px !important;
  }

  html[data-theme="pastel-foxline"] .page-head > div {
    min-width: 0 !important;
    width: 100% !important;
  }

  html[data-theme="pastel-foxline"] .page-head .page-title {
    max-width: 100% !important;
    font-size: clamp(1.7rem, 8vw, 2.45rem) !important;
    line-height: 1 !important;
    overflow-wrap: break-word !important;
    text-wrap: balance !important;
  }

  html[data-theme="pastel-foxline"] .page-head p {
    max-width: 100% !important;
  }

  html[data-theme="pastel-foxline"] .page-head-actions {
    width: 100% !important;
  }

  html[data-theme="pastel-foxline"] .page-head-actions .button {
    min-width: 0 !important;
  }
}