/* ============================================================
 * user_ui — decorations
 * ============================================================
 *
 * Phase 7 Package B origin; rebuilt in the Global background
 * pass + the shared-hero pass. This file is now the SINGLE
 * definition of the two shared page decorations. Edit here,
 * every page follows — no per-page copies exist.
 *
 *   1. `.lines` — RETIRED (Global background pass). The old
 *      per-page static stripe fields are suppressed site-wide;
 *      the animated background chrome replaced them.
 *
 *   2. Shared HERO BAND — the themed about-hero-{dark,light}
 *      image band behind every page hero. One spec (ported
 *      verbatim from the Inventory page's `.iv-hero-bg`, the
 *      reference treatment): 520px tall, cover, center top,
 *      NO darkening gradient — the gradient the other pages
 *      previously stacked on top is what made the "lighting"
 *      differ per page. Rendered as a `::before` on each page
 *      root so NO template change is needed.
 *
 *   3. Shared HERO MASCOT — one placement spec (ported
 *      verbatim from the Wallet page, the reference
 *      treatment): absolute top-right 330×300 above the card,
 *      shrinking at 1024px and dropping into flow below the
 *      copy at 760px. Per-page divergent `.mascot-frame` /
 *      `.mascot-img` rules were DELETED from the page CSS
 *      files in the same pass so this is the only definition.
 *      (The Inventory `.mascot-mini` foot cats are a different
 *      class and untouched.)
 *
 * Participating pages (the hero pages): about, price_list,
 * wishlist, content (legal + FAQ), settings, wallet, giveaway,
 * inventory. Landing, trade, banned, error/maintenance pages
 * are excluded by design.
 *
 * Adding a page to the shared treatment = adding its root
 * class to the three selector lists below. Nothing else.
 * ============================================================ */

/* -------- 1. Legacy static stripe fields — retired -------- */

.lines {
  display: none;
}

/* -------- 2. Shared hero band -------- */

/* Page roots anchor the absolute band (and are the containing
   block for the shared mascot). */
.about-page,
.price-list-page,
.wishlist-page,
.content-page,
.settings-page,
.wallet-page,
.giveaway-page,
.inventory-page {
  position: relative;
}

.about-page::before,
.price-list-page::before,
.wishlist-page::before,
.content-page::before,
.settings-page::before,
.wallet-page::before,
.giveaway-page::before,
.inventory-page::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 520px;
  pointer-events: none;
  z-index: 0;
  background-image: url("/static/img/user_ui/about-hero-dark.9665028d6c61.webp");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

html[data-theme="light"] .about-page::before,
html[data-theme="light"] .price-list-page::before,
html[data-theme="light"] .wishlist-page::before,
html[data-theme="light"] .content-page::before,
html[data-theme="light"] .settings-page::before,
html[data-theme="light"] .wallet-page::before,
html[data-theme="light"] .giveaway-page::before,
html[data-theme="light"] .inventory-page::before {
  background-image: url("/static/img/user_ui/about-hero-light.e656b52132c9.webp");
}

/* -------- 3. Shared hero mascot (Wallet reference spec) -------- */

.about-page .mascot-frame,
.price-list-page .mascot-frame,
.wishlist-page .mascot-frame,
.content-page .mascot-frame,
.settings-page .mascot-frame,
.wallet-page .mascot-frame,
.giveaway-page .mascot-frame,
.inventory-page .mascot-frame {
  position: absolute;
  top: -14px;
  right: var(--pad);
  width: 330px;
  height: 300px;
  display: grid;
  place-items: center;
  z-index: 3;
  pointer-events: none;
}

.about-page .mascot-img,
.price-list-page .mascot-img,
.wishlist-page .mascot-img,
.content-page .mascot-img,
.settings-page .mascot-img,
.wallet-page .mascot-img,
.giveaway-page .mascot-img,
.inventory-page .mascot-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Tablet: shrink so the absolute mascot stops crowding the copy
   (pages keep their own copy padding rules). */
@media (max-width: 1024px) {
  .about-page .mascot-frame,
  .price-list-page .mascot-frame,
  .wishlist-page .mascot-frame,
  .content-page .mascot-frame,
  .settings-page .mascot-frame,
  .wallet-page .mascot-frame,
  .giveaway-page .mascot-frame,
  .inventory-page .mascot-frame {
    width: 200px;
    height: 200px;
    top: 6px;
  }
}

/* Phone: out of the absolute slot, into flow below the copy,
   centred (works in both grid and flex hero layouts). */
@media (max-width: 760px) {
  .about-page .mascot-frame,
  .price-list-page .mascot-frame,
  .wishlist-page .mascot-frame,
  .content-page .mascot-frame,
  .settings-page .mascot-frame,
  .wallet-page .mascot-frame,
  .giveaway-page .mascot-frame,
  .inventory-page .mascot-frame {
    position: static;
    width: 170px;
    height: 170px;
    margin: 20px auto 0;
    place-self: center;
  }
}