:root {
  color-scheme: dark;
  --pmf-bg: #0b0a0c;
  --pmf-bg-raised: #121012;
  --pmf-surface: #191617;
  --pmf-surface-2: #211c1b;
  --pmf-ivory: #f6f1e8;
  --pmf-muted: #aaa19a;
  --pmf-faint: #756e6a;
  --pmf-coral: #ff5a4f;
  --pmf-coral-hot: #ff776c;
  --pmf-amber: #d39a55;
  --pmf-mint: #80d7be;
  --pmf-line: rgba(246, 241, 232, .12);
  --pmf-line-strong: rgba(246, 241, 232, .22);
  --pmf-shadow: 0 28px 70px rgba(0, 0, 0, .38);
  --pmf-radius: 18px;
}

* { box-sizing: border-box; }

html {
  background: var(--pmf-bg) !important;
  scroll-behavior: smooth;
}

body {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--pmf-ivory);
  font-family: Inter, "Segoe UI Variable Display", "Segoe UI", Helvetica, Arial, sans-serif;
  background:
    radial-gradient(circle at 78% 13%, rgba(255, 90, 79, .075), transparent 25rem),
    radial-gradient(circle at 20% 70%, rgba(211, 154, 85, .035), transparent 30rem),
    var(--pmf-bg) !important;
  background-attachment: fixed !important;
}

body::before {
  z-index: 0;
  opacity: .15;
  background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 100% 5px;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

body::after {
  top: -280px;
  right: -260px;
  width: 720px;
  height: 720px;
  border: 1px solid rgba(255, 90, 79, .08);
  border-radius: 50%;
  background: transparent;
  filter: none;
  opacity: 1;
}

body > * { position: relative; z-index: 1; }
button, select, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
::selection { color: var(--pmf-ivory); background: rgba(255, 90, 79, .48); }

.container {
  width: min(1180px, 100%);
  padding: 18px 24px 64px;
}

header {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 76px 24px 22px;
  color: var(--pmf-ivory);
  text-align: left;
}

.brand-lockup {
  justify-content: flex-start;
  gap: 13px;
  color: var(--pmf-ivory);
  font-size: clamp(30px, 4vw, 45px);
  font-weight: 850;
  letter-spacing: -.048em;
}

.brand-mark {
  width: 43px;
  height: 43px;
  padding: 8px;
  border: 1px solid rgba(255, 119, 108, .42);
  border-radius: 50%;
  background: #181415;
  box-shadow: 0 0 0 5px rgba(255, 90, 79, .07), 0 14px 30px rgba(0,0,0,.32);
  transform: none;
  filter: none;
}

header .subtitle {
  margin-top: 9px;
  color: var(--pmf-muted);
  font-size: 15px;
  font-weight: 520;
  letter-spacing: .005em;
}

.top-right-cluster {
  top: 17px;
  right: max(20px, calc((100vw - 1180px) / 2 + 24px));
  gap: 7px;
}

.language-switcher,
.utility-button,
.auth-button {
  min-height: 42px;
  color: var(--pmf-muted);
  background: rgba(18, 16, 18, .88);
  border: 1px solid var(--pmf-line);
  box-shadow: none;
  backdrop-filter: blur(18px);
}

.language-select {
  color: var(--pmf-ivory);
  color-scheme: dark;
  background: #171416;
  border-color: var(--pmf-line);
}

.language-select:hover,
.language-select:focus-visible,
.utility-button:hover,
.auth-button:hover {
  color: var(--pmf-ivory);
  background: #211b1b;
  border-color: rgba(255, 90, 79, .48);
  outline-color: rgba(255, 90, 79, .24);
}

.utility-button:hover,
.auth-button:hover { transform: translateY(-1px); }

.auth-avatar {
  color: #170e0d;
  background: var(--pmf-coral);
  box-shadow: none;
}

.auth-menu {
  color: var(--pmf-ivory);
  background: rgba(20, 17, 18, .98);
  border-color: var(--pmf-line);
  box-shadow: var(--pmf-shadow);
}

.auth-menu-subtitle,
.auth-note,
.auth-divider { color: var(--pmf-muted); }
.auth-create { color: #160c0b; background: var(--pmf-coral); border-color: var(--pmf-coral); }
.auth-create:hover { background: var(--pmf-coral-hot); }

.resume-card {
  color: var(--pmf-ivory);
  background: #171416;
  border: 1px solid var(--pmf-line);
  border-radius: 14px;
  box-shadow: none;
}
.resume-subtitle { color: var(--pmf-muted); }
.resume-button { color: #170d0c; background: var(--pmf-coral); border: 0; }

/* Editorial hero: one clear decision, no dashboard-style nesting. */
.main-card.quiz-entry-hero {
  position: relative;
  grid-template-columns: minmax(0, 1.03fr) minmax(360px, .97fr);
  align-items: center;
  min-height: 530px;
  padding: 52px 0 66px;
  gap: clamp(30px, 5vw, 76px);
  overflow: visible;
  color: var(--pmf-ivory);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--pmf-line);
  border-bottom: 1px solid var(--pmf-line);
  border-radius: 0;
  box-shadow: none;
  animation: none;
}

.main-card.quiz-entry-hero::before {
  content: "CURATED FOR TONIGHT";
  position: absolute;
  top: 20px;
  left: 0;
  width: auto;
  height: auto;
  color: var(--pmf-faint);
  background: none;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .19em;
  transform: none;
  animation: none;
}

.main-card.quiz-entry-hero::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1%;
  width: 430px;
  height: 430px;
  border: 1px solid rgba(255, 90, 79, .07);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 90, 79, .105), transparent 66%);
  box-shadow: 0 0 120px rgba(255, 90, 79, .06);
  transform: translateY(-50%);
  pointer-events: none;
}

.main-card.quiz-entry-hero:hover {
  transform: none;
  box-shadow: none;
}

.quiz-entry-hero .main-card-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  padding: 0;
}

.quiz-entry-hero .cta-badge {
  margin-bottom: 20px;
  padding: 0;
  color: var(--pmf-coral-hot);
  background: transparent;
  border: 0;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .18em;
}

.quiz-entry-hero h2 {
  max-width: 650px;
  margin-bottom: 22px;
  color: var(--pmf-ivory);
  font-size: clamp(51px, 6.4vw, 78px);
  font-weight: 820;
  line-height: .96;
  letter-spacing: -.063em;
  text-wrap: balance;
}

.quiz-entry-hero p {
  max-width: 600px;
  color: var(--pmf-muted);
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.62;
}

.cta-trust-row {
  gap: 10px 22px;
  margin-top: 25px;
}

.cta-trust-pill {
  padding: 0;
  color: #8f8782;
  background: transparent;
  border: 0;
  font-size: 11px;
  font-weight: 680;
  letter-spacing: .025em;
}

.cta-trust-dot {
  background: var(--pmf-mint);
  box-shadow: 0 0 0 4px rgba(128, 215, 190, .10);
}

.cta-primary-button {
  width: fit-content;
  min-height: 60px;
  margin-top: 31px;
  padding: 0 10px 0 25px;
  color: #170d0c;
  background: var(--pmf-coral);
  border: 1px solid var(--pmf-coral);
  border-radius: 999px;
  box-shadow: 0 15px 34px rgba(255, 90, 79, .18);
}

.cta-primary-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--pmf-ivory);
  background: #1a1010;
  border-radius: 50%;
  box-shadow: none;
}

.quiz-entry-hero:hover .cta-primary-button {
  background: var(--pmf-coral-hot);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(255, 90, 79, .24);
}

.quiz-entry-hero .cta-visual {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 410px;
  overflow: visible;
  padding: 0;
  background: url("ui/pmf-hero-objects-v3.png") center / contain no-repeat;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 34px 35px rgba(0, 0, 0, .48));
  transform: rotate(1.2deg);
}

.quiz-entry-hero .cta-visual > * { display: none; }
.quiz-entry-hero .cta-visual::before { content: none; }

.surprise-area {
  justify-content: flex-start;
  margin: 24px 0 82px;
}

.surprise-button {
  min-height: 49px;
  padding: 0 20px;
  color: var(--pmf-ivory);
  background: transparent;
  border: 1px solid var(--pmf-line-strong);
  border-radius: 999px;
  box-shadow: none;
  font-size: 12px;
  letter-spacing: .12em;
}

.surprise-button::before { content: "✦"; margin-right: 10px; color: var(--pmf-amber); }
.surprise-button:hover {
  color: var(--pmf-ivory);
  background: #1b1717;
  border-color: rgba(255, 90, 79, .58);
  box-shadow: none;
  transform: translateY(-2px);
}

.section-title {
  margin: 0 0 26px;
  color: var(--pmf-ivory);
  font-size: clamp(25px, 3vw, 36px);
  font-weight: 780;
  letter-spacing: -.04em;
  text-align: left;
  text-transform: none;
}

.section-title::after {
  content: "";
  display: inline-block;
  width: 42px;
  height: 3px;
  margin: 0 0 8px 14px;
  border-radius: 999px;
  background: var(--pmf-coral);
}

.genres {
  gap: 15px;
}

.genre {
  min-height: 300px;
  overflow: hidden;
  background-color: #191617;
  border: 1px solid var(--pmf-line) !important;
  border-radius: 12px;
  box-shadow: none !important;
  transition: transform .24s ease, border-color .24s ease !important;
}

.genre::after {
  background: linear-gradient(180deg, rgba(11,10,12,.02) 15%, rgba(11,10,12,.2) 48%, rgba(11,10,12,.97) 100%);
}

.genre:hover {
  border-color: rgba(255, 90, 79, .56) !important;
  box-shadow: 0 24px 50px rgba(0,0,0,.34) !important;
  transform: translateY(-6px) !important;
}

.genre h3 {
  font-size: 24px;
  font-weight: 760;
  letter-spacing: -.03em;
}

.genre p { color: rgba(246,241,232,.65) !important; }

/* Quiz, Explore and Library */
#recommendation,
#results,
#explore,
#library { color: var(--pmf-ivory); }

#recommendation .container,
#results .container,
#explore .container,
#library .container {
  width: min(1120px, 100%);
  padding-top: 84px;
}

#recommendation h1,
#results h1,
#explore h1,
#library h1 {
  color: var(--pmf-ivory);
  font-size: clamp(36px, 5vw, 58px);
  font-weight: 820;
  letter-spacing: -.055em;
}

.subtitle { color: var(--pmf-muted); }

.back,
.quiz-home-back {
  color: var(--pmf-muted);
  background: #141213;
  border: 1px solid var(--pmf-line);
  box-shadow: none;
}

.back:hover,
.quiz-home-back:hover {
  color: var(--pmf-ivory);
  background: #1e1919;
  border-color: rgba(255, 90, 79, .52);
  transform: translateY(-1px);
}

.quiz-home-back-icon {
  color: #170d0c;
  background: var(--pmf-coral);
  box-shadow: none;
}

.question-box {
  max-width: 880px;
  padding: clamp(28px, 5vw, 58px);
  color: var(--pmf-ivory);
  background: #141213;
  border: 1px solid var(--pmf-line);
  border-radius: var(--pmf-radius);
  box-shadow: var(--pmf-shadow);
}

.question-box::before {
  top: 0;
  bottom: auto;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--pmf-coral), var(--pmf-amber), transparent 82%);
}

.question-number { color: var(--pmf-coral-hot); }
.progress { background: #292324; }
.progress-bar { background: linear-gradient(90deg, var(--pmf-coral), var(--pmf-amber)); }
.question-text { color: var(--pmf-ivory); }
.question-hint { color: var(--pmf-muted); }

.answer {
  min-height: 66px;
  color: var(--pmf-ivory);
  background: transparent;
  border: 1px solid var(--pmf-line);
  border-radius: 12px;
  box-shadow: none;
}

.answer:hover {
  color: var(--pmf-ivory);
  background: #211b1b;
  border-color: rgba(255, 90, 79, .56);
  box-shadow: none;
  transform: translateX(3px);
}

.answer.selected {
  color: var(--pmf-ivory);
  background: #2a1b1a;
  border-color: var(--pmf-coral);
  box-shadow: inset 3px 0 0 var(--pmf-coral);
}

.answer-index {
  color: var(--pmf-muted);
  background: #211e1f;
  border-color: var(--pmf-line);
  box-shadow: none;
}

.answer.selected .answer-index {
  color: #160c0b;
  background: var(--pmf-coral);
  border-color: transparent;
}

.answer-check,
.answer.selected .answer-check { color: var(--pmf-coral-hot); }

.nav-button {
  color: var(--pmf-muted);
  background: transparent;
  border-color: var(--pmf-line);
}

.nav-button:hover {
  color: #170d0c;
  background: var(--pmf-coral);
  border-color: var(--pmf-coral);
}

.nav-button:disabled { color: #625b58; background: #151314; }

/* Results */
.result-top-actions .result-action,
.show-another-button,
.library-tab,
.explore-search-button,
.explore-filter-button,
.explore-sort,
.explore-load-more {
  color: var(--pmf-muted);
  background: #171415;
  border-color: var(--pmf-line);
  box-shadow: none;
}

.result-top-actions .show-another-button,
.explore-search-button {
  color: #170d0c !important;
  background: var(--pmf-coral) !important;
  border-color: var(--pmf-coral) !important;
  box-shadow: none !important;
}

.result-top-actions .show-another-button:hover { background: var(--pmf-coral-hot) !important; }

.best-match-card {
  color: var(--pmf-ivory);
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 90, 79, .08), transparent 30%),
    #151213;
  border: 1px solid var(--pmf-line);
  border-radius: var(--pmf-radius);
  box-shadow: var(--pmf-shadow);
}

.best-match-kicker {
  padding-left: 0;
  color: var(--pmf-coral-hot);
  background: transparent;
  border: 0;
}
.best-match-title { color: var(--pmf-ivory); letter-spacing: -.045em; }
.best-match-meta { color: var(--pmf-muted); }
.best-match-score {
  color: #1a100d;
  background: var(--pmf-amber);
  box-shadow: none;
}
.best-match-reason { color: #c4bbb4; }
.match-breakdown { border-color: var(--pmf-line); }
.match-breakdown-title,
.match-factor-label { color: #d7cfc8; }
.match-factor-track { background: #302929; }
.match-factor-fill { background: linear-gradient(90deg, var(--pmf-coral), var(--pmf-amber)); }
.match-factor-score { color: var(--pmf-muted); }

.result-action {
  color: var(--pmf-ivory);
  background: #211d1d;
  border-color: var(--pmf-line);
  box-shadow: none;
}
.result-action:hover {
  color: var(--pmf-ivory);
  background: #2b2423;
  border-color: rgba(255,90,79,.5);
  transform: translateY(-1px);
}
.result-action.primary {
  color: #170d0c;
  background: var(--pmf-coral);
  border-color: var(--pmf-coral);
  box-shadow: none;
}
.result-action.saved { color: #ffaaa4; background: #311c1d; }
.result-action.watched { color: var(--pmf-mint); background: #18302a; }

.alternatives-title { color: var(--pmf-ivory); }
.alternative-card,
.movie,
.recent-card {
  color: var(--pmf-ivory);
  background: #151314;
  border: 1px solid var(--pmf-line);
  box-shadow: none;
}
.alternative-card { border-radius: 12px; }
.alternative-card:hover,
.movie:hover,
.recent-card:hover {
  border-color: rgba(255, 90, 79, .46);
  box-shadow: 0 24px 50px rgba(0,0,0,.32);
}
.alternative-meta,
.movie-meta,
.recent-meta { color: var(--pmf-muted); }
.alternative-score { color: var(--pmf-amber); }
.movie-hint { color: var(--pmf-faint); }
.genre-chip { color: #e7b477; background: #2c2119; }

.explore-toolbar,
.explore-filter-panel,
.explore-search-input,
.library-empty {
  color: var(--pmf-ivory);
  background: #151314;
  border-color: var(--pmf-line);
  box-shadow: none;
}
.explore-category-title { color: var(--pmf-ivory); }
.explore-count,
.explore-filter-field { color: var(--pmf-muted); }
.explore-filter-field select,
.explore-search-input,
.explore-sort {
  color: var(--pmf-ivory);
  color-scheme: dark;
  background: #1d191a;
  border-color: var(--pmf-line);
}
.explore-filter-check { color: var(--pmf-muted); }
.explore-filter-check input { accent-color: var(--pmf-coral); }
.explore-filter-button.active,
.library-tab.active {
  color: #170d0c;
  background: var(--pmf-coral);
  border-color: var(--pmf-coral);
  box-shadow: none;
}
.library-empty { color: var(--pmf-muted); }

.movie-modal {
  background: rgba(5, 4, 5, .88);
  backdrop-filter: blur(12px);
}
.movie-modal-card {
  color: var(--pmf-ivory);
  background: #141213;
  border: 1px solid var(--pmf-line);
  box-shadow: 0 38px 110px rgba(0,0,0,.65);
}
.movie-modal-close { color: var(--pmf-ivory); background: #211c1c; box-shadow: none; }
.movie-modal-meta,
.movie-overview { color: var(--pmf-muted); }
.movie-modal-rating { color: #190f0d; background: var(--pmf-amber); box-shadow: none; }

.match-reveal-overlay {
  background: rgba(8, 7, 8, .93);
  backdrop-filter: blur(15px);
}
.match-reveal-card { color: var(--pmf-ivory); }
.match-reveal-logo {
  background: #1b1718;
  border: 1px solid rgba(255,90,79,.4);
  box-shadow: 0 25px 55px rgba(0,0,0,.42);
}
.match-reveal-stage { color: var(--pmf-muted); }
.match-reveal-track { background: #2a2425; }
.match-reveal-progress { background: linear-gradient(90deg, var(--pmf-coral), var(--pmf-amber)); }

.movie-state-toast {
  color: var(--pmf-ivory);
  background: #1f1a1a;
  border-color: var(--pmf-line-strong);
  box-shadow: var(--pmf-shadow);
}

.tmdb-credit,
.legal-footer-links { color: var(--pmf-faint); }
.legal-footer-links a { color: var(--pmf-muted); }
.legal-footer-links a:hover { color: var(--pmf-ivory); }
.commercial-slot {
  color: var(--pmf-muted);
  background: #141213;
  border-color: var(--pmf-line);
}
.commercial-slot a { color: var(--pmf-coral-hot); }

@media (max-width: 980px) {
  .main-card.quiz-entry-hero {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-bottom: 50px;
  }
  .quiz-entry-hero .cta-visual {
    width: min(620px, 100%);
    min-height: 370px;
    justify-self: center;
  }
  .main-card.quiz-entry-hero::after { right: 12%; }
  .genres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  header { padding: 100px 16px 20px; }
  .container { padding-inline: 16px; }
  .top-right-cluster { top: 9px; left: 9px; right: 9px; }
  .top-right-cluster .utility-button { min-height: 40px; padding-inline: 10px; }
  .brand-lockup { font-size: 34px; }
  .brand-mark { width: 40px; height: 40px; }
  .main-card.quiz-entry-hero {
    min-height: 0;
    padding: 50px 0 35px;
  }
  .quiz-entry-hero h2 { font-size: clamp(45px, 13.4vw, 60px); }
  .quiz-entry-hero p { font-size: 15px; }
  .cta-trust-row { gap: 9px 15px; }
  .quiz-entry-hero .cta-visual { display: block; min-height: 310px; }
  .main-card.quiz-entry-hero::after {
    right: 50%;
    width: 340px;
    height: 340px;
    transform: translate(50%, -5%);
  }
  .surprise-area { margin: 18px 0 66px; }
  .genres { gap: 12px; }
  .genre { min-height: 240px; }
  #recommendation .container,
  #results .container,
  #explore .container,
  #library .container { padding-top: 84px; }
  .question-box { padding: 28px 18px 30px; border-radius: 14px; }
  .answers.dense { grid-template-columns: 1fr; }
  .answer { min-height: 63px; }
  .best-match-card { border-radius: 14px; }
}

/* Account launch: keep every header control measurable and inside the viewport. */
.top-right-cluster .app-utility-bar { order: 0; }
.top-right-cluster .auth-shell {
  order: 1;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 0 auto;
  min-width: max-content;
}
.top-right-cluster .auth-button {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.top-right-cluster .language-switcher { order: 2; }

@media (max-width: 520px) {
  .genres { grid-template-columns: 1fr 1fr; }
  .genre { min-height: 210px; }
  .genre h3 { padding-top: 140px; margin-inline: 14px; font-size: 20px; }
  .genre p { margin-inline: 14px; margin-bottom: 14px; font-size: 12px; }
  .quiz-entry-hero .cta-visual { display: block; min-height: 270px; }
  .alternative-grid { grid-template-columns: 1fr; }
  .auth-menu {
    position: fixed;
    top: 104px;
    right: auto;
    left: 50%;
    width: min(286px, calc(100vw - 18px));
    max-height: calc(100vh - 116px);
    overflow-y: auto;
    transform: translate(-50%, -8px) scale(.985);
    transform-origin: top center;
  }
  .auth-menu.open { transform: translate(-50%, 0) scale(1); }
  .result-top-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .result-top-actions .show-another-button,
  .result-top-actions .restart-quiz-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Compact 3D control language. Each cell is clipped as an intentional dark medal. */
#watchlistUtilityButton,
#watchedUtilityButton,
#libraryWatchlistTab,
#libraryWatchedTab,
.surprise-button,
.explore-search-button,
.show-another-button,
.restart-quiz-button,
.back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

#watchlistUtilityButton::before,
#watchedUtilityButton::before,
#libraryWatchlistTab::before,
#libraryWatchedTab::before,
.surprise-button::before,
.explore-search-button::before,
.show-another-button::before,
.restart-quiz-button::before,
.back::before,
.quiz-home-back-icon {
  content: "";
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  margin: 0;
  background-image: url("ui/pmf-utility-icons-v1.png");
  background-repeat: no-repeat;
  background-size: 300% 200%;
  border: 1px solid rgba(211, 154, 85, .26);
  border-radius: 9px;
  box-shadow: 0 5px 12px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.04);
}

#watchlistUtilityButton::before,
#libraryWatchlistTab::before { background-position: 0 0; }

#watchedUtilityButton::before,
#libraryWatchedTab::before { background-position: 50% 0; }

.surprise-button::before { background-position: 100% 0; }
.explore-search-button::before { background-position: 0 100%; }
.show-another-button::before,
.restart-quiz-button::before { background-position: 50% 100%; }
.back::before,
.quiz-home-back-icon { background-position: 100% 100%; }

.quiz-home-back-icon {
  display: block;
  flex-basis: 32px;
  width: 32px;
  height: 32px;
  font-size: 0;
  background-color: #211814;
}

.show-another-button::before,
.restart-quiz-button::before {
  flex-basis: 30px;
  width: 30px;
  height: 30px;
}

.surprise-button::before {
  flex-basis: 31px;
  width: 31px;
  height: 31px;
}

@media (max-width: 620px) {
  #watchlistUtilityButton::before,
  #watchedUtilityButton::before,
  #libraryWatchlistTab::before,
  #libraryWatchedTab::before,
  .explore-search-button::before,
  .show-another-button::before,
  .restart-quiz-button::before,
  .back::before {
    flex-basis: 24px;
    width: 24px;
    height: 24px;
    border-radius: 7px;
  }
}