html, body {
  height: 100%;
  overflow: hidden;
}

/* Global theme vars — the one section every other section falls back to when it hasn't been
   overridden. Declared here (rather than inlined as var() fallbacks) because each is consumed by
   more than one selector below, so one canonical default keeps them from drifting apart.
   Clicker/Unit Display/Shop vars are intentionally NOT declared here — they're single- or
   double-use, so their defaults are inlined as var(--x, <literal>) at the one place they're read;
   see js/viewer.js applyTheme for how the admin theme editor overwrites any of these at runtime. */
:root {
  --global-font-family: sans-serif;
  --global-font-weight: normal;
  --global-font-style: normal;
  --global-text-decoration: none;
  --global-letter-spacing: normal;
  --global-text-color: #ffffff;
  --global-accent-color: #ffd700;
  --global-overlay-bg: rgba(0, 0, 0, 0.85);

  --global-page-bg: #14141c;
  --global-page-bg-image: none;
  --global-page-bg-size: cover;
  --global-page-bg-position: center;
  --global-page-bg-repeat: no-repeat;
}

/* Page background lives on body (not just #viewer-main) so the translucent sidebar panel
   composites over the real page background instead of over nothing. */
body {
  margin: 0;
  font-family: var(--global-font-family);
  color: var(--global-text-color);
  font-weight: var(--global-font-weight);
  font-style: var(--global-font-style);
  text-decoration: var(--global-text-decoration);
  letter-spacing: var(--global-letter-spacing);
  background-color: var(--global-page-bg);
  background-image: var(--global-page-bg-image);
  background-size: var(--global-page-bg-size);
  background-position: var(--global-page-bg-position);
  background-repeat: var(--global-page-bg-repeat);
}

/* --- Viewer dashboard ---------------------------------------------------- */

#viewer-dashboard {
  display: flex;
  height: 100vh;
  box-sizing: border-box;
}

/* --- Unit Display: sidebar (currency total, per-second rate) ------------- */

#viewer-sidebar {
  flex: 0 0 var(--unit-sidebar-width, clamp(200px, 22vw, 340px));
  background-color: var(--unit-sidebar-bg, rgba(0, 0, 0, 0.55));
  background-image: var(--unit-sidebar-bg-image, none);
  background-size: var(--unit-sidebar-bg-size, cover);
  background-position: var(--unit-sidebar-bg-position, center);
  background-repeat: var(--unit-sidebar-bg-repeat, no-repeat);
  border-right: 1px solid var(--unit-sidebar-border, rgba(255, 255, 255, 0.15));
  color: var(--unit-sidebar-text, #ffffff);
  padding: clamp(12px, 2vw, 24px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.5vh, 16px);
  overflow-y: auto;
  box-sizing: border-box;
}

#viewer-live-status {
  align-self: flex-start;
  font-weight: bold;
  font-size: clamp(0.75rem, 1.2vw, 0.95rem);
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 999px;
  background: #777;
  color: #fff;
}

#viewer-live-status.live {
  background: #2ecc71;
  color: #063;
}

#viewer-live-status.paused {
  background: #e0a72e;
  color: #332400;
}

#viewer-currency {
  font-size: var(--unit-currency-size, clamp(2rem, 6vw, 4rem));
  font-family: var(--unit-currency-family, inherit);
  letter-spacing: var(--unit-currency-letter-spacing, inherit);
  font-weight: var(--unit-currency-weight, bold);
  font-style: var(--unit-currency-style, normal);
  text-decoration: var(--unit-currency-decoration, none);
  color: var(--unit-currency-color, inherit);
  line-height: 1;
}

.hidden {
  display: none;
}

#viewer-unit-label {
  font-size: var(--unit-label-size, clamp(0.9rem, 1.5vw, 1.1rem));
  font-family: var(--unit-label-family, inherit);
  letter-spacing: var(--unit-label-letter-spacing, inherit);
  color: var(--unit-label-color, inherit);
  font-weight: var(--unit-label-weight, inherit);
  font-style: var(--unit-label-style, inherit);
  text-decoration: var(--unit-label-decoration, inherit);
  opacity: 0.85;
}

#viewer-rate {
  font-size: var(--unit-rate-size, clamp(0.85rem, 1.3vw, 1rem));
  font-family: var(--unit-rate-family, inherit);
  letter-spacing: var(--unit-rate-letter-spacing, inherit);
  color: var(--unit-rate-color, inherit);
  font-weight: var(--unit-rate-weight, inherit);
  font-style: var(--unit-rate-style, inherit);
  text-decoration: var(--unit-rate-decoration, inherit);
  opacity: 0.75;
}

/* --- Unit Display: hero (Phase 5c) --------------------------------------- */
/* The section's sole icon (topic 3a2 removed the small inline twin that used to sit next to the
   currency number) — sourced from engine_state.unit_image the same way (see viewer.js
   pollPublicState), styled by the Theme tab's "Hero image" card. */

#viewer-hero {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

#viewer-hero-image {
  height: var(--unit-hero-size, clamp(8rem, 22vw, 16rem));
  width: auto;
  max-width: var(--unit-hero-max-width, 90%);
  object-fit: contain;
  filter: drop-shadow(0 0 var(--unit-hero-glow-size, 28px) var(--unit-hero-glow-color, rgba(255, 215, 0, 0.55)));
}

#viewer-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--global-page-bg);
  background-image: var(--global-page-bg-image);
  background-size: var(--global-page-bg-size);
  background-position: var(--global-page-bg-position);
  background-repeat: var(--global-page-bg-repeat);
}

/* Moved here from the sidebar (topic 3a1) — centered atop the middle section, directly above
   the ticker, so hiding it (Theme -> Global's "Hide title") leaves the ticker as the topmost
   element for free (see the DOM comment in index.html). */
#viewer-title {
  margin: 0;
  padding: clamp(12px, 2vw, 24px) clamp(12px, 2vw, 24px) 0;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  text-align: center;
}

/* --- Ticker (Phase 5g; --hud-ticker-* vars + editors added 5h) ------------
   opacity is toggled between 0 and its resting 0.75 by viewer.js's rotation timer — the
   transition here is what turns that swap into a cross-fade instead of a jump-cut. */

#viewer-ticker {
  flex: none;
  padding: clamp(8px, 1.2vw, 16px) clamp(12px, 2vw, 24px) 0;
  font-size: var(--hud-ticker-size, 0.9rem);
  font-family: var(--hud-ticker-family, inherit);
  letter-spacing: var(--hud-ticker-letter-spacing, inherit);
  color: var(--hud-ticker-color, var(--global-text-color));
  font-weight: var(--hud-ticker-weight, inherit);
  font-style: var(--hud-ticker-style, inherit);
  text-decoration: var(--hud-ticker-decoration, inherit);
  background: var(--hud-ticker-bg, transparent);
  border-radius: 6px;
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  transition: opacity 0.3s ease;
}

/* --- Entity stage: the "owned collection" strip ---------------------------
   Unlocked-only (see viewer.js renderStage) — a still-locked/hidden/revealed entity lives in
   the Store panel instead (Phase 5d). Was a wrapping grid; now a single row so unlocked sprites
   read left-to-right in unlock order on a common baseline, the way Cookie Clicker's grandma row
   does. --global-stage-padding padded a full-height wrapping grid before this change — same var,
   shorter box, so a large existing value will look different than it used to. */

#stage {
  flex: 1;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  overflow-x: auto;
  gap: var(--global-stage-gap, 12px);
  padding: var(--global-stage-padding, clamp(12px, 2vw, 24px));
  box-sizing: border-box;
}

/* Universal box layout — nothing themed lives here. Appearance (size/color/border/background/
   label font) is entirely per-type below, since Clicker (character) and Shop (milestone/boost)
   are themed as separate sections. */
.entity-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.entity-box img {
  width: 100%;
  object-fit: contain;
}

.entity-box__label {
  margin-top: 4px;
  text-align: center;
  word-break: break-word;
}

/* --- Clicker: character panels -------------------------------------------- */

.entity-box--character {
  width: var(--clicker-box-width, clamp(90px, 12vw, 140px));
  padding: var(--clicker-box-padding, 8px);
  border-radius: var(--clicker-box-radius, 8px);
  border: var(--clicker-box-border-width, 0px) solid var(--clicker-box-border-color, transparent);
  background-color: var(--clicker-box-bg, rgba(0, 0, 0, 0.4));
  background-image: var(--clicker-box-bg-image, none);
  background-size: var(--clicker-box-bg-size, cover);
  background-position: var(--clicker-box-bg-position, center);
  background-repeat: var(--clicker-box-bg-repeat, no-repeat);
}

.entity-box--character img {
  height: var(--clicker-box-height, clamp(64px, 8.5vw, 100px));
}

.entity-box--character .entity-box__label {
  font-size: var(--clicker-label-size, 0.9em);
  font-family: var(--clicker-label-family, inherit);
  letter-spacing: var(--clicker-label-letter-spacing, inherit);
  color: var(--clicker-label-color, inherit);
  font-weight: var(--clicker-label-weight, inherit);
  font-style: var(--clicker-label-style, inherit);
  text-decoration: var(--clicker-label-decoration, inherit);
}

/* --- Shop: milestone/boost panels ------------------------------------------ */

.entity-box--milestone,
.entity-box--boost {
  width: var(--shop-box-width, clamp(90px, 12vw, 140px));
  padding: var(--shop-box-padding, 8px);
  border-radius: var(--shop-box-radius, 8px);
  border: var(--shop-box-border-width, 0px) solid var(--shop-box-border-color, transparent);
  background-color: var(--shop-box-bg, rgba(0, 0, 0, 0.4));
  background-image: var(--shop-box-bg-image, none);
  background-size: var(--shop-box-bg-size, cover);
  background-position: var(--shop-box-bg-position, center);
  background-repeat: var(--shop-box-bg-repeat, no-repeat);
}

.entity-box--milestone img,
.entity-box--boost img {
  height: var(--shop-box-height, clamp(64px, 8.5vw, 100px));
}

.entity-box--milestone .entity-box__label,
.entity-box--boost .entity-box__label {
  font-size: var(--shop-label-size, 0.9em);
  font-family: var(--shop-label-family, inherit);
  letter-spacing: var(--shop-label-letter-spacing, inherit);
  color: var(--shop-label-color, inherit);
  font-weight: var(--shop-label-weight, inherit);
  font-style: var(--shop-label-style, inherit);
  text-decoration: var(--shop-label-decoration, inherit);
}

/* State-driven appearance (see js/entityBox.js entityBoxState) — the box never swaps to a
   different static image per state, only these classes change. Shared across both types. */
.entity-box--hidden {
  opacity: 0.25;
}

.entity-box--locked img,
.entity-box--revealed img {
  filter: grayscale(1) brightness(0.55);
}

.entity-box--revealed {
  outline: 2px dashed var(--global-accent-color);
}

.entity-box--unlocked {
  opacity: 1;
  filter: none;
}

/* Characters/Milestones with an el_link open their Extra Life donation page on click. */
.entity-box[data-el-link] {
  cursor: pointer;
}

/* --- Store panel (shell only — rows wired in Phase 5d) -------------------- */

#viewer-store {
  flex: 0 0 var(--store-panel-width, clamp(240px, 26vw, 380px));
  background-color: var(--store-panel-bg, rgba(0, 0, 0, 0.55));
  background-image: var(--store-panel-bg-image, none);
  background-size: var(--store-panel-bg-size, cover);
  background-position: var(--store-panel-bg-position, center);
  background-repeat: var(--store-panel-bg-repeat, no-repeat);
  border-left: 1px solid var(--store-panel-border, rgba(255, 255, 255, 0.15));
  padding: clamp(12px, 2vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  box-sizing: border-box;
}

#store-header {
  margin: 0;
  font-size: var(--store-header-size, 1.1rem);
  font-family: var(--store-header-family, inherit);
  letter-spacing: var(--store-header-letter-spacing, inherit);
  color: var(--store-header-color, inherit);
  font-weight: var(--store-header-weight, bold);
  font-style: var(--store-header-style, normal);
  text-decoration: var(--store-header-decoration, none);
}

#store-owned-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#store-owned-icons img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
}

#store-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

#store-empty-note {
  margin: 0;
  color: var(--global-text-color);
  opacity: 0.6;
  font-size: 0.85rem;
  font-style: italic;
}

/* --- Store rows (Phase 5d) ------------------------------------------------
   Every --store-row-*/--store-progress-* var is read here with an inlined literal fallback,
   matching the theming convention — the `store` THEME_SCHEMA section that edits them is 5h;
   nothing here depends on it existing yet. --store-panel-*/--store-header-* already exist above
   (shell-only until now); this section is the concrete gap that 5d fills. */

.store-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--store-row-gap, 10px);
  padding: var(--store-row-padding, 8px 10px);
  border-radius: var(--store-row-radius, 8px);
  background-color: var(--store-row-bg, rgba(0, 0, 0, 0.35));
  box-sizing: border-box;
}

.store-row--locked,
.store-row--revealed {
  background-color: var(--store-row-bg-locked, rgba(0, 0, 0, 0.35));
}

.store-row--affordable {
  background-color: var(--store-row-bg-affordable, rgba(46, 204, 113, 0.25));
}

.store-row--hidden {
  opacity: 0.5;
}

.store-row[data-el-link],
.store-row[data-claim-id] {
  cursor: pointer;
}

.store-row__icon {
  flex: none;
  width: var(--store-row-icon-size, 40px);
  height: var(--store-row-icon-size, 40px);
  object-fit: contain;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
}

.store-row__main {
  flex: 1 1 140px;
  min-width: 0;
}

.store-row__name {
  font-size: var(--store-row-name-size, 0.95em);
  font-family: var(--store-row-name-family, inherit);
  letter-spacing: var(--store-row-name-letter-spacing, inherit);
  color: var(--store-row-name-color, inherit);
  font-weight: var(--store-row-name-weight, bold);
  font-style: var(--store-row-name-style, normal);
  text-decoration: var(--store-row-name-decoration, none);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.store-row__gate {
  font-size: var(--store-row-meta-size, 0.75em);
  font-family: var(--store-row-meta-family, inherit);
  letter-spacing: var(--store-row-meta-letter-spacing, inherit);
  color: var(--store-row-meta-color, inherit);
  font-weight: var(--store-row-meta-weight, inherit);
  font-style: var(--store-row-meta-style, inherit);
  text-decoration: var(--store-row-meta-decoration, inherit);
  opacity: 0.75;
}

.store-row__progress {
  flex: 1 1 100%;
  height: var(--store-progress-height, 6px);
  border-radius: var(--store-progress-radius, 999px);
  background: var(--store-progress-track, rgba(255, 255, 255, 0.15));
  overflow: hidden;
}

.store-row__progress-fill {
  height: 100%;
  width: 0%;
  background: var(--store-progress-fill, #ffd700);
  transition: width 0.4s ease;
}

.store-row--affordable .store-row__progress-fill {
  background: var(--store-progress-fill-affordable, #2ecc71);
}

.store-row__meta {
  flex: 1 1 100%;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.store-row__progress-text {
  font-size: var(--store-row-meta-size, 0.75em);
  font-family: var(--store-row-meta-family, inherit);
  letter-spacing: var(--store-row-meta-letter-spacing, inherit);
  color: var(--store-row-meta-color, inherit);
  font-weight: var(--store-row-meta-weight, inherit);
  font-style: var(--store-row-meta-style, inherit);
  text-decoration: var(--store-row-meta-decoration, inherit);
  opacity: 0.85;
}

.store-row__count {
  font-size: var(--store-row-count-size, 0.75em);
  font-family: var(--store-row-count-family, inherit);
  letter-spacing: var(--store-row-count-letter-spacing, inherit);
  color: var(--store-row-count-color, inherit);
  font-weight: var(--store-row-count-weight, inherit);
  font-style: var(--store-row-count-style, inherit);
  text-decoration: var(--store-row-count-decoration, inherit);
  opacity: 0.85;
}

/* --- Default Booster box (Phase 5c-2) ------------------------------------
   The one repeatable purchase (the Cursor-equivalent) — a themeable first row inside #store-list,
   not the old fixed-position pill+dropdown. Every --booster-* var is read here with an inlined
   literal fallback per the theming convention; the `booster` THEME_SCHEMA section that edits them
   is 5c-3 — nothing here depends on it existing yet. */

.booster-box {
  flex: none;
  box-sizing: border-box;
  display: flex;
  flex-direction: var(--booster-image-placement, row);
  align-items: center;
  gap: var(--booster-box-gap, 10px);
  padding: var(--booster-box-padding, 8px 10px);
  border-radius: var(--booster-box-radius, 8px);
  border: var(--booster-box-border-width, 0px) solid var(--booster-box-border-color, transparent);
  background-color: var(--booster-box-bg, rgba(0, 0, 0, 0.4));
  background-image: var(--booster-box-bg-image, none);
  background-size: var(--booster-box-bg-size, cover);
  background-position: var(--booster-box-bg-position, center);
  background-repeat: var(--booster-box-bg-repeat, no-repeat);
  cursor: pointer;
}

.booster-box__icon {
  flex: none;
  width: var(--booster-icon-width, 48px);
  height: var(--booster-icon-height, 48px);
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.08);
  background-image: var(--booster-icon-image, none);
  background-size: var(--booster-icon-fit, contain);
  background-position: var(--booster-icon-position, center);
  background-repeat: no-repeat;
}

.booster-box__main {
  flex: 1;
  min-width: 0;
}

.booster-box__name {
  font-size: var(--booster-name-size, 1em);
  font-family: var(--booster-name-family, inherit);
  letter-spacing: var(--booster-name-letter-spacing, inherit);
  color: var(--booster-name-color, inherit);
  font-weight: var(--booster-name-weight, bold);
  font-style: var(--booster-name-style, normal);
  text-decoration: var(--booster-name-decoration, none);
}

.booster-box__rule {
  font-size: var(--booster-rule-size, 0.8em);
  font-family: var(--booster-rule-family, inherit);
  letter-spacing: var(--booster-rule-letter-spacing, inherit);
  color: var(--booster-rule-color, inherit);
  font-weight: var(--booster-rule-weight, inherit);
  font-style: var(--booster-rule-style, inherit);
  text-decoration: var(--booster-rule-decoration, inherit);
  opacity: 0.8;
}

.booster-box__count {
  font-size: var(--booster-count-size, 0.8em);
  font-family: var(--booster-count-family, inherit);
  letter-spacing: var(--booster-count-letter-spacing, inherit);
  color: var(--booster-count-color, inherit);
  font-weight: var(--booster-count-weight, inherit);
  font-style: var(--booster-count-style, inherit);
  text-decoration: var(--booster-count-decoration, inherit);
  opacity: 0.7;
}

/* --- Default Booster box prompt (Phase 5c-2) -----------------------------
   Replaces the old inline dropdown. No new theme vars — reuses --global-overlay-bg/
   --global-accent-color exactly as the old #booster-picker did, so the Global section's existing
   "Popups & overlay" card already themes it. The backdrop dim itself is intentionally NOT a var
   (matching admin.css's own .modal backdrop), since it's structural, not a themed surface. */

#booster-modal {
  display: none;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 16, 0.7);
  z-index: 40;
}

#booster-modal.open {
  display: flex;
}

.booster-modal__panel {
  background: var(--global-overlay-bg);
  color: var(--global-text-color);
  border-radius: 10px;
  padding: 20px 24px;
  max-width: 360px;
  max-height: 70vh;
  overflow-y: auto;
  box-sizing: border-box;
}

.booster-modal__title {
  margin: 0 0 10px;
  font-size: 1.1em;
}

.booster-modal__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.booster-modal__list li + li {
  margin-top: 6px;
}

.booster-modal__list a {
  color: var(--global-accent-color);
  text-decoration: none;
}

.booster-modal__close {
  margin-top: 14px;
  font-size: 0.9em;
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: var(--global-accent-color);
  color: #111;
}

/* --- Claim landing ------------------------------------------------------- */
/* Structure only — the actual Redeem/Exit/Congratulations/Already-redeemed states and the
   claim-link routing that toggles body.claim-mode land in Phase 11. */

#claim-box {
  display: none;
  pointer-events: none;
}

body.claim-mode #viewer-dashboard {
  display: none;
}

body.claim-mode #claim-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  pointer-events: auto;
  height: 100vh;
  box-sizing: border-box;
  padding: 24px;
  text-align: center;
}

.claim-box__name {
  font-size: 1.8em;
  font-weight: bold;
}

.claim-box__message {
  font-size: 1.4em;
  max-width: 480px;
}

#claim-box button {
  pointer-events: auto;
  font-size: 1em;
  padding: 10px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: var(--global-accent-color);
  color: #111;
}

/* --- Presentation-queue playback overlay --------------------------------- */

#presentation-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.presentation-event {
  background: var(--global-overlay-bg);
  border-radius: 12px;
  padding: 24px 32px;
  text-align: center;
  max-width: 60vw;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.presentation-event.show {
  opacity: 1;
  transform: scale(1);
}

.presentation-event img {
  max-width: 100%;
  max-height: 240px;
  display: block;
  margin: 0 auto 12px;
}

/* --- Toast stack (Phase 5f; --hud-toast-* vars + editors added 5h) --------
   `reveal`/`booster` events land here instead of the centered #presentation-overlay card (which
   stays reserved for `unlock`) — see viewer.js handlePresentationEvent. column-reverse so an
   appended toast lands at the bottom and pushes older ones up, matching the recording. Container
   is pointer-events: none so it can never eat clicks meant for the page beneath it; only the
   close button opts back in. Top-level sibling of #presentation-overlay/#claim-box, not nested
   under #viewer-dashboard, so claim-mode needs its own rule below rather than inheriting one. */

#toast-stack {
  position: fixed;
  left: 50%;
  bottom: clamp(16px, 4vh, 40px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  align-items: center;
  pointer-events: none;
  z-index: 45;
}

body.claim-mode #toast-stack {
  display: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--hud-toast-bg, var(--global-overlay-bg));
  border-radius: 10px;
  padding: 10px 14px;
  max-width: 420px;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast.show {
  opacity: 1;
  transform: scale(1);
}

.toast__icon {
  flex: none;
  width: var(--hud-toast-icon-size, 32px);
  height: var(--hud-toast-icon-size, 32px);
  object-fit: contain;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
}

.toast__main {
  min-width: 0;
}

.toast__kicker {
  font-size: var(--hud-toast-kicker-size, 1em);
  font-family: var(--hud-toast-kicker-family, inherit);
  letter-spacing: var(--hud-toast-kicker-letter-spacing, inherit);
  color: var(--hud-toast-kicker-color, inherit);
  font-weight: var(--hud-toast-kicker-weight, bold);
  font-style: var(--hud-toast-kicker-style, normal);
  text-decoration: var(--hud-toast-kicker-decoration, none);
}

.toast__body {
  font-size: var(--hud-toast-body-size, 0.9em);
  font-family: var(--hud-toast-body-family, inherit);
  letter-spacing: var(--hud-toast-body-letter-spacing, inherit);
  color: var(--hud-toast-body-color, inherit);
  font-weight: var(--hud-toast-body-weight, inherit);
  font-style: var(--hud-toast-body-style, inherit);
  text-decoration: var(--hud-toast-body-decoration, inherit);
  opacity: 0.85;
}

.toast__close {
  flex: none;
  pointer-events: auto;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 1.1em;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  padding: 0 2px;
}

.toast__close:hover {
  opacity: 1;
}

/* --- Store hover tooltip (Phase 5g; --hud-tooltip-* vars + editors added 5h) -
   One reused node, positioned by viewer.js on every pointerenter — never one per row, so hovering
   a dozen rows in a row creates zero extra DOM. pointer-events: none so it can never eat the
   row's own pointerleave; left/top are set inline by JS, not by any layout rule here. Top-level
   sibling of #toast-stack, so it gets the same explicit claim-mode rule rather than inheriting
   one — structurally moot (a hidden row's pointerenter never fires) but kept for the same
   belt-and-suspenders reason #toast-stack has its own rule. Every detail line (owned/cost/flavor/
   bullets) shares one --hud-tooltip-text-* pair rather than four, to keep the hud section at 3
   cards total per the main plan's "avoid a seven-button nav" call. */

#store-tooltip {
  position: fixed;
  display: none;
  pointer-events: none;
  z-index: 50;
  max-width: 280px;
  background: var(--hud-tooltip-bg, var(--global-overlay-bg));
  border-radius: 10px;
  padding: 10px 12px;
  box-sizing: border-box;
}

#store-tooltip.show {
  display: block;
}

body.claim-mode #store-tooltip {
  display: none;
}

.store-tooltip__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.store-tooltip__icon {
  flex: none;
  width: var(--hud-tooltip-icon-size, 28px);
  height: var(--hud-tooltip-icon-size, 28px);
  object-fit: contain;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
}

.store-tooltip__name {
  flex: 1 1 auto;
  font-size: var(--hud-tooltip-name-size, 1em);
  font-family: var(--hud-tooltip-name-family, inherit);
  letter-spacing: var(--hud-tooltip-name-letter-spacing, inherit);
  color: var(--hud-tooltip-name-color, inherit);
  font-weight: var(--hud-tooltip-name-weight, bold);
  font-style: var(--hud-tooltip-name-style, normal);
  text-decoration: var(--hud-tooltip-name-decoration, none);
  min-width: 0;
}

.store-tooltip__owned {
  flex: none;
  font-size: var(--hud-tooltip-text-size, 0.8em);
  font-family: var(--hud-tooltip-text-family, inherit);
  letter-spacing: var(--hud-tooltip-text-letter-spacing, inherit);
  color: var(--hud-tooltip-text-color, inherit);
  font-weight: var(--hud-tooltip-text-weight, inherit);
  font-style: var(--hud-tooltip-text-style, normal);
  text-decoration: var(--hud-tooltip-text-decoration, inherit);
  opacity: 0.75;
}

.store-tooltip__cost {
  font-size: var(--hud-tooltip-text-size, 0.85em);
  font-family: var(--hud-tooltip-text-family, inherit);
  letter-spacing: var(--hud-tooltip-text-letter-spacing, inherit);
  color: var(--hud-tooltip-text-color, inherit);
  font-weight: var(--hud-tooltip-text-weight, inherit);
  font-style: var(--hud-tooltip-text-style, normal);
  text-decoration: var(--hud-tooltip-text-decoration, inherit);
  opacity: 0.85;
  margin-bottom: 4px;
}

.store-tooltip__flavor {
  font-size: var(--hud-tooltip-text-size, 0.85em);
  font-family: var(--hud-tooltip-text-family, inherit);
  letter-spacing: var(--hud-tooltip-text-letter-spacing, inherit);
  color: var(--hud-tooltip-text-color, inherit);
  font-weight: var(--hud-tooltip-text-weight, inherit);
  font-style: var(--hud-tooltip-text-style, italic);
  text-decoration: var(--hud-tooltip-text-decoration, inherit);
  opacity: 0.75;
  margin-bottom: 6px;
}

.store-tooltip__bullets {
  margin: 0;
  padding-left: 1.1em;
  font-size: var(--hud-tooltip-text-size, 0.8em);
  font-family: var(--hud-tooltip-text-family, inherit);
  letter-spacing: var(--hud-tooltip-text-letter-spacing, inherit);
  color: var(--hud-tooltip-text-color, inherit);
  font-weight: var(--hud-tooltip-text-weight, inherit);
  font-style: var(--hud-tooltip-text-style, normal);
  text-decoration: var(--hud-tooltip-text-decoration, inherit);
  opacity: 0.85;
}

.store-tooltip__bullets li {
  margin-bottom: 2px;
}