/* =========================================================
   DIFFICULTY TIER HEADER (Standard / Game+ / Game++)
   The sidebar marquee (the box around the mode name) looks harder with the save's difficulty.
   JS: js/ui/difficulty_header.js sets data-tier="0|1|2" on every .sidebar-marquee and fills .marquee-tier.
   Token-only: the base component (.sidebar-marquee, [SNIPPET: Sidebar Mode Selector Marquee] in components.css) owns the
   layout; a tier only sets --mq-* tokens and shows its own decorations. Standard (0) sets nothing.
   ========================================================= */

/* === [SNIPPET: Difficulty Tier Marquee] === */
.marquee-flames,
.marquee-tier {
  display: none;
}

/* Game+: the full accent border (Standard uses the dark one), a second inner line and brighter bulbs */
.sidebar-marquee[data-tier="1"] {
  --mq-border: var(--sb-accent);
  --mq-bulb-gain: 2;
  --tier-chip-bg: var(--sb-accent);
  --tier-chip-fg: #000000;
  box-shadow: inset 0 0 0 1px var(--sb-accent-dark);
}

/* Game++: scorched red border and bed, orange / yellow bulbs, a row of flames burning along the top edge */
.sidebar-marquee[data-tier="2"] {
  --mq-border: #d63a0c;
  --mq-bg: #1c0600;
  --mq-bulb: #ff7a1a;
  --mq-bulb-alt: #ffd23f;
  --mq-bulb-gain: 2.5;
  --tier-chip-bg: #ff7a1a;
  --tier-chip-fg: #1c0600;
  box-shadow: inset 0 0 0 1px #6e1500;
}

/* A tier chip straddling the bottom border, pixel text on a flat block (no glow) */
.sidebar-marquee[data-tier="1"] .marquee-tier,
.sidebar-marquee[data-tier="2"] .marquee-tier {
  display: block;
  position: absolute;
  right: 6px;
  bottom: -7px;
  z-index: 2;
  padding: 2px 4px 1px;
  background: var(--tier-chip-bg);
  color: var(--tier-chip-fg);
  border: 2px solid #000000;
  font-family: var(--font-pixel);
  font-size: 7px;
  line-height: 8px;
  letter-spacing: 0.5px;
  pointer-events: none;
}

/* The flame row replaces the top bulb row. 16 x 8 art pixels per tile, drawn at 3x; the frame steps with the marquee
   chase (data-chase, js/ui/marquee_chase.js) so there is no CSS animation. The art comes from js/ui/difficulty_header_art.js
   as --flame-0 / --flame-1 / --flame-2 custom properties on :root. */
.sidebar-marquee[data-tier="2"] .marquee-flames {
  display: block;
  position: absolute;
  left: -3px;
  right: -3px;
  top: -15px;
  height: 24px;
  pointer-events: none;
  image-rendering: pixelated;
  background-image: var(--flame-0);
  background-size: 48px 24px;
  background-repeat: repeat-x;
  background-position: center bottom;
}
.sidebar-marquee[data-tier="2"][data-chase="1"] .marquee-flames { background-image: var(--flame-1); }
.sidebar-marquee[data-tier="2"][data-chase="2"] .marquee-flames { background-image: var(--flame-2); }
.sidebar-marquee[data-tier="2"] > .marquee-bulbs:first-of-type { visibility: hidden; }