/* EMOTES PAGE — page-local CSS loaded after /styles.css.
   Put emotes-only layout and polish here; do not patch the shared sheet. */

/* Intro: enough presence to establish the page without competing with Prime. */
main.wrap > .page-head:has(+ .prime-teaser) {
  max-width: 980px;
  padding-bottom: 18px;
}
main.wrap > .page-head:has(+ .prime-teaser) h1 {
  max-width: 900px;
}
main.wrap > .page-head:has(+ .prime-teaser) p {
  max-width: 660px;
  color: #98a2b2;
}

/* Prime remains the lead conversion surface, but reads as one clean offer. */
.prime-teaser {
  margin-top: 12px;
  border-radius: 20px;
}
.prime-teaser-copy > p {
  color: #a7b1c2;
}
.prime-teaser-value {
  border-color: rgba(93,216,252,.17);
  background:
    radial-gradient(circle at 60% 0,rgba(93,216,252,.10),transparent 48%),
    rgba(5,12,19,.46);
}
.prime-teaser-proof span {
  min-height: 34px;
  background: rgba(255,255,255,.028);
}

/* One control surface for filter, sort and search. */
.emote-bar {
  position: relative;
  gap: 8px;
  margin: 0 0 22px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 13px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.018),rgba(255,255,255,.006)),
    rgba(7,9,14,.70);
  box-shadow: inset 0 1px rgba(255,255,255,.03);
}
.emote-bar .emote-filters,
.emote-bar .emote-sort {
  gap: 5px;
}
.emote-bar :is(.emote-filters,.emote-sort) button {
  min-height: 36px;
  border-radius: 8px;
}
.emote-bar .clip-search {
  min-height: 40px;
  border-radius: 9px;
  background: rgba(255,255,255,.018);
}

/* Animated/static are one catalog, so keep section separators compact. */
#animated-section,
#static-section {
  margin-top: 34px;
  margin-bottom: 38px;
}
.emote-rule {
  margin-bottom: 16px;
}
.emote-rule .er-word {
  color: #dce2ec;
  font-weight: 850;
}
.emote-rule .er-line {
  background: linear-gradient(90deg,rgba(130,255,255,.28),rgba(255,255,255,.07) 45%,transparent);
}
.emote-rule .tier-tag {
  border-color: rgba(130,255,255,.16);
  background: rgba(130,255,255,.055);
  color: #aebcff;
}

/* Emote cards: reward art first, unlock detail second. */
.emote-grid {
  gap: 12px;
}
.emote {
  min-height: 158px;
  overflow: hidden;
  border-color: rgba(255,255,255,.075);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 16%,rgba(130,255,255,.065),transparent 42%),
    linear-gradient(160deg,rgba(255,255,255,.024),rgba(255,255,255,.006)),
    var(--card);
  box-shadow: inset 0 1px rgba(255,255,255,.03),0 18px 38px -36px #000;
}
.emote:hover {
  transform: translateY(-2px);
  border-color: rgba(130,255,255,.27);
  box-shadow: inset 0 1px rgba(255,255,255,.04),0 20px 44px -34px rgba(47,63,125,.55);
}
.emote .emote-img {
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.28));
}
.emote .code {
  color: #b7c0cf;
  font-weight: 760;
}
.emote .tier-line {
  color: #747f91;
}
.emote .unlock-badge {
  border-radius: 7px;
}

/* Group labels should behave like compact disclosure rows, not mini headers. */
.emote-group > summary {
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 10px;
  background: rgba(255,255,255,.012);
}
.emote-group[open] > summary {
  border-color: rgba(130,255,255,.13);
  background: rgba(130,255,255,.025);
}

/* Bottom conversion surfaces share the same visual family. */
#emote-cta {
  border-radius: 20px;
}
#freesub.prime-panel {
  border-radius: 20px;
  box-shadow:
    inset 0 1px rgba(255,255,255,.045),
    0 30px 72px -58px rgba(75,94,180,.52);
}
#freesub .prime-steps .step {
  border-color: rgba(255,255,255,.07);
}

@media (max-width: 799px) {
  .prime-teaser {
    margin-top: 6px;
    border-radius: 16px;
  }
  .emote-bar {
    padding: 8px;
    border-radius: 11px;
  }
  .emote-grid {
    gap: 9px;
  }
  .emote {
    min-height: 132px;
    border-radius: 11px;
  }
  #animated-section,
  #static-section {
    margin-top: 28px;
    margin-bottom: 32px;
  }
  #emote-cta,
  #freesub.prime-panel {
    border-radius: 16px;
  }
}

@media (max-width: 359px) {
  .emote {
    min-height: 140px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .emote,
  .emote .emote-img {
    transition: none;
  }
  .emote:hover,
  .emote:hover .emote-img {
    transform: none;
  }
}