/* styles/biomes/gateway.css
   Biome 2 — The Foundry (Gateway).
   Industrial brown-on-brown. Brass fittings. Monospaced labels.
   The most mechanical biome — visible machinery, conveyor belt,
   the raw Intent compressed into a structured packet. */

:root {
  --foundry-bg:        #3a2818;
  --foundry-bg-deep:   #1a1208;
  --foundry-brass:     #c89858;
  --foundry-brass-d:   #806036;
  --foundry-metal:     #2a2018;
  --foundry-metal-lit: #4a3a2a;
  --foundry-text:      rgba(248, 232, 192, 0.88);
  --foundry-warn:      #ff9050;
  --foundry-crit:      #ff5040;
}

#gateway {
  background:
    radial-gradient(ellipse 80% 70% at 50% 55%,
      var(--foundry-bg) 0%,
      #2a1c0c 60%,
      var(--foundry-bg-deep) 100%);
}

/* Atmospheric vignette + subtle grime overlay */
#gateway::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 30% at 50% 100%, rgba(0,0,0,0.6), transparent 70%),
    radial-gradient(ellipse 100% 40% at 50% 0%, rgba(0,0,0,0.5), transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* ---------- BACK-WALL MACHINERY (SVG ribs + gauges + beam) ----------
   Cinematic depth layer behind the belt. Pure vector — no images, no
   filters that would jank on lower-end displays. Inherits the scene's
   fade-in opacity since it shares #gateway's stacking context. */
.foundry-back-wall {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1600ms ease;
}
#gateway.assembled .foundry-back-wall { opacity: 0.85; }

/* ---------- OVERHEAD FIXTURE LIGHTS ----------
   Three tungsten pools at the top of the wall. Each is a small div
   with a radial-gradient backdrop, blurred for soft falloff. They
   breathe out-of-sync so the wall feels lit by a working machine
   room, not by a single steady source. */
.foundry-fixture-light {
  position: absolute;
  top: 4%;
  width: 320px;
  height: 180px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 100% at 50% 0%,
    rgba(255, 200, 120, 0.20) 0%,
    rgba(255, 168, 88, 0.10)  35%,
    transparent                75%);
  filter: blur(4px);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 1600ms ease;
  animation: foundry-fixture-breathe 11s ease-in-out infinite;
}
#gateway.assembled .foundry-fixture-light { opacity: 1; }
/* Stagger the breathing — middle light slower with a phase offset
   so the wall never reads as a stadium-light array. */
.foundry-fixture-light.center {
  animation-duration: 13s;
  animation-delay: -4s;
  width: 380px;
  height: 200px;
}
.foundry-fixture-light:last-of-type {
  animation-duration: 9s;
  animation-delay: -2s;
}
@keyframes foundry-fixture-breathe {
  0%, 100% { transform: translateX(-50%) scale(1);    opacity: 0.85; }
  50%      { transform: translateX(-50%) scale(1.04); opacity: 1; }
}

/* ---------- STEAM PUFF (ambient event) ----------
   Bubbles up from the conveyor every 8–14s. Reads as machine breath.
   Position is set inline by the spawner. */
.foundry-steam {
  position: absolute;
  top: 14%;
  width: 120px;
  height: 60px;
  margin-left: -60px;
  background: radial-gradient(ellipse 60% 80% at 50% 100%,
    rgba(240, 232, 216, 0.08) 0%,
    rgba(240, 232, 216, 0.04) 40%,
    transparent                80%);
  filter: blur(3px);
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  animation: foundry-steam-rise 2800ms ease-out forwards;
}
@keyframes foundry-steam-rise {
  0%   { opacity: 0;   transform: translateY(0)     scale(0.4); }
  20%  { opacity: 0.9; }
  100% { opacity: 0;   transform: translateY(-90px) scale(1.4); }
}

/* ---------- ASSEMBLY PATTERN ----------
   Foundry interactive elements default to invisible. The runtime adds
   `.assembled` to #gateway after the orientation prose has cleared,
   which fades the machinery in. This prevents the System voice from
   overlapping the card during biome entry. */

#foundry-belt,
#foundry-tiles,
#foundry-card,
#foundry-timer {
  opacity: 0;
  transition: opacity 1600ms ease;
}
#gateway.assembled #foundry-belt,
#gateway.assembled #foundry-tiles,
#gateway.assembled #foundry-card,
#gateway.assembled #foundry-timer {
  opacity: 1;
}

/* ---------- CONVEYOR BELT (uses top zone — Narrator silent here) ---------- */

#foundry-belt {
  position: absolute;
  top: 14%;
  left: 0; right: 0;
  height: 96px;
  z-index: 2;
  background: linear-gradient(180deg,
    #0e0904 0%,
    #1a1208 50%,
    #0e0904 100%);
  border-top: 2px solid var(--foundry-brass-d);
  border-bottom: 2px solid var(--foundry-brass-d);
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.7),
    0 6px 20px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

/* End-rollers — brass cylinders bookending the belt */
#foundry-belt::before,
#foundry-belt::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    var(--foundry-brass) 0%,
    var(--foundry-brass-d) 70%,
    #4a3018 100%);
  transform: translateY(-50%);
  box-shadow:
    0 3px 5px rgba(0, 0, 0, 0.7),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4);
  z-index: 3;
}
#foundry-belt::before { left: 12px; }
#foundry-belt::after  { right: 12px; }

/* Moving stripe pattern — gives the belt a sense of motion */
.belt-stripes {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(200, 152, 88, 0.10) 0 28px,
    transparent 28px 72px
  );
  background-size: 72px 100%;
  animation: belt-move 5s linear infinite;
}
@keyframes belt-move {
  from { background-position-x: 0; }
  to   { background-position-x: 72px; }
}

/* ---------- DATA TILES ---------- */

#foundry-tiles {
  position: absolute;
  top: 14%;
  left: 0; right: 0;
  height: 96px;
  z-index: 4;
  pointer-events: none;  /* tiles handle their own */
}

.data-tile {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 64px;
  min-width: 96px;
  padding: 0 14px;
  background: linear-gradient(180deg,
    var(--foundry-metal-lit) 0%,
    var(--foundry-metal) 100%);
  border: 1px solid var(--foundry-brass-d);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(248, 232, 192, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 3px 8px rgba(0, 0, 0, 0.7);
  /* `pointer` not `grab` — the mechanic is click-to-pick + click-to-
     place, not drag-and-drop. The previous `grab` cursor was lying;
     players tried to drag, found nothing happened, and assumed the
     game was broken. (P1-A.) */
  cursor: pointer;
  /* touch-action: manipulation removes the 300ms tap-delay on touch
     devices and disables double-tap zoom on the tile itself. Click
     listeners continue to work unchanged. (P1-C.) */
  touch-action: manipulation;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  pointer-events: auto;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.data-tile:hover {
  transform: translateY(-50%) translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(248, 232, 192, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 6px 14px rgba(0, 0, 0, 0.8);
}
.data-tile.selected {
  border-color: var(--foundry-brass);
  background: linear-gradient(180deg, #5a4a36 0%, #3a2e1e 100%);
  transform: translateY(-50%) translateY(-4px) scale(1.06);
  box-shadow:
    inset 0 1px 0 rgba(248, 232, 192, 0.4),
    0 0 32px 6px rgba(200, 152, 88, 0.6),
    0 8px 18px rgba(0, 0, 0, 0.85);
  z-index: 5;
  /* Animated pulse — was a static glow; players missed the post-click
     feedback. Now the selected tile breathes so the player KNOWS the
     click landed AND knows to look elsewhere (slots) next. (P1-B.) */
  animation: tile-selected-pulse 1400ms ease-in-out infinite;
}
@keyframes tile-selected-pulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(248, 232, 192, 0.4),
      0 0 32px 6px rgba(200, 152, 88, 0.55),
      0 8px 18px rgba(0, 0, 0, 0.85);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(248, 232, 192, 0.55),
      0 0 44px 10px rgba(248, 232, 192, 0.75),
      0 8px 18px rgba(0, 0, 0, 0.85);
  }
}
@media (prefers-reduced-motion: reduce) {
  .data-tile.selected { animation: none; }
}
.data-tile.placed {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateY(-6px) scale(0.85);
  transition: opacity 320ms ease, transform 320ms ease;
}
.data-tile-label {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.28em;
  color: var(--foundry-brass);
  text-transform: uppercase;
  line-height: 1;
}
.data-tile-value {
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--foundry-text);
  margin-top: 6px;
  line-height: 1;
  white-space: nowrap;
}

/* ---------- CARD-SHAPED API REQUEST TEMPLATE ---------- */

#foundry-card {
  position: absolute;
  /* Centered vertically in the central safe zone (between Narrator's
     top and System's bottom reservations). Card height ~42% of
     viewport, leaving ~11% buffer above/below for inner voices and
     any brief mid-game system intervention. */
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, 84vw);
  aspect-ratio: 1.586 / 1;   /* ISO/IEC 7810 ID-1 — credit card proportions */
  z-index: 3;
  padding: 52px 40px 32px 40px;
  border: 2px solid var(--foundry-brass-d);
  border-radius: 12px;
  background-color: var(--foundry-metal);
  background-image:
    radial-gradient(circle at 14px 14px,       var(--foundry-brass) 0 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 14px) 14px,       var(--foundry-brass) 0 3px, transparent 3.5px),
    radial-gradient(circle at 14px calc(100% - 14px),       var(--foundry-brass) 0 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), var(--foundry-brass) 0 3px, transparent 3.5px),
    linear-gradient(135deg, var(--foundry-metal) 0%, var(--foundry-metal-lit) 100%);
  box-shadow:
    inset 0 2px 0 rgba(248, 232, 192, 0.14),
    inset 0 -2px 0 rgba(0, 0, 0, 0.6),
    0 20px 50px rgba(0, 0, 0, 0.75);

  transition:
    border-color 1200ms ease,
    box-shadow  1200ms ease;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 28px;
  align-content: center;
}
#foundry-card::before {
  content: 'PAYMENT AUTH REQUEST';
  position: absolute;
  top: 18px; left: 28px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  color: var(--foundry-brass);
  opacity: 0.75;
}
#foundry-card::after {
  content: 'REQ#____________________';
  position: absolute;
  top: 18px; right: 28px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: rgba(200, 152, 88, 0.4);
}

.card-slot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.card-slot.span-2 { grid-column: span 2; }

.slot-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: var(--foundry-brass);
  text-transform: uppercase;
}

.slot-target {
  height: 38px;
  border: 1px dashed rgba(200, 152, 88, 0.4);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--foundry-text);
  cursor: pointer;
  /* touch-action: manipulation removes the 300ms tap-delay (P1-C). */
  touch-action: manipulation;
  transition: border-color 200ms ease, background 200ms ease;
}
/* Attention pulse — fires on empty slots WHEN a tile is selected. The
   player has clicked a tile; the slots literally light up to say
   "click one of us next." Without this, post-click feedback used to
   read as "nothing happened." (P1-B.) */
.slot-target.attention {
  border-color: rgba(248, 232, 192, 0.7);
  background: rgba(80, 56, 28, 0.32);
  animation: slot-attention-pulse 1400ms ease-in-out infinite;
}
@keyframes slot-attention-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(248, 232, 192, 0);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(248, 232, 192, 0.25);
  }
}
@media (prefers-reduced-motion: reduce) {
  .slot-target.attention { animation: none; }
}
.slot-target.dropping {
  border-color: var(--foundry-brass);
  background: rgba(200, 152, 88, 0.14);
}
.slot-target.filled {
  border-style: solid;
  border-color: var(--foundry-brass-d);
  background: rgba(0, 0, 0, 0.4);
}
.slot-target.error {
  border-color: rgba(220, 80, 60, 0.7);
  /* Bumped from 0.7 alpha border-only to add a red bg flash so the
     player FEELS the failure even out of the corner of their eye. */
  background: rgba(220, 80, 60, 0.18);
  box-shadow: 0 0 16px rgba(220, 80, 60, 0.35);
  animation: slot-shake 320ms;
}
/* Tile being held also shakes when its drop fails — pairs with the
   slot's red flash so the player has TWO motion cues, not one. */
.data-tile.error-shake {
  animation: tile-error-shake 320ms ease-in-out;
}
@keyframes tile-error-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-3px); }
  60%      { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .data-tile.error-shake { animation: none; }
}

/* Success state — card transforms from brass to packet-blue. This is
   the Intent's visual transformation: hopeful gold → structured packet. */
#foundry-card.complete {
  border-color: var(--packet-glow);
  background-color: #1a2230;
  box-shadow:
    inset 0  2px 0 rgba(184, 224, 255, 0.30),
    inset 0 -2px 0 rgba(0, 0, 0, 0.6),
    0  0 60px 10px rgba(184, 224, 255, 0.35),
    0 20px 50px  rgba(0, 0, 0, 0.75);
}
#foundry-card.complete .slot-target.filled {
  border-color: rgba(184, 224, 255, 0.5);
  color: rgba(220, 235, 255, 0.95);
}
#foundry-card.complete .slot-label {
  color: rgba(184, 224, 255, 0.7);
  transition: color 1200ms ease;
}
#foundry-card.complete::before {
  color: rgba(184, 224, 255, 0.75);
  transition: color 1200ms ease;
}

/* ---------- TIMEOUT FEEDBACK ----------
   Card border + glow shifts to toll red-orange. Unfilled slots pulse
   with a warning ring so the friction sources are individually visible.
   This is the "you didn't make it — and here's why it'll hurt downstream"
   moment. Pairs with the Schema voice line about +5 friction. */
#foundry-card.timeout {
  border-color: rgba(232, 144, 80, 0.7);
  background-color: #2a1810;
  box-shadow:
    inset 0  2px 0 rgba(232, 144, 80, 0.30),
    inset 0 -2px 0 rgba(0, 0, 0, 0.6),
    0  0 60px 12px rgba(232, 144, 80, 0.30),
    0 20px 50px  rgba(0, 0, 0, 0.75);
  transition: border-color 800ms ease, background-color 800ms ease, box-shadow 800ms ease;
}
.slot-target.timeout-unfilled {
  border-color: rgba(232, 144, 80, 0.65);
  color: rgba(232, 168, 120, 0.85);
  background-color: rgba(80, 30, 12, 0.35);
  animation: slot-timeout-pulse 1800ms ease-in-out infinite;
}
@keyframes slot-timeout-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 144, 80, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(232, 144, 80, 0.25); }
}
@media (prefers-reduced-motion: reduce) {
  .slot-target.timeout-unfilled { animation: none; }
}

@keyframes slot-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

/* ---------- TIMER (top-right corner) ---------- */

#foundry-timer-wrap {
  position: absolute;
  top: 3vh;
  right: 4vw;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.timer-sublabel {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.28em;
  color: rgba(200, 152, 88, 0.55);
  text-transform: uppercase;
}

#foundry-timer {
  position: relative;
  top: auto;
  right: auto;
  z-index: 5;
  font-family: var(--mono);
  font-size: 1.5rem;
  letter-spacing: 0.18em;
  color: var(--foundry-brass);
  text-shadow: 0 0 14px rgba(200, 152, 88, 0.45);
  background: rgba(14, 9, 4, 0.75);
  border: 1px solid var(--foundry-brass-d);
  padding: 8px 18px;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}
#foundry-timer.warning {
  color: var(--foundry-warn);
  text-shadow: 0 0 14px rgba(255, 144, 80, 0.6);
}
#foundry-timer.critical {
  color: var(--foundry-crit);
  text-shadow: 0 0 16px rgba(255, 80, 64, 0.7);
  animation: timer-pulse 0.5s ease-in-out infinite;
}
@keyframes timer-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* ---------- EXIT TO CUSTOMS (appears post-completion) ---------- */

#foundry-exit {
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  color: rgba(200, 152, 88, 0.55);
  opacity: 0;
  transition: opacity 1200ms ease;
}
#foundry-exit.visible { opacity: 1; }

/* ---------- REDUCED MOTION ---------- */

/* ---------- START BUTTON (gates the timer) ---------- */

#foundry-start {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  z-index: 6;
  background: linear-gradient(180deg,
    rgba(90, 60, 36, 0.95) 0%,
    rgba(50, 30, 14, 0.95) 100%);
  border: 2px solid var(--foundry-brass);
  border-radius: 4px;
  padding: 16px 36px;
  cursor: pointer;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  color: rgba(255, 244, 208, 0.95);
  box-shadow:
    0 0 24px rgba(200, 152, 88, 0.35),
    0 8px 22px rgba(0, 0, 0, 0.7);
  transition: all 200ms ease;
}
#foundry-start.revealed { display: inline-flex; }
#foundry-start:hover {
  background: linear-gradient(180deg,
    rgba(120, 80, 48, 0.98) 0%,
    rgba(72, 44, 22, 0.98) 100%);
  box-shadow:
    0 0 36px rgba(200, 152, 88, 0.55),
    0 12px 30px rgba(0, 0, 0, 0.85);
  transform: translateX(-50%) translateY(-2px);
}
#foundry-start:active {
  transform: translateX(-50%) translateY(1px) scale(0.97);
  box-shadow:
    0 0 16px rgba(200, 152, 88, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.7);
}
.fs-eyebrow {
  font-size: 0.55rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(200, 152, 88, 0.85);
}
.fs-label {
  font-size: 1.2rem;
  letter-spacing: 0.32em;
  font-weight: bold;
  text-transform: uppercase;
  color: rgba(255, 232, 168, 1);
  text-shadow: 0 0 14px rgba(255, 220, 140, 0.5);
}
.fs-hint {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: rgba(255, 244, 208, 0.6);
  margin-top: 2px;
}

/* ---------- FIRST-PLAY PRIMER (C4) ----------
   Brief teaching panel above the START button on the player's first
   Foundry. Gated by Ledger's firstEncountered.gateway_primer; later
   plays skip it. Named the task in plain words so first-attempt
   timeouts aren't from confusion. Auto-removed when Begin is clicked.

   Anchored at bottom: 22% — comfortably above the START button (8%)
   and below the central tile/slot stage. Brass + dark to match the
   biome's industrial palette. */
.foundry-primer {
  position: absolute;
  left: 50%;
  bottom: 22%;
  transform: translateX(-50%) translateY(8px);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 540px;
  padding: 16px 28px;
  background: linear-gradient(180deg,
    rgba(58, 40, 24, 0.95) 0%,
    rgba(26, 18, 8, 0.95) 100%);
  border: 1px solid rgba(200, 152, 88, 0.55);
  border-radius: 4px;
  font-family: var(--mono);
  box-shadow:
    0 0 22px rgba(200, 152, 88, 0.18),
    0 8px 24px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 600ms ease, transform 600ms ease;
  pointer-events: none;
}
.foundry-primer.revealed {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.fp-eyebrow {
  font-size: 0.5rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(200, 152, 88, 0.85);
}
.fp-line {
  font-family: var(--serif);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  line-height: 1.45;
  color: rgba(255, 244, 208, 0.92);
  text-align: center;
}
.fp-line em {
  font-style: italic;
  color: rgba(255, 232, 168, 1);
}
.fp-stakes {
  margin-top: 4px;
  font-size: 0.72rem;
  color: rgba(255, 168, 100, 0.78);
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

@media (prefers-reduced-motion: reduce) {
  .foundry-primer { transition-duration: 100ms; }
}

/* ---------- MARKETPLACE BOARDROOM MODE (T1-B) ----------
   Marketplace scenario skips the Foundry and reuses #gateway as a
   lighter Boardroom scene. body.marketplace-boardroom hides the
   machinery (belt, tiles, card, timer) so only the back-wall + fixture
   lights + chapter card + decision panel are visible. */

body.marketplace-boardroom #foundry-belt,
body.marketplace-boardroom #foundry-tiles,
body.marketplace-boardroom #foundry-card,
body.marketplace-boardroom #foundry-timer-wrap,
body.marketplace-boardroom #foundry-start,
body.marketplace-boardroom #foundry-exit {
  display: none !important;
}

/* The Boardroom panel is the centrepiece — slightly larger than the
   default Foundry-extra panel. */
.foundry-extra-panel.boardroom {
  width: min(38rem, 92vw);
  padding: 28px 36px;
}
.foundry-extra-panel.boardroom .fxp-title {
  font-size: 1.6rem;
}

/* ---------- FOUNDRY EXTRA DECISION PANEL ----------
   Shown post-tile-placement for cross_border (Route Choice) and
   marketplace (Commission Split). Same visual vocabulary as the
   continue-gate (mono caps + serif italic hint), but holds 2–3
   option buttons in a row. */

.foundry-extra-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateY(8px);
  z-index: 6;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 22px 32px;
  background: linear-gradient(180deg,
    rgba(20, 14, 8, 0.96) 0%,
    rgba(10, 7, 4, 0.96) 100%);
  border: 2px solid var(--foundry-brass);
  border-radius: 4px;
  box-shadow:
    0 0 36px rgba(200, 152, 88, 0.35),
    0 16px 40px rgba(0, 0, 0, 0.85);
  font-family: var(--mono);
  opacity: 0;
  transition: opacity 600ms ease, transform 600ms ease;
}
.foundry-extra-panel.revealed {
  display: flex;
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0);
}

.fxp-eyebrow {
  font-size: 0.55rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(200, 152, 88, 0.85);
}
.fxp-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  color: rgba(255, 244, 208, 0.98);
  text-align: center;
  letter-spacing: -0.005em;
}
.fxp-hint {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.88rem;
  color: rgba(255, 244, 208, 0.65);
  text-align: center;
  margin-bottom: 6px;
}

.fxp-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.fxp-option {
  flex: 1 1 0;
  min-width: 180px;
  max-width: 240px;
  padding: 14px 16px;
  background: rgba(50, 32, 16, 0.85);
  border: 1px solid rgba(200, 152, 88, 0.55);
  border-radius: 2px;
  color: rgba(255, 244, 208, 0.95);
  font-family: var(--mono);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  transition: all 200ms ease;
}
.fxp-option:hover {
  background: rgba(90, 60, 36, 0.92);
  border-color: rgba(255, 220, 160, 0.95);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6),
              0 0 18px rgba(200, 152, 88, 0.35);
}
.fxp-option:active {
  transform: translateY(0) scale(0.98);
  filter: brightness(1.15);
}

.fxp-option-label {
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: bold;
  color: rgba(255, 232, 168, 1);
}
.fxp-option-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(255, 244, 208, 0.75);
  letter-spacing: 0;
  text-transform: none;
}
.fxp-option-effect {
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(200, 152, 88, 0.78);
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed rgba(200, 152, 88, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  .foundry-extra-panel { transition-duration: 200ms; }
  .fxp-option          { transition-duration: 100ms; }
}

/* ---------- AMBIENT SPARKS (engine/ambient.js) ---------- */

.foundry-spark {
  position: absolute;
  top: 22%;
  width: 2px;
  height: 8px;
  background: linear-gradient(180deg, #ffd870 0%, #ff8030 100%);
  box-shadow: 0 0 10px rgba(255, 200, 120, 0.75);
  border-radius: 1px;
  z-index: 2;
  pointer-events: none;
  animation: foundry-spark-fall 1800ms cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
@keyframes foundry-spark-fall {
  0%   { opacity: 0; transform: translateY(0)     scale(1); }
  10%  { opacity: 1; }
  70%  { opacity: 0.7; }
  100% { opacity: 0; transform: translateY(80px)  scale(0.4); }
}

@media (prefers-reduced-motion: reduce) {
  .belt-stripes { animation: none; }
  .data-tile { transition-duration: 100ms; }
  #foundry-timer.critical { animation: none; }
  .slot-target.error { animation: none; }
  .foundry-spark { animation-duration: 600ms; }
  .foundry-fixture-light { animation: none; opacity: 0.9; }
  .foundry-steam { animation-duration: 900ms; }
}

/* ---------- MOBILE (C7) ----------
   The Foundry's 7-tile conveyor would overflow at 360px. Tiles get
   smaller and the row scrolls horizontally so the player can still
   read every field. The card grid collapses to a single column so
   each slot is full-width and large enough to tap. */
@media (max-width: 520px) {
  #foundry-tiles {
    /* Tiles are absolute-positioned by index in JS (left: X%). With
       smaller tiles the positions still distribute correctly across
       the row; we just give the row an explicit overflow so anything
       that overshoots the right edge stays scrollable. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    height: 84px;
  }
  .data-tile {
    min-width: 72px;
    height: 56px;
    padding: 0 10px;
    font-size: 0.72rem;
  }
  .data-tile-label { font-size: 0.52rem; }
  .data-tile-value { font-size: 0.7rem; }

  #foundry-card {
    width: min(320px, 94vw);
    grid-template-columns: 1fr;
    gap: 10px 14px;
    padding: 28px 18px 18px;
  }
  .slot-target {
    min-height: 44px;
    padding: 0 12px;
    font-size: 0.85rem;
  }
  #foundry-start { padding: 14px 24px; min-height: 48px; }
  .fs-hint { font-size: 0.72rem; }
  .foundry-primer { max-width: 92vw; padding: 14px 18px; }
  .fp-line { font-size: 0.78rem; }
}