/* Severance Quiz Room — pixel-inspired Lumon dark green theme */

:root {
  --qr-bg: #0d1f1d;
  --qr-bg-elev: #142f2c;
  --qr-fg: #e6f0ed;
  --qr-fg-dim: #94a8a4;
  --qr-accent: #3FB950;
  --qr-accent-dim: #2c7a3a;
  --qr-warn: #d4a017;
  --qr-danger: #c04030;
  --qr-radius: 6px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background: var(--qr-bg);
  color: var(--qr-fg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#qr-root {
  width: 100%;
  max-width: 480px;
  padding: 24px 16px;
}

.qr-stage { display: flex; flex-direction: column; gap: 16px; }

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

.qr-board {
  background: var(--qr-bg-elev);
  border: 1px solid var(--qr-accent-dim);
  border-radius: var(--qr-radius);
  padding: 20px 16px;
  min-height: 320px;
}

.qr-scene {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 16px;
  border: 1px solid var(--qr-accent-dim);
  border-radius: var(--qr-radius);
  background: var(--qr-bg);
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* --- Sort puzzle --- */
.qr-sort-prompt h2 {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--qr-accent);
  margin: 0 0 8px;
}
.qr-sort-prompt p {
  font-size: 14px;
  color: var(--qr-fg-dim);
  margin: 0 0 14px;
  line-height: 1.5;
}
.qr-sort-counter {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--qr-fg-dim);
  letter-spacing: 1px;
  margin-bottom: 16px;
}
.qr-sort-counter span {
  color: var(--qr-warn);
}
.qr-sort-counter.has-anchors span {
  color: var(--qr-accent);
}
.qr-sort-counter.complete {
  color: var(--qr-accent);
}
.qr-sort-numbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 24px;
}
.qr-sort-num {
  appearance: none;
  background: var(--qr-bg);
  border: 2px solid var(--qr-accent-dim);
  color: var(--qr-fg);
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  height: 48px;
  cursor: pointer;
  border-radius: var(--qr-radius);
  touch-action: manipulation;
  transition: transform 100ms;
}
/* Tints keyed by opaque data-tint to avoid leaking tone name in class strings.
   Mapping: 1=woe, 2=frolic, 3=dread, 4=malice (mapping defined in sort.js). */
.qr-sort-num[data-tint="1"] { background: #102423; border-color: #34515a; font-weight: 400; }
.qr-sort-num[data-tint="2"] { background: #102820; border-color: #35634b; font-weight: 600; }
.qr-sort-num[data-tint="3"] { background: #241f1d; border-color: #65403b; font-weight: 500; }
.qr-sort-num[data-tint="4"] { background: #262417; border-color: #655622; font-weight: 700; }
.qr-sort-num.active {
  background: var(--qr-accent);
  color: var(--qr-bg);
  transform: translateY(-2px);
  box-shadow: 0 4px 0 var(--qr-accent-dim);
}
.qr-sort-num.placed {
  opacity: 0.58;
  pointer-events: auto;
}
.qr-sort-num.anchored {
  opacity: 1;
  border-color: var(--qr-accent);
  box-shadow: inset 0 0 0 2px rgba(63, 185, 80, 0.25);
}
.qr-sort-bins {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}
.qr-sort-bin {
  appearance: none;
  background: var(--qr-bg);
  border: 2px dashed var(--qr-accent-dim);
  color: var(--qr-fg);
  padding: 16px 8px;
  cursor: pointer;
  border-radius: var(--qr-radius);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  font-size: 14px;
  min-height: 64px;
}
.qr-sort-bin-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: var(--qr-accent);
  letter-spacing: 1px;
}
.qr-sort-bin-count {
  color: var(--qr-fg-dim);
  font-size: 12px;
}
.qr-sort-refuse {
  appearance: none;
  background: transparent;
  border: 1px dotted var(--qr-fg-dim);
  color: var(--qr-fg-dim);
  font-size: 10px;
  padding: 6px 10px;
  min-height: 44px;
  cursor: pointer;
  margin-bottom: 16px;
  letter-spacing: 1px;
  opacity: 0.5;
}
.qr-sort-refuse:hover { opacity: 1; color: var(--qr-danger); border-color: var(--qr-danger); }
.qr-sort-done {
  width: 100%;
}
.qr-sort-refused {
  animation: qr-glitch 0.4s ease-out;
}
@keyframes qr-glitch {
  0%, 100% { transform: translate(0); }
  25% { transform: translate(-2px, 1px); }
  50% { transform: translate(2px, -1px); }
  75% { transform: translate(-1px, 2px); }
}

/* --- Buttons --- */
.qr-btn {
  appearance: none;
  background: var(--qr-accent);
  color: var(--qr-bg);
  border: none;
  border-radius: var(--qr-radius);
  padding: 12px 20px;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: transform 80ms;
}
.qr-btn:hover { transform: translateY(-1px); }
.qr-btn:disabled { background: var(--qr-accent-dim); cursor: not-allowed; opacity: 0.6; }
.qr-btn-sm { padding: 8px 12px; font-size: 10px; }

/* --- Hint --- */
.qr-hint {
  display: none;
  background: var(--qr-bg-elev);
  border-left: 3px solid var(--qr-warn);
  color: var(--qr-fg-dim);
  font-size: 13px;
  padding: 10px 14px;
  border-radius: var(--qr-radius);
  font-style: italic;
}
.qr-hint-visible { display: block; animation: qr-fade 300ms; }
@keyframes qr-fade { from { opacity: 0; } to { opacity: 1; } }

/* --- Resume banner --- */
.qr-resume-banner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--qr-bg-elev);
  border: 1px solid var(--qr-accent-dim);
  padding: 16px;
  border-radius: var(--qr-radius);
  margin-bottom: 16px;
}
.qr-resume-banner span { color: var(--qr-fg); font-size: 14px; }
.qr-resume-banner .qr-btn { width: auto; }

/* --- Stub (legacy, kept harmless) --- */
.qr-stub h2 {
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  color: var(--qr-warn);
  margin: 0 0 12px;
}
.qr-stub p { color: var(--qr-fg-dim); font-size: 14px; margin: 0 0 20px; line-height: 1.5; }

/* --- Common puzzle h2 --- */
.qr-hb-prompt h2, .qr-ap-prompt h2, .qr-scan-prompt h2, .qr-boss-prompt h2 {
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--qr-accent);
  margin: 0 0 8px;
}
.qr-hb-prompt p, .qr-ap-prompt p, .qr-scan-prompt p, .qr-boss-prompt p {
  font-size: 13px; color: var(--qr-fg-dim); margin: 0 0 18px; line-height: 1.5;
}

/* --- Handbook --- */
.qr-hb-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.qr-hb-card {
  background: var(--qr-bg);
  border: 1px solid var(--qr-accent-dim);
  border-radius: var(--qr-radius);
  overflow: hidden;
}
.qr-hb-card.decided { border-color: var(--qr-accent); }
.qr-hb-toggle {
  width: 100%; appearance: none; background: transparent; border: none;
  color: var(--qr-fg); padding: 12px 14px; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  font-family: inherit;
}
.qr-hb-title { font-weight: 600; font-size: 13px; }
.qr-hb-status { font-size: 11px; color: var(--qr-fg-dim); }
.qr-hb-body { padding: 0 14px 12px; }
.qr-hb-body p { font-size: 13px; color: var(--qr-fg); margin: 0 0 10px; line-height: 1.5; }
.qr-hb-actions { display: flex; gap: 8px; }
.qr-hb-agree, .qr-hb-flag {
  appearance: none; background: var(--qr-bg-elev);
  border: 1px solid var(--qr-accent-dim); color: var(--qr-fg);
  padding: 8px 14px; min-height: 44px; border-radius: var(--qr-radius); cursor: pointer; font-size: 11px;
  font-family: 'Press Start 2P', monospace; letter-spacing: 1px;
}
.qr-hb-agree.qr-hb-chosen { background: var(--qr-accent); color: var(--qr-bg); }
.qr-hb-flag.qr-hb-chosen { background: var(--qr-warn); color: var(--qr-bg); border-color: var(--qr-warn); }
.qr-hb-done { width: 100%; }

/* --- Apologize --- */
.qr-apologize { position: relative; min-height: 360px; }
.qr-ap-lines { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.qr-ap-line {
  appearance: none; background: var(--qr-bg);
  border: 1px solid var(--qr-accent-dim); color: var(--qr-fg);
  padding: 14px; border-radius: var(--qr-radius);
  text-align: left; cursor: pointer; font-size: 14px;
  font-family: inherit;
  transition: opacity 200ms;
}
.qr-ap-line:disabled { opacity: 0.35; cursor: not-allowed; }
.qr-ap-line.recited { background: var(--qr-accent); color: var(--qr-bg); border-color: var(--qr-accent); }
.qr-ap-refuse {
  appearance: none; background: transparent;
  border: 1px dotted var(--qr-fg-dim); color: var(--qr-fg-dim);
  padding: 8px 14px; min-height: 44px; cursor: pointer; font-size: 11px;
  letter-spacing: 1px; opacity: 0.6;
}
.qr-ap-refuse:hover { color: var(--qr-danger); border-color: var(--qr-danger); opacity: 1; }
.qr-ap-bypass-zone { position: absolute; inset: 0; pointer-events: none; }
.qr-ap-bypass {
  position: absolute; pointer-events: auto;
  min-width: 44px; height: 44px; border-radius: var(--qr-radius);
  background: rgba(63,185,80,0.15); border: 1px solid var(--qr-accent-dim);
  color: var(--qr-accent); cursor: pointer;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px; line-height: 1;
  animation: qr-bypass-pulse 2s infinite ease-in-out;
}
.qr-ap-bypass-top-left { top: 8px; left: 8px; }
.qr-ap-bypass-top-right { top: 8px; right: 8px; }
.qr-ap-bypass-bottom-left { bottom: 8px; left: 8px; }
.qr-ap-bypass-bottom-right { bottom: 8px; right: 8px; }
@keyframes qr-bypass-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
.qr-ap-refused, .qr-ap-bypassed { animation: qr-glitch 0.4s ease-out; }

/* --- Scan --- */
.qr-scan-locks {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--qr-fg-dim);
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.qr-scan-locks span {
  color: var(--qr-accent);
}
.qr-scan-scene {
  position: relative;
  width: 100%; aspect-ratio: 4/3;
  background:
    linear-gradient(rgba(13,31,29,0.08), rgba(13,31,29,0.35)),
    url('objects/scene_scan.png') center / cover no-repeat;
  border: 1px solid var(--qr-accent-dim); border-radius: var(--qr-radius);
  overflow: hidden; margin-bottom: 12px;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}
.qr-scan-floor {
  position: absolute; bottom: 0; left: 0; right: 0; height: 35%;
  background: repeating-linear-gradient(90deg, #142f2c 0 24px, #0d1f1d 24px 26px);
}
.qr-scan-wall-l, .qr-scan-wall-r {
  position: absolute; top: 0; bottom: 35%; width: 18%;
  background: linear-gradient(90deg, var(--qr-bg) 0%, transparent 100%);
}
.qr-scan-wall-l { left: 0; }
.qr-scan-wall-r { right: 0; transform: scaleX(-1); }
.qr-scan-spot {
  position: absolute;
  appearance: none; background: rgba(13,31,29,0.16);
  border: 1px solid transparent; color: var(--qr-fg);
  border-radius: var(--qr-radius); width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transform: translate(-50%, -50%);
  padding: 3px;
  transition: transform 100ms, background 200ms, border-color 200ms;
}
.qr-scan-spot:hover, .qr-scan-spot:focus-visible {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(63,185,80,0.16);
  border-color: var(--qr-accent);
}
.qr-scan-spot-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}
.qr-scan-spot.investigated {
  background: rgba(63,185,80,0.2);
  border-color: var(--qr-accent);
  opacity: 0.62;
}
.qr-scan-spot.required-found {
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(63,185,80,0.35);
}
.qr-scan-spot-tip { display: none; }
.qr-scan-code-mark {
  position: absolute;
  right: 4px;
  bottom: 5px;
  background: var(--qr-bg);
  color: var(--qr-accent);
  border: 1px solid var(--qr-accent-dim);
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  line-height: 1;
  padding: 2px;
}
.qr-scan-counter {
  font-family: 'Press Start 2P', monospace; font-size: 11px;
  color: var(--qr-fg-dim); text-align: center; margin-bottom: 12px;
  letter-spacing: 1px;
}
.qr-scan-count, .qr-scan-time { color: var(--qr-accent); }
.qr-scan-status {
  min-height: 36px;
  color: var(--qr-fg-dim);
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 12px;
}
.qr-scan-compartment {
  position: absolute;
  appearance: none;
  width: 52px;
  height: 52px;
  transform: translate(-50%, -50%);
  background: rgba(212,160,23,0.14);
  border: 2px solid var(--qr-warn);
  border-radius: var(--qr-radius);
  padding: 4px;
  cursor: pointer;
  animation: qr-bypass-pulse 1.4s infinite ease-in-out;
}
.qr-scan-compartment img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.qr-scan-compartment.opened {
  animation: none;
  background: rgba(63,185,80,0.2);
  border-color: var(--qr-accent);
}
.qr-scan-paper {
  background: var(--qr-bg);
  border: 1px solid var(--qr-warn);
  border-radius: var(--qr-radius);
  padding: 12px;
  margin-bottom: 12px;
}
.qr-scan-paper p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
}
.qr-scan-done { width: 100%; }
.qr-scan-read { width: 100%; }

/* --- Boss --- */
.qr-boss-timer {
  font-family: 'Press Start 2P', monospace; font-size: 16px;
  color: var(--qr-accent); text-align: center; margin-bottom: 14px;
}
.qr-boss-timer-low { color: var(--qr-danger); animation: qr-pulse-strong 0.6s infinite; }
@keyframes qr-pulse-strong {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.qr-boss-levers { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.qr-boss-lever {
  appearance: none; background: var(--qr-bg);
  border: 2px solid var(--qr-accent-dim); color: var(--qr-fg);
  padding: 12px 14px; border-radius: var(--qr-radius);
  text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 32px 1fr; gap: 4px 12px;
  align-items: center; font-family: inherit;
  transition: transform 100ms, background 200ms;
}
.qr-boss-lever[hidden] { display: none; }
.qr-boss-lever-icon {
  width: 32px;
  height: 32px;
  grid-row: 1 / 3;
  align-self: start;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qr-boss-lever-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}
.qr-boss-lever-label { font-weight: 600; font-size: 13px; }
.qr-boss-lever-desc { font-size: 12px; color: var(--qr-fg-dim); line-height: 1.4; }
.qr-boss-lever.picked {
  background: var(--qr-accent); color: var(--qr-bg);
  border-color: var(--qr-accent);
  transform: translateX(2px);
}
.qr-boss-lever.picked .qr-boss-lever-desc { color: var(--qr-bg); opacity: 0.85; }
.qr-boss-lever.incompatible,
.qr-boss-lever:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
.qr-boss-lever-secret {
  border-style: dashed;
  border-color: var(--qr-warn);
}
.qr-boss-status {
  min-height: 34px;
  color: var(--qr-fg-dim);
  font-size: 13px;
  line-height: 1.4;
  margin: 0 0 12px;
}
.qr-boss-pickline {
  display: flex; gap: 12px; justify-content: center;
  font-size: 26px; margin-bottom: 14px;
}
.qr-boss-pick {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--qr-bg); border: 2px dashed var(--qr-accent-dim);
  border-radius: var(--qr-radius);
}
.qr-boss-pick img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}
.qr-boss-confirm { width: 100%; }

/* --- Result --- */
.qr-result {
  text-align: center;
  padding: 32px 16px;
}
.qr-result-sprite-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.qr-result-sprite {
  width: 192px;
  height: 192px;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  border: 4px solid var(--qr-accent);
  background: var(--qr-bg-elev);
  box-shadow: 0 8px 0 var(--qr-accent-dim);
  animation: qr-sprite-in 600ms cubic-bezier(.22,1.2,.36,1);
}
@keyframes qr-sprite-in {
  from { opacity: 0; transform: translateY(-12px) scale(0.85); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.qr-result-eyebrow {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--qr-accent);
  margin-bottom: 8px;
}
.qr-result-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 22px;
  color: var(--qr-fg);
  margin: 0 0 8px;
  letter-spacing: 1px;
}
.qr-result-tagline {
  font-size: 14px;
  color: var(--qr-fg-dim);
  margin: 0 0 16px;
  font-style: italic;
}
.qr-result-desc {
  font-size: 15px;
  color: var(--qr-fg);
  margin: 0 0 16px;
  line-height: 1.6;
  text-align: left;
}
.qr-result-runner {
  font-size: 13px;
  color: var(--qr-fg-dim);
  margin: 0 0 24px;
}
.qr-result-receipts {
  background: var(--qr-bg-elev);
  border-radius: var(--qr-radius);
  padding: 16px;
  margin: 24px 0;
  text-align: left;
}
.qr-result-receipts h3 {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: var(--qr-accent);
  margin: 0 0 12px;
  letter-spacing: 1px;
}
.qr-result-receipts ul {
  margin: 0;
  padding-left: 20px;
  color: var(--qr-fg-dim);
  font-size: 13px;
  line-height: 1.6;
}
.qr-replay {
  margin-top: 16px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ===== Puzzle 2: Handbook contradiction-marking ===== */
.qr-hb-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 8px 10px;
  border: 1px dashed var(--qr-accent-dim);
  border-radius: var(--qr-radius);
  background: rgba(63, 185, 80, 0.04);
}
.qr-hb-link-mode {
  appearance: none;
  background: var(--qr-bg);
  color: var(--qr-fg);
  border: 1px solid var(--qr-accent-dim);
  border-radius: var(--qr-radius);
  padding: 8px 12px;
  font-family: inherit; font-size: 12px; cursor: pointer;
  letter-spacing: 0.5px;
}
.qr-hb-link-mode.active {
  background: var(--qr-warn);
  color: #1a1408;
  border-color: var(--qr-warn);
}
.qr-hb-link-mode:disabled { opacity: 0.5; cursor: default; }
.qr-hb-link-counter {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px; color: var(--qr-fg-dim);
}
.qr-hb-link-counter .qr-hb-link-count { color: var(--qr-warn); }
.qr-hb-link-counter.complete .qr-hb-link-count { color: var(--qr-accent); }
.qr-hb-linking .qr-hb-card { cursor: pointer; }
.qr-hb-card.link-pick { outline: 2px dashed var(--qr-warn); outline-offset: 2px; }
.qr-hb-card.link-locked { outline: 2px solid var(--qr-accent); outline-offset: 2px; }
.qr-hb-card.link-miss { animation: qrShake 400ms ease; }
@keyframes qrShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ===== Puzzle 3: Apologize misquote-flagging ===== */
.qr-ap-counter {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--qr-fg-dim);
  margin: 0 0 12px;
  letter-spacing: 1px;
}
.qr-ap-counter span { color: var(--qr-warn); }
.qr-ap-counter.complete span { color: var(--qr-accent); }
.qr-ap-line {
  display: flex; align-items: stretch; gap: 8px;
  margin-bottom: 8px;
}
.qr-ap-line-recite {
  flex: 1;
  appearance: none;
  background: var(--qr-bg);
  border: 1px solid var(--qr-accent-dim);
  border-radius: var(--qr-radius);
  color: var(--qr-fg);
  padding: 12px 14px;
  text-align: left;
  font-family: inherit; font-size: 14px;
  cursor: pointer;
  transition: background 200ms;
}
.qr-ap-line-recite:disabled { opacity: 0.55; cursor: default; }
.qr-ap-line.recited .qr-ap-line-recite {
  background: rgba(63, 185, 80, 0.12);
  border-color: var(--qr-accent);
}
.qr-ap-line-flag {
  appearance: none;
  background: var(--qr-bg);
  border: 1px solid var(--qr-warn);
  color: var(--qr-warn);
  border-radius: var(--qr-radius);
  padding: 0 12px;
  min-width: 56px;
  font-family: inherit; font-size: 11px;
  letter-spacing: 1px;
  cursor: pointer;
}
.qr-ap-line-flag:disabled { opacity: 0.5; cursor: default; }
.qr-ap-line.flagged-correct .qr-ap-line-flag {
  background: var(--qr-accent);
  border-color: var(--qr-accent);
  color: #052010;
}
.qr-ap-line.flagged-false .qr-ap-line-flag {
  background: var(--qr-danger);
  border-color: var(--qr-danger);
  color: #1a0707;
}

/* ===== Puzzle 4: Scan keypad ===== */
.qr-scan-keypad-zone {
  margin: 12px 0 4px;
  display: flex;
  justify-content: center;
}
.qr-scan-keypad-panel {
  width: 100%;
  max-width: 260px;
  background: var(--qr-bg);
  border: 2px solid var(--qr-accent);
  border-radius: var(--qr-radius);
  padding: 10px 12px 12px;
  box-shadow: 0 0 0 3px rgba(63, 185, 80, 0.12);
}
.qr-scan-keypad-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--qr-accent);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 8px;
}
.qr-scan-keypad-panel.opened { border-color: var(--qr-accent); }
.qr-scan-keypad-prize {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto;
  image-rendering: pixelated;
}
/* When keypad is showing, the corridor spots become decorative — non-interactive
   so the player can't accidentally tap a sprite instead of a digit, and dimmed
   so visual focus shifts to the keypad. */
.qr-scan-scene.keypad-active .qr-scan-spot {
  pointer-events: none;
  opacity: 0.45;
}
.qr-scan-keypad { display: flex; flex-direction: column; gap: 6px; }
.qr-scan-keypad-display {
  font-family: 'Press Start 2P', monospace;
  font-size: 18px;
  color: var(--qr-warn);
  background: #050d0c;
  border: 1px solid var(--qr-accent-dim);
  border-radius: 3px;
  padding: 8px 0;
  text-align: center;
  letter-spacing: 6px;
}
.qr-scan-keypad-display.shake { animation: qrShake 400ms ease; color: var(--qr-danger); }
.qr-scan-keypad-keys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  flex: 1;
}
.qr-scan-keypad-key {
  appearance: none;
  background: var(--qr-bg-elev);
  border: 1px solid var(--qr-accent-dim);
  color: var(--qr-fg);
  font-family: inherit; font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  min-height: 44px;
}
.qr-scan-keypad-key:active { background: var(--qr-accent); color: #052010; }
.qr-scan-keypad-zero { grid-column: 2; }
.qr-scan-keypad-clear {
  appearance: none;
  background: var(--qr-bg);
  border: 1px solid var(--qr-warn);
  color: var(--qr-warn);
  border-radius: 3px;
  font-family: inherit; font-size: 11px;
  padding: 6px 0;
  min-height: 28px;
  cursor: pointer;
  letter-spacing: 1px;
}

/* Mark the wall code spot once revealed so the player can find it again. */
.qr-scan-spot[data-revealed="true"] { box-shadow: 0 0 0 2px var(--qr-warn); }

/* ===== Puzzle 5: Boss objective banner ===== */
.qr-boss-objective {
  display: flex; flex-direction: column; gap: 4px;
  margin: 0 0 12px;
  padding: 10px 12px;
  background: rgba(212, 160, 23, 0.08);
  border: 1px solid var(--qr-warn);
  border-radius: var(--qr-radius);
}
.qr-boss-objective-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--qr-warn);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.qr-boss-objective-text { font-size: 13px; color: var(--qr-fg); line-height: 1.4; }
.qr-boss.qr-boss-goal-met .qr-boss-objective {
  background: rgba(63, 185, 80, 0.12);
  border-color: var(--qr-accent);
}
.qr-boss.qr-boss-goal-met .qr-boss-objective-label { color: var(--qr-accent); }
.qr-boss.qr-boss-goal-abandoned .qr-boss-objective {
  background: rgba(192, 64, 48, 0.08);
  border-color: var(--qr-danger);
}
.qr-boss.qr-boss-goal-abandoned .qr-boss-objective-label { color: var(--qr-danger); }
.qr-boss-lever.off-goal {
  border-style: dashed;
  border-color: var(--qr-danger);
  opacity: 0.7;
}
.qr-boss-lever.off-goal::after {
  content: 'off goal';
  position: absolute;
  top: 4px; right: 6px;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: var(--qr-danger);
  letter-spacing: 1px;
}
.qr-boss-lever { position: relative; }