:root {
  color-scheme: dark;
  --night: #080d19;
  --panel: #10192a;
  --panel-raised: #162239;
  --line: #31405b;
  --ink: #f3f5ff;
  --muted: #aab6d0;
  --gold: #ffe066;
  --blue: #8bd3ff;
  --green: #8fe2a3;
  --mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--night);
}
* {
  box-sizing: border-box;
}
html,
body {
  min-width: 0;
  min-height: 100%;
  margin: 0;
}
body {
  background: var(--night);
  font-size: 14px;
  line-height: 1.5;
}
button,
input {
  font: inherit;
}
button {
  min-height: 42px;
  border: 1px solid #8b7932;
  border-radius: 7px;
  padding: 0.65rem 0.8rem;
  color: #171a21;
  background: var(--gold);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}
button:hover:not(:disabled) {
  transform: translateY(-1px);
  background: #fff0a0;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
[hidden] {
  display: none !important;
}
.activity {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(335px, 0.92fr);
  min-height: 790px;
  height: 100%;
  overflow: hidden;
  background: var(--night);
}
.scene {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 790px;
  overflow: hidden;
  background: #080d1d;
}
.scene-art,
.scene-glow,
.scene-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.scene-art {
  z-index: -3;
  background:
    linear-gradient(180deg, rgba(4, 8, 22, 0.15), rgba(4, 8, 22, 0.2) 48%, rgba(4, 8, 22, 0.72)),
    url("../assets/projects/inspector-cave-scene.png") center 49% / cover no-repeat;
  transform: scale(1.015);
}
.activity[data-location="coffee-shop"] .scene-art {
  background:
    linear-gradient(180deg, rgba(17, 10, 6, 0.12), rgba(17, 10, 6, 0.06) 45%, rgba(17, 10, 6, 0.58)),
    url("../assets/projects/inspector-coffee-shop-scene.jpg") center 42% / cover no-repeat;
}
.scene-glow {
  z-index: -2;
  background:
    radial-gradient(ellipse at 51% 57%, rgba(31, 114, 255, 0.19), transparent 31%),
    linear-gradient(180deg, rgba(5, 8, 19, 0.18), transparent 37%, rgba(3, 6, 15, 0.24));
  opacity: 0.8;
  transition: opacity 240ms ease;
}
.scene-stars {
  z-index: -1;
  opacity: 0.4;
  background-image:
    radial-gradient(circle, rgba(126, 196, 255, 0.8) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(126, 196, 255, 0.55) 0 1px, transparent 1.7px);
  background-position: 20% 30%, 75% 55%;
  background-size: 97px 113px, 143px 127px;
  animation: cave-drift 18s linear infinite;
}
.activity[data-location="coffee-shop"] .scene-glow {
  background:
    radial-gradient(ellipse at 68% 47%, rgba(255, 175, 92, 0.2), transparent 36%),
    linear-gradient(180deg, rgba(33, 16, 8, 0.06), transparent 45%, rgba(33, 16, 8, 0.24));
}
.activity[data-location="coffee-shop"] .scene-stars {
  opacity: 0.12;
  animation: none;
}
.scene-hud {
  position: absolute;
  z-index: 3;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 19px 20px;
  color: #e6ecff;
  font: 700 0.64rem/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-shadow: 0 2px 10px #060b17;
}
.hud-mark {
  color: #fff;
}
.hud-mark i {
  color: var(--blue);
  font-style: normal;
}
.hud-location {
  color: var(--gold);
}
.hud-location b {
  color: var(--blue);
}
.scene-character-wrap {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 30%;
  width: 145px;
  height: 238px;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  align-items: end;
  pointer-events: none;
}
.activity[data-location="coffee-shop"] .scene-character-wrap {
  left: 19%;
  bottom: 29%;
  width: 120px;
  height: 210px;
}
.character-aura {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 22px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(81, 170, 255, 0.42), transparent 70%);
  filter: blur(7px);
}
.scene-character {
  position: absolute;
  z-index: 1;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, 0.5));
}
.sprite-frame {
  display: block;
  flex: none;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
}
.character-name {
  position: absolute;
  z-index: 2;
  bottom: 0;
  display: grid;
  gap: 1px;
  color: #fff;
  font: 800 0.6rem/1.15 var(--mono);
  letter-spacing: 0.12em;
  text-align: center;
  text-shadow: 0 2px 7px #000;
}
.character-name i {
  color: var(--blue);
  font-size: 0.48rem;
  font-style: normal;
  font-weight: 600;
}
.scene-boundary,
.scene-hotspot,
.scene-evidence,
.scene-alert,
.scene-responder {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
}
.scene-boundary {
  top: 72px;
  left: 50%;
  padding: 6px 10px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 224, 102, 0.7);
  border-radius: 999px;
  color: #fff0b5;
  background: rgba(38, 23, 13, 0.86);
  font: 800 0.55rem/1.3 var(--mono);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.scene-hotspot {
  top: 43%;
  left: 70%;
  width: 1px;
  height: 1px;
}
.hotspot-ring {
  position: absolute;
  top: -32px;
  left: -32px;
  width: 64px;
  height: 64px;
  border: 2px solid #ffe066;
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(255, 224, 102, 0.8), inset 0 0 13px rgba(255, 224, 102, 0.3);
}
.scene-object-label {
  position: absolute;
  top: 38px;
  left: -53px;
  width: 150px;
  padding: 4px 6px;
  border: 1px solid rgba(255, 224, 102, 0.76);
  border-radius: 4px;
  color: #fff3bb;
  background: rgba(32, 23, 12, 0.9);
  font: 800 0.48rem/1.3 var(--mono);
  text-align: center;
  white-space: nowrap;
}
.scene-evidence,
.scene-alert,
.scene-responder {
  display: grid;
  gap: 2px;
  min-width: 142px;
  padding: 8px 10px;
  border: 1px solid rgba(167, 227, 180, 0.8);
  border-radius: 6px;
  color: #eaffed;
  background: rgba(12, 38, 27, 0.9);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.28);
  font: 800 0.5rem/1.35 var(--mono);
  letter-spacing: 0.04em;
}
.scene-evidence {
  top: 24%;
  left: 7%;
}
.scene-alert,
.scene-responder {
  top: 16%;
  right: 7%;
  border-color: rgba(139, 211, 255, 0.8);
  color: #e6f7ff;
  background: rgba(9, 33, 47, 0.92);
}
.scene-evidence i,
.scene-alert i,
.scene-responder i {
  color: #b9e3c2;
  font-size: 0.45rem;
  font-style: normal;
  font-weight: 600;
}
.scene-alert i,
.scene-responder i {
  color: #b8eaff;
}
/* Café patrons stay behind the foreground HUD and Mira. */
.scene-cafe-actor {
  position: absolute;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.48));
}
.scene-barista {
  left: 45%;
  bottom: 34%;
}
.scene-suspect {
  left: 70%;
  bottom: 37%;
}
.activity[data-location="coffee-shop"] .scene-barista,
.activity[data-location="coffee-shop"][data-traffic-found="true"] .scene-suspect {
  opacity: 1;
}
.activity[data-cue="story-traffic-spotted"] .scene-suspect {
  animation: patron-reveal 620ms ease-out both;
}
.activity[data-cue="story-client-disconnected"] .scene-suspect {
  animation: suspect-flinch 420ms ease-out both;
}
.activity[data-cue="story-client-rejoined"] .scene-suspect {
  animation: suspect-rejoin 700ms ease-out both;
}
.activity[data-cue="story-welcome-shown"] .scene-suspect {
  animation: suspect-notice 520ms ease-out both;
}
.activity[data-story-beat="escorted"] .scene-suspect {
  opacity: 0;
}
.scene-escort-suspect {
  visibility: hidden;
  opacity: 0;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.5));
}
.activity[data-story-beat="escorted"] .scene-escort-suspect {
  visibility: visible;
  opacity: 1;
}

/* Responders enter with the atlas walk frames and accompany the suspect off scene. */
.scene-fbi-party {
  position: absolute;
  z-index: 2;
  top: 42%;
  left: 70%;
  display: flex;
  align-items: flex-end;
  gap: clamp(4px, 1.5vw, 80px);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
}
.scene-fbi-agent {
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.5));
}
.activity[data-story-beat="music"] .scene-alert,
.activity[data-story-beat="fbi"] .scene-fbi-party {
  opacity: 1;
}
.activity[data-cue="story-rickroll-played"] .scene-alert {
  animation: marker-arrive 620ms ease-out both;
}
.activity[data-cue="story-fbi-arrived"] .scene-fbi-party {
  animation: fbi-enter 1000ms ease-out both;
}
.activity[data-story-beat="escorted"] .scene-fbi-party {
  opacity: 0;
}
.activity[data-cue="story-hacker-escorted"] .scene-fbi-party {
  animation: fbi-escort 1800ms ease-in both;
}
@keyframes fbi-enter {
  from { opacity: 0; transform: translateX(calc(-50% + 180px)); }
  to { opacity: 1; transform: translateX(-50%); }
}
@keyframes fbi-escort {
  0%, 15% { opacity: 1; transform: translateX(-50%); }
  100% { opacity: 0; transform: translateX(calc(-50% + 340px)); }
}
@keyframes patron-reveal {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes suspect-flinch {
  0%, 100% { transform: translateX(-50%); }
  35% { transform: translateX(calc(-50% - 8px)) rotate(-2deg); }
  70% { transform: translateX(calc(-50% + 4px)) rotate(1deg); }
}
@keyframes suspect-rejoin {
  from { transform: translate(-50%, 5px); }
  55% { transform: translate(calc(-50% - 9px), 0); }
  to { transform: translate(-50%, 0); }
}
@keyframes suspect-notice {
  0%, 100% { transform: translateX(-50%); }
  45% { transform: translate(-50%, -8px); }
}
.activity[data-location="coffee-shop"] .scene-boundary {
  opacity: 1;
}
.activity[data-location="coffee-shop"]:not([data-story-beat="observe"]) .scene-hotspot,
.activity[data-location="coffee-shop"]:not([data-story-beat="observe"]) .scene-evidence {
  opacity: 1;
}
.activity[data-story-beat="disconnected"] .hotspot-ring {
  border-style: dashed;
  border-color: #ffad9f;
  box-shadow: 0 0 16px rgba(255, 130, 110, 0.5);
}
.activity:is([data-story-beat="rejoined"], [data-story-beat="welcome"]) .hotspot-ring {
  border-color: var(--green);
}
.activity[data-story-beat="music"] .hotspot-ring {
  border-color: var(--blue);
  animation: hotspot-pulse 1.4s ease-in-out infinite;
}
.activity:is([data-story-beat="fbi"], [data-story-beat="escorted"]) .scene-responder {
  opacity: 1;
}
.activity[data-story-beat="escorted"] .hotspot-ring {
  opacity: 0.25;
  border-style: dashed;
}
.activity[data-story-beat="escorted"] .scene-object-label {
  left: -90px;
  width: 190px;
  border-color: var(--green);
  color: #eaffed;
}
.activity[data-cue="story-fbi-arrived"] .scene-responder,
.activity[data-cue="story-hacker-escorted"] .scene-responder,
.activity[data-cue="story-client-rejoined"] .scene-hotspot {
  animation: marker-arrive 620ms ease-out both;
}
.activity[data-cue="story-traffic-spotted"] .hotspot-ring {
  animation: hotspot-pulse 850ms ease-out 2;
}
.scene-dialogue {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 19px;
  width: min(92%, 580px);
  max-height: 56%;
  overflow: auto;
  padding: 16px 18px 17px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 224, 102, 0.9);
  border-radius: 12px;
  background: rgba(10, 15, 29, 0.93);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(5px);
}
.scene-kicker,
.panel-index {
  margin: 0 0 0.45rem;
  color: var(--blue);
  font: 800 0.61rem/1.45 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.scene-dialogue h1 {
  margin: 0;
  color: #fff;
  font: 800 clamp(1.05rem, 2.1vw, 1.5rem)/1.2 var(--mono);
  letter-spacing: -0.03em;
}
.scene-dialogue > p:not(.scene-kicker) {
  margin: 0.6rem 0 0;
  color: #d3dbef;
  font-size: 0.8rem;
  line-height: 1.5;
}
.scene-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 13px;
}
.scene-actions button {
  min-width: 0;
  text-align: left;
}
.scene-actions button.secondary {
  border-color: #526486;
  color: #e6ecff;
  background: rgba(23, 35, 59, 0.9);
}
.scene-actions button.secondary:hover:not(:disabled) {
  background: #263858;
}
.scene-signal {
  position: absolute;
  z-index: 3;
  top: 73px;
  left: 50%;
  max-width: min(88%, 380px);
  margin: 0;
  padding: 7px 11px;
  transform: translateX(-50%);
  border: 1px solid rgba(139, 211, 255, 0.46);
  border-radius: 999px;
  color: #dcefff;
  background: rgba(8, 16, 33, 0.8);
  font: 700 0.59rem/1.3 var(--mono);
  text-align: center;
  opacity: 0;
  pointer-events: none;
}
.activity[data-cue]:not([data-cue="idle"]) .scene-signal {
  animation: cue-label-in 2.2s ease both;
}
.workbench {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 790px;
  height: 100%;
  border-left: 2px solid #526b8e;
  background:
    radial-gradient(ellipse at 90% 0, rgba(66, 102, 165, 0.1), transparent 40%),
    var(--night);
}
.runtime-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 58px;
  padding: 9px 12px;
  border-bottom: 1px solid #25324b;
}
.runtime-header > div {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 3px 12px;
  min-width: 0;
}
.runtime-kicker {
  margin: 0;
  color: var(--blue);
  font: 800 0.57rem/1.35 var(--mono);
  letter-spacing: 0.1em;
}
.runtime-title {
  margin: 0;
  color: #f3f5ff;
  font: 800 0.86rem/1.35 var(--mono);
}
.menu-return {
  min-height: 34px;
  padding: 0.4rem 0.65rem;
  border-color: #516486;
  color: #e6ecff;
  background: #17233b;
}
.workbench-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 12px;
}
.selection-panel,
.play-panel {
  max-width: 690px;
  margin: 0 auto;
}
.selection-panel h2,
.activity-heading h2,
.completion-panel h2 {
  margin: 0;
  color: #fff;
  font: 800 1.05rem/1.3 var(--mono);
}
.selection-panel > p:not(.panel-index),
.activity-heading > p:not(.panel-index),
.completion-panel > p:not(.panel-index) {
  color: #bfcae0;
  font-size: 0.77rem;
}
.selection-panel > p:not(.panel-index) {
  margin: 0.6rem 0 1rem;
}
.mode-register {
  display: grid;
  gap: 7px;
  margin-top: 1.2rem;
  padding: 12px;
  border: 1px solid #2d3b56;
  border-radius: 8px;
  background: rgba(17, 27, 46, 0.76);
  color: #dce5f8;
  font: 0.68rem/1.5 var(--mono);
}
.mode-register span {
  display: flex;
  gap: 9px;
}
.mode-register b {
  color: var(--gold);
}
.fixed-note,
.safety-note {
  margin: 14px 0 0;
  padding: 10px 11px;
  border-left: 3px solid #7b672c;
  color: #bdc7dc;
  background: rgba(69, 57, 25, 0.22);
  font-size: 0.68rem;
  line-height: 1.5;
}
.activity-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 3px;
  margin-bottom: 13px;
}
.activity-heading .panel-index {
  flex: 0 0 auto;
  margin: 0;
}
.activity-heading h2 {
  flex: 1 1 180px;
  min-width: 0;
}
.activity-heading > p:not(.panel-index) {
  flex: 1 0 100%;
  margin: 0.4rem 0 0;
}
.activity-heading code,
.fixed-note code,
.command-feedback code {
  color: var(--gold);
  font-family: var(--mono);
}
.step-progress {
  display: flex;
  gap: 6px;
  margin: 0 0 12px;
}
.step-dot {
  flex: 1 1 0;
  min-width: 0;
  height: 5px;
  border-radius: 5px;
  background: #28354d;
}
.step-dot.complete {
  background: var(--green);
}
.step-dot.current {
  background: var(--gold);
  box-shadow: 0 0 9px rgba(255, 224, 102, 0.38);
}
.terminal-panel,
.completion-panel {
  margin-top: 11px;
  overflow: hidden;
  border: 1px solid #2f3c56;
  border-radius: 9px;
  background: #0d1423;
}
.terminal-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid #293650;
  background: #141f34;
}
.terminal-topline h3 {
  margin: 0;
  color: #dbe6ff;
  font: 800 0.6rem/1.4 var(--mono);
  letter-spacing: 0.08em;
}
.terminal-topline > span {
  color: var(--green);
  font: 700 0.52rem/1.4 var(--mono);
}
.terminal-panel pre {
  min-height: 82px;
  max-height: 170px;
  overflow: auto;
  margin: 0;
  padding: 12px;
  color: #c9f2d1;
  background: #070d16;
  font: 0.68rem/1.6 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
#terminal-form {
  padding: 11px 12px 0;
}
#terminal-form label {
  display: block;
  margin-bottom: 5px;
  color: #b8c6df;
  font: 700 0.59rem/1.45 var(--mono);
}
.terminal-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.terminal-input-row > span {
  color: var(--green);
  font: 800 0.8rem var(--mono);
}
.terminal-input-row input {
  min-width: 0;
  border: 1px solid #3a4b69;
  border-radius: 5px;
  padding: 9px 10px;
  color: #e8efff;
  background: #080e19;
  font: 0.74rem var(--mono);
}
.terminal-input-row input {
  flex: 1 1 auto;
}
.terminal-input-row button {
  min-height: 37px;
}
.command-feedback {
  min-height: 1.5em;
  margin: 8px 12px 10px;
  color: #aebcda;
  font: 0.63rem/1.45 var(--mono);
}
.story-actions {
  margin-top: 12px;
}
.story-actions button {
  width: 100%;
}
.welcome-panel {
  margin-top: 12px;
  padding: 13px;
  border: 1px solid rgba(255, 224, 102, 0.48);
  border-radius: 8px;
  background: rgba(52, 42, 18, 0.36);
}
.welcome-panel h3 {
  margin: 0;
  color: #fff5c8;
  font: 800 0.78rem/1.35 var(--mono);
}
.welcome-panel p:not(.panel-index) {
  margin: 7px 0 12px;
  color: #d5d0b5;
  font-size: 0.7rem;
}
.video-disclosure {
  padding: 8px;
  border-left: 3px solid var(--blue);
  background: var(--panel);
}
.video-player iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 5px;
}
.video-fallback code {
  color: var(--blue);
  overflow-wrap: anywhere;
}
.completion-panel {
  padding: 15px;
  border-color: #37694b;
  background: rgba(14, 37, 28, 0.72);
}
.completion-panel .panel-index {
  color: var(--green);
}
.completion-panel > p:not(.panel-index) {
  margin: 0.5rem 0 1rem;
}
.replay-button {
  width: 100%;
}
.safety-note {
  margin-top: 12px;
  border-left-color: #3c718e;
  background: rgba(18, 40, 56, 0.58);
  font-size: 0.63rem;
}
.safety-note strong {
  display: block;
  margin-bottom: 2px;
  color: var(--blue);
  font: 800 0.56rem/1.4 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.runtime-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 49px;
  padding: 8px 17px;
  border-top: 1px solid #25324b;
  color: #9eabc4;
  font: 700 0.53rem/1.3 var(--mono);
  letter-spacing: 0.06em;
}
.runtime-footer > span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.runtime-footer button {
  min-height: 30px;
  padding: 0.35rem 0.55rem;
  border-color: #384966;
  color: #c9d4e9;
  background: transparent;
  font-size: 0.56rem;
}
.status-light {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px rgba(143, 226, 163, 0.6);
}
.activity[data-cue="cave-menu-open"] .scene-glow,
.activity[data-cue^="story-"] .scene-glow,
.activity[data-cue^="task-"] .scene-glow {
  opacity: 1;
  animation: glow-bloom 900ms ease-out both;
}
.activity[data-cue="cave-menu-open"] .scene-art,
.activity[data-cue="story-traffic-spotted"] .scene-art {
  animation: cave-reveal 900ms ease-out both;
}
.activity[data-cue^="story-"] .character-aura,
.activity[data-cue^="task-"] .character-aura {
  animation: aura-pulse 780ms ease-out both;
}
@keyframes marker-arrive {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes hotspot-pulse {
  50% {
    transform: scale(1.22);
    box-shadow: 0 0 23px rgba(255, 224, 102, 1), inset 0 0 18px rgba(255, 224, 102, 0.55);
  }
}
@keyframes cave-drift {
  to {
    background-position: 117% 25%, -5% 60%;
  }
}
@keyframes aura-pulse {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
  45% {
    opacity: 1;
    transform: scale(1.48);
  }
}
@keyframes glow-bloom {
  0%,
  100% {
    filter: brightness(1);
  }
  45% {
    filter: brightness(1.35);
  }
}
@keyframes cave-reveal {
  0% {
    transform: scale(1.015);
    filter: brightness(0.9);
  }
  45% {
    transform: scale(1.045);
    filter: brightness(1.22);
  }
  100% {
    transform: scale(1.015);
    filter: brightness(1);
  }
}
@keyframes cue-label-in {
  0% {
    opacity: 0;
    transform: translate(-50%, -7px);
  }
  12%,
  75% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -2px);
  }
}
@media (max-width: 760px) {
  .activity {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .scene {
    min-height: 540px;
    height: 540px;
  }
  .workbench {
    min-height: 660px;
    height: auto;
    border-top: 2px solid #526b8e;
    border-left: 0;
  }
  .workbench-body {
    overflow: visible;
  }
  .runtime-header {
    gap: 7px;
    padding: 8px 10px;
  }
  .runtime-header > div {
    flex-wrap: nowrap;
    gap: 4px 6px;
    white-space: nowrap;
  }
  .runtime-kicker {
    font-size: clamp(0.45rem, 1.05vw, 0.52rem);
    letter-spacing: 0.025em;
    white-space: nowrap;
  }
  .runtime-title {
    font-size: clamp(0.62rem, 1.5vw, 0.78rem);
    white-space: nowrap;
  }
  .menu-return {
    min-height: 31px;
    padding: 0.32rem 0.5rem;
    font-size: 0.62rem;
    white-space: nowrap;
  }
  .activity-heading {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: baseline;
    column-gap: clamp(8px, 2.2vw, 12px);
    row-gap: 4px;
  }
  .activity-heading .panel-index {
    grid-column: 1;
    grid-row: 1;
    width: max-content;
    border-right: 1px solid rgba(139, 211, 255, 0.58);
    padding-right: 8px;
    font-size: clamp(0.43rem, 1.05vw, 0.53rem);
    letter-spacing: 0.03em;
    white-space: nowrap;
  }
  .activity-heading h2 {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    font-size: clamp(0.72rem, 2vw, 0.98rem);
    line-height: 1.2;
    white-space: normal;
  }
  .activity-heading > p:not(.panel-index) {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0.4rem 0 0;
  }
  .scene-character-wrap {
    bottom: 32%;
  }
  .activity[data-location="coffee-shop"] .scene-character-wrap {
    left: 16%;
    bottom: 31%;
  }
  .scene-barista {
    left: 39%;
    bottom: 38%;
  }
  .scene-suspect {
    left: 70%;
    bottom: 40%;
  }
  .scene-fbi-party {
    top: auto;
    bottom: 40%;
    gap: 8px;
  }
}
@media (max-width: 420px) {
  .scene-dialogue {
    width: calc(100% - 24px);
    padding: 13px;
  }
  .scene-actions {
    grid-template-columns: 1fr;
  }
  .workbench-body {
    padding: 10px;
  }
  .runtime-header {
    padding: 9px 10px;
  }
}
@media (max-width: 320px) {
  .activity-heading {
    grid-template-columns: minmax(0, 1fr);
  }
  .activity-heading .panel-index {
    grid-column: 1;
    grid-row: 1;
  }
  .activity-heading h2 {
    grid-column: 1;
    grid-row: 2;
    white-space: normal;
  }
  .activity-heading > p:not(.panel-index) {
    grid-row: 3;
  }
}
@media (max-width: 280px) {
  .runtime-header {
    flex-wrap: wrap;
  }
  .runtime-header > div {
    flex: 1 1 100%;
    justify-content: space-between;
  }
  .menu-return {
    margin-left: auto;
  }
}
@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;
  }
}