/* Mistborn Quiz Room - ash, mist, metal, and brass lamplight */

:root,
.qr-room-mistborn,
body[data-room="mistborn"] {
  --qr-bg: #090a0d;
  --qr-bg-elev: #14181d;
  --qr-fg: #e8e5d2;
  --qr-fg-dim: #aeb5ae;
  --qr-accent: #b98235;
  --qr-accent-dim: #7d542b;
  --qr-warn: #3e6f5c;
  --qr-danger: #b57958;
  --qr-radius: 6px;
  --qr-metal: #acb2a9;
  --qr-mist: #6d7876;
  --qr-ash: #211a18;
  --qr-soot: #16181d;
  --qr-pewter: #3e494c;
  --qr-copper: #7d542b;
  --qr-brass: #b98235;
  --qr-keeper: #3e6f5c;
  --qr-scene-sky: #25313a;
  --qr-scene-floor: #211a18;
  --qr-scene-light: #e8e5d2;
}

* { box-sizing: border-box; }

body[data-room="mistborn"] {
  background: linear-gradient(180deg, rgba(37,49,58,.56), rgba(9,10,13,.96) 38%), var(--qr-bg);
  color: var(--qr-fg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

body[data-room="mistborn"] .qr-page-hero h1 {
  color: var(--qr-fg);
  text-shadow: 0 2px 0 rgba(0,0,0,.45);
}

body[data-room="mistborn"] .qr-page-hero p { color: var(--qr-fg-dim); }
#qr-root { width: 100%; max-width: 480px; padding: 24px 16px; }
.qr-stage { display: flex; flex-direction: column; gap: 16px; }

.qr-progress {
  color: var(--qr-fg-dim);
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  letter-spacing: 0;
  text-align: right;
  text-transform: uppercase;
}

.qr-board {
  background: linear-gradient(180deg, rgba(62,111,92,.08), transparent 42%), var(--qr-bg-elev);
  border: 1px solid rgba(185,130,53,.54);
  border-radius: var(--qr-radius);
  box-shadow: inset 0 0 0 1px rgba(232,229,210,.04), 0 18px 42px rgba(0,0,0,.36);
  min-height: 320px;
  padding: 20px 16px;
}

.qr-scene {
  aspect-ratio: 8 / 3;
  background: var(--qr-ash);
  border: 1px solid rgba(172,178,169,.36);
  border-radius: var(--qr-radius);
  display: block;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  margin: 0 0 16px;
  object-fit: cover;
  width: 100%;
  animation: qr-mb-scene-fade 360ms ease-out both;
}

.qr-board h1,
.qr-board h2,
.qr-board h3,
.qr-choice-prompt h1,
.qr-choice-prompt h2,
.qr-choice-prompt h3 { color: var(--qr-fg); }

.qr-board h2,
.qr-choice-prompt h2 {
  color: var(--qr-accent);
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 1.45;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.qr-choice-prompt { margin-bottom: 12px; }
.qr-choice-prompt p { color: var(--qr-fg-dim); font-size: 14px; line-height: 1.55; margin: 0; }
.qr-choice-list, .qrx-choice-list { display: grid; gap: 9px; grid-template-columns: 1fr; margin-bottom: 12px; }
.qr-choice-grid { display: grid; gap: 9px; grid-template-columns: 1fr 1fr; }

.qr-choice,
.qrx-sequence-action {
  appearance: none;
  background: linear-gradient(180deg, rgba(172,178,169,.045), rgba(20,24,29,.94)), var(--qr-bg);
  border: 2px solid rgba(125,84,43,.92);
  border-radius: var(--qr-radius);
  color: var(--qr-fg);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  min-height: 56px;
  padding: 12px;
  text-align: left;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 120ms ease, background 140ms ease;
}

.qr-choice:hover,
.qrx-sequence-action:hover {
  border-color: var(--qr-accent);
  box-shadow: 0 0 0 2px rgba(185,130,53,.14);
  transform: translateY(-1px);
  animation: qr-mb-choice-lift 160ms ease-out both;
}

.qr-choice:focus-visible,
.qr-btn:focus-visible { outline: 2px solid var(--qr-metal); outline-offset: 2px; }
.qr-choice:disabled { cursor: default; }

.qr-choice.picked,
.qr-choice[aria-pressed="true"],
.qrx-sequence-action.picked {
  background: linear-gradient(180deg, rgba(185,130,53,.18), rgba(62,111,92,.08)), var(--qr-soot);
  border-color: var(--qr-accent);
  box-shadow: inset 0 0 0 1px rgba(232,229,210,.16);
}

.qr-choice-name {
  color: var(--qr-metal);
  display: block;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  letter-spacing: 0;
  line-height: 1.4;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.qr-counter {
  color: var(--qr-fg-dim);
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  letter-spacing: 0;
  margin-bottom: 10px;
  text-align: center;
}

.qr-counter span { color: var(--qr-accent); }
.qr-status { color: var(--qr-fg-dim); font-size: 12px; line-height: 1.4; margin-bottom: 8px; min-height: 18px; text-align: center; }
.qr-status.warn { color: var(--qr-warn); }
.qr-status.win { color: var(--qr-accent); }
.qr-status.bad { color: var(--qr-danger); }

.qr-outcome {
  background: rgba(232,229,210,.05);
  border: 1px solid rgba(185,130,53,.8);
  border-radius: var(--qr-radius);
  color: var(--qr-fg);
  font-size: 13px;
  line-height: 1.55;
  margin-top: 12px;
  padding: 12px;
}

.qr-btn {
  appearance: none;
  background: var(--qr-accent);
  border: none;
  border-radius: var(--qr-radius);
  color: var(--qr-bg);
  cursor: pointer;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  letter-spacing: 0;
  margin-top: 16px;
  min-height: 44px;
  padding: 12px 18px;
  text-transform: uppercase;
  transition: filter 120ms ease, transform 120ms ease, box-shadow 120ms ease;
  width: 100%;
}

.qr-btn:hover { box-shadow: 0 4px 0 var(--qr-accent-dim); filter: brightness(1.08); transform: translateY(-1px); }
.qr-btn:disabled { box-shadow: none; cursor: not-allowed; filter: grayscale(.3); opacity: .55; transform: none; }
.qr-btn-secondary { background: transparent; border: 1px solid rgba(172,178,169,.44); color: var(--qr-fg); }
.qr-hint { color: var(--qr-metal); font-size: 12px; font-style: italic; line-height: 1.5; margin-top: 8px; }
.qr-resume-banner { background: var(--qr-bg-elev); border: 1px solid var(--qr-accent-dim); border-radius: var(--qr-radius); color: var(--qr-fg); }

/* Puzzle 1: mb-allomancy */
.qr-mb-allomancy {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.qr-mb-allomancy-panel {
  background: rgba(37,49,58,.72);
  border: 1px solid rgba(172,178,169,.28);
  border-radius: var(--qr-radius);
  padding: 12px;
  position: relative;
}
.qr-mb-allomancy-panel::before {
  background: linear-gradient(90deg, transparent, rgba(172,178,169,.22), transparent);
  content: "";
  height: 1px;
  left: 12px;
  position: absolute;
  right: 12px;
  top: 10px;
}
.qr-mb-allomancy-metals { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); }
.qr-mb-metal, .qr-mb-allomancy-metal { align-items: center; border-color: var(--qr-pewter); display: flex; gap: 10px; min-height: 58px; }
.qr-mb-metal::before, .qr-mb-allomancy-metal::before { background: radial-gradient(circle, var(--qr-metal) 0 28%, var(--qr-brass) 31% 52%, transparent 56%); content: ""; flex: 0 0 22px; height: 22px; }
.qr-mb-metal.picked, .qr-mb-allomancy-metal.picked { border-color: var(--qr-metal); box-shadow: 0 0 14px rgba(172,178,169,.16); }
.qr-mb-allomancy-vial { animation: qr-mb-prop-bob 2600ms ease-in-out infinite; image-rendering: pixelated; width: 64px; }
.qr-mb-allomancy-meter { background: var(--qr-bg); border: 1px solid var(--qr-accent-dim); border-radius: 999px; height: 12px; overflow: hidden; }
.qr-mb-allomancy-meter span { animation: qr-mb-metal-pulse 1800ms ease-in-out infinite; background: linear-gradient(90deg, var(--qr-metal), var(--qr-accent)); display: block; height: 100%; }
body[data-room="mistborn"] .qr-mb-allomancy-prompt h2 { font-size: 14px; line-height: 1.45; margin: 0 0 8px; }
body[data-room="mistborn"] .qr-mb-allomancy-prompt p { color: var(--qr-fg-dim); font-size: 14px; line-height: 1.55; margin: 0; opacity: 1; }
body[data-room="mistborn"] .qr-mb-allomancy-status { color: var(--qr-fg-dim); font-family: 'Press Start 2P', monospace; font-size: 10px; letter-spacing: 0; text-align: center; }
body[data-room="mistborn"] .qr-mb-allomancy-status strong { color: var(--qr-accent); font-weight: 400; }
body[data-room="mistborn"] .qr-mb-allomancy-track { background: var(--qr-soot); border: 2px solid var(--qr-accent-dim); border-radius: var(--qr-radius); min-height: 92px; padding: 12px; }
body[data-room="mistborn"] .qr-mb-allomancy-cell { background: var(--qr-bg); border: 1px dashed rgba(172,178,169,.36); border-radius: 4px; color: var(--qr-fg-dim); letter-spacing: 0; }
body[data-room="mistborn"] .qr-mb-allomancy-cell.exit { border: 2px solid var(--qr-accent); color: var(--qr-accent); box-shadow: inset 0 0 0 1px rgba(185,130,53,.28); }
body[data-room="mistborn"] .qr-mb-allomancy-anchor { border: 0; cursor: pointer; transition: transform 80ms ease, filter 120ms ease; }
body[data-room="mistborn"] .qr-mb-allomancy-anchor:hover { filter: brightness(1.18); }
body[data-room="mistborn"] .qr-mb-allomancy-anchor:active { transform: scale(.92); }
body[data-room="mistborn"] .qr-mb-allomancy-anchor-coin { border: 2px solid currentColor; box-shadow: inset 0 0 0 2px var(--qr-bg), 0 0 8px rgba(172,178,169,.18); }
body[data-room="mistborn"] .qr-mb-allomancy-anchor-label { color: currentColor; font-family: 'Press Start 2P', monospace; font-size: 7px; letter-spacing: 0; margin-top: 3px; }
body[data-room="mistborn"] .qr-mb-allomancy-anchor.spent { cursor: not-allowed; opacity: .45; pointer-events: none; }
body[data-room="mistborn"] .qr-mb-allomancy-player { color: var(--qr-scene-light); filter: drop-shadow(0 0 5px rgba(185,130,53,.42)); transition: left 280ms cubic-bezier(.5,.05,.5,1.4); }
body[data-room="mistborn"] .qr-mb-allomancy-actions { display: flex; gap: 8px; }
body[data-room="mistborn"] .qr-mb-allomancy-actions .qr-btn { flex: 1; margin-top: 0; }
body[data-room="mistborn"] .qr-mb-allomancy-result { background: var(--qr-bg-elev); border: 1px solid rgba(185,130,53,.48); border-radius: var(--qr-radius); color: var(--qr-accent); letter-spacing: 0; }
body[data-room="mistborn"] .qr-mb-allomancy.solved .qr-mb-allomancy-track { box-shadow: 0 0 0 2px var(--qr-accent), 0 0 24px rgba(185,130,53,.22); }

/* Puzzle 2: mb-heist */
.qr-mb-heist {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.qr-mb-heist-board {
  background: rgba(33,26,24,.72);
  border: 1px solid rgba(125,84,43,.72);
  border-radius: var(--qr-radius);
  padding: 12px;
}
.qr-mb-heist-route, .qr-mb-heist-slots { display: grid; gap: 8px; grid-template-columns: repeat(4, 1fr); margin-bottom: 10px; }
.qr-mb-heist-step, .qr-mb-heist-slot {
  align-items: center;
  background: var(--qr-soot);
  border: 1px dashed rgba(172,178,169,.4);
  border-radius: var(--qr-radius);
  color: var(--qr-fg-dim);
  display: flex;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  justify-content: center;
  min-height: 52px;
  padding: 8px;
  text-align: center;
}
.qr-mb-heist-step.filled, .qr-mb-heist-slot.filled { background: rgba(125,84,43,.24); border-style: solid; color: var(--qr-fg); }
.qr-mb-heist-card { border-color: rgba(62,111,92,.86); min-height: 64px; }
.qr-mb-heist-card[data-risk="high"] { border-color: var(--qr-danger); }
.qr-mb-heist-guard { color: var(--qr-metal); font-size: 12px; line-height: 1.45; margin: 6px 0 0; }
.qr-mb-heist-run { background: var(--qr-keeper); color: var(--qr-fg); }

/* Puzzle 3: mb-trust */
.qr-mb-trust {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.qr-mb-trust-table {
  background: radial-gradient(circle at 50% 52%, rgba(185,130,53,.18), transparent 48%), rgba(20,24,29,.94);
  border: 1px solid rgba(185,130,53,.55);
  border-radius: var(--qr-radius);
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, 1fr);
  padding: 12px;
}
.qr-mb-trust-member, .qr-mb-trust-token {
  align-items: center;
  background: rgba(232,229,210,.04);
  border: 1px solid rgba(172,178,169,.28);
  border-radius: var(--qr-radius);
  color: var(--qr-fg);
  display: flex;
  flex-direction: column;
  font-size: 12px;
  gap: 6px;
  justify-content: center;
  min-height: 72px;
  padding: 10px;
  text-align: center;
}
.qr-mb-trust-member.picked, .qr-mb-trust-token.picked { border-color: var(--qr-accent); box-shadow: inset 0 0 0 1px rgba(185,130,53,.28); }
.qr-mb-trust-pair { background: rgba(62,111,92,.14); border-left: 3px solid var(--qr-keeper); border-radius: var(--qr-radius); color: var(--qr-fg-dim); font-size: 13px; line-height: 1.45; padding: 10px 12px; }
.qr-mb-trust-oath { color: var(--qr-metal); font-family: 'Press Start 2P', monospace; font-size: 10px; line-height: 1.6; text-align: center; }

/* Puzzle 4: mb-keep */
.qr-mb-keep {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.qr-mb-keep-archive {
  background: rgba(33,26,24,.78);
  border: 1px solid rgba(172,178,169,.3);
  border-radius: var(--qr-radius);
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, 1fr);
  padding: 12px;
}
.qr-mb-keep-shelf, .qr-mb-keep-scroll, .qr-mb-keep-clue {
  background: rgba(232,229,210,.055);
  border: 1px solid rgba(125,84,43,.68);
  border-radius: var(--qr-radius);
  color: var(--qr-fg);
  font-size: 13px;
  line-height: 1.45;
  min-height: 58px;
  padding: 10px;
}
.qr-mb-keep-scroll { border-color: var(--qr-keeper); }
.qr-mb-keep-clue.found, .qr-mb-keep-scroll.found { background: rgba(62,111,92,.18); border-color: var(--qr-metal); }
.qr-mb-keep-index { color: var(--qr-metal); font-family: 'Press Start 2P', monospace; font-size: 9px; line-height: 1.6; margin: 0; text-transform: uppercase; }
.qr-mb-keep-answer { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }

/* Puzzle 5: mb-ending */
.qr-mb-ending {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.qr-mb-ending-sky {
  background: radial-gradient(circle at 75% 18%, rgba(185,130,53,.42), transparent 20%), linear-gradient(180deg, var(--qr-scene-sky), var(--qr-bg));
  border: 1px solid rgba(172,178,169,.28);
  border-radius: var(--qr-radius);
  min-height: 118px;
  overflow: hidden;
  position: relative;
}
.qr-mb-ending-sky::after {
  animation: qr-mb-mist-drift 5200ms linear infinite;
  background: linear-gradient(90deg, transparent, rgba(172,178,169,.14), transparent);
  content: "";
  height: 38%;
  left: -35%;
  position: absolute;
  right: -35%;
  top: 38%;
}
.qr-mb-ending-rings { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); }
.qr-mb-ending-ring, .qr-mb-ending-choice { border-color: rgba(172,178,169,.52); min-height: 64px; text-align: center; }
.qr-mb-ending-ring.picked, .qr-mb-ending-choice.picked { border-color: var(--qr-accent); box-shadow: 0 0 18px rgba(185,130,53,.18); }
.qr-mb-ending-sigil { color: var(--qr-accent); font-family: 'Press Start 2P', monospace; font-size: 18px; line-height: 1; text-align: center; }
.qr-mb-ending-count { color: var(--qr-metal); font-family: 'Press Start 2P', monospace; font-size: 10px; text-align: center; }

/* qrx helper compatibility */
.qrx-puzzle { display: flex; flex-direction: column; gap: 12px; }
.qrx-sequence-track, .qrx-sort-bins, .qrx-multi-picks { background: rgba(9,10,13,.48); border: 1px dashed rgba(172,178,169,.28); border-radius: var(--qr-radius); padding: 10px; }
.qrx-sequence-track { display: flex; flex-wrap: wrap; gap: 8px; min-height: 58px; }
.qrx-sequence-chip, .qrx-sort-bin { background: rgba(125,84,43,.18); border: 1px solid rgba(185,130,53,.58); border-radius: var(--qr-radius); color: var(--qr-fg); min-height: 44px; padding: 10px; }

/* Result screen */
.qr-result { color: var(--qr-fg); padding: 24px 0; text-align: center; }
.qr-result-sprite { animation: qr-mb-sprite-entrance 520ms ease-out both; background: radial-gradient(circle at 50% 34%, rgba(172,178,169,.16), transparent 42%), var(--qr-bg-elev); border: 4px solid var(--qr-accent); border-radius: var(--qr-radius); image-rendering: pixelated; }
.qr-result-eyebrow, .qr-result-dossier-eyebrow, .qr-result-cta-eyebrow { color: var(--qr-accent); letter-spacing: 0; }
.qr-result-name { color: var(--qr-fg) !important; font-family: 'Press Start 2P', monospace; font-size: 20px; letter-spacing: 0; }
.qr-result-tagline, .qr-result-runner, .qr-result-cta-desc { color: var(--qr-fg-dim); }
.qr-result-receipts.qr-result-dossier, .qr-result-cta { background: linear-gradient(180deg, rgba(62,111,92,.1), rgba(20,24,29,.96)); border-color: rgba(185,130,53,.42); }
.qr-result-dossier-stamp { color: var(--qr-metal); letter-spacing: 0; }

@keyframes qr-mb-sprite-entrance {
  0% { opacity: 0; transform: translateY(10px) scale(.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes qr-mb-scene-fade {
  0% { filter: brightness(.72); opacity: 0; }
  100% { filter: brightness(1); opacity: 1; }
}
@keyframes qr-mb-prop-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes qr-mb-choice-lift {
  0% { transform: translateY(0); }
  100% { transform: translateY(-1px); }
}
@keyframes qr-mb-mist-drift {
  0% { transform: translateX(-18%); }
  100% { transform: translateX(18%); }
}
@keyframes qr-mb-metal-pulse {
  0%, 100% { filter: brightness(.92); }
  50% { filter: brightness(1.18); }
}

@media (max-width: 600px) {
  #qr-root { max-width: 100%; padding: 18px 12px; }
  .qr-board { min-height: 300px; padding: 16px 12px; }
  .qr-scene { margin-bottom: 14px; max-height: 156px; object-fit: contain; }
  .qr-board h2, .qr-choice-prompt h2 { font-size: 12px; line-height: 1.55; }
  .qr-choice, .qr-btn, .qrx-sequence-action, .qr-mb-heist-step, .qr-mb-heist-slot, .qr-mb-trust-member, .qr-mb-trust-token, .qr-mb-keep-shelf, .qr-mb-keep-scroll, .qr-mb-keep-clue { min-height: 44px; }
  .qr-choice-grid, .qr-mb-allomancy-metals, .qr-mb-trust-table, .qr-mb-keep-archive, .qr-mb-keep-answer, .qr-mb-ending-rings { grid-template-columns: 1fr; }
  .qr-mb-heist-route, .qr-mb-heist-slots { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 380px) {
  .qr-choice, .qr-choice-prompt p, .qr-outcome { font-size: 12px; }
  .qr-btn { font-size: 10px; padding-left: 12px; padding-right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}