/* ==========================================================================
   games.css — shared game chrome + Capital (1999) specifics.
   Games mount inside .term-stage and inherit the active era's CSS vars.
   ========================================================================== */

.game { font-family: var(--font-mono); color: var(--ink); }

.game-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.game-head .g-title {
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint);
}
.game-head .g-instr { font-size: clamp(12px, 3.4vw, 14px); color: var(--ink-soft); }

.game-hud {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.game-hud .stat { display: flex; flex-direction: column; line-height: 1.1; }
.game-hud .stat .k { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }
.game-hud .stat .v { font-size: clamp(20px, 6vw, 28px); font-weight: 700; }
.game-hud .stat .v.up { color: var(--accent); }
.game-hud .stat .v.down { color: #7a2a1e; }
.game-hud .goal { margin-left: auto; font-size: 11px; color: var(--ink-faint); letter-spacing: 0.1em; }

/* --- Capital: the four positions --- */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 520px) { .cap-grid { grid-template-columns: repeat(4, 1fr); } }

.cap-pos {
  appearance: none;
  border: 2px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 86%, #000 3%);
  border-radius: var(--radius);
  padding: 10px 10px 12px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 112px;
  transition: transform 90ms ease, border-color 160ms ease, background 160ms ease;
  touch-action: manipulation;
}
.cap-pos:hover { border-color: var(--ink-soft); }
.cap-pos:active { transform: translateY(1px); }
.cap-pos:disabled { cursor: default; opacity: 0.9; }
.cap-pos .cap-sym {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; letter-spacing: 0.14em; font-weight: 700;
}
.cap-pos .cap-last { font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.cap-pos svg { width: 100%; height: 42px; display: block; }
.cap-pos .spark { fill: none; stroke: var(--ink-soft); stroke-width: 2; }
.cap-pos .spark-base { stroke: var(--ink-faint); stroke-width: 0.75; opacity: 0.4; }

/* reveal states after a pick */
.cap-pos.correct { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--paper)); }
.cap-pos.correct .spark { stroke: var(--accent); }
.cap-pos.wrong { border-color: #7a2a1e; }
.cap-pos.wrong .spark { stroke: #7a2a1e; }
.cap-pos.edge-was { outline: 2px dashed var(--accent); outline-offset: 2px; }

/* footer: message + retry/continue */
.game-foot {
  margin-top: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  min-height: 30px;
}
.game-foot .msg { font-size: clamp(12px, 3.4vw, 14px); color: var(--ink-soft); }
.game-foot .msg.win { color: var(--accent); font-weight: 700; }
.game-foot .msg.lose { color: #7a2a1e; }

.btn {
  appearance: none; cursor: pointer;
  font: inherit; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 9px 16px; border-radius: var(--radius);
  border: 2px solid var(--ink); background: var(--ink); color: var(--paper);
  touch-action: manipulation;
}
.btn.ghost { background: transparent; color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: default; }

/* --- Intelligence: the catalog cards --- */
.int-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (min-width: 560px) { .int-grid { grid-template-columns: repeat(4, 1fr); } }
.int-card {
  appearance: none;
  font: inherit;
  color: inherit;
  text-align: left;
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 92%, #fff 8%);
  border-radius: var(--radius);
  padding: 8px 9px;
  min-height: 66px;
  display: flex; flex-direction: column; gap: 3px;
  cursor: pointer;
  transition: border-color 140ms ease, transform 90ms ease;
  touch-action: manipulation;
}
.int-card:hover { border-color: var(--ink-soft); }
.int-card:active { transform: translateY(1px); }
.int-card:disabled { cursor: default; opacity: 0.85; }
.int-card .ic-l0 { font-size: 10px; letter-spacing: 0.14em; color: var(--ink-soft); font-weight: 700; }
.int-card .ic-l1 { font-size: 11px; color: var(--ink); font-variant-numeric: tabular-nums; }
.int-card .ic-l2 { font-size: 9.5px; color: var(--ink-faint); letter-spacing: 0.08em; }
.int-card.correct { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--paper)); }
.int-card.wrong { border-color: #7a2a1e; opacity: 0.55; }

/* --- Operations: the bench --- */
/* capped width keeps the 4-row grid short enough to fit the frame on desktop */
.op-bench {
  display: grid;
  grid-template-columns: 14px 1fr 14px;
  align-items: stretch;
  gap: 6px;
  max-width: 420px;
  margin-inline: auto;
}
.op-wall, .op-machine {
  border-radius: var(--radius);
  background: repeating-linear-gradient(45deg, var(--rule) 0 4px, transparent 4px 8px);
  border: 1px solid var(--rule);
  position: relative;
}
.op-machine { background: color-mix(in srgb, var(--accent) 18%, var(--paper)); }
.op-grid {
  display: grid;
  grid-template-columns: repeat(var(--op-cols, 5), 1fr);
  gap: 4px;
}
.op-tile {
  appearance: none;
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 90%, #fff 10%);
  border-radius: var(--radius);
  aspect-ratio: 1;
  padding: 0;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
  touch-action: manipulation;
}
.op-tile svg { width: 100%; height: 100%; display: block; }
.op-tile .pipe { fill: none; stroke: var(--ink-soft); stroke-width: 7; stroke-linecap: round; }
.op-tile .joint { fill: var(--ink-soft); }
.op-tile:hover { border-color: var(--ink-soft); }
.op-tile:disabled { cursor: default; }
.op-tile.lit .pipe, .op-tile.lit .joint { stroke: var(--accent); fill: var(--accent); }
.op-tile.lit { border-color: color-mix(in srgb, var(--accent) 50%, var(--rule)); }
.op-tile.flow { background: color-mix(in srgb, var(--accent) 10%, var(--paper)); }
.op-endcap { letter-spacing: 0.14em; text-transform: uppercase; font-size: 10px; }

/* --- Network: the field --- */
.nw-field {
  width: 100%;
  max-height: 340px;
  aspect-ratio: 10/9;
  display: block;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--paper) 96%, #fff 4%);
}
.nw-node { cursor: pointer; outline: none; }
.nw-node .nw-dot {
  fill: var(--paper);
  stroke: var(--ink-soft);
  stroke-width: 1.1;
  transition: stroke 150ms ease, fill 150ms ease;
}
.nw-node:hover .nw-dot, .nw-node:focus-visible .nw-dot { stroke: var(--accent); }
.nw-node.sel .nw-dot { fill: var(--accent); stroke: var(--accent); }
.nw-node .nw-mark { stroke: var(--ink-faint); stroke-width: 0.9; fill: none; }
.nw-node.fade { opacity: 0.18; transition: opacity 900ms ease; }
.nw-link {
  stroke: var(--accent);
  stroke-width: 1.2;
  opacity: 0.75;
  cursor: pointer;
}
.nw-link:hover { stroke-width: 2.2; opacity: 1; }
.nw-center {
  fill: none;
  stroke: var(--ink-faint);
  stroke-width: 0.9;
  stroke-dasharray: 2 2.6;
  opacity: 0;
  animation: fade-in 1200ms ease 300ms forwards;
}

/* --- Security: the door --- */
.sec-key {
  display: flex; align-items: baseline; gap: 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 8px 14px;
  margin-bottom: 12px;
  background: color-mix(in srgb, var(--paper) 92%, var(--ink) 4%);
}
.sec-key .sk-label { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); }
.sec-key .sk-glyphs { font-size: clamp(18px, 5vw, 24px); letter-spacing: 0.3em; color: var(--accent); }
.sec-door { min-height: 150px; }
.sec-visitor {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.sec-visitor .sv-token { font-size: clamp(20px, 6vw, 28px); letter-spacing: 0.3em; }
.sec-visitor .sv-flavor { font-size: clamp(12px, 3.4vw, 14px); color: var(--ink-soft); font-style: italic; }
.sec-visitor .sv-timer {
  height: 3px; border-radius: 2px; overflow: hidden;
  background: color-mix(in srgb, var(--rule) 60%, transparent);
}
.sec-visitor .svt-fill { height: 100%; width: 0%; background: var(--ink-faint); }
.sec-visitor .sv-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* the arm reveal banner on win */
.arm-reveal {
  margin-top: 16px; padding: 12px 14px;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 8%, var(--paper));
  opacity: 0;
}
.arm-reveal.show { animation: fade-in 500ms ease forwards; }
.arm-reveal .ar-k { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); }
.arm-reveal .ar-v { font-size: clamp(20px, 6vw, 30px); letter-spacing: 0.24em; text-transform: uppercase; font-weight: 700; color: var(--accent); }