:root {
  --pp-bg: #050006;
  --pp-bg-2: #0b0711;
  --pp-panel: rgba(7, 4, 10, 0.86);
  --pp-panel-2: rgba(14, 9, 18, 0.88);
  --pp-line: rgba(255, 255, 255, 0.12);
  --pp-gold: #f6d77a;
  --pp-gold-soft: #fff0a6;
  --pp-pink: #ff2daa;
  --pp-pink-soft: #ff9bd8;
  --pp-cyan: #00d4ff;
  --pp-mint: #75ffd2;
  --pp-text: #fff7fd;
  --pp-muted: rgba(255, 255, 255, 0.68);
  --pp-serif: Cinzel, Georgia, serif;
  --pp-sans: Inter, Montserrat, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pp-shadow: 0 22px 52px rgba(0, 0, 0, 0.44);
}

.phone.locked:not(.auth-modal-open):not(.signup-success-open) .inside-pageantry {
  --inside-image: url("./assets/featured-pageant.png") !important;
  --card-position: right 42% !important;
}

@media (max-width: 600px) {
  .phone.locked:not(.auth-modal-open):not(.signup-success-open) .inside-pageantry {
    --inside-image: url("./assets/featured-pageant-mobile-clean.png") !important;
    --card-position: center center !important;
  }

  .phone.locked:not(.auth-modal-open):not(.signup-success-open) .inside-pageantry::after {
    background-size: cover !important;
  }
}

body {
  color: var(--pp-text) !important;
  font-family: var(--pp-sans) !important;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 45, 170, 0.22), transparent 19rem),
    radial-gradient(circle at 88% 18%, rgba(0, 212, 255, 0.14), transparent 18rem),
    linear-gradient(180deg, var(--pp-bg) 0%, var(--pp-bg-2) 42%, #030205 100%) !important;
}

.phone:not(.auth-modal-open):not(.signup-success-open) {
  color: var(--pp-text) !important;
  background:
    radial-gradient(circle at 16% 7%, rgba(255, 45, 170, 0.16), transparent 19rem),
    radial-gradient(circle at 88% 12%, rgba(0, 212, 255, 0.12), transparent 17rem),
    linear-gradient(180deg, #050006 0%, #0b0711 48%, #030205 100%) !important;
  border-color: rgba(246, 215, 122, 0.2) !important;
}

.phone:not(.auth-modal-open):not(.signup-success-open) .screen {
  color: var(--pp-text) !important;
  background:
    radial-gradient(circle at 12% 6%, rgba(255, 45, 170, 0.14), transparent 17rem),
    radial-gradient(circle at 91% 16%, rgba(0, 212, 255, 0.1), transparent 16rem),
    linear-gradient(180deg, #050006 0%, #0b0711 44%, #030205 100%) !important;
}

.phone:not(.auth-modal-open):not(.signup-success-open) .topbar,
.phone:not(.auth-modal-open):not(.signup-success-open) .wallet,
.phone:not(.auth-modal-open):not(.signup-success-open) .top-drawer {
  border-color: rgba(246, 215, 122, 0.22) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
    rgba(0, 0, 0, 0.64) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 16px 34px rgba(0, 0, 0, 0.32) !important;
}

.phone:not(.auth-modal-open):not(.signup-success-open) .section-title,
.phone:not(.auth-modal-open):not(.signup-success-open) .leaderboard-titlebar,
.phone:not(.auth-modal-open):not(.signup-success-open) .profile-hero,
.phone:not(.auth-modal-open):not(.signup-success-open) .houses-promo,
.phone:not(.auth-modal-open):not(.signup-success-open) .live-stage {
  border-radius: 8px !important;
}

.phone:not(.auth-modal-open):not(.signup-success-open) .section-title h2,
.phone:not(.auth-modal-open):not(.signup-success-open) .categories-hero h1,
.phone:not(.auth-modal-open):not(.signup-success-open) .portal-card-copy h2,
.phone:not(.auth-modal-open):not(.signup-success-open) .leaderboard-titlebar h1,
.phone:not(.auth-modal-open):not(.signup-success-open) .profile-hero h1,
.phone:not(.auth-modal-open):not(.signup-success-open) .profile-hero h2,
.phone:not(.auth-modal-open):not(.signup-success-open) .houses-promo strong,
.phone:not(.auth-modal-open):not(.signup-success-open) .house-hq-hero h1,
.phone:not(.auth-modal-open):not(.signup-success-open) .match-card h3,
.phone:not(.auth-modal-open):not(.signup-success-open) .live-stage h3,
.phone:not(.auth-modal-open):not(.signup-success-open) .app-module strong,
.phone:not(.auth-modal-open):not(.signup-success-open) .compliance-card strong,
.phone:not(.auth-modal-open):not(.signup-success-open) .profile-card strong,
.phone:not(.auth-modal-open):not(.signup-success-open) .quick-card strong,
.phone:not(.auth-modal-open):not(.signup-success-open) .leaderboard-preview h2 {
  color: var(--pp-text) !important;
  font-family: var(--pp-serif) !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 22px rgba(255, 45, 170, 0.22) !important;
}

.phone:not(.auth-modal-open):not(.signup-success-open) .section-title span,
.phone:not(.auth-modal-open):not(.signup-success-open) small,
.phone:not(.auth-modal-open):not(.signup-success-open) p,
.phone:not(.auth-modal-open):not(.signup-success-open) .login-note,
.phone:not(.auth-modal-open):not(.signup-success-open) .module-kicker,
.phone:not(.auth-modal-open):not(.signup-success-open) label {
  color: var(--pp-muted) !important;
  font-family: var(--pp-sans) !important;
}

.phone:not(.auth-modal-open):not(.signup-success-open) .portal-card-copy small {
  color: #f6d77a !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.82) !important;
}

.phone:not(.auth-modal-open):not(.signup-success-open) .portal-card-copy h2 {
  color: #fff !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7) !important;
}

.phone:not(.auth-modal-open):not(.signup-success-open) .portal-card-copy p {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.78) !important;
}

.phone:not(.auth-modal-open):not(.signup-success-open) .module-kicker,
.phone:not(.auth-modal-open):not(.signup-success-open) .pill,
.phone:not(.auth-modal-open):not(.signup-success-open) .verified-badge,
.phone:not(.auth-modal-open):not(.signup-success-open) .leaderboard-filters button,
.phone:not(.auth-modal-open):not(.signup-success-open) .leaderboard-tabs button,
.phone:not(.auth-modal-open):not(.signup-success-open) .market,
.phone:not(.auth-modal-open):not(.signup-success-open) .houses-filter-button,
.phone:not(.auth-modal-open):not(.signup-success-open) #housesSortButton {
  font-family: var(--pp-sans) !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

.phone:not(.auth-modal-open):not(.signup-success-open) .gold-button,
.phone:not(.auth-modal-open):not(.signup-success-open) .join-gradient,
.phone:not(.auth-modal-open):not(.signup-success-open) .success-primary,
.phone:not(.auth-modal-open):not(.signup-success-open) .houses-load-more,
.phone:not(.auth-modal-open):not(.signup-success-open) .house-hq-join,
.phone:not(.auth-modal-open):not(.signup-success-open) .portal-select {
  border: 1px solid rgba(246, 215, 122, 0.52) !important;
  border-radius: 8px !important;
  color: #0b0508 !important;
  background: linear-gradient(92deg, var(--pp-gold) 0%, var(--pp-gold-soft) 48%, var(--pp-pink) 100%) !important;
  box-shadow: 0 0 22px rgba(255, 45, 170, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
  font-family: var(--pp-serif) !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

.phone:not(.auth-modal-open):not(.signup-success-open) .text-button,
.phone:not(.auth-modal-open):not(.signup-success-open) a {
  color: var(--pp-gold) !important;
}

.phone:not(.auth-modal-open):not(.signup-success-open) input,
.phone:not(.auth-modal-open):not(.signup-success-open) select,
.phone:not(.auth-modal-open):not(.signup-success-open) textarea {
  border: 1px solid rgba(255, 196, 219, 0.36) !important;
  border-radius: 8px !important;
  color: var(--pp-text) !important;
  background: rgba(0, 0, 0, 0.48) !important;
  box-shadow: inset 0 0 0 1px rgba(246, 215, 122, 0.06) !important;
}

.phone:not(.auth-modal-open):not(.signup-success-open) input:focus,
.phone:not(.auth-modal-open):not(.signup-success-open) select:focus,
.phone:not(.auth-modal-open):not(.signup-success-open) textarea:focus {
  outline: none !important;
  border-color: rgba(246, 215, 122, 0.82) !important;
  box-shadow: inset 0 0 0 1px rgba(246, 215, 122, 0.14), 0 0 18px rgba(255, 45, 170, 0.18) !important;
}

.phone:not(.auth-modal-open):not(.signup-success-open) .app-module,
.phone:not(.auth-modal-open):not(.signup-success-open) .compliance-card,
.phone:not(.auth-modal-open):not(.signup-success-open) .leaderboard-preview,
.phone:not(.auth-modal-open):not(.signup-success-open) .profile-card,
.phone:not(.auth-modal-open):not(.signup-success-open) .pricing-card,
.phone:not(.auth-modal-open):not(.signup-success-open) .quick-card,
.phone:not(.auth-modal-open):not(.signup-success-open) .event-card,
.phone:not(.auth-modal-open):not(.signup-success-open) .culture-card,
.phone:not(.auth-modal-open):not(.signup-success-open) .entry-box,
.phone:not(.auth-modal-open):not(.signup-success-open) .slip-item,
.phone:not(.auth-modal-open):not(.signup-success-open) .house-card,
.phone:not(.auth-modal-open):not(.signup-success-open) .member-card,
.phone:not(.auth-modal-open):not(.signup-success-open) .ballroom-event-card,
.phone:not(.auth-modal-open):not(.signup-success-open) .leaderboard-list li,
.phone:not(.auth-modal-open):not(.signup-success-open) .leaderboard-preview li,
.phone:not(.auth-modal-open):not(.signup-success-open) .leaderboard-card,
.phone:not(.auth-modal-open):not(.signup-success-open) .house-card-ebony,
.phone:not(.auth-modal-open):not(.signup-success-open) .house-discovery-card,
.phone:not(.auth-modal-open):not(.signup-success-open) .profile-stat-card,
.phone:not(.auth-modal-open):not(.signup-success-open) .profile-drawer,
.phone:not(.auth-modal-open):not(.signup-success-open) .achievement-card,
.phone:not(.auth-modal-open):not(.signup-success-open) .activity-card {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
    rgba(7, 4, 10, 0.84) !important;
  box-shadow: var(--pp-shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.035) !important;
}

.phone:not(.auth-modal-open):not(.signup-success-open) .app-module:hover,
.phone:not(.auth-modal-open):not(.signup-success-open) .compliance-card:hover,
.phone:not(.auth-modal-open):not(.signup-success-open) .event-card:hover,
.phone:not(.auth-modal-open):not(.signup-success-open) .culture-card:hover,
.phone:not(.auth-modal-open):not(.signup-success-open) .match-card:hover,
.phone:not(.auth-modal-open):not(.signup-success-open) .house-card:hover,
.phone:not(.auth-modal-open):not(.signup-success-open) .leaderboard-list li:hover {
  border-color: rgba(246, 215, 122, 0.46) !important;
  box-shadow: 0 26px 62px rgba(0, 0, 0, 0.5), 0 0 34px rgba(255, 45, 170, 0.14) !important;
}

.phone:not(.auth-modal-open):not(.signup-success-open) .match-card,
.phone:not(.auth-modal-open):not(.signup-success-open) .live-stage,
.phone:not(.auth-modal-open):not(.signup-success-open) .episode {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(4, 2, 8, 0.08) 0%, rgba(4, 2, 8, 0.5) 44%, rgba(2, 1, 4, 0.94) 100%),
    radial-gradient(circle at 82% 12%, rgba(255, 45, 170, 0.18), transparent 12rem),
    rgba(7, 4, 10, 0.9) !important;
  box-shadow: var(--pp-shadow) !important;
}

.phone:not(.auth-modal-open):not(.signup-success-open) .pill,
.phone:not(.auth-modal-open):not(.signup-success-open) .verified-badge,
.phone:not(.auth-modal-open):not(.signup-success-open) .market,
.phone:not(.auth-modal-open):not(.signup-success-open) .leaderboard-tabs button,
.phone:not(.auth-modal-open):not(.signup-success-open) .leaderboard-filters button {
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 999px !important;
  color: var(--pp-gold) !important;
  background: rgba(0, 0, 0, 0.48) !important;
}

.phone:not(.auth-modal-open):not(.signup-success-open) .pill.live,
.phone:not(.auth-modal-open):not(.signup-success-open) .verified-badge:not(.muted),
.phone:not(.auth-modal-open):not(.signup-success-open) .market.active,
.phone:not(.auth-modal-open):not(.signup-success-open) .leaderboard-tabs button.active,
.phone:not(.auth-modal-open):not(.signup-success-open) .leaderboard-filters button.active {
  color: #0b0508 !important;
  border-color: rgba(246, 215, 122, 0.52) !important;
  background: linear-gradient(92deg, var(--pp-gold), var(--pp-gold-soft), var(--pp-pink)) !important;
}

.phone:not(.auth-modal-open):not(.signup-success-open) .hero {
  background:
    linear-gradient(90deg, rgba(4, 2, 8, 0.94), rgba(4, 2, 8, 0.6), rgba(4, 2, 8, 0.18)),
    radial-gradient(circle at 76% 42%, rgba(255, 45, 170, 0.2), transparent 10rem),
    url("./assets/category-events-ai.png") right center / cover no-repeat !important;
}

.phone:not(.auth-modal-open):not(.signup-success-open) .hero h1,
.phone:not(.auth-modal-open):not(.signup-success-open) .landing-title,
.phone:not(.auth-modal-open):not(.signup-success-open) .legacy-text {
  font-family: var(--pp-serif) !important;
  letter-spacing: 0 !important;
}

.phone:not(.auth-modal-open):not(.signup-success-open) .houses-screen {
  background:
    radial-gradient(circle at 16% 8%, rgba(255, 45, 170, 0.18), transparent 18rem),
    radial-gradient(circle at 88% 14%, rgba(0, 212, 255, 0.12), transparent 17rem),
    linear-gradient(180deg, #050006 0%, #0b0711 44%, #030205 100%) !important;
}

.phone:not(.auth-modal-open):not(.signup-success-open) .houses-promo {
  border: 1px solid rgba(246, 215, 122, 0.28) !important;
  background:
    linear-gradient(90deg, rgba(4, 2, 8, 0.9), rgba(4, 2, 8, 0.5), rgba(4, 2, 8, 0.16)),
    url("./assets/category-ballroom-ai.png") right center / cover no-repeat !important;
}

.phone:not(.auth-modal-open):not(.signup-success-open) .leaderboard-screen,
.phone:not(.auth-modal-open):not(.signup-success-open) .profile-screen {
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 45, 170, 0.18), transparent 18rem),
    radial-gradient(circle at 86% 14%, rgba(246, 215, 122, 0.12), transparent 16rem),
    linear-gradient(180deg, #050006 0%, #0b0711 44%, #030205 100%) !important;
}

.phone:not(.auth-modal-open):not(.signup-success-open) .leaderboard-titlebar,
.phone:not(.auth-modal-open):not(.signup-success-open) .profile-hero {
  border: 1px solid rgba(246, 215, 122, 0.24) !important;
  background:
    radial-gradient(circle at 78% 16%, rgba(255, 45, 170, 0.18), transparent 14rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
    rgba(7, 4, 10, 0.84) !important;
}

.phone:not(.auth-modal-open):not(.signup-success-open) .ranking-grid article,
.phone:not(.auth-modal-open):not(.signup-success-open) .board-summary article,
.phone:not(.auth-modal-open):not(.signup-success-open) .mini-metrics span,
.phone:not(.auth-modal-open):not(.signup-success-open) .house-card-stats span,
.phone:not(.auth-modal-open):not(.signup-success-open) .profile-metric,
.phone:not(.auth-modal-open):not(.signup-success-open) .starter-bonus {
  border-color: rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  background: rgba(0, 0, 0, 0.44) !important;
}

.phone:not(.auth-modal-open):not(.signup-success-open) .ranking-grid strong,
.phone:not(.auth-modal-open):not(.signup-success-open) .board-summary strong,
.phone:not(.auth-modal-open):not(.signup-success-open) .mini-metrics b,
.phone:not(.auth-modal-open):not(.signup-success-open) .house-card-stats b,
.phone:not(.auth-modal-open):not(.signup-success-open) #balance,
.phone:not(.auth-modal-open):not(.signup-success-open) #walletBalance {
  color: var(--pp-gold) !important;
  font-family: var(--pp-serif) !important;
}

.phone:not(.auth-modal-open):not(.signup-success-open) #live .section-title h2,
.phone:not(.auth-modal-open):not(.signup-success-open) #live .live-stage h3,
.phone:not(.auth-modal-open):not(.signup-success-open) #live .match-card h3,
.phone:not(.auth-modal-open):not(.signup-success-open) #live .compliance-card strong,
.phone:not(.auth-modal-open):not(.signup-success-open) #live .reaction-row b {
  color: transparent !important;
  font-family: "Bodoni Moda", "Bodoni 72 Poster", Didot, "Playfair Display", Georgia, serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.005em !important;
  text-transform: uppercase !important;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(246, 215, 122, 0.9) 16%,
      rgba(255, 79, 216, 0.64) 30%,
      rgba(72, 40, 122, 0.76) 45%,
      rgba(255, 255, 255, 0.9) 57%,
      rgba(0, 212, 255, 0.56) 72%,
      rgba(246, 215, 122, 0.96) 100%
    ),
    linear-gradient(
      105deg,
      #d4af37 0%,
      #fff5c8 16%,
      #ff4fd8 30%,
      #7a3cff 45%,
      #00d4ff 62%,
      #ffffff 76%,
      #ff4fd8 89%,
      #f6d77a 100%
    ) !important;
  background-blend-mode: screen, normal !important;
  background-size: 100% 100%, 260% 100% !important;
  background-position: center, 0% 50% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-stroke: 0.35px rgba(255, 244, 206, 0.38) !important;
  filter:
    drop-shadow(0 4px 19px rgba(0, 0, 0, 0.98))
    drop-shadow(0 0 10px rgba(246, 215, 122, 0.16))
    drop-shadow(0 0 18px rgba(168, 85, 247, 0.24))
    drop-shadow(0 0 12px rgba(0, 212, 255, 0.08)) !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.24),
    0 0 24px rgba(255, 79, 216, 0.24) !important;
}

.phone:not(.auth-modal-open):not(.signup-success-open) #live .section-title h2 {
  font-size: clamp(2.25rem, 9vw, 4.8rem) !important;
  line-height: 0.86 !important;
}

.phone:not(.auth-modal-open):not(.signup-success-open) #live .live-stage h3,
.phone:not(.auth-modal-open):not(.signup-success-open) #live .match-card h3 {
  font-size: clamp(1.85rem, 7vw, 3.65rem) !important;
  line-height: 0.9 !important;
}

.phone:not(.auth-modal-open):not(.signup-success-open) #live .section-title span,
.phone:not(.auth-modal-open):not(.signup-success-open) #live .pill,
.phone:not(.auth-modal-open):not(.signup-success-open) #live .match-card .pill {
  color: rgba(255, 244, 210, 0.86) !important;
  font-family: "Cinzel", "Montserrat", "Inter", ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing: 0.22em !important;
  text-shadow:
    0 2px 14px rgba(0, 0, 0, 0.92),
    0 0 14px rgba(212, 175, 55, 0.18) !important;
}

@media (max-width: 760px) {
  .phone:not(.auth-modal-open):not(.signup-success-open) .section-title h2,
  .phone:not(.auth-modal-open):not(.signup-success-open) .leaderboard-titlebar h1,
  .phone:not(.auth-modal-open):not(.signup-success-open) .profile-hero h1,
  .phone:not(.auth-modal-open):not(.signup-success-open) .houses-promo strong {
    font-size: clamp(1.45rem, 7.5vw, 2.4rem) !important;
    line-height: 1 !important;
  }
}