/* ===== IRON CENTER — connected progression home ============================
 * The Iron Center uses the landing page's design language without becoming
 * a stack of dashboard widgets. Loaded AFTER style.css (non-classic mode only) and scoped
 * under #view-iron-center, so it wins the cascade over the legacy flat
 * rules without touching them — and the classic opt-out (scoped under
 * html.ic-classic-mode) still wins over BOTH.
 *
 * Layer rules (BRAND.md, same as the landing page):
 *  - tokens only, no ad-hoc colours
 *  - gold means IRON; accent (user-themeable) is the product voice;
 *    cyan is AURA — never mixed
 *  - glow marks the moment of a gain; static UI never glows
 *  - two typefaces; caps only for kickers/stamps; no emoji
 *
 * Shared vocabulary with landing.html:
 *  - the drafting-grid + grain workshop backdrop
 *  - ledger stamps (numbered rules) as section chrome
 *  - forged plates: flat elevated slab + hairline + light-catching top edge
 *  - the molten forge bar (signature.css iron-quest-bar) untouched
 * ========================================================================= */

/* ---- Workshop backdrop: ONE flat tone, edge to edge ---------------------
 * Decorative root overlays can end at the scroll container's painted height
 * on mobile Safari and create a visible tone change mid-Iron-Path. Keep the
 * whole room on the app's base surface and disable both root pseudo-elements;
 * detail and depth belong to the game pieces, never the page wallpaper. */

#view-iron-center {
  position: relative;
  background: var(--bg-primary);
}

#view-iron-center::before,
#view-iron-center::after {
  content: none;
  display: none;
}

/* Width matches the dashboard's `.dashboard-view` (1600, centred). At 1120 the
   Iron Center sat in a narrow strip with ~400px of dead canvas either side on
   a normal desktop, which is most of why it read as a different product from
   the surface next door. `margin: 0 auto` is explicit: capping a width without
   it is exactly the bug that pinned the dashboard to the left edge. */

#view-iron-center .iron-center-view {
  position: relative;
  z-index: 1;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--space-md) var(--space-2xl);
}

/* The forged plate — the one card surface every Iron Center card shares:
 * a FLAT elevated slab with a hairline border and a light-catching top
 * edge. Deliberately no surface gradients — they read as banding on dark
 * panels; depth comes from the border, the inset light and the shadow. */

#view-iron-center .ic-quest-card,
#view-iron-center .ic-ach-card,
#view-iron-center .ic-shop-item,
#view-iron-center .ic-game-card,
#view-iron-center .ic-master-card,
#view-iron-center .ic-merchant-card,
#view-iron-center .ic-recipe-card,
#view-iron-center .ic-recognition-card,
#view-iron-center .ic-together-card,
#view-iron-center .ic-cmd-tile,
#view-iron-center .ic-forge-hero,
#view-iron-center .ic-forge-result-card,
#view-iron-center .ic-aura-hero,
#view-iron-center .ic-aura-shop-section,
#view-iron-center .ic-lb-champion,
#view-iron-center .ic-tournament,
#view-iron-center .ic-challenges,
#view-iron-center .ic-friend-echoes,
#view-iron-center .ic-reward-container,
#view-iron-center .ic-prestige-crest {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  /* --elev-1 is the dashboard's card elevation, so a card reads the same in
     both places. It replaces --shadow-sm plus a border-highlight inset: the
     inset was a second, competing edge treatment sitting on top of the
     border, and the two surfaces disagreeing about how a card is lit is a
     large part of why they felt like different products. */
  box-shadow: var(--elev-1);
}

/* Hover lift — only where hover is real (a tap must never stick). */

@media (hover: hover) {
  #view-iron-center .ic-quest-card:hover,
#view-iron-center .ic-ach-card:hover,
#view-iron-center .ic-shop-item:hover,
#view-iron-center .ic-game-card:hover,
#view-iron-center .ic-merchant-card:hover,
#view-iron-center .ic-recipe-card:hover,
#view-iron-center .ic-cmd-tile:hover {
    /* Same response as a dashboard card: the edge brightens and the surface
       rises a single pixel. 2px plus a --shadow-md bloom was a noticeably
       bigger movement than the dashboard's, so identical cards behaved
       differently depending on which tab you were on. */
    transform: translateY(-1px);
    border-color: var(--border-strong);
    box-shadow: var(--elev-2);
  }
}

#view-iron-center .ic-quest-card,
#view-iron-center .ic-ach-card,
#view-iron-center .ic-shop-item,
#view-iron-center .ic-game-card,
#view-iron-center .ic-merchant-card,
#view-iron-center .ic-recipe-card,
#view-iron-center .ic-cmd-tile {
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Rise cascade — panel children arrive one after another when a room
 * opens (the landing's stagger), instead of the whole slab appearing. */

@keyframes ic-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

#view-iron-center .iron-panel.active > * {
  animation: ic-rise 520ms var(--island-ease) backwards;
}

#view-iron-center .iron-panel.active > *:nth-child(2) { animation-delay: 50ms; }

#view-iron-center .iron-panel.active > *:nth-child(3) { animation-delay: 100ms; }

#view-iron-center .iron-panel.active > *:nth-child(4) { animation-delay: 150ms; }

#view-iron-center .iron-panel.active > *:nth-child(5) { animation-delay: 200ms; }

#view-iron-center .iron-panel.active > *:nth-child(6) { animation-delay: 250ms; }

/* The cascade STOPS at the sixth child, and that cap is the single biggest
 * thing keeping a room switch smooth. A room can hold eighty cards; animating
 * all of them is what made switching feel heavy, and the ones past the sixth
 * are below the fold, so nobody was ever watching them arrive. Measured on a
 * 6x-throttled phone profile, capping it here cut dropped frames per swap by
 * more than half. Anything past the cap simply is where it belongs. */

#view-iron-center .iron-panel.active > *:nth-child(n+7) { animation: none; }

#view-iron-center .iron-panel.active { animation: none; }

/* ----- ROOM MORPH -------------------------------------------------------
 * The welcome block sits ABOVE the room rail and belongs to Home alone, so
 * toggling it shoves the whole rail a block up or down. The rail glides that
 * distance instead of jumping — but it glides on TRANSFORM, never on height.
 *
 * An earlier pass animated the stage's `height` and the welcome block's
 * `height` directly. That reads well on paper and janks badly in practice:
 * every frame of a height transition is a main-thread layout of a room that
 * can hold eighty cards, and the main thread is already busy painting the
 * room that was just opened. Measured on a 6x-throttled phone profile it
 * roughly doubled the dropped frames per swap.
 *
 * So the layout lands in ONE pass and the movement is replayed as a FLIP:
 * JS measures the rail's line either side of the swap, offsets the rail and
 * the stage by the difference, and releases them to zero. Transform and
 * opacity only — the compositor owns the whole glide and it stays smooth
 * however heavy the room is. */

#view-iron-center {
  /* Deliberately gentler than --island-ease (an ease-out quint that spends
   * two thirds of its distance in the first third of its time, which is what
   * made the rail and the rule read as "too fast, then hanging"). */
  --ic-glide-ease: cubic-bezier(0.4, 0.05, 0.2, 1);
}

#view-iron-center .ic-panel-stage { position: relative; }

#view-iron-center .ic-sub-nav.is-gliding,
#view-iron-center .ic-panel-stage.is-gliding { will-change: transform; }

/* A greeting on its way out leaves the flow (so the rail can close the gap)
 * but stays painted where it was, fading under the rail instead of blinking
 * out from under it. The rail and stage are positioned and come later in the
 * DOM, so they paint over the ghost without needing a z-index. */

#view-iron-center .ic-home-welcome.is-ghost {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

/* Cards inside a grid cascade too (uses the existing stagger-children hook) */

#view-iron-center .stagger-children > * {
  animation: ic-rise 460ms var(--island-ease) backwards;
}

#view-iron-center .stagger-children > *:nth-child(2) { animation-delay: 40ms; }

#view-iron-center .stagger-children > *:nth-child(3) { animation-delay: 80ms; }

#view-iron-center .stagger-children > *:nth-child(4) { animation-delay: 120ms; }

#view-iron-center .stagger-children > *:nth-child(5) { animation-delay: 160ms; }

#view-iron-center .stagger-children > *:nth-child(6) { animation-delay: 200ms; }

#view-iron-center .stagger-children > *:nth-child(n+7) { animation: none; }

/* =========================================================================
 * MASTHEAD — forged title and compact currency resources
 * ========================================================================= */

#view-iron-center .ic-mast {
  margin: var(--space-sm) 0 var(--space-lg);
}

#view-iron-center .ic-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-md) 0 var(--space-lg);
  margin-bottom: 0;
  border-bottom: none;
}

#view-iron-center .ic-title {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: clamp(30px, 4vw, 44px);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  -webkit-text-stroke: 0.02em currentColor;
  color: var(--text-primary);
}

#view-iron-center .ic-title-mark {
  display: inline-flex;
  width: 0.72em; height: 0.72em;
  flex: none;
  color: var(--iron-gold);
}

#view-iron-center .ic-title-mark svg { width: 100%; height: 100%; display: block; }

#view-iron-center .ic-title-sub {
  margin-top: 6px;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  max-width: 52ch;
}

#view-iron-center .ic-balance-pill {
  --pill-tint: var(--iron-gold);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 10px 16px;
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--border-highlight);
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--pill-tint);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

@media (hover: hover) {
  #view-iron-center .ic-balance-pill:hover {
    border-color: color-mix(in srgb, var(--pill-tint) 45%, transparent);
    transform: translateY(-1px);
  }
}

#view-iron-center .ic-balance-pill > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#view-iron-center .ic-balance-pill small {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

#view-iron-center .ic-balance-pill .iron-diamond {
  color: var(--pill-tint);
  display: inline-flex;
  align-items: center;
}

#view-iron-center .ic-aura-prestige {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 2px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  color: var(--aura-bright);
  background: var(--aura-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aura-core) 45%, transparent);
}

/* Masthead entrance — plays once per full render, gated on .ic-entering */

.ic-entering .ic-mast > * { animation: ic-rise 560ms var(--island-ease) backwards; }

.ic-entering .ic-mast > *:nth-child(2) { animation-delay: 80ms; }

/* =========================================================================
 * WING RAIL — the five destinations as numbered stations on one rule
 * ========================================================================= */

#view-iron-center .ic-sub-nav {
  display: flex;
  align-items: stretch;
  gap: 0;
  position: relative;
  isolation: isolate;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--border-strong);
  margin-bottom: var(--space-md);
  overflow-x: auto;
  scrollbar-width: none;
}

#view-iron-center .ic-sub-nav::-webkit-scrollbar { display: none; }

#view-iron-center .ic-sub-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 26px 14px 4px;
  border-radius: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--text-secondary);
  letter-spacing: -0.01em;
  transition: color var(--transition-fast);
}

#view-iron-center .ic-sub-tab .ic-tab-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#view-iron-center .ic-sub-tab i { font-size: 13px; color: var(--text-muted); transition: color var(--transition-fast); }

#view-iron-center .ic-sub-tab:not(.active):hover { background: transparent; color: var(--text-primary); }

#view-iron-center .ic-sub-tab:not(.active):hover i { color: var(--text-secondary); }

#view-iron-center .ic-sub-tab.active {
  color: var(--text-primary);
  background: transparent;
}

#view-iron-center .ic-sub-tab.active i { color: var(--accent-color); }

/* The indicator becomes the drawn accent rule under the active station */

#view-iron-center .ic-sub-nav .ic-indicator {
  top: auto;
  bottom: -1px;
  height: 2px;
  border-radius: 0;
  background: var(--accent-color);
  box-shadow: none;
}

/* The rule is sized by scaleX off a fixed base width, so it must grow from
 * the active station's left edge, not from its own centre. Sizing by scaleX
 * rather than by `width` is what keeps the hop on the compositor — see
 * _moveIndicator(), and js/nav-indicator.js which fixed the island pill the
 * same way. */

#view-iron-center .ic-indicator {
  transform-origin: 0 50%;
  will-change: transform;
}

/* Room hints — waiting rewards are gold (earnings), readiness is accent.
 * On a rail station the hint docks to the top-right corner as a badge
 * instead of stacking as a third row under the label. */

#view-iron-center .ic-sub-tab .ic-tab-hint {
  position: absolute;
  top: 6px;
  right: 8px;
}

#view-iron-center .ic-tab-hint {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--iron-gold);
  color: var(--iron-on-gold);
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
}

#view-iron-center .ic-tab-hint--dot {
  min-width: 7px; width: 7px; height: 7px; padding: 0;
  background: var(--accent-color);
}

/* =========================================================================
 * FORGED STATION RAIL — the one shape every sub-navigation is cut from
 *
 * The room rail above cuts each destination as a 45° IRON diamond with the
 * label hung underneath. A sub-navigation has to carry a word, not a glyph,
 * so the same cut is stretched along its axis: identical slope on the ends,
 * elongated body, label seated inside it. Stations share one forged line the
 * way the room diamonds do, which is what makes the two rows read as the
 * same navigation system at two depths rather than two unrelated controls.
 *
 * Used by: .ic-play-nav (quests/achievements/games), .ic-store-switch
 * (IRON/AURA) and .ic-shop-nav (cosmetic categories, --st-tier: 2).
 * ========================================================================= */

#view-iron-center .ic-station-rail {
  /* Every measurement derives from the station height, so the end slope
     stays a true 45° at any tier — the same angle as an .ic-tab-node. */
  --st-h: 44px;
  --st-cut: calc(var(--st-h) / 2);
  --st-gap: 8px;
  --st-accent: var(--accent-color);

  position: relative;
  isolation: isolate;
  display: flex;
  align-items: stretch;
  gap: var(--st-gap);
  width: 100%;
  margin: 0 0 var(--space-md);
  /* the padding is the breathing room the active station's bloom needs,
     since the scroll fallback below clips at the padding box */
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
}

#view-iron-center .ic-station-rail::-webkit-scrollbar { display: none; }

/* The line the stations are forged onto — same rule, same tuck under the
   outermost points, as the room rail's ::before. */

#view-iron-center .ic-station-rail::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: calc(4px + var(--st-h) / 2 - 1px);
  left: var(--st-cut);
  right: var(--st-cut);
  height: 2px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--border-strong) 72%, var(--bg-primary));
  box-shadow: inset 0 1px 1px color-mix(in srgb, black 42%, transparent);
}

/* A station stretches to share the row evenly, but never squashes its label
   below what fits — past that the rail scrolls instead of truncating. */

#view-iron-center .ic-station {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--st-h);
  padding: 0 calc(var(--st-cut) * 0.62);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
  white-space: nowrap;
  user-select: none;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

/* clip-path can't carry a border, so the body is two clipped layers: the
   outer paints the cut edge, the inner sits 1px in and paints the fill. The
   inner cut is shortened by the same 1px so both slopes stay parallel and
   the edge keeps one thickness the whole way round. */

#view-iron-center .ic-station::before,
#view-iron-center .ic-station::after {
  content: '';
  position: absolute;
  z-index: -1;
  clip-path: polygon(
    var(--st-c) 0,
    calc(100% - var(--st-c)) 0,
    100% 50%,
    calc(100% - var(--st-c)) 100%,
    var(--st-c) 100%,
    0 50%);
  transition: background var(--transition-fast), filter var(--transition-fast);
}

#view-iron-center .ic-station::before {
  --st-c: var(--st-cut);
  inset: 0;
  background: var(--border-strong);
}

#view-iron-center .ic-station::after {
  --st-c: calc(var(--st-cut) - 1px);
  inset: 1px;
  background: var(--bg-primary);
}

#view-iron-center .ic-station i,
#view-iron-center .ic-station .iron-diamond,
#view-iron-center .ic-station .aura-emblem {
  flex: none;
  font-size: 13px;
  color: var(--text-muted);
  transition: color var(--transition-fast);
}

#view-iron-center .ic-station .iron-diamond,
#view-iron-center .ic-station .aura-emblem { width: 16px; height: 16px; }

#view-iron-center .ic-station-label { position: static; }

#view-iron-center .ic-station:not(.active):hover { color: var(--text-primary); }

#view-iron-center .ic-station:not(.active):hover i { color: var(--text-secondary); }

#view-iron-center .ic-station:not(.active):hover::before {
  background: color-mix(in srgb, var(--st-accent) 34%, var(--border-strong));
}

#view-iron-center .ic-station:not(.active):hover::after { background: var(--bg-elevated); }

#view-iron-center .ic-station:active { transform: translateY(1px); }

/* Current station: the cut edge lights and blooms along its own outline —
   drop-shadow follows the clip, so the glow is hexagonal, not a rectangle. */

#view-iron-center .ic-station.active { color: var(--text-primary); cursor: default; }

#view-iron-center .ic-station.active::before {
  background: var(--st-accent);
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--st-accent) 42%, transparent));
}

#view-iron-center .ic-station.active::after {
  background: color-mix(in srgb, var(--st-accent) 11%, var(--bg-primary));
}

#view-iron-center .ic-station.active i,
#view-iron-center .ic-station.active .iron-diamond,
#view-iron-center .ic-station.active .aura-emblem { color: var(--st-accent); }

/* The seated dash — the room rail's active underline, brought inside the
   body now that the label lives in the shape instead of below it. */

#view-iron-center .ic-station.active .ic-station-label::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 9px;
  width: 22px;
  height: 2px;
  transform: translateX(-50%);
  border-radius: var(--radius-pill);
  background: var(--st-accent);
}

#view-iron-center .ic-station:focus-visible {
  outline: none;
  color: var(--text-primary);
}

#view-iron-center .ic-station:focus-visible::before {
  background: var(--st-accent);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--st-accent) 60%, transparent));
}

/* Tier 2 — a category row sitting under a station rail. Same cut, quieter
   body, so depth reads as scale rather than as a different control. */

#view-iron-center .ic-station-rail--sub {
  --st-h: 34px;
  --st-gap: 6px;
  margin-bottom: var(--space-sm);
}

#view-iron-center .ic-station-rail--sub .ic-station {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  gap: 7px;
}

#view-iron-center .ic-station-rail--sub .ic-station i { font-size: 11px; }

#view-iron-center .ic-station-rail--sub .ic-station.active {
  font-weight: var(--font-weight-semibold);
}

#view-iron-center .ic-station-rail--sub .ic-station.active .ic-station-label::after {
  bottom: 5px;
  width: 16px;
}

@media (prefers-reduced-motion: reduce) {
  #view-iron-center .ic-station,
  #view-iron-center .ic-station::before,
  #view-iron-center .ic-station::after { transition: none; }

  #view-iron-center .ic-station:active { transform: none; }
}

/* Secondary room row — a branch off the rail, indented under its wing */

#view-iron-center .ic-room-nav.is-empty { display: none; }

#view-iron-center .ic-room-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  isolation: isolate;
  padding: 2px 0 2px var(--space-md);
  margin: calc(-1 * var(--space-sm)) 0 var(--space-md);
}

#view-iron-center .ic-room-nav::before {
  /* the branch tick that hangs the row off the rail above */
  content: '';
  position: absolute;
  left: 3px;
  top: -6px;
  width: 8px;
  height: 16px;
  border-left: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  border-bottom-left-radius: 6px;
}

#view-iron-center .ic-room-nav .ic-indicator {
  top: 2px;
  height: calc(100% - 4px);
  background: var(--accent-subtle);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-color) 26%, transparent);
}

/* =========================================================================
 * SECTION CHROME — labels, counters, timers inside a room
 * ========================================================================= */

#view-iron-center .ic-section { margin-bottom: var(--space-xl); }

/* ===== In-room section headings carry the RAIL ==========================
 * The dashboard marks a section with a 3px typed rail; the Iron Center marked
 * one with a full-width hairline rule above it. Two devices for the same job
 * was the last thing making the two surfaces read as different products.
 *
 * The split is deliberate and matches how the two devices actually differ:
 *   - the NUMBERED LEDGER STAMP stays on room navigation (.ic-sub-tab and
 *     .ic-room-stamp), where the numbering is true — there are six rooms and
 *     they are an ordered set;
 *   - the RAIL marks sections INSIDE a room, which are not a sequence and
 *     never were numbered.
 * The rail is always IRON GOLD here: every section of the Iron Center is
 * about what you earned, which is exactly what the gold rail means on the
 * dashboard. Green would be a lie — there is no "people" section in here. */

#view-iron-center .ic-section-label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: var(--space-md);
  padding-top: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.16em;
  color: var(--text-secondary);
}

#view-iron-center .ic-section-label::before {
  content: '';
  position: static;
  flex-shrink: 0;
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: var(--iron-gold);
}

/* The side note is pushed right by its own auto margin — the same mechanism
   the dashboard's title meta uses, so it works whatever the child count. */

#view-iron-center .ic-section-label > .ic-section-count,
#view-iron-center .ic-section-label > .ic-section-right {
  margin-left: auto;
}

#view-iron-center .ic-section-label > span > i {
  color: var(--text-muted);
  font-size: 11px;
}

#view-iron-center .ic-section-count {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

#view-iron-center .ic-timer-pill {
  background: transparent;
  border: 1px dashed var(--border-strong);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#view-iron-center .ic-refresh-btn { white-space: nowrap; }

#view-iron-center .ic-section-label {
  flex-wrap: wrap;
  row-gap: 8px;
}

#view-iron-center .ic-section-label > span:first-child { white-space: nowrap; }

#view-iron-center .ic-section-right {
  flex-wrap: wrap;
  row-gap: 8px;
  justify-content: flex-start;
}

#view-iron-center .ic-refresh-cost,
#view-iron-center .ic-refresh-cost .iron-diamond {
  /* an IRON price is gold, never the warning colour */
  color: var(--iron-gold);
}

/* =========================================================================
 * QUEST CARDS + CLAIM — the contract board
 * ========================================================================= */

#view-iron-center .ic-quest-card { padding: var(--space-md); }

/* the contract variant keeps its ribbon clearance */

#view-iron-center .ic-quest-card--contract { padding-top: var(--space-xl); }

/* tier seals: weekly is the product voice (accent) — cyan stays AURA-only */

#view-iron-center .ic-quest-card--contract.tier-weekly {
  --seal: var(--accent-color);
  --seal-deep: var(--accent-solid);
  --seal-soft: var(--accent-subtle);
}

#view-iron-center .ic-quest-card.is-ready {
  border-color: var(--iron-gold-deep);
  background: color-mix(in srgb, var(--iron-gold) 5%, var(--bg-elevated));
}

#view-iron-center .ic-quest-card.completed { opacity: 0.62; }

#view-iron-center .ic-quest-ribbon {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

#view-iron-center .ic-quest-title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
}

#view-iron-center .ic-quest-icon {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

/* Contract medallion: flat tinted seal — no radial gradient, and no static
 * glow (glow is reserved for the moment of a gain). */

#view-iron-center .ic-quest-card--contract .ic-quest-icon {
  background: color-mix(in srgb, var(--seal) 10%, var(--bg-secondary));
  box-shadow: inset 0 1px 0 var(--border-highlight);
}

#view-iron-center .ic-quest-icon.is-iron {
  background: color-mix(in srgb, var(--iron-gold) 10%, var(--bg-secondary));
  border-color: var(--iron-gold-soft);
  color: var(--iron-gold);
}

#view-iron-center .ic-quest-icon.is-aura {
  background: color-mix(in srgb, var(--aura-core) 10%, var(--bg-secondary));
  border-color: var(--aura-soft);
  color: var(--aura-core);
}

#view-iron-center .ic-quest-reward {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: var(--iron-gold-faint);
  border: 1px solid var(--iron-gold-soft);
  color: var(--iron-gold);
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  font-size: var(--font-size-sm);
}

#view-iron-center .ic-quest-reward.is-aura {
  background: color-mix(in srgb, var(--aura-core) 8%, transparent);
  border-color: var(--aura-soft);
  color: var(--aura-core);
}

#view-iron-center .ic-bar-text {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

/* Claim buttons: molten gold when payable — the only loud state on a card */

#view-iron-center .ic-claim-btn,
#view-iron-center .ic-ach-claim-btn {
  border: none;
  border-radius: var(--radius-md);
  background: var(--iron-gold);
  color: var(--iron-on-gold);
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
  transition: filter var(--transition-fast), transform var(--transition-fast);
}

@media (hover: hover) {
  #view-iron-center .ic-claim-btn:not([disabled]):hover,
  #view-iron-center .ic-ach-claim-btn:not([disabled]):hover { filter: brightness(1.08); }
}

#view-iron-center .ic-claim-btn[disabled]:not(.claimed),
#view-iron-center .ic-ach-claim-btn[disabled]:not(.claimed) {
  background: var(--bg-tertiary);
  color: var(--text-muted);
}

#view-iron-center .ic-claim-btn.claimed,
#view-iron-center .ic-ach-claim-btn.claimed {
  background: var(--bg-tertiary);
  color: var(--iron-gold);
}

/* =========================================================================
 * ACHIEVEMENTS — records in the ledger: a two-column grid of slim rows
 * instead of one monotonous full-width stack.
 * ========================================================================= */

#view-iron-center .ic-ach-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: var(--space-md);
}

#view-iron-center .ic-ach-card { padding: var(--space-md); }

#view-iron-center .ic-ach-title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
}

#view-iron-center .ic-ach-class {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-muted);
}

#view-iron-center .ic-ach-reward-pill {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  background: var(--iron-gold-faint);
  border: 1px solid var(--iron-gold-soft);
  color: var(--iron-gold);
}

@media (max-width: 900px) {
  #view-iron-center .ic-ach-list { grid-template-columns: 1fr; }
}

/* =========================================================================
 * EVENT + FEATURED + MASTER COLLECTOR banners
 * ========================================================================= */

#view-iron-center .ic-event-banner,
#view-iron-center .ic-featured {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--border-highlight);
}

#view-iron-center .ic-event-mult {
  color: var(--iron-gold);
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
}

#view-iron-center .ic-featured-tag,
#view-iron-center .ic-master-eyebrow,
#view-iron-center .ic-card-eyebrow {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

#view-iron-center .ic-master-card { padding: var(--space-md) var(--space-lg); }

#view-iron-center .ic-master-bar {
  background: var(--bg-input);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), 0 1px 0 var(--border-highlight);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

#view-iron-center .ic-master-bar-fill {
  background: linear-gradient(90deg, var(--iron-gold-deep), var(--iron-gold) 60%, var(--iron-gold-bright));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  border-radius: inherit;
}

#view-iron-center .ic-master-count {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--iron-gold);
}

/* =========================================================================
 * SHOP — the exchange
 * ========================================================================= */

/* The category row is a tier-2 station rail. Each station now carries its own
   cut edge, so the sliding pill indicator is gone from the markup entirely
   (classic mode still renders and uses its own — leave that one alone). */

#view-iron-center .ic-shop-head:has(.ic-station-rail) { align-items: flex-end; }

#view-iron-center .ic-shop-head .ic-station-rail { flex: 1 1 320px; }

#view-iron-center .ic-shop-price {
  color: var(--iron-gold);
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

#view-iron-center .ic-shop-buy-btn {
  border: none;
  border-radius: var(--radius-md);
  background: var(--iron-gold);
  color: var(--iron-on-gold);
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  transition: filter var(--transition-fast), transform var(--transition-fast);
}

@media (hover: hover) {
  #view-iron-center .ic-shop-buy-btn:not([disabled]):hover { filter: brightness(1.08); }
}

#view-iron-center .ic-shop-buy-btn[disabled] {
  background: var(--bg-tertiary);
  color: var(--text-muted);
  filter: none;
}

#view-iron-center .ic-shop-buy-btn--aura {
  background: var(--aura-core);
  color: var(--bg-primary);
}

#view-iron-center .ic-shop-use-btn {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
  transition: background var(--transition-fast);
}

@media (hover: hover) {
  #view-iron-center .ic-shop-use-btn:hover { background: var(--bg-hover); }
}

#view-iron-center .ic-shop-use-btn.in-use {
  border-color: color-mix(in srgb, var(--accent-color) 40%, transparent);
  background: var(--accent-subtle);
  color: var(--accent-color);
}

/* =========================================================================
 * FORGE / GAMES / LEADERBOARD / AURA accents
 * ========================================================================= */

#view-iron-center .ic-forge-stat-num,
#view-iron-center .ic-tour-prize,
#view-iron-center .ic-lb-value {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

#view-iron-center .ic-forge-btn {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
}

#view-iron-center .ic-lb-row.ic-lb-me {
  border: 1px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
  background: var(--accent-subtle);
  border-radius: var(--radius-md);
}

#view-iron-center .ic-lb-rank { font-variant-numeric: tabular-nums; }

#view-iron-center .ic-game-title,
#view-iron-center .ic-together-meta strong {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
}

/* =========================================================================
 * HOME — the floor
 * ========================================================================= */

#view-iron-center .ic-home-title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.015em;
}

#view-iron-center .ic-friend-echoes { padding: var(--space-md); }

#view-iron-center .ic-cmd-num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}

#view-iron-center .ic-home-chip {
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  border-radius: var(--radius-pill);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

@media (hover: hover) {
  #view-iron-center .ic-home-chip:hover { background: var(--bg-hover); border-color: var(--border-strong); }
}

/* =========================================================================
 * IRON PATH — the landing page's THE LOOP, verbatim: slim inset channels,
 * molten pour, IRON diamonds in the seams. Nothing on this rig is ever the
 * theme accent — completion is gold, everything else is neutral steel.
 * ========================================================================= */

#view-iron-center .ic-path-seg {
  height: 12px;
  background: var(--bg-input);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), 0 1px 0 var(--border-highlight);
}

/* the active segment is simply the next empty channel — no accent ring,
 * no pulse; the lit seam diamond beside it already marks the frontier */

#view-iron-center .ic-path-seg.is-active,
#view-iron-center .ic-path-seg.is-active:hover {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), 0 1px 0 var(--border-highlight);
  animation: none;
}

/* Mission cards: flat plates in the station grammar. Completed = gold,
 * active = lit (white title, gold number), locked = dimmed. Never accent. */

#view-iron-center .ic-path-station {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 var(--border-highlight);
}

#view-iron-center .ic-path-station.is-complete {
  background: var(--bg-elevated);
  border-color: color-mix(in srgb, var(--iron-gold) 32%, var(--border-color));
}

#view-iron-center .ic-path-station.is-active {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--border-highlight);
}

#view-iron-center .ic-path-station.is-active .ic-path-station-mark { color: var(--iron-gold); }

#view-iron-center .ic-path-station.is-active h3,
#view-iron-center .ic-path-station.is-active h3 i { color: var(--text-primary); }

@media (max-width: 640px) {
  /* one mission per row — titles must never truncate on a phone */

  #view-iron-center .ic-path-stations { grid-template-columns: 1fr; }
}

/* The Waymark Road — the monthly reward road fused into the Iron Path.
 * A dashed seam separates today's loop from the month's road; the rail
 * medallions reuse the shared .ic-rail grammar. */

#view-iron-center .ic-path-road {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px dashed var(--border-strong);
}

/* =========================================================================
 * COMMAND DECK — no static glow on gauges; streak = 7 banked day-ticks in
 * the streak's tier colour instead of a draining ring.
 * ========================================================================= */

#view-iron-center .ic-cmd-ring-fg { filter: none; }

#view-iron-center .ic-cmd-mark--streak {
  color: var(--streak-tier, var(--streak-flame));
  font-size: 15px;
}

#view-iron-center .ic-cmd-ticks {
  display: flex;
  gap: 3px;
  margin: 2px 0 1px;
}

#view-iron-center .ic-cmd-ticks i {
  width: 11px;
  height: 4px;
  border-radius: 2px;
  background: var(--bg-hover);
}

#view-iron-center .ic-cmd-ticks i.on {
  background: var(--streak-tier, var(--streak-flame));
}

#view-iron-center .ic-cmd-meta { min-width: 0; }

#view-iron-center .ic-cmd-num {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================================
 * STAR MATERIALS — the burn (ignite) action on the Forge's material pouch.
 * The +AURA chip is cyan: what it pours into is the AURA star path.
 * ========================================================================= */

#view-iron-center .ic-material { position: relative; }

#view-iron-center .ic-material-burn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--aura-soft);
  background: color-mix(in srgb, var(--aura-core) 8%, transparent);
  color: var(--aura-core);
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

#view-iron-center .ic-material-burn i { font-size: 10px; }

@media (hover: hover) {
  #view-iron-center .ic-material-burn:not([disabled]):hover {
    border-color: color-mix(in srgb, var(--aura-core) 50%, transparent);
    background: var(--aura-soft);
  }
}

#view-iron-center .ic-material-burn[disabled] {
  opacity: 0.35;
  cursor: default;
}

/* Veiled Forge legendaries — hidden until the star path reaches them */

#view-iron-center .ic-forge-gallery-item.is-veiled {
  opacity: 0.75;
  border-style: dashed;
}

#view-iron-center .ic-forge-gallery-item.is-veiled .ic-forge-gallery-icon {
  color: var(--text-muted);
}

#view-iron-center .ic-forge-gallery-item.is-veiled .ic-forge-locked-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--aura-core);
  font-variant-numeric: tabular-nums;
}

#view-iron-center .ic-forge-gallery-item.is-veiled .ic-forge-locked-label .aura-emblem {
  width: 13px; height: 13px; display: inline-flex;
}

/* =========================================================================
 * MOBILE MENU + BACK BAR
 * ========================================================================= */

#view-iron-center .ic-menu-btn {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--border-highlight);
}

#view-iron-center .ic-menu-label {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
}

/* =========================================================================
 * EXPERIMENT BADGE — a margin note, not a billboard
 * ========================================================================= */

/* =========================================================================
 * LIGHT MODE + REDUCED MOTION + SMALL SCREENS
 * ========================================================================= */

.light-mode #view-iron-center .ic-quest-card,
.light-mode #view-iron-center .ic-balance-pill {
  background: var(--bg-secondary);
}

@media (max-width: 768px) {
  #view-iron-center .ic-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }

  #view-iron-center .ic-balance-pill { flex: 1; }

  /* Section headers stack: title row first, counts/timers below it —
   * pills never break mid-text and Refresh never falls off the edge. */

  /* Stays a ROW so the rail keeps sitting beside its title — switching to a
     column here would strand the 3px rail above the text as a stray tick.
     The side note wraps onto its own line instead, which is what the column
     was for. */

  #view-iron-center .ic-section-label {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 8px;
  }

  #view-iron-center .ic-section-label > .ic-section-count,
  #view-iron-center .ic-section-label > .ic-section-right {
    margin-left: 12px;
  }

  /* Side notes stop competing with their headings: counts, track values
   * and long descriptive asides shrink to quiet metadata under the title. */

  #view-iron-center .ic-section-label .ic-section-count {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.05em;
    color: var(--text-muted);
  }

  /* Big balances stay inside their plaques (a 100M IRON balance must
   * shrink, not spill) */

  #view-iron-center .ic-balance-pill { min-width: 0; }

  #view-iron-center .ic-balance-pill > span {
    flex-wrap: wrap;
    font-size: var(--font-size-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  #view-iron-center .iron-panel.active > *,
  #view-iron-center .stagger-children > *,
  .ic-entering .ic-mast > * { animation: none; }

  /* JS skips the glide outright under reduced motion; this is the backstop
     for a preference that flips mid-swap. */

  #view-iron-center .ic-sub-nav,
  #view-iron-center .ic-panel-stage,
  #view-iron-center .ic-home-welcome,
  #view-iron-center .ic-indicator { transition: none !important; }

  #view-iron-center .ic-quest-card,
#view-iron-center .ic-balance-pill,
#view-iron-center .ic-cmd-tile { transition: none; }
}

/* =========================================================================
 * IRON CENTER OVERHAUL v2 — one-screen flat Home, the Iron Path built FROM
 * the daily quests, and a real-star constellation. Flat sections divided by
 * hairline seams (never boxed), in the landing-page design language.
 * ========================================================================= */

/* ----- HOME: two forged journeys, hairline-seamed, no cards ------------- */

#view-iron-center .ic-home {
  display: flex; flex-direction: column; gap: 0;
  grid-template-columns: none;
}

#view-iron-center .ic-home > * + * {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-color);
}

/* Hero: avatar + greeting on top, the three live numbers as a flat rule row. */

#view-iron-center .ic-home-welcome {
  margin-bottom: var(--space-md);
}

#view-iron-center .ic-home-hero {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px;
}

#view-iron-center .ic-home-intro { flex: 1; min-width: 0; }

#view-iron-center .ic-home-title {
  font-family: var(--font-display); font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xl); letter-spacing: -0.015em; line-height: 1.1;
}

#view-iron-center .ic-home-sub {
  font-family: var(--font-display); font-size: 10px; font-weight: var(--font-weight-bold);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin-top: 3px;
}

#view-iron-center .ic-home-stats {
  display: flex; align-items: stretch; flex: 1 1 100%;
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  background: var(--bg-elevated); overflow: hidden;
}

/* ----- THE IRON PATH: quests forged into the landing bar (flat) --------- */

#view-iron-center .ic-path { background: transparent; border: 0; box-shadow: none; padding: 0; }

#view-iron-center .ic-path-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 12px;
}

#view-iron-center .ic-micro-pill { color: var(--accent-color); }

/* The forged bar keeps the landing look (styles inherited); give it room. */

#view-iron-center .ic-path-bar { margin-bottom: 4px; }

/* Empty path: a small, friendly placeholder so the rail never reads broken
 * when the day's quests haven't been charted yet. */

#view-iron-center .ic-path-empty {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 14px;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--iron-gold) 4%, var(--bg-tertiary));
  color: var(--text-secondary);
}

#view-iron-center .ic-path-empty-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--iron-gold) 30%, var(--border-color));
  background: color-mix(in srgb, var(--iron-gold) 9%, var(--bg-tertiary));
  color: var(--iron-gold-bright);
  font-size: 14px;
}

#view-iron-center .ic-path-empty-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

#view-iron-center .ic-path-empty-copy strong { font-family: var(--font-display); font-size: var(--font-size-sm); color: var(--text-primary); }

#view-iron-center .ic-path-empty-copy small { font-size: 11px; color: var(--text-muted); line-height: 1.4; }

/* Waymark road: extend the same rig, flush under a hairline (not a card). */

#view-iron-center .ic-path .ic-path-road {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-color);
}

/* ===== TWO REALMS — IRON and AURA, one prominent header each ============
 * Home is split into two big currency realms: the Iron Path (IRON) and the
 * Star Path (AURA). Each opens with the same header grammar — a large emblem,
 * the realm name, its live balance, and a themed badge — so the two sections
 * read as equals, only the colour changing (gold vs cyan). */

#view-iron-center .ic-realm-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 4px;
}

#view-iron-center .ic-realm-emblem {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid var(--realm-line, var(--border-color));
  background: var(--realm-fill, var(--bg-tertiary));
}

#view-iron-center .ic-realm-emblem .iron-diamond,
#view-iron-center .ic-realm-emblem .aura-emblem { width: 22px; height: 22px; }

#view-iron-center .ic-realm-emblem .iron-diamond { color: var(--iron-gold-bright); }

#view-iron-center .ic-realm-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.05; }

/* "IRON · IRON PATH" is the Home room's section heading — the counterpart of
   Play's "WEEKLY QUESTS" — so it carries the same gold rail. It was a 9px
   muted label with no marker at all, which is why Home read as a different
   room from Play even after the rail landed everywhere else. Display face and
   10px to match `.dash-card-title-text` exactly. */

#view-iron-center .ic-realm-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

#view-iron-center .ic-realm-kicker::before {
  content: '';
  flex-shrink: 0;
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: var(--iron-gold);
}

#view-iron-center .ic-realm-balance {
  margin-top: 3px;
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xl);
  font-variant-numeric: tabular-nums;
  color: var(--realm-ink, var(--text-primary));
  line-height: 1;
}

#view-iron-center .ic-realm-balance small {
  margin-left: 5px;
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

#view-iron-center .ic-realm-badge {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--realm-line, var(--border-color));
  background: var(--realm-fill, var(--bg-tertiary));
  color: var(--realm-ink, var(--text-primary));
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

#view-iron-center .ic-realm-badge em { font-style: normal; color: var(--text-muted); }

#view-iron-center .ic-realm-badge i { font-size: 10px; }

/* Gold realm — the Iron Path */

#view-iron-center .ic-realm--iron {
  --realm-ink: var(--iron-gold-bright);
  --realm-line: color-mix(in srgb, var(--iron-gold) 34%, var(--border-color));
  --realm-fill: color-mix(in srgb, var(--iron-gold) 9%, var(--bg-tertiary));
}

/* Cyan realm — the Star Path */

#view-iron-center .ic-realm--aura {
  --realm-ink: var(--aura-bright);
  --realm-line: color-mix(in srgb, var(--aura-core) 34%, var(--border-color));
  --realm-fill: color-mix(in srgb, var(--aura-core) 10%, var(--bg-tertiary));
}

#view-iron-center .ic-realm--iron .ic-realm-head .ic-micro-pill { margin-left: auto; }

#view-iron-center .ic-realm--iron .ic-realm-head .ic-micro-pill + .ic-realm-badge { margin-left: 8px; }

#view-iron-center .ic-star-nextline {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--text-secondary);
}

#view-iron-center .ic-star-nextline strong { color: var(--aura-bright); font-variant-numeric: tabular-nums; }

/* ----- THE STAR PATH: a deep, tactile reward constellation ------------- */

#view-iron-center .ic-foundry { background: transparent; border: 0; box-shadow: none; padding: 0; }

#view-iron-center .ic-star-topline { display: flex; align-items: center; gap: 14px; margin: 12px 0; }

#view-iron-center .ic-star-level { display: flex; flex-direction: column; line-height: 1; }

#view-iron-center .ic-star-level small { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }

#view-iron-center .ic-star-level b { font-family: var(--font-display); font-weight: var(--font-weight-bold); font-size: var(--font-size-lg); color: var(--aura-bright); }

#view-iron-center .ic-star-meter { flex: 1; height: 6px; border-radius: var(--radius-pill); background: var(--bg-input); overflow: hidden; }

#view-iron-center .ic-star-meter-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--aura-deep), var(--aura-core) 70%, var(--aura-bright)); box-shadow: 0 0 8px var(--aura-soft); }

#view-iron-center .ic-star-meter-val { font-size: 12px; color: var(--aura-core); font-variant-numeric: tabular-nums; white-space: nowrap; }

#view-iron-center .ic-star-meter-val small { color: var(--text-muted); }

#view-iron-center .ic-star-meter-val .aura-emblem { width: 13px; height: 13px; vertical-align: -2px; }

#view-iron-center .ic-starpath {
  position: relative; isolation: isolate; height: 288px; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--aura-core) 20%, var(--border-color));
  background:
    radial-gradient(ellipse at 76% -8%, color-mix(in srgb, var(--aura-core) 20%, transparent), transparent 46%),
    radial-gradient(ellipse at 8% 112%, color-mix(in srgb, var(--aura-deep) 42%, transparent), transparent 56%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-primary) 86%, var(--aura-deep)), var(--bg-primary));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 5%, transparent), inset 0 -30px 70px color-mix(in srgb, var(--bg-primary) 70%, transparent);
}

/* A faint galactic band crossing the sky — depth without noise. */

#view-iron-center .ic-starpath-band {
  position: absolute; inset: -20%; z-index: 0; pointer-events: none; opacity: 0.5;
  background: linear-gradient(115deg,
    transparent 34%,
    color-mix(in srgb, var(--aura-deep) 26%, transparent) 44%,
    color-mix(in srgb, var(--text-primary) 7%, transparent) 50%,
    color-mix(in srgb, var(--aura-core) 12%, transparent) 56%,
    transparent 68%);
  filter: blur(14px);
}

/* One comet on a long, quiet cycle — most glances never catch it. */

#view-iron-center .ic-starpath-comet {
  position: absolute; z-index: 1; left: -6%; top: 18%; width: 74px; height: 1.5px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--aura-bright) 65%, transparent), var(--text-primary));
  border-radius: var(--radius-pill); opacity: 0; transform: rotate(11deg);
  animation: ic-comet 26s linear infinite;
}

@keyframes ic-comet {
  0%, 91% { opacity: 0; transform: translate(0, 0) rotate(11deg); }
  92% { opacity: .9; }
  97%, 100% { opacity: 0; transform: translate(120vw, 24vh) rotate(11deg); }
}

/* The UFO easter egg: an extremely rare drifting flyby, decorative only. */

#view-iron-center .ic-starpath-ufo {
  position: absolute; z-index: 2; top: 12%; left: -60px; width: 44px; height: 22px; pointer-events: none;
  color: color-mix(in srgb, var(--aura-bright) 80%, var(--text-primary));
  filter: drop-shadow(0 0 6px var(--aura-soft));
  animation: ic-ufo-drift 14s ease-in-out 1200ms 1 both;
}

#view-iron-center .ic-starpath-ufo svg { width: 100%; height: 100%; }

@keyframes ic-ufo-drift {
  0% { opacity: 0; transform: translate(0, 8px); }
  8% { opacity: .9; }
  30% { transform: translate(30vw, -6px) rotate(-3deg); }
  55% { transform: translate(52vw, 10px) rotate(3deg); }
  80% { opacity: .9; }
  100% { opacity: 0; transform: translate(110vw, -14px); }
}

/* Sky HUD — the current level and the Prestige boost, quietly in a corner. */

#view-iron-center .ic-starpath-hud {
  position: absolute; z-index: 4; top: 10px; right: 12px;
  display: flex; align-items: center; gap: 6px; pointer-events: none;
}

#view-iron-center .ic-starpath-hud span {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--aura-core) 32%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg-primary) 62%, transparent);
  color: var(--aura-bright); font-family: var(--font-display);
  font-size: 9px; font-weight: var(--font-weight-bold); letter-spacing: .08em; text-transform: uppercase;
}

#view-iron-center .ic-starpath-hud-boost i { font-size: 8px; }

#view-iron-center .ic-starpath-nebula,
#view-iron-center .ic-starpath-dust,
#view-iron-center .ic-starpath-vignette { position: absolute; inset: 0; pointer-events: none; }

#view-iron-center .ic-starpath-nebula {
  z-index: 0; opacity: 0.72; transform: rotate(-7deg) scale(1.18);
  background:
    radial-gradient(ellipse at 46% 52%, color-mix(in srgb, var(--aura-deep) 30%, transparent) 0%, transparent 43%),
    radial-gradient(ellipse at 60% 46%, color-mix(in srgb, var(--aura-bright) 9%, transparent) 0%, transparent 35%),
    linear-gradient(108deg, transparent 26%, color-mix(in srgb, var(--aura-core) 7%, transparent) 43%, color-mix(in srgb, var(--text-primary) 4%, transparent) 50%, transparent 70%);
  filter: blur(10px);
}

#view-iron-center .ic-starpath-dust {
  z-index: 0; opacity: 0.68;
  background:
    radial-gradient(circle at 18% 72%, color-mix(in srgb, var(--aura-core) 14%, transparent), transparent 23%),
    radial-gradient(circle at 82% 31%, color-mix(in srgb, var(--aura-bright) 9%, transparent), transparent 20%),
    radial-gradient(circle at 52% 52%, color-mix(in srgb, var(--text-primary) 4%, transparent), transparent 35%);
}

#view-iron-center .ic-starpath-vignette {
  z-index: 4;
  background: radial-gradient(ellipse at center, transparent 42%, color-mix(in srgb, var(--bg-primary) 52%, transparent) 100%);
}

#view-iron-center .ic-starpath-field { position: absolute; inset: 0; z-index: 1; }

#view-iron-center .ic-starpath-field span {
  position: absolute; width: var(--fs); height: var(--fs); border-radius: 50%;
  background: var(--text-primary); opacity: var(--fo, 0.4);
  box-shadow: 0 0 4px color-mix(in srgb, var(--text-primary) 55%, transparent);
  animation: ic-twinkle 4800ms ease-in-out var(--fd, 0ms) infinite;
}

#view-iron-center .ic-starpath-field span.is-mid { filter: blur(0.25px); }

#view-iron-center .ic-starpath-field span.is-near { width: calc(var(--fs) * 1.8); height: calc(var(--fs) * 1.8); box-shadow: 0 0 7px color-mix(in srgb, var(--text-primary) 70%, transparent); }

#view-iron-center .ic-starpath-field span.is-warm { background: var(--iron-gold-bright); }

#view-iron-center .ic-starpath-field span.is-cool { background: var(--aura-bright); }

@keyframes ic-twinkle { 0%,100% { opacity: calc(var(--fo) * 0.35); transform: scale(0.7); } 48% { opacity: var(--fo); transform: scale(1.08); } 62% { opacity: calc(var(--fo) * 0.7); transform: scale(0.9); } }

#view-iron-center .ic-starpath-links { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; }

#view-iron-center .ic-star-link,
#view-iron-center .ic-star-link-halo { fill: none; vector-effect: non-scaling-stroke; }

#view-iron-center .ic-star-link { stroke: color-mix(in srgb, var(--aura-core) 25%, transparent); stroke-width: 1; stroke-dasharray: 2 5; }

#view-iron-center .ic-star-link.is-lit { stroke: color-mix(in srgb, var(--aura-bright) 72%, transparent); stroke-width: 1.2; stroke-dasharray: none; }

#view-iron-center .ic-star-link-halo { stroke: transparent; stroke-width: 7; }

#view-iron-center .ic-star-link-halo.is-lit { stroke: color-mix(in srgb, var(--aura-core) 12%, transparent); }

/* The button is touch-sized; the light inside it stays physically star-sized. */

#view-iron-center .ic-star {
  position: absolute; z-index: 3; width: 54px; height: 54px; transform: translate(-50%, -50%);
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer;
  --star-col: var(--text-secondary); --star-glow: color-mix(in srgb, var(--text-secondary) 45%, transparent); --star-core: 7px; --star-spike: 19px;
  transition: transform var(--transition-fast);
}

#view-iron-center .ic-star:hover { transform: translate(-50%, -50%) scale(1.08); }

#view-iron-center .ic-star:focus-visible { outline: 2px solid var(--aura-bright); outline-offset: 3px; }

#view-iron-center .ic-star-orbit {
  position: absolute; inset: 5px; border: 1px solid color-mix(in srgb, var(--star-col) 35%, transparent);
  border-radius: 50%; opacity: 0; transform: scale(0.72);
  transition: opacity var(--transition-fast), transform var(--transition-normal);
}

#view-iron-center .ic-star:hover .ic-star-orbit,
#view-iron-center .ic-star:focus-visible .ic-star-orbit,
#view-iron-center .ic-star.is-here .ic-star-orbit { opacity: 0.8; transform: scale(1); }

#view-iron-center .ic-star-light { position: relative; width: 40px; height: 40px; transition: transform var(--transition-fast), filter var(--transition-fast); }

#view-iron-center .ic-star-light::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: calc(var(--star-core) * 4); height: calc(var(--star-core) * 4);
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--star-col) 34%, transparent), transparent 68%);
  filter: blur(3px);
}

#view-iron-center .ic-star-light::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: var(--star-core); height: var(--star-core);
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, var(--text-primary) 0 18%, var(--star-col) 52%, transparent 76%);
  box-shadow: 0 0 8px 1px var(--star-glow), 0 0 18px 3px color-mix(in srgb, var(--star-glow) 55%, transparent);
}

#view-iron-center .ic-star-light i {
  position: absolute; top: 50%; left: 50%; width: var(--star-spike); height: 1px;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--star-col) 70%, transparent), var(--text-primary), color-mix(in srgb, var(--star-col) 70%, transparent), transparent);
  filter: drop-shadow(0 0 2px var(--star-glow));
}

#view-iron-center .ic-star-light i:nth-child(2) { width: calc(var(--star-spike) * 0.72); transform: translate(-50%, -50%) rotate(90deg); }

#view-iron-center .ic-star-light b { position: absolute; left: 50%; top: 50%; width: 2px; height: 2px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--text-primary); box-shadow: 0 0 3px var(--text-primary); }

#view-iron-center .ic-star-lvl {
  position: absolute; top: calc(50% + 17px); left: 50%; transform: translateX(-50%);
  min-width: 18px; font-family: var(--font-display); font-weight: var(--font-weight-bold); font-size: 9px;
  line-height: 1; color: var(--text-muted); text-align: center; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 4px var(--bg-primary);
}

#view-iron-center .ic-star.is-locked { opacity: 0.72; }

#view-iron-center .ic-star.is-locked:hover { opacity: 1; }

#view-iron-center .ic-star.is-reached { --star-col: var(--aura-core); --star-glow: color-mix(in srgb, var(--aura-core) 68%, transparent); --star-core: 8px; --star-spike: 23px; }

#view-iron-center .ic-star.is-reached .ic-star-lvl { color: var(--aura-core); }

#view-iron-center .ic-star.is-claimed { --star-col: var(--aura-bright); --star-glow: color-mix(in srgb, var(--aura-bright) 75%, transparent); --star-core: 8px; --star-spike: 25px; }

#view-iron-center .ic-star.is-claimed .ic-star-lvl { color: var(--aura-bright); }

#view-iron-center .ic-star.is-ready { --star-col: var(--iron-gold-bright); --star-glow: color-mix(in srgb, var(--iron-gold) 82%, transparent); --star-core: 10px; --star-spike: 30px; }

#view-iron-center .ic-star.is-ready .ic-star-lvl { color: var(--iron-gold); }

#view-iron-center .ic-star.is-ready .ic-star-light { animation: ic-star-breathe 2100ms var(--iron-ease) infinite; }

#view-iron-center .ic-star.is-ready .ic-star-orbit { opacity: 0.85; animation: ic-star-orbit 6000ms linear infinite; }

/* ---- Celestial bodies: the sky is a reward map -------------------------
 * dwarf/binary — standard levels (small, warm-white)
 * pulsar       — bonus beats (ringed, cyan)
 * bluegiant    — the LARGEST purses (big, blue, coronal ring)
 * radiant      — milestone crest cosmetics (gold-white, diamond spikes)
 * State colours (ready gold / claimed bright) still override per state. */

#view-iron-center .ic-star--dwarf { --star-core: 6px; --star-spike: 16px; }

#view-iron-center .ic-star--binary { --star-core: 6px; --star-spike: 14px; }

#view-iron-center .ic-star-light u {
  position: absolute; left: calc(50% + 8px); top: calc(50% - 7px); width: 4px; height: 4px;
  border-radius: 50%; text-decoration: none;
  background: radial-gradient(circle at 40% 35%, var(--text-primary) 0 30%, var(--star-col) 70%, transparent 100%);
  box-shadow: 0 0 6px var(--star-glow);
}

#view-iron-center .ic-star--pulsar { --star-core: 8px; --star-spike: 22px; }

#view-iron-center .ic-star--pulsar.is-locked { --star-col: var(--aura-core); --star-glow: color-mix(in srgb, var(--aura-core) 45%, transparent); }

#view-iron-center .ic-star-ring {
  position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--star-col) 55%, transparent);
  border-radius: 50%; transform: translate(-50%, -50%);
  animation: ic-star-ring-pulse 3200ms var(--iron-ease) infinite;
}

#view-iron-center .ic-star--bluegiant { --star-core: 13px; --star-spike: 38px; }

#view-iron-center .ic-star--bluegiant.is-locked,
#view-iron-center .ic-star--bluegiant.is-reached {
  --star-col: var(--aura-bright);
  --star-glow: color-mix(in srgb, var(--aura-bright) 62%, transparent);
}

#view-iron-center .ic-star--bluegiant .ic-star-ring { width: 40px; height: 40px; animation-duration: 4600ms; }

#view-iron-center .ic-star--bluegiant .ic-star-light::before { filter: blur(5px); }

#view-iron-center .ic-star--radiant { --star-core: 10px; --star-spike: 30px; }

#view-iron-center .ic-star--radiant.is-locked,
#view-iron-center .ic-star--radiant.is-reached {
  --star-col: color-mix(in srgb, var(--iron-gold-bright) 62%, var(--text-primary));
  --star-glow: color-mix(in srgb, var(--iron-gold) 58%, transparent);
}

@keyframes ic-star-ring-pulse {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: .18; transform: translate(-50%, -50%) scale(1.22); }
}

/* Legend: what each body pays. */

#view-iron-center .ic-star-legend {
  display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px;
  color: var(--text-muted); font-size: 10px; letter-spacing: .04em;
}

#view-iron-center .ic-star-legend-item { display: inline-flex; align-items: center; gap: 6px; }

#view-iron-center .ic-star-legend-item i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-secondary); box-shadow: 0 0 5px color-mix(in srgb, var(--text-secondary) 60%, transparent);
}

#view-iron-center .ic-star-legend-item.is-bluegiant i { width: 10px; height: 10px; background: var(--aura-bright); box-shadow: 0 0 7px var(--aura-soft); }

#view-iron-center .ic-star-legend-item.is-pulsar i { background: var(--aura-core); box-shadow: 0 0 5px var(--aura-soft); }

#view-iron-center .ic-star-legend-item.is-radiant i { background: var(--iron-gold-bright); box-shadow: 0 0 5px var(--iron-gold-glow); }

#view-iron-center .ic-star--major { --star-core: 11px; --star-spike: 34px; }

#view-iron-center .ic-star--major .ic-star-light b::before,
#view-iron-center .ic-star--major .ic-star-light b::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: calc(var(--star-spike) * 0.7); height: 1px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: linear-gradient(90deg, transparent, var(--star-col), transparent); opacity: 0.72;
}

#view-iron-center .ic-star--major .ic-star-light b::after { transform: translate(-50%, -50%) rotate(-45deg); }

#view-iron-center .ic-star.is-here .ic-star-light { filter: drop-shadow(0 0 7px var(--star-glow)); }

@keyframes ic-star-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.14); } }

@keyframes ic-star-orbit { to { transform: scale(1) rotate(360deg); } }

#view-iron-center .ic-star-breakdown {
  display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px;
  font-size: 12px; color: var(--text-secondary);
}

#view-iron-center .ic-star-breakdown span { display: inline-flex; align-items: center; gap: 6px; }

#view-iron-center .ic-star-breakdown .aura-emblem { width: 14px; height: 14px; }

#view-iron-center .ic-star-breakdown-boost { color: var(--aura-bright); font-weight: var(--font-weight-semibold); }

/* Reward detail modal lives under body, outside #view-iron-center. */

.ic-star-reward-overlay { padding: var(--space-md); background: color-mix(in srgb, var(--bg-primary) 76%, transparent); backdrop-filter: blur(5px); }

.ic-star-reward-modal {
  position: relative; width: min(420px, calc(100vw - 32px)); max-width: 420px; max-height: min(680px, calc(100dvh - 32px));
  border-color: color-mix(in srgb, var(--aura-core) 25%, var(--border-color)); overflow: hidden;
}

.ic-star-reward-close {
  position: absolute; top: 12px; right: 12px; z-index: 3; width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--text-primary) 14%, transparent); border-radius: 50%;
  background: color-mix(in srgb, var(--bg-primary) 72%, transparent); color: var(--text-secondary); cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.ic-star-reward-close:hover { color: var(--text-primary); border-color: var(--aura-core); transform: rotate(8deg); }

.ic-star-reward-close:focus-visible { outline: 2px solid var(--aura-bright); outline-offset: 2px; }

.ic-star-reward-sky {
  position: relative; height: 164px; overflow: hidden;
  background:
    radial-gradient(circle at 50% 52%, color-mix(in srgb, var(--aura-core) 20%, transparent), transparent 22%),
    radial-gradient(ellipse at 76% 0%, color-mix(in srgb, var(--aura-deep) 38%, transparent), transparent 48%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-primary) 86%, var(--aura-deep)), var(--bg-primary));
  border-bottom: 1px solid color-mix(in srgb, var(--aura-core) 16%, var(--border-color));
}

.ic-star-reward-sky::before,
.ic-star-reward-sky::after { content: ''; position: absolute; inset: 0; pointer-events: none; }

.ic-star-reward-sky::before {
  opacity: 0.65;
  background:
    radial-gradient(1px 1px at 17% 27%, var(--text-primary), transparent),
    radial-gradient(1px 1px at 78% 22%, var(--aura-bright), transparent),
    radial-gradient(1.5px 1.5px at 28% 74%, var(--text-primary), transparent),
    radial-gradient(1px 1px at 88% 68%, var(--text-primary), transparent),
    radial-gradient(1px 1px at 61% 14%, var(--iron-gold-bright), transparent),
    radial-gradient(1px 1px at 40% 40%, var(--text-secondary), transparent);
}

.ic-star-reward-sky::after { background: radial-gradient(ellipse at center, transparent 35%, color-mix(in srgb, var(--bg-primary) 62%, transparent)); }

.ic-star-reward-star { --reward-star: var(--text-secondary); position: absolute; z-index: 2; left: 50%; top: 52%; width: 64px; height: 64px; transform: translate(-50%, -50%); }

.ic-star-reward-overlay.is-ready .ic-star-reward-star { --reward-star: var(--iron-gold-bright); }

.ic-star-reward-overlay.is-claimed .ic-star-reward-star { --reward-star: var(--aura-bright); }

.ic-star-reward-star::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, var(--text-primary) 0 14%, var(--reward-star) 50%, transparent 76%);
  box-shadow: 0 0 16px 4px color-mix(in srgb, var(--reward-star) 65%, transparent), 0 0 38px 10px color-mix(in srgb, var(--reward-star) 22%, transparent);
}

.ic-star-reward-star i { position: absolute; left: 50%; top: 50%; width: 58px; height: 1px; transform: translate(-50%, -50%); background: linear-gradient(90deg, transparent, var(--reward-star), var(--text-primary), var(--reward-star), transparent); }

.ic-star-reward-star i:nth-child(2) { width: 42px; transform: translate(-50%, -50%) rotate(90deg); }

.ic-star-reward-star b { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--text-primary); }

.ic-star-reward-orbit { position: absolute; z-index: 1; left: 50%; top: 52%; width: 94px; height: 38px; transform: translate(-50%, -50%) rotate(-12deg); border: 1px solid color-mix(in srgb, var(--aura-core) 35%, transparent); border-radius: 50%; }

.ic-star-reward-body { display: grid; justify-items: center; gap: 8px; padding: var(--space-lg); text-align: center; }

.ic-star-reward-meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; }

.ic-star-reward-level { color: var(--aura-core); font: var(--font-weight-bold) 10px/1 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; }

.ic-star-reward-name { display: inline-flex; align-items: center; gap: 5px; color: var(--aura-bright); font: var(--font-weight-semibold) 10px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }

.ic-star-reward-name i { font-size: 8px; color: var(--aura-core); }

.ic-star-reward-body h2 { margin: 0; color: var(--text-primary); font: var(--font-weight-bold) var(--font-size-xl)/1.15 var(--font-display); }

.ic-star-reward-kind { display: inline-flex; align-items: center; gap: 7px; color: var(--text-secondary); font-size: var(--font-size-xs); }

.ic-star-reward-kind > i { color: var(--aura-core); }

.ic-star-reward-kind .iron-diamond { width: 16px; height: 16px; color: var(--iron-gold); }

.ic-star-reward-state { width: 100%; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; margin-top: var(--space-sm); padding: 12px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-tertiary); text-align: left; }

.ic-star-reward-state > i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--bg-secondary); color: var(--text-muted); }

.ic-star-reward-state > span { display: grid; gap: 2px; }

.ic-star-reward-state strong { color: var(--text-primary); font-size: var(--font-size-sm); }

.ic-star-reward-state small { color: var(--text-muted); font-size: var(--font-size-xs); line-height: 1.35; }

.ic-star-reward-state.is-ready { border-color: color-mix(in srgb, var(--iron-gold) 42%, var(--border-color)); }

.ic-star-reward-state.is-ready > i { color: var(--iron-gold); background: var(--iron-gold-soft); }

.ic-star-reward-state.is-claimed { border-color: color-mix(in srgb, var(--aura-core) 35%, var(--border-color)); }

.ic-star-reward-state.is-claimed > i { color: var(--aura-bright); background: var(--aura-soft); }

.ic-star-reward-footer { display: flex; justify-content: flex-end; gap: var(--space-sm); padding: 0 var(--space-lg) var(--space-lg); }

.ic-star-reward-claim {
  display: inline-flex; align-items: center; gap: 7px;
  border-color: color-mix(in srgb, var(--aura-bright) 46%, var(--aura-deep));
  background: linear-gradient(135deg, var(--aura-deep), var(--aura-core) 68%, var(--aura-bright));
  color: var(--bg-primary);
}

.ic-star-reward-claim:hover {
  border-color: var(--aura-bright);
  background: linear-gradient(135deg, var(--aura-core), var(--aura-bright));
  color: var(--bg-primary);
}

.ic-star-reward-claim:focus-visible { outline: 2px solid var(--aura-bright); outline-offset: 2px; }

.ic-star-reward-claim:disabled { opacity: .62; cursor: wait; transform: none; }

@media (prefers-reduced-motion: reduce) {
  #view-iron-center .ic-starpath-field span,
  #view-iron-center .ic-star.is-ready .ic-star-light,
  #view-iron-center .ic-star.is-ready .ic-star-orbit { animation: none; }
}

@media (max-width: 520px) {
  #view-iron-center .ic-starpath { height: 220px; border-radius: var(--radius-md); }

  #view-iron-center .ic-star { width: 48px; height: 48px; }

  #view-iron-center .ic-home-title { font-size: var(--font-size-lg); }

  .ic-star-reward-modal { width: calc(100vw - 24px); max-width: none; max-height: calc(100dvh - 24px); border-radius: var(--radius-lg); }

  .ic-star-reward-sky { height: 144px; }

  .ic-star-reward-footer { flex-direction: column-reverse; }

  .ic-star-reward-footer button { width: 100%; justify-content: center; }
}

/* ----- PLAY room: quests / achievements / games -------------------------
 * Both of the room's own switches are forged station rails (see FORGED
 * STATION RAIL above). The store switch splits the accent per side so the
 * shape still tells you which currency you are spending: IRON gold on the
 * shop side, AURA cyan on the merchant side. */

#view-iron-center .ic-store-tab[data-store-mode="iron"] { --st-accent: var(--iron-gold); }

#view-iron-center .ic-store-tab[data-store-mode="aura"] { --st-accent: var(--aura-core); }

/* Pointer from Play's quest list back to the daily path. */

#view-iron-center .ic-quests-pathlink {
  display: flex; align-items: center; gap: 10px; width: 100%; margin-top: var(--space-md);
  padding: 12px 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md);
  background: transparent; color: var(--text-secondary); cursor: pointer;
  font-size: var(--font-size-sm);
}

#view-iron-center .ic-quests-pathlink i:first-child { color: var(--iron-gold); }

#view-iron-center .ic-quests-pathlink span { flex: 1; text-align: left; }

#view-iron-center .ic-quests-pathlink:hover { border-color: var(--iron-gold); color: var(--text-primary); }

/* ----- "How this works" explainer cards (rooms only, dismissible) ------- */

#view-iron-center .ic-help {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: var(--space-md); padding: 12px 14px;
  border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-elevated);
}

#view-iron-center .ic-help-icon { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--bg-tertiary); color: var(--accent-color); font-size: 14px; }

#view-iron-center .ic-help-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

#view-iron-center .ic-help-copy strong { font-family: var(--font-display); font-size: var(--font-size-sm); }

#view-iron-center .ic-help-copy small { color: var(--text-secondary); line-height: 1.5; }

#view-iron-center .ic-help-close { flex: none; width: 26px; height: 26px; margin-left: auto; display: grid; place-items: center; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); cursor: pointer; }

#view-iron-center .ic-help-close:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ----- One-screen compaction: tighter seams, compact Waymark strip ------ */

#view-iron-center .ic-home > * + * { margin-top: var(--space-md); padding-top: var(--space-md); }

#view-iron-center .ic-path-head { margin-bottom: 10px; }

/* The Waymark road on Home: one compact horizontal-scroll strip, never wraps
 * to a second row, no boxed nodes — a slim reward ribbon. */

#view-iron-center .ic-path .ic-path-road { margin-top: 12px; padding-top: 12px; }

/* Star Path topline tighter; sky a touch shorter on the fold. */

#view-iron-center .ic-star-topline { margin: 8px 0 10px; }

#view-iron-center .ic-starpath { height: 190px; }

@media (max-width: 520px) {
  #view-iron-center .ic-starpath { height: 210px; }
}

/* =========================================================================
 * IRON CENTER HOME v3 — identity → one next action → choose-any Iron Path
 * Final owning layer for the redesigned masthead and Home hierarchy.
 * ========================================================================= */

/* One quiet resource presentation. Exact values remain visible on desktop and
 * in each button's title; compact notation prevents phone truncation. */

#view-iron-center .ic-mast { margin: 4px 0 var(--space-md); }

#view-iron-center .ic-header {
  align-items: center;
  gap: var(--space-md);
  padding: 10px 0 14px;
}

#view-iron-center .ic-title { font-size: clamp(28px, 3.4vw, 38px); }

#view-iron-center .ic-resource-strip {
  display: flex;
  align-items: stretch;
  flex: none;
  border-left: 1px solid var(--border-color);
}

#view-iron-center .ic-resource {
  --resource-color: var(--iron-gold);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 7px 12px;
  border: 0;
  border-right: 1px solid var(--border-color);
  background: transparent;
  color: var(--resource-color);
  cursor: pointer;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  transition: background var(--transition-fast), color var(--transition-fast);
}

#view-iron-center .ic-resource--aura { --resource-color: var(--aura-core); }

#view-iron-center .ic-resource-mark {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
}

#view-iron-center .ic-resource-mark .iron-diamond,
#view-iron-center .ic-resource-mark .aura-emblem { width: 17px; height: 17px; }

#view-iron-center .ic-resource-value { font-weight: var(--font-weight-bold); color: var(--resource-color); }

#view-iron-center .ic-resource-value--compact { display: none; }

#view-iron-center .ic-resource small {
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

@media (hover: hover) {
  #view-iron-center .ic-resource:hover { background: var(--bg-hover); }
}

/* Preview stays available without becoming the page hero. */

/* Identity is personal and compact; resources are intentionally absent here. */

#view-iron-center .ic-home-hero {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 14px;
  min-width: 0;
}

#view-iron-center .ic-home-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
}

#view-iron-center .ic-home-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#view-iron-center .ic-home-sub { margin: 0 0 3px; }

#view-iron-center .ic-home-identity {
  display: flex;
  align-items: center;
  gap: 5px 0;
  margin-top: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

#view-iron-center .ic-home-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
  white-space: nowrap;
}

#view-iron-center .ic-home-chip + .ic-home-chip {
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid var(--border-color);
}

#view-iron-center .ic-home-chip i,
#view-iron-center .ic-home-chip .aura-emblem { color: var(--chip-accent, var(--text-muted)); }

#view-iron-center .ic-home-chip .aura-emblem { width: 13px; height: 13px; }

@media (max-width: 768px) {
  #view-iron-center .ic-header {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  #view-iron-center .ic-header-left { min-width: 0; }

  #view-iron-center .ic-title { font-size: 25px; gap: 9px; }

  #view-iron-center .ic-title-sub { display: none; }

  #view-iron-center .ic-resource-strip { margin-left: auto; }

  #view-iron-center .ic-home-hero { clear: both; }

  #view-iron-center .ic-home-identity {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  #view-iron-center .ic-home-identity::-webkit-scrollbar { display: none; }
}

@media (max-width: 520px) {
  #view-iron-center .iron-center-view { padding-left: 2px; padding-right: 2px; }

  #view-iron-center .ic-mast { margin-bottom: 8px; }

  #view-iron-center .ic-header { padding: 8px 0 10px; }

  #view-iron-center .ic-resource { gap: 4px; padding: 6px 7px; }

  #view-iron-center .ic-resource-value--full { display: none; }

  #view-iron-center .ic-resource-value--compact { display: inline; }

  #view-iron-center .ic-resource small { display: none; }

  #view-iron-center .ic-resource .ic-aura-prestige { display: none; }

  #view-iron-center .ic-home > * + * { margin-top: 14px; padding-top: 14px; }

  #view-iron-center .ic-home-avatar { width: 42px; height: 42px; }

  #view-iron-center .ic-home-title { font-size: var(--font-size-lg); }

  #view-iron-center .ic-home-sub { font-size: 8px; }

  #view-iron-center .ic-home-identity { margin-top: 6px; }
}

/* ===== IRON PATH GAMEBOARD — quests, Daily Chest, and Waymarks ========== */

#view-iron-center .ic-path {
  position: relative;
  isolation: isolate;
}

#view-iron-center .ic-path-head {
  position: relative;
  z-index: 2;
}

#view-iron-center .ic-path-bar {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 40px;
  margin: 0 0 16px;
  padding: 0 2px;
}

#view-iron-center .ic-path-seg {
  position: relative;
  flex: 1 1 0;
  min-width: 22px;
  height: 7px;
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  box-shadow: inset 0 1px 3px var(--shadow-color);
}

#view-iron-center .ic-path-seg::before,
#view-iron-center .ic-path-seg::after {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: var(--border-light);
}

#view-iron-center .ic-path-seg::before { left: 7px; }

#view-iron-center .ic-path-seg::after { right: 7px; }

#view-iron-center .ic-path-seg-fill {
  display: block;
  width: calc(var(--sp) * 100%);
  height: 100%;
  background: var(--iron-gold);
  box-shadow: 0 0 12px var(--iron-gold-glow), inset 0 1px 0 var(--iron-gold-bright);
}

#view-iron-center .ic-path-gem {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin: auto;
  color: var(--text-muted);
  background: var(--bg-primary);
  transform: rotate(45deg);
  border: 1px solid var(--border-color);
}

#view-iron-center .ic-path-gem svg {
  width: 11px;
  height: 11px;
  transform: rotate(-45deg);
}

#view-iron-center .ic-path-gem.is-lit {
  color: var(--iron-gold-bright);
  border-color: var(--iron-gold);
  box-shadow: 0 0 14px var(--iron-gold-glow);
}

#view-iron-center .ic-path-end {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: 4px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-size: 13px;
}

#view-iron-center .ic-path-end.is-complete {
  border-color: var(--iron-gold);
  background: color-mix(in srgb, var(--iron-gold) 14%, var(--bg-tertiary));
  color: var(--iron-gold-bright);
  box-shadow: 0 0 18px var(--iron-gold-glow);
}

#view-iron-center .ic-path-gameboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
}

#view-iron-center .ic-path-gameboard > .ic-daily-chest {
  width: 100%;
  justify-self: stretch;
}

#view-iron-center .ic-path-quest-card {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-areas:
    "icon copy"
    "state state"
    "progress progress"
    "footer footer";
  gap: 9px 11px;
  align-items: center;
  min-width: 0;
  min-height: 132px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: default;
  text-align: left;
  transition: border-color var(--transition-fast), transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

#view-iron-center .ic-path-quest-card::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -28px;
  width: 78px;
  height: 78px;
  border: 1px solid var(--border-light);
  transform: rotate(45deg);
  pointer-events: none;
}

#view-iron-center .ic-path-quest-card.is-complete {
  border-color: color-mix(in srgb, var(--iron-gold) 34%, var(--border-color));
  background: color-mix(in srgb, var(--iron-gold) 5%, var(--bg-secondary));
}

#view-iron-center .ic-path-quest-card.is-ready {
  border-color: var(--iron-gold);
  cursor: pointer;
  box-shadow: inset 0 0 28px color-mix(in srgb, var(--iron-gold) 6%, transparent);
}

#view-iron-center .ic-path-quest-card:focus-visible {
  outline: 2px solid var(--iron-gold-bright);
  outline-offset: 3px;
}

@media (hover: hover) {
  #view-iron-center .ic-path-quest-card.is-ready:hover {
    z-index: 2;
    border-color: var(--iron-gold);
    background: var(--bg-hover);
    box-shadow: 0 10px 28px var(--shadow-color);
    transform: translateY(-2px);
  }
}

/* Iron Path uses the same one-bar / four-station rig as landing.html. */

#view-iron-center .ic-path-rig {
  min-width: 0;
  align-self: center;
  padding: 12px 4px;
}

#view-iron-center .ic-path-rig .ic-path-bar {
  gap: 10px;
  min-height: 0;
  margin: 0;
  padding: 0;
}

#view-iron-center .ic-path-rig .ic-path-seg {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 14px;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, color-mix(in srgb, #000 36%, transparent), color-mix(in srgb, #000 12%, transparent)), var(--bg-input);
  box-shadow: inset 0 1px 3px color-mix(in srgb, #000 58%, transparent), 0 1px 0 var(--border-highlight);
}

#view-iron-center .ic-path-rig .ic-path-seg::before,
#view-iron-center .ic-path-rig .ic-path-seg::after { display: none; }

#view-iron-center .ic-path-rig .ic-path-seg-fill {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  clip-path: inset(0 calc((1 - var(--sp)) * 100%) 0 0);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--iron-gold-deep), var(--iron-gold) 60%, var(--iron-gold-bright));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent);
}

#view-iron-center .ic-path-rig .ic-path-seg-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, #fff 45%, transparent) 50%, transparent 70%);
  animation: ic-path-sheen 2600ms var(--iron-ease) infinite;
}

#view-iron-center .ic-path-rig .ic-path-gem,
#view-iron-center .ic-path-rig .ic-path-end {
  flex: none;
  display: flex;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  transform: none;
  transition: color var(--transition-normal), transform var(--transition-normal);
}

#view-iron-center .ic-path-rig .ic-path-end { width: 28px; height: 28px; }

#view-iron-center .ic-path-rig .ic-path-gem svg,
#view-iron-center .ic-path-rig .ic-path-end svg { width: 100%; height: 100%; transform: none; }

#view-iron-center .ic-path-rig .ic-path-gem.is-lit { color: var(--iron-gold); transform: scale(1.15); box-shadow: none; }

#view-iron-center .ic-path-rig .ic-path-end.is-complete {
  border: 0;
  background: transparent;
  color: var(--iron-gold-bright);
  box-shadow: none;
  animation: ic-path-end-pop 700ms var(--iron-spring) both;
}

#view-iron-center .ic-path-stations {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

/* ===== Iron Path stations are CARDS ====================================
 * These used to be stripped to nothing — `background: transparent; border: 0;
 * box-shadow: none` — so the four daily quests read as loose text on the
 * canvas separated by hairlines. That was the old flat "rail" grammar, and it
 * is the single biggest reason the Iron Center did not look like the surface
 * next door: the dashboard says a discrete unit of content is a card, and
 * these are four discrete units of content.
 *
 * Same treatment as a dashboard card, token for token: surface off the
 * canvas, hairline border, --elev-1, and the edge-brighten hover. */

#view-iron-center .ic-path-station {
  min-width: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-1);
  padding: var(--space-md);
  transition: border-color var(--transition-fast),
              transform var(--transition-fast),
              box-shadow var(--transition-fast);
}

@media (hover: hover) {
  #view-iron-center .ic-path-station:hover {
    border-color: var(--border-strong);
    transform: translateY(-1px);
    box-shadow: var(--elev-2);
  }
}

/* State is carried on the EDGE, so the card surface stays constant and the
   gold means one thing: this one is finished. */

#view-iron-center .ic-path-station.is-complete {
  border-color: color-mix(in srgb, var(--iron-gold) 40%, var(--border-color));
}

#view-iron-center .ic-path-station.is-active {
  border-color: var(--border-strong);
}

#view-iron-center .ic-station-content {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
}

#view-iron-center button.ic-station-content { cursor: pointer; border-radius: var(--radius-sm); }

#view-iron-center button.ic-station-content:focus-visible { outline: 2px solid var(--iron-gold-bright); outline-offset: 4px; }

#view-iron-center .ic-path-station-top,
#view-iron-center .ic-path-station-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* No quest numbering — each station carries a small IRON diamond waymark
 * that lights when the quest pours into the one continuous rail above. */

#view-iron-center .ic-path-station-mark {
  display: inline-flex;
  width: 13px;
  height: 13px;
  color: var(--text-muted);
  transition: color var(--transition-normal), filter var(--transition-normal);
}

#view-iron-center .ic-path-station-mark svg { width: 100%; height: 100%; }

#view-iron-center .ic-path-station-mark.is-lit { color: var(--iron-gold); filter: drop-shadow(0 0 6px var(--iron-gold-glow)); }

/* One uninterrupted rail from the path's start to the chest. */

#view-iron-center .ic-path-bar--continuous .ic-path-seg { flex: 1; }

#view-iron-center .ic-path-station-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font-size: 8px;
  font-weight: var(--font-weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}

#view-iron-center .ic-path-station h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 7px 0 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}

#view-iron-center .ic-path-station h3 i { flex: 0 0 16px; width: 16px; color: var(--text-muted); font-size: 12px; text-align: center; }

#view-iron-center .ic-path-station h3 { text-overflow: ellipsis; white-space: nowrap; }

#view-iron-center .ic-path-station-hint {
  min-height: 31px;
  margin: 6px 0 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#view-iron-center .ic-path-station-progress {
  display: block;
  height: 4px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--bg-input);
  box-shadow: inset 0 1px 2px var(--shadow-color);
}

#view-iron-center .ic-path-station-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--aura-core);
  box-shadow: 0 0 7px var(--aura-soft);
}

#view-iron-center .ic-path-station-footer {
  margin-top: 6px;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: var(--font-weight-bold);
}

#view-iron-center .ic-path-station-reward { display: inline-flex; align-items: center; gap: 4px; color: var(--iron-gold-bright); }

#view-iron-center .ic-path-station-reward .iron-diamond,
#view-iron-center .ic-path-station-reward .aura-emblem { width: 13px; height: 13px; }

#view-iron-center .ic-path-station-reward.is-aura { color: var(--aura-core); }

#view-iron-center .ic-path-station.is-complete .ic-path-station-mark,
#view-iron-center .ic-path-station.is-complete h3 i,
#view-iron-center .ic-path-station.is-ready .ic-path-station-mark,
#view-iron-center .ic-path-station.is-ready h3 i,
#view-iron-center .ic-path-station.is-ready .ic-path-station-state { color: var(--iron-gold); }

#view-iron-center .ic-path-station.is-complete h3,
#view-iron-center .ic-path-station.is-ready h3 { color: var(--text-primary); }

#view-iron-center .ic-path-station.is-complete .ic-path-station-progress > span { background: var(--iron-gold); box-shadow: 0 0 8px var(--iron-gold-glow); }

@media (hover: hover) {
  #view-iron-center .ic-path-station.is-ready button.ic-station-content:hover h3 { color: var(--iron-gold-bright); }
}

@keyframes ic-path-sheen { 0% { transform: translateX(-100%); } 55%,100% { transform: translateX(100%); } }

@keyframes ic-path-sheen-v { 0% { transform: translateY(-100%); } 55%,100% { transform: translateY(100%); } }

@keyframes ic-path-end-pop { 0% { transform: scale(.7); filter: drop-shadow(0 0 0 transparent); } 40% { transform: scale(1.4); filter: drop-shadow(0 0 10px var(--iron-gold-glow)); } 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); } }

/* The chest is reward art on the SAME flat backdrop as the rest of the page —
 * no tinted panel, no hatch, no tone change midway down the Iron Path. Only
 * the art itself glows, and only in the moment of a gain. */

/* ===== The daily chest is a CARD, and a much smaller one ================
 * It was a 274px-tall transparent block — no surface, no border, exactly the
 * treatment the Iron Path stations had before this pass — with 230x145 of
 * chest art inside it. On Home that made a single decorative object the
 * tallest thing in the room and pushed its own title below the fold.
 *
 * Now it is a card like everything else in Play, and sized to the reward it
 * represents rather than to the artwork: ~180px instead of 274px. */

#view-iron-center .ic-daily-chest {
  position: relative;
  /* Laid on its side: art left, copy centre, action right. Stacked and centred
     it was a 300x321 column for what is one line of information and one
     button — the tallest object in the room, taller than the four quests it
     sat under. As a row it is ~130px and reads as a card like everything
     else. */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-lg);
  min-height: 0;
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  box-shadow: var(--elev-1);
  transition: border-color var(--transition-fast),
              transform var(--transition-fast),
              box-shadow var(--transition-fast);
}

@media (hover: hover) {
  #view-iron-center .ic-daily-chest:hover {
    border-color: var(--border-strong);
    transform: translateY(-1px);
    box-shadow: var(--elev-2);
  }
}

/* Ready to open is the one state worth an edge: gold means claim me. */

#view-iron-center .ic-daily-chest.is-ready {
  border-color: color-mix(in srgb, var(--iron-gold) 40%, var(--border-color));
}

#view-iron-center .ic-daily-chest.is-ready .ic-chest-art {
  filter: drop-shadow(0 13px 10px var(--shadow-color)) drop-shadow(0 0 22px var(--iron-gold-glow));
}

#view-iron-center .ic-chest-stage {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  /* Scaled with the card. The artwork was sized as a hero illustration; on a
     card it is an icon for the reward, not the reward itself. */
  width: min(150px, 100%);
  height: 96px;
  margin: 0 auto;
}

#view-iron-center .ic-chest-art { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 13px 10px var(--shadow-color)); }

#view-iron-center .ic-chest-shadow { fill: color-mix(in srgb, var(--shadow-color) 72%, transparent); }

#view-iron-center .ic-chest-lid-top { fill: color-mix(in srgb, var(--iron-gold-deep) 75%, var(--bg-tertiary)); stroke: var(--iron-gold); stroke-width: 3; }

#view-iron-center .ic-chest-lid-face,
#view-iron-center .ic-chest-body { fill: color-mix(in srgb, var(--iron-gold-deep) 68%, var(--bg-secondary)); stroke: var(--iron-gold-deep); stroke-width: 3; }

#view-iron-center .ic-chest-body-face { fill: color-mix(in srgb, var(--iron-gold) 27%, var(--bg-tertiary)); }

#view-iron-center .ic-chest-band,
#view-iron-center .ic-chest-rim { fill: var(--iron-gold); stroke: var(--iron-gold-bright); stroke-width: 2; }

#view-iron-center .ic-chest-highlight { fill: none; stroke: color-mix(in srgb, var(--iron-gold-bright) 68%, transparent); stroke-width: 3; stroke-linecap: round; }

/* ---- The chain seal: two runs of forged links crossing under a padlock.
 * Three claimed daily quests forge the key; the key snaps the chain. ---- */

#view-iron-center .ic-chain-link {
  fill: color-mix(in srgb, var(--text-secondary) 40%, var(--bg-tertiary));
  stroke: color-mix(in srgb, var(--text-secondary) 62%, var(--border-color));
  stroke-width: 1.6;
}

#view-iron-center .ic-chain-link.is-short { fill: var(--bg-tertiary); }

#view-iron-center .ic-chain-run { transform-box: fill-box; transform-origin: 50% 50%; }

#view-iron-center .ic-padlock-body {
  fill: color-mix(in srgb, var(--text-secondary) 26%, var(--bg-secondary));
  stroke: color-mix(in srgb, var(--text-secondary) 70%, var(--border-color));
  stroke-width: 2.4;
}

#view-iron-center .ic-padlock-shackle { fill: none; stroke: color-mix(in srgb, var(--text-secondary) 70%, var(--border-color)); stroke-width: 5; }

#view-iron-center .ic-padlock-keyhole { fill: none; stroke: var(--text-muted); stroke-width: 2; }

#view-iron-center .ic-chest-padlock { transform-box: fill-box; transform-origin: 50% 40%; }

#view-iron-center .ic-daily-chest.is-locked .ic-chest-art { filter: saturate(.6) brightness(.74) drop-shadow(0 13px 10px var(--shadow-color)); }

/* Key forged: the chain catches the light and the padlock stirs. */

#view-iron-center .ic-daily-chest.is-ready .ic-chain-link {
  fill: color-mix(in srgb, var(--iron-gold) 44%, var(--bg-tertiary));
  stroke: var(--iron-gold);
}

#view-iron-center .ic-daily-chest.is-ready .ic-padlock-body { stroke: var(--iron-gold); }

#view-iron-center .ic-daily-chest.is-ready .ic-padlock-shackle { stroke: var(--iron-gold-bright); }

#view-iron-center .ic-daily-chest.is-ready .ic-padlock-keyhole { stroke: var(--iron-gold-bright); }

#view-iron-center .ic-daily-chest.is-ready .ic-chest-padlock { animation: ic-padlock-stir 2400ms var(--iron-ease) infinite; }

/* Key turned: the padlock leaps off and both chain runs are flung away. */

#view-iron-center .ic-daily-chest.is-opening .ic-chest-padlock,
#view-iron-center .ic-daily-chest.is-revealing .ic-chest-padlock { animation: ic-chest-lock-pop 640ms var(--iron-spring) both; }

#view-iron-center .ic-daily-chest.is-opening .ic-chain-run.is-h,
#view-iron-center .ic-daily-chest.is-revealing .ic-chain-run.is-h { animation: ic-chain-fly-h 700ms var(--iron-ease) 120ms both; }

#view-iron-center .ic-daily-chest.is-opening .ic-chain-run.is-v,
#view-iron-center .ic-daily-chest.is-revealing .ic-chain-run.is-v { animation: ic-chain-fly-v 700ms var(--iron-ease) 90ms both; }

@keyframes ic-padlock-stir {
  0%, 62%, 100% { transform: rotate(0deg); }
  70% { transform: rotate(-5deg); }
  78% { transform: rotate(4deg); }
  86% { transform: rotate(-2deg); }
}

@keyframes ic-chain-fly-h {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate(46px, 26px) rotate(9deg); }
}

@keyframes ic-chain-fly-v {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate(-42px, 30px) rotate(-11deg); }
}

/* Claimed: the chest is spent — a cooled, sealed husk until tomorrow */

#view-iron-center .ic-daily-chest.is-open .ic-chest-art { filter: saturate(.5) brightness(.66) drop-shadow(0 10px 9px var(--shadow-color)); }

#view-iron-center .ic-chest-spark {
  position: absolute;
  z-index: 3;
  width: 5px;
  height: 5px;
  background: var(--iron-gold-bright);
  box-shadow: 0 0 12px var(--iron-gold);
  opacity: 0;
  transform: rotate(45deg);
}

#view-iron-center .ic-chest-spark.is-one { left: 28%; top: 35%; }

#view-iron-center .ic-chest-spark.is-two { left: 67%; top: 18%; }

#view-iron-center .ic-chest-spark.is-three { left: 78%; top: 48%; }

#view-iron-center .ic-daily-chest.is-ready .ic-chest-spark { opacity: .8; animation: ic-chest-spark 1900ms ease-in-out infinite; }

#view-iron-center .ic-daily-chest.is-ready .ic-chest-spark.is-two { animation-delay: -620ms; }

#view-iron-center .ic-daily-chest.is-ready .ic-chest-spark.is-three { animation-delay: -1200ms; }

#view-iron-center .ic-chest-copy { position: relative; z-index: 2; flex: 1; min-width: 0; }

#view-iron-center .ic-chest-copy h3 { margin: 6px 0 0; font-family: var(--font-display); font-size: var(--font-size-lg); }

#view-iron-center .ic-chest-copy p { margin: 5px 0 0; max-width: 32ch; color: var(--text-secondary); font-size: 11px; line-height: 1.35; }

#view-iron-center .ic-chest-open-btn {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  min-width: 0;
  flex-shrink: 0;
  max-width: 100%;
  min-height: 43px;
  margin-top: 12px;
  padding: 0 19px;
  overflow: hidden;
  border: 1px solid var(--iron-gold-bright);
  border-radius: var(--radius-pill);
  background: var(--iron-gold);
  color: var(--bg-primary);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  box-shadow: 0 6px 18px var(--iron-gold-glow), inset 0 1px 0 var(--iron-gold-bright);
}

#view-iron-center .ic-chest-open-btn .iron-diamond { width: 14px; height: 14px; }

#view-iron-center .ic-chest-open-btn:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 3px; }

#view-iron-center .ic-chest-open-btn > * { position: relative; z-index: 1; }

#view-iron-center .ic-chest-open-btn:disabled { cursor: wait; opacity: 1; }

#view-iron-center .ic-chest-open-btn:disabled::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 22%, color-mix(in srgb, #fff 38%, transparent) 49%, transparent 76%);
  animation: ic-chest-button-sweep 900ms var(--iron-ease) infinite;
}

#view-iron-center .ic-chest-state {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 35px;
  margin-top: 11px;
  padding: 0 13px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
}

#view-iron-center .ic-chest-state.is-open { border-color: color-mix(in srgb, var(--success) 45%, var(--border-color)); color: var(--success); }

#view-iron-center .ic-chest-admin-btn {
  max-width: 100%;
  min-height: 36px;
  margin-top: 9px;
  border-radius: var(--radius-pill);
}

#view-iron-center .ic-game-admin-refresh {
  margin-left: auto;
  min-height: 30px;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  white-space: nowrap;
}

#view-iron-center .ic-chest-admin-btn:focus-visible,
#view-iron-center .ic-game-admin-refresh:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 3px; }

#view-iron-center .ic-chest-shockwave {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 61%;
  width: 82px;
  height: 28px;
  border: 2px solid var(--iron-gold-bright);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.35);
}

/* Light core that charges inside the chest, then blooms as it shatters */

#view-iron-center .ic-chest-core {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 55%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--iron-gold-bright) 90%, #fff) 0%, var(--iron-gold-glow) 40%, transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.2);
}

/* Blown-out white flash at the instant of the burst */

#view-iron-center .ic-chest-flash {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 54%;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, color-mix(in srgb, #fff 70%, var(--iron-gold-bright)) 30%, transparent 68%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.3);
}

#view-iron-center .ic-chest-reward-pop {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 38%;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--iron-gold-bright);
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  opacity: 0;
  filter: drop-shadow(0 0 10px var(--iron-gold));
  transform: translate(-50%, 8px) scale(.65);
}

#view-iron-center .ic-chest-reward-pop .iron-diamond { width: 21px; height: 21px; }

#view-iron-center .ic-chest-reward-pop strong { font-size: 23px; }

#view-iron-center .ic-chest-reward-pop span { font-size: 9px; letter-spacing: .13em; }

/* Volumetric light beam bursting up out of the open lid */

#view-iron-center .ic-chest-beam {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 8%;
  width: 118px;
  height: 96px;
  background: linear-gradient(to top, color-mix(in srgb, var(--iron-gold-bright) 78%, #fff) 0%, var(--iron-gold-glow) 42%, transparent 100%);
  clip-path: polygon(38% 100%, 62% 100%, 100% 0%, 0% 0%);
  mix-blend-mode: screen;
  opacity: 0;
  filter: blur(2px);
  transform: translate(-50%, 0) scaleY(.2);
  transform-origin: 50% 100%;
  pointer-events: none;
}

/* Gold coins that arc up out of the chest and fall back under gravity */

#view-iron-center .ic-chest-coins {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 52%;
  width: 0;
  height: 0;
  pointer-events: none;
}

#view-iron-center .ic-chest-coins i {
  --cx: 0px;
  --cpk: -66px;
  --cfall: 34px;
  --cspin: 400deg;
  position: absolute;
  left: 0;
  top: 0;
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: linear-gradient(145deg, var(--iron-gold-bright) 0%, var(--iron-gold) 46%, var(--iron-gold-deep) 100%);
  box-shadow: 0 0 7px var(--iron-gold-glow), inset 0 0 0 1px color-mix(in srgb, var(--iron-gold-bright) 70%, transparent);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0) scale(.4);
}

#view-iron-center .ic-chest-coins i:nth-child(1) { --cx: -64px; --cpk: -58px; --cfall: 40px; --cspin: -520deg; }

#view-iron-center .ic-chest-coins i:nth-child(2) { --cx: 58px;  --cpk: -74px; --cfall: 30px; --cspin: 470deg; width: 9px; height: 9px; }

#view-iron-center .ic-chest-coins i:nth-child(3) { --cx: -30px; --cpk: -88px; --cfall: 46px; --cspin: 610deg; }

#view-iron-center .ic-chest-coins i:nth-child(4) { --cx: 34px;  --cpk: -84px; --cfall: 44px; --cspin: -430deg; width: 13px; height: 13px; }

#view-iron-center .ic-chest-coins i:nth-child(5) { --cx: -80px; --cpk: -50px; --cfall: 36px; --cspin: 560deg; width: 8px; height: 8px; }

#view-iron-center .ic-chest-coins i:nth-child(6) { --cx: 82px;  --cpk: -54px; --cfall: 32px; --cspin: -600deg; }

#view-iron-center .ic-chest-coins i:nth-child(7) { --cx: 6px;   --cpk: -98px; --cfall: 50px; --cspin: 500deg; width: 12px; height: 12px; }

#view-iron-center .ic-chest-coins i:nth-child(8) { --cx: -46px; --cpk: -70px; --cfall: 28px; --cspin: -560deg; width: 8px; height: 8px; }

#view-iron-center .ic-chest-coins i:nth-child(9) { --cx: 48px;  --cpk: -92px; --cfall: 42px; --cspin: 640deg; width: 9px; height: 9px; }

/* Disintegration dust — motes erupting from the chest's body, drifting up */

#view-iron-center .ic-chest-dust {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 55%;
  width: 0;
  height: 0;
  pointer-events: none;
}

#view-iron-center .ic-chest-dust i {
  --sx: 0px; --sy: 0px; --dx: 0px; --dy: -80px; --dr: 180deg; --dd: 0ms; --dsz: 5px;
  position: absolute;
  left: 0;
  top: 0;
  width: var(--dsz);
  height: var(--dsz);
  border-radius: 1px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--iron-gold-bright) 90%, #fff), var(--iron-gold) 60%, var(--iron-gold-deep));
  box-shadow: 0 0 6px var(--iron-gold-glow);
  opacity: 0;
  transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) rotate(0) scale(.3);
}

/* Charge-up: the chest rattles and a light builds inside before it blows */

#view-iron-center .ic-daily-chest.is-opening .ic-chest-art { animation: ic-chest-windup 620ms var(--iron-ease) both; }

#view-iron-center .ic-daily-chest.is-opening .ic-chest-core { animation: ic-chest-core-charge 620ms var(--iron-ease) both; }

#view-iron-center .ic-daily-chest.is-opening .ic-chest-spark,
#view-iron-center .ic-daily-chest.is-revealing .ic-chest-spark { animation: none; opacity: 0; }

/* Burst + disintegration */

#view-iron-center .ic-daily-chest.is-revealing .ic-chest-art { animation: ic-chest-crumble 1050ms var(--iron-ease) both; }

#view-iron-center .ic-daily-chest.is-revealing .ic-chest-core { animation: ic-chest-core-burst 900ms var(--iron-ease) both; }

#view-iron-center .ic-daily-chest.is-revealing .ic-chest-flash { animation: ic-chest-flash 620ms var(--iron-ease) 60ms both; }

#view-iron-center .ic-daily-chest.is-revealing .ic-chest-shockwave { animation: ic-chest-shockwave 720ms var(--iron-ease) 120ms both; }

#view-iron-center .ic-daily-chest.is-revealing .ic-chest-beam { animation: ic-chest-beam-rise 950ms var(--iron-ease) 150ms both; }

#view-iron-center .ic-daily-chest.is-revealing .ic-chest-dust i { animation: ic-chest-dust-fly 1000ms var(--iron-ease) var(--dd, 0ms) both; }

#view-iron-center .ic-daily-chest.is-revealing .ic-chest-coins i { animation: ic-chest-coin-arc 1000ms cubic-bezier(.26,.62,.4,1) 180ms both; }

#view-iron-center .ic-daily-chest.is-revealing .ic-chest-coins i:nth-child(3n) { animation-delay: 250ms; }

#view-iron-center .ic-daily-chest.is-revealing .ic-chest-coins i:nth-child(3n+2) { animation-delay: 210ms; }

#view-iron-center .ic-daily-chest.is-revealing .ic-chest-reward-pop { animation: ic-chest-reward-rise 860ms var(--iron-spring) 420ms both; }

#view-iron-center .ic-daily-chest.is-revealing { animation: ic-chest-card-shake 460ms var(--iron-ease) 120ms both; }

@keyframes ic-chest-spark { 0%,100% { transform: translateY(5px) rotate(45deg) scale(.45); opacity: .2; } 50% { transform: translateY(-7px) rotate(45deg) scale(1); opacity: 1; } }

@keyframes ic-chest-button-sweep { 0% { transform: translateX(-115%); } 100% { transform: translateX(115%); } }

/* Anticipation: the chest rattles harder and harder, then crouches to spring */

@keyframes ic-chest-windup {
  0% { transform: translate(0,0) rotate(0deg); }
  16% { transform: translate(-1px,0) rotate(-.35deg); }
  30% { transform: translate(1.5px,0) rotate(.5deg); }
  44% { transform: translate(-2px,0) rotate(-.75deg); }
  58% { transform: translate(2.5px,-1px) rotate(1deg); }
  72% { transform: translate(-3px,-1px) rotate(-1.2deg); }
  85% { transform: translate(2px,-2px) rotate(.8deg); }
  100% { transform: translate(0,-3px) rotate(0deg) scale(1.03); }
}

@keyframes ic-chest-shockwave {
  0% { opacity: .9; transform: translate(-50%, -50%) scale(.35); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.35); }
}

/* Light core swells inside the sealed chest as it charges */

@keyframes ic-chest-core-charge {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.2); }
  60% { opacity: .5; transform: translate(-50%,-50%) scale(.7); }
  100% { opacity: .8; transform: translate(-50%,-50%) scale(.95); }
}

/* ...then detonates outward when the chest shatters */

@keyframes ic-chest-core-burst {
  0% { opacity: .85; transform: translate(-50%,-50%) scale(.95); }
  22% { opacity: 1; transform: translate(-50%,-50%) scale(1.9); }
  55% { opacity: .5; transform: translate(-50%,-50%) scale(1.5); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.2); }
}

@keyframes ic-chest-flash {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.3); }
  20% { opacity: .95; transform: translate(-50%,-50%) scale(1.25); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.7); }
}

/* The chest pops bright, then crumbles up and out of existence */

@keyframes ic-chest-crumble {
  0% { opacity: 1; transform: scale(1); filter: brightness(1); }
  10% { opacity: 1; transform: scale(1.07); filter: brightness(1.7); }
  20% { opacity: 1; transform: scale(1.02); filter: brightness(2.6) drop-shadow(0 0 26px var(--iron-gold)); }
  45% { opacity: .55; transform: translateY(-6px) scale(1.03) scaleX(.97); filter: brightness(1.7) blur(1.5px); }
  75% { opacity: .12; transform: translateY(-13px) scale(1.02) scaleX(.9); filter: brightness(1.3) blur(3px); }
  100% { opacity: 0; transform: translateY(-20px) scale(1) scaleX(.82); filter: brightness(1.1) blur(4px); }
}

/* Each mote pops off the chest, then drifts up like an ember and fades */

@keyframes ic-chest-dust-fly {
  0% { opacity: 0; transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) rotate(0deg) scale(.3); }
  14% { opacity: 1; transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) rotate(calc(var(--dr) * .2)) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--dr)) scale(.15); }
}

@keyframes ic-chest-reward-rise {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(.62); }
  38% { opacity: 1; transform: translate(-50%, -20px) scale(1.13); }
  72% { opacity: 1; transform: translate(-50%, -32px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -48px) scale(.94); }
}

/* The lid bursting open kicks the whole card — decaying impact shake */

@keyframes ic-chest-card-shake {
  0%,100% { transform: translate(0,0); }
  14% { transform: translate(-3px,1px); }
  28% { transform: translate(3px,-1px); }
  42% { transform: translate(-2px,1px); }
  56% { transform: translate(2px,-1px); }
  70% { transform: translate(-1px,0); }
  84% { transform: translate(1px,0); }
}

/* Lock hasp snaps up and is flung off as the seal breaks */

@keyframes ic-chest-lock-pop {
  0% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
  22% { transform: translateY(-10px) rotate(-8deg) scale(1.06); opacity: 1; }
  100% { transform: translateY(-46px) rotate(-40deg) scale(.5); opacity: 0; }
}

@keyframes ic-chest-beam-rise {
  0% { opacity: 0; transform: translate(-50%,0) scaleY(.15) scaleX(.6); }
  28% { opacity: .9; transform: translate(-50%,0) scaleY(1.06) scaleX(1.08); }
  60% { opacity: .5; transform: translate(-50%,0) scaleY(1) scaleX(1); }
  100% { opacity: 0; transform: translate(-50%,0) scaleY(1) scaleX(.95); }
}

/* Coins launch up fast, hang at the apex, then fall back under gravity */

@keyframes ic-chest-coin-arc {
  0% { opacity: 0; transform: translate(-50%,-50%) rotate(0deg) scale(.4); }
  12% { opacity: 1; }
  40% { transform: translate(calc(-50% + calc(var(--cx) * .6)), calc(-50% + var(--cpk))) rotate(calc(var(--cspin) * .5)) scale(1); }
  55% { transform: translate(calc(-50% + calc(var(--cx) * .78)), calc(-50% + calc(var(--cpk) * .92))) rotate(calc(var(--cspin) * .66)) scale(1); }
  88% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--cx)), calc(-50% + var(--cfall))) rotate(var(--cspin)) scale(.8); }
}

@media (max-width: 900px) {
  #view-iron-center .ic-path-gameboard { grid-template-columns: 1fr; }

  #view-iron-center .ic-daily-chest { order: -1; min-height: 245px; }

  #view-iron-center .ic-chest-stage { height: 86px; }
}

@media (max-width: 768px) {
  #view-iron-center .ic-path-rig {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: auto;
    column-gap: 16px;
    padding: 7px 3px 2px;
  }

  #view-iron-center .ic-path-rig .ic-path-bar {
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: 10px;
  }

  #view-iron-center .ic-path-rig .ic-path-seg {
    flex: 1;
    width: 14px;
    min-width: 14px;
    min-height: 52px;
    height: auto;
  }

  #view-iron-center .ic-path-rig .ic-path-seg-fill {
    /* The rail reads top→down on mobile (quests above, chest below), so the
     * gold pours downward from the start of the path. */
    clip-path: inset(0 0 calc((1 - var(--sp)) * 100%) 0);
    background: linear-gradient(180deg, var(--iron-gold-deep), var(--iron-gold) 60%, var(--iron-gold-bright));
  }

  #view-iron-center .ic-path-rig .ic-path-seg-fill::after {
    background: linear-gradient(170deg, transparent 30%, color-mix(in srgb, #fff 45%, transparent) 50%, transparent 70%);
    animation-name: ic-path-sheen-v;
  }

  #view-iron-center .ic-path-rig .ic-path-gem,
  #view-iron-center .ic-path-rig .ic-path-end { flex: none; margin: 0; }

  #view-iron-center .ic-path-stations {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin: 0;
    padding: 2px 0 5px;
  }

  #view-iron-center .ic-station-content {
    min-height: 88px;
    padding: 0;
  }

  #view-iron-center .ic-path-station-hint { min-height: 0; -webkit-line-clamp: 1; }

  #view-iron-center .ic-daily-chest { order: 0; }
}

@media (max-width: 640px) {
  #view-iron-center .ic-path-quest-card {
    grid-template-columns: 36px minmax(0, 1fr);
    min-height: 116px;
    padding: 12px;
  }

  #view-iron-center .ic-daily-chest { min-height: 255px; padding-inline: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  #view-iron-center .ic-path-rig .ic-path-seg-fill::after,
#view-iron-center .ic-path-rig .ic-path-end.is-complete,
#view-iron-center .ic-chest-open-btn:disabled::after,
#view-iron-center .ic-daily-chest.is-ready .ic-chest-spark,
#view-iron-center .ic-daily-chest.is-opening .ic-chest-art,
#view-iron-center .ic-daily-chest.is-opening .ic-chest-core,
#view-iron-center .ic-daily-chest.is-revealing .ic-chest-art,
#view-iron-center .ic-daily-chest.is-revealing .ic-chest-core,
#view-iron-center .ic-daily-chest.is-revealing .ic-chest-flash,
#view-iron-center .ic-daily-chest.is-revealing .ic-chest-shockwave,
#view-iron-center .ic-daily-chest.is-revealing .ic-chest-reward-pop,
#view-iron-center .ic-daily-chest.is-revealing,
#view-iron-center .ic-daily-chest.is-revealing .ic-chest-padlock,
#view-iron-center .ic-daily-chest.is-opening .ic-chest-padlock,
#view-iron-center .ic-daily-chest.is-opening .ic-chain-run.is-h,
#view-iron-center .ic-daily-chest.is-opening .ic-chain-run.is-v,
#view-iron-center .ic-daily-chest.is-revealing .ic-chain-run.is-h,
#view-iron-center .ic-daily-chest.is-revealing .ic-chain-run.is-v,
#view-iron-center .ic-daily-chest.is-revealing .ic-chest-dust i,
#view-iron-center .ic-daily-chest.is-revealing .ic-chest-beam,
#view-iron-center .ic-daily-chest.is-revealing .ic-chest-coins i { animation: none !important; }
}

/* A single failed section shows this instead of blanking the whole view. */

#view-iron-center .ic-render-error {
  display: flex; align-items: center; gap: 10px; margin: var(--space-md) 0;
  padding: 14px 16px; border: 1px solid var(--border-color); border-radius: var(--radius-md);
  background: var(--bg-elevated); color: var(--text-secondary); font-size: var(--font-size-sm);
}

#view-iron-center .ic-render-error i { color: var(--warning-color, #d9a441); }

/* =========================================================================
 * ARCADE — the three daily games as real, hands-on rigs
 * ========================================================================= */

/* The arcade's shared material language. Declared on the room, not on a card,
 * because the one <defs> block that paints every forged mark is a sibling of
 * the cards and has to inherit the same ramp.
 *   steel — every forged part, mixed off the theme surfaces so it stays metal
 *           in light mode too
 *   hot/cold — the arcade's one temperature rule: ember reads "more/hotter",
 *           cyan reads "less/cooler". The brand hues are tuned for dark
 *           surfaces, so light mode gets a deepened pair of the same hues. */

#view-iron-center {
  --steel-hi: color-mix(in srgb, #fff 34%, var(--bg-tertiary));
  --steel-mid: color-mix(in srgb, #fff 14%, var(--bg-tertiary));
  --steel-lo: color-mix(in srgb, #000 30%, var(--bg-tertiary));
  /* The anvil's ramp. Declared on the room because the shared <defs> that
   * paints its planes is a sibling of the cards and inherits from here. */
  /* Mixed toward a warm white, not pure #fff: the surfaces are blue-grey
   * theme chrome underneath, and steel lit by a fire is not lavender. */
  /* The ramp is deliberately wide: a stylised object needs its planes far
   * apart in value or it flattens into one grey mass at card size. */
  --a-hi: color-mix(in srgb, #fff6e8 84%, var(--bg-tertiary));
  --a-mid: color-mix(in srgb, #d6cab6 50%, var(--bg-tertiary));
  --a-lo: color-mix(in srgb, #7b7061 20%, var(--bg-tertiary));
  --cast-hi: color-mix(in srgb, #a2968a 40%, var(--bg-tertiary));
  --cast-lo: color-mix(in srgb, #3f382f 26%, var(--bg-tertiary));
  --arcade-hot: var(--spark);
  --arcade-cold: var(--aura-core);
  --arcade-gold-ink: var(--iron-gold);
  /* The smithy's materials — stone, timber, iron, glass — for exactly the same
   * reason as the ramp above. Declared on the Forge card instead, every stop
   * that mixes off them computed as invalid and fell back to solid black, so
   * the wall, the hood, the floor, the tub and the window glass were all
   * painting black behind the haze that was standing in for them. */
  --shop-stone-hi: color-mix(in srgb, #4a4038 26%, var(--bg-secondary));
  --shop-stone-lo: color-mix(in srgb, #0b0a09 52%, var(--bg-secondary));
  --shop-iron: color-mix(in srgb, #000 34%, var(--cast-hi));
  --shop-timber: color-mix(in srgb, #6b4a2c 46%, var(--bg-tertiary));
  --shop-cool: #7fb4d6;
}

.light-mode #view-iron-center {
  /* Mixed against a near-white surface the ramp bleaches out and the anvil
   * stops being metal, so light mode gets its own — same value spacing, but
   * anchored to iron rather than to the page. */
  --a-hi: #efe8dc;
  --a-mid: #b6ad9d;
  --a-lo: #7d7466;
  --cast-hi: #9c9384;
  --cast-lo: #5a5348;
  --arcade-hot: color-mix(in srgb, var(--spark) 55%, #7a3b00);
  --arcade-cold: color-mix(in srgb, var(--aura-core) 60%, #05323a);
  --arcade-gold-ink: color-mix(in srgb, var(--iron-gold) 55%, #5a3f00);
}

/* ---- The IRON BOOM — the shared payoff blast -----------------------------
 * One celebration for all three games, fired on the single moment each one
 * is really about: the weight found, the strike landed true, the perfect
 * run. The card rim flashes, a shockwave leaves the middle of the rig and
 * twelve IRON marks spray out over it.
 *
 * Every piece starts at opacity 0 and is painted by its animation alone, so
 * with motion off nothing is left frozen mid-blast — it simply never fires. */

/* The blast is a child of the card (or of a rig inside it), so the card has
 * to be the positioning context. */

#view-iron-center .ic-game-card { position: relative; }

#view-iron-center .ic-game-card.is-boom {
  animation: ic-boom-rim 1s var(--iron-ease) both;
}

@keyframes ic-boom-rim {
  0%   { border-color: var(--iron-gold); box-shadow: 0 0 0 1px var(--iron-gold), 0 0 34px var(--iron-gold-glow), var(--shadow-sm); }
  100% { border-color: var(--border-color); box-shadow: var(--shadow-sm), inset 0 1px 0 var(--border-highlight); }
}

/* The payout lands a beat after the blast. */

#view-iron-center .ic-game-card.is-boom .ic-trivia-summary-reward {
  animation: ic-boom-reward 820ms var(--iron-spring) both;
  animation-delay: 90ms;
}

@keyframes ic-boom-reward {
  0%   { opacity: 0; transform: scale(.5); }
  60%  { opacity: 1; transform: scale(1.14); }
  100% { opacity: 1; transform: none; }
}

#view-iron-center .ic-burst {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 2;
}

#view-iron-center .ic-burst-flash {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 320px;
  height: 320px;
  margin: -160px 0 0 -160px;
  border-radius: var(--radius-round);
  background: radial-gradient(circle, var(--iron-gold-glow), transparent 62%);
  opacity: 0;
  animation: ic-burst-flash 760ms var(--iron-ease) both;
}

@keyframes ic-burst-flash {
  0%   { opacity: 0; transform: scale(.3); }
  14%  { opacity: .85; }
  100% { opacity: 0; transform: scale(1.15); }
}

#view-iron-center .ic-burst-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 132px;
  height: 132px;
  margin: -66px 0 0 -66px;
  border: 2px solid var(--iron-gold-bright);
  border-radius: var(--radius-round);
  opacity: 0;
  animation: ic-burst-ring 720ms var(--iron-ease) both;
}

#view-iron-center .ic-burst-ring.is-two {
  border-color: var(--iron-gold);
  border-width: 1.5px;
  animation-duration: 900ms;
  animation-delay: 110ms;
}

@keyframes ic-burst-ring {
  0%   { opacity: .95; transform: scale(.16); }
  70%  { opacity: .35; }
  100% { opacity: 0; transform: scale(1.5); }
}

#view-iron-center .ic-burst-shard {
  position: absolute;
  left: -7px;
  top: -7px;
  width: 14px;
  height: 14px;
  opacity: 0;
  animation: ic-burst-shard 720ms var(--iron-ease) both;
  animation-delay: var(--d, 0ms);
}

/* The shard element carries the flight, which means it also carries the
 * bearing — so the mark itself lives on a child that unwinds --a. Without
 * that, a diamond thrown at 45 degrees arrives as a square. */

#view-iron-center .ic-burst-shard::before {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: linear-gradient(160deg, var(--iron-gold-bright), var(--iron-gold-deep));
  filter: drop-shadow(0 0 6px var(--iron-gold-glow));
  transform: rotate(calc(var(--a) * -1));
}

/* Thrown out along --a and never spun: the IRON mark stays a diamond the
 * whole way, so the spray reads as currency rather than confetti. */

@keyframes ic-burst-shard {
  0%   { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(calc(var(--s, 1) * .3)); }
  14%  { opacity: 1; }
  30%  { transform: rotate(var(--a)) translateY(calc(var(--far, 70px) * var(--burst-reach, 1) * -.58)) scale(calc(var(--s, 1) * 1.1)); }
  64%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--far, 70px) * var(--burst-reach, 1) * -1)) scale(calc(var(--s, 1) * .58)); }
}

/* The marks always match the currency the moment actually paid: AURA for an
 * AURA payout, the legendary purple for a forge-exclusive drop. */

#view-iron-center .ic-burst.is-aura .ic-burst-shard::before {
  background: linear-gradient(160deg, var(--aura-bright), var(--aura-deep));
  filter: drop-shadow(0 0 6px var(--aura-soft));
}

#view-iron-center .ic-burst.is-aura .ic-burst-ring { border-color: var(--aura-core); }

#view-iron-center .ic-burst.is-aura .ic-burst-ring.is-two { border-color: var(--aura-deep); }

#view-iron-center .ic-burst.is-aura .ic-burst-flash { background: radial-gradient(circle, var(--aura-soft), transparent 62%); }

#view-iron-center .ic-burst.is-legendary .ic-burst-shard::before {
  background: linear-gradient(160deg, #efdcff, var(--tier-legendary));
  filter: drop-shadow(0 0 7px var(--tier-legendary-soft));
}

#view-iron-center .ic-burst.is-legendary .ic-burst-ring { border-color: var(--tier-legendary); }

#view-iron-center .ic-burst.is-legendary .ic-burst-ring.is-two { border-color: color-mix(in srgb, var(--tier-legendary) 70%, #000); }

#view-iron-center .ic-burst.is-legendary .ic-burst-flash { background: radial-gradient(circle, var(--tier-legendary-soft), transparent 62%); }

/* A single contained spark — one right answer, not a whole run. */

#view-iron-center .ic-burst.is-spark { --burst-reach: .46; }

#view-iron-center .ic-burst.is-spark .ic-burst-flash { width: 150px; height: 150px; margin: -75px 0 0 -75px; }

#view-iron-center .ic-burst.is-spark .ic-burst-ring { width: 70px; height: 70px; margin: -35px 0 0 -35px; }

#view-iron-center .ic-burst.is-spark .ic-burst-shard { width: 9px; height: 9px; left: -4.5px; top: -4.5px; }

/* =========================================================================
 * FORGE TEMPO — one forge, one gauge, three hammers.
 *
 * The old rig was two disconnected boxes, and its target band sat across the
 * MIDDLE of the heat track while the server scored the PEAK — it told players
 * to strike at half heat for a full-heat score. The band now sits at the top,
 * where the peak actually is, and lights up on exactly the score that pays.
 * ========================================================================= */

#view-iron-center #ic-game-timing { gap: 12px; }

#view-iron-center .ic-tempo-rig {
  --heat: 0;
  display: grid;
  gap: var(--space-sm);
}

#view-iron-center .ic-tempo-frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px;
  gap: var(--space-sm);
  align-items: stretch;
}

/* ---- The call: what to do, right now ------------------------------------ */

#view-iron-center .ic-tempo-call {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 34px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  box-shadow: inset 0 0 0 1px var(--border-color);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  transition: color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

#view-iron-center .ic-tempo-call i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-size: 11px;
  transition: color var(--transition-fast), background var(--transition-fast);
}

#view-iron-center .ic-tempo-now { display: none; }

#view-iron-center .ic-tempo-rig.is-in-zone .ic-tempo-call {
  background: var(--iron-gold-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--iron-gold) 45%, transparent);
  color: var(--iron-gold-bright);
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
}

#view-iron-center .ic-tempo-rig.is-in-zone .ic-tempo-call i { background: var(--iron-gold); color: var(--iron-on-gold); }

#view-iron-center .ic-tempo-rig.is-in-zone .ic-tempo-wait { display: none; }

#view-iron-center .ic-tempo-rig.is-in-zone .ic-tempo-now { display: inline; }

/* ---- The forge: an ingot on the anvil, coloured by its own heat --------- */

#view-iron-center .ic-tempo-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 150px;
  padding: var(--space-xs) 0 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background:
    radial-gradient(120% 88% at 50% 68%, color-mix(in srgb, var(--iron-gold) calc(var(--heat, 0) * 16%), transparent), transparent 70%),
    var(--bg-secondary);
  box-shadow: inset 0 1px 0 var(--border-highlight);
  overflow: hidden;
}

#view-iron-center .ic-forge-art { display: block; width: min(240px, 100%); height: auto; }

#view-iron-center .ic-forge-glow {
  fill: var(--iron-gold);
  opacity: calc(var(--heat, 0) * .28);
  filter: blur(14px);
}

/* Hammer lands: sparks burst off the ingot. */

#view-iron-center .ic-tempo-sparks { position: absolute; left: 52%; top: 44%; width: 0; height: 0; pointer-events: none; }

#view-iron-center .ic-tempo-sparks i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: var(--iron-gold-bright);
  box-shadow: 0 0 8px var(--iron-gold);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

#view-iron-center .ic-tempo-rig.is-striking .ic-tempo-sparks i { animation: ic-tempo-spark-fly 620ms var(--iron-ease) 300ms both; }

#view-iron-center .ic-tempo-rig.is-striking .ic-tempo-sparks i:nth-child(1) { --tsx: -42px; --tsy: -34px; }

#view-iron-center .ic-tempo-rig.is-striking .ic-tempo-sparks i:nth-child(2) { --tsx: 38px; --tsy: -40px; animation-delay: 330ms; }

#view-iron-center .ic-tempo-rig.is-striking .ic-tempo-sparks i:nth-child(3) { --tsx: -22px; --tsy: -52px; animation-delay: 360ms; }

#view-iron-center .ic-tempo-rig.is-striking .ic-tempo-sparks i:nth-child(4) { --tsx: 52px; --tsy: -18px; animation-delay: 320ms; }

#view-iron-center .ic-tempo-rig.is-striking .ic-tempo-sparks i:nth-child(5) { --tsx: -54px; --tsy: -12px; animation-delay: 345ms; }

#view-iron-center .ic-tempo-rig.is-striking .ic-tempo-sparks i:nth-child(6) { --tsx: 18px; --tsy: -58px; animation-delay: 375ms; }

@keyframes ic-tempo-spark-fly {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tsx, 30px)), calc(-50% + var(--tsy, -40px))) rotate(240deg) scale(.4); }
}

/* A finished day leaves the stock as the best strike left it. */

#view-iron-center .ic-tempo-stage.is-forged { border-color: color-mix(in srgb, var(--iron-gold) 30%, var(--border-color)); }

/* =========================================================================
 * THE ANVIL — one casting, shared by the hearth and Forge Tempo.
 *
 * Drawn in planes, not silhouettes. Every surface gets the value it would
 * actually have: the polished face catches the most light and is lit along
 * its length, the front of the plate falls away, the end cap is turned from
 * the light, the horn rounds through a dark belly back to a lit crown, and
 * the cast body is a different material entirely. That value structure is
 * the whole reason it reads as an object.
 * ========================================================================= */

#view-iron-center .ic-a-hi { stop-color: var(--a-hi); }

#view-iron-center .ic-a-mid { stop-color: var(--a-mid); }

#view-iron-center .ic-a-lo { stop-color: var(--a-lo); }

#view-iron-center .ic-cast-hi { stop-color: var(--cast-hi); }

#view-iron-center .ic-cast-lo { stop-color: var(--cast-lo); }

#view-iron-center .ic-haft-hi { stop-color: color-mix(in srgb, #c89a6b 62%, var(--bg-tertiary)); }

#view-iron-center .ic-haft-lo { stop-color: color-mix(in srgb, #6b4a2c 55%, var(--bg-tertiary)); }

/* No part is outlined. A uniform hairline around every shape is what makes
 * vector art look drawn rather than lit — the planes separate on value, and
 * only the arris that actually catches light gets a highlight. */

#view-iron-center .ic-anvil path,
#view-iron-center .ic-anvil ellipse,
#view-iron-center .ic-anvil circle { stroke: none; }

/* One shadow for the whole casting. A single soft cast shadow under a chunky
 * silhouette is what separates a toy-solid object from a flat vector pile —
 * it is the cheapest and by far the strongest read of weight there is.
 *
 * It goes on the casting group, NOT on .ic-anvil: a filter clips its children
 * to the filter region, and the embers rise 52px clear of the anvil's box, so
 * filtering the outer group would cut them off mid-flight. */

#view-iron-center .ic-anvil-cast {
  filter:
    drop-shadow(0 5px 6px color-mix(in srgb, #000 52%, transparent))
    drop-shadow(0 15px 18px color-mix(in srgb, #000 32%, transparent));
}

/* The daily Forge uses its original flat mark again. Keep this selector on
 * the hearth so Forge Tempo can retain the detailed shared casting. */

#view-iron-center .ic-forge-hero .ic-anvil-cast--classic {
  filter: drop-shadow(0 2px 0 var(--border-strong));
}

#view-iron-center .ic-forge-hero .ic-anvil-legacy {
  fill: color-mix(in srgb, var(--accent-color) calc(var(--heat, 0) * 100%), var(--text-primary));
  stroke: var(--border-strong);
  stroke-width: .5;
  stroke-linejoin: round;
}

/* On a white card the same shadow reads as soot. */

.light-mode #view-iron-center .ic-anvil-cast {
  filter:
    drop-shadow(0 4px 5px color-mix(in srgb, #000 24%, transparent))
    drop-shadow(0 12px 16px color-mix(in srgb, #000 14%, transparent));
}

/* Cast iron: rougher, darker, and clearly not the same steel as the face. */

#view-iron-center .ic-anvil-body { fill: url(#icAnvilCast); }

#view-iron-center .ic-anvil-body-back { fill: color-mix(in srgb, #000 34%, var(--cast-lo)); }

#view-iron-center .ic-anvil-foot { fill: color-mix(in srgb, #000 8%, var(--cast-lo)); }

#view-iron-center .ic-anvil-foot.is-left { fill: color-mix(in srgb, #000 18%, var(--cast-lo)); }

/* Two soft values across the waist do the rounding. A cartoon-solid object is
 * a bold shape plus a core shadow plus one rim of light — no line work. */

#view-iron-center .ic-anvil-body-shade { fill: color-mix(in srgb, #000 46%, transparent); filter: blur(5px); }

#view-iron-center .ic-anvil-body-lit { fill: color-mix(in srgb, #fff 22%, transparent); filter: blur(4px); }

/* The horn is a cone: a lit upper plane rolling through a dark belly. The
 * crest gets one narrow highlight — a wide blurred wash over the whole cone
 * was reading as a smear hanging off the front of the anvil. */

#view-iron-center .ic-anvil-horn { fill: url(#icAnvilHorn); }

#view-iron-center .ic-anvil-horn-top { fill: var(--a-mid); }

#view-iron-center .ic-anvil-horn-lit { fill: var(--a-hi); opacity: .5; filter: blur(2.4px); }

/* Where the cone meets the plate. Without the seam the two merge into one
 * wedge and the whole front of the anvil reads as a fin. */

#view-iron-center .ic-anvil-horn-seam {
  fill: none;
  stroke: color-mix(in srgb, #000 55%, transparent);
  stroke-width: 4;
  filter: blur(3px);
}

#view-iron-center .ic-anvil-foot-lit { fill: color-mix(in srgb, #fff 20%, transparent); filter: blur(3.5px); }

/* The warm rim off the coals. Not a colour on the metal — a light on it. */

#view-iron-center .ic-anvil-warm {
  fill: none;
  stroke: var(--spark);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: calc(.34 + var(--ember, 0) * .18 + var(--heat, 0) * .3);
  filter: blur(2.6px);
}

/* Shadows do most of the work. Where the plate seats onto the body, and where
 * the hammer hangs over the face — without them the parts only stack. */

#view-iron-center .ic-anvil-contact { fill: color-mix(in srgb, #000 70%, transparent); filter: blur(4px); }

#view-iron-center .ic-anvil-hammer-shadow { fill: color-mix(in srgb, #000 55%, transparent); filter: blur(6px); }

/* The plate: top surface brightest, front falling away, end cap turned off. */

#view-iron-center .ic-anvil-plate-top { fill: url(#icAnvilFacePlane); }

#view-iron-center .ic-anvil-plate-front { fill: url(#icAnvilFrontPlane); }

#view-iron-center .ic-anvil-plate-side { fill: color-mix(in srgb, #000 16%, var(--a-lo)); }

#view-iron-center .ic-anvil-step { fill: color-mix(in srgb, #000 12%, var(--a-lo)); }

#view-iron-center .ic-anvil-hardy,
#view-iron-center .ic-anvil-pritchel { fill: color-mix(in srgb, #000 52%, var(--a-lo)); filter: blur(.35px); }

/* Lit arrises: the working edge in front, a cool rim along the back. */

#view-iron-center .ic-anvil-edge {
  fill: none;
  stroke: color-mix(in srgb, #fff 62%, transparent);
  stroke-width: 2;
  stroke-linecap: round;
  filter: blur(1.1px);
}

#view-iron-center .ic-anvil-rim {
  fill: none;
  stroke: color-mix(in srgb, #fff 30%, transparent);
  stroke-width: 1.8;
  stroke-linecap: round;
  filter: blur(1.4px);
}

#view-iron-center .ic-anvil-gleam { fill: color-mix(in srgb, #fff 20%, transparent); filter: blur(5px); }

#view-iron-center .ic-anvil-sheen {
  fill: color-mix(in srgb, #fff 32%, transparent);
  filter: blur(4px);
  animation: ic-anvil-sheen 6.5s var(--iron-ease) infinite;
}

@keyframes ic-anvil-sheen {
  0%, 62% { transform: translateX(-40px); }
  100%    { transform: translateX(300px); }
}

/* ---- Heating, the way iron actually does it -----------------------------
 * Sparks come off it first, then a dull red creeps in, then it goes properly
 * RED, and only at the very top does the red run bright. Gold was always the
 * currency's colour, never the metal's. */

#view-iron-center .ic-anvil-stock-top,
#view-iron-center .ic-anvil-stock-front,
#view-iron-center .ic-anvil-stock-side { fill: var(--a-lo); }

#view-iron-center .ic-anvil-stock-top { fill: var(--a-mid); }

#view-iron-center .ic-anvil-stock-side { fill: color-mix(in srgb, #000 22%, var(--a-lo)); }

#view-iron-center .ic-stock-heat { opacity: 0; }

#view-iron-center .ic-stock-heat.is-dull {
  fill: #7d1a08;
  opacity: clamp(0, calc((var(--heat, 0) - .26) / .3), 1);
}

#view-iron-center .ic-stock-heat.is-red {
  fill: #d9200b;
  opacity: clamp(0, calc((var(--heat, 0) - .54) / .3), 1);
}

#view-iron-center .ic-stock-heat.is-white {
  fill: url(#icStockCore);
  opacity: clamp(0, calc((var(--heat, 0) - .78) / .22), 1);
}

#view-iron-center .ic-stock-heat.is-top { filter: brightness(1.18); }

/* ---- The work: one piece of metal, drawn out into the IRON mark ----------
 * A slab LYING ON THE FACE, not a shape standing on it: a top plane in the
 * anvil's own plane that takes the heat and the hammer, and one wall of
 * thickness turned toward the room. The outlines themselves are regenerated in
 * JS as the hold lands blows — nothing here cross-fades one shape into
 * another, because that always reads as two pictures rather than one piece of
 * moving metal. */

#view-iron-center .ic-forge-piece path,
#view-iron-center .ic-forge-piece ellipse { stroke: none; }

/* The wall carries its own, cooler heat rather than being painted over by the
 * top's. At working heat a single flat overlay turns the whole silhouette into
 * one bright shape and every bit of the thickness disappears exactly when the
 * piece is most on show — which is the moment it most needs to read as a slab
 * with a side to it rather than as a glowing sticker on the anvil. */

#view-iron-center .ic-piece-wall {
  fill: color-mix(in srgb, #b83a10 calc(var(--heat, 0) * 78%), color-mix(in srgb, #000 26%, var(--a-mid)));
}

#view-iron-center .ic-piece-face { fill: url(#icPieceFace); }

/* The shadow it casts on the polished face, and the light it throws back into
 * it once it is hot enough to be its own lamp. */

#view-iron-center .ic-piece-contact {
  fill: color-mix(in srgb, #000 70%, transparent);
  filter: blur(2.4px);
}

#view-iron-center .ic-piece-spill {
  fill: #ff5a1f;
  opacity: calc(var(--heat, 0) * .5);
  filter: blur(5px);
}

#view-iron-center .ic-forge-piece {
  filter: drop-shadow(0 2px 3px color-mix(in srgb, #000 55%, transparent));
}

/* Same ramp as any other iron in this room: sparks first, then a dull red
 * creeping in, then proper red, and only at the top does it run bright. */

#view-iron-center .ic-piece-heat { opacity: 0; }

#view-iron-center .ic-piece-heat.is-dull {
  fill: #7d1a08;
  opacity: clamp(0, calc((var(--heat, 0) - .18) / .3), 1);
}

#view-iron-center .ic-piece-heat.is-red {
  fill: #d9200b;
  opacity: clamp(0, calc((var(--heat, 0) - .46) / .3), 1);
}

#view-iron-center .ic-piece-heat.is-white {
  fill: url(#icStockCore);
  opacity: clamp(0, calc((var(--heat, 0) - .74) / .24), 1);
}

/* The counter — the mark's inner diamond — is struck INTO the top, so it
 * keeps a shadowed floor and a lit near arris at every heat. Without those
 * two the mark flattens into a solid lozenge the moment the metal runs
 * bright, which is exactly when it most needs to be readable. Lying down it
 * is a shallow shape, so the shade steps along the room's depth vector rather
 * than straight up, and the arris is drawn finer than it was standing up. */

#view-iron-center .ic-piece-counter.is-floor { fill: color-mix(in srgb, #000 62%, var(--a-lo)); }

#view-iron-center .ic-piece-counter.is-shade {
  fill: color-mix(in srgb, #3d0d02 60%, transparent);
  transform: translate(0.6px, -0.35px);
}

#view-iron-center .ic-piece-counter.is-lit {
  fill: none;
  stroke: color-mix(in srgb, #fff 46%, transparent);
  stroke-width: .7;
  opacity: calc(.3 + var(--heat, 0) * .5);
  filter: blur(.45px);
}

/* The arris around the top of the slab — where the plane the hammer lands on
 * turns over into the wall. It is the only line on the piece, and it is a
 * light rather than an outline: cool from the window at rest, warm off the
 * coals as the metal comes up to heat. */

#view-iron-center .ic-piece-rim {
  fill: none;
  stroke: color-mix(in srgb, #fff calc(18% + var(--heat, 0) * 26%), transparent);
  stroke-width: .9;
  filter: blur(.55px);
}

/* Finished and off the heat. The object on the anvil IS the IRON mark now, so
 * it sets in the currency's gold — the one place in this room where iron is
 * allowed to go gold, because at that point it has stopped being iron. */

#view-iron-center .ic-piece-gold { fill: url(#icPieceGold); opacity: 0; }

#view-iron-center .ic-hearth.is-finished .ic-piece-gold { opacity: 1; }

#view-iron-center .ic-hearth.is-finished .ic-piece-heat { opacity: 0; }

#view-iron-center .ic-hearth.is-cooled.is-finished .ic-piece-gold { filter: saturate(1.9) brightness(1.06); }

/* The work is done, so the hammer comes off it. Left where it hovers while
 * working, the head sits over the mark's top vertex and the one thing the
 * finished state exists to show is the one thing you cannot see. */

#view-iron-center .ic-hearth.is-finished .ic-anvil-hammer {
  transform: rotate(9deg);
  transition: transform 420ms var(--iron-ease);
}

#view-iron-center .ic-hearth.is-finished .ic-piece-counter.is-shade { fill: color-mix(in srgb, #2a1600 66%, transparent); }

/* The thickness sets with the top. Left as steel it read as a grey slab
 * propped under a gold sticker instead of as the same piece of metal. */

#view-iron-center .ic-hearth.is-finished .ic-piece-wall { fill: color-mix(in srgb, #000 38%, var(--iron-gold-deep)); }

#view-iron-center .ic-hearth.is-finished .ic-forge-piece {
  filter: drop-shadow(0 2px 3px color-mix(in srgb, #000 55%, transparent))
          drop-shadow(0 0 9px var(--iron-gold-glow));
}

/* The metal answers each blow: it squashes on contact and springs back, on
 * the same cycle and the same seek offset as the hammer that is hitting it. */

#view-iron-center .ic-forge-hero.is-working .ic-forge-piece {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: ic-piece-struck var(--blow, 540ms) ease-out infinite;
  animation-delay: var(--work-shift, 0ms);
}

@keyframes ic-piece-struck {
  0%, 26% { transform: scale(1, 1); }
  32%     { transform: scale(1.045, .93); }
  52%     { transform: scale(.99, 1.015); }
  70%     { transform: scale(1, 1); }
}

/* The last blow lands and the mark is finished: the piece stops moving and
 * flares once, so "done" is an event and not just a bar that stopped. */

#view-iron-center .ic-forge-hero.is-shaped .ic-forge-piece { animation: ic-piece-done 620ms var(--iron-spring) both; }

@keyframes ic-piece-done {
  0%   { transform: scale(1, 1); filter: brightness(1); }
  26%  { transform: scale(1.07, 1.05); filter: brightness(1.85); }
  100% { transform: scale(1, 1); filter: brightness(1.08); }
}

#view-iron-center .ic-forge-hero.is-shaped .ic-piece-rim {
  stroke: color-mix(in srgb, #fff 52%, transparent);
  stroke-width: 1.1;
}

/* No bloom behind the stock. A blurred disc sitting behind an opaque bar only
 * ever shows as a halo around it — on screen that read as a red ring drawn
 * over the forge, not as hot iron. The heat is on the metal now. */

/* Embers lift off well before any glow shows. */

#view-iron-center .ic-anvil-embers { opacity: clamp(0, calc((var(--heat, 0) - .1) / .28), 1); }

#view-iron-center .ic-anvil-embers circle {
  fill: #ff7a33;
  opacity: 0;
  animation: ic-ember-rise 1.9s linear infinite;
}

@keyframes ic-ember-rise {
  0%   { opacity: 0; transform: translate(0, 0) scale(1); }
  12%  { opacity: .95; }
  70%  { opacity: .7; }
  100% { opacity: 0; transform: translate(var(--ex, 0), -42px) scale(.25); }
}

/* The fire in front of the anvil reflects off it. */

#view-iron-center .ic-anvil-plate-front,
#view-iron-center .ic-anvil-horn,
#view-iron-center .ic-anvil-body {
  filter: saturate(calc(1 + var(--heat, 0) * 1.1)) brightness(calc(1 + var(--heat, 0) * .1));
}

/* ---- The payout: thrown by the forge, kept by the forge -----------------
 * The generic gain indicator was appended to <body>, so its expanding ring
 * drew a circle over the whole room. Everything here lives inside the hearth
 * and is clipped by it — an effect that leaves the forge is a bug. */

#view-iron-center .ic-forge-spray {
  position: absolute;
  left: 62%;
  top: 44%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 4;
}

#view-iron-center .ic-forge-spray i {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--sz, 10px);
  height: var(--sz, 10px);
  margin: calc(var(--sz, 10px) / -2) 0 0 calc(var(--sz, 10px) / -2);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: linear-gradient(160deg, var(--iron-gold-bright), var(--iron-gold-deep));
  filter: drop-shadow(0 0 5px var(--iron-gold-glow));
  opacity: 0;
  animation: ic-forge-spray 1150ms cubic-bezier(.22, .6, .3, 1) both;
}

/* Up and out first, then over and down — thrown metal, not a firework. */

@keyframes ic-forge-spray {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(.4); }
  9%   { opacity: 1; }
  44%  { transform: translate(calc(var(--dx) * .58), var(--peak)) rotate(calc(var(--rot) * .45)) scale(1.06); }
  78%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.68); }
}

/* The reward, struck onto a plate and lifted off the anvil. */

#view-iron-center .ic-forge-payout {
  position: absolute;
  left: 50%;
  top: 38%;
  z-index: 5;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  background: linear-gradient(160deg, var(--a-hi), var(--a-lo));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #fff 34%, transparent),
    0 0 0 1.5px var(--iron-gold),
    0 10px 22px color-mix(in srgb, #000 60%, transparent);
  color: var(--iron-on-gold);
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  animation: ic-forge-payout 1500ms var(--iron-spring) both;
}

#view-iron-center .ic-forge-payout b { font-size: var(--font-size-lg); line-height: 1; }

#view-iron-center .ic-forge-payout small { font-size: 10px; letter-spacing: .16em; opacity: .72; }

#view-iron-center .ic-forge-payout .iron-diamond,
#view-iron-center .ic-forge-payout .aura-emblem { width: 1.2em; height: 1.2em; align-self: center; }

#view-iron-center .ic-forge-payout.is-item b { font-size: var(--font-size-md); }

#view-iron-center .ic-forge-payout.is-item i { color: var(--tier-legendary); }

#view-iron-center .ic-forge-payout.is-aura { box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 34%, transparent), 0 0 0 1.5px var(--aura-core), 0 10px 22px color-mix(in srgb, #000 60%, transparent); }

#view-iron-center .ic-forge-payout.tier-rare { box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 34%, transparent), 0 0 0 1.5px var(--tier-rare), 0 0 26px var(--tier-rare-soft), 0 10px 22px color-mix(in srgb, #000 60%, transparent); }

#view-iron-center .ic-forge-payout.tier-legendary { box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 34%, transparent), 0 0 0 1.5px var(--tier-legendary), 0 0 30px var(--tier-legendary-soft), 0 10px 22px color-mix(in srgb, #000 60%, transparent); }

/* Lifted off the anvil, held, then set down. */

@keyframes ic-forge-payout {
  0%   { opacity: 0; transform: translate(-50%, 10%) scale(.7); }
  22%  { opacity: 1; transform: translate(-50%, -58%) scale(1.06); }
  34%  { transform: translate(-50%, -50%) scale(1); }
  84%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -62%) scale(.96); }
}

/* The hearth itself takes the tier's light as it pays out. */

#view-iron-center .ic-forge-hero.is-boom .ic-hearth { animation: ic-forge-hearth-flash 900ms var(--iron-ease) both; }

@keyframes ic-forge-hearth-flash {
  0%   { box-shadow: inset 0 1px 0 var(--border-highlight), inset 0 0 40px var(--iron-gold-glow); border-color: var(--iron-gold); }
  100% { box-shadow: inset 0 1px 0 var(--border-highlight); border-color: var(--border-color); }
}

#view-iron-center .ic-forge-hero.is-boom.boom-rare .ic-hearth,
#view-iron-center .ic-forge-hero.is-boom.boom-legendary .ic-hearth { animation-duration: 1200ms; }

/* The classic stage takes the payout as light, not as a border: it is an
 * open scene with no frame to flash, so the forge's own glow swells instead. */

#view-iron-center .ic-forge-hero.is-boom .ic-forge-glow { animation: ic-classic-forge-payout-flash 900ms var(--iron-ease) both; }

#view-iron-center .ic-forge-hero.is-boom.boom-rare .ic-forge-glow,
#view-iron-center .ic-forge-hero.is-boom.boom-legendary .ic-forge-glow { animation-duration: 1200ms; }

@keyframes ic-classic-forge-payout-flash {
  0%   { opacity: 1; transform: scale(1.14); }
  100% { opacity: .3; transform: scale(1); }
}

/* ---- The hammer: a tool with weight ------------------------------------- */

#view-iron-center .ic-anvil-hammer {
  transform-box: fill-box;
  transform-origin: 48% 100%;
  transform: rotate(-30deg);
}

#view-iron-center .ic-hammer-haft { fill: url(#icAnvilHaft); }

#view-iron-center .ic-hammer-grip { fill: color-mix(in srgb, #5f351f 38%, transparent); }

#view-iron-center .ic-hammer-collar { fill: color-mix(in srgb, #000 20%, var(--a-mid)); }

#view-iron-center .ic-hammer-face { fill: color-mix(in srgb, #fff 10%, var(--steel-mid)); }

#view-iron-center .ic-hammer-poll { fill: color-mix(in srgb, #000 10%, var(--a-mid)); }

#view-iron-center .ic-hammer-head { fill: url(#icAnvilFrontPlane); }

#view-iron-center .ic-hammer-round-face { fill: color-mix(in srgb, #fff 4%, var(--a-mid)); }

#view-iron-center .ic-hammer-eye { fill: color-mix(in srgb, #000 72%, var(--cast-lo)); filter: blur(.2px); }

#view-iron-center .ic-hammer-gleam { fill: color-mix(in srgb, #fff 24%, transparent); filter: blur(2px); }

/* The swing, and the anvil taking it. Both forges drive the same casting. */

#view-iron-center .ic-tempo-rig.is-striking .ic-anvil-hammer,
#view-iron-center .ic-forge-hero.striking .ic-anvil-hammer { animation: ic-anvil-swing 640ms var(--iron-ease) both; }

/* The landing angle is set by geometry, not by feel: at about -38deg the
 * raised face of the hammer meets the top of the stock. Swinging further buries
 * the head inside the anvil. */

@keyframes ic-anvil-swing {
  0%   { transform: rotate(-30deg); }
  14%  { transform: rotate(-12deg); }
  40%  { transform: rotate(-38deg); }
  56%  { transform: rotate(-27deg); }
  72%  { transform: rotate(-34deg); }
  100% { transform: rotate(-30deg); }
}

#view-iron-center .ic-tempo-rig.is-striking .ic-anvil,
#view-iron-center .ic-forge-hero.striking .ic-anvil { animation: ic-anvil-recoil 460ms var(--iron-ease) 300ms both; }

@keyframes ic-anvil-recoil {
  0%   { transform: translateY(0); }
  18%  { transform: translateY(2.5px); }
  52%  { transform: translateY(-1px); }
  100% { transform: translateY(0); }
}

/* Release at working heat gets one deliberately oversized finishing blow. The
 * normal work loop stops first; the hammer pauses at full lift, accelerates into
 * the stock, and the whole room answers at the exact contact frame. */

#view-iron-center .ic-forge-hero.is-final-strike .ic-anvil-hammer { animation: ic-anvil-final-strike 1120ms cubic-bezier(.18, .78, .16, 1) both; }

@keyframes ic-anvil-final-strike {
  0%   { transform: rotate(-14deg); }
  22%  { transform: rotate(18deg); }
  34%  { transform: rotate(20deg); }
  46%  { transform: rotate(-38deg); }
  49%  { transform: rotate(-38deg); }
  59%  { transform: rotate(-21deg); }
  72%  { transform: rotate(-33deg); }
  100% { transform: rotate(-30deg); }
}

#view-iron-center .ic-forge-hero.is-final-strike .ic-hearth-art { animation: ic-workshop-impact 1120ms linear both; }

@keyframes ic-workshop-impact {
  0%, 43% { transform: translate(0, 0); }
  46%     { transform: translate(0, 2px) scale(1.004, .994); }
  48%     { transform: translate(-5px, -1px); }
  51%     { transform: translate(4px, 1px); }
  55%     { transform: translate(-2px, 0); }
  62%, 100% { transform: translate(0, 0); }
}

#view-iron-center .ic-forge-hero.is-final-strike .ic-anvil { animation: ic-anvil-final-recoil 1120ms var(--iron-ease) both; }

@keyframes ic-anvil-final-recoil {
  0%, 43% { transform: translateY(0) scale(1); }
  47%     { transform: translateY(7px) scale(1.018, .955); }
  56%     { transform: translateY(-3px) scale(.992, 1.012); }
  72%     { transform: translateY(1px) scale(1); }
  100%    { transform: translateY(0) scale(1); }
}

#view-iron-center .ic-anvil-final-impact > * {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

#view-iron-center .ic-anvil-final-impact .ic-final-burst-ray {
  fill: none;
  stroke: #ffd7a0;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 28;
  stroke-dashoffset: 28;
}

#view-iron-center .ic-anvil-final-impact .ic-final-shock {
  fill: none;
  stroke: #ff8a35;
  stroke-width: 2.4;
}

#view-iron-center .ic-forge-hero.is-final-strike .ic-anvil-final-impact .ic-final-flash { animation: ic-anvil-final-flash 540ms ease-out 500ms both; }

#view-iron-center .ic-forge-hero.is-final-strike .ic-anvil-final-impact .ic-final-shock { animation: ic-anvil-final-shock 650ms ease-out 510ms both; }

#view-iron-center .ic-forge-hero.is-final-strike .ic-anvil-final-impact .ic-final-burst-ray { animation: ic-anvil-final-rays 520ms ease-out 500ms both; }

@keyframes ic-anvil-final-flash {
  0%   { opacity: 1; transform: scale(.3); fill: #fff8df; }
  24%  { opacity: .9; transform: scale(2.8); fill: #ffc15a; }
  100% { opacity: 0; transform: scale(5.6); fill: #ff541c; }
}

@keyframes ic-anvil-final-shock {
  0%   { opacity: .9; transform: scale(.45, .6); }
  100% { opacity: 0; transform: scale(9, 2.5); stroke-width: .6; }
}

@keyframes ic-anvil-final-rays {
  0%   { opacity: 1; stroke-dashoffset: 28; transform: scale(.55); }
  45%  { opacity: 1; stroke-dashoffset: 0; transform: scale(1.15); }
  100% { opacity: 0; stroke-dashoffset: 0; transform: scale(1.55); }
}

#view-iron-center .ic-forge-hero.is-final-strike .ic-workshop-fire { animation: ic-workshop-fire-hit 1120ms ease-out both; }

@keyframes ic-workshop-fire-hit {
  0%, 43% { transform: scale(1); filter: brightness(1); }
  47%     { transform: scale(1.32, 1.18) translateY(-4px); filter: brightness(1.7); }
  68%     { transform: scale(.96, 1.04); filter: brightness(1.1); }
  100%    { transform: scale(1); filter: brightness(1); }
}

#view-iron-center .ic-forge-hero.is-final-strike .ic-workshop-tool-rack { animation: ic-workshop-tools-rattle 800ms ease-out 500ms both; }

@keyframes ic-workshop-tools-rattle {
  0% { transform: rotate(0); }
  18% { transform: rotate(3deg); }
  42% { transform: rotate(-2deg); }
  68% { transform: rotate(1deg); }
  100% { transform: rotate(0); }
}

#view-iron-center .ic-forge-hero.is-final-strike .ic-workshop-dust { animation: ic-workshop-dust-hit 680ms ease-out 510ms both; }

@keyframes ic-workshop-dust-hit {
  0% { opacity: 0; transform: scale(.35); }
  22% { opacity: .58; transform: scale(1.05, 1.6); }
  100% { opacity: 0; transform: translateY(-5px) scale(2.4, 2.1); }
}

#view-iron-center .ic-forge-hero.is-final-strike .ic-stock-heat.is-white { animation: ic-final-stock-flare 720ms ease-out 500ms both; }

@keyframes ic-final-stock-flare {
  0% { filter: brightness(1.2); }
  12% { filter: brightness(2.4) saturate(.75); }
  100% { filter: brightness(1.1); }
}

#view-iron-center .ic-forge-hero.is-final-strike .ic-anvil-impact circle { animation: ic-anvil-final-spark 900ms cubic-bezier(.1, .7, .2, 1) 490ms both; }

@keyframes ic-anvil-final-spark {
  0%   { opacity: 0; transform: translate(0, 0) scale(.3); }
  7%   { opacity: 1; transform: translate(calc(var(--sx) * .35), calc(var(--sy) * .55)) scale(1.8); }
  52%  { opacity: .95; transform: translate(calc(var(--sx) * 1.45), calc(var(--sy) * 1.7)) scale(1); }
  100% { opacity: 0; transform: translate(calc(var(--sx) * 2), calc(var(--sy) * .4 + 34px)) scale(.25); }
}

/* ---- Working the iron: the loop that runs for as long as you hold ---------
 * Nobody holds a hammer in the air waiting for a bar to fill. For the whole
 * hold the smith works — lift, land, sparks, the anvil taking it — on one
 * 540ms cycle so swing, spark and recoil are locked to the same blow. The
 * loop is pure theatre: it cannot reach the roll, and letting go early still
 * costs nothing. */

#view-iron-center .ic-forge-hero.is-working .ic-anvil-hammer,
#view-iron-center .ic-forge-hero.is-working .ic-anvil,
#view-iron-center .ic-forge-hero.is-working .ic-anvil-impact circle,
#view-iron-center .ic-forge-hero.is-working .ic-forge-piece {
  /* One seek offset for the whole loop. A hold that resumes half a blow into
   * the cycle starts the hammer, the anvil, the sparks and the metal at the
   * same half-blow, so a paused piece of work never picks up out of phase. */
  animation-delay: var(--work-shift, 0ms);
}

#view-iron-center .ic-forge-hero.is-working .ic-anvil-hammer { animation: ic-anvil-work var(--blow, 540ms) cubic-bezier(.42, 0, .3, 1) infinite; }

@keyframes ic-anvil-work {
  0%   { transform: rotate(-14deg); }
  30%  { transform: rotate(-38deg); }
  40%  { transform: rotate(-27deg); }
  48%  { transform: rotate(-34deg); }
  100% { transform: rotate(-14deg); }
}

#view-iron-center .ic-forge-hero.is-working .ic-anvil { animation: ic-anvil-work-tap var(--blow, 540ms) ease-out infinite; }

@keyframes ic-anvil-work-tap {
  0%, 26% { transform: translateY(0); }
  32%     { transform: translateY(2px); }
  46%     { transform: translateY(-.7px); }
  62%     { transform: translateY(0); }
}

/* Struck sparks. Painted only by the animation, so they can never be caught
 * frozen on screen between blows. */

#view-iron-center .ic-anvil-impact circle { fill: #ffd08a; opacity: 0; }

#view-iron-center .ic-forge-hero.is-working .ic-anvil-impact circle,
#view-iron-center .ic-tempo-rig.is-striking .ic-anvil-impact circle,
#view-iron-center .ic-forge-hero.striking .ic-anvil-impact circle { animation: ic-anvil-spark var(--blow, 540ms) linear infinite; }

#view-iron-center .ic-tempo-rig.is-striking .ic-anvil-impact circle,
#view-iron-center .ic-forge-hero.striking .ic-anvil-impact circle { animation-iteration-count: 1; animation-delay: 100ms; }

/* Out and up off the face on the blow, then over and down like hot scale. */

@keyframes ic-anvil-spark {
  0%, 28% { opacity: 0; transform: translate(0, 0) scale(.3); }
  32%     { opacity: 1; transform: translate(calc(var(--sx) * .34), calc(var(--sy) * .62)) scale(1); }
  62%     { opacity: .85; transform: translate(calc(var(--sx) * .78), var(--sy)) scale(.8); }
  100%    { opacity: 0; transform: translate(var(--sx), calc(var(--sy) * .3 + 16px)) scale(.3); }
}

/* The heat answers each blow — struck iron flares where the hammer lands. */

#view-iron-center .ic-forge-hero.is-working .ic-stock-heat { animation: ic-stock-struck 540ms ease-out infinite; }

@keyframes ic-stock-struck {
  0%, 26% { filter: none; }
  33%     { filter: brightness(1.5); }
  60%     { filter: none; }
}

#view-iron-center .ic-forge-hero.is-working .ic-stock-heat.is-top { animation-name: ic-stock-struck-top; }

@keyframes ic-stock-struck-top {
  0%, 26% { filter: brightness(1.18); }
  33%     { filter: brightness(1.75); }
  60%     { filter: brightness(1.18); }
}

/* ---- The gauge: heat, and the band at the top where the peak is --------- */

#view-iron-center .ic-tempo-gauge {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 4px;
  justify-items: center;
}

/* The live number sits ON the forge, where the heat is. */

#view-iron-center .ic-tempo-readout {
  position: absolute;
  top: 8px;
  right: 10px;
  display: grid;
  justify-items: end;
  line-height: 1;
}

#view-iron-center .ic-tempo-readout b {
  min-width: 3ch;
  text-align: right;
  color: var(--iron-gold-bright);
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

#view-iron-center .ic-tempo-readout small,
#view-iron-center .ic-tempo-peak-label {
  color: var(--text-muted);
  font-size: 8px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

#view-iron-center .ic-timing-track {
  position: relative;
  width: 100%;
  /* The base rule pins a fixed height; here the column has to run the full
   * height of the forge beside it. */
  height: auto;
  min-height: 150px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background:
    repeating-linear-gradient(0deg, transparent 0 calc(25% - 1px), var(--border-color) calc(25% - 1px) 25%),
    var(--bg-input);
  box-shadow: inset 0 1px 3px color-mix(in srgb, #000 45%, transparent);
  overflow: hidden;
}

/* THE PEAK BAND — the top of the column, because the top is the peak. */

#view-iron-center .ic-timing-zone {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 10%;
  background: color-mix(in srgb, var(--iron-gold) 14%, transparent);
  border-bottom: 1px dashed color-mix(in srgb, var(--iron-gold) 60%, transparent);
  pointer-events: none;
  z-index: 1;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

#view-iron-center .ic-tempo-rig.is-in-zone .ic-timing-zone {
  background: color-mix(in srgb, var(--iron-gold) 40%, transparent);
  box-shadow: 0 0 16px var(--iron-gold-glow);
}

#view-iron-center .ic-timing-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0%;
  background: linear-gradient(0deg, var(--iron-gold-deep), var(--iron-gold-bright));
}

#view-iron-center .ic-tempo-rig.is-in-zone .ic-timing-bar { box-shadow: 0 0 18px var(--iron-gold-glow); }

/* The strike CTA leans in exactly when the band does — the rig and the button
 * are siblings inside the card, so no :has() is needed. */

#view-iron-center .ic-tempo-rig.is-in-zone ~ .ic-game-btn {
  box-shadow: 0 0 0 2px var(--iron-gold), 0 0 22px var(--iron-gold-glow);
}

/* ---- The rack: three hammers, stamped with what they scored ------------- */

#view-iron-center .ic-tempo-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-sm);
}

#view-iron-center .ic-tempo-best {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
}

#view-iron-center .ic-tempo-best b {
  margin-left: 4px;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-variant-numeric: tabular-nums;
}

#view-iron-center .ic-tempo-best small { color: var(--text-muted); font-size: var(--font-size-xs); }

#view-iron-center .ic-tempo-rack {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-xs);
  padding: 4px 10px 0;
  border-bottom: 2px solid var(--border-strong);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--bg-input) 80%, transparent));
}

#view-iron-center .ic-tempo-rack-label {
  flex: 1 0 100%;
  color: var(--text-muted);
  font-size: 8px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

#view-iron-center .ic-tempo-strike {
  position: relative;
  display: block;
  width: 42px;
  color: var(--text-secondary);
}

#view-iron-center .ic-tempo-strike .ic-hammer-mark { display: block; width: 100%; height: auto; }

#view-iron-center .ic-tempo-strike::after {
  content: '';
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: -2px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

#view-iron-center .ic-tempo-strike.is-open { color: var(--border-strong); }

#view-iron-center .ic-tempo-strike.is-cold { color: var(--arcade-cold); }

#view-iron-center .ic-tempo-strike.is-fair { color: var(--text-muted); }

#view-iron-center .ic-tempo-strike.is-hot { color: var(--arcade-hot); }

#view-iron-center .ic-tempo-strike.is-true { color: var(--iron-gold); }

#view-iron-center .ic-tempo-rack.is-fresh .ic-tempo-strike:not(.is-open):last-of-type,
#view-iron-center .ic-tempo-rack.is-fresh .ic-tempo-strike.is-open:first-of-type { animation: ic-tempo-stamp 460ms var(--iron-spring) both; }

@keyframes ic-tempo-stamp {
  0%   { transform: translateY(-10px) scale(.86); }
  60%  { transform: translateY(0) scale(1.1); }
  100% { transform: none; }
}

/* The hammer mark — the same forged tool on the rack and over the anvil. */

#view-iron-center .ic-hammer-mark { color: inherit; overflow: visible; }

#view-iron-center .ic-hammer-mark .ic-hammer-head {
  fill: url(#icScaleSteel);
  stroke: color-mix(in srgb, currentColor 52%, var(--border-strong));
  stroke-width: 1.5;
  stroke-linejoin: round;
}

#view-iron-center .ic-hammer-mark .ic-hammer-haft {
  fill: none;
  stroke: currentColor;
  stroke-width: 4.5;
  stroke-linecap: round;
}

#view-iron-center .ic-hammer-mark .ic-hammer-grip {
  fill: none;
  stroke: color-mix(in srgb, #000 45%, transparent);
  stroke-width: 4.5;
  stroke-linecap: round;
}

#view-iron-center .ic-hammer-mark .ic-hammer-facet {
  stroke: color-mix(in srgb, #fff 20%, transparent);
  stroke-width: 1.4;
  stroke-linecap: round;
}

#view-iron-center .ic-hammer-mark .ic-hammer-value {
  fill: var(--text-primary);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

#view-iron-center .ic-hammer-mark.is-open .ic-hammer-head { opacity: .5; }

#view-iron-center .ic-hammer-mark.is-true .ic-hammer-head { fill: url(#icScaleGold); }

#view-iron-center .ic-hammer-mark.is-true .ic-hammer-value { fill: var(--iron-on-gold); }

#view-iron-center .ic-hammer-mark.is-true { filter: drop-shadow(0 0 7px var(--iron-gold-glow)); }

/* ---- The day's result --------------------------------------------------- */

#view-iron-center .ic-tempo-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}

#view-iron-center .ic-tempo-result.is-won {
  border-color: color-mix(in srgb, var(--iron-gold) 40%, var(--border-color));
  background: var(--iron-gold-faint);
}

#view-iron-center .ic-tempo-result-copy { display: grid; gap: 6px; justify-items: start; }

#view-iron-center .ic-tempo-result-copy b {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

#view-iron-center .ic-tempo-grade {
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
}

#view-iron-center .ic-tempo-grade.is-true { background: var(--iron-gold-soft); color: var(--arcade-gold-ink); }

#view-iron-center .ic-tempo-grade.is-hot { background: var(--spark-soft); color: var(--arcade-hot); }

#view-iron-center .ic-tempo-grade.is-cold { background: var(--aura-soft); color: var(--arcade-cold); }

/* =========================================================================
 * IRON SCALES — a forged balance, a readout that says one thing at a time,
 * and weights you can actually pick out of the pan.
 *
 * Three surfaces, in this order down the card:
 *   1. the RIG      — the beam tips toward the heavier pan, dishes hang level
 *   2. the READOUT  — verdict in words · range still in play · what a win pays
 *   3. the RACK     — every weight already tried, standing on its shelf
 * Hot/cold is the one colour rule: ember (--spark) means "too light", cyan
 * (--aura-core) means "too heavy", gold is what is still in play.
 * ========================================================================= */

#view-iron-center #ic-game-scales { gap: 12px; }

/* ---- 1. The rig --------------------------------------------------------- */

#view-iron-center .ic-scales-beam {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--space-xs) 0 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background:
    radial-gradient(120% 88% at 50% 100%, var(--iron-gold-faint), transparent 68%),
    var(--bg-secondary);
  box-shadow: inset 0 1px 0 var(--border-highlight);
  overflow: hidden;
}

#view-iron-center .ic-scales-rig {
  display: block;
  width: min(300px, 100%);
  height: auto;
  overflow: visible;
}

#view-iron-center .ic-steel-hi { stop-color: var(--steel-hi); }

#view-iron-center .ic-steel-mid { stop-color: var(--steel-mid); }

#view-iron-center .ic-steel-lo { stop-color: var(--steel-lo); }

#view-iron-center .ic-gold-hi { stop-color: var(--iron-gold-bright); }

#view-iron-center .ic-gold-lo { stop-color: var(--iron-gold-deep); }

#view-iron-center .ic-scales-shadow { fill: color-mix(in srgb, #000 42%, transparent); }

#view-iron-center .ic-scales-plinth,
#view-iron-center .ic-scales-foot,
#view-iron-center .ic-scales-column,
#view-iron-center .ic-scales-cap,
#view-iron-center .ic-scales-arm,
#view-iron-center .ic-scales-arm-knob {
  fill: url(#icScaleSteel);
  stroke: var(--border-strong);
  stroke-width: 1.4;
  stroke-linejoin: round;
}

#view-iron-center .ic-scales-arm { fill: url(#icScaleBeam); }

#view-iron-center .ic-scales-gem {
  fill: url(#icScaleGold);
  stroke: var(--iron-gold-deep);
  stroke-width: 1;
  filter: drop-shadow(0 0 5px var(--iron-gold-glow));
}

#view-iron-center .ic-scales-chain {
  fill: none;
  stroke: color-mix(in srgb, var(--text-secondary) 62%, var(--steel-lo));
  stroke-width: 1.5;
  stroke-linecap: round;
}

#view-iron-center .ic-scales-bowl {
  fill: var(--steel-lo);
  stroke: color-mix(in srgb, var(--text-secondary) 30%, var(--border-strong));
  stroke-width: 1.3;
}

#view-iron-center .ic-scales-rim {
  fill: url(#icScaleSteel);
  stroke: color-mix(in srgb, var(--text-secondary) 45%, var(--border-strong));
  stroke-width: 1.2;
}

/* The beam tips; each dish counter-rotates so it hangs level, the way a real
 * balance behaves. --tilt keeps the resting angle and the settle in sync. */

#view-iron-center .ic-scales-beam { --tilt: 0deg; }

#view-iron-center .ic-scales-beam.is-tilt-right { --tilt: 7deg; }

#view-iron-center .ic-scales-beam.is-tilt-left { --tilt: -7deg; }

#view-iron-center .ic-scales-arm-rig {
  transform-box: view-box;
  transform-origin: 130px 36px;
  transform: rotate(var(--tilt));
  transition: transform 720ms var(--iron-spring);
}

#view-iron-center .ic-scales-pan {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  transform: rotate(calc(var(--tilt) * -1));
  transition: transform 720ms var(--iron-spring);
}

/* A fresh weighing swings past its answer and settles back onto it. */

#view-iron-center .ic-scales-beam.is-settling .ic-scales-arm-rig {
  animation: ic-scales-settle 860ms var(--iron-ease) both;
}

#view-iron-center .ic-scales-beam.is-settling .ic-scales-pan {
  animation: ic-scales-settle-pan 860ms var(--iron-ease) both;
}

@keyframes ic-scales-settle {
  0%   { transform: rotate(0deg); }
  46%  { transform: rotate(calc(var(--tilt) * 1.28)); }
  72%  { transform: rotate(calc(var(--tilt) * 0.86)); }
  88%  { transform: rotate(calc(var(--tilt) * 1.06)); }
  100% { transform: rotate(var(--tilt)); }
}

@keyframes ic-scales-settle-pan {
  0%   { transform: rotate(0deg); }
  46%  { transform: rotate(calc(var(--tilt) * -1.28)); }
  72%  { transform: rotate(calc(var(--tilt) * -0.86)); }
  88%  { transform: rotate(calc(var(--tilt) * -1.06)); }
  100% { transform: rotate(calc(var(--tilt) * -1)); }
}

/* Untouched scale: the faintest idle sway so the rig reads as hanging, not
 * printed. Stops the moment a real verdict arrives. */

#view-iron-center .ic-scales-beam.is-idle .ic-scales-arm-rig { animation: ic-scales-sway 7s ease-in-out infinite; }

#view-iron-center .ic-scales-beam.is-idle .ic-scales-pan { animation: ic-scales-sway-pan 7s ease-in-out infinite; }

@keyframes ic-scales-sway {
  0%, 100% { transform: rotate(-1.1deg); }
  50%      { transform: rotate(1.1deg); }
}

@keyframes ic-scales-sway-pan {
  0%, 100% { transform: rotate(1.1deg); }
  50%      { transform: rotate(-1.1deg); }
}

/* Solved: the balance is lit from within and the mystery weight is gold. */

#view-iron-center .ic-scales-beam.is-solved {
  border-color: color-mix(in srgb, var(--iron-gold) 30%, var(--border-color));
}

#view-iron-center .ic-scales-beam.is-won {
  background:
    radial-gradient(120% 88% at 50% 100%, var(--iron-gold-soft), transparent 70%),
    var(--bg-secondary);
}

#view-iron-center .ic-scales-beam.is-won .ic-scales-gem { animation: ic-scales-gem-pulse var(--badge-pulse) ease-in-out infinite; }

@keyframes ic-scales-gem-pulse {
  0%, 100% { filter: drop-shadow(0 0 4px var(--iron-gold-glow)); }
  50%      { filter: drop-shadow(0 0 12px var(--iron-gold)); }
}

/* ---- The boom, as Iron Scales tells it ---------------------------------- */

/* The clang: the beam hunts either side of level before it settles. */

#view-iron-center #ic-game-scales.is-boom .ic-scales-arm-rig { animation: ic-boom-clang 980ms var(--iron-ease) both; }

#view-iron-center #ic-game-scales.is-boom .ic-scales-pan { animation: ic-boom-clang-pan 980ms var(--iron-ease) both; }

@keyframes ic-boom-clang {
  0%   { transform: rotate(-7deg); }
  26%  { transform: rotate(4.6deg); }
  50%  { transform: rotate(-2.4deg); }
  72%  { transform: rotate(1.1deg); }
  88%  { transform: rotate(-.4deg); }
  100% { transform: rotate(0deg); }
}

@keyframes ic-boom-clang-pan {
  0%   { transform: rotate(7deg); }
  26%  { transform: rotate(-4.6deg); }
  50%  { transform: rotate(2.4deg); }
  72%  { transform: rotate(-1.1deg); }
  88%  { transform: rotate(.4deg); }
  100% { transform: rotate(0deg); }
}

#view-iron-center #ic-game-scales.is-boom .ic-scales-gem { animation: ic-boom-gem 1s var(--iron-ease) both; }

@keyframes ic-boom-gem {
  0%   { filter: drop-shadow(0 0 26px var(--iron-gold-bright)); }
  40%  { filter: drop-shadow(0 0 10px var(--iron-gold)); }
  100% { filter: drop-shadow(0 0 5px var(--iron-gold-glow)); }
}

#view-iron-center #ic-game-scales.is-boom .ic-scales-weight.is-correct {
  animation: ic-boom-weight 760ms var(--iron-spring) both;
  animation-delay: 200ms;
}

@keyframes ic-boom-weight {
  0%   { transform: translateY(-10px) scale(.8); }
  55%  { transform: translateY(0) scale(1.12); }
  100% { transform: none; }
}

/* ---- The weight itself — one block, pan or rack ------------------------- */

#view-iron-center .ic-weight-mark { color: var(--text-secondary); overflow: visible; }

#view-iron-center .ic-weight-mark .ic-weight-body {
  fill: url(#icScaleSteel);
  stroke: color-mix(in srgb, currentColor 52%, var(--border-strong));
  stroke-width: 1.6;
  stroke-linejoin: round;
}

#view-iron-center .ic-weight-mark .ic-weight-handle {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
}

#view-iron-center .ic-weight-mark .ic-weight-facet {
  stroke: color-mix(in srgb, #fff 20%, transparent);
  stroke-width: 1.4;
  stroke-linecap: round;
}

#view-iron-center .ic-weight-mark .ic-weight-value {
  fill: var(--text-primary);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

#view-iron-center .ic-weight-mark.is-higher { color: var(--arcade-hot); }

#view-iron-center .ic-weight-mark.is-lower { color: var(--arcade-cold); }

#view-iron-center .ic-weight-mark.is-correct,
#view-iron-center .ic-weight-mark.is-revealed { color: var(--iron-gold); }

#view-iron-center .ic-weight-mark.is-correct .ic-weight-body,
#view-iron-center .ic-weight-mark.is-mystery .ic-weight-body { fill: url(#icScaleGold); }

#view-iron-center .ic-weight-mark.is-correct .ic-weight-value,
#view-iron-center .ic-weight-mark.is-mystery .ic-weight-value { fill: var(--iron-on-gold); }

#view-iron-center .ic-weight-mark.is-mystery {
  color: var(--iron-gold-bright);
  filter: drop-shadow(0 0 6px var(--iron-gold-glow));
}

#view-iron-center .ic-weight-mark.is-correct { filter: drop-shadow(0 0 8px var(--iron-gold-glow)); }

/* ---- 2. The readout ----------------------------------------------------- */

/* Verdict — the single sentence the last weighing produced. */

#view-iron-center .ic-scales-verdict {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 34px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  box-shadow: inset 0 0 0 1px var(--border-color);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

#view-iron-center .ic-scales-verdict i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-size: 11px;
}

#view-iron-center .ic-scales-verdict.is-higher i { background: var(--spark-soft); color: var(--arcade-hot); }

#view-iron-center .ic-scales-verdict.is-lower i { background: var(--aura-soft); color: var(--arcade-cold); }

/* Range — low cap, the rail the hunt narrows on, high cap. The numbers sit
 * in their own plates so they can never collide with the window. */

#view-iron-center .ic-scales-track {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
}

#view-iron-center .ic-scales-cap {
  display: grid;
  justify-items: center;
  gap: 1px;
  min-width: 46px;
  padding: 4px 8px 5px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
}

#view-iron-center .ic-scales-cap small {
  color: var(--text-muted);
  font-size: 8px;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
}

#view-iron-center .ic-scales-cap b {
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

#view-iron-center .ic-scales-cap.is-lo b { color: var(--arcade-hot); }

#view-iron-center .ic-scales-cap.is-hi b { color: var(--arcade-cold); }

#view-iron-center .ic-scales-range {
  position: relative;
  display: block;
  height: 30px;
  border-radius: var(--radius-sm);
  /* Ruled off in quarters, and hatched everywhere the weight has already been
   * ruled out — the eliminated ground is visibly dead. */
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), var(--border-strong) calc(25% - 1px) 25%),
    repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--border-color) 45%, transparent) 5px 10px),
    var(--bg-input);
  box-shadow: inset 0 1px 3px color-mix(in srgb, #000 45%, transparent), inset 0 0 0 1px var(--border-color);
  overflow: hidden;
}

#view-iron-center .ic-scales-range-window {
  position: absolute;
  top: 3px;
  bottom: 3px;
  min-width: 5px;
  border-radius: 5px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--iron-gold-deep) 85%, transparent), color-mix(in srgb, var(--iron-gold) 75%, transparent));
  box-shadow: 0 0 0 1px var(--iron-gold), 0 0 14px var(--iron-gold-glow);
  transition: left 520ms var(--iron-ease), width 520ms var(--iron-ease);
  overflow: hidden;
}

/* The travelling sheen the quest bars use — same forge language. */

#view-iron-center .ic-scales-range-window::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--iron-gold-bright) 55%, transparent), transparent);
  transform: translateX(-100%);
  animation: ic-scales-sheen var(--quest-sheen) var(--iron-ease) infinite;
}

@keyframes ic-scales-sheen {
  0%, 55% { transform: translateX(-100%); }
  100%    { transform: translateX(100%); }
}

/* Every weighing leaves a notch where it landed. */

#view-iron-center .ic-scales-mark {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 2.5px;
  margin-left: -1.25px;
  border-radius: 2px;
  background: var(--text-muted);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg-input) 70%, transparent);
}

#view-iron-center .ic-scales-mark.is-higher { background: var(--arcade-hot); }

#view-iron-center .ic-scales-mark.is-lower { background: var(--arcade-cold); }

#view-iron-center .ic-scales-mark.is-correct { background: var(--iron-gold-bright); }

/* Stats — weighings in hand · what is still in range · what a win pays. */

#view-iron-center .ic-scales-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-sm);
}

#view-iron-center .ic-scales-pips { display: inline-flex; align-items: center; gap: 5px; }

#view-iron-center .ic-scales-pips i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: var(--iron-gold);
  box-shadow: 0 0 6px var(--iron-gold-glow);
}

#view-iron-center .ic-scales-pips i.is-spent {
  background: var(--bg-tertiary);
  box-shadow: inset 0 0 0 1px var(--border-strong), 0 0 0 1px color-mix(in srgb, var(--text-muted) 22%, transparent);
}

#view-iron-center .ic-scales-count {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
}

#view-iron-center .ic-scales-stake {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--iron-gold-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--iron-gold) 34%, transparent);
  color: var(--arcade-gold-ink);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#view-iron-center .ic-scales-stake .iron-diamond { width: 1.1em; height: 1.1em; }

/* ---- 3. The rack -------------------------------------------------------- */

#view-iron-center .ic-scales-rack {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-xs);
  padding: 4px 10px 0;
  border-bottom: 2px solid var(--border-strong);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--bg-input) 80%, transparent));
}

#view-iron-center .ic-scales-rack-label {
  flex: 1 0 100%;
  color: var(--text-muted);
  font-size: 8px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

#view-iron-center .ic-scales-weight {
  position: relative;
  display: block;
  width: 42px;
  color: var(--text-secondary);
}

#view-iron-center .ic-scales-weight .ic-weight-mark { display: block; width: 100%; height: auto; }

/* Each block stamps its verdict onto the shelf line it stands on. */

#view-iron-center .ic-scales-weight::after {
  content: '';
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: -2px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

#view-iron-center .ic-scales-weight.is-higher { color: var(--arcade-hot); }

#view-iron-center .ic-scales-weight.is-lower { color: var(--arcade-cold); }

#view-iron-center .ic-scales-weight.is-correct { color: var(--iron-gold); }

/* The weight just tried drops onto the rack. */

#view-iron-center .ic-scales-rack.is-fresh .ic-scales-weight:last-child {
  animation: ic-scales-drop 460ms var(--iron-spring) both;
}

@keyframes ic-scales-drop {
  0%   { opacity: 0; transform: translateY(-16px); }
  68%  { opacity: 1; transform: translateY(2px); }
  100% { opacity: 1; transform: none; }
}

/* ---- Input + result ----------------------------------------------------- */

#view-iron-center .ic-scales-input input {
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

#view-iron-center .ic-scales-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}

#view-iron-center .ic-scales-result.is-won {
  border-color: color-mix(in srgb, var(--iron-gold) 40%, var(--border-color));
  background: var(--iron-gold-faint);
}

#view-iron-center .ic-scales-result-copy { display: grid; gap: 6px; }

#view-iron-center .ic-scales-result-copy b {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

#view-iron-center .ic-scales-result .ic-trivia-summary-reward { flex: 0 0 auto; }

/* =========================================================================
 * THE FORGE — the daily ritual, rebuilt as a hearth you actually work.
 *
 * It used to be a flat accent-coloured silhouette and a one-tap button: no
 * anticipation, so no payoff. Now the iron has to be brought to working heat
 * before it can be struck, and the result is withheld behind a ratchet that
 * settles onto the tier the server already rolled.
 *
 * The hold is a GATE, never a dial. Holding longer cannot change the roll, so
 * nothing here may read as a power meter — the fill stops at working heat and
 * the copy switches to "release", full stop.
 * ========================================================================= */

#view-iron-center .ic-forge-hero {
  --heat: 0;
  --ember: 0;
  /* One blow, shared by the hammer, the anvil, the sparks and the metal. It
   * has to match _forgeBlowMs in iron-center.js — the shaping steps are timed
   * off the same number, and a drift here lands the deformation between
   * blows instead of on them. */
  --blow: 540ms;
  /* The hearth sits against its own fire, so its steel runs a stop brighter
   * than the arcade's — otherwise the anvil silhouettes into a black mass. */
  --steel-hi: color-mix(in srgb, #fff 52%, var(--bg-tertiary));
  --steel-mid: color-mix(in srgb, #fff 28%, var(--bg-tertiary));
  background: var(--bg-elevated);
}

#view-iron-center .ic-forge-hero-body { padding-top: var(--space-md); }

/* The IRON identity layer is fixed: this room pays IRON, so it reads gold and
 * never picks up the user's theme accent. */

#view-iron-center .ic-forge-hero-tag { color: var(--iron-gold); }

/* Original Forge artwork. The hold-to-forge controller still drives --heat
 * and the hero state classes, but the stage itself is the compact graphic
 * scene that preceded the smithy illustration. */

#view-iron-center .ic-forge-visual {
  position: relative;
  display: grid;
  place-items: center;
  width: 180px;
  height: 130px;
  margin-inline: auto;
  overflow: visible;
}

#view-iron-center .ic-forge-scene { position: relative; width: 180px; height: 120px; z-index: 2; }

/* The blow lands as heat, not as geometry. An expanding accent-coloured ring
 * used to sit here: an outline is the one thing a forge never produces, it
 * picked up the user's theme hue in a room that pays IRON, and at z-index 1 it
 * drew itself BEHIND the anvil as a green arc growing out of the casting.
 *
 * What replaces it is the light off the strike — a flattened gold bloom laid
 * along the anvil face, centred on the exact point the hammer lands and the
 * sparks come off (scene 90, 72). It is bottom-anchored to that point rather
 * than to the box, so it cannot drift when the scene is resized. */

#view-iron-center .ic-forge-scene::before {
  content: '';
  position: absolute;
  bottom: 48px;
  left: 50%;
  width: 84px;
  height: 24px;
  margin: 0 0 -12px -42px;
  border-radius: var(--radius-round);
  background: radial-gradient(closest-side,
    var(--iron-gold-bright), var(--iron-gold) 40%, var(--iron-gold-glow) 64%, transparent 78%);
  opacity: 0;
  pointer-events: none;
  /* In front of the anvil (z 2), behind the sparks (z 4), and level with the
   * hammer (z 3) so the head still covers the flash it made. */
  z-index: 3;
}

#view-iron-center .ic-forge-glow {
  position: absolute;
  inset: -10px;
  border-radius: var(--radius-round);
  background: radial-gradient(circle, var(--accent-light), transparent 70%);
  opacity: calc(.3 + var(--heat, 0) * .7);
  filter: none;
  pointer-events: none;
  z-index: 1;
}

#view-iron-center .ic-forge-visual.cooled .ic-forge-glow { opacity: 0; }

#view-iron-center .ic-forge-hammer-wrap {
  position: absolute;
  top: -8px;
  right: 82px;
  color: var(--accent-color);
  font-size: 42px;
  transform: rotate(35deg);
  transform-origin: 75% 90%;
  filter: drop-shadow(0 0 6px var(--accent-subtle));
  z-index: 3;
}

#view-iron-center .ic-forge-anvil-wrap {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 86px;
  height: 52px;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  z-index: 2;
}

#view-iron-center .ic-forge-anvil { display: block; width: 100%; height: 100%; overflow: visible; }

#view-iron-center .ic-forge-anvil path {
  fill: var(--accent-color);
  stroke: var(--border-strong);
  stroke-width: 1;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px var(--accent-subtle));
}

#view-iron-center .ic-forge-visual.cooled .ic-forge-hammer-wrap { color: var(--text-muted); filter: none; }

#view-iron-center .ic-forge-visual.cooled .ic-forge-anvil path { fill: var(--text-muted); filter: none; }

#view-iron-center .ic-forge-sparks { position: absolute; bottom: 48px; left: 50%; z-index: 4; }

#view-iron-center .ic-forge-sparks span {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-round);
  background: var(--iron-gold-bright);
  box-shadow: 0 0 8px var(--iron-gold);
  opacity: 0;
}

#view-iron-center .ic-forge-sparks span:nth-child(1) { --spark-x: -48px; --spark-y: -42px; }

#view-iron-center .ic-forge-sparks span:nth-child(2) { --spark-x: 44px; --spark-y: -48px; }

#view-iron-center .ic-forge-sparks span:nth-child(3) { --spark-x: -24px; --spark-y: -62px; }

#view-iron-center .ic-forge-sparks span:nth-child(4) { --spark-x: 58px; --spark-y: -24px; }

#view-iron-center .ic-forge-sparks span:nth-child(5) { --spark-x: -60px; --spark-y: -18px; }

#view-iron-center .ic-forge-sparks span:nth-child(6) { --spark-x: 20px; --spark-y: -68px; }

#view-iron-center .ic-forge-hero.is-working .ic-forge-hammer-wrap { animation: ic-classic-forge-work var(--blow) var(--iron-ease) infinite; animation-delay: var(--work-shift, 0ms); }

#view-iron-center .ic-forge-hero.is-working .ic-forge-anvil-wrap { animation: ic-classic-anvil-work var(--blow) var(--iron-ease) infinite; animation-delay: var(--work-shift, 0ms); }

#view-iron-center .ic-forge-hero.is-working .ic-forge-sparks span { animation: ic-classic-forge-spark var(--blow) var(--iron-ease) infinite; animation-delay: var(--work-shift, 0ms); }

#view-iron-center .ic-forge-hero.is-final-strike .ic-forge-hammer-wrap { animation: ic-classic-forge-final 980ms cubic-bezier(.5, 0, .2, 1) both; }

#view-iron-center .ic-forge-hero.is-final-strike .ic-forge-anvil-wrap { animation: ic-classic-anvil-final 980ms cubic-bezier(.3, 0, .2, 1) both; }

/* Everything hung off the moment of contact fills FORWARDS, never `both`. A
 * backwards fill applies the 0% frame during the delay, so `both` here lit the
 * sparks and washed the anvil gold from the instant the swing started — the
 * whole impact was already on screen before the hammer had moved. */

#view-iron-center .ic-forge-hero.is-final-strike .ic-forge-sparks span { animation: ic-classic-forge-final-spark 920ms var(--iron-ease) 333ms forwards; }

#view-iron-center .ic-forge-hero.is-final-strike .ic-forge-scene::before { animation: ic-classic-forge-bloom 480ms ease-out 333ms forwards; }

#view-iron-center .ic-forge-hero.is-final-strike .ic-forge-anvil path { animation: ic-classic-anvil-flash 560ms ease-out 333ms forwards; }

#view-iron-center .ic-forge-hero.is-final-strike .ic-forge-glow { animation: ic-classic-forge-flash 980ms ease-out both; }

/* ---- The swing ----------------------------------------------------------
 * Every pose is `translate() rotate()`, in that order, and never the reverse.
 * These keyframes used to read `rotate(95deg) translate(-26px, 36px)`, which
 * applies the offset in the ROTATED frame: the intended "down 36px" resolved
 * to roughly (-34px, -29px), i.e. 29px UP, and the head finished its swing
 * hanging in the air a clear 30px above the face it was supposed to hit.
 *
 * The contact pose is geometry, not feel. In scene coordinates the hammer
 * wrap sits untransformed at (50.75, -8) and pivots about (86.19, 48.7); the
 * glyph's striking tip is at its local (47.2, 28.2); the anvil face runs
 * along y 71.64 from x 52.2 to x 107.2, and the sparks are thrown from
 * (90, 72). Rotated to 115deg the tip lands at (107.9, 71.6) — the right
 * edge of the face — so `translate(-18px, 1px)` walks it back to (89.9, 72.6)
 * and one pixel into the metal. Change either number and they part company.
 *
 * Contact is at 30% of the working loop, which is _forgeBlowLead / _forgeBlowMs
 * (162 / 540) — the blow the shaping steps are timed off.
 *
 * The extra Y on the contact pose is the anvil getting out of the way. The
 * casting recoils on the same frame the hammer arrives, and because its wrap
 * scales about `50% 100%` the face drops by translateY PLUS (1 - scaleY) * 52.
 * The hammer has to ride that down or the blow lands in the gap the recoil
 * just opened — which is what a scaleY(.85) flinch was doing: 13px of daylight
 * under a hammer that had otherwise arrived on target. */

@keyframes ic-classic-forge-work {
  0%, 100% { transform: translate(0, 0) rotate(35deg); }
  14% { transform: translate(1px, -4px) rotate(4deg); }
  30% { transform: translate(-18px, 5px) rotate(115deg); }
  37% { transform: translate(-17px, 3px) rotate(110deg); }
  58% { transform: translate(-7px, -2px) rotate(70deg); }
}

@keyframes ic-classic-anvil-work {
  0%, 26%, 100% { transform: translateX(-50%) translateY(0); }
  30% { transform: translateX(-50%) translateY(2px) scaleY(.96); }
  44% { transform: translateX(-50%) translateY(-1px) scaleY(1.01); }
}

@keyframes ic-classic-forge-spark {
  0%, 29% { opacity: 0; transform: translate(0, 0) scale(.4); }
  33% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--spark-x), var(--spark-y)) scale(.2); }
}

/* The finishing blow: the same contact pose, reached from a full overhead
 * lift that pauses before it comes down. At -18deg the head sits directly
 * above the strike point, so the swing is a straight fall onto the metal. */

@keyframes ic-classic-forge-final {
  0% { transform: translate(0, 0) rotate(35deg); }
  17% { transform: translate(2px, -6px) rotate(-18deg); }
  26% { transform: translate(2px, -6px) rotate(-18deg); }
  34% { transform: translate(-18px, 8px) rotate(115deg); }
  41% { transform: translate(-17px, 5px) rotate(111deg); }
  62% { transform: translate(-7px, -3px) rotate(66deg); }
  100% { transform: translate(0, 0) rotate(35deg); }
}

/* The finishing blow is heavier than the loop, so it drives the casting
 * further DOWN rather than squashing it further: a hammer can follow the face
 * down, but it cannot follow the face shrinking out from under it. */

@keyframes ic-classic-anvil-final {
  0%, 30%, 100% { transform: translateX(-50%); }
  34% { transform: translateX(-50%) translateY(6px) scaleY(.97); }
  45% { transform: translateX(-50%) translateY(2px) scaleY(1); }
  60% { transform: translateX(-50%) translateY(-3px) scaleY(1.03); }
}

/* Struck sparks, thrown half again as far as the working loop's. */

@keyframes ic-classic-forge-final-spark {
  0% { opacity: 1; transform: translate(0, 0) scale(1.5); }
  58% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--spark-x) * 1.5), calc(var(--spark-y) * 1.5)) scale(.22); }
}

/* Seeded on the recoiled face, not the resting one — the light is struck out
 * of the metal at the frame the metal is at its lowest, and rides back up with
 * it as the casting recovers. */

@keyframes ic-classic-forge-bloom {
  0% { opacity: 0; transform: translateY(7px) scale(.3, .45); }
  14% { opacity: .88; transform: translateY(6px) scale(1.04, 1); }
  100% { opacity: 0; transform: translateY(0) scale(1.5, 1.14); }
}

/* The casting takes the light off its own blow, then cools out of it. This is
 * the anvil answering the hammer — the one beat the strike was missing once
 * the ring came out.
 *
 * It lights the casting rather than touching its colour, and it does that with
 * the cast shadow alone. Two things were tried and rejected: interpolating
 * `fill` from gold back to the room colour drags the anvil through a muddy
 * yellow-green for the whole decay, and `brightness()` on the accent green
 * pushes it to cyan — which in this room is the one hue reserved for COLD.
 * Warm light thrown onto the metal says "struck" without either. The gold on
 * the face itself is the bloom's job. */

@keyframes ic-classic-anvil-flash {
  0% { filter: drop-shadow(0 0 20px var(--iron-gold)) drop-shadow(0 0 7px var(--iron-gold-bright)); }
  32% { filter: drop-shadow(0 0 13px var(--iron-gold)) drop-shadow(0 0 4px var(--iron-gold-glow)); }
  100% { filter: drop-shadow(0 0 6px var(--accent-subtle)) drop-shadow(0 0 0 transparent); }
}

/* The ambient glow only leans into the impact — the gold bloom on the face is
 * what carries it, and a second circle pulsing behind the scene was half the
 * reason the old finish read as an effect rather than as a blow. */

@keyframes ic-classic-forge-flash {
  0%, 30% { opacity: calc(.3 + var(--heat, 0) * .7); transform: scale(1); }
  36% { opacity: .8; transform: scale(1.07); }
  100% { opacity: .3; transform: scale(1); }
}

/* ---- The hearth --------------------------------------------------------- */

#view-iron-center .ic-hearth {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--space-xs) 0 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background:
    radial-gradient(80% 52% at 52% 44%, color-mix(in srgb, #ff3a12 calc(var(--heat) * 18%), transparent), transparent 70%),
    radial-gradient(120% 60% at 50% 104%, color-mix(in srgb, #ff5a2a calc(4% + var(--ember) * 9%), transparent), transparent 68%),
    var(--bg-secondary);
  box-shadow: inset 0 1px 0 var(--border-highlight);
  overflow: hidden;
  transition: background 220ms var(--iron-ease);
}

#view-iron-center .ic-hearth-art {
  display: block;
  width: min(720px, 100%);
  height: auto;
  transform-origin: 58% 62%;
}

/* ---- Depth of field ------------------------------------------------------
 * The anvil is the focal plane. Everything behind it is defocused by its
 * distance — a lens does this, and without it the room reads as flat artwork
 * pasted behind the rig. Blur radii are in viewBox units, so the defocus
 * scales with the art and looks identical at every card width.
 * Distance also costs contrast and colour, hence the saturate/brightness on
 * the far plane: only the near plane keeps its full value range. */

#view-iron-center .ic-workshop-plane.is-far { filter: blur(3.4px) saturate(.78) brightness(.94); }

#view-iron-center .ic-workshop-plane.is-back { filter: blur(2.4px) saturate(.86); }

#view-iron-center .ic-workshop-plane.is-mid { filter: blur(1.5px) saturate(.92); }

#view-iron-center .ic-workshop-plane.is-near { filter: blur(.7px); }

/* The flame is the one thing in the backdrop that moves, so it carries its
 * own blur instead of living inside a plane — a filtered group re-rasterises
 * whenever a descendant animates, and this keeps that cost to a small box
 * rather than the whole room. */

#view-iron-center .ic-workshop-flame { filter: blur(2.2px); }

/* ---- The air -------------------------------------------------------------
 * Aerial perspective: haze thickens with distance and settles under the roof,
 * the hearth throws its light back across the room, and the frame falls off
 * at the edges. Together they seat the anvil in a space with air in it. */

#view-iron-center .ic-workshop-air { fill: url(#icWorkshopHaze); }

#view-iron-center .ic-workshop-air.is-far { opacity: .56; }

#view-iron-center .ic-workshop-air.is-mid { opacity: .26; }

#view-iron-center .ic-haze-high { stop-color: color-mix(in srgb, #0b0a09 58%, var(--bg-secondary)); stop-opacity: .86; }

#view-iron-center .ic-haze-mid { stop-color: color-mix(in srgb, #14100c 52%, var(--bg-secondary)); stop-opacity: .5; }

#view-iron-center .ic-haze-low { stop-color: color-mix(in srgb, #1a1310 46%, var(--bg-secondary)); stop-opacity: .2; }

/* Firelight falls off fast — a hearth lights the corner it sits in, not the
 * whole room. Wide and strong reads as an orange filter over the art, which
 * is the flat look the depth planes are here to kill. */

#view-iron-center .ic-workshop-firelight {
  fill: url(#icWorkshopFirelight);
  mix-blend-mode: screen;
  opacity: calc(.2 + var(--ember) * .26 + var(--heat) * .24);
  transition: opacity 220ms var(--iron-ease);
}

/* A hearth stands on a floor, and the floor under it is the brightest thing in
 * the room. The pool goes on before the general fall-off, so the light has a
 * place it comes FROM rather than only a direction it fades in. */

#view-iron-center .ic-workshop-floor-firelight {
  fill: #ff5c1c;
  mix-blend-mode: screen;
  opacity: calc(.07 + var(--ember) * .13 + var(--heat) * .1);
  filter: blur(22px);
  transition: opacity 220ms var(--iron-ease);
}

#view-iron-center .ic-firelight-core { stop-color: #ff7a2a; stop-opacity: .46; }

#view-iron-center .ic-firelight-fall { stop-color: #ff4d12; stop-opacity: .13; }

#view-iron-center .ic-firelight-out { stop-color: #ff3a0c; stop-opacity: 0; }

#view-iron-center .ic-workshop-vignette { fill: url(#icWorkshopVignette); }

#view-iron-center .ic-vignette-clear { stop-color: #050404; stop-opacity: 0; }

#view-iron-center .ic-vignette-edge { stop-color: #050404; stop-opacity: .42; }

/* Distance fades toward the light in a lit room, not toward black — so in
 * light mode the haze washes pale and the wall-hung tools have to darken to
 * survive both the veil and the defocus. */

.light-mode #view-iron-center .ic-haze-high { stop-color: color-mix(in srgb, #fff 74%, var(--bg-secondary)); stop-opacity: .62; }

.light-mode #view-iron-center .ic-haze-mid { stop-color: color-mix(in srgb, #fff 62%, var(--bg-secondary)); stop-opacity: .36; }

.light-mode #view-iron-center .ic-haze-low { stop-color: color-mix(in srgb, #f4ece2 50%, var(--bg-secondary)); stop-opacity: .14; }

.light-mode #view-iron-center .ic-vignette-edge { stop-opacity: .26; }

/* ---- The smithy's materials ----------------------------------------------
 * Stone, timber, iron, coal, glass. Every one is mixed off the room's own
 * surfaces so the workshop stays part of the product in either theme, and
 * every one is lit the same way: cool from above, fire from the left. */

#view-iron-center .ic-shop-wall-hi { stop-color: var(--shop-stone-hi); }

#view-iron-center .ic-shop-wall-lo { stop-color: var(--shop-stone-lo); }

#view-iron-center .ic-shop-iron-hi { stop-color: color-mix(in srgb, #fff 14%, var(--shop-iron)); }

#view-iron-center .ic-shop-iron-lo { stop-color: color-mix(in srgb, #000 42%, var(--shop-iron)); }

#view-iron-center .ic-shop-timber-hi { stop-color: color-mix(in srgb, #fff 12%, var(--shop-timber)); }

#view-iron-center .ic-shop-timber-lo { stop-color: color-mix(in srgb, #000 46%, var(--shop-timber)); }

#view-iron-center .ic-shop-coal-hot { stop-color: #ffb347; }

#view-iron-center .ic-shop-coal-mid { stop-color: #e8481a; }

#view-iron-center .ic-shop-coal-dead { stop-color: #1c0f09; }

#view-iron-center .ic-shop-glass-hi { stop-color: color-mix(in srgb, #fff 78%, var(--shop-cool)); }

#view-iron-center .ic-shop-glass-lo { stop-color: color-mix(in srgb, var(--shop-cool) 86%, #16232c); }

#view-iron-center .ic-shop-shaft-in { stop-color: var(--shop-cool); stop-opacity: .34; }

#view-iron-center .ic-shop-shaft-out { stop-color: var(--shop-cool); stop-opacity: 0; }

/* The hood is sheet iron hanging over a fire: dark where the smoke goes in,
 * and only its lower lip warm. Iron's own ramp put its lightest stop across
 * the widest part of it, and the hood came out paler than the stone. */

#view-iron-center .ic-shop-hood-dark { stop-color: color-mix(in srgb, #000 58%, var(--shop-iron)); }

#view-iron-center .ic-shop-hood-mid { stop-color: color-mix(in srgb, #000 26%, var(--shop-iron)); }

#view-iron-center .ic-shop-hood-warm { stop-color: color-mix(in srgb, #ff6a22 26%, color-mix(in srgb, #000 20%, var(--shop-iron))); }

/* The slack tub stands in the room's darkest corner; at the bench's timber
 * value it was the brightest object on that side of the card. */

#view-iron-center .ic-shop-tub-hi { stop-color: color-mix(in srgb, #000 34%, var(--shop-timber)); }

#view-iron-center .ic-shop-tub-lo { stop-color: color-mix(in srgb, #000 62%, var(--shop-timber)); }

#view-iron-center .ic-shop-flue-dark { stop-color: color-mix(in srgb, #000 26%, var(--shop-stone-hi)); }

#view-iron-center .ic-shop-flue-lit { stop-color: color-mix(in srgb, #fff 6%, var(--shop-stone-hi)); }

#view-iron-center .ic-shop-block-hi { stop-color: color-mix(in srgb, #fff 14%, var(--shop-stone-hi)); }

#view-iron-center .ic-shop-block-lo { stop-color: color-mix(in srgb, #000 22%, var(--shop-stone-lo)); }

#view-iron-center .ic-shop-vouss-hi { stop-color: color-mix(in srgb, #fff 34%, var(--shop-stone-hi)); }

#view-iron-center .ic-shop-vouss-lo { stop-color: color-mix(in srgb, #000 26%, var(--shop-stone-hi)); }

#view-iron-center .ic-shop-grime-out { stop-color: #10161a; stop-opacity: 0; }

#view-iron-center .ic-shop-grime-in { stop-color: #10161a; stop-opacity: .38; }

#view-iron-center .ic-shop-flame-base { stop-color: #ff3d0b; }

#view-iron-center .ic-shop-flame-mid { stop-color: #ff7a18; }

#view-iron-center .ic-shop-flame-tip { stop-color: #ffc247; }

/* ---- The wall ---------------------------------------------------------- */

#view-iron-center .ic-workshop-wall { fill: url(#icWorkshopWall); }

#view-iron-center .ic-workshop-bricks {
  fill: none;
  stroke: color-mix(in srgb, #000 62%, var(--shop-stone-lo));
  stroke-width: 1.4;
  opacity: .7;
}

/* One pale line under each bed. Scored joints alone read as a drawn grid;
 * mortar with light on it reads as courses of stone with thickness. */

#view-iron-center .ic-workshop-mortar {
  fill: none;
  stroke: color-mix(in srgb, #fff 16%, var(--shop-stone-hi));
  stroke-width: 1;
  opacity: .5;
}

#view-iron-center .ic-workshop-stones rect {
  fill: color-mix(in srgb, #fff 5%, var(--shop-stone-hi));
  opacity: .34;
}

/* Years of smoke off the fire. A smithy wall that is evenly clean has never
 * had a fire in it, and the stain is also what stops the brightest corner of
 * the room reading as a flat panel of brick. */

#view-iron-center .ic-workshop-soot { fill: url(#icWorkshopSoot); }

#view-iron-center .ic-soot-in { stop-color: #100c09; stop-opacity: .34; }

#view-iron-center .ic-soot-out { stop-color: #050403; stop-opacity: 0; }

.light-mode #view-iron-center .ic-soot-in { stop-opacity: .3; }

#view-iron-center .ic-workshop-beam { fill: url(#icWorkshopTimber); }

#view-iron-center .ic-workshop-beam-shade { fill: color-mix(in srgb, #000 68%, var(--shop-timber)); }

/* The one arris on the roof timber that the window can reach. */

#view-iron-center .ic-workshop-beam-lit {
  fill: none;
  stroke: color-mix(in srgb, #fff 22%, var(--shop-timber));
  stroke-width: 1.6;
  opacity: .5;
}

/* Thin gold on a defocused wall reads as nothing, so the house mark is cut
 * wide enough to still be a mark once the far plane blurs it. */

#view-iron-center .ic-workshop-mark {
  fill: none;
  stroke: color-mix(in srgb, var(--iron-gold) 58%, transparent);
  stroke-width: 2.6;
}

/* ---- The window: the room's one cold light ------------------------------
 * A hole through a thick wall, not a pane painted onto it. Four things do the
 * whole job: an arch cut in voussoirs rather than a smooth band, a reveal that
 * shows the wall's own depth around the opening, glass that is brighter at the
 * top than at the grimy bottom, and a sill that throws a shadow down the stone
 * beneath it. */

#view-iron-center .ic-workshop-window-stone { fill: url(#icWorkshopVoussoir); }

#view-iron-center .ic-workshop-window-voussoir {
  fill: none;
  stroke: color-mix(in srgb, #000 58%, var(--shop-stone-lo));
  stroke-width: 1.3;
  opacity: .85;
}

/* The reveal: the depth of the opening, turned away from the daylight. */

#view-iron-center .ic-workshop-window-reveal { fill: color-mix(in srgb, #000 46%, var(--shop-stone-lo)); }

#view-iron-center .ic-workshop-window-glass { fill: url(#icWorkshopWindow); }

#view-iron-center .ic-workshop-window-sky {
  fill: color-mix(in srgb, #fff 72%, var(--shop-cool));
  opacity: .55;
  filter: blur(7px);
}

#view-iron-center .ic-workshop-window-grime { fill: url(#icWorkshopGrime); }

#view-iron-center .ic-workshop-window-bars {
  fill: none;
  stroke: color-mix(in srgb, #000 62%, var(--shop-iron));
  stroke-width: 2.4;
}

/* Every bar is round stock: dark on its underside, one bright line on top. */

#view-iron-center .ic-workshop-window-bars.is-lit {
  stroke: color-mix(in srgb, #fff 62%, var(--shop-cool));
  stroke-width: 1;
  opacity: .5;
}

#view-iron-center .ic-workshop-window-sill { fill: color-mix(in srgb, #fff 8%, var(--shop-stone-hi)); }

#view-iron-center .ic-workshop-window-sill-lit {
  fill: none;
  stroke: color-mix(in srgb, #fff 46%, var(--shop-cool));
  stroke-width: 1.4;
  opacity: .55;
}

#view-iron-center .ic-workshop-window-sill-shade { fill: color-mix(in srgb, #000 62%, transparent); filter: blur(2.5px); }

/* Light through dusty air has no edge on it. Once the room stopped painting
 * itself black the hard-edged wedge read as a sheet of plastic laid over the
 * scene, so the shaft is blurred as wide as the opening it comes through. */

#view-iron-center .ic-workshop-shaft {
  fill: url(#icWorkshopShaft);
  mix-blend-mode: screen;
  opacity: .34;
  filter: blur(7px);
}

/* A shaft has a brighter middle. Two nested wedges is the cheapest honest
 * version of that, and it stops the light reading as a flat grey triangle. */

#view-iron-center .ic-workshop-shaft.is-core { opacity: .2; filter: blur(11px); }

/* The glass itself, drawn again above the haze. Aerial perspective dims what
 * it is in front of; a light source behind haze scatters toward the camera
 * instead, and without this the room's one cold light was the dimmest thing
 * on the wall it is cut into. */

/* It keeps the back wall's defocus even though it is drawn past that plane. */

#view-iron-center .ic-workshop-window { filter: blur(2.4px) saturate(.86); }

#view-iron-center .ic-workshop-window-light {
  fill: var(--shop-cool);
  mix-blend-mode: screen;
  opacity: .24;
  filter: blur(18px);
}

/* ---- The floor ---------------------------------------------------------- */

/* The ground plane reads as ground because it falls off toward the camera and
 * its flagstones run to one vanishing point behind the anvil. */

#view-iron-center .ic-workshop-floor { fill: url(#icWorkshopFloor); }

#view-iron-center .ic-floor-far { stop-color: color-mix(in srgb, #000 16%, var(--bg-secondary)); }

#view-iron-center .ic-floor-near { stop-color: color-mix(in srgb, #000 54%, var(--bg-secondary)); }

#view-iron-center .ic-workshop-floor-lines {
  fill: none;
  stroke: color-mix(in srgb, #000 46%, var(--shop-stone-lo));
  stroke-width: 1.2;
  opacity: .8;
}

/* Generations of standing in one spot to swing a hammer wear the stone pale. */

#view-iron-center .ic-workshop-floor-worn { fill: color-mix(in srgb, #c9b39a 7%, transparent); }

#view-iron-center .ic-workshop-scrap { fill: color-mix(in srgb, #000 40%, var(--cast-lo)); }

/* ---- The forge: flue, hood, block, firebox, fuel -------------------------
 * Built in the order it would be built, and lit by the one thing inside it.
 * The old version was a dark trapezoid with an orange shape in front of it;
 * what makes this one a fireplace is that the fire is INSIDE something — a
 * mouth cut through a block, with a back wall the coals light, a lit lower lip
 * on the hood above them, and a bed of individual lumps rather than a wash. */

#view-iron-center .ic-workshop-chimney { fill: url(#icWorkshopFlue); }

#view-iron-center .ic-workshop-chimney-lit { fill: color-mix(in srgb, #fff 10%, var(--shop-stone-hi)); opacity: .45; }

#view-iron-center .ic-workshop-chimney-bands {
  fill: none;
  stroke: url(#icWorkshopIron);
  stroke-width: 3.4;
}

#view-iron-center .ic-workshop-hood { fill: url(#icWorkshopHood); }

#view-iron-center .ic-workshop-hood-edge { fill: color-mix(in srgb, #fff 11%, var(--shop-iron)); }

#view-iron-center .ic-workshop-hood-rivets {
  fill: none;
  stroke: color-mix(in srgb, #fff 20%, var(--shop-iron));
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: .5;
}

/* The hood's lower lip is the nearest iron to the fire, so it is the one edge
 * in the whole backdrop that takes real heat. */

#view-iron-center .ic-workshop-hood-lip {
  fill: color-mix(in srgb, #ff6a22 calc(18% + var(--ember) * 24% + var(--heat) * 20%), color-mix(in srgb, #fff 6%, var(--shop-iron)));
}

#view-iron-center .ic-workshop-hearth-block { fill: url(#icWorkshopBlock); }

#view-iron-center .ic-workshop-block-courses {
  fill: none;
  stroke: color-mix(in srgb, #000 58%, var(--shop-stone-lo));
  stroke-width: 1.4;
  opacity: .8;
}

#view-iron-center .ic-workshop-mouth { fill: color-mix(in srgb, #000 92%, var(--bg-secondary)); }

/* The arch over the mouth, and the back wall the fire is thrown against. */

#view-iron-center .ic-workshop-mouth-arch { fill: color-mix(in srgb, #fff 18%, var(--shop-stone-hi)); }

#view-iron-center .ic-workshop-mouth-joints {
  fill: none;
  stroke: color-mix(in srgb, #000 52%, var(--shop-stone-lo));
  stroke-width: 1.3;
  opacity: .8;
}

#view-iron-center .ic-workshop-mouth-back {
  fill: #ff4a12;
  opacity: calc(.12 + var(--ember) * .2 + var(--heat) * .16);
  filter: blur(6px);
}

/* The bars the fuel sits on, in front of the fire, so they read as a grate. */

#view-iron-center .ic-workshop-grate {
  fill: none;
  stroke: color-mix(in srgb, #000 62%, var(--shop-iron));
  stroke-width: 2;
  stroke-linecap: round;
  opacity: .8;
}

/* The coal bed is the fire's actual source: it holds heat with no flame on it,
 * which is why it is lit by --ember even when the hearth is cold. */

#view-iron-center .ic-workshop-coals {
  fill: url(#icWorkshopCoals);
  opacity: calc(.34 + var(--ember) * .4 + var(--heat) * .26);
  transition: opacity 220ms var(--iron-ease);
}

/* Individual lumps. A single smooth wash of coal colour is a gradient; coal is
 * broken rock, and the flat facets are what make the bed read as fuel. */

#view-iron-center .ic-workshop-coal-lumps path {
  fill: color-mix(in srgb, #1a0d07 72%, var(--bg-tertiary));
  stroke: color-mix(in srgb, #ff8a2c calc(30% + var(--ember) * 40%), transparent);
  stroke-width: .8;
}

#view-iron-center .ic-workshop-coal-lumps path:nth-child(2n) { fill: color-mix(in srgb, #2a1109 62%, var(--bg-tertiary)); }

#view-iron-center .ic-workshop-coal-cracks {
  fill: none;
  stroke: #ffb347;
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: calc(.3 + var(--ember) * .4 + var(--heat) * .3);
}

#view-iron-center .ic-workshop-tuyere { fill: url(#icWorkshopIron); }

#view-iron-center .ic-workshop-lip { fill: url(#icWorkshopIron); }

#view-iron-center .ic-workshop-coal-pile { fill: color-mix(in srgb, #000 72%, var(--bg-tertiary)); }

#view-iron-center .ic-workshop-coal-pile-lit {
  fill: none;
  stroke: color-mix(in srgb, #ff8b3a 60%, transparent);
  stroke-width: 1.2;
  opacity: calc(.2 + var(--ember) * .34);
}

#view-iron-center .ic-workshop-shovel {
  fill: none;
  stroke: var(--shop-timber);
  stroke-width: 2.6;
  stroke-linecap: round;
}

#view-iron-center .ic-workshop-shovel-blade { fill: url(#icWorkshopIron); }

#view-iron-center .ic-workshop-fire-glow {
  fill: #ff481d;
  opacity: calc(.16 + var(--ember) * .26 + var(--heat) * .2);
  filter: blur(15px);
}

/* The hood hangs directly over the fire, so its underside is lit from below —
 * the single detail that stops the hood reading as a dark cut-out pasted on
 * the wall above an unrelated orange shape. */

#view-iron-center .ic-workshop-hood-glow {
  fill: #ff7326;
  opacity: calc(.1 + var(--ember) * .26 + var(--heat) * .2);
  filter: blur(9px);
}

#view-iron-center .ic-workshop-fire {
  fill: url(#icWorkshopFlame);
  opacity: calc(.34 + var(--ember) * .36 + var(--heat) * .22);
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: ic-workshop-fire 1500ms ease-in-out infinite alternate;
}

/* Inside the body, where the fire is actually hot. */

#view-iron-center .ic-workshop-fire-core {
  fill: #ffc35a;
  opacity: calc(.26 + var(--ember) * .36 + var(--heat) * .24);
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: ic-workshop-fire-core 1100ms ease-in-out infinite alternate;
}

/* Two licks off the top of the bed, deliberately out of step with the body and
 * with each other. Everything moving on one timing is what makes animated
 * flame read as a single wobbling shape. */

#view-iron-center .ic-workshop-fire-lick {
  fill: #ffa93c;
  opacity: calc(.2 + var(--ember) * .34 + var(--heat) * .2);
  transform-box: fill-box;
  transform-origin: center bottom;
}

#view-iron-center .ic-workshop-fire-lick.is-a { animation: ic-workshop-lick 900ms ease-in-out infinite alternate; }

#view-iron-center .ic-workshop-fire-lick.is-b { animation: ic-workshop-lick 1300ms ease-in-out 240ms infinite alternate-reverse; }

@keyframes ic-workshop-fire {
  0% { transform: scale(.96, 1); }
  100% { transform: scale(1.04, .93) translateY(2px); }
}

@keyframes ic-workshop-fire-core {
  0% { transform: scale(1.03, .94) translateY(2px); }
  100% { transform: scale(.94, 1.05); }
}

@keyframes ic-workshop-lick {
  0% { transform: scale(.86, .8) translateY(4px); opacity: .35; }
  100% { transform: scale(1.06, 1.14) translateX(-2px); opacity: 1; }
}

/* Embers ride the chimney draught. Their own group, own blur: they animate,
 * and a filtered plane re-rasterises for every descendant that moves. */

#view-iron-center .ic-workshop-embers { filter: blur(1.1px); }

#view-iron-center .ic-workshop-embers circle {
  fill: #ffa23c;
  opacity: 0;
  animation: ic-workshop-ember 4200ms linear infinite;
}

#view-iron-center .ic-workshop-embers circle:nth-child(2) { animation-duration: 5200ms; animation-delay: 700ms; }

#view-iron-center .ic-workshop-embers circle:nth-child(3) { animation-duration: 3800ms; animation-delay: 1600ms; }

#view-iron-center .ic-workshop-embers circle:nth-child(4) { animation-duration: 4800ms; animation-delay: 2400ms; }

#view-iron-center .ic-workshop-embers circle:nth-child(5) { animation-duration: 5600ms; animation-delay: 3100ms; }

@keyframes ic-workshop-ember {
  0% { transform: translate(0, 0); opacity: 0; }
  14% { opacity: calc(.35 + var(--ember) * .5); }
  70% { opacity: calc(.2 + var(--ember) * .3); }
  100% { transform: translate(6px, -96px); opacity: 0; }
}

/* ---- The bench ----------------------------------------------------------
 * Heavy timber, dark against the fire, with the stock stacked on it. Its top
 * edge and legs catch the hearth on their near side — that rim is the only
 * reason the shape reads at all against a dark wall. */

/* Nothing in this room stands on the floor without a shadow under it. Contact
 * shadows are the cheapest weight there is, and their absence is exactly what
 * made the props read as stickers on a painted floor. */

#view-iron-center .ic-workshop-bench-shadow,
#view-iron-center .ic-workshop-tub-shadow {
  fill: color-mix(in srgb, #000 66%, transparent);
  filter: blur(4px);
}

#view-iron-center .ic-workshop-bench-top { fill: color-mix(in srgb, #000 34%, var(--shop-timber)); }

#view-iron-center .ic-workshop-bench-grain {
  fill: none;
  stroke: color-mix(in srgb, #000 52%, var(--shop-timber));
  stroke-width: .9;
  opacity: .7;
}

#view-iron-center .ic-workshop-bench-leg,
#view-iron-center .ic-workshop-bench-rail { fill: color-mix(in srgb, #000 52%, var(--shop-timber)); }

#view-iron-center .ic-workshop-bench-rim {
  fill: none;
  stroke: #ff8b3a;
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: calc(.22 + var(--ember) * .3 + var(--heat) * .26);
}

/* Billets, not treasure: each bar keeps a dark end-face and a gap wide enough
 * to survive the plane's blur, or the stack fuses into one gold blob. */

#view-iron-center .ic-workshop-ingots path {
  fill: url(#icWorkshopIngot);
  stroke: color-mix(in srgb, #000 62%, var(--iron-gold-deep));
  stroke-width: 1.2;
}

#view-iron-center .ic-shop-ingot-hi { stop-color: color-mix(in srgb, #000 16%, var(--iron-gold)); }

#view-iron-center .ic-shop-ingot-lo { stop-color: color-mix(in srgb, #000 46%, var(--iron-gold-deep)); }

/* The top face of each billet, where the fire actually reaches it. */

#view-iron-center .ic-workshop-ingot-tops {
  fill: none;
  stroke: color-mix(in srgb, var(--iron-gold-bright) 60%, transparent);
  stroke-width: 1.2;
  opacity: calc(.4 + var(--ember) * .3);
}

#view-iron-center .ic-workshop-vice { fill: url(#icWorkshopIron); }

/* ---- The slack tub ------------------------------------------------------ */

#view-iron-center .ic-workshop-tub-body { fill: url(#icWorkshopTub); }

#view-iron-center .ic-workshop-tub-staves {
  fill: none;
  stroke: color-mix(in srgb, #000 44%, var(--shop-timber));
  stroke-width: 1;
  opacity: .8;
}

#view-iron-center .ic-workshop-tub-water { fill: color-mix(in srgb, #0b1519 94%, var(--shop-cool)); }

/* Standing water is never dead water: one slow ring keeps the tub from reading
 * as a black disc, and it is the only cool moving thing in a hot room. */

#view-iron-center .ic-workshop-tub-ripple {
  fill: none;
  stroke: color-mix(in srgb, #fff 44%, var(--shop-cool));
  stroke-width: .9;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: ic-workshop-ripple 5200ms ease-out infinite;
}

@keyframes ic-workshop-ripple {
  0%   { opacity: 0; transform: scale(.2); }
  18%  { opacity: .3; }
  100% { opacity: 0; transform: scale(1.7); }
}

#view-iron-center .ic-workshop-tub-hoops {
  fill: none;
  stroke: url(#icWorkshopIron);
  stroke-width: 2.6;
}

#view-iron-center .ic-workshop-tub-hoops.is-lit {
  stroke: color-mix(in srgb, #fff 36%, var(--shop-cool));
  stroke-width: 1;
  opacity: .35;
}

#view-iron-center .ic-workshop-tub-steam {
  fill: none;
  stroke: color-mix(in srgb, #fff 70%, var(--shop-cool));
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: .12;
}

/* ---- The tool wall ------------------------------------------------------
 * Objects hung on stone, not pictograms stencilled onto it. Three things do
 * that: a soft shadow cast onto the wall behind each tool, a lit arris on the
 * side turned toward the window, and — for the ring — a lit crown and a dark
 * underside instead of one even stroke, so it reads as round bar bent round
 * rather than as a drawn circle. */

#view-iron-center .ic-workshop-tool-wash {
  fill: color-mix(in srgb, #fff 7%, transparent);
  filter: blur(20px);
}

#view-iron-center .ic-workshop-tool-shadow {
  fill: none;
  opacity: .6;
  stroke: color-mix(in srgb, #000 40%, transparent);
  stroke-width: 4.5;
  stroke-linecap: round;
  filter: blur(3.5px);
  transform: translate(2px, 3px);
}

#view-iron-center .ic-workshop-tool-shadow circle { fill: none; }

#view-iron-center .ic-workshop-rack,
#view-iron-center .ic-workshop-rack-pegs,
#view-iron-center .ic-workshop-wall-tongs,
#view-iron-center .ic-workshop-horseshoe {
  fill: none;
  stroke: color-mix(in srgb, #fff 52%, var(--shop-iron));
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#view-iron-center .ic-workshop-rack { stroke-width: 4; stroke: url(#icWorkshopIron); }

#view-iron-center .ic-workshop-rack-lit,
#view-iron-center .ic-workshop-wall-hammer-lit {
  fill: none;
  stroke: color-mix(in srgb, #fff 40%, var(--shop-cool));
  stroke-width: 1.2;
  stroke-linecap: round;
  opacity: .4;
}

#view-iron-center .ic-workshop-horseshoe-nails {
  fill: none;
  stroke: color-mix(in srgb, #000 70%, var(--shop-iron));
  stroke-width: 2.2;
  stroke-linecap: round;
}

/* The ring: round bar, so a crown that takes the window and an underside that
 * does not. Drawn as three arcs on one circle, which is also why it survives
 * the back plane's defocus — a hairline annulus would not. */

#view-iron-center .ic-workshop-ring-body {
  fill: none;
  stroke: color-mix(in srgb, #fff 30%, var(--shop-iron));
  stroke-width: 6;
}

#view-iron-center .ic-workshop-ring-lit {
  fill: none;
  stroke: color-mix(in srgb, #fff 66%, var(--shop-iron));
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: .7;
}

#view-iron-center .ic-workshop-ring-dark {
  fill: none;
  stroke: color-mix(in srgb, #000 62%, var(--shop-iron));
  stroke-width: 2.4;
  stroke-linecap: round;
}

#view-iron-center .ic-workshop-ring-hook {
  fill: none;
  stroke: color-mix(in srgb, #fff 22%, var(--shop-iron));
  stroke-width: 2.2;
  stroke-linecap: round;
}

#view-iron-center .ic-workshop-tongs-rivet { fill: color-mix(in srgb, #fff 40%, var(--shop-iron)); }

#view-iron-center .ic-workshop-wall-tongs.is-jaws { stroke-width: 2.4; }

#view-iron-center .ic-workshop-wall-haft { fill: color-mix(in srgb, #fff 12%, var(--shop-timber)); }

/* The hammer is a block of iron on this wall, not an outline of one. */

#view-iron-center .ic-workshop-wall-pein { fill: color-mix(in srgb, #fff 18%, var(--shop-iron)); }

#view-iron-center .ic-workshop-wall-eye { fill: color-mix(in srgb, #000 66%, var(--shop-iron)); }

#view-iron-center .ic-workshop-horseshoe-lit {
  fill: none;
  stroke: color-mix(in srgb, #fff 60%, var(--shop-cool));
  stroke-width: 1.2;
  stroke-linecap: round;
  opacity: .38;
}

#view-iron-center .ic-workshop-tongs {
  fill: none;
  stroke: color-mix(in srgb, #000 30%, var(--shop-iron));
  stroke-width: 2.4;
  stroke-linecap: round;
}

#view-iron-center .ic-workshop-wall-hammer {
  fill: color-mix(in srgb, #fff 24%, var(--shop-iron));
  stroke: none;
}

.light-mode #view-iron-center .ic-workshop-rack-pegs,
.light-mode #view-iron-center .ic-workshop-wall-tongs,
.light-mode #view-iron-center .ic-workshop-wall-hammer,
.light-mode #view-iron-center .ic-workshop-ring-body,
.light-mode #view-iron-center .ic-workshop-horseshoe { stroke: color-mix(in srgb, #000 46%, var(--a-lo)); }

#view-iron-center .ic-workshop-tool-rack { opacity: .95; transform-box: fill-box; transform-origin: top center; }

#view-iron-center .ic-workshop-dust {
  fill: color-mix(in srgb, #c9a778 24%, transparent);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

#view-iron-center .ic-hearth-shadow {
  fill: color-mix(in srgb, #000 78%, transparent);
  filter: blur(7px);
}

/* The fire lights the anvil too. Kept low: this is the light in the room
 * reaching the focal object, not an orange filter over the card. */

#view-iron-center .ic-hearth-keylight {
  fill: url(#icWorkshopFirelight);
  mix-blend-mode: screen;
  opacity: calc(.12 + var(--ember) * .14 + var(--heat) * .14);
  transition: opacity 220ms var(--iron-ease);
  pointer-events: none;
}

#view-iron-center .ic-hearth.is-cooled { filter: saturate(.55); }

#view-iron-center .ic-forge-hero.is-cooling .ic-hearth { transition: background 600ms var(--iron-ease); }

/* ---- The roll: a forged reel, not a label that changes its mind ---------
 * Tier plates spin past a machined window and decelerate onto the tier the
 * server already rolled. Same materials as everything else in the room: steel
 * frame, tier ramp, display type. There is no false stop — the result exists
 * before the reel starts, and the deceleration is the whole trick. */

#view-iron-center .ic-hearth-reveal {
  position: absolute;
  left: 50%;
  top: 24%;
  z-index: 3;
  display: none;
  transform: translate(-50%, -50%);
}

#view-iron-center .ic-hearth-reveal.is-live { display: block; }

/* It rises out of the anvil rather than appearing on top of it. Landing a
 * finished plate over a scene that is still moving is what made the roll read
 * as a separate widget dropped onto the artwork. */

#view-iron-center .ic-hearth-reveal.is-live { animation: ic-roll-rise 320ms var(--iron-spring) both; }

@keyframes ic-roll-rise {
  0%   { opacity: 0; transform: translate(-50%, -28%) scale(.86); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* The reel steps aside for the payout instead of being buried by it. */

#view-iron-center .ic-hearth-reveal.is-clearing { animation: ic-roll-clear 300ms var(--iron-ease) both; }

@keyframes ic-roll-clear {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -84%) scale(.9); }
}

#view-iron-center .ic-forge-roll {
  --cell: 40px;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, var(--steel-hi), var(--steel-lo));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #fff 22%, var(--border-strong)),
    0 8px 24px color-mix(in srgb, #000 55%, transparent);
  transition: box-shadow 220ms var(--iron-ease), transform 220ms var(--iron-spring);
}

/* The two caps point at the seated plate — a machined index mark. */

#view-iron-center .ic-roll-cap {
  width: 0;
  height: 0;
  border-block: 6px solid transparent;
  border-left: 9px solid var(--iron-gold);
  filter: drop-shadow(0 0 5px var(--iron-gold-glow));
}

#view-iron-center .ic-roll-cap.is-right { transform: rotate(180deg); }

#view-iron-center .ic-roll-window {
  position: relative;
  width: 168px;
  height: var(--cell);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  box-shadow: inset 0 2px 6px color-mix(in srgb, #000 65%, transparent);
  overflow: hidden;
  /* The plates fade as they leave the window, the way a real reel blurs off. */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 34%, #000 66%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 34%, #000 66%, transparent);
}

#view-iron-center .ic-roll-strip {
  transform: translateY(calc(var(--landing, 0) * var(--cell) * -1));
  transition: transform 1700ms cubic-bezier(.09, .74, .11, 1);
  will-change: transform;
}

#view-iron-center .ic-roll-cell {
  display: grid;
  place-items: center;
  height: var(--cell);
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ---- The reel, cut down to the classic Forge stage ----------------------
 * The classic scene is a 180px art box, and the reel was built for the wide
 * smithy: `.ic-roll-window` asks for a hard 168px inside a `12px 1fr 12px`
 * grid, so in this container the 1fr column was squeezed to ~128px and the
 * window overflowed it — the tier plate spilled out past the machined frame,
 * unmasked and uncropped, which is what made the roll look broken rather than
 * merely early. Fixing it is one rule: give the reel the stage's width and let
 * the window take whatever the column actually is. */

#view-iron-center .ic-forge-hero .ic-forge-roll {
  --cell: 34px;
  width: 176px;
}

#view-iron-center .ic-forge-hero .ic-roll-window { width: auto; }

#view-iron-center .ic-forge-hero .ic-roll-cell { font-size: var(--font-size-sm); }

/* Seated clear of the anvil, in the air the hammer has just vacated. The reel
 * only appears once the swing has finished, so the space above the face is
 * free by then — and the casting stays whole underneath, still lit from the
 * blow that earned the roll. Dropping it over the anvil instead reads as the
 * reel swallowing the artwork. */

#view-iron-center .ic-forge-hero .ic-hearth-reveal { top: 30%; }

#view-iron-center .ic-roll-cell.tier-common { color: var(--tier-common);    background: var(--tier-common-soft); }

#view-iron-center .ic-roll-cell.tier-uncommon { color: var(--tier-uncommon);  background: var(--tier-uncommon-soft); }

#view-iron-center .ic-roll-cell.tier-rare { color: var(--tier-rare);      background: var(--tier-rare-soft); }

#view-iron-center .ic-roll-cell.tier-legendary { color: var(--tier-legendary); background: var(--tier-legendary-soft); }

/* Seated: the frame takes the tier's colour and thunks into place. */

#view-iron-center .ic-forge-roll.is-landed { animation: ic-roll-seat 420ms var(--iron-spring) both; }

@keyframes ic-roll-seat {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.055); }
  100% { transform: scale(1); }
}

#view-iron-center .ic-forge-roll.is-landed.tier-common { box-shadow: inset 0 0 0 1px var(--tier-common),    0 8px 24px color-mix(in srgb, #000 55%, transparent); }

#view-iron-center .ic-forge-roll.is-landed.tier-uncommon { box-shadow: inset 0 0 0 1px var(--tier-uncommon),  0 8px 24px color-mix(in srgb, #000 55%, transparent); }

#view-iron-center .ic-forge-roll.is-landed.tier-rare { box-shadow: inset 0 0 0 1px var(--tier-rare),      0 0 30px var(--tier-rare-soft), 0 8px 24px color-mix(in srgb, #000 55%, transparent); }

#view-iron-center .ic-forge-roll.is-landed.tier-legendary { box-shadow: inset 0 0 0 1px var(--tier-legendary), 0 0 36px var(--tier-legendary-soft), 0 8px 24px color-mix(in srgb, #000 55%, transparent); }

/* ---- Heat console: one physical rail, not a stack of status pills -------- */

#view-iron-center .ic-forge-heat-console {
  display: grid;
  justify-items: center;
  gap: 9px;
  width: min(400px, 100%);
}

#view-iron-center .ic-forge-heat-rail {
  position: relative;
  width: calc(100% - 14px);
  height: 12px;
  border: 1px solid color-mix(in srgb, #fff 10%, var(--border-strong));
  border-radius: 3px;
  background: color-mix(in srgb, #000 56%, var(--bg-input));
  box-shadow: inset 0 2px 5px color-mix(in srgb, #000 70%, transparent);
}

#view-iron-center .ic-forge-heat-rail::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 1px;
  transform: scaleX(var(--heat));
  transform-origin: left center;
  background: linear-gradient(90deg, #6f160d 0%, #d93412 46%, #ff7c24 78%, #fff0b8 100%);
  box-shadow: 0 0 12px color-mix(in srgb, #ff5a1f calc(var(--heat) * 68%), transparent);
  transition: transform 70ms linear;
}

#view-iron-center .ic-forge-heat-mark {
  position: absolute;
  z-index: 1;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: color-mix(in srgb, #fff 28%, transparent);
}

#view-iron-center .ic-forge-heat-mark:nth-child(1) { left: 20%; }

#view-iron-center .ic-forge-heat-mark:nth-child(2) { left: 40%; }

#view-iron-center .ic-forge-heat-mark:nth-child(3) { left: 60%; }

#view-iron-center .ic-forge-heat-mark:nth-child(4) { left: 80%; }

#view-iron-center .ic-forge-heat-target {
  position: absolute;
  z-index: 2;
  right: -7px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid color-mix(in srgb, var(--iron-gold) 68%, var(--border-strong));
  border-radius: 4px;
  background: linear-gradient(145deg, var(--steel-hi), var(--steel-lo));
  box-shadow: 0 3px 8px color-mix(in srgb, #000 55%, transparent);
  color: var(--iron-gold-bright);
  font-size: 8px;
  transform: translateY(-50%) rotate(45deg);
}

#view-iron-center .ic-forge-heat-target i { transform: rotate(-45deg); }

#view-iron-center .ic-forge-hero.is-working .ic-forge-heat-rail { box-shadow: inset 0 2px 5px color-mix(in srgb, #000 70%, transparent), 0 0 14px color-mix(in srgb, #ff5a1f 24%, transparent); }

#view-iron-center .ic-forge-hero.is-final-strike .ic-forge-heat-target { animation: ic-forge-target-hit 560ms var(--iron-spring) 500ms both; }

@keyframes ic-forge-target-hit {
  0% { transform: translateY(-50%) rotate(45deg) scale(1); }
  34% { transform: translateY(-50%) rotate(45deg) scale(1.28); box-shadow: 0 0 22px var(--iron-gold-glow); }
  100% { transform: translateY(-50%) rotate(45deg) scale(1); }
}

#view-iron-center .ic-forge-hold {
  --charge: 0;
  position: relative;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  border: 1px solid color-mix(in srgb, var(--iron-gold) 36%, var(--border-strong));
  border-radius: var(--radius-md);
  background: linear-gradient(165deg, color-mix(in srgb, #fff 5%, var(--bg-tertiary)), color-mix(in srgb, #000 16%, var(--bg-tertiary)));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent), 0 6px 16px color-mix(in srgb, #000 32%, transparent);
  color: var(--text-primary);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: box-shadow var(--transition-fast), color var(--transition-fast), background 120ms linear, transform var(--transition-fast);
}

#view-iron-center .ic-forge-hold:hover:not(:disabled) { transform: translateY(-1px); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent), 0 8px 20px color-mix(in srgb, #000 40%, transparent); }

#view-iron-center .ic-forge-hold-fill { display: none; }

#view-iron-center .ic-forge-hold-copy {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  letter-spacing: .06em;
}

#view-iron-center .ic-forge-hold-ready { display: none; }

#view-iron-center .ic-forge-hold.is-ready {
  border-color: #ffad4d;
  background: linear-gradient(160deg, #ffb94f, #b94013);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 42%, transparent), 0 0 26px color-mix(in srgb, #ff681f 48%, transparent);
  color: #1d0c05;
}

#view-iron-center .ic-forge-hold.is-ready .ic-forge-hold-idle { display: none; }

#view-iron-center .ic-forge-hold.is-ready .ic-forge-hold-ready { display: inline; }

#view-iron-center .ic-forge-hold.is-ready .ic-forge-hold-copy i { animation: ic-forge-ready-hammer 620ms ease-in-out infinite; }

@keyframes ic-forge-ready-hammer {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
}

#view-iron-center .ic-forge-hold:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--iron-gold), var(--focus-ring); }

#view-iron-center .ic-forge-hold-hint {
  margin: 0;
  max-width: 48ch;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--leading-snug);
  text-align: center;
}

/* ---- The ledger: the strikes behind you --------------------------------- */

#view-iron-center .ic-forge-ledger {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  padding: 4px 10px 0;
  border-bottom: 2px solid var(--border-strong);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--bg-input) 80%, transparent));
}

#view-iron-center .ic-forge-ledger-label {
  flex: 1 0 100%;
  color: var(--text-muted);
  font-size: 8px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

#view-iron-center .ic-forge-token {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 34px;
  min-height: 30px;
  padding: 4px 8px 6px;
  border-radius: var(--radius-sm) var(--radius-sm) 2px 2px;
  background: linear-gradient(160deg, var(--steel-hi), var(--steel-mid));
  box-shadow: inset 0 0 0 1px var(--border-strong);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

#view-iron-center .ic-forge-token::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: -2px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

#view-iron-center .ic-forge-token .iron-diamond,
#view-iron-center .ic-forge-token .aura-emblem { width: 1.05em; height: 1.05em; }

#view-iron-center .ic-forge-token.tier-common { color: var(--tier-common); }

#view-iron-center .ic-forge-token.tier-uncommon { color: var(--tier-uncommon); }

#view-iron-center .ic-forge-token.tier-rare { color: var(--tier-rare); }

#view-iron-center .ic-forge-token.tier-legendary { color: var(--tier-legendary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tier-legendary) 55%, transparent), 0 0 12px var(--tier-legendary-soft); }

#view-iron-center .ic-forge-token b { color: var(--text-primary); }

#view-iron-center .ic-forge-token.is-latest { box-shadow: inset 0 0 0 1px currentColor, 0 0 10px color-mix(in srgb, currentColor 30%, transparent); }

/* ---- Stats that show progress, not trivia ------------------------------- */

#view-iron-center .ic-forge-stat-num {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}

#view-iron-center .ic-forge-stat-track {
  width: 100%;
  height: 4px;
  margin-top: 6px;
  border-radius: var(--radius-pill);
  background: var(--bg-input);
  box-shadow: inset 0 0 0 1px var(--border-color);
  overflow: hidden;
}

#view-iron-center .ic-forge-stat-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--iron-gold-deep), var(--iron-gold));
}

#view-iron-center .ic-forge-stat-note {
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: .04em;
}

#view-iron-center .ic-forge-stat-note i { color: var(--streak-tier, var(--streak-flame)); }

#view-iron-center .ic-forge-stat-note .ic-forge-tier-badge { font-size: 9px; }

/* ---- Streak chip + admin affordances ------------------------------------ */

#view-iron-center .ic-forge-streak-bonus {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 2px 0;
  border-top: 1px solid color-mix(in srgb, var(--streak-tier, var(--streak-flame)) 30%, transparent);
  color: color-mix(in srgb, var(--streak-tier, var(--streak-flame)) 76%, var(--text-secondary));
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

#view-iron-center .ic-forge-streak-bonus i { color: var(--streak-tier, var(--streak-flame)); filter: drop-shadow(0 0 5px var(--streak-flame-soft)); }

#view-iron-center .ic-forge-admin-btn,
#view-iron-center .ic-forge-admin-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  cursor: pointer;
}

#view-iron-center .ic-forge-admin-state { cursor: default; }

@media (max-width: 520px) {
  #view-iron-center .ic-hearth-art { width: 100%; }

  #view-iron-center .ic-forge-heat-console { width: 100%; }

  #view-iron-center .ic-forge-hold { min-width: 0; width: 100%; }
}

/* =========================================================================
 * DAILY TRIVIA — a run you can read at a glance, and answers you can hit.
 *
 * The old header crammed dots, a tick count and a difficulty-plus-reward chip
 * onto one muted line, and the answers were a two-column grid of plain
 * buttons that wrapped badly. Now: a rail that remembers how each question
 * went, one keyed answer per row, and a result that shows the whole run.
 * ========================================================================= */

#view-iron-center #ic-game-trivia { gap: 12px; }

/* ---- The run rail ------------------------------------------------------- */

#view-iron-center .ic-trivia-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#view-iron-center .ic-trivia-step {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  box-shadow: inset 0 0 0 1px var(--border-color);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  transition: background var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}

#view-iron-center .ic-trivia-step.is-right {
  background: var(--iron-gold-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--iron-gold) 50%, transparent), 0 0 10px var(--iron-gold-glow);
  color: var(--arcade-gold-ink);
}

#view-iron-center .ic-trivia-step.is-wrong {
  background: color-mix(in srgb, var(--color-danger) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-danger) 42%, transparent);
  color: var(--color-danger);
}

#view-iron-center .ic-trivia-step.is-answered {
  background: var(--bg-tertiary);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  color: var(--text-secondary);
}

#view-iron-center .ic-trivia-step.is-live {
  background: var(--bg-tertiary);
  box-shadow: inset 0 0 0 1px var(--text-secondary), 0 0 0 3px color-mix(in srgb, var(--text-primary) 12%, transparent);
  color: var(--text-primary);
}

/* ---- The question ------------------------------------------------------- */

#view-iron-center .ic-trivia-ask {
  display: grid;
  gap: var(--space-sm);
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  box-shadow: inset 0 1px 0 var(--border-highlight);
}

#view-iron-center .ic-trivia-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
}

#view-iron-center .ic-trivia-banked {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
}

#view-iron-center .ic-trivia-question {
  min-height: 0;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-snug);
}

/* ---- The answers: one per row, each on its own key ---------------------- */

#view-iron-center .ic-trivia-options { display: grid; grid-template-columns: 1fr; gap: 8px; }

#view-iron-center .ic-trivia-option {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  text-align: left;
  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

/* The key cap — a struck steel tile, the same material as everything else. */

#view-iron-center .ic-trivia-key {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: linear-gradient(160deg, var(--steel-hi), var(--steel-mid));
  box-shadow: inset 0 0 0 1px var(--border-strong), 0 1px 2px color-mix(in srgb, #000 35%, transparent);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
}

#view-iron-center .ic-trivia-verdict { justify-self: end; font-size: 13px; opacity: 0; }

@media (hover: hover) {
  #view-iron-center .ic-trivia-option:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--iron-gold) 45%, var(--border-color));
    background: var(--iron-gold-faint);
    transform: translateY(-1px);
  }

  #view-iron-center .ic-trivia-option:hover:not(:disabled) .ic-trivia-key { box-shadow: inset 0 0 0 1px var(--iron-gold), 0 1px 2px color-mix(in srgb, #000 35%, transparent); }
}

#view-iron-center .ic-trivia-option:focus-visible { outline: none; box-shadow: var(--focus-ring); }

#view-iron-center .ic-trivia-option.is-correct {
  border-color: color-mix(in srgb, var(--iron-gold) 60%, transparent);
  background: var(--iron-gold-soft);
}

#view-iron-center .ic-trivia-option.is-correct .ic-trivia-key { background: linear-gradient(160deg, var(--iron-gold-bright), var(--iron-gold-deep)); color: var(--iron-on-gold); }

#view-iron-center .ic-trivia-option.is-correct .ic-trivia-verdict { opacity: 1; color: var(--arcade-gold-ink); }

#view-iron-center .ic-trivia-option.is-correct .ic-trivia-verdict::before { content: "\f00c"; }

#view-iron-center .ic-trivia-option.is-wrong {
  border-color: color-mix(in srgb, var(--color-danger) 55%, transparent);
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
}

#view-iron-center .ic-trivia-option.is-wrong .ic-trivia-verdict { opacity: 1; color: var(--color-danger); }

#view-iron-center .ic-trivia-option.is-wrong .ic-trivia-verdict::before { content: "\f00d"; }

#view-iron-center .ic-trivia-option.is-correct { animation: ic-trivia-land 520ms var(--iron-spring) both; }

@keyframes ic-trivia-land {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.028); }
  100% { transform: scale(1); }
}

/* ---- The finished run --------------------------------------------------- */

#view-iron-center .ic-trivia-result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}

#view-iron-center .ic-trivia-result.is-perfect {
  border-color: color-mix(in srgb, var(--aura-core) 45%, var(--border-color));
  background: color-mix(in srgb, var(--aura-core) 8%, transparent);
}

/* A dial that fills with the run: score as an arc, not just a number. */

#view-iron-center .ic-trivia-dial {
  position: relative;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  border-radius: var(--radius-round);
  background: conic-gradient(var(--iron-gold) calc(var(--filled, 0) * 360deg), var(--bg-tertiary) 0);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}

#view-iron-center .ic-trivia-dial::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  background: var(--bg-secondary);
  box-shadow: inset 0 0 0 1px var(--border-color);
}

#view-iron-center .ic-trivia-dial b,
#view-iron-center .ic-trivia-dial small { position: relative; z-index: 1; line-height: 1; }

#view-iron-center .ic-trivia-dial b { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); }

#view-iron-center .ic-trivia-dial small { color: var(--text-muted); font-size: 10px; }

#view-iron-center .ic-trivia-result.is-perfect .ic-trivia-dial { background: conic-gradient(var(--aura-core) 360deg, var(--aura-core) 0); }

#view-iron-center .ic-trivia-result.is-perfect .ic-trivia-dial::after { background: color-mix(in srgb, var(--aura-core) 8%, var(--bg-secondary)); }

#view-iron-center .ic-trivia-result-copy { display: grid; gap: 8px; min-width: 0; flex: 1 1 120px; }

/* The recap rail runs tighter than the live one — it is a summary, not a
 * target, and it has to share the row with the dial and the payout. */

#view-iron-center .ic-trivia-result .ic-trivia-step { width: 22px; height: 22px; font-size: 10px; }

#view-iron-center .ic-trivia-result-copy b {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

#view-iron-center .ic-trivia-result .ic-trivia-summary-reward { flex: 0 0 auto; }

@media (max-width: 520px) {
  /* The gauge narrows; the forge keeps the room it needs to read. */

  #view-iron-center .ic-tempo-frame { grid-template-columns: minmax(0, 1fr) 42px; }

  #view-iron-center .ic-tempo-strike { width: 36px; }

  #view-iron-center .ic-trivia-step { width: 25px; height: 25px; }

  /* The rig keeps its proportions; everything around it tightens up. */

  #view-iron-center .ic-scales-rig { width: min(260px, 100%); }

  /* Shorter stage, shorter blast — the shards still die inside the frame. */

  #view-iron-center .ic-burst { --burst-reach: .8; }

  #view-iron-center .ic-burst-flash { width: 260px; height: 260px; margin: -130px 0 0 -130px; }

  #view-iron-center .ic-scales-cap { min-width: 40px; padding: 4px 6px 5px; }

  #view-iron-center .ic-scales-cap b { font-size: var(--font-size-sm); }

  #view-iron-center .ic-scales-range { height: 26px; }

  #view-iron-center .ic-scales-weight { width: 36px; }

  #view-iron-center .ic-scales-stats { justify-content: flex-start; }

  #view-iron-center .ic-scales-count { flex: 1 0 100%; order: 3; }
}

@media (max-width: 360px) {
  #view-iron-center .ic-scales-input { flex-wrap: wrap; }

  #view-iron-center .ic-scales-input .ic-game-btn { flex: 1 0 100%; }
}

@media (prefers-reduced-motion: reduce) {
  #view-iron-center .ic-starpath-comet,
#view-iron-center .ic-starpath-ufo,
#view-iron-center .ic-star-ring,
#view-iron-center .ic-daily-chest.is-ready .ic-chest-padlock,
#view-iron-center .ic-tempo-rig.is-striking .ic-tempo-sparks i,
#view-iron-center .ic-scales-beam.is-idle .ic-scales-arm-rig,
#view-iron-center .ic-scales-beam.is-idle .ic-scales-pan,
#view-iron-center .ic-scales-beam.is-settling .ic-scales-arm-rig,
#view-iron-center .ic-scales-beam.is-settling .ic-scales-pan,
#view-iron-center .ic-scales-beam.is-won .ic-scales-gem,
#view-iron-center .ic-scales-range-window::after,
#view-iron-center .ic-scales-rack.is-fresh .ic-scales-weight:last-child,
/* The whole IRON boom,
in every game,
down to the last shard. */
  #view-iron-center .ic-game-card.is-boom,
#view-iron-center .ic-game-card.is-boom .ic-trivia-summary-reward,
#view-iron-center #ic-game-scales.is-boom .ic-scales-arm-rig,
#view-iron-center #ic-game-scales.is-boom .ic-scales-pan,
#view-iron-center #ic-game-scales.is-boom .ic-scales-gem,
#view-iron-center #ic-game-scales.is-boom .ic-scales-weight.is-correct,
#view-iron-center .ic-burst-flash,
#view-iron-center .ic-burst-ring,
#view-iron-center .ic-burst-shard,
/* The Forge keeps the gate but removes every ambient,
#view-iron-center .ic-forge-roll.is-landed,
#view-iron-center .ic-forge-hold.is-ready .ic-forge-hold-copy i,
#view-iron-center .ic-hearth-reveal.is-clearing,
#view-iron-center .ic-forge-spray i,
#view-iron-center .ic-forge-payout,
#view-iron-center .ic-forge-hero.is-boom .ic-hearth,
#view-iron-center .ic-anvil-embers circle,
#view-iron-center .ic-anvil-sheen,
#view-iron-center .ic-workshop-fire,
#view-iron-center .ic-workshop-embers circle,
#view-iron-center .ic-forge-hero.is-final-strike .ic-hearth-art,
#view-iron-center .ic-forge-hero.is-final-strike .ic-workshop-tool-rack,
#view-iron-center .ic-forge-hero.is-final-strike .ic-workshop-dust,
#view-iron-center .ic-forge-hero.is-final-strike .ic-forge-heat-target,
#view-iron-center .ic-tempo-rig.is-striking .ic-anvil-hammer,
#view-iron-center .ic-forge-hero.striking .ic-anvil-hammer,
#view-iron-center .ic-forge-hero.is-final-strike .ic-anvil-hammer,
#view-iron-center .ic-forge-hero.is-final-strike .ic-anvil,
#view-iron-center .ic-anvil-final-impact > *,
#view-iron-center .ic-tempo-rig.is-striking .ic-anvil,
#view-iron-center .ic-anvil-impact circle,
#view-iron-center .ic-forge-hero.is-working .ic-forge-hammer-wrap,
#view-iron-center .ic-forge-hero.is-working .ic-forge-anvil-wrap,
#view-iron-center .ic-forge-hero.is-working .ic-forge-sparks span,
#view-iron-center .ic-forge-hero.is-final-strike .ic-forge-hammer-wrap,
#view-iron-center .ic-forge-hero.is-final-strike .ic-forge-anvil-wrap,
#view-iron-center .ic-forge-hero.is-final-strike .ic-forge-sparks span,
#view-iron-center .ic-forge-hero.is-final-strike .ic-forge-scene::before,
#view-iron-center .ic-forge-hero.is-final-strike .ic-forge-anvil path,
#view-iron-center .ic-forge-hero.is-final-strike .ic-forge-glow,
#view-iron-center .ic-forge-hero.is-working .ic-anvil-hammer,
#view-iron-center .ic-forge-hero.is-working .ic-anvil,
#view-iron-center .ic-forge-hero.is-working .ic-stock-heat,
#view-iron-center .ic-forge-hero.is-working .ic-forge-piece,
#view-iron-center .ic-forge-hero.is-shaped .ic-forge-piece,
#view-iron-center .ic-workshop-fire-lick,
#view-iron-center .ic-workshop-tub-ripple,
#view-iron-center .ic-forge-hero.striking .ic-anvil { animation: none !important; }

  #view-iron-center .ic-roll-strip { transition: none !important; }

  #view-iron-center .ic-scales-arm-rig,
  #view-iron-center .ic-scales-pan,
  #view-iron-center .ic-scales-range-window { transition: none; }
}