/* ==========================================================================
   IRONITT v2 — Iron Center
   --------------------------------------------------------------------------
   The whole Iron Center in one file: the rooms (Home, Play, Forge, Arena,
   Store), the gift inbox and the claim moments. The first three parts came
   over from the legacy sheets in their old cascade order (style.css, then
   responsive.css, then iron-center.css); the v2 slices follow and win.
   Infinite motion here runs only while something is happening (a forge
   working, a piece being struck), never on a still page.
   ========================================================================== */

/* ---- Rooms: base rules (were in style.css) ------------------------------ */
.ic-back-btn {
  display: none;
}

.iron-center-view {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-sm) 0 var(--space-2xl);
}

.ic-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border-color);
}

.ic-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  line-height: 1.1;
}

.ic-title-sub {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: 4px;
}

.ic-balance-pill {
  /* Gamified counter badge: tinted face + coloured ring per currency. */
  --pill-tint: var(--iron-gold);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  background: color-mix(in srgb, var(--pill-tint) 12%, var(--bg-secondary));
  border: 1px solid color-mix(in srgb, var(--pill-tint) 34%, transparent);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--pill-tint);
  box-shadow: var(--shadow-sm), inset 0 0 12px color-mix(in srgb, var(--pill-tint) 10%, transparent);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.ic-balance-pill .iron-diamond {
  color: var(--pill-tint);
  display: inline-flex;
  align-items: 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);
  letter-spacing: 0.02em;
  color: var(--aura-bright);
  background: color-mix(in srgb, var(--aura-core) 26%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aura-core) 45%, transparent);
}

.ic-sub-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  /* Own stacking context (like .nav-island's z-index) so the will-change
     indicator's composited layer stays behind the tab text instead of
     painting over it. */
  isolation: isolate;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  padding: 5px;
  box-shadow: var(--shadow-island), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  margin-bottom: var(--space-lg);
}

.ic-sub-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  transition: color var(--transition-fast), background-color var(--transition-fast);
  white-space: nowrap;
  flex: 0 0 auto;
  z-index: 1;
  user-select: none;
}

.ic-sub-tab i {
  font-size: 15px;
}

.ic-tab-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 99px;
  background: var(--accent-color);
  color: var(--bg-primary);
  font-size: 9.5px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.ic-tab-hint--dot { min-width: 7px; width: 7px; height: 7px; padding: 0; }

.ic-sub-tab:not(.active):hover {
  color: var(--text-primary);
  background-color: var(--border-color);
}

.ic-sub-tab.active {
  color: var(--accent-color);
  cursor: default;
  pointer-events: none;
  font-weight: var(--font-weight-semibold);
  /* Give the active tab its own compositing layer so its icon + label paint
     ABOVE the indicator. Inside the mobile overflow-x:auto scroll container
     the indicator's transform layer otherwise covers the text on iOS, where
     plain z-index isn't honored across composited layers. */
  transform: translateZ(0);
}

.ic-indicator {
  position: absolute;
  top: 5px;
  left: 0;
  height: calc(100% - 10px);
  background: var(--bg-hover);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  will-change: transform, width;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

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

.ic-room-nav.is-empty { display: none; }

.ic-room-nav .ic-indicator {
  top: 3px;
  height: calc(100% - 6px);
  background: var(--accent-subtle);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-color) 22%, transparent);
}

.ic-home-title { margin-top: 8px; font: 700 1.35rem/1.2 var(--font-display); color: var(--text-primary); }

.ic-home-identity { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }

.ic-home-chip {
  --chip-accent: var(--accent-color);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 3px 10px;
  border: 1px solid color-mix(in srgb, var(--chip-accent) 32%, var(--border-color));
  border-radius: 99px;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--chip-accent) 9%, var(--bg-tertiary));
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.ic-home-chip:hover { color: var(--text-primary); border-color: color-mix(in srgb, var(--chip-accent) 55%, var(--border-color)); }

.ic-home-chip i { color: var(--chip-accent); }

.ic-home-chip[class*="streak-t"] { --chip-accent: var(--streak-tier, var(--iron-gold)); }

.ic-home-avatar { width:58px; height:58px; display:grid; place-items:center; overflow:hidden; border-radius:18px; border:1px solid color-mix(in srgb,var(--accent-color) 45%,var(--border-color)); background:linear-gradient(145deg,color-mix(in srgb,var(--accent-color) 28%,var(--bg-tertiary)),var(--bg-tertiary)); box-shadow:0 8px 24px color-mix(in srgb,var(--accent-color) 15%,transparent); color:var(--text-primary); font:800 1.2rem var(--font-display); }

.ic-home-avatar img { width:100%; height:100%; object-fit:cover; }

.ic-home-intro { min-width:0; }

.ic-home-intro .ic-home-title { margin-top:5px; font-size:1.45rem; }

@media (max-width:560px) {
  .ic-home-avatar { width:48px; height:48px; border-radius:15px; }

  .ic-home-intro .ic-home-title { font-size:1.2rem; }
}

.ic-card-eyebrow { color:var(--text-muted); font-size:var(--font-size-xs); font-weight:var(--font-weight-bold); letter-spacing:.09em; text-transform:uppercase; }

.ic-path-rest { display:flex; align-items:center; gap:var(--space-md); padding:var(--space-lg); border:1px dashed var(--border-strong); border-radius:var(--radius-lg); background:linear-gradient(145deg,color-mix(in srgb,var(--aura-core) 6%,var(--bg-tertiary)),var(--bg-tertiary)); }

.ic-path-rest-icon { flex:none; width:44px; height:44px; display:grid; place-items:center; border-radius:var(--radius-md); color:var(--aura-core); background:color-mix(in srgb,var(--aura-core) 12%,transparent); border:1px solid color-mix(in srgb,var(--aura-core) 30%,transparent); font-size:18px; }

.ic-path-bar { display:flex; align-items:center; gap:10px; }

.ic-path-stations { list-style:none; display:grid; grid-template-columns:repeat(var(--n,4),minmax(0,1fr)); gap:var(--space-sm); margin:var(--space-md) 0 0; padding:0; }

@media (max-width:640px) {
  .ic-path-stations { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

.iron-badge--foundry { --ib-size:60px; --ib-frame:var(--aura-core); --ib-frame-soft:var(--aura-soft); }

.iron-badge--foundry .iron-badge__value { color:var(--aura-bright); }

.iron-badge--foundry:not(.is-earned) { --ib-frame:var(--text-secondary); --ib-frame-soft:rgba(255,255,255,.06); }

.iron-badge--foundry:not(.is-earned)::before { animation:none; opacity:.12; }

.iron-badge--foundry:not(.is-earned) .iron-badge__value { color:var(--text-secondary); }

.ic-door-icon { position:relative; width:44px; height:44px; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--door) 32%,var(--border-strong)); border-radius:var(--radius-md); background:color-mix(in srgb,var(--door) 13%,var(--bg-tertiary)); color:var(--door); font-size:17px; transition:box-shadow var(--transition-fast); }

.ic-together { margin:0 0 var(--space-md); }

.ic-together-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-sm); }

.ic-together-card { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; gap:var(--space-md); padding:var(--space-md); border:1px solid var(--border-color); border-radius:var(--radius-lg); background:var(--bg-secondary); }

.ic-together-icon { width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--border-strong); border-radius:var(--radius-md); background:var(--bg-tertiary); color:var(--color-success); }

.ic-together-body { min-width:0; }

.ic-together-body h3 { margin:2px 0; color:var(--text-primary); font:var(--font-weight-bold) var(--font-size-sm)/var(--leading-tight) var(--font-display); }

.ic-together-body p { margin:0; color:var(--text-secondary); font-size:var(--font-size-xs); line-height:var(--leading-snug); }

.ic-together-progress { height:6px; margin-top:var(--space-sm); overflow:hidden; border-radius:var(--radius-pill); background:var(--bg-tertiary); }

.ic-together-progress span { display:block; height:100%; border-radius:inherit; background:var(--color-success); }

.ic-together-meta { display:flex; justify-content:space-between; gap:var(--space-sm); margin-top:var(--space-xs); color:var(--text-muted); font-size:var(--font-size-xs); }

.ic-together-claim { grid-column:1/-1; min-height:38px; display:inline-flex; align-items:center; justify-content:center; gap:var(--space-xs); border:1px solid var(--iron-gold); border-radius:var(--radius-sm); background:var(--iron-gold); color:var(--iron-on-gold); font-weight:var(--font-weight-bold); cursor:pointer; }

.ic-together-claim:hover { background:var(--iron-gold-bright); }

.ic-together-done { grid-column:1/-1; display:inline-flex; align-items:center; gap:var(--space-xs); color:var(--color-success); font-size:var(--font-size-xs); font-weight:var(--font-weight-bold); }

.ic-shop-item { position:relative; }

.ic-shop-wish { position:absolute; top:9px; right:9px; z-index:4; width:30px; height:30px; display:grid; place-items:center; border:1px solid var(--border-color); border-radius:50%; background:color-mix(in srgb,var(--bg-secondary) 88%,transparent); color:var(--text-muted); backdrop-filter:blur(8px); cursor:pointer; }

.ic-shop-wish:hover,
.ic-shop-wish.is-wished { color:#ff6b91; border-color:color-mix(in srgb,#ff6b91 48%,var(--border-color)); background:color-mix(in srgb,#ff6b91 12%,var(--bg-secondary)); }

.ic-challenges { margin-top:18px; }

.ic-challenge-create { display:flex; gap:8px; margin:10px 0; }

.ic-challenge-create select { min-width:180px; flex:1; padding:9px 11px; border:1px solid var(--border-color); border-radius:11px; background:var(--bg-secondary); color:var(--text-primary); }

.ic-challenge-create button,
.ic-challenge-row button { padding:0 13px; border:1px solid color-mix(in srgb,var(--accent-color) 40%,var(--border-color)); border-radius:11px; background:color-mix(in srgb,var(--accent-color) 11%,var(--bg-tertiary)); color:var(--text-primary); font-weight:700; cursor:pointer; }

.ic-challenge-list { display:grid; gap:7px; }

.ic-challenge-row { display:flex; align-items:center; gap:10px; min-height:58px; padding:10px 12px; border:1px solid var(--border-color); border-radius:14px; background:var(--bg-secondary); }

.ic-challenge-row > i { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:var(--bg-tertiary); color:var(--accent-color); }

.ic-challenge-row > span { display:grid; min-width:0; flex:1; }

.ic-challenge-row strong { color:var(--text-primary); }

.ic-challenge-row small { color:var(--text-muted); }

.ic-challenge-row b { color:var(--text-primary); font:800 1rem var(--font-display); }

.ic-challenge-row.is-complete { border-color:color-mix(in srgb,var(--success) 28%,var(--border-color)); }

.ic-challenge-empty { padding:16px; border:1px dashed var(--border-color); border-radius:14px; color:var(--text-muted); text-align:center; }

.ic-recognition { margin-top:20px; }

.ic-recognition-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }

.ic-recognition-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:10px; padding:11px 12px; border:1px solid var(--border-color); border-radius:14px; background:var(--bg-secondary); }

.ic-recognition-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:color-mix(in srgb,var(--accent-color) 10%,var(--bg-tertiary)); color:var(--accent-color); }

.ic-recognition-card > span { display:grid; min-width:0; }

.ic-recognition-card > span small,
.ic-recognition-card > div small { color:var(--text-muted); font-size:8px; text-transform:uppercase; letter-spacing:.05em; }

.ic-recognition-card > span strong { overflow:hidden; color:var(--text-primary); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }

.ic-recognition-card > div:not(.ic-recognition-icon) { display:grid; min-width:44px; text-align:center; }

.ic-recognition-card b { color:var(--text-primary); font-size:12px; }

@media(max-width:900px) {
  .ic-together-grid { grid-template-columns:1fr; }
}

@media(max-width:560px) {
  .ic-recognition-grid { grid-template-columns:1fr; }

  .ic-challenge-row { flex-wrap:wrap; }

  .ic-challenge-row button { min-height:32px; }
}

.ic-home-avatar { border-color:var(--border-strong); border-radius:12px; background:var(--bg-tertiary); box-shadow:none; }

.ic-back-btn.is-home { display:none!important; }

.ic-sub-tab:focus-visible,
.ic-back-btn:focus-visible,
.ic-together-claim:focus-visible { outline:none; box-shadow:var(--focus-ring); }

@media (max-width:560px) {
  .ic-together-claim { width:100%; }
}

@media (prefers-reduced-motion:reduce) {
  .ic-together * { animation:none!important; transition:none!important; }
}

.ic-home-avatar { position:relative; }

.ic-home-avatar > span { position:relative; z-index:0; }

.ic-home-avatar > img { position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; background:var(--bg-tertiary); }

@media(max-width:768px) {
  .ic-header { align-items:stretch; }

  .ic-balance-pill { min-width:0; padding:8px; font-size:11px; white-space:nowrap; }
}

.iron-panel {
  display: none;
}

.iron-panel.active {
  display: block;
  animation: panelReveal var(--transition-normal) ease both;
}

.iron-claim-pop {
  position: fixed;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 4000;
}

.iron-claim-pop-card {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translate(-50%, 0) scale(0.3);
  transform-origin: 50% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 16px 26px 14px;
  border-radius: var(--radius-lg);
  background: var(--bg-elevated, var(--bg-secondary));
  border: 2px solid var(--color-warning);
  color: var(--color-warning);
  white-space: nowrap;
  opacity: 0;
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--color-warning) 16%, transparent),
    0 18px 50px color-mix(in srgb, var(--color-warning) 38%, transparent),
    0 6px 18px rgba(0, 0, 0, 0.28);
  animation: iron-claim-pop-rise 2200ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.iron-claim-pop-diamond .iron-diamond {
  color: var(--color-warning);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--color-warning) 70%, transparent));
}

.iron-claim-pop-diamond .iron-diamond svg {
  width: 34px;
  height: 34px;
}

.iron-claim-pop-amount {
  font-weight: var(--font-weight-bold);
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 10px color-mix(in srgb, var(--color-warning) 45%, transparent);
}

.iron-claim-pop-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.85;
}

.iron-claim-pop-ring {
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid var(--color-warning);
  transform: translate(-50%, 0) scale(0.3);
  opacity: 0;
  animation: iron-claim-pop-ring 1000ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.iron-claim-pop-ring--late {
  animation-delay: 160ms;
  border-color: color-mix(in srgb, var(--color-warning) 60%, transparent);
}

.iron-claim-pop-sparks {
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 0;
  height: 0;
}

.iron-claim-pop-spark {
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--color-warning);
  box-shadow: 0 0 12px color-mix(in srgb, var(--color-warning) 80%, transparent);
  opacity: 0;
  transform: rotate(var(--a)) translateX(0);
  animation: iron-claim-pop-spark 950ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  animation-delay: var(--delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .iron-claim-pop-card {
    animation-duration: 900ms;
    animation-timing-function: ease-out;
  }

  .iron-claim-pop-ring,
.iron-claim-pop-spark { display: none; }
}

.ic-featured {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
}

.ic-featured-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ic-featured-tag {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--accent-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ic-featured-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.ic-featured-desc {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  line-height: 1.5;
}

.ic-featured-reward {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-warning);
  margin-top: 4px;
}

.ic-featured-reward .iron-diamond {
  color: var(--color-warning);
  display: inline-flex;
  align-items: center;
}

.ic-featured-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-color);
  font-size: 22px;
  flex-shrink: 0;
}

.ic-shop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}

.ic-shop-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  /* Own stacking context (like .nav-island's z-index) so the will-change
     indicator's composited layer stays behind the tab text instead of
     painting over it. */
  isolation: isolate;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  padding: 5px;
  box-shadow: var(--shadow-island), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.ic-shop-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  transition: color var(--transition-fast), background-color var(--transition-fast);
  white-space: nowrap;
  z-index: 1;
  user-select: none;
}

.ic-shop-tab i {
  font-size: 13px;
}

.ic-shop-tab:not(.active):hover {
  color: var(--text-primary);
  background-color: var(--border-color);
}

.ic-shop-tab.active {
  color: var(--accent-color);
  cursor: default;
  pointer-events: none;
  font-weight: var(--font-weight-semibold);
  /* Own compositing layer so the active label paints above the indicator
     inside the mobile scroll container (see .ic-sub-tab.active). */
  transform: translateZ(0);
}

.ic-shop-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.ic-shop-owned-count {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.ic-shop-balance {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-warning);
}

.ic-shop-balance .iron-diamond {
  color: var(--color-warning);
  display: inline-flex;
  align-items: center;
}

.ic-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md);
}

.ic-shop-item {
  --shop-rarity: var(--tier-common);
  position: relative;
  background: var(--bg-primary);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-top: 2px solid color-mix(in srgb, var(--shop-rarity) 60%, var(--border-color));
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 8px 20px rgba(0, 0, 0, 0.5),
    0 16px 40px rgba(0, 0, 0, 0.4),
    0 24px 60px rgba(0, 0, 0, 0.3);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.ic-shop-item.is-uncommon { --shop-rarity: var(--tier-uncommon); }

.ic-shop-item.is-rare { --shop-rarity: var(--tier-rare); }

.ic-shop-item.is-legendary { --shop-rarity: var(--tier-legendary); }

.ic-shop-item:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.55),
    0 12px 28px rgba(0, 0, 0, 0.5),
    0 24px 56px rgba(0, 0, 0, 0.42),
    0 36px 80px rgba(0, 0, 0, 0.32);
}

.ic-shop-item.owned {
  border-color: rgba(255, 255, 255, 0.08);
}

.ic-shop-intro {
  margin-bottom: var(--space-md);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.ic-boost-countdown { font-variant-numeric: tabular-nums; }

.ic-namecolor-preview { font-size: 16px; padding: 0 8px; text-align: center; }

.ic-namecolor-sample { font-weight: 800; letter-spacing: 0.3px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

.ic-giftwrap-preview { color: var(--accent-color); }

.ic-giftwrap-preview.wrap-confetti { color: #ffd93d; }

.ic-giftwrap-preview.wrap-starfall { color: #a18cd1; }

.ic-giftwrap-preview.wrap-treasure { color: #f7971e; }

.ic-shop-preview {
  width: 80px;
  height: 80px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--accent-color);
}

.ic-shop-item.is-common   .ic-shop-preview:not([class*="avatar-"]),
.ic-shop-item.is-uncommon .ic-shop-preview:not([class*="avatar-"]),
.ic-shop-item.is-rare     .ic-shop-preview:not([class*="avatar-"]),
.ic-shop-item.is-legendary .ic-shop-preview:not([class*="avatar-"]) {
  color: var(--shop-rarity);
  background: color-mix(in srgb, var(--shop-rarity) 9%, var(--bg-secondary));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--shop-rarity) 38%, transparent);
}

.ic-shop-preview[class*="avatar-frame-"],
.ic-shop-preview[class*="avatar-effect-"] {
  border-radius: 50%;
  overflow: visible;
}

.ic-shop-preview-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-color);
  font-weight: var(--font-weight-bold);
  font-size: 26px;
  overflow: hidden;
}

.ic-shop-preview-avatar > span {
  line-height: 1;
}

.ic-shop-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  text-align: center;
}

.ic-shop-desc {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-align: center;
  line-height: 1.4;
  flex: 1;
}

.ic-shop-buy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  background: linear-gradient(180deg, var(--iron-gold-bright), var(--iron-gold) 70%, var(--iron-gold-deep));
  color: #1c1407;
  transition: filter var(--transition-fast), transform var(--transition-fast);
}

.ic-shop-buy-btn .iron-diamond { color: #1c1407; }

.ic-shop-buy-btn:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.ic-shop-buy-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.ic-shop-buy-btn:disabled {
  background: var(--bg-secondary);
  color: var(--text-muted);
  cursor: default;
  border: 1px solid var(--border-color);
}

.ic-shop-owned-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: var(--font-size-xs);
  color: var(--accent-color);
  font-weight: var(--font-weight-medium);
}

.ic-shop-use-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.ic-shop-use-btn:hover:not(.in-use) {
  background: var(--bg-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.ic-shop-use-btn:active:not(.in-use) {
  transform: translateY(1px);
}

.ic-shop-use-btn.in-use {
  border-color: var(--accent-solid);
  color: var(--accent-color);
  background: var(--accent-subtle);
  cursor: default;
}

.ic-shop-admin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 6px;
  padding: 7px 12px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  background: var(--bg-secondary);
  border: 1px dashed var(--border-strong);
  color: var(--text-secondary);
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.ic-shop-admin-btn:hover {
  background: var(--bg-hover);
  border-color: var(--accent-solid);
  color: var(--accent-color);
  transform: translateY(-1px);
}

.ic-shop-admin-btn:active {
  transform: translateY(1px);
}

.ic-entering .ic-shop-item {
  opacity: 0;
  animation: cardEnter var(--transition-slow) forwards;
}

#ic-shop-content {
  transition: opacity 150ms ease;
}

#ic-shop-content.ic-fading {
  opacity: 0;
}

.ic-forge-hero {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-lg);
}

.ic-forge-hero-body {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-md) var(--space-md);
  text-align: center;
}

.ic-forge-hero-info { display: grid; gap: 6px; justify-items: center; }

.ic-forge-hero-tag {
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--iron-gold);
}

.ic-forge-hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.ic-forge-hero-desc {
  margin: 0;
  max-width: 46ch;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--leading-normal);
}

.ic-forge-hero-foot {
  display: grid;
  justify-items: center;
  gap: var(--space-sm);
  padding: 0 var(--space-md) var(--space-lg);
}

.ic-forge-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 28px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--accent-color);
  color: var(--accent-text);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.ic-forge-btn.forged { background: var(--bg-tertiary); color: var(--text-muted); }

.ic-forge-btn:disabled { cursor: default; }

.ic-forge-countdown {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

.ic-forge-info-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.ic-forge-result-card,
.ic-forge-stats-wrap {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.35),
    0 8px 24px rgba(0, 0, 0, 0.25);
}

.ic-forge-stats-section {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.35),
    0 8px 24px rgba(0, 0, 0, 0.25);
  margin-bottom: var(--space-xl);
}

.ic-forge-last-result {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
}

.ic-forge-tier-badge {
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.ic-forge-tier-badge.tier-common { background: var(--tier-common-soft);    color: var(--tier-common); }

.ic-forge-tier-badge.tier-uncommon { background: var(--tier-uncommon-soft);  color: var(--tier-uncommon); }

.ic-forge-tier-badge.tier-rare { background: var(--tier-rare-soft);      color: var(--tier-rare); }

.ic-forge-tier-badge.tier-legendary { background: var(--tier-legendary-soft); color: var(--tier-legendary); }

.ic-forge-reward-display {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ic-forge-stats {
  display: flex;
  gap: var(--space-sm);
}

.ic-forge-stat {
  flex: 1;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  text-align: center;
}

.ic-forge-stat-num {
  font-size: 22px;
  font-weight: var(--font-weight-bold);
  color: var(--accent-color);
  margin-bottom: 4px;
}

.ic-forge-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ic-forge-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-md);
}

.ic-forge-gallery-item {
  /* Forge loot is Legendary tier — purple rarity language, like the shop. */
  --shop-rarity: var(--tier-legendary);
  position: relative;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-top: 2px solid color-mix(in srgb, var(--tier-legendary) 55%, var(--border-color));
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  text-align: center;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.4),
    0 8px 24px rgba(0, 0, 0, 0.3),
    0 24px 60px rgba(0, 0, 0, 0.2);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.ic-forge-gallery-item.owned {
  border-color: color-mix(in srgb, var(--tier-legendary) 40%, transparent);
}

.ic-forge-gallery-item.locked {
  opacity: 0.55;
}

.ic-forge-gallery-item:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--tier-legendary) 60%, transparent);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.55),
    0 12px 32px rgba(0, 0, 0, 0.42),
    0 24px 56px rgba(0, 0, 0, 0.32);
}

/* Fill and hairline at zero specificity: a frame class on the same icon
   (avatar-frame-*, style.css) brings its own and must win, as it did when
   these rules sat before it in style.css. */
:where(.ic-forge-gallery-icon) {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
}

.ic-forge-gallery-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-sm);
  position: relative;
  overflow: visible;
  font-size: 22px;
  color: var(--text-primary);
  position: relative;
}

.ic-forge-gallery-item.owned .ic-forge-gallery-icon {
  border-color: color-mix(in srgb, var(--tier-legendary) 50%, transparent);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--tier-legendary) 30%, transparent),
    0 0 16px color-mix(in srgb, var(--tier-legendary) 30%, transparent);
}

.ic-forge-lock {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--text-muted);
}

.ic-forge-gallery-name {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: 4px;
}

.ic-forge-gallery-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
  line-height: 1.4;
}

.ic-forge-gallery-status {
  font-size: 11px;
}

.ic-forge-obtained {
  color: var(--tier-legendary);
  font-weight: var(--font-weight-bold);
}

.ic-forge-locked-label {
  color: color-mix(in srgb, var(--tier-legendary) 60%, var(--text-muted));
}

.ic-forge-gallery-icon.avatar-frame-molten-core::before,
.ic-shop-preview.avatar-frame-molten-core::before {
  inset: -7px;
  -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 8px), #000 calc(100% - 8px));
  mask: radial-gradient(circle closest-side, transparent calc(100% - 8px), #000 calc(100% - 8px));
}

.ic-forge-gallery-item.locked .avatar-theme-aetherforge {
  filter: saturate(0.45) brightness(0.7);
  animation: none;
}

.avatar-frame-pixel-art > .ic-shop-preview-avatar {
  border-radius: 6px !important;
}

.ic-shop-preview.avatar-frame-pixel-art .ic-shop-preview-avatar,
.ic-forge-gallery-icon.avatar-frame-pixel-art .ic-shop-preview-avatar {
  border-radius: 6px !important;
}

.ic-entering .ic-forge-gallery-item {
  opacity: 0;
  animation: cardEnter var(--transition-slow) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .ic-open-spinner {
    animation-duration: 1.6s !important;
    animation-iteration-count: infinite !important;
  }
}

@media (max-width: 960px) {
  .ic-header {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .iron-center-view {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }
}

@media (max-width: 640px) {
  .iron-center-view {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
    padding-bottom: var(--space-2xl);
  }

  .ic-header {
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-md) 0;
    margin-bottom: var(--space-sm);
  }

  .ic-title {
    font-size: var(--font-size-lg);
  }

  .ic-sub-nav {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  .ic-sub-nav::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 480px) {
  .ic-sub-tab {
    padding: 8px 14px;
    font-size: var(--font-size-xs);
  }
}

@media (max-width: 380px) {
  .ic-balance-pill {
    padding: 6px 12px;
    font-size: var(--font-size-xs);
  }
}

@media (min-width: 901px) and (max-width: 1280px) {
  .iron-center-view {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
}

@media (max-height: 760px) and (min-width: 641px) {
  .ic-header {
    padding: var(--space-sm) 0;
    margin-bottom: var(--space-sm);
  }

  .iron-center-view {
    padding-top: var(--space-xs);
    padding-bottom: var(--space-md);
  }
}

@media (max-aspect-ratio: 4/3) and (min-width: 641px) and (min-height: 641px) {
  .ic-shop-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

.iron-gift-inbox-overlay .iron-gift-inbox-modal {
  width: min(560px, calc(100vw - 32px));
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.iron-gift-inbox-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin: 0;
}

.iron-gift-inbox-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--bg-hover);
  color: var(--color-warning);
  font-size: 16px;
}

.iron-gift-inbox-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--space-lg);
  overflow-y: auto;
}

.iron-gift-inbox-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.iron-gift-card {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-primary);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 8px 20px rgba(0, 0, 0, 0.4);
}

.iron-gift-card-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-hover);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  font-size: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.iron-gift-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.iron-gift-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.iron-gift-card-name strong {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.iron-gift-card-time {
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
}

.iron-gift-card-amount {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--bg-hover);
  color: var(--color-warning);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.iron-gift-card-amount i { font-size: 12px; }

.iron-gift-card-message {
  font-size: var(--font-size-sm);
  line-height: 1.45;
  color: var(--text-primary);
  background: var(--bg-secondary);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

.iron-gift-card-message--empty {
  color: var(--text-muted);
  font-style: italic;
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.06);
}

.iron-gift-card.is-wrapped { position: relative; overflow: hidden; }

.iron-gift-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px;
  border: none;
  cursor: pointer;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 70%, #000), color-mix(in srgb, var(--accent-color) 30%, #000));
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.iron-gift-wrap-icon { font-size: 30px; animation: iron-gift-wrap-bob 1.6s ease-in-out infinite; }

.iron-gift-wrap-label { font-size: 13px; opacity: 0.95; }

.iron-gift-wrap-cta {
  margin-top: 2px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  opacity: 0.85;
}

.iron-gift-wrap.wrap-confetti { background: linear-gradient(135deg, #f7971e, #ffd200); color: #1a1100; }

.iron-gift-wrap.wrap-starfall { background: linear-gradient(135deg, #654ea3, #a18cd1); }

.iron-gift-wrap.wrap-treasure { background: linear-gradient(135deg, #8a5a00, #f7971e); }

.iron-gift-wrap.opening .iron-gift-wrap-icon { animation: iron-gift-wrap-pop 0.6s ease forwards; }

.iron-gift-wrap.opened { transform: scale(1.08); opacity: 0; pointer-events: none; }

.iron-gifts-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: var(--space-lg);
}

.iron-gifts-summary-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 18px;
  background: var(--bg-primary);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 8px 20px rgba(0, 0, 0, 0.4);
}

.iron-gifts-summary-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.iron-gifts-summary-value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.iron-gifts-summary-value i,
.iron-gifts-summary-value .iron-diamond {
  color: var(--color-warning);
  font-size: 16px;
}

.iron-gifts-summary-value .iron-diamond svg { width: 18px; height: 18px; }

.iron-gift-card-amount .iron-diamond svg { width: 14px; height: 14px; }

.ic-lb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.ic-lb-payouts {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.ic-lb-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-lg);
}

.ic-lb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-primary);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
}

.ic-lb-row.ic-lb-me {
  border-color: var(--accent-solid);
  position: sticky;
  bottom: 0;
}

.ic-lb-rank {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 56px;
  font-weight: var(--font-weight-bold);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.ic-lb-rank-badge { flex: 0 0 auto; margin-right: 22px; }

.ic-lb-avatar { width: 32px; height: 32px; flex-shrink: 0; }

.ic-lb-name {
  flex: 1;
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ic-lb-value {
  font-weight: var(--font-weight-bold);
  color: var(--color-warning);
  font-variant-numeric: tabular-nums;
}

.ic-lb-champions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ic-lb-champion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg-primary);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.ic-lb-champion-name { font-weight: var(--font-weight-semibold); color: var(--text-primary); }

.ic-lb-champion-payout {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: var(--font-weight-bold);
  color: var(--iron-gold);
}

.ic-games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.ic-game-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  background: var(--bg-primary);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 8px 20px rgba(0, 0, 0, 0.4);
}

.ic-game-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ic-game-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  /* Gold medallion — the game pays IRON */
  background: var(--iron-gold-soft);
  color: var(--iron-gold);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--iron-gold) 40%, transparent);
  font-size: 17px;
}

.ic-game-title {
  flex: 1;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.ic-game-done-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
  font-size: 12px;
  font-weight: var(--font-weight-bold);
}

.ic-game-desc {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.ic-game-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--accent-color);
  border: none;
  border-radius: var(--radius-md);
  color: #fff;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.ic-game-btn:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }

.ic-game-btn:disabled { opacity: 0.6; cursor: default; }

.ic-timing-track { position:relative; height:120px; border:1px solid var(--border-strong); border-radius:var(--radius-md); background:var(--bg-input); overflow:hidden; }

.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)); }

.ic-arcade-defs { position:absolute; width:0; height:0; overflow:hidden; }

.ic-scales-input { display:flex; gap:var(--space-sm); }

.ic-scales-input input { flex:1; min-width:0; padding:10px 12px; border:1px solid var(--border-color); border-radius:var(--radius-md); background:var(--bg-input); color:var(--text-primary); font-size:var(--font-size-md); }

.ic-scales-input input:focus { outline:none; box-shadow:none; border-color:var(--accent-color); }

.ic-tournament { margin-top:var(--space-lg); }

.ic-tour-board { display:grid; gap:6px; }

.ic-tour-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:var(--space-sm); min-height:44px; padding:8px 12px; border:1px solid var(--border-color); border-radius:var(--radius-md); background:var(--bg-secondary); }

.ic-tour-row.is-me { border-color:color-mix(in srgb,var(--iron-gold) 45%,var(--border-color)); background:var(--iron-gold-faint); }

.ic-tour-mine { margin-top:var(--space-xs); border-style:dashed; }

.ic-tour-rank { width:24px; text-align:center; color:var(--text-muted); font-weight:var(--font-weight-bold); }

.ic-tour-name { overflow:hidden; color:var(--text-primary); font-weight:var(--font-weight-semibold); text-overflow:ellipsis; white-space:nowrap; }

.ic-tour-prize { display:inline-flex; align-items:center; gap:4px; color:var(--aura-core); font-size:var(--font-size-xs); font-weight:var(--font-weight-bold); }

.ic-tour-row b { color:var(--text-primary); font:var(--font-weight-bold) var(--font-size-sm) var(--font-display); }

.ic-tour-last { display:flex; flex-wrap:wrap; gap:var(--space-xs) var(--space-md); margin-top:var(--space-sm); padding-top:var(--space-sm); border-top:1px solid var(--border-color); color:var(--text-secondary); font-size:var(--font-size-xs); }

.ic-tour-last .ic-card-eyebrow { width:100%; }

.ic-challenge-create select { min-width:0; }

@media(max-width:560px) {
  .ic-challenge-create { flex-wrap:wrap; }

  .ic-challenge-create select,
.ic-challenge-create button { flex:1 1 100%; }
}

.ic-trivia-difficulty {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  font-size: 11px;
  letter-spacing: 0.04em;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.ic-trivia-difficulty.is-easy { color: #34d399; border-color: rgba(52,211,153,0.4);  background: rgba(52,211,153,0.12); }

.ic-trivia-difficulty.is-medium { color: var(--iron-gold); border-color: color-mix(in srgb, var(--iron-gold) 40%, transparent); background: color-mix(in srgb, var(--iron-gold) 13%, transparent); }

.ic-trivia-difficulty.is-hard { color: #f87171; border-color: rgba(248,113,113,0.4); background: rgba(248,113,113,0.12); }

.ic-trivia-question { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--text-primary); }

.ic-trivia-options { display: grid; gap: 8px; }

.ic-trivia-option {
  padding: 12px 14px;
  background: var(--bg-tertiary);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  text-align: left;
  cursor: pointer;
}

.ic-trivia-option:disabled { cursor: default; }

.ic-trivia-summary-reward {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--iron-gold);
  background: var(--iron-gold-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--iron-gold) 30%, transparent);
}

.ic-trivia-summary-reward .iron-diamond { color: var(--iron-gold); }

.ic-event-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 18px;
  margin-bottom: var(--space-md);
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, rgba(255, 184, 76, 0.14), rgba(255, 122, 41, 0.07) 55%, transparent);
  border: 1px solid rgba(255, 184, 76, 0.35);
  box-shadow: 0 0 24px rgba(255, 160, 60, 0.10), inset 0 0 30px rgba(255, 160, 60, 0.05);
}

.ic-event-banner-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: rgba(255, 184, 76, 0.18);
  color: #ffb84c;
  font-size: 18px;
}

.ic-event-banner-info { flex: 1; min-width: 160px; }

.ic-event-banner-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.ic-event-mult {
  padding: 2px 10px;
  border-radius: 999px;
  background: #ffb84c;
  color: #1a1205;
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
}

.ic-event-banner-desc {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-top: 2px;
}

.ic-event-timer-pill { flex-shrink: 0; }

.iron-gifts-section {
  margin-bottom: var(--space-lg);
}

.iron-gifts-section-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: 10px;
}

.iron-gifts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.iron-gift-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--bg-primary);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 8px 20px rgba(0, 0, 0, 0.4);
}

.iron-gift-row-avatar {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-hover);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  font-size: 15px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.iron-gift-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.iron-gift-row-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.iron-gift-row-name strong {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.iron-gift-row-time {
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
}

.iron-gift-row-message {
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: pre-wrap;
  word-break: break-word;
}

.iron-gift-row-amount {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--bg-hover);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  white-space: nowrap;
}

.iron-gift-row-amount--in { color: var(--color-warning); }

.iron-gift-row-amount--out { color: var(--text-secondary); }

.iron-gift-row-amount .iron-diamond { color: var(--color-warning); }

.iron-gift-row-amount .iron-diamond svg { width: 14px; height: 14px; }

.iron-gift-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  color: var(--text-muted);
  font-style: italic;
  background: var(--bg-primary);
  border: 1px dashed rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
}

.iron-gifts-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px;
  color: var(--text-muted);
}

.ic-merchant-strip {
  position: relative;
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.4),
    0 8px 24px rgba(0, 0, 0, 0.35),
    0 24px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.ic-merchant-head {
  display: flex; align-items: center; gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.ic-merchant-badge {
  width: 36px; height: 36px; flex: 0 0 36px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--accent-light);
  border: 1px solid var(--accent-subtle);
  color: var(--accent-color); font-size: 16px;
}

.ic-merchant-headings { display: flex; flex-direction: column; gap: 1px; margin-right: auto; }

.ic-merchant-tag {
  font-size: 11px; font-weight: var(--font-weight-semibold);
  color: var(--accent-color); text-transform: uppercase; letter-spacing: 1px;
}

.ic-merchant-name {
  font-size: var(--font-size-sm); font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.ic-merchant-sub { font-size: var(--font-size-xs); color: var(--text-muted); text-transform: capitalize; }

.ic-merchant-cards { display: flex; gap: var(--space-sm); overflow-x: auto; padding: 4px 0 2px; scrollbar-width: thin; }

.ic-merchant-card {
  flex: 0 0 180px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.ic-merchant-card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.10); }

.ic-merchant-card-icon {
  width: 60px; height: 60px;
  display: grid; place-items: center;
  border-radius: var(--radius-md); font-size: 24px; color: var(--accent-color);
  background: var(--bg-primary); border: 1px solid var(--border-color);
}

.ic-merchant-card.is-empty { border-style: dashed; }

.ic-merchant-card.is-empty .ic-merchant-card-icon { color: var(--text-muted); }

.ic-merchant-card-body { display: flex; flex-direction: column; gap: 2px; }

.ic-merchant-card-name { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--text-primary); }

.ic-merchant-card-flavor { font-size: 11px; color: var(--text-muted); }

.ic-merchant-open-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 8px 12px; border: none; border-radius: var(--radius-md);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  background: var(--accent-color); color: var(--accent-text);
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.ic-merchant-open-btn:hover:not(:disabled) { background: var(--accent-hover); transform: translateY(-1px); }

.ic-merchant-open-btn:active:not(:disabled) { transform: translateY(1px); }

.ic-merchant-open-btn:disabled {
  background: var(--bg-primary); color: var(--text-muted);
  cursor: default; border: 1px solid var(--border-color);
}

.ic-reward-container-strip {
  display: flex; align-items: center; gap: var(--space-md);
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--iron-gold-soft), var(--iron-gold-faint));
  border: 1px solid color-mix(in srgb, var(--iron-gold) 40%, transparent);
}

.ic-reward-container-icon {
  width: 44px; height: 44px; flex: 0 0 44px;
  display: grid; place-items: center;
  border-radius: var(--radius-round);
  background: linear-gradient(180deg, var(--iron-gold-bright), var(--iron-gold) 60%, var(--iron-gold-deep));
  color: #1c1407; font-size: var(--font-size-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 8px color-mix(in srgb, var(--iron-gold) 42%, transparent);
}

.ic-reward-container-body { display: flex; flex-direction: column; gap: 2px; margin-right: auto; }

.ic-reward-container-title {
  font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--iron-gold);
}

.ic-reward-container-sub { font-size: var(--font-size-xs); color: var(--text-secondary); }

.ic-reward-container-strip .ic-merchant-open-btn { width: auto; flex: 0 0 auto; padding: 8px 16px; }

.ic-merchant-reveal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .25s ease;
}

.ic-merchant-reveal-overlay.active { opacity: 1; }

.ic-merchant-reveal-card {
  position: relative;
  width: min(340px, 88vw);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.45),
    0 24px 60px rgba(0, 0, 0, 0.4);
  text-align: center;
  animation: ic-reveal-pop .32s cubic-bezier(.2, 1.2, .4, 1) both;
}

.ic-merchant-reveal-burst {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 30%, var(--accent-subtle), transparent 70%);
}

.ic-merchant-reveal-tag {
  position: relative;
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--accent-color); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-md);
}

.ic-merchant-reveal-preview {
  position: relative;
  width: 96px; height: 96px; margin: 0 auto var(--space-md);
  border-radius: 50%;
  display: grid; place-items: center; font-size: 34px; color: var(--accent-color);
  background: var(--bg-secondary); border: 1px solid var(--border-color);
}

.ic-merchant-reveal-iron { font-size: 40px; color: var(--accent-color); }

.ic-merchant-reveal-name { position: relative; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--text-primary); }

.ic-merchant-reveal-rarity { position: relative; font-size: var(--font-size-xs); color: var(--text-muted); text-transform: capitalize; margin-top: 2px; }

.ic-merchant-reveal-refund { position: relative; margin-top: 10px; font-size: var(--font-size-xs); color: var(--accent-color); font-weight: var(--font-weight-semibold); }

.ic-merchant-reveal-overlay.rarity-legendary .ic-merchant-reveal-preview { box-shadow: 0 0 18px rgba(255, 182, 39, .45); border-color: #ffb627; }

.ic-merchant-reveal-overlay.rarity-epic .ic-merchant-reveal-preview { box-shadow: 0 0 16px var(--accent-light); }

.ic-merchant-reveal-close {
  position: relative;
  margin-top: var(--space-lg); padding: 9px 22px; border: none; border-radius: var(--radius-pill);
  background: var(--accent-color); color: var(--accent-text);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); cursor: pointer;
  transition: background-color var(--transition-fast);
}

.ic-merchant-reveal-close:hover { background: var(--accent-hover); }

.ic-open-stage {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-lg); min-height: 210px;
}

.ic-open-spinner { font-size: 30px; color: var(--accent-color); }

.ic-open-label {
  font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 2px;
  color: var(--accent-color); font-weight: var(--font-weight-semibold); text-align: center;
}

.ic-cap-count { color: var(--accent-color); }

.ic-open-skip {
  padding: 7px 16px; border: 1px solid var(--border-color); border-radius: var(--radius-pill);
  background: var(--bg-secondary); color: var(--text-secondary); font-size: var(--font-size-xs);
  cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast);
}

.ic-open-skip:hover { color: var(--text-primary); border-color: var(--accent-color); }

.ic-reel-tile {
  flex: 0 0 80px; width: 80px; margin: 0 8px; height: 110px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radius-md); background: var(--bg-primary); border: 1px solid var(--border-color);
}

.ic-reel-tile.landed { border-color: var(--accent-color); box-shadow: 0 0 16px var(--accent-light); transform: translateY(-2px); }

.ic-reel-disc {
  width: 52px; height: 52px; border-radius: 50%; position: relative;
  display: grid; place-items: center; font-size: 22px; color: var(--accent-color); background: var(--bg-elevated);
}

.ic-reel-iron { color: var(--accent-color); }

.ic-reel-mystery .ic-reel-disc { color: var(--text-muted); font-size: 24px; }

.ic-reel-viewport {
  position: relative; width: min(380px, 86vw); height: 130px; overflow: hidden;
  border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-secondary);
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.ic-reel-marker { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: var(--accent-color); z-index: 2; box-shadow: 0 0 10px var(--accent-color); }

.ic-reel-track { position: absolute; top: 0; left: 0; height: 100%; display: flex; align-items: center; will-change: transform; }

.ic-open-wheel { position: relative; width: 176px; height: 176px; }

.ic-open-wheel-disc {
  width: 100%; height: 100%; border-radius: 50%; position: relative;
  border: 4px solid var(--accent-color);
  box-shadow: 0 0 0 6px var(--bg-primary), 0 0 24px var(--accent-light);
}

.ic-wheel-label { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }

.ic-wheel-label i,
.ic-wheel-label .iron-diamond { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); font-size: 15px; width: 16px; height: 16px; color: var(--text-primary); }

.ic-open-wheel-hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-primary); border: 2px solid var(--accent-color); color: var(--accent-color); font-size: 18px;
}

.ic-open-wheel-pointer {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 0; height: 0; z-index: 3;
  border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 16px solid var(--accent-color);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.4));
}

.ic-scratch { position: relative; width: 300px; max-width: 86vw; height: 170px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-color); }

.ic-scratch-prize { position: absolute; inset: 0; z-index: 0; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--bg-secondary); }

.ic-scratch-prize.is-covered,
.ic-scratch-prize.is-covered *,
.ic-scratch-prize.is-covered *::before,
.ic-scratch-prize.is-covered *::after {
  animation: none !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  will-change: auto !important;
}

.ic-scratch-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--text-primary); }

.ic-scratch-canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; cursor: crosshair; touch-action: none; transform: translateZ(0); }

.ic-scratch-disc {
  position: relative;
  width: 88px; height: 88px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-secondary); border: 1px solid var(--border-color);
  color: var(--accent-color); font-size: 30px;
}

.ic-scratch-disc > .ic-shop-preview-avatar { width: 100%; height: 100%; }

.ic-scratch-disc > .effect-particles { z-index: 2; }

.ic-scratch-pick { display: flex; flex-direction: column; align-items: center; }

.ic-scratch-pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); width: 300px; max-width: 86vw; }

.ic-scratch-ticket {
  position: relative; aspect-ratio: 3 / 2; border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 7px, rgba(255, 255, 255, 0) 7px 14px),
    var(--bg-secondary);
  color: var(--accent-color); font-size: 24px; cursor: pointer;
  display: grid; place-items: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.35s ease, border-color 0.2s ease;
}

.ic-scratch-ticket:hover {
  transform: translateY(-3px);
  border-color: var(--accent-subtle);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.ic-scratch-ticket:active { transform: translateY(-1px); }

.ic-scratch-ticket-no {
  position: absolute; bottom: 4px; right: 8px;
  font-size: 11px; font-weight: var(--font-weight-bold); color: var(--text-muted);
}

.ic-scratch-ticket.chosen { transform: scale(1.06); border-color: var(--accent-color); box-shadow: 0 0 18px var(--accent-light); }

.ic-scratch-ticket.discard { opacity: 0; transform: scale(0.85); pointer-events: none; }

.ic-open-capsule { position: relative; width: 116px; height: 150px; cursor: pointer; outline: none; }

.ic-open-capsule.shake { animation: ic-cap-shake .32s ease; }

.ic-open-capsule-top { position: absolute; top: 0; left: 0; right: 0; height: 50%; background: var(--accent-color); border-radius: 58px 58px 6px 6px; transform-origin: 50% 100%; z-index: 1; }

.ic-open-capsule-bottom { position: absolute; bottom: 0; left: 0; right: 0; height: 50%; background: var(--bg-secondary); border: 2px solid var(--accent-color); border-radius: 6px 6px 58px 58px; transform-origin: 50% 0; z-index: 1; }

.ic-cap-crack { position: absolute; left: 6px; right: 6px; top: 50%; height: 3px; transform: translateY(-50%); background: repeating-linear-gradient(90deg, transparent 0 6px, var(--bg-primary) 6px 10px); opacity: 0; z-index: 3; }

.ic-open-capsule.crack-1 .ic-cap-crack { opacity: .4; }

.ic-open-capsule.crack-2 .ic-cap-crack { opacity: .7; }

.ic-open-capsule.crack-3 .ic-cap-crack { opacity: 1; }

.ic-open-capsule.open .ic-open-capsule-top { animation: ic-cap-top .7s cubic-bezier(.5,-0.4,.3,1.3) forwards; }

.ic-open-capsule.open .ic-open-capsule-bottom { animation: ic-cap-bottom .7s cubic-bezier(.5,-0.4,.3,1.3) forwards; }

.ic-open-capsule.open .ic-open-rays { animation: ic-open-burst .9s ease-out forwards; }

.ic-open-rays {
  position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; z-index: 0;
  transform: translate(-50%, -50%) scale(0); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--accent-light) 0%, transparent 65%);
}

.ic-title,
.iron-gift-inbox-title {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

.ic-balance-pill {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.ic-forge-stat-label,
.iron-gifts-summary-label {
  letter-spacing: 0.06em;
}

.ic-trivia-summary-reward.is-aura {
  color: var(--aura-core);
  background: var(--aura-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aura-core) 35%, transparent);
}

.ic-lb-levelbar {
  padding: 14px 12px 12px;
  margin-bottom: var(--space-md);
  background: var(--bg-primary);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
}

.ic-stage-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  margin-bottom: 10px;
}

.ic-stage-title-art { width: 24px; height: 24px; display: inline-flex; }

.ic-stage-title-art svg { width: 100%; height: 100%; }

.ic-stage-strip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  overflow-x: auto;
  padding: 10px 6px 6px;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}

.ic-stage-strip::-webkit-scrollbar { height: 6px; }

.ic-stage-strip::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 999px; }

.ic-stage-adv {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ic-stage-adv-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
}

.ic-stage-adv .iron-quest-bar { max-width: 460px; margin: 0 auto; width: 100%; }

.ic-stage-adv-label { justify-content: space-between; width: 100%; flex-wrap: wrap; gap: 8px; }

.ic-stage-adv-up { color: var(--color-success, #3ddc97); }

.ic-stage-adv-down { color: var(--color-warning, #f2c14e); }

.ic-stage-adv-reward {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: var(--radius-round, 999px);
  background: var(--iron-gold-faint, rgba(245, 196, 81, 0.12));
  color: var(--iron-gold, #f5c451);
  font-weight: var(--font-weight-semibold, 600);
}

.ic-stage-adv-reward .iron-diamond { width: 0.85em; height: 0.85em; }

.ic-lb-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.ic-lb-title i { color: var(--accent-solid, #3FB6C8); }

.ic-reward-badges { display: flex; flex-wrap: wrap; gap: 10px; }

.ic-reward-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 8px;
  background: var(--bg-primary);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-pill);
}

.ic-reward-items { display: inline-flex; align-items: center; gap: 10px; font-weight: var(--font-weight-bold); color: var(--text-primary); }

.ic-reward-iron { display: inline-flex; align-items: center; gap: 5px; color: var(--color-warning); }

.ic-reward-container {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  color: #3FB6C8;
}

.ic-lb-breakdown-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: var(--space-md);
  padding: 11px 16px;
  background: var(--bg-primary);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.ic-lb-breakdown-toggle:hover { color: var(--text-primary); border-color: rgba(63, 182, 200, 0.4); }

.ic-lb-breakdown-toggle.open { border-radius: var(--radius-md) var(--radius-md) 0 0; color: var(--text-primary); }

.ic-lb-breakdown.open {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: 14px;
}

.ic-lb-cat-tabs { display: flex; gap: 6px; margin-bottom: 12px; }

.ic-lb-cat-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  background: var(--bg-secondary);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.ic-lb-cat-tab:hover { color: var(--text-primary); }

.ic-lb-cat-tab.active { background: color-mix(in srgb, #3FB6C8 22%, var(--bg-secondary)); color: #aef0fb; border-color: rgba(63, 182, 200, 0.4); }

.ic-shop-buy-btn.busy { opacity: 0.6; }

.ic-chr-figure-val {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--font-size-xl); font-weight: var(--font-weight-bold);
  color: var(--text-primary); font-variant-numeric: tabular-nums;
}

.ic-chr-figure-val .iron-diamond { color: var(--iron-gold); width: 20px; height: 20px; display: inline-flex; }

.ic-chr-stat-val {
  font-family: var(--font-display);
  font-size: var(--font-size-lg); font-weight: var(--font-weight-bold);
  color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1.1;
}

.ic-together-grid { grid-template-columns: 1fr; gap: 0; }

.ic-together-card { padding: var(--space-md) 0; border: 0; border-radius: 0; background: transparent; }

.ic-together-card + .ic-together-card { border-top: 1px solid var(--border-color); }

.ic-exp-badge { margin: 0 0 var(--space-lg); border: 1px solid var(--border-color); border-left: 3px solid var(--accent-color); border-radius: var(--radius-lg); background: var(--bg-secondary); overflow: hidden; }

.ic-exp-badge-mark { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-md); color: var(--accent-color); background: var(--accent-light); font-size: 17px; }

.ic-exp-badge.is-collapsed .ic-exp-badge-mark { width: 30px; height: 30px; font-size: 14px; }

.ic-exp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--bg-tertiary); color: var(--text-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast); }

.ic-exp-btn:hover { border-color: var(--accent-color); }

.ic-exp-badge.is-reverted { border-left-color: var(--text-muted); }

.ic-exp-badge.is-reverted .ic-exp-badge-mark { color: var(--text-secondary); background: var(--bg-tertiary); }

.ic-exp-sentiment { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--bg-tertiary); color: var(--text-secondary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast); }

.ic-exp-sentiment i { font-size: 15px; }

.ic-exp-sentiment:hover { color: var(--text-primary); }

.ic-exp-sentiment.active { color: var(--accent-color); border-color: var(--accent-color); background: var(--accent-subtle); }

/* ===== Iron Center modern surface discipline ============================
 * Passive information uses the page canvas, spacing and hairlines for
 * hierarchy. Currency and status colours remain on marks/text; they no longer
 * wash every surrounding rectangle. Solid colour is reserved for primary
 * actions, earned rewards, progress and genuinely active states. */

.ic-exp-badge {
  align-items: flex-start;
  padding: var(--space-md) 0;
  border: 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.ic-exp-badge.is-reverted { background: transparent; }

.ic-exp-badge-mark,
.ic-path-rest-icon,
.ic-recognition-icon,
.ic-door-icon {
  background: var(--bg-tertiary);
  border-color: var(--border-color);
  box-shadow: none;
}

.ic-exp-badge-mark { color: var(--accent-color); }

.ic-path-rest-icon { color: var(--aura-core); }

.ic-balance-pill {
  padding: 7px 11px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.ic-balance-pill + .ic-balance-pill { border-left: 1px solid var(--border-color); }

.ic-aura-prestige {
  margin-left: 2px;
  padding: 0 0 0 7px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  border-left: 1px solid var(--border-color);
}

.ic-home-chip {
  min-height: 28px;
  padding: 4px 6px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: none;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.ic-home-chip:hover { color: var(--text-primary); background: var(--bg-hover); }

.ic-path-rest {
  padding: var(--space-md) 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
  box-shadow: none;
}

.ic-exp-btn,
.ic-exp-sentiment {
  border-radius: var(--radius-sm);
  background: transparent;
}

.ic-exp-sentiment.active { background: var(--bg-hover); }

@keyframes iron-claim-pop-rise {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(0.3); }
  14%  { opacity: 1; transform: translate(-50%, -64px) scale(1.18); }
  26%  { transform: translate(-50%, -58px) scale(0.94); }
  38%  { transform: translate(-50%, -62px) scale(1.04); }
  52%  { opacity: 1; transform: translate(-50%, -62px) scale(1); }
  78%  { opacity: 1; transform: translate(-50%, -66px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -104px) scale(0.92); }
}

@keyframes iron-claim-pop-ring {
  0%   { opacity: 0;   transform: translate(-50%, 0) scale(0.3); border-width: 4px; }
  20%  { opacity: 0.9; }
  100% { opacity: 0;   transform: translate(-50%, 0) scale(3.2); border-width: 1px; }
}

@keyframes iron-claim-pop-spark {
  0%   { opacity: 0; transform: rotate(var(--a)) translateX(10px) scale(0.6); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scale(0.35); }
}

@keyframes iron-gift-wrap-bob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-4px) rotate(4deg); }
}

@keyframes iron-gift-wrap-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35) rotate(8deg); }
  100% { transform: scale(0.2) rotate(-12deg); opacity: 0; }
}

@keyframes ic-reveal-pop { from { transform: scale(.86); opacity: 0; } to { transform: scale(1); opacity: 1; } }

@keyframes ic-cap-shake { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }

@keyframes ic-cap-top { to { transform: translateY(-60px) rotate(-14deg); opacity: 0; } }

@keyframes ic-cap-bottom { to { transform: translateY(60px) rotate(14deg); opacity: 0; } }

@keyframes ic-open-burst {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.3); opacity: 0; }
}

/* ---- Rooms: phones and tablets (were in responsive.css) ---------------- */
@media (max-width: 768px) {
  #view-iron-center .iron-center-view .ic-sub-nav {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    overflow: visible;
    border-bottom: 0;
    padding: 2px 0 0;
    margin-bottom: var(--space-md);
  }

  #view-iron-center .iron-center-view .ic-sub-nav::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 16px;
    left: 8.333%;
    right: 8.333%;
    height: 3px;
    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);
  }

  #view-iron-center .iron-center-view .ic-sub-nav .ic-indicator {
    display: block;
    bottom: 0;
    height: 2px;
    border-radius: var(--radius-pill);
    opacity: 0.85;
  }

  #view-iron-center .iron-center-view .ic-room-nav,
#view-iron-center .iron-center-view .ic-back-btn { display: none !important; }

  #view-iron-center .iron-center-view .ic-sub-tab {
    flex: 1 1 0;
    position: relative;
    z-index: 1;
    min-width: 0;
    align-items: center;
    gap: 0;
    padding: 2px 1px 6px;
    border-bottom: 0;
    overflow: visible;
  }

  #view-iron-center .iron-center-view .ic-sub-tab .ic-tab-main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    overflow: visible;
  }

  #view-iron-center .iron-center-view .ic-tab-node {
    display: grid;
    place-items: center;
    position: relative;
    width: 25px;
    height: 25px;
    border: 1px solid var(--border-strong);
    background: var(--bg-primary);
    color: var(--text-muted);
    box-shadow: inset 0 1px 0 var(--border-highlight);
    transform: rotate(45deg);
    transition: transform var(--transition-fast), border-color var(--transition-fast),
      background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
  }

  #view-iron-center .iron-center-view .ic-tab-node i {
    display: block;
    font-size: 10px;
    color: inherit;
    transform: rotate(-45deg);
  }

  #view-iron-center .iron-center-view .ic-tab-label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-display);
    font-size: 10.5px;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--text-muted);
    transition: color var(--transition-fast);
  }

  #view-iron-center .iron-center-view .ic-sub-tab.active .ic-tab-node {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 14%, var(--bg-primary));
    color: var(--accent-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 13%, transparent),
      inset 0 1px 0 color-mix(in srgb, white 28%, transparent);
    transform: rotate(45deg) scale(1.03);
  }

  #view-iron-center .iron-center-view .ic-sub-tab.active .ic-tab-node::after {
    content: '';
    position: absolute;
    inset: -5px;
    border: 1px solid color-mix(in srgb, var(--accent-color) 42%, transparent);
    border-radius: 50%;
    pointer-events: none;
  }

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

  #view-iron-center .iron-center-view .ic-sub-tab.has-reward:not(.active) .ic-tab-node {
    border-color: var(--iron-gold);
    color: var(--iron-gold);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--iron-gold) 13%, transparent),
      inset 0 1px 0 var(--border-highlight);
  }

  #view-iron-center .iron-center-view .ic-sub-tab.is-ready:not(.active) .ic-tab-node {
    border-color: var(--accent-color);
    color: var(--accent-color);
  }

  #view-iron-center .iron-center-view .ic-sub-tab .ic-tab-hint {
    z-index: 3;
    top: -2px;
    right: calc(50% - 21px);
  }

  .ic-back-btn {
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    align-self: flex-start;
    margin: var(--space-sm) 0;
    min-height: 44px;
    padding: 8px 4px;
    border-radius: 0;
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    font-family: inherit;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    animation: commBackIn 280ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .ic-back-btn:active {
    background: transparent;
    color: var(--text-primary);
  }

  .ic-back-btn i { font-size: 13px; }
}

/* ---- Rooms (were in css/iron-center.css) -------------------------------- */
/* ===== 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-shop-item,
#view-iron-center .ic-game-card,
#view-iron-center .ic-merchant-card,
#view-iron-center .ic-recognition-card,
#view-iron-center .ic-together-card,
#view-iron-center .ic-forge-hero,
#view-iron-center .ic-forge-result-card,
#view-iron-center .ic-lb-champion,
#view-iron-center .ic-tournament,
#view-iron-center .ic-challenges,
#view-iron-center .ic-reward-container {
  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-shop-item:hover,
#view-iron-center .ic-game-card:hover,
#view-iron-center .ic-merchant-card: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-shop-item,
#view-iron-center .ic-game-card,
#view-iron-center .ic-merchant-card {
  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. */

/* No "to" opacity: the rise ends at the item's own opacity, so a claimed
   card (0.6) does not flash to full and then snap back dim. */
@keyframes ic-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { transform: none; }
}

#view-iron-center .iron-panel.active > * {
  animation: ic-rise 240ms 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 list rise in one by one as they come into view, once —
   driven by IronCenter._watchReveals (js/iron-center.js); see css/v2/iron-center.css. */

/* =========================================================================
 * 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 240ms 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);
}

/* 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);
}

/* =========================================================================
 * 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-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-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-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-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); }
}

@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);
}

/* 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;
}

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

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

.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; }

  /* 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-balance-pill { transition: none; }
}

/* 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;
}

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

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

#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); }

@media (max-width: 520px) {
  #view-iron-center .ic-home-title { font-size: var(--font-size-lg); }
}

/* =========================================================================
 * 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 { 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 { color: var(--chip-accent, var(--text-muted)); }

@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; }

  /* Phones: the chips wrap, so a hairline would start the second line. */
  #view-iron-center .ic-home-identity { gap: 6px 14px; }
  #view-iron-center .ic-home-chip + .ic-home-chip { margin-left: 0; padding-left: 0; border-left: 0; }

}

@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-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; }
}

#view-iron-center .ic-path-bar {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 40px;
  margin: 0 0 16px;
  padding: 0 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-stations {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

#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-game-admin-refresh:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 3px; }

@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-stations {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin: 0;
    padding: 2px 0 5px;
  }
}

/* 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);
  /* Once, as the room opens: a gleam, not a loop on a still page. */
  animation: ic-anvil-sheen 6.5s var(--iron-ease) 1;
}

@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;
}
/* Embers only fly while the iron is being heated, worked or cooling; idle,
   they used to loop invisibly forever. */
#view-iron-center .ic-forge-hero:is(.is-working, .is-cooling, :has(.is-heating)) .ic-anvil-embers circle {
  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 { 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-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)); }
}

/* 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 2; }

@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) 1;
}

@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%;
}

#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; }

#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-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; }

#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; }

/* ---- The floor ---------------------------------------------------------- */

#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-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)); }

#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 3; }

@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 { 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, working and impact
   * animation; reduced-motion users still get the shorter interaction fuse. */
#view-iron-center .ic-forge-hero.striking .ic-hearth-sparks i,
#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; }
}

/* ==========================================================================
   IRONITT v2 — Iron Center (first slice: rendering cost)
   --------------------------------------------------------------------------
   The Iron Center page is long and busy (two realms of animated paths, a
   star field, comets). Below the fold none of it needs to be laid out,
   painted or animated, so each realm and each room section opts into
   content-visibility: the browser skips its rendering work — including its
   infinite twinkle / comet / sheen animations — until it nears the
   viewport. contain-intrinsic-size keeps the scrollbar honest meanwhile
   (`auto` remembers the real size once it has been rendered).
   ========================================================================== */
#view-iron-center .iron-panel.active > :is(section, .ic-section, .ic-forge-stats-section) {
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}
/* Not the first screen, though: the view slides in from off-screen on a tab
   switch, so these counted as "far away" and stayed blank until they crossed
   into the viewport mid-slide, then popped in all at once. */
#view-iron-center .iron-panel.active > :is(section, .ic-section, .ic-forge-stats-section):nth-child(-n+3) {
  content-visibility: visible;
}


/* ---- Home: today across the rooms -------------------------------------- */
/* One lead action, then one flat list: a row per room with the figure that
   room already holds. Rows are hairline-separated, never boxes in a box. */
#view-iron-center .ic-today {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.ic-today-lead {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  color: var(--text-primary);
  text-align: left;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.ic-today-lead:hover { background: var(--bg-hover); border-color: var(--accent-color); }
.ic-today-lead-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-round);
  background: var(--accent-color);
  color: var(--accent-text);
}
.ic-today-lead-title { font-weight: var(--font-weight-semibold); font-size: var(--font-size-md); }
.ic-today-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.ic-today-head .v2-eyebrow { margin: 0; }
.ic-today-note { color: var(--text-secondary); font-size: var(--font-size-sm); }
.ic-today-note i { color: var(--color-warning); }
.ic-today-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  padding: 0 18px;
}
.ic-today-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  text-align: left;
}
.ic-today-row:last-child { border-bottom: 0; }
.ic-today-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-round);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}
.ic-today-row.is-alert .ic-today-icon { color: var(--accent-color); }
.ic-today-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ic-today-title { font-weight: var(--font-weight-semibold); }
.ic-today-detail { color: var(--text-secondary); font-size: var(--font-size-sm); }
.ic-today-row.is-alert .ic-today-detail { color: var(--text-primary); }
.ic-today-meter { margin-top: 4px; max-width: 240px; }
.ic-today-value { flex: none; font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.ic-today-chevron { flex: none; color: var(--text-muted); font-size: var(--font-size-xs); transition: transform var(--transition-fast); }
.ic-today-row:hover .ic-today-chevron,
.ic-today-lead:hover .ic-today-chevron { transform: translateX(2px); color: var(--text-primary); }
@media (prefers-reduced-motion: reduce) {
  .ic-today-row:hover .ic-today-chevron,
  .ic-today-lead:hover .ic-today-chevron { transform: none; }
}

/* ==========================================================================
   Rooms, part 6a: the pieces every room shares, and Play
   ========================================================================== */

/* ---- Sub-rooms (Play: quests/achievements/games, Store: categories) ---- */
#view-iron-center .ic-station-rail {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 2px;
  max-width: 100%;
  margin-bottom: 24px;
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: var(--radius-pill);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
}
#view-iron-center .ic-station-rail::-webkit-scrollbar { display: none; }
#view-iron-center .ic-station {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
#view-iron-center .ic-station i { font-size: 12px; }
#view-iron-center .ic-station:hover { color: var(--text-primary); }
#view-iron-center .ic-station.active {
  background: var(--bg-hover);
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}
#view-iron-center .ic-station.active i { color: var(--accent-color); }
/* The sliding pill behind the active sub-room (js/iron-center.js _syncStationPills). */
#view-iron-center .ic-station-rail { position: relative; isolation: isolate; }
#view-iron-center .ic-station { position: relative; z-index: 1; }
#view-iron-center .ic-station-pill {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  z-index: 0;
  border-radius: var(--radius-pill);
  background: var(--bg-hover);
  transform-origin: 0 50%;
  will-change: transform;
  pointer-events: none;
}
#view-iron-center .ic-station-rail.has-pill .ic-station.active { background: transparent; }
@media (prefers-reduced-motion: reduce) {
  #view-iron-center .ic-station-pill { transition: none !important; }
}
.light-mode #view-iron-center .ic-station.active i { color: var(--accent-solid); }

/* ---- One-line explainer (dismissible) ---------------------------------- */
#view-iron-center .ic-help {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 24px;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}
#view-iron-center .ic-help-icon { flex: none; width: 20px; padding-top: 2px; text-align: center; color: var(--accent-color); }
#view-iron-center .ic-help-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#view-iron-center .ic-help-copy strong { color: var(--text-primary); font-weight: var(--font-weight-semibold); }
#view-iron-center .ic-help-copy small { font-size: inherit; }
#view-iron-center .ic-help-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-round);
  color: var(--text-muted);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
#view-iron-center .ic-help-close:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ---- Section title: the gold mark, the words, side notes on the right -- */
#view-iron-center .ic-section { margin-bottom: 32px; }
#view-iron-center .ic-section-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-size: var(--font-size-2xs);
  line-height: 16px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
#view-iron-center .ic-section-label::before {
  content: '';
  flex: none;
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: var(--iron-gold);
}
.light-mode #view-iron-center .ic-section-label::before { background: var(--iron-gold-deep); }
#view-iron-center .ic-section-label > span > i { display: none; }
#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-right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
#view-iron-center .ic-section-count,
#view-iron-center .ic-timer-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-stretch: 100%;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
#view-iron-center .ic-timer-pill i { font-size: 10px; }
#view-iron-center .ic-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  font-family: var(--font-body);
  font-stretch: 100%;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-primary);
  transition: background-color var(--transition-fast);
}
#view-iron-center .ic-refresh-btn:hover { background: var(--bg-hover); }
#view-iron-center .ic-refresh-btn:disabled { opacity: 0.5; }
#view-iron-center .ic-refresh-cost { display: inline-flex; align-items: center; gap: 3px; color: var(--iron-gold); }
.light-mode #view-iron-center .ic-refresh-cost { color: var(--iron-gold-deep); }

/* ---- Progress bar + count ---------------------------------------------- */
#view-iron-center .ic-progress { display: flex; align-items: center; gap: 12px; }
#view-iron-center .ic-bar-text {
  flex: none;
  min-width: 44px;
  text-align: right;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---- Quests and achievements: one list, a row each --------------------- */
#view-iron-center .ic-quests-grid,
#view-iron-center .ic-ach-list {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  padding: 0 18px;
}
#view-iron-center .ic-quest-card,
#view-iron-center .ic-ach-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-color);
}
#view-iron-center .ic-quest-card:last-child,
#view-iron-center .ic-ach-card:last-child { border-bottom: 0; }
#view-iron-center .ic-quest-icon,
#view-iron-center .ic-ach-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-round);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 15px;
}
#view-iron-center .ic-quest-card.is-ready .ic-quest-icon,
#view-iron-center .ic-ach-icon.unlocked { color: var(--iron-gold); background: var(--iron-gold-soft); }
.light-mode #view-iron-center .ic-quest-card.is-ready .ic-quest-icon,
.light-mode #view-iron-center .ic-ach-icon.unlocked { color: var(--iron-gold-deep); }
#view-iron-center .ic-quest-main,
#view-iron-center .ic-ach-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
#view-iron-center .ic-quest-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
#view-iron-center .ic-quest-title,
#view-iron-center .ic-ach-title { font-weight: var(--font-weight-semibold); font-size: var(--font-size-md); }
#view-iron-center .ic-quest-reward {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--iron-gold);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.light-mode #view-iron-center .ic-quest-reward { color: var(--iron-gold-deep); }
#view-iron-center .ic-quest-desc,
#view-iron-center .ic-ach-desc { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.45; }
#view-iron-center .ic-quest-main .ic-progress,
#view-iron-center .ic-ach-body .ic-progress { margin-top: 6px; }
#view-iron-center .ic-quest-card.completed,
#view-iron-center .ic-ach-card.completed { opacity: 0.6; }
#view-iron-center .ic-quest-done,
#view-iron-center .ic-ach-done,
#view-iron-center .ic-claim-btn.claimed {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  background: none;
  border: 0;
  padding: 0;
  height: auto;
}
#view-iron-center .ic-claim-btn,
#view-iron-center .ic-ach-claim-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  background: var(--iron-gold);
  color: var(--text-inverse);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  transition: background-color var(--transition-fast);
}
#view-iron-center .ic-claim-btn:hover,
#view-iron-center .ic-ach-claim-btn:hover { background: var(--iron-gold-bright); }
#view-iron-center .ic-claim-btn:disabled:not(.claimed) { opacity: 0.6; }

/* Achievements extras */
#view-iron-center .ic-milestones-desc { margin: -4px 0 12px; font-size: var(--font-size-sm); color: var(--text-secondary); }
#view-iron-center .ic-ach-class {
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-color);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
  text-transform: capitalize;
  vertical-align: 2px;
}
#view-iron-center .ic-ach-memory { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--font-size-xs); color: var(--text-muted); }
#view-iron-center .ic-ach-memory > span:first-child { color: var(--text-secondary); text-transform: capitalize; font-weight: var(--font-weight-semibold); }
#view-iron-center .ic-ach-action { flex: none; display: flex; align-items: center; gap: 8px; }
#view-iron-center .ic-ach-reward-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--iron-gold);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.light-mode #view-iron-center .ic-ach-reward-pill { color: var(--iron-gold-deep); }
#view-iron-center .ic-ach-pin-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
#view-iron-center .ic-ach-pin-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
#view-iron-center .ic-ach-pin-btn.is-pinned { border-color: var(--accent-color); color: var(--text-primary); }
#view-iron-center .ic-ach-pin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}
#view-iron-center .ic-ach-pin-toolbar button {
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--accent-color);
  color: var(--accent-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

@media (max-width: 600px) {
  #view-iron-center .ic-station-rail { display: flex; }
  #view-iron-center .ic-station { flex: 1; padding: 0 10px; }
  #view-iron-center .ic-quests-grid,
  #view-iron-center .ic-ach-list { padding: 0 14px; }
  #view-iron-center .ic-quest-card,
  #view-iron-center .ic-ach-card { flex-wrap: wrap; gap: 12px; }
  #view-iron-center .ic-quest-main,
  #view-iron-center .ic-ach-body { flex-basis: calc(100% - 56px); }
  #view-iron-center .ic-claim-btn,
  #view-iron-center .ic-ach-action { margin-left: 56px; }
}

/* ==========================================================================
   Rooms, part 6b: Store
   --------------------------------------------------------------------------
   Overrides on purpose rather than a purge: the cosmetic previews (frames
   and effects) are drawn by rules that name .ic-shop-preview, and those
   must keep working. Scoped to the view so they win on specificity.
   ========================================================================== */
#view-iron-center .ic-shop-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
#view-iron-center .ic-shop-head .ic-station-rail { margin-bottom: 0; }
#view-iron-center .ic-shop-meta { display: flex; align-items: center; gap: 14px; font-size: var(--font-size-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
#view-iron-center .ic-shop-balance {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--iron-gold);
  font-weight: var(--font-weight-semibold);
}
.light-mode #view-iron-center .ic-shop-balance { color: var(--iron-gold-deep); }
#view-iron-center .ic-shop-intro { margin-bottom: 16px; font-size: var(--font-size-sm); color: var(--text-secondary); }

#view-iron-center .ic-shop-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
#view-iron-center .ic-shop-item {
  gap: 10px;
  padding: 20px 16px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: none;
  transition: border-color var(--transition-fast);
}
#view-iron-center .ic-shop-item:hover { transform: none; box-shadow: none; border-color: var(--border-strong); }
#view-iron-center .ic-shop-item.owned { border-color: var(--border-color); }
#view-iron-center .ic-shop-preview:not([class*="avatar-"]) { border-radius: var(--radius-lg); box-shadow: none; }
#view-iron-center .ic-shop-name { font-size: var(--font-size-md); }
#view-iron-center .ic-shop-desc { font-size: var(--font-size-xs); }
#view-iron-center .ic-shop-desc:empty { display: none; }

#view-iron-center .ic-shop-buy-btn,
#view-iron-center .ic-shop-use-btn,
#view-iron-center .ic-shop-admin-btn {
  width: 100%;
  height: 36px;
  margin-top: auto;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  transform: none;
  filter: none;
}
/* Paid in IRON: gold, but an outline — a wall of solid gold buttons made
   every tile shout. The fill arrives on hover. */
#view-iron-center .ic-shop-buy-btn {
  background: none;
  border: 1px solid color-mix(in srgb, var(--iron-gold) 55%, transparent);
  color: var(--iron-gold);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
#view-iron-center .ic-shop-buy-btn .iron-diamond { color: currentColor; }
#view-iron-center .ic-shop-buy-btn:hover:not(:disabled) { background: var(--iron-gold); color: var(--text-inverse); transform: none; }
#view-iron-center .ic-shop-buy-btn:disabled { border-color: var(--border-color); color: var(--text-muted); background: none; }
.light-mode #view-iron-center .ic-shop-buy-btn { color: var(--iron-gold-deep); border-color: color-mix(in srgb, var(--iron-gold-deep) 55%, transparent); }
#view-iron-center .ic-shop-use-btn { background: none; border: 1px solid var(--border-strong); color: var(--text-primary); }
#view-iron-center .ic-shop-use-btn:hover:not(.in-use) { background: var(--bg-hover); transform: none; }
#view-iron-center .ic-shop-use-btn.in-use { background: none; border-color: var(--accent-color); color: var(--text-primary); }
#view-iron-center .ic-shop-admin-btn { height: 32px; margin-top: 0; border-radius: var(--radius-pill); font-size: var(--font-size-xs); }
#view-iron-center .ic-shop-owned-label { font-size: var(--font-size-xs); color: var(--text-muted); }

#view-iron-center .ic-shop-wish {
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--text-muted);
}
#view-iron-center .ic-shop-wish:hover { background: var(--bg-hover); color: var(--text-primary); border: 0; }
#view-iron-center .ic-shop-wish.is-wished { background: none; color: var(--color-danger); border: 0; }

/* Reward containers + merchant boxes: one flat row each. */
#view-iron-center .ic-reward-container-strip,
#view-iron-center .ic-merchant-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  box-shadow: none;
  transform: none;
}
#view-iron-center .ic-merchant-card { margin-bottom: 0; }
#view-iron-center .ic-merchant-card:hover { transform: none; }
#view-iron-center .ic-reward-container-icon,
#view-iron-center .ic-merchant-card-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-round);
  background: var(--iron-gold-soft);
  color: var(--iron-gold);
  box-shadow: none;
  font-size: 16px;
}
#view-iron-center .ic-reward-container-title { font-weight: var(--font-weight-semibold); color: var(--text-primary); }
#view-iron-center .ic-reward-container-sub { font-size: var(--font-size-sm); color: var(--text-secondary); }
#view-iron-center .ic-merchant-open-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  background: var(--iron-gold);
  color: var(--text-inverse);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  box-shadow: none;
}
#view-iron-center .ic-merchant-open-btn:hover:not(:disabled) { background: var(--iron-gold-bright); transform: none; }
#view-iron-center .ic-merchant-open-btn .iron-diamond { color: currentColor; }

@media (max-width: 600px) {
  #view-iron-center .ic-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #view-iron-center .ic-shop-item { padding: 16px 12px 12px; }
  #view-iron-center .ic-shop-head { flex-direction: column; align-items: stretch; }
  #view-iron-center .ic-shop-meta { justify-content: space-between; }
  #view-iron-center .ic-station-rail--sub .ic-station { flex: none; }
  #view-iron-center .ic-reward-container-strip { flex-wrap: wrap; }
  #view-iron-center .ic-reward-container-body { flex: 1 1 calc(100% - 60px); min-width: 0; margin-right: 0; }
  #view-iron-center .ic-reward-container-strip .ic-merchant-open-btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Rooms, part 6c: Forge stats and Arena standings
   ========================================================================== */

/* Forge stats: three figures in a row, split by hairlines — no box around
   them and no box around each. */
#view-iron-center .ic-forge-stats-section,
#view-iron-center .ic-forge-stats-wrap {
  margin-bottom: 32px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#view-iron-center .ic-forge-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
#view-iron-center .ic-forge-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 4px 20px;
  background: none;
  border: 0;
  border-left: 1px solid var(--border-color);
  border-radius: 0;
  box-shadow: none;
  text-align: left;
}
#view-iron-center .ic-forge-stat:first-child { padding-left: 0; border-left: 0; }
#view-iron-center .ic-forge-stat-num {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-size: var(--font-size-title);
  line-height: 1.1;
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}
#view-iron-center .ic-forge-stat-label {
  font-size: var(--font-size-xs);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}

/* Standings: one list, a hairline between rows; your row is a soft wash. */
#view-iron-center .ic-lb-list {
  gap: 0;
  padding: 4px;
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
}
#view-iron-center .ic-lb-row {
  padding: 10px 12px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
}
#view-iron-center .ic-lb-row:last-child { border-bottom: 0; }
#view-iron-center .ic-lb-row.ic-lb-me {
  background: var(--accent-subtle);
  border: 0;
  border-radius: var(--radius-md);
}

#view-iron-center .ic-lb-breakdown-toggle { margin-bottom: 8px; }
#view-iron-center .ic-lb-breakdown + * ,
#view-iron-center .ic-lb-breakdown-toggle + .ic-lb-breakdown:not(.open) + * { margin-top: 24px; }

/* ---- Sequential reveal (js: IronCenter._watchReveals) ------------------- */
/* Waiting items are invisible until they scroll into view, then rise in
   order; a repaint never replays them. */
#view-iron-center .stagger-children > * { animation: none; }
#view-iron-center .stagger-children > .ic-reveal-wait { opacity: 0; }
#view-iron-center .stagger-children > .ic-reveal-run { animation: ic-rise 260ms var(--island-ease) backwards; }
@media (prefers-reduced-motion: reduce) {
  #view-iron-center .stagger-children > .ic-reveal-wait { opacity: 1; }
  #view-iron-center .stagger-children > .ic-reveal-run { animation: none; }
}


/* ---- Arena: weekly recognition boards as one list ---------------------- */
#view-iron-center .ic-recognition-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 18px;
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
}
#view-iron-center .ic-recognition-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 64px 64px;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
  box-shadow: none;
}
#view-iron-center .ic-recognition-card:last-child { border-bottom: 0; }
#view-iron-center .ic-recognition-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-round);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  box-shadow: none;
}
#view-iron-center .ic-recognition-card > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#view-iron-center .ic-recognition-card > span small { font-size: var(--font-size-xs); color: var(--text-muted); text-transform: none; letter-spacing: 0; }
#view-iron-center .ic-recognition-card > span strong { font-weight: var(--font-weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-iron-center .ic-recognition-card > div:not(.ic-recognition-icon) { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
#view-iron-center .ic-recognition-card > div b { font-variant-numeric: tabular-nums; }
#view-iron-center .ic-recognition-card > div small { font-size: var(--font-size-2xs); color: var(--text-muted); text-transform: none; letter-spacing: 0; }
@media (max-width: 600px) {
  #view-iron-center .ic-recognition-grid { padding: 0 14px; }
  #view-iron-center .ic-recognition-card { grid-template-columns: 32px minmax(0, 1fr) 48px 48px; gap: 10px; }
}

/* ---- Arena: community quest ("Together") ------------------------------- */
/* A legacy rule zeroed the card's side padding while another kept its
   border, so the icon sat against the frame. One flat surface, padded. */
#view-iron-center .ic-together-card {
  padding: 16px 18px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  box-shadow: none;
}
#view-iron-center .ic-together-icon {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--radius-round);
  background: var(--bg-tertiary);
}

/* ---- Room tabs on desktop: the Communication bar's sliding pill --------- */
/* The rooms read as one segmented control like Friends · Whispers · Posts:
   a hairline track, and the selection a soft pill that glides from room to
   room (IronCenter._moveIndicator: translate + scaleX, radius kept round).
   Phones keep their station rail. */
@media (min-width: 769px) {
  #view-iron-center .iron-center-view .ic-sub-nav {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto var(--space-lg);
    padding: 4px;
    gap: 2px;
    align-items: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    overflow: visible;
  }
  #view-iron-center .iron-center-view .ic-sub-tab {
    position: relative;
    z-index: 1;
    flex-direction: row;
    align-items: center;
    height: 34px;
    padding: 0 16px;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0;
    transition: color var(--transition-fast), background-color var(--transition-fast);
  }
  #view-iron-center .iron-center-view .ic-sub-tab:not(.active):hover { background: var(--border-color); }
  #view-iron-center .iron-center-view .ic-sub-tab.active { font-weight: var(--font-weight-semibold); }
  #view-iron-center .iron-center-view .ic-sub-nav .ic-indicator {
    top: 4px;
    bottom: auto;
    left: -1px;   /* measured from the border edge; placed in the padding box */
    height: calc(100% - 8px);
    border-radius: var(--radius-pill);
    background: var(--bg-hover);
  }
  #view-iron-center .iron-center-view .ic-sub-tab .ic-tab-hint { top: -4px; right: -2px; }
}

/* The weekly tournament and friendly challenges are cards (above): their
   title, text and controls sit inside the card's padding, not on its edge. */
#view-iron-center :is(.ic-tournament, .ic-challenges) { padding: var(--space-md) var(--space-lg) var(--space-lg); }

/* The greeting's name wears the sign-in page's accent gradient (.fg-accent). */
.ic-home-title .ic-home-name {
  background: linear-gradient(120deg, var(--accent-color), var(--accent-hover));
  background: linear-gradient(120deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 62%, var(--text-on-accent)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* The sticky "you" row in the leaderboard: the tint sits on an opaque base, so
   rows scrolling under it never show through its name. */
#view-iron-center .ic-lb-row.ic-lb-me {
  background: linear-gradient(var(--accent-subtle), var(--accent-subtle)), var(--bg-secondary);
  z-index: 1;
}

/* A just-claimed button reads like the "Claimed" note it becomes on reload
   (the base button rule above came later and kept the gold fill). */
#view-iron-center .ic-claim-btn.claimed { background: none; color: var(--text-muted); cursor: default; }