/* The Bear Quiz Room - stainless line, ticket rail, fire, grief, and service pressure */

/* 1. Room variables */
:root,
body[data-room="the-bear"],
.qr-room-the-bear {
  --qr-bg: #0f1212;
  --qr-bg-elev: #1e2526;
  --qr-fg: #f2e8d4;
  --qr-fg-dim: #b9aa8e;
  --qr-accent: #e7702c;
  --qr-accent-dim: #8f3e25;
  --qr-warn: #e4bd57;
  --qr-danger: #bd4d32;
  --qr-radius: 6px;
  --qr-bear-steel-dark: #222a2c;
  --qr-bear-steel: #495253;
  --qr-bear-steel-light: #848b88;
  --qr-bear-ticket: #e4d6b8;
  --qr-bear-ticket-ink: #221c18;
  --qr-bear-apron: #334c5f;
  --qr-bear-herb: #707e4a;
  --qr-bear-shadow: rgba(8, 10, 10, 0.76);
  --qr-bear-line: rgba(228, 214, 184, 0.22);
  --qr-scene-prep: url('objects/scene_prep.png');
  --qr-scene-expo: url('objects/scene_expo.png');
  --qr-scene-family: url('objects/scene_family.png');
  --qr-scene-walkin: url('objects/scene_walkin.png');
  --qr-scene-call: url('objects/scene_call.png');
  --qr-prop-knife: url('objects/knife.png');
  --qr-prop-ticket: url('objects/ticket.png');
  --qr-prop-pot: url('objects/sauce_pot.png');
  --qr-prop-pan: url('objects/saute_pan.png');
  --qr-prop-spoon: url('objects/spoon.png');
  --qr-prop-sandwich: url('objects/beef_sandwich.png');
  --qr-prop-can: url('objects/tomato_can.png');
  --qr-prop-hat: url('objects/chef_hat.png');
  --qr-prop-apron: url('objects/apron.png');
  --qr-prop-walkin: url('objects/walkin_door.png');
  --qr-prop-phone: url('objects/phone.png');
  --qr-prop-donut: url('objects/donut.png');
  --qr-prop-photo: url('objects/family_photo.png');
}

/* 2. Base frame and typography */
* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: repeating-linear-gradient(90deg, rgba(228, 214, 184, 0.025) 0 1px, transparent 1px 42px), linear-gradient(180deg, #182022 0%, var(--qr-bg) 45%, #080a0a 100%);
  color: var(--qr-fg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#qr-root { width: 100%; max-width: 500px; padding: 24px 16px; }
.qr-stage { display: flex; flex-direction: column; gap: 16px; }

.qr-progress {
  color: var(--qr-bear-ticket);
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  text-align: right;
  text-shadow: 0 2px 0 #0a0c0c;
}

.qr-board {
  position: relative;
  min-height: 340px;
  padding: 18px 16px 20px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(132, 139, 136, 0.10), rgba(132, 139, 136, 0) 38%), repeating-linear-gradient(0deg, rgba(228, 214, 184, 0.035) 0 1px, transparent 1px 13px), var(--qr-bg-elev);
  border: 1px solid var(--qr-bear-line);
  border-radius: var(--qr-radius);
  box-shadow: 0 12px 0 rgba(0, 0, 0, 0.20), inset 0 0 0 1px rgba(242, 232, 212, 0.04);
}

.qr-board::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.035), transparent 20%, transparent 78%, rgba(0, 0, 0, 0.18));
}

.qr-choice-prompt { position: relative; z-index: 1; margin: 0 0 14px; }
.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 {
  margin: 0 0 8px;
  color: var(--qr-accent);
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.qr-choice-prompt p { margin: 0; color: var(--qr-fg-dim); font-size: 14px; line-height: 1.55; }

.qr-scene {
  display: block;
  width: 100%;
  max-height: 172px;
  object-fit: cover;
  margin: 0 0 16px;
  border: 1px solid var(--qr-bear-line);
  border-radius: var(--qr-radius);
  background: var(--qr-bg);
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  animation: qrBearSceneIn 260ms ease-out both;
}

/* 3. Shared controls */
.qr-choice-list,
.qr-choice-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0 0 12px; }

.qr-choice {
  appearance: none;
  position: relative;
  width: 100%;
  min-height: 58px;
  padding: 12px 13px 12px 56px;
  overflow: hidden;
  color: var(--qr-fg);
  background: linear-gradient(180deg, rgba(228, 214, 184, 0.060), rgba(0, 0, 0, 0)), var(--qr-bg);
  border: 1px solid rgba(228, 112, 44, 0.44);
  border-radius: var(--qr-radius);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  touch-action: manipulation;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.qr-choice::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 50%;
  width: 30px;
  height: 30px;
  transform: translateY(-50%);
  background: var(--qr-choice-icon, var(--qr-prop-ticket)) center / contain no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.35));
  animation: qrBearPropBob 2.8s ease-in-out infinite;
}

.qr-choice::after { content: ""; position: absolute; top: 9px; bottom: 9px; left: 49px; width: 1px; background: linear-gradient(180deg, transparent, rgba(228, 214, 184, 0.34), transparent); }
.qr-choice:hover:not(:disabled), .qr-choice:focus-visible { border-color: var(--qr-warn); transform: translateY(-2px); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.28), inset 0 -2px 0 rgba(0, 0, 0, 0.18); }
.qr-choice.picked { color: var(--qr-bear-ticket-ink); background: linear-gradient(180deg, rgba(242, 232, 212, 0.92), rgba(228, 189, 87, 0.80)), var(--qr-bear-ticket); border-color: var(--qr-warn); animation: qrBearChoiceLift 200ms ease-out; }
.qr-choice:disabled:not(.picked) { cursor: not-allowed; opacity: 0.54; filter: grayscale(0.45); }
.qr-choice-name { display: block; margin-bottom: 5px; color: var(--qr-warn); font-family: 'Press Start 2P', monospace; font-size: 10px; line-height: 1.45; letter-spacing: 0.8px; text-transform: uppercase; }
.qr-choice.picked .qr-choice-name { color: var(--qr-danger); }
.qr-choice span:not(.qr-choice-name) { display: block; color: var(--qr-fg-dim); font-size: 12px; line-height: 1.45; }
.qr-choice.picked span:not(.qr-choice-name) { color: #4d3523; }

.qr-btn {
  appearance: none;
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 44px;
  margin-top: 16px;
  padding: 12px 18px;
  color: #18110d;
  background: linear-gradient(180deg, #f0a452, var(--qr-accent));
  border: 1px solid rgba(242, 232, 212, 0.16);
  border-radius: var(--qr-radius);
  box-shadow: 0 4px 0 var(--qr-accent-dim);
  cursor: pointer;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: transform 100ms ease, filter 100ms ease, box-shadow 100ms ease;
}

.qr-btn:hover:not(:disabled), .qr-btn:focus-visible { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 5px 0 var(--qr-accent-dim); }
.qr-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--qr-accent-dim); }
.qr-btn:disabled { cursor: not-allowed; opacity: 0.52; filter: grayscale(0.45); transform: none; }
.qr-btn-secondary { color: var(--qr-fg); background: linear-gradient(180deg, #425c6d, var(--qr-bear-apron)); }
.qr-actions { display: flex; gap: 8px; margin-top: 12px; }
.qr-actions .qr-btn { flex: 1; width: auto; margin-top: 0; }

.qr-counter,
.qr-status {
  position: relative;
  z-index: 1;
  margin: 0 0 12px;
  padding: 9px 10px;
  color: var(--qr-fg-dim);
  background: rgba(15, 18, 18, 0.64);
  border: 1px solid var(--qr-bear-line);
  border-radius: var(--qr-radius);
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 1px;
  text-align: center;
}

.qr-counter span, .qr-status span { color: var(--qr-warn); }
.qr-status.warn { color: var(--qr-warn); }
.qr-status.win, .qr-counter.complete span { color: var(--qr-bear-herb); }
.qr-status.bad { color: var(--qr-danger); }

.qr-outcome {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  padding: 13px 14px;
  color: var(--qr-fg);
  background: rgba(15, 18, 18, 0.70);
  border: 1px dashed var(--qr-warn);
  border-radius: var(--qr-radius);
  font-size: 13px;
  line-height: 1.5;
  animation: qrBearSceneIn 220ms ease-out;
}

.qr-outcome[hidden], .qr-choice-list[hidden], .qr-choice-grid[hidden] { display: none; }
.qr-hint { position: relative; z-index: 1; padding: 10px 12px; color: var(--qr-warn); background: rgba(30, 37, 38, 0.92); border-left: 3px solid var(--qr-warn); border-radius: var(--qr-radius); font-size: 12px; font-style: italic; line-height: 1.45; opacity: 0; transition: opacity 320ms ease; }
.qr-hint-visible { opacity: 1; }
.qr-resume-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; padding: 12px; color: var(--qr-fg); background: rgba(30, 37, 38, 0.94); border: 1px solid var(--qr-warn); border-radius: var(--qr-radius); font-size: 13px; }

/* 4. Shared scene backdrops keyed to the configured sequence */
.qr-board:has(.qr-bear-prep) > .qr-choice-prompt::before,
.qr-board:has(.qr-bear-prep-done) > .qr-choice-prompt::before,
.qr-board:has(.qr-bear-expo) > .qr-choice-prompt::before,
.qr-board:has(.qr-bear-expo-done) > .qr-choice-prompt::before,
.qr-board:has(.qr-bear-family) > .qr-choice-prompt::before,
.qr-board:has(.qr-bear-family-done) > .qr-choice-prompt::before,
.qr-board:has(.qr-bear-walkin) > .qr-choice-prompt::before,
.qr-board:has(.qr-bear-walkin-done) > .qr-choice-prompt::before,
.qr-board:has(.qr-bear-call) > .qr-choice-prompt::before,
.qr-board:has(.qr-bear-call-done) > .qr-choice-prompt::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 8 / 3;
  margin: 0 0 14px;
  background-color: var(--qr-bg);
  background-position: center;
  background-size: cover;
  border: 1px solid var(--qr-bear-line);
  border-radius: var(--qr-radius);
  box-shadow: inset 0 0 0 1px rgba(242, 232, 212, 0.06);
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  animation: qrBearSceneIn 260ms ease-out both;
}

.qr-board:has(.qr-bear-prep) > .qr-choice-prompt::before, .qr-board:has(.qr-bear-prep-done) > .qr-choice-prompt::before { background-image: var(--qr-scene-prep); }
.qr-board:has(.qr-bear-expo) > .qr-choice-prompt::before, .qr-board:has(.qr-bear-expo-done) > .qr-choice-prompt::before { background-image: var(--qr-scene-expo); }
.qr-board:has(.qr-bear-family) > .qr-choice-prompt::before, .qr-board:has(.qr-bear-family-done) > .qr-choice-prompt::before { background-image: var(--qr-scene-family); }
.qr-board:has(.qr-bear-walkin) > .qr-choice-prompt::before, .qr-board:has(.qr-bear-walkin-done) > .qr-choice-prompt::before { background-image: var(--qr-scene-walkin); }
.qr-board:has(.qr-bear-call) > .qr-choice-prompt::before, .qr-board:has(.qr-bear-call-done) > .qr-choice-prompt::before { background-image: var(--qr-scene-call); }

/* 5. Puzzle 1: bear-prep */
.qr-bear-prep { position: relative; z-index: 1; }
.qr-bear-prep-station { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; padding: 10px; background: rgba(73, 82, 83, 0.28); border: 1px solid var(--qr-bear-line); border-radius: var(--qr-radius); }
.qr-bear-prep-bin { min-height: 70px; padding: 8px; background: rgba(15, 18, 18, 0.68); border: 1px dashed var(--qr-bear-steel-light); border-radius: var(--qr-radius); }
.qr-bear-prep-bin.ready { border-color: var(--qr-bear-herb); box-shadow: inset 0 0 0 2px rgba(112, 126, 74, 0.20); }
.qr-bear-prep-ticket { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 8px 10px; color: var(--qr-bear-ticket-ink); background: var(--qr-bear-ticket); border-left: 4px solid var(--qr-accent); border-radius: var(--qr-radius); font-family: 'Press Start 2P', monospace; font-size: 9px; line-height: 1.45; }
.qr-bear-prep-ticket::before { content: ""; width: 26px; height: 26px; flex: 0 0 auto; background: var(--qr-prop-ticket) center / contain no-repeat; image-rendering: pixelated; }
.qr-bear-prep-card, .qr-bear-prep .qr-choice { --qr-choice-icon: var(--qr-prop-knife); }
.qr-bear-prep-card:nth-child(2n), .qr-bear-prep .qr-choice:nth-child(2n) { --qr-choice-icon: var(--qr-prop-can); }
.qr-bear-prep-card:nth-child(3n), .qr-bear-prep .qr-choice:nth-child(3n) { --qr-choice-icon: var(--qr-prop-spoon); }
.qr-bear-prep-counter, .qr-bear-prep .qr-counter { border-color: rgba(112, 126, 74, 0.45); }
.qr-bear-prep-status, .qr-bear-prep .qr-status { background: rgba(112, 126, 74, 0.12); }
.qr-bear-prep-done .qr-choice.picked { box-shadow: inset 0 0 0 2px rgba(112, 126, 74, 0.26); }

/* 6. Puzzle 2: bear-expo */
.qr-bear-expo { position: relative; z-index: 1; }
.qr-bear-expo-pass { margin: 12px 0; padding: 10px; background: linear-gradient(180deg, rgba(231, 112, 44, 0.12), transparent 44%), rgba(73, 82, 83, 0.20); border: 1px solid rgba(231, 112, 44, 0.38); border-radius: var(--qr-radius); }
.qr-bear-expo-rail { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; scrollbar-color: var(--qr-accent) var(--qr-bg); }
.qr-bear-expo-ticket { flex: 0 0 86px; min-height: 78px; padding: 8px; color: var(--qr-bear-ticket-ink); background: var(--qr-bear-ticket); border: 1px solid var(--qr-accent-dim); border-radius: 3px; font-size: 11px; line-height: 1.35; }
.qr-bear-expo-ticket.hot { border-color: var(--qr-danger); box-shadow: 0 0 0 2px rgba(189, 77, 50, 0.22); animation: qrBearHeat 900ms ease-in-out infinite; }
.qr-bear-expo-ticket.fired { background: linear-gradient(180deg, #f4e7ca, var(--qr-warn)); border-color: var(--qr-warn); }
.qr-bear-expo .qr-choice, .qr-bear-expo-choice { --qr-choice-icon: var(--qr-prop-ticket); }
.qr-bear-expo .qr-choice:nth-child(2n), .qr-bear-expo-choice:nth-child(2n) { --qr-choice-icon: var(--qr-prop-pan); }
.qr-bear-expo-callout { margin: 10px 0; padding: 10px 12px; color: var(--qr-warn); background: rgba(189, 77, 50, 0.12); border: 1px solid var(--qr-danger); border-radius: var(--qr-radius); font-family: 'Press Start 2P', monospace; font-size: 10px; line-height: 1.45; text-transform: uppercase; }
.qr-bear-expo-counter, .qr-bear-expo .qr-counter { color: var(--qr-bear-ticket); }
.qr-bear-expo-status, .qr-bear-expo .qr-status { border-color: rgba(231, 112, 44, 0.42); }
.qr-bear-expo-prompt h2 { margin-bottom: 4px; }
.qr-bear-expo-clock { height: 7px; background: var(--qr-bg); border: 1px solid var(--qr-accent-dim); border-radius: 4px; overflow: hidden; }
.qr-bear-expo-clock-fill { height: 100%; background: linear-gradient(90deg, var(--qr-warn), var(--qr-accent)); transition: width 100ms linear; }
.qr-bear-expo-board { min-height: 220px; padding: 10px; background: rgba(15, 18, 18, 0.70); border: 2px solid var(--qr-accent-dim); border-radius: var(--qr-radius); }
.qr-bear-expo-empty { padding: 24px 0; color: var(--qr-fg-dim); font-family: 'Press Start 2P', monospace; font-size: 10px; letter-spacing: 1px; text-align: center; opacity: 0.65; }
.qr-bear-expo-order { min-height: 56px; color: var(--qr-fg); background: var(--qr-bg); border: 1px solid var(--qr-accent-dim); border-radius: var(--qr-radius); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.24); }
.qr-bear-expo-order.urgent { border-color: var(--qr-warn); box-shadow: inset 0 0 0 1px rgba(228, 189, 87, 0.36); }
.qr-bear-expo-order-name { color: var(--qr-accent); font-family: 'Press Start 2P', monospace; font-size: 10px; letter-spacing: 1px; }
.qr-bear-expo-order-tag { color: var(--qr-warn); font-family: 'Press Start 2P', monospace; font-size: 8px; letter-spacing: 1px; }
.qr-bear-expo-order-bar { background: var(--qr-bg-elev); border-radius: 3px; overflow: hidden; }
.qr-bear-expo-order-bar-fill { background: var(--qr-accent); }
.qr-bear-expo-actions { display: flex; gap: 8px; margin-top: 6px; }
.qr-bear-expo-actions .qr-btn { flex: 1; margin-top: 0; }
.qr-bear-expo-result { margin-top: 8px; padding: 12px; color: var(--qr-warn); background: rgba(15, 18, 18, 0.70); border: 1px dashed var(--qr-warn); border-radius: var(--qr-radius); font-family: 'Press Start 2P', monospace; font-size: 11px; line-height: 1.6; text-align: center; }

/* 7. Puzzle 3: bear-family */
.qr-bear-family { position: relative; z-index: 1; }
.qr-bear-family-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; padding: 10px; background: linear-gradient(90deg, rgba(189, 77, 50, 0.10), transparent 42%, rgba(228, 189, 87, 0.08)), rgba(74, 49, 38, 0.32); border: 1px solid rgba(228, 189, 87, 0.28); border-radius: var(--qr-radius); }
.qr-bear-family-seat { min-height: 64px; padding: 9px; background: rgba(15, 18, 18, 0.62); border: 1px solid var(--qr-bear-line); border-radius: var(--qr-radius); }
.qr-bear-family-seat.speaking { border-color: var(--qr-warn); box-shadow: inset 0 0 0 2px rgba(228, 189, 87, 0.12); }
.qr-bear-family-seat.empty { opacity: 0.58; border-style: dashed; }
.qr-bear-family-photo { width: 64px; height: 64px; margin: 0 auto 10px; background: var(--qr-prop-photo) center / contain no-repeat; image-rendering: pixelated; }
.qr-bear-family .qr-choice, .qr-bear-family-choice { --qr-choice-icon: var(--qr-prop-photo); }
.qr-bear-family .qr-choice:nth-child(2n), .qr-bear-family-choice:nth-child(2n) { --qr-choice-icon: var(--qr-prop-sandwich); }
.qr-bear-family .qr-choice:nth-child(3n), .qr-bear-family-choice:nth-child(3n) { --qr-choice-icon: var(--qr-prop-donut); }
.qr-bear-family-status, .qr-bear-family .qr-status { min-height: 42px; background: rgba(74, 49, 38, 0.40); }
.qr-bear-family-note { color: var(--qr-fg-dim); font-size: 12px; line-height: 1.5; }
.qr-bear-family-done .qr-outcome { border-color: var(--qr-danger); }

/* 8. Puzzle 4: bear-walkin */
.qr-bear-walkin { position: relative; z-index: 1; }
.qr-bear-walkin-freezer { position: relative; min-height: 178px; margin: 12px 0; overflow: hidden; background: linear-gradient(180deg, rgba(132, 139, 136, 0.30), rgba(51, 76, 95, 0.18)), var(--qr-bear-steel-dark); border: 1px solid var(--qr-bear-steel-light); border-radius: var(--qr-radius); }
.qr-bear-walkin-freezer::before { content: ""; position: absolute; inset: 0; background: var(--qr-scene-walkin) center / cover no-repeat; image-rendering: pixelated; opacity: 0.48; }
.qr-bear-walkin-door { position: relative; width: 96px; height: 96px; margin: 28px auto 10px; background: var(--qr-prop-walkin) center / contain no-repeat; image-rendering: pixelated; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.35)); }
.qr-bear-walkin-note { position: relative; margin: 8px 12px 12px; padding: 10px 12px; color: var(--qr-bear-ticket-ink); background: var(--qr-bear-ticket); border-left: 4px solid var(--qr-danger); border-radius: var(--qr-radius); font-size: 12px; line-height: 1.45; }
.qr-bear-walkin .qr-choice, .qr-bear-walkin-choice { --qr-choice-icon: var(--qr-prop-walkin); }
.qr-bear-walkin .qr-choice:nth-child(2n), .qr-bear-walkin-choice:nth-child(2n) { --qr-choice-icon: var(--qr-prop-phone); }
.qr-bear-walkin .qr-choice:nth-child(3n), .qr-bear-walkin-choice:nth-child(3n) { --qr-choice-icon: var(--qr-prop-apron); }
.qr-bear-walkin-timer { color: var(--qr-warn); font-family: 'Press Start 2P', monospace; font-size: 16px; text-align: center; animation: qrBearSteam 1.6s ease-in-out infinite; }
.qr-bear-walkin-timer.low { color: var(--qr-danger); animation: qrBearHeat 620ms ease-in-out infinite; }
.qr-bear-walkin-status, .qr-bear-walkin .qr-status { border-color: var(--qr-bear-steel-light); }
.qr-bear-walkin-done .qr-bear-walkin-note { border-left-color: var(--qr-bear-herb); }

/* 9. Puzzle 5: bear-call */
.qr-bear-call { position: relative; z-index: 1; }
.qr-bear-call-console { display: grid; grid-template-columns: 88px 1fr; gap: 10px; align-items: center; margin: 12px 0; padding: 12px; background: rgba(15, 18, 18, 0.66); border: 1px solid var(--qr-bear-line); border-radius: var(--qr-radius); }
.qr-bear-call-phone { width: 80px; height: 80px; background: var(--qr-prop-phone) center / contain no-repeat; image-rendering: pixelated; animation: qrBearObjectBob 2.2s ease-in-out infinite; }
.qr-bear-call-script { padding: 10px 12px; color: var(--qr-bear-ticket-ink); background: var(--qr-bear-ticket); border: 1px solid var(--qr-warn); border-radius: var(--qr-radius); font-size: 12px; line-height: 1.5; }
.qr-bear-call-script strong { color: var(--qr-danger); }
.qr-bear-call .qr-choice, .qr-bear-call-choice { --qr-choice-icon: var(--qr-prop-phone); }
.qr-bear-call .qr-choice:nth-child(2n), .qr-bear-call-choice:nth-child(2n) { --qr-choice-icon: var(--qr-prop-ticket); }
.qr-bear-call .qr-choice:nth-child(3n), .qr-bear-call-choice:nth-child(3n) { --qr-choice-icon: var(--qr-prop-hat); }
.qr-bear-call-timer { margin: 0 0 12px; color: var(--qr-accent); font-family: 'Press Start 2P', monospace; font-size: 16px; text-align: center; }
.qr-bear-call-timer.low { color: var(--qr-danger); animation: qrBearHeat 600ms ease-in-out infinite; }
.qr-bear-call-final { border-color: var(--qr-warn); background: rgba(228, 189, 87, 0.10); --qr-choice-icon: var(--qr-prop-donut); }
.qr-bear-call-done .qr-outcome { background: rgba(228, 189, 87, 0.10); }

/* 10. Result and dossier */
.qr-result { position: relative; z-index: 1; padding: 28px 4px 10px; text-align: center; }
.qr-result-sprite-wrap { display: flex; justify-content: center; margin-bottom: 16px; }
.qr-result-sprite { width: 224px; height: 224px; display: block; object-fit: contain; object-position: center; image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; background: linear-gradient(180deg, rgba(132, 139, 136, 0.20), var(--qr-bg)); border: 4px solid var(--qr-accent); border-radius: var(--qr-radius); box-shadow: 0 8px 0 var(--qr-accent-dim), 0 0 0 1px rgba(242, 232, 212, 0.16); animation: qrBearSpriteIn 540ms cubic-bezier(.22, 1.18, .36, 1); }
.qr-result-eyebrow, .qr-result-dossier-eyebrow { color: var(--qr-accent); font-family: 'Press Start 2P', monospace; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; }
.qr-result-name { margin: 8px 0; color: var(--qr-fg) !important; font-family: 'Press Start 2P', monospace; font-size: 20px; line-height: 1.35; letter-spacing: 1px; }
.qr-result-tagline { margin: 0 0 14px; color: var(--qr-fg-dim); font-size: 14px; font-style: italic; }
.qr-result-desc { margin: 0 0 16px; padding: 0 8px; color: var(--qr-fg); font-size: 15px; line-height: 1.6; text-align: left; }
.qr-result-runner { color: var(--qr-fg-dim); font-size: 13px; }
.qr-result-receipts, .qr-result-receipts.qr-result-dossier { margin-top: 22px; padding: 16px; text-align: left; background: linear-gradient(180deg, rgba(228, 112, 44, 0.10), rgba(15, 18, 18, 0.52)), var(--qr-bg-elev); border: 1px solid var(--qr-bear-line); border-radius: var(--qr-radius); }
.qr-result-receipts h3, .qr-result-dossier-header, .qr-result-dossier-stamp { color: var(--qr-warn); font-family: 'Press Start 2P', monospace; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; }
.qr-result-receipts ul, .qr-result-dossier-lines { margin: 12px 0 0; padding-left: 20px; color: var(--qr-fg-dim); font-size: 13px; line-height: 1.6; }
.qr-result-share-row, .qr-result-next { display: grid; gap: 10px; margin-top: 16px; }
.qr-result-cta { display: block; padding: 12px; color: var(--qr-fg); text-decoration: none; background: rgba(15, 18, 18, 0.58); border: 1px solid var(--qr-bear-line); border-radius: var(--qr-radius); }
.qr-result-cta-eyebrow { display: block; color: var(--qr-warn); font-family: 'Press Start 2P', monospace; font-size: 8px; letter-spacing: 1px; text-transform: uppercase; }
.qr-result-cta-title { display: block; margin-top: 5px; font-size: 13px; font-weight: 700; }
.qr-result-cta-desc { display: block; margin-top: 4px; color: var(--qr-fg-dim); font-size: 12px; line-height: 1.4; }

/* 11. Motion */
@keyframes qrBearSpriteIn {
  from { opacity: 0; transform: translateY(-14px) scale(0.86); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes qrBearSceneIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes qrBearPropBob {
  0%, 100% { transform: translateY(-50%); }
  50% { transform: translateY(calc(-50% - 2px)); }
}

@keyframes qrBearObjectBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes qrBearChoiceLift {
  0% { transform: translateY(0); }
  60% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

@keyframes qrBearHeat {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.025); filter: brightness(1.14); }
}

@keyframes qrBearSteam {
  0%, 100% { opacity: 0.72; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}

/* 12. Mobile */
@media (max-width: 520px) {
  #qr-root { padding: 18px 12px; }
  .qr-board { min-height: 320px; padding: 16px 12px 18px; }
  .qr-board h2, .qr-choice-prompt h2 { font-size: 12px; line-height: 1.55; }
  .qr-choice-prompt p { font-size: 13px; }
  .qr-scene { max-height: 150px; }
  .qr-choice { min-height: 56px; padding: 11px 11px 11px 52px; }
  .qr-choice::before { left: 11px; width: 28px; height: 28px; }
  .qr-choice::after { left: 45px; }
  .qr-btn, .qr-choice, .qr-bear-expo-ticket, .qr-bear-prep-bin, .qr-bear-family-seat { min-height: 44px; }
  .qr-bear-prep-station, .qr-bear-family-table { grid-template-columns: 1fr; }
  .qr-bear-call-console { grid-template-columns: 1fr; text-align: center; }
  .qr-bear-call-phone { margin: 0 auto; }
  .qr-result-sprite { width: 192px; height: 192px; }
  .qr-result-name { font-size: 18px; }
}

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