:root {
  --ink: #101312;
  --ink-2: #171c1a;
  --panel: rgba(13, 17, 16, 0.86);
  --panel-strong: rgba(8, 11, 10, 0.94);
  --paper: #e7e0d2;
  --paper-soft: #cfc7b7;
  --line: rgba(231, 224, 210, 0.22);
  --blue: #79a4a3;
  --rust: #a75239;
  --olive: #778268;
  --display: "Arial Narrow", "Avenir Next Condensed", "Roboto Condensed", "Helvetica Neue", sans-serif;
  --hand: "Noteworthy", "Bradley Hand", "Segoe Print", cursive;
  --lettering: "Marker Felt", "Noteworthy", "Comic Sans MS", "Chalkboard SE", sans-serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Cafe Origin is rainy daytime, not a night sequence. These plates carry
   naturally deep source values, so remove the inherited noir wash and bring
   their exposure into the same readable range as the approved office beats. */
.game-shell:is(
  [data-step="cafeWalk"],
  [data-step="cafeWalkUseful"],
  [data-step="cafeOriginInterior"],
  [data-step="cafeCounterObservation"],
  [data-step="cafeSvenCoffeeQuestion"],
  [data-step="cafeSvenCoffeeReply"],
  [data-step="cafeSophiaSvenTease"],
  [data-step="cafeSvenBeans"],
  [data-step="cafeSvenFeature"],
  [data-step="cafeSvenLook"],
  [data-step="cafeSophiaBehave"],
  [data-step="cafeCoffeeChoices"],
  [data-step="cafeSvenRecommendation"],
  [data-step="cafeSophiaRecommendation"],
  [data-step="cafeSvenRecommendationSophia"],
  [data-step="cafeSvenRecommendationSven"],
  [data-step="cafeWalkPrompt"],
  [data-step="cafe"],
  [data-step="cafeQuestions"],
  [data-step="cafeWeakness"],
  [data-step="cafeDistrust"],
  [data-step="returnWalk"]
) .scene-image {
  filter: saturate(1) contrast(1) brightness(1.4) !important;
}

.game-shell:is(
  [data-step="cafeWalk"],
  [data-step="cafeWalkUseful"],
  [data-step="cafeOriginInterior"],
  [data-step="cafeCounterObservation"],
  [data-step="cafeSvenCoffeeQuestion"],
  [data-step="cafeSvenCoffeeReply"],
  [data-step="cafeSophiaSvenTease"],
  [data-step="cafeSvenBeans"],
  [data-step="cafeSvenFeature"],
  [data-step="cafeSvenLook"],
  [data-step="cafeSophiaBehave"],
  [data-step="cafeCoffeeChoices"],
  [data-step="cafeSvenRecommendation"],
  [data-step="cafeSophiaRecommendation"],
  [data-step="cafeSvenRecommendationSophia"],
  [data-step="cafeSvenRecommendationSven"],
  [data-step="cafeWalkPrompt"],
  [data-step="cafe"],
  [data-step="cafeQuestions"],
  [data-step="cafeWeakness"],
  [data-step="cafeDistrust"],
  [data-step="returnWalk"]
) .scene-wash {
  background: transparent !important;
}

/* The return-walk note belongs to the lower-left of the large right-hand
   panel, where it can overlap only the walkers' legs. It must not blanket the
   smaller departure/streetscape panels on the left. */
@media (min-width: 761px) {
  .game-shell[data-step="returnWalk"] .workspace {
    position: absolute;
    z-index: 2;
    left: clamp(26rem, 44vw, 38rem);
    bottom: clamp(4rem, 8vh, 5.5rem);
    width: min(330px, calc(100% - 2rem));
    margin: 0;
  }

.game-shell[data-step="returnWalk"] .tour-caption {
    margin: 0;
  }
}

/* The first return to the agency after Cafe Origin is still rainy daytime.
   Keep the voicemail handoff in the same readable exposure as the approved
   office dialogue plate, rather than dimming it under the shared-family wash. */
.game-shell:is([data-step="returnOffice"], [data-step="returnOfficeReminder"]) .scene-image {
  filter: saturate(1) contrast(1) brightness(1.4) !important;
}

.game-shell:is([data-step="returnOffice"], [data-step="returnOfficeReminder"]) .scene-wash {
  background: transparent !important;
}

/* The shared office plate predates the voicemail state. A small physical LED
   over the phone's message indicator makes the waiting call visible without
   changing the locked desk art or treating the phone as a floating UI layer. */
.game-shell:is([data-step="returnOffice"], [data-step="returnOfficeReminder"]) .stage::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 87.55%;
  top: 70.6%;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(58, 10, 9, .85);
  border-radius: 50%;
  pointer-events: none;
  background: #e64b3c;
  box-shadow: 0 0 4px rgba(237, 70, 58, .96), 0 0 10px rgba(220, 43, 34, .5);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--paper);
  background: var(--ink);
  font-family: var(--sans);
  line-height: 1.45;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  /* Keep the new scene readable while its still image is loading. The existing
     image may remain briefly, but the player never loses controls to a fade. */
  .game-shell.is-scene-loading .workspace,
  .game-shell.is-scene-loading .player-kit,
  .game-shell.is-scene-loading .dialogue-panel,
  .game-shell.is-scene-loading .dialogue-actions {
    opacity: 1;
    pointer-events: auto;
  }
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 100;
  padding: .75rem 1rem;
  color: var(--ink);
  background: var(--paper);
}
.skip-link:focus { top: 1rem; }

.game-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  min-height: 100svh;
  background: #080b0a;
}
.stage {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}
.scene-image,
.scene-wash,
.scene-vignette {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.scene-image {
  z-index: -4;
  object-fit: cover;
  object-position: center;
  filter: saturate(.94) contrast(1.05) brightness(1.08);
  transition: opacity .25s ease, transform .25s ease, object-position .25s ease;
}
.game-shell.is-scene-loading .workspace,
.game-shell.is-scene-loading .player-kit,
.game-shell.is-scene-loading .dialogue-panel,
.game-shell.is-scene-loading .dialogue-actions {
  opacity: 0;
  pointer-events: none;
}
.scene-wash {
  z-index: -3;
  background:
    linear-gradient(90deg, rgba(8, 11, 10, .52), rgba(8, 11, 10, .04) 48%, rgba(8, 11, 10, .44)),
    linear-gradient(0deg, rgba(8, 11, 10, .58), rgba(8, 11, 10, .02) 52%, rgba(8, 11, 10, .28));
}
.game-shell[data-step="officeDoor"] .scene-image,
.game-shell[data-step="glassClose"] .scene-image,
.game-shell[data-step="doorKnock"] .scene-image,
.game-shell[data-step="intro"] .scene-image,
.game-shell[data-step="introResponse"] .scene-image,
.game-shell[data-step="shaneFile"] .scene-image,
.game-shell[data-step="sophiaCallsShane"] .scene-image,
.game-shell[data-step="sophiaInterrupt"] .scene-image,
.game-shell[data-step="shaneIntro"] .scene-image,
.game-shell[data-step="rhythm"] .scene-image,
.game-shell[data-step="shaneRhythmResponse"] .scene-image,
.game-shell[data-step="businessBanter"] .scene-image,
.game-shell[data-step="bankBanter"] .scene-image,
.game-shell[data-step="gladBanter"] .scene-image,
.game-shell[data-step="plainBanter"] .scene-image,
.game-shell[data-step="improveBanter"] .scene-image,
.game-shell[data-step="officeTourBoard"] .scene-image,
.game-shell[data-step="officeTourDesk"] .scene-image,
.game-shell[data-step="officeTourEvidence"] .scene-image,
.game-shell[data-step="officeTourScanner"] .scene-image,
.game-shell[data-step="officeTourFile"] .scene-image,
.game-shell[data-step="scannerBoundary"] .scene-image,
.game-shell[data-step="scannerPast"] .scene-image,
.game-shell[data-step="scannerCooperate"] .scene-image,
.game-shell[data-step="coffeeOffice"] .scene-image,
.game-shell[data-step="coffeeCafeOrigin"] .scene-image,
.game-shell[data-step="coffeeEvidenceRoom"] .scene-image,
.game-shell[data-step="coffeeRadiator"] .scene-image,
.game-shell[data-step="coffeeGazpacho"] .scene-image,
.game-shell[data-step="coffeeSaved"] .scene-image,
.game-shell[data-step="coffeeFormsUseful"] .scene-image,
.game-shell[data-step="coffeeFormsCleanliness"] .scene-image,
.game-shell[data-step="coffeeFormsImprove"] .scene-image,
.game-shell[data-step="arrival"] .scene-image,
.game-shell[data-step="officeGrounding"] .scene-image,
.game-shell[data-step="inspectClose"] .scene-image {
  filter: saturate(.98) contrast(1.02) brightness(1.24);
}
.game-shell[data-step="boardShared"] .scene-image,
.game-shell[data-step="boardTheoryDie"] .scene-image,
.game-shell[data-step="boardTheoryImprove"] .scene-image,
.game-shell[data-step="boardTheorySometimes"] .scene-image,
.game-shell[data-step="boardAuthorRule"] .scene-image,
.game-shell[data-step="boardDecorating"] .scene-image,
.game-shell[data-step="boardDecoratingPays"] .scene-image,
.game-shell[data-step="boardDecoratingNo"] .scene-image,
.game-shell[data-step="boardDecoratingShould"] .scene-image {
  filter: saturate(.98) contrast(1.02) brightness(1.24);
}
.game-shell[data-step="officeDoor"] .scene-wash,
.game-shell[data-step="glassClose"] .scene-wash,
.game-shell[data-step="doorKnock"] .scene-wash,
.game-shell[data-step="intro"] .scene-wash,
.game-shell[data-step="introResponse"] .scene-wash,
.game-shell[data-step="shaneFile"] .scene-wash,
.game-shell[data-step="sophiaCallsShane"] .scene-wash,
.game-shell[data-step="sophiaInterrupt"] .scene-wash,
.game-shell[data-step="shaneIntro"] .scene-wash,
.game-shell[data-step="rhythm"] .scene-wash,
.game-shell[data-step="shaneRhythmResponse"] .scene-wash,
.game-shell[data-step="businessBanter"] .scene-wash,
.game-shell[data-step="bankBanter"] .scene-wash,
.game-shell[data-step="gladBanter"] .scene-wash,
.game-shell[data-step="plainBanter"] .scene-wash,
.game-shell[data-step="improveBanter"] .scene-wash,
.game-shell[data-step="officeTourBoard"] .scene-wash,
.game-shell[data-step="officeTourDesk"] .scene-wash,
.game-shell[data-step="officeTourEvidence"] .scene-wash,
.game-shell[data-step="officeTourScanner"] .scene-wash,
.game-shell[data-step="officeTourFile"] .scene-wash,
.game-shell[data-step="scannerBoundary"] .scene-wash,
.game-shell[data-step="scannerPast"] .scene-wash,
.game-shell[data-step="scannerCooperate"] .scene-wash,
.game-shell[data-step="coffeeOffice"] .scene-wash,
.game-shell[data-step="coffeeCafeOrigin"] .scene-wash,
.game-shell[data-step="coffeeEvidenceRoom"] .scene-wash,
.game-shell[data-step="coffeeRadiator"] .scene-wash,
.game-shell[data-step="coffeeGazpacho"] .scene-wash,
.game-shell[data-step="coffeeSaved"] .scene-wash,
.game-shell[data-step="coffeeFormsUseful"] .scene-wash,
.game-shell[data-step="coffeeFormsCleanliness"] .scene-wash,
.game-shell[data-step="coffeeFormsImprove"] .scene-wash,
.game-shell[data-step="arrival"] .scene-wash,
.game-shell[data-step="officeGrounding"] .scene-wash,
.game-shell[data-step="inspectClose"] .scene-wash {
  background:
    linear-gradient(90deg, rgba(8, 11, 10, .34), rgba(8, 11, 10, .02) 48%, rgba(8, 11, 10, .28)),
    linear-gradient(0deg, rgba(8, 11, 10, .34), rgba(8, 11, 10, .01) 52%, rgba(8, 11, 10, .18));
}
.game-shell[data-step="boardShared"] .scene-wash,
.game-shell[data-step="boardTheoryDie"] .scene-wash,
.game-shell[data-step="boardTheoryImprove"] .scene-wash,
.game-shell[data-step="boardTheorySometimes"] .scene-wash,
.game-shell[data-step="boardAuthorRule"] .scene-wash,
.game-shell[data-step="boardDecorating"] .scene-wash,
.game-shell[data-step="boardDecoratingPays"] .scene-wash,
.game-shell[data-step="boardDecoratingNo"] .scene-wash,
.game-shell[data-step="boardDecoratingShould"] .scene-wash {
  background:
    linear-gradient(90deg, rgba(8, 11, 10, .34), rgba(8, 11, 10, .02) 48%, rgba(8, 11, 10, .28)),
    linear-gradient(0deg, rgba(8, 11, 10, .34), rgba(8, 11, 10, .01) 52%, rgba(8, 11, 10, .18));
}
.scene-vignette {
  z-index: -2;
  box-shadow: inset 0 0 110px rgba(0, 0, 0, .48);
}
.game-shell[data-step="cafeWalk"] .stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(33.333% - 3px), rgba(231, 224, 210, .78) calc(33.333% - 3px), rgba(231, 224, 210, .78) calc(33.333% + 3px), transparent calc(33.333% + 3px)),
    linear-gradient(90deg, transparent calc(66.666% - 3px), rgba(231, 224, 210, .78) calc(66.666% - 3px), rgba(231, 224, 210, .78) calc(66.666% + 3px), transparent calc(66.666% + 3px)),
    linear-gradient(90deg, transparent calc(33.333% - 8px), rgba(8, 11, 10, .72) calc(33.333% - 8px), rgba(8, 11, 10, .72) calc(33.333% + 8px), transparent calc(33.333% + 8px)),
    linear-gradient(90deg, transparent calc(66.666% - 8px), rgba(8, 11, 10, .72) calc(66.666% - 8px), rgba(8, 11, 10, .72) calc(66.666% + 8px), transparent calc(66.666% + 8px));
  opacity: .72;
}
.game-shell[data-step="marleneOfficeWalk"] .stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(33.333% - 8px), rgba(231, 224, 210, .88) calc(33.333% - 8px), rgba(231, 224, 210, .88) calc(33.333% + 8px), transparent calc(33.333% + 8px)),
    linear-gradient(90deg, transparent calc(66.666% - 8px), rgba(231, 224, 210, .88) calc(66.666% - 8px), rgba(231, 224, 210, .88) calc(66.666% + 8px), transparent calc(66.666% + 8px));
  opacity: .82;
}
.game-shell[data-step="marleneOfficeWalk"][data-route="housing"][data-late-housing="false"] .scene-image {
  filter: saturate(1.02) contrast(1.02) brightness(1.38);
}
.game-shell[data-step="marleneOfficeWalk"][data-route="housing"][data-late-housing="false"] .scene-wash {
  background:
    linear-gradient(90deg, rgba(8, 11, 10, .28), rgba(8, 11, 10, .01) 48%, rgba(8, 11, 10, .24)),
    linear-gradient(0deg, rgba(8, 11, 10, .24), rgba(8, 11, 10, .01) 52%, rgba(8, 11, 10, .12));
}
.game-shell[data-step="marleneOfficeWalk"][data-late-housing="true"] .scene-image {
  filter: saturate(.94) contrast(1.08) brightness(1.02);
}
.game-shell[data-step="housingTourWelcome"][data-route="housing"][data-late-housing="false"] .scene-image,
.game-shell[data-step="housingTourBudget"][data-route="housing"][data-late-housing="false"] .scene-image,
.game-shell[data-step="housingTour"][data-route="housing"][data-late-housing="false"] .scene-image,
.game-shell[data-step="housingTourFlaws"][data-route="housing"][data-late-housing="false"] .scene-image,
.game-shell[data-step="housingTourNight"][data-route="housing"][data-late-housing="false"] .scene-image,
.game-shell[data-step="housingTourPreference"][data-route="housing"][data-late-housing="false"] .scene-image,
.game-shell[data-step="housingTourConfirm"][data-route="housing"][data-late-housing="false"] .scene-image,
.game-shell[data-step="housingTourShoes"][data-route="housing"][data-late-housing="false"] .scene-image,
.game-shell[data-step="housingTourSelect"][data-route="housing"][data-late-housing="false"] .scene-image {
  filter: saturate(1.03) contrast(1.02) brightness(1.35);
}
.game-shell[data-step="housingTourWelcome"][data-route="housing"][data-late-housing="false"] .scene-wash,
.game-shell[data-step="housingTourBudget"][data-route="housing"][data-late-housing="false"] .scene-wash,
.game-shell[data-step="housingTour"][data-route="housing"][data-late-housing="false"] .scene-wash,
.game-shell[data-step="housingTourFlaws"][data-route="housing"][data-late-housing="false"] .scene-wash,
.game-shell[data-step="housingTourNight"][data-route="housing"][data-late-housing="false"] .scene-wash,
.game-shell[data-step="housingTourPreference"][data-route="housing"][data-late-housing="false"] .scene-wash,
.game-shell[data-step="housingTourConfirm"][data-route="housing"][data-late-housing="false"] .scene-wash,
.game-shell[data-step="housingTourShoes"][data-route="housing"][data-late-housing="false"] .scene-wash,
.game-shell[data-step="housingTourSelect"][data-route="housing"][data-late-housing="false"] .scene-wash {
  background:
    linear-gradient(90deg, rgba(8, 11, 10, .3), rgba(8, 11, 10, .02) 48%, rgba(8, 11, 10, .28)),
    linear-gradient(0deg, rgba(8, 11, 10, .28), rgba(8, 11, 10, .01) 52%, rgba(8, 11, 10, .14));
}
.game-shell[data-step="housingTourWelcome"][data-late-housing="true"] .scene-image,
.game-shell[data-step="housingTourBudget"][data-late-housing="true"] .scene-image,
.game-shell[data-step="housingTour"][data-late-housing="true"] .scene-image,
.game-shell[data-step="housingTourFlaws"][data-late-housing="true"] .scene-image,
.game-shell[data-step="housingTourNight"][data-late-housing="true"] .scene-image,
.game-shell[data-step="housingTourPreference"][data-late-housing="true"] .scene-image,
.game-shell[data-step="housingTourConfirm"][data-late-housing="true"] .scene-image,
.game-shell[data-step="housingTourShoes"][data-late-housing="true"] .scene-image,
.game-shell[data-step="housingTourSelect"][data-late-housing="true"] .scene-image {
  filter: saturate(.96) contrast(1.06) brightness(1.14);
}
.game-shell[data-step="housingDowntown"][data-route="housing"][data-late-housing="false"] .scene-image,
.game-shell[data-step="housingWarehouse"][data-route="housing"][data-late-housing="false"] .scene-image,
.game-shell[data-step="housingBrownstone"][data-route="housing"][data-late-housing="false"] .scene-image,
.game-shell[data-step="housingPaperwork"][data-route="housing"][data-late-housing="false"] .scene-image,
.game-shell[data-step="housingFirstLook"][data-route="housing"][data-late-housing="false"] .scene-image {
  filter: saturate(1.04) contrast(1.02) brightness(1.38);
}
.game-shell[data-step="housingDowntown"][data-route="housing"][data-late-housing="false"] .scene-wash,
.game-shell[data-step="housingWarehouse"][data-route="housing"][data-late-housing="false"] .scene-wash,
.game-shell[data-step="housingBrownstone"][data-route="housing"][data-late-housing="false"] .scene-wash,
.game-shell[data-step="housingPaperwork"][data-route="housing"][data-late-housing="false"] .scene-wash,
.game-shell[data-step="housingFirstLook"][data-route="housing"][data-late-housing="false"] .scene-wash {
  background:
    linear-gradient(90deg, rgba(8, 11, 10, .26), rgba(8, 11, 10, .01) 48%, rgba(8, 11, 10, .22)),
    linear-gradient(0deg, rgba(8, 11, 10, .24), rgba(8, 11, 10, .01) 52%, rgba(8, 11, 10, .12));
}
.game-shell[data-step="housingDowntown"][data-late-housing="true"] .scene-image,
.game-shell[data-step="housingWarehouse"][data-late-housing="true"] .scene-image,
.game-shell[data-step="housingBrownstone"][data-late-housing="true"] .scene-image,
.game-shell[data-step="housingPaperwork"][data-late-housing="true"] .scene-image,
.game-shell[data-step="housingFirstLook"][data-late-housing="true"] .scene-image {
  filter: saturate(.96) contrast(1.06) brightness(1.14);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.2rem clamp(1rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(8, 11, 10, .84), rgba(8, 11, 10, .18));
}
.wordmark {
  display: flex;
  flex-direction: column;
  color: var(--paper);
  font: 800 .88rem/.84 var(--display);
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
}
.case-meta {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  color: var(--paper-soft);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.case-meta span {
  padding: .45rem .58rem;
  border: 1px solid var(--line);
  background: rgba(8, 11, 10, .48);
}
.case-meta .save-status {
  border-color: rgba(142, 182, 175, .5);
  color: var(--blue);
  background: rgba(11, 27, 27, .62);
}
.case-meta .save-status[hidden] {
  display: none;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.scene-back {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  border: 1px solid rgba(231, 224, 210, .32);
  border-radius: 4px;
  padding: .45rem .58rem;
  color: var(--paper);
  background: rgba(8, 11, 10, .58);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.scene-back:hover,
.scene-back:focus-visible {
  border-color: rgba(231, 224, 210, .76);
  background: rgba(231, 224, 210, .14);
}
.scene-back[hidden] {
  display: none;
}
.audio-toggle {
  border: 1px solid rgba(231, 224, 210, .32);
  border-radius: 999px;
  padding: .45rem .75rem;
  color: var(--paper);
  background: rgba(8, 11, 10, .58);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.audio-toggle[aria-pressed="true"] {
  color: var(--ink);
  background: rgba(231, 224, 210, .9);
}

.debug-jump {
  position: fixed;
  top: .85rem;
  right: .85rem;
  z-index: 80;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  max-width: min(292px, calc(100vw - 1.7rem));
  padding: .48rem;
  border: 1px solid rgba(231, 224, 210, .24);
  color: var(--paper);
  background: rgba(8, 11, 10, .82);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .34);
  backdrop-filter: blur(8px);
}
.debug-jump[hidden] { display: none; }
.debug-jump label {
  color: var(--paper-soft);
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.debug-jump select,
.debug-jump button {
  min-height: 32px;
  border: 1px solid rgba(231, 224, 210, .28);
  color: var(--paper);
  background: rgba(0, 0, 0, .42);
  font-size: .72rem;
}
.debug-jump select {
  min-width: 170px;
  max-width: 210px;
}
.debug-jump button {
  padding: .35rem .55rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.workspace {
  display: grid;
  align-content: start;
  gap: 1rem;
  width: min(680px, calc(100% - 2rem));
  margin: clamp(1rem, 4vw, 3rem) 0 11rem clamp(1rem, 5vw, 4rem);
}
.card,
.object-panel,
.tool-panel,
.phone-ui,
.board-ui,
.note-ui,
.camera-ui {
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .38);
  backdrop-filter: blur(10px);
}
.card { padding: clamp(1rem, 3vw, 1.4rem); }
.object-panel {
  width: min(580px, 100%);
  padding: clamp(1rem, 3vw, 1.25rem);
}
.object-panel.narrow { width: min(460px, 100%); }
.card h1,
.card h2,
.card h3,
.object-panel h2 {
  margin: 0 0 .8rem;
  font-family: var(--display);
  line-height: .96;
  text-transform: uppercase;
}
.card h1 { font-size: clamp(2.5rem, 8vw, 5rem); }
.card h2 { font-size: clamp(1.8rem, 5vw, 3rem); }
.card h3 { font-size: 1.35rem; }
.object-panel h2 { font-size: clamp(1.65rem, 4vw, 2.6rem); }
.card p,
.object-panel p { margin: .6rem 0 0; color: var(--paper-soft); }
.label,
.eyebrow {
  margin: 0 0 .55rem;
  color: var(--blue);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.field-grid,
.choice-grid,
.hotspot-grid,
.board-grid,
.object-list {
  display: grid;
  gap: .65rem;
}
.field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display: grid; gap: .3rem; }
.field label {
  color: var(--paper-soft);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(231, 224, 210, .28);
  color: var(--paper);
  background: rgba(0, 0, 0, .34);
  padding: .75rem .8rem;
  border-radius: 0;
}
.field textarea { min-height: 78px; resize: vertical; }
.wide { grid-column: 1 / -1; }

.primary-button,
.choice-button,
.object-choice,
.ghost-button,
.pin-key,
.hotspot,
.chip {
  min-height: 42px;
  border: 1px solid rgba(231, 224, 210, .28);
  color: var(--paper);
  background: rgba(9, 12, 11, .72);
  text-align: left;
}
.primary-button {
  justify-self: start;
  padding: .78rem 1rem;
  border-color: transparent;
  background: var(--rust);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
}
.continue-button {
  min-width: 122px;
  border-color: rgba(231, 224, 210, .42);
  border-radius: 999px;
  background: rgba(8, 11, 10, .58);
  box-shadow: inset 0 0 18px rgba(231, 224, 210, .08), 0 12px 34px rgba(0, 0, 0, .32);
}
.choice-button,
.object-choice,
.hotspot,
.chip {
  padding: .8rem .9rem;
}
.choice-button strong,
.object-choice strong,
.hotspot strong {
  display: block;
  margin-bottom: .2rem;
  font-family: var(--display);
  font-size: 1.18rem;
  text-transform: uppercase;
}
.choice-button span,
.object-choice span,
.hotspot span {
  color: var(--paper-soft);
  font-size: .86rem;
}
.choice-button[aria-pressed="true"],
.choice-button.selected,
.object-choice.selected,
.hotspot.done,
.chip.selected {
  border-color: var(--blue);
  background: rgba(51, 79, 78, .78);
}
.object-choice {
  display: grid;
  gap: .2rem;
  width: 100%;
}
.object-list.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.split-call-panels {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
  width: min(920px, calc(100vw - 4rem));
  margin: clamp(7rem, 15vh, 10rem) 0 0 clamp(1rem, 5vw, 4rem);
}
.split-call-panels figure {
  margin: 0;
  border: 2px solid rgba(231, 224, 210, .8);
  background: rgba(8, 11, 10, .78);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .34);
  overflow: hidden;
}
.split-call-panels img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.split-call-panels figcaption {
  padding: .42rem .6rem .5rem;
  color: var(--paper-soft);
  font: 800 .64rem/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ghost-button {
  padding: .72rem .85rem;
  text-align: center;
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
button:disabled { opacity: .5; cursor: not-allowed; }

.tool-panel { padding: .9rem; }
.panel-note {
  margin: -.15rem 0 .75rem;
  color: var(--paper-soft);
  font-size: .88rem;
}
.tool-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .55rem;
}
.tool {
  min-height: 76px;
  display: grid;
  place-items: center;
  gap: .2rem;
  padding: .65rem;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .24);
  color: var(--paper-soft);
  text-align: center;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tool svg { width: 24px; height: 24px; color: var(--blue); }

.scene-hotspots {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}
.scene-hotspot {
  position: absolute;
  width: 118px;
  height: 84px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(231, 224, 210, .24);
  border-radius: 46% 54% 50% 44% / 56% 42% 58% 44%;
  color: var(--paper);
  background: radial-gradient(ellipse at center, rgba(231, 224, 210, .08), rgba(121, 164, 163, .12) 44%, rgba(121, 164, 163, 0) 72%);
  box-shadow: 0 0 28px rgba(231, 224, 210, .14), inset 0 0 28px rgba(121, 164, 163, .12);
  pointer-events: auto;
  opacity: .62;
  transition: opacity .18s ease, transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.scene-hotspot::before,
.scene-hotspot::after {
  content: "";
  position: absolute;
  inset: 9%;
  border: 1px solid rgba(231, 224, 210, .09);
  border-radius: inherit;
  background: transparent;
}
.scene-hotspot::after {
  inset: 20%;
  border-color: rgba(121, 164, 163, .12);
}
.scene-hotspot:hover,
.scene-hotspot:focus-visible {
  opacity: .88;
  transform: scale(1.04);
  border-color: rgba(231, 224, 210, .34);
  box-shadow: 0 0 34px rgba(231, 224, 210, .18), inset 0 0 30px rgba(121, 164, 163, .14);
}
.scene-hotspot span {
  position: absolute;
  top: calc(100% + .35rem);
  left: 50%;
  translate: -50% 0;
  padding: .25rem .4rem;
  border: 1px solid rgba(231, 224, 210, .28);
  color: var(--paper);
  background: rgba(8, 11, 10, .68);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .18s ease;
}
.scene-hotspot:hover span,
.scene-hotspot:focus-visible span {
  opacity: 1;
}
.scene-hotspot.done {
  border-color: rgba(121, 164, 163, .34);
  background: radial-gradient(ellipse at center, rgba(121, 164, 163, .08), rgba(121, 164, 163, .04) 48%, rgba(121, 164, 163, 0) 74%);
  opacity: .4;
}
.scene-hotspot[data-hotspot="desk"] {
  left: 4%;
  top: 58%;
  width: min(860px, 82vw);
  height: 210px;
}
.scene-hotspot[data-hotspot="board"] {
  left: 65%;
  top: 7%;
  width: 285px;
  height: 235px;
}
.scene-hotspot[data-hotspot="file"] {
  left: 52%;
  top: 60%;
  width: 180px;
  height: 96px;
}
.scene-hotspot[data-hotspot="scanner"] {
  left: 75%;
  top: 36%;
  width: 120px;
  height: 92px;
}
.scene-hotspot[data-hotspot="evidence"] {
  left: 34%;
  top: 38%;
  width: 260px;
  height: 150px;
}
.inspection-caption {
  width: min(420px, calc(100% - 2rem));
  padding: .9rem 1rem;
  border-left: 4px solid var(--blue);
  color: var(--paper);
  background: rgba(8, 11, 10, .68);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .34);
}
.inspection-caption h2 {
  margin: 0 0 .45rem;
  font-family: var(--display);
  font-size: clamp(1.5rem, 4vw, 2.6rem);
  line-height: .96;
  text-transform: uppercase;
}
.inspection-caption p { margin: .4rem 0 0; color: var(--paper-soft); }
.paperwork-payee {
  display: inline-block;
  margin-top: .7rem;
  padding: .42rem .55rem;
  border: 1px solid rgba(231, 224, 210, .28);
  color: var(--paper);
  background: rgba(231, 224, 210, .1);
  font-size: .88rem;
}
.paperwork-payee strong {
  color: var(--paper);
}
.game-shell[data-step="housingPaperwork"] .scene-image {
  object-fit: contain;
  background: #181611;
}
.game-shell[data-step="housingPaperwork"] .workspace {
  position: absolute;
  inset: 0;
  display: block;
  width: auto;
  margin: 0;
  pointer-events: none;
}
.housing-paperwork-art-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(100%, 177.683svh);
  aspect-ratio: 1672 / 941;
  transform: translate(-50%, -50%);
  color: #24221e;
}
.housing-check {
  position: absolute;
  top: 46.5%;
  left: 21.5%;
  width: 42.5%;
  height: 18.4%;
  transform: rotate(-8.3deg) scale(.95);
  transform-origin: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(6px, .66vw, 11px);
  line-height: 1;
  text-shadow: 0 .3px rgba(255, 255, 255, .28);
  overflow: hidden;
  clip-path: inset(0 round 2px);
}
.housing-check-bank {
  position: absolute;
  top: 2%;
  left: 2%;
  display: grid;
  gap: .14rem;
  letter-spacing: .04em;
}
.housing-check-bank strong { font-size: 1.08em; }
.housing-check-bank span { font-size: .72em; }
.housing-check-number {
  position: absolute;
  top: 3%;
  right: 2%;
  font-weight: 700;
  letter-spacing: .08em;
}
.housing-check-date {
  position: absolute;
  top: 19%;
  right: 2%;
  width: 27%;
  display: flex;
  align-items: end;
  gap: .45rem;
  border-bottom: 1px solid rgba(36, 34, 30, .62);
}
.housing-check-payee {
  position: absolute;
  top: 34%;
  left: 2%;
  width: 77%;
  display: flex;
  align-items: end;
  gap: .5rem;
  border-bottom: 1px solid rgba(36, 34, 30, .62);
  overflow: hidden;
}
.housing-check-payee .check-hand { font-size: 1.34em; }
.housing-check-amount {
  position: absolute;
  top: 34%;
  right: 2%;
  width: 17%;
  display: flex;
  align-items: end;
  gap: .25rem;
  padding: 0 .25rem .08rem;
  border: 1px solid rgba(36, 34, 30, .62);
}
.housing-check-words {
  position: absolute;
  top: 55%;
  left: 2%;
  right: 2%;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: .5rem;
  border-bottom: 1px solid rgba(36, 34, 30, .62);
  overflow: hidden;
}
.housing-check-memo {
  position: absolute;
  bottom: 14%;
  left: 2%;
  width: 48%;
  display: flex;
  align-items: end;
  gap: .35rem;
  border-bottom: 1px solid rgba(36, 34, 30, .62);
  overflow: hidden;
}
.housing-check-signature {
  position: absolute;
  right: 2%;
  bottom: 14%;
  width: 38%;
  padding-left: .4rem;
  border-bottom: 1px solid rgba(36, 34, 30, .62);
  overflow: hidden;
}
.housing-check-routing {
  position: absolute;
  left: 28%;
  bottom: 1%;
  font-family: "Courier New", monospace;
  font-size: .78em;
  letter-spacing: .12em;
}
.check-print {
  flex: 0 0 auto;
  font-size: .68em;
  font-weight: 700;
  letter-spacing: .05em;
}
.check-hand {
  overflow: hidden;
  font-family: var(--hand);
  font-size: 1.12em;
  line-height: 1.1;
  white-space: nowrap;
}
.housing-check-payee .check-hand,
.housing-check-words .check-hand,
.housing-check-memo .check-hand,
.housing-check-signature .check-hand {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}
.housing-check-words .check-hand { font-size: 1em; }
.housing-check-memo .check-hand { font-size: .9em; }
.game-shell[data-step="housingPaperwork"] .housing-paperwork-caption {
  position: absolute;
  right: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(6.5rem, 13vh, 8.5rem);
  width: min(310px, calc(100% - 2rem));
  max-height: none;
  margin: 0;
  pointer-events: auto;
}
@media (max-width: 760px) {
  .game-shell[data-step="housingPaperwork"] .housing-paperwork-caption {
    right: .75rem;
    bottom: 5.75rem;
    width: min(250px, calc(100% - 1.5rem));
  }
}
.file-caption {
  width: min(520px, calc(100% - 2rem));
}
.game-shell[data-step="inspectClose"][data-inspect-target="file"] .workspace {
  margin: clamp(1rem, 4vh, 2.5rem) 0 0 clamp(1rem, 4vw, 3rem);
}
.game-shell[data-step="inspectClose"][data-inspect-target="file"] .file-caption {
  width: min(440px, calc(100% - 2rem));
  max-height: calc(100svh - 9rem);
  overflow: auto;
}
.game-shell[data-step="inspectClose"][data-inspect-target="file"] .file-caption h2 {
  font-size: clamp(1.35rem, 3vw, 2.15rem);
}
.game-shell[data-step="inspectClose"][data-inspect-target="file"] .file-caption p {
  font-size: .92rem;
  line-height: 1.28;
}
.game-shell[data-step="inspectClose"][data-inspect-target="file"] .file-pages {
  margin-top: .65rem;
  padding: .68rem;
}
.game-shell[data-step="inspectClose"][data-inspect-target="file"] .file-pages p {
  font-size: .98rem;
  line-height: 1.22;
}
.desk-caption {
  width: min(500px, calc(100% - 2rem));
}
.game-shell[data-step="officeTourDesk"] .desk-caption {
  width: min(390px, calc(100% - 2rem));
  margin-top: clamp(4rem, 14vh, 8rem);
  margin-left: clamp(.75rem, 2vw, 1.5rem);
}
.tour-caption {
  position: relative;
  width: min(360px, calc(100% - 2rem));
  max-height: min(34svh, 280px);
  overflow: auto;
  scrollbar-gutter: stable;
  margin-top: clamp(15rem, 42vh, 24rem);
  background: rgba(8, 11, 10, .62);
}

/* macOS can hide native scrollbars until movement. Keep a quiet, always-visible
   cue on longer tour cards so players know the note continues below the frame. */
.tour-caption-scroll-cue {
  position: absolute;
  top: .9rem;
  right: .35rem;
  bottom: .9rem;
  width: 4px;
  border-radius: 999px;
  background: rgba(231, 224, 210, .18);
  pointer-events: none;
}
.tour-caption-scroll-cue span {
  display: block;
  width: 100%;
  height: 38%;
  border-radius: inherit;
  background: rgba(121, 164, 163, .78);
  box-shadow: 0 0 7px rgba(121, 164, 163, .3);
}
.game-shell[data-step="officeTourBoard"] .tour-caption {
  padding-right: 1.35rem;
}

.game-shell[data-step="officeTourDesk"] .desk-caption {
  width: min(320px, calc(100% - 2rem));
  max-height: min(60svh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 1rem;
  scrollbar-gutter: stable;
}

/* The desk note is short enough to show in full at ordinary viewport sizes.
   Do not imply it has a draggable scroll track when it does not. */
.game-shell[data-step="officeTourDesk"] .desk-caption .tour-caption-scroll-cue {
  display: none;
}

.game-shell[data-step="officeTourDesk"] .workspace {
  width: min(320px, calc(100% - 2rem));
}

/* Explanatory notes should use the art's negative space, not become a second
   panel over a character or an investigation target. */
.game-shell[data-step="officeTourEvidence"] .workspace {
  width: min(360px, calc(100% - 2rem));
  margin: clamp(.75rem, 2vh, 1.5rem) 0 11rem clamp(18rem, 38vw, 30rem);
}
.game-shell[data-step="officeTourEvidence"] .tour-caption,
.game-shell[data-step="cafeOriginInterior"] .tour-caption {
  margin-top: 0;
}
.game-shell[data-step="cafeOriginInterior"] .workspace {
  width: min(350px, calc(100% - 2rem));
  margin: clamp(20rem, 54vh, 31rem) 0 8rem clamp(1rem, 5vw, 4rem);
}
.game-shell[data-step="cafeCounterObservation"] .workspace {
  width: min(360px, calc(100% - 2rem));
  margin: clamp(4rem, 12vh, 8rem) 0 12rem clamp(1rem, 5vw, 4rem);
}
.cafe-counter-field-note h2 {
  font-size: clamp(1.28rem, 3vw, 2rem);
}
.cafe-counter-field-note p {
  font-size: .92rem;
  line-height: 1.35;
}
.game-shell[data-step="cafeCounterObservation"] .typed-reply {
  width: min(450px, calc(100% - 2rem));
}
.context-observation {
  display: grid;
  gap: .42rem;
  width: min(360px, calc(100% - 2rem));
  padding: .72rem .78rem;
  border: 1px solid rgba(231, 224, 210, .2);
  background: rgba(8, 11, 10, .68);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .28);
}
.context-observation p {
  margin: 0;
  color: var(--paper-soft);
  font-size: .78rem;
  line-height: 1.34;
}
.context-observation .eyebrow {
  color: var(--blue);
}
.context-observation .ghost-button,
.game-shell[data-step="cafeOriginInterior"] .tour-caption .ghost-button {
  justify-self: start;
  margin-top: .18rem;
  padding: .42rem .62rem;
  font-size: .64rem;
}
.game-shell[data-step="harbourtownResponse"] .context-observation {
  margin-top: clamp(14rem, 36vh, 20rem);
}
.game-shell[data-step="officeTourBoard"] .tour-caption {
  margin-top: clamp(13rem, 38vh, 21rem);
}
.game-shell[data-step="housingDowntown"] .workspace,
.game-shell[data-step="housingWarehouse"] .workspace,
.game-shell[data-step="housingBrownstone"] .workspace,
.game-shell[data-step="marleneOfficePrompt"] .workspace {
  width: min(420px, calc(100% - 2rem));
  margin: auto auto clamp(1rem, 4vh, 2rem) clamp(1rem, 4vw, 3rem);
}
.game-shell[data-step="housingDowntown"] .tour-caption,
.game-shell[data-step="housingWarehouse"] .tour-caption,
.game-shell[data-step="housingBrownstone"] .tour-caption,
.game-shell[data-step="marleneOfficePrompt"] .tour-caption {
  margin-top: 0;
}
.game-shell[data-step="casePath"] .workspace {
  width: min(470px, calc(100% - 2rem));
  margin: auto 0 clamp(1rem, 4vh, 2.5rem) clamp(1rem, 5vw, 4rem);
}
.game-shell[data-step="scanner"] .scanner-note,
.game-shell[data-step="scannerCooperate"] .tour-caption,
.game-shell[data-step="cafeWalk"] .tour-caption {
  margin-top: clamp(18rem, 52vh, 30rem);
}
.game-shell[data-step="scanner"] .scanner-note {
  width: min(390px, calc(100% - 2rem));
}
.tour-hotspots .scene-hotspot {
  opacity: .72;
  box-shadow: 0 0 34px rgba(231, 224, 210, .16), inset 0 0 30px rgba(121, 164, 163, .16);
  pointer-events: none;
}
.guided-hotspots .scene-hotspot {
  opacity: .76;
  box-shadow: 0 0 38px rgba(231, 224, 210, .18), inset 0 0 32px rgba(121, 164, 163, .18);
}
.guided-hotspots .scene-hotspot span {
  opacity: 1;
}
.desk-tool-hotspots [data-tool="note"],
.desk-tool-hotspots [data-desk-tool="note"] {
  left: 27%;
  top: 64%;
  width: 280px;
  height: 170px;
}
.desk-tool-hotspots [data-tool="camera"],
.desk-tool-hotspots [data-desk-tool="camera"] {
  left: 77%;
  top: 68%;
  width: 190px;
  height: 150px;
}
.desk-tool-hotspots [data-tool="phone"],
.desk-tool-hotspots [data-desk-tool="phone"] {
  left: 70%;
  top: 48%;
  width: 260px;
  height: 150px;
}
.desk-tool-hotspots [data-tool="keys"],
.desk-tool-hotspots [data-desk-tool="keys"] {
  left: 54%;
  top: 78%;
  width: 160px;
  height: 88px;
  z-index: 6;
}
.desk-tool-hotspots [data-tool="files"],
.desk-tool-hotspots [data-desk-tool="files"] {
  left: 0%;
  top: 37%;
  width: 285px;
  height: 210px;
}
.evidence-tool-hotspots [data-evidence-tool="camera"] {
  left: 30%;
  top: 38%;
  width: 180px;
  height: 116px;
}
.evidence-tool-hotspots [data-evidence-tool="folders"] {
  left: 12%;
  top: 65%;
  width: 270px;
  height: 140px;
}
.evidence-tool-hotspots [data-evidence-tool="bags"] {
  left: 40%;
  top: 51%;
  width: 245px;
  height: 160px;
}
.evidence-tool-hotspots [data-evidence-tool="gloves"] {
  left: 25%;
  top: 54%;
  width: 190px;
  height: 112px;
}
.evidence-tool-hotspots [data-evidence-tool="labeler"] {
  left: 65%;
  top: 68%;
  width: 190px;
  height: 120px;
}
.game-shell[data-step="tools"] .tool-panel {
  position: relative;
  z-index: 5;
  margin: auto 1rem 6.5rem auto;
  background: rgba(8, 11, 10, .68);
  backdrop-filter: blur(6px);
}
.desk-object-list {
  margin-top: .85rem;
}
.file-pages {
  margin-top: .85rem;
  padding: .85rem;
  border: 1px solid rgba(231, 224, 210, .24);
  background: rgba(231, 224, 210, .1);
  position: relative;
  min-height: 142px;
  overflow: hidden;
  transform-origin: left center;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.file-pages::before {
  content: "";
  position: absolute;
  inset: .7rem .85rem .7rem auto;
  width: 38%;
  border-left: 1px solid rgba(16, 19, 18, .18);
  background: linear-gradient(90deg, rgba(16, 19, 18, .08), rgba(255,255,255,0));
  pointer-events: none;
}
.file-pages[data-page="2"] {
  transform: perspective(800px) rotateY(-1.5deg);
  background: rgba(231, 224, 210, .14);
}
.file-pages[data-page="3"] {
  transform: perspective(800px) rotateY(-3deg);
  box-shadow: inset 16px 0 24px rgba(16, 19, 18, .12);
}
.file-page-label {
  margin: 0 0 .5rem;
  color: rgba(16, 19, 18, .72);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.file-pages p {
  color: var(--paper);
  font-family: var(--hand);
  font-size: 1.12rem;
  line-height: 1.35;
}
.game-shell[data-step="inspectClose"] .workspace {
  margin-top: clamp(6rem, 18vh, 11rem);
}
.game-shell[data-step="inspectClose"][data-inspect-target="desk"] .scene-image {
  transform: scale(1.78);
  transform-origin: 45% 72%;
  object-position: 44% 63%;
}
.game-shell[data-step="inspectClose"][data-inspect-target="board"] .scene-image {
  transform: none;
  object-position: center;
}
.game-shell[data-step="inspectClose"][data-inspect-target="file"] .scene-image {
  transform: none;
  object-position: center;
}
.game-shell[data-step="glassClose"] .scene-image {
  transform: scale(1.48);
  transform-origin: 50% 48%;
  object-position: center;
}
.game-shell[data-step="glassClose"] .workspace {
  margin-top: clamp(7rem, 22vh, 13rem);
}
.game-shell[data-step="intro"] .scene-image,
.game-shell[data-step="introResponse"] .scene-image {
  object-fit: cover;
  object-position: center;
}
.game-shell[data-step="shaneFileTriptych"] .scene-image {
  filter: saturate(.94) contrast(1) brightness(.86);
}
.game-shell[data-step="sophiaCallsShane"] .scene-image,
.game-shell[data-step="sophiaInterrupt"] .scene-image,
.game-shell[data-step="shaneFileFixation"] .scene-image {
  object-fit: cover;
  object-position: center;
  filter: saturate(.98) contrast(1.02) brightness(1.24);
}
.game-shell[data-step="shaneFileTriptych"] .scene-wash,
.game-shell[data-step="sophiaCallsShane"] .scene-wash,
.game-shell[data-step="sophiaInterrupt"] .scene-wash,
.game-shell[data-step="shaneFileFixation"] .scene-wash {
  background:
    linear-gradient(90deg, rgba(8, 11, 10, .12), rgba(8, 11, 10, 0) 48%, rgba(8, 11, 10, .08)),
    linear-gradient(0deg, rgba(8, 11, 10, .14), rgba(8, 11, 10, 0) 52%, rgba(8, 11, 10, .07));
}
.game-shell[data-step="tools"] .scene-image,
.game-shell[data-step="toolInspect"] .scene-image {
  object-fit: cover;
  object-position: center;
}
.game-shell[data-step="toolInspect"] .scene-image {
  object-fit: contain;
  background: #090d0c;
  transform: none;
  transform-origin: center;
}
.game-shell[data-step="toolInspect"][data-tool-target="note"] .scene-image {
  transform: none;
  object-position: center;
}
.game-shell[data-step="toolInspect"][data-tool-target="camera"] .scene-image {
  transform: none;
  object-position: center;
}
.game-shell[data-step="toolInspect"][data-tool-target="phone"] .scene-image {
  transform: none;
  object-position: center;
}
.game-shell[data-step="toolInspect"][data-tool-target="keys"] .scene-image {
  transform: none;
  object-position: center;
}
.game-shell[data-step="toolInspect"][data-tool-target="files"] .scene-image {
  transform: none;
  object-position: center;
}
.game-shell[data-step="evidenceInspect"] .scene-image {
  transform: none;
  object-position: center;
}
.game-shell[data-step="scanner"] .scene-image {
  object-position: center;
}
.response-strip {
  position: absolute;
  left: clamp(1rem, 5vw, 4rem);
  right: clamp(1rem, 5vw, 4rem);
  bottom: clamp(1rem, 4vw, 2rem);
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: flex-end;
}
.typed-reply {
  position: absolute;
  left: clamp(1rem, 5vw, 4rem);
  bottom: clamp(1rem, 4vw, 2rem);
  z-index: 4;
  display: grid;
  gap: .55rem;
  width: min(460px, calc(100% - 2rem));
  padding: .85rem;
  border: 1px solid rgba(231, 224, 210, .28);
  background: rgba(8, 11, 10, .72);
  box-shadow: 0 18px 54px rgba(0, 0, 0, .38);
  backdrop-filter: blur(8px);
}
.typed-reply label {
  color: var(--paper-soft);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.typed-reply-help {
  margin: -.18rem 0 .05rem;
  color: var(--paper-soft);
  font-size: .78rem;
  line-height: 1.35;
}
.typed-reply textarea {
  min-height: 82px;
  border-radius: 10px;
  color: var(--ink);
  background: rgba(238, 232, 218, .94);
  font: 1.05rem/1.35 var(--hand);
}
.typed-reply .primary-button {
  justify-self: end;
}
.script-choice {
  max-width: min(360px, 100%);
  min-height: 0;
  padding: .72rem .9rem;
  border: 1px solid rgba(16, 19, 18, .28);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(238, 232, 218, .94);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .32);
  font-size: .95rem;
  font-weight: 750;
  text-align: left;
}

.phone-ui { width: min(320px, 100%); padding: 1rem; }
.wide-phone { width: min(560px, 100%); }
.game-shell[data-step="returnOffice"] .workspace {
  width: min(390px, calc(100% - 2rem));
  margin: auto auto 6.5rem clamp(1rem, 4vw, 3rem);
}
.game-shell[data-step="pin"] .workspace {
  position: absolute;
  z-index: 2;
  top: clamp(1rem, 3vh, 2rem);
  left: clamp(1rem, 4vw, 3rem);
  width: min(260px, calc(100% - 2rem));
  margin: 0;
}
.game-shell[data-step="pin"] .phone-ui {
  padding: .65rem;
  background: rgba(8, 11, 10, .58);
  backdrop-filter: blur(4px);
}
.game-shell[data-step="pin"] .phone-screen {
  padding: .75rem;
  background: rgba(8, 11, 10, .84);
}
.game-shell[data-step="pin"] .pin-display {
  height: 34px;
  margin: .55rem 0;
  font-size: 1.2rem;
}
.game-shell[data-step="pin"] .pin-grid {
  gap: .32rem;
}
.game-shell[data-step="pin"] .pin-key {
  min-height: 34px;
  padding: .36rem;
}
.game-shell[data-step="phoneInbox"] .workspace,
.game-shell[data-step="route"] .workspace,
.game-shell[data-step="voicemailFirstRead"] .workspace,
.game-shell[data-step="voicemail"] .workspace {
  margin: auto clamp(1rem, 4vw, 3rem) 6.5rem auto;
}
.sticky-note {
  width: 138px;
  margin: 0 0 .75rem auto;
  padding: .7rem .65rem .62rem;
  rotate: -2deg;
  color: #221d15;
  background: #f0d66d;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .28), inset 0 -14px 22px rgba(130, 90, 25, .12);
  font-family: var(--hand);
  font-size: 1.22rem;
  line-height: 1.05;
  text-align: center;
}
.sticky-note span {
  font-size: .94rem;
}
.voicemail-transcript {
  padding: .75rem .85rem;
  border-left: 3px solid var(--blue);
  color: var(--paper);
  background: rgba(0, 0, 0, .28);
  font-family: var(--lettering);
  line-height: 1.25;
}
.phone-screen {
  padding: 1rem;
  border: 1px solid rgba(231, 224, 210, .28);
  background: #0b0e0d;
}
.pin-display {
  height: 42px;
  display: grid;
  place-items: center;
  margin: .8rem 0;
  border: 1px solid var(--line);
  color: var(--blue);
  font-size: 1.5rem;
  letter-spacing: .45em;
}
.pin-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .45rem;
}
.pin-key { text-align: center; font-weight: 900; }
.phone-note {
  margin-top: .8rem;
  color: var(--paper-soft);
  font: 700 .8rem/1.3 var(--display);
}

.waveform {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  align-items: center;
  gap: 3px;
  height: 80px;
  padding: .8rem;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .28);
}
.waveform i {
  display: block;
  min-height: 12px;
  background: var(--blue);
}
.transcript {
  display: grid;
  gap: .55rem;
  margin-top: .75rem;
}
.chip {
  width: 100%;
  text-align: left;
}
.chip strong,
.chip span {
  display: block;
}
.chip strong {
  margin-bottom: .2rem;
  color: var(--paper);
  font-family: var(--display);
  text-transform: uppercase;
}
.chip span {
  color: var(--paper-soft);
  font-size: .78rem;
}
.voicemail-card {
  width: min(680px, 100%);
}
.evidence-chip {
  position: relative;
  padding: .68rem .8rem .72rem;
  border-style: dashed;
  background:
    linear-gradient(90deg, rgba(121, 164, 163, .08), rgba(9, 12, 11, .76)),
    rgba(9, 12, 11, .74);
}
.evidence-chip small {
  display: block;
  margin-bottom: .18rem;
  color: var(--blue);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.evidence-chip.selected {
  border-color: rgba(121, 164, 163, .84);
  background:
    linear-gradient(90deg, rgba(121, 164, 163, .24), rgba(9, 12, 11, .8)),
    rgba(9, 12, 11, .82);
  box-shadow: inset 4px 0 0 rgba(121, 164, 163, .88), 0 12px 30px rgba(0, 0, 0, .28);
}
.starter-strip {
  display: grid;
  gap: .5rem;
  margin-top: .9rem;
}
.case-card-input {
  display: grid;
  gap: .35rem;
  margin-top: .9rem;
}
.case-card-input span {
  color: var(--blue);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.case-card-input textarea {
  width: 100%;
  min-height: 86px;
  resize: vertical;
  border: 1px solid rgba(30, 24, 16, .42);
  color: #1d1710;
  background: #eadfbe;
  padding: .85rem .9rem;
  font-family: var(--hand);
  font-size: 1.12rem;
  line-height: 1.25;
  box-shadow: inset 0 -16px 24px rgba(130, 90, 25, .12);
}
.case-card-draft .primary-button {
  margin-top: .85rem;
}

.panel-sequence {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
  width: min(760px, 100%);
}
.panel-sequence > div {
  min-height: 170px;
  display: grid;
  align-content: end;
  padding: .85rem;
  border: 1px solid rgba(231, 224, 210, .28);
  background: rgba(8, 11, 10, .74);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .36);
}
.panel-sequence span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  margin-bottom: auto;
  border: 1px solid var(--line);
  color: var(--blue);
  font-weight: 900;
}
.panel-sequence p {
  margin: .8rem 0 0;
  color: var(--paper-soft);
}
.game-shell[data-step="shaneFile"] .workspace {
  width: min(760px, calc(100% - 2rem));
  margin-top: clamp(21rem, 54vh, 25rem);
}
.game-shell[data-step="shaneFile"] .panel-sequence > div {
  min-height: 112px;
  background: rgba(8, 11, 10, .62);
}
.game-shell[data-step="shaneFile"] .dialogue-panel {
  display: none;
}

.camera-ui {
  position: relative;
  min-height: min(54svh, 560px);
  display: grid;
  align-items: center;
  justify-items: end;
  padding: 1rem;
  overflow: hidden;
}
.reticle {
  position: relative;
  width: min(42vw, 420px);
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(231, 224, 210, .44);
  border-radius: 2px;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, .18), inset 0 0 34px rgba(121, 164, 163, .12);
}
.reticle::before,
.reticle::after {
  content: "";
  position: absolute;
  width: 54px;
  height: 54px;
  border-color: rgba(231, 224, 210, .72);
  border-style: solid;
  pointer-events: none;
}
.reticle::before {
  inset: 14px auto auto 14px;
  border-width: 2px 0 0 2px;
}
.reticle::after {
  inset: auto 14px 14px auto;
  border-width: 0 2px 2px 0;
}
.camera-hud {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  color: var(--paper);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.paint-halo {
  position: absolute;
  left: 67%;
  top: 37%;
  width: min(9vw, 112px);
  height: min(9vw, 112px);
  border: 2px solid rgba(231, 224, 210, .66);
  border-radius: 999px;
  background: rgba(121, 164, 163, .04);
  box-shadow:
    0 0 24px rgba(231, 224, 210, .3),
    inset 0 0 34px rgba(121, 164, 163, .16);
  color: var(--paper);
  cursor: pointer;
}
.paint-halo.focused {
  left: 39%;
  top: 18%;
  width: min(36vw, 430px);
  height: min(31vw, 310px);
}
.paint-halo span {
  position: absolute;
  left: 50%;
  top: calc(100% + .45rem);
  transform: translateX(-50%);
  padding: .24rem .48rem;
  background: rgba(8, 11, 10, .72);
  font-family: var(--display);
  font-size: .72rem;
  text-transform: uppercase;
  white-space: nowrap;
}
.camera-button {
  position: relative;
  width: 68px;
  height: 50px;
  border: 2px solid rgba(231, 224, 210, .88);
  border-radius: 10px;
  background: rgba(8, 11, 10, .78);
  color: transparent;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
  cursor: pointer;
}
.camera-button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  border: 3px solid rgba(231, 224, 210, .9);
  border-radius: 50%;
  background: rgba(121, 164, 163, .16);
}
.camera-button::after {
  content: "";
  position: absolute;
  left: 11px;
  top: -8px;
  width: 26px;
  height: 10px;
  border: 2px solid rgba(231, 224, 210, .88);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: rgba(8, 11, 10, .78);
}
.capture-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(231, 224, 210, .86);
  opacity: 0;
}
.capture-flash.on { animation: flash .42s ease; }
@keyframes flash { 35% { opacity: .75; } }

.game-shell[data-step="camera"] .workspace {
  width: min(900px, calc(100% - 2rem));
}
.game-shell[data-step="camera"] .camera-ui {
  background: transparent;
  backdrop-filter: none;
}
.game-shell[data-step="camera"] .paint-detail-mode {
  position: fixed;
  inset: 0;
  min-height: 0;
  border: 0;
  box-shadow: none;
  overflow: visible;
  pointer-events: none;
}
.game-shell[data-step="camera"] .paint-detail-mode::before {
  content: "";
  position: absolute;
  left: 24%;
  top: 12%;
  width: 62%;
  height: 68%;
  border: 2px solid rgba(247, 240, 224, .78);
  border-radius: 4px;
  box-shadow:
    0 0 0 999px rgba(8, 11, 10, .08),
    inset 0 0 34px rgba(121, 164, 163, .14);
  pointer-events: none;
}
.game-shell[data-step="camera"] .paint-detail-mode .camera-hud,
.game-shell[data-step="camera"] .paint-detail-mode .camera-button {
  pointer-events: auto;
}
.game-shell[data-step="camera"] .paint-detail-mode .camera-hud {
  left: 24%;
  top: 12%;
  right: auto;
  bottom: auto;
  width: 62%;
  height: 68%;
  display: block;
  pointer-events: none;
}
.game-shell[data-step="camera"] .paint-detail-mode .camera-hud span {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  max-width: calc(100% - 6rem);
}
.game-shell[data-step="camera"] .paint-detail-mode .camera-button {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
}
.game-shell[data-step="camera"] .scene-wash {
  background:
    linear-gradient(90deg, rgba(8, 11, 10, .74), rgba(8, 11, 10, .1) 56%, rgba(8, 11, 10, .48)),
    linear-gradient(0deg, rgba(8, 11, 10, .78), rgba(8, 11, 10, .02) 52%, rgba(8, 11, 10, .4));
}


.note-ui,
.board-ui { padding: 1rem; }
.game-shell[data-step="note"] .workspace {
  width: min(440px, calc(100% - 2rem));
  margin: clamp(10rem, 26vh, 18rem) 0 8rem clamp(1rem, 5vw, 4rem);
  max-height: calc(100svh - 18rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: .7rem;
  scrollbar-gutter: stable;
}
.game-shell[data-step="note"] .notebook-entry {
  max-width: 440px;
}
.note-tabs,
.board-grid,
.interpretation-grid { margin-top: .7rem; }
.note-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .4rem;
}
.note-classification {
  margin: 1rem 0 0;
  padding: 0;
  border: 0;
}
.note-classification legend {
  color: var(--blue);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.note-classification > p {
  margin: .35rem 0 0;
  color: var(--paper-soft);
  font-family: var(--hand);
  font-size: .9rem;
  line-height: 1.25;
}
.note-tabs .chip {
  min-height: 54px;
  text-align: center;
}
.note-tabs .chip strong,
.note-tabs .chip span {
  display: block;
}
.note-tabs .chip span {
  margin-top: .18rem;
  color: inherit;
  font-family: var(--body);
  font-size: .61rem;
  line-height: 1.18;
}
.interpretation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
}
.interpretation-grid > div {
  display: grid;
  gap: .4rem;
}
.board-authoring-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
  margin-top: .7rem;
}
.board-authoring-form {
  display: grid;
  align-content: start;
  gap: .45rem;
  padding: .7rem;
  border: 1px solid rgba(231, 224, 210, .18);
  background: rgba(231, 224, 210, .05);
}
.board-authoring-form label {
  display: grid;
  gap: .35rem;
  color: var(--paper-soft);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.board-authoring-form textarea {
  min-height: 76px;
  resize: vertical;
  padding: .5rem .56rem;
  border: 1px solid rgba(231, 224, 210, .22);
  color: var(--paper);
  background: rgba(8, 11, 10, .52);
  font-family: var(--hand);
  font-size: .92rem;
  line-height: 1.18;
}
.board-authoring-form .ghost-button {
  justify-self: start;
  padding: .42rem .62rem;
  font-size: .64rem;
}
.board-progress {
  display: grid;
  gap: .25rem;
  margin-top: .7rem;
  padding: .65rem .75rem;
  border: 1px solid rgba(231, 224, 210, .24);
  background: rgba(231, 224, 210, .08);
  color: var(--paper-soft);
  font-size: .78rem;
}
.board-progress strong {
  color: var(--paper);
  font-family: var(--display);
  text-transform: uppercase;
}
.board-intro-guide {
  display: grid;
  gap: .32rem;
  margin-top: .68rem;
}
.board-intro-guide .label {
  margin: 0;
  color: var(--paper-soft);
}
.board-intro-guide ol {
  display: grid;
  gap: .3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.board-intro-guide button {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  align-items: center;
  gap: .42rem;
  width: 100%;
  min-height: 2rem;
  padding: .35rem .45rem;
  border: 1px solid rgba(231, 224, 210, .22);
  border-radius: 3px;
  color: var(--paper);
  background: rgba(231, 224, 210, .07);
  text-align: left;
}
.board-intro-guide button:hover,
.board-intro-guide button:focus-visible {
  border-color: rgba(121, 164, 163, .72);
  background: rgba(121, 164, 163, .16);
}
.board-intro-guide button span {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid rgba(121, 164, 163, .62);
  border-radius: 50%;
  color: #b7d4d0;
  font-size: .66rem;
  font-weight: 800;
}
.board-intro-guide button strong {
  font-size: .7rem;
  letter-spacing: .02em;
}
.board-control-index {
  display: grid;
  gap: .62rem;
  margin-top: .78rem;
  padding: .72rem;
  border: 1px solid rgba(231, 224, 210, .18);
  background: rgba(5, 7, 7, .34);
}
.board-control-heading {
  display: grid;
  gap: .2rem;
}
.board-control-heading p {
  margin: 0;
  color: var(--paper-soft);
  font-size: .76rem;
  line-height: 1.3;
}
.board-control-heading .label {
  color: var(--blue);
}
.board-region-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .38rem;
}
.board-region-card {
  display: grid;
  gap: .14rem;
  min-height: 58px;
  padding: .46rem .5rem;
  border: 1px solid rgba(231, 224, 210, .2);
  color: var(--paper-soft);
  text-align: left;
  background: rgba(231, 224, 210, .04);
}
.board-region-card:hover,
.board-region-card:focus-visible,
.board-region-card.selected {
  border-color: rgba(104, 155, 151, .9);
  color: var(--paper);
  background: rgba(51, 79, 78, .58);
}
.board-region-card strong {
  color: var(--paper);
  font-family: var(--display);
  font-size: .66rem;
  line-height: 1.05;
  text-transform: uppercase;
}
.board-region-card span {
  color: var(--paper-soft);
  font-size: .66rem;
}
.board-control-prompt {
  margin: 0;
  color: var(--paper-soft);
  font-size: .76rem;
  line-height: 1.3;
}
.board-region-detail {
  display: grid;
  gap: .58rem;
  padding-top: .58rem;
  border-top: 1px solid rgba(231, 224, 210, .14);
}
.board-region-detail > div > p {
  margin: 0;
  color: var(--paper-soft);
  font-size: .78rem;
  line-height: 1.32;
}
.board-region-detail .eyebrow {
  margin-bottom: .18rem;
  color: var(--blue);
}
.board-region-items {
  display: grid;
  gap: .42rem;
}
.board-region-items article {
  display: grid;
  gap: .24rem;
  padding: .52rem .56rem;
  border-left: 2px solid rgba(104, 155, 151, .72);
  background: rgba(231, 224, 210, .045);
}
.board-region-items strong {
  color: var(--paper);
  font-family: var(--hand);
  font-size: .92rem;
  line-height: 1.08;
}
.board-region-items p {
  margin: 0;
  color: var(--paper-soft);
  font-size: .75rem;
  line-height: 1.32;
}
.board-region-items span {
  color: rgba(231, 224, 210, .68);
  font-size: .63rem;
  line-height: 1.3;
}
.board-region-items b {
  color: var(--blue);
  font-weight: 800;
  text-transform: uppercase;
}
.board-map-link {
  justify-self: start;
  padding: .18rem .34rem;
  border: 1px solid rgba(104, 155, 151, .58);
  color: var(--blue);
  background: rgba(51, 79, 78, .24);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.board-map-link:hover,
.board-map-link:focus-visible {
  border-color: var(--paper);
  color: var(--paper);
  background: rgba(104, 155, 151, .42);
}

.board-material-link {
  justify-self: start;
  padding: .22rem .36rem;
  border: 1px solid rgba(182, 160, 106, .7);
  color: #ead6a7;
  background: rgba(94, 70, 33, .32);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.board-material-link:hover,
.board-material-link:focus-visible,
.board-material-link.selected {
  border-color: #ead6a7;
  color: var(--paper);
  background: rgba(138, 106, 53, .54);
}

.board-material-link:disabled,
.board-surface-material:disabled {
  cursor: not-allowed;
  opacity: .52;
}

.tool-map-link {
  margin-top: .42rem;
  padding: .28rem .42rem;
  border: 1px solid rgba(104, 155, 151, .58);
  color: var(--blue);
  background: rgba(51, 79, 78, .24);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.tool-map-link:hover,
.tool-map-link:focus-visible {
  border-color: var(--paper);
  color: var(--paper);
  background: rgba(104, 155, 151, .42);
}

.board-working-set {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .48rem;
  margin-top: .72rem;
}
.board-working-card {
  display: grid;
  align-content: start;
  gap: .28rem;
  min-height: 78px;
  padding: .58rem .62rem;
  border: 1px solid rgba(182, 160, 106, .38);
  border-top: 2px solid rgba(182, 160, 106, .76);
  background: rgba(20, 22, 19, .62);
}
.board-working-card .label,
.board-material-heading .label {
  margin: 0;
  color: #d4bb78;
}
.board-working-card > p:not(.label) {
  margin: 0;
  color: var(--paper);
  font-family: var(--hand);
  font-size: .9rem;
  line-height: 1.14;
}
.board-working-card-action {
  justify-self: start;
  padding: .18rem .34rem;
  border: 1px solid rgba(182, 160, 106, .62);
  color: #d4bb78;
  background: rgba(94, 70, 33, .18);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.board-working-card-action:hover,
.board-working-card-action:focus-visible {
  border-color: #ead6a7;
  color: var(--paper);
  background: rgba(138, 106, 53, .42);
}
.board-surface-task-revision-hint {
  margin: .55rem 0 0;
  color: var(--paper-soft);
  font-size: .68rem;
  line-height: 1.3;
}
.board-context-carry {
  grid-column: 1 / -1;
  display: grid;
  gap: .28rem;
  padding: .56rem .62rem;
  border-left: 2px solid rgba(104, 155, 151, .82);
  background: rgba(51, 79, 78, .28);
}
.board-context-carry .label {
  margin: 0;
  color: var(--blue);
}
.board-context-carry > p:not(.label) {
  display: grid;
  gap: .1rem;
  margin: 0;
  color: var(--paper-soft);
  font-size: .74rem;
  line-height: 1.28;
}
.board-context-carry strong {
  color: var(--paper);
  font-size: .66rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.board-direction-builder {
  display: grid;
  gap: .08rem;
  margin-top: .7rem;
  padding: .7rem;
  border: 1px solid rgba(231, 224, 210, .18);
  background: rgba(8, 11, 10, .34);
}
.board-material-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  margin-top: .74rem;
}
.board-material-heading span {
  color: var(--paper-soft);
  font-size: .63rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.board-material-tray {
  padding: .46rem;
  border: 1px solid rgba(231, 224, 210, .16);
  background: rgba(5, 7, 7, .38);
}
.board-material-tray .board-card {
  min-height: 120px;
  padding: .65rem;
}
.board-card em {
  color: var(--blue);
  font-size: .58rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.act-turn-pressure {
  display: grid;
  gap: .32rem;
  margin-top: .86rem;
  padding-top: .7rem;
  border-top: 1px solid rgba(215, 123, 105, .44);
}
.act-turn-pressure .label {
  margin: 0;
  color: #d77b69;
}
.act-turn-pressure strong {
  color: var(--paper);
  font-family: var(--hand);
  font-size: 1.04rem;
}
.act-turn-pressure > p:not(.label) {
  margin: 0;
  color: var(--paper-soft);
  font-size: .8rem;
  line-height: 1.34;
}
.act-turn-memory {
  display: grid;
  gap: .32rem;
  margin-top: .78rem;
  padding-top: .7rem;
  border-top: 1px solid rgba(231, 224, 210, .24);
}
.act-turn-memory > .label {
  margin: 0;
  color: var(--paper);
}
.act-turn-memory ul {
  display: grid;
  gap: .3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.act-turn-memory li {
  position: relative;
  padding-left: .88rem;
  color: var(--paper-soft);
  font-size: .8rem;
  line-height: 1.34;
}
.act-turn-memory li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: .34rem;
  height: .34rem;
  border: 1px solid var(--blue);
  border-radius: 50%;
}
.act-turn-connections {
  display: grid;
  gap: .32rem;
  margin-top: .78rem;
  padding-top: .7rem;
  border-top: 1px solid rgba(104, 155, 151, .48);
}
.act-turn-connections > .label {
  margin: 0;
  color: var(--blue);
}
.act-turn-connection {
  display: grid;
  gap: .18rem;
}
.act-turn-connection strong {
  color: var(--paper);
  font-family: var(--hand);
  font-size: 1.04rem;
}
.act-turn-connection > p:not(.label) {
  margin: 0;
  color: var(--paper-soft);
  font-size: .8rem;
  line-height: 1.34;
}
.board-grid { grid-template-columns: repeat(3, 1fr); }
.board-card {
  min-height: 136px;
  display: grid;
  align-content: start;
  gap: .45rem;
  padding: .85rem;
  border: 1px dashed rgba(231, 224, 210, .32);
  background: rgba(0, 0, 0, .25);
}
.board-card.placed {
  border-style: solid;
  border-color: var(--blue);
  background: rgba(51, 79, 78, .72);
}
.board-card strong {
  color: var(--paper);
  font-family: var(--display);
  text-transform: uppercase;
}
.board-card span {
  color: var(--paper-soft);
  font-size: .82rem;
}
.ranking-card {
  width: min(520px, calc(100vw - 2rem));
}
.ranking-list {
  display: grid;
  gap: .5rem;
  margin-top: .9rem;
}
.rank-choice {
  display: grid;
  gap: .25rem;
  min-height: 74px;
  padding: .75rem .85rem;
  border: 1px solid rgba(231, 224, 210, .26);
  color: var(--paper-soft);
  text-align: left;
  background: rgba(8, 11, 10, .48);
}
.rank-choice.selected {
  border-color: var(--blue);
  color: var(--paper);
  background: rgba(51, 79, 78, .7);
}
.rank-choice strong {
  color: var(--paper);
  font-family: var(--display);
  text-transform: uppercase;
}
.rank-choice span {
  font-size: .82rem;
}
.game-shell[data-step="board"] .scene-image,
.game-shell[data-step="boardZoom"] .scene-image {
  object-fit: contain;
  background: #080b0a;
}
.game-shell[data-step="board"] .workspace {
  width: min(430px, calc(100% - 2rem));
  margin: auto clamp(.75rem, 2vw, 1.5rem) 6.5rem auto;
}
.game-shell[data-step="board"] .player-kit,
.game-shell[data-step="boardZoom"] .player-kit {
  right: auto;
  left: clamp(.55rem, 1.4vw, 1rem);
}
.game-shell[data-step="board"] .player-kit-popover,
.game-shell[data-step="boardZoom"] .player-kit-popover {
  justify-self: start;
}
.game-shell[data-step="board"] .board-ui {
  position: relative;
  z-index: 7;
  max-height: min(50svh, 460px);
  overflow: auto;
  background: rgba(8, 11, 10, .68);
  backdrop-filter: blur(6px);
}
.board-photo-pin {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 66%;
  width: min(18vw, 240px);
  aspect-ratio: 16 / 9;
  margin: 0;
  padding: .35rem;
  transform: rotate(-1.4deg);
  border: 1px solid rgba(231, 224, 210, .38);
  background: rgba(231, 224, 210, .88);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .38);
  pointer-events: none;
}
.board-photo-pin::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -.42rem;
  width: .8rem;
  height: .8rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #b63f31;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .42);
}
.board-photo-pin img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.96) contrast(1.04);
}
.board-photo-pin figcaption {
  margin-top: .18rem;
  font-family: var(--display);
  font-size: .58rem;
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
  color: #17110d;
}
.board-photo-pin-web {
  left: 36.2%;
  top: 8.4%;
  width: min(17vw, 285px);
  transform: rotate(-2.2deg);
  z-index: 6;
}
.board-photo-pin-web::before {
  background: #1e6f66;
}
.game-shell[data-step="boardReturn"] .board-photo-pin,
.game-shell[data-step="boardZoom"] .board-photo-pin {
  position: fixed;
}
.game-shell[data-step="boardReturn"] .board-photo-pin-web,
.game-shell[data-step="boardZoom"] .board-photo-pin-web {
  left: clamp(18rem, 36vw, 38rem);
  top: clamp(4rem, 8vh, 5.6rem);
  width: min(24vw, 360px);
}
.board-photo-pin-center {
  left: clamp(18.5rem, 36vw, 38.5rem);
  top: clamp(20rem, 48vh, 28rem);
  width: min(17vw, 240px);
  transform: rotate(1.1deg);
}
.board-photo-pin-center::before {
  background: #b63f31;
}
.inline-continue {
  margin-top: .9rem;
  width: 100%;
}
.board-zoom-points {
  position: fixed;
  inset: 0 320px 0 0;
  z-index: 4;
  pointer-events: none;
}
.board-zoom-points button {
  position: absolute;
  width: 118px;
  height: 74px;
  border: 1px solid rgba(231, 224, 210, .18);
  border-radius: 46% 54% 50% 44% / 56% 42% 58% 44%;
  color: var(--paper);
  background: radial-gradient(ellipse at center, rgba(231, 224, 210, .06), rgba(121, 164, 163, .11) 44%, rgba(121, 164, 163, 0) 72%);
  box-shadow: 0 0 22px rgba(231, 224, 210, .08), inset 0 0 26px rgba(121, 164, 163, .08);
  opacity: .42;
  pointer-events: auto;
}
.board-zoom-points button:hover,
.board-zoom-points button:focus-visible {
  opacity: .88;
}
.board-zoom-points button span {
  position: absolute;
  top: calc(100% + .3rem);
  left: 50%;
  translate: -50% 0;
  padding: .22rem .4rem;
  border: 1px solid rgba(231, 224, 210, .28);
  background: rgba(8, 11, 10, .7);
  color: var(--paper);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.board-zoom-points [data-board-focus="notebook"] {
  left: 9%;
  top: 29%;
  width: 150px;
  height: 155px;
}
.board-zoom-points [data-board-focus="center"] {
  left: 33%;
  top: 19%;
  width: 245px;
  height: 205px;
}
.board-zoom-points [data-board-focus="tabs"] {
  left: 72%;
  top: 22%;
  width: 135px;
  height: 220px;
}
.board-zoom-points [data-board-focus="evidence"] {
  left: 27%;
  top: 74%;
  width: 360px;
  height: 80px;
}
.game-shell[data-step="boardZoom"][data-board-focus="notebook"] .scene-image {
  transform: scale(1.75);
  transform-origin: 15% 52%;
}
.game-shell[data-step="boardZoom"][data-board-focus="center"] .scene-image {
  transform: scale(1.55);
  transform-origin: 50% 42%;
}
.game-shell[data-step="boardZoom"][data-board-focus="tabs"] .scene-image {
  transform: scale(1.72);
  transform-origin: 82% 44%;
}
.game-shell[data-step="boardZoom"][data-board-focus="evidence"] .scene-image {
  transform: scale(1.62);
  transform-origin: 48% 86%;
}
.board-caption {
  width: min(460px, calc(100% - 2rem));
}

.dialogue-panel {
  position: absolute;
  left: clamp(1rem, 5vw, 4rem);
  bottom: clamp(1rem, 4vw, 2rem);
  z-index: 2;
  display: grid;
  gap: .85rem;
  width: min(520px, calc(100% - 2rem));
  padding: .95rem 1rem;
  border: 2px solid rgba(16, 19, 18, .22);
  background: rgba(231, 224, 210, .92);
  color: var(--ink);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .44);
}
/* The dialogue panel receives programmatic focus for screen-reader context.
   It is not an interactive control, so never show the browser's default focus box. */
.dialogue-panel:focus {
  outline: 0;
}
.dialogue-panel::after {
  content: "";
  position: absolute;
  display: none;
}
.dialogue-panel::before {
  content: "";
  position: absolute;
  display: none;
}
.dialogue-panel[data-mode="speech"] {
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-left-placement-margin-fix.png");
  width: fit-content;
  max-width: min(480px, calc(100% - 2rem));
  min-width: 118px;
  min-height: 58px;
  place-items: center;
  gap: .28rem;
  padding: .78rem 1.28rem .9rem;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  background: transparent var(--bubble-sprite) center / 100% 100% no-repeat;
  box-shadow: none;
  transform: rotate(-.4deg);
  text-align: center;
  box-sizing: border-box;
}
.dialogue-panel[data-mode="speech"] .line {
  box-sizing: border-box;
  max-width: calc(100% - 2.7rem);
  overflow-wrap: anywhere;
}
.dialogue-panel[data-mode="speech"][data-line-count="short"] {
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-short-word-tail-down-left-placement-margin-fix.png");
  min-width: 116px;
  min-height: 58px;
  padding: .64rem 1.05rem .82rem;
}
.dialogue-panel[data-mode="speech"][data-line-count="one"] {
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-left-placement-margin-fix.png");
  min-width: 188px;
  min-height: 64px;
  padding: .72rem 1.36rem .92rem;
}
.dialogue-panel[data-mode="speech"][data-line-count="two"] {
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-left-placement-margin-fix.png");
  min-width: 232px;
  min-height: 78px;
  padding: .82rem 1.48rem 1rem;
}
.dialogue-panel[data-mode="speech"][data-line-count="three"] {
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
  min-width: 292px;
  min-height: 104px;
  padding: .98rem 1.7rem 1.05rem;
}
.dialogue-panel[data-mode="speech"][data-line-count="four"] {
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
  min-width: 308px;
  min-height: 122px;
  padding: 1.04rem 1.76rem 1.14rem;
}
.dialogue-panel[data-mode="speech"]::before,
.dialogue-panel[data-mode="speech"]::after {
  display: none;
}
.dialogue-panel[data-mode="caption"] {
  max-width: 540px;
  padding: .68rem .82rem;
  border: 2px solid rgba(231, 224, 210, .78);
  border-radius: 0;
  background: rgba(8, 11, 10, .78);
  color: var(--paper);
  box-shadow: 0 10px 0 rgba(0, 0, 0, .18), 0 18px 44px rgba(0, 0, 0, .34);
}
.dialogue-panel[data-mode="caption"] .speaker {
  display: none;
}
.dialogue-panel[data-mode="caption"] .line {
  font-family: var(--lettering);
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.25;
  letter-spacing: 0;
}
.dialogue-panel[data-mode="diegetic"] {
  max-width: 430px;
  border-color: rgba(121, 164, 163, .48);
  border-radius: 0;
  background: rgba(10, 16, 15, .9);
  color: var(--paper);
}
.dialogue-panel[data-mode="hidden"] {
  display: none;
}
.dialogue-panel[data-speaker-key="sophia"] {
  left: clamp(1rem, 12vw, 12.5rem);
  right: auto;
  top: clamp(6rem, 11vh, 7.5rem);
  bottom: auto;
}
.dialogue-panel[data-speaker-key="sophia"]::after {
  left: 68px;
  transform: skewX(-18deg);
}
.dialogue-panel[data-speaker-key="sophia"]::before {
  left: 65px;
  transform: skewX(-18deg);
}
.dialogue-panel[data-speaker-key="shane"] {
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png");
  left: auto;
  right: clamp(1rem, 6vw, 5rem);
  top: clamp(6rem, 12vh, 8rem);
  bottom: auto;
}
.dialogue-panel[data-speaker-key="shane"][data-line-count="short"] { --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-short-word-tail-down-right-placement-margin-fix.png"); }
.dialogue-panel[data-speaker-key="shane"][data-line-count="one"] { --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-right-placement-margin-fix.png"); }
.dialogue-panel[data-speaker-key="shane"][data-line-count="two"] { --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png"); }
.dialogue-panel[data-speaker-key="shane"][data-line-count="three"] { --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png"); }
.game-shell[data-step="doorKnock"] .dialogue-panel[data-speaker-key="sophia"] {
  left: clamp(12rem, 24vw, 22rem);
  right: auto;
  top: clamp(8rem, 22vh, 14rem);
  max-width: min(340px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}
.game-shell[data-step="rhythm"] .dialogue-panel[data-speaker-key="shane"] {
  left: clamp(10rem, 18vw, 16rem);
  right: auto;
  top: clamp(2.2rem, 6vh, 4rem);
  max-width: min(340px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
  transform: rotate(.25deg);
}
.game-shell[data-step="shaneIntro"] .dialogue-panel[data-speaker-key="shane"] {
  /* Let the tail land back toward Shane without covering his file or face. */
  left: clamp(3.5rem, 7vw, 6rem);
  right: auto;
  top: clamp(5rem, 10vh, 6.6rem);
  max-width: min(300px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-left-placement-margin-fix.png");
}
.game-shell[data-step="shaneRhythmResponse"] .dialogue-panel[data-speaker-key="shane"] {
  left: clamp(10rem, 18vw, 16rem);
  right: auto;
  top: clamp(2.2rem, 6vh, 4rem);
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-left-placement-margin-fix.png");
}
.game-shell[data-step="shaneRhythmResponse"] .dialogue-panel[data-speaker-key="sophia"] {
  left: clamp(24rem, 31vw, 25rem);
  right: auto;
  top: clamp(2.2rem, 6vh, 4rem);
  max-width: min(270px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}
.game-shell[data-step="shaneRhythmResponse"] .dialogue-panel[data-speaker-key="sophia"][data-line-count="two"] {
  left: clamp(28rem, 36vw, 30rem);
  right: auto;
  top: clamp(2.2rem, 6vh, 4rem);
  max-width: min(250px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png");
}
.game-shell[data-step="businessBanter"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="gladBanter"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="improveBanter"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="officeGrounding"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="cabinetPunchline"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="boardShared"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="boardTheoryImprove"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="boardDecorating"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="boardDecoratingNo"] .dialogue-panel[data-speaker-key="sophia"] {
  left: auto;
  right: clamp(8rem, 15vw, 13rem);
  top: clamp(2.2rem, 6vh, 4rem);
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png");
}
.game-shell[data-step="bankBanter"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="plainBanter"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="sheImprovesBanter"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="cabinetBetrayal"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="cabinetBanter"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="boardTheoryDie"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="boardTheorySometimes"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="boardAuthorRule"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="boardDecoratingPays"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="boardDecoratingShould"] .dialogue-panel[data-speaker-key="shane"] {
  left: clamp(10rem, 18vw, 16rem);
  right: auto;
  top: clamp(2.2rem, 6vh, 4rem);
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-left-placement-margin-fix.png");
}
.game-shell[data-step="plainBanter"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="boardAuthorRule"] .dialogue-panel[data-speaker-key="shane"] {
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
  max-width: min(370px, calc(100% - 2rem));
}
.game-shell[data-step="boardDecorating"] .dialogue-panel[data-speaker-key="sophia"] {
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
  max-width: min(390px, calc(100% - 2rem));
}
.game-shell[data-step="boardShared"] .dialogue-panel[data-speaker-key="sophia"] {
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-left-placement-margin-fix.png");
}
.game-shell[data-step="casePath"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="harbourtownPlan"] .dialogue-panel[data-speaker-key="shane"] {
  left: clamp(18rem, 32vw, 27rem);
  right: auto;
  top: clamp(1.65rem, 4.5vh, 3rem);
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
}
.game-shell[data-step="casePath"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="harbourtownPlan"] .dialogue-panel[data-speaker-key="sophia"] {
  left: auto;
  right: clamp(1.25rem, 4vw, 3.5rem);
  top: clamp(1.85rem, 5vh, 3.2rem);
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}

/* The coffee invitation still uses the player-desk office plate. Keep the
   speaker lanes consistent until the walk to Cafe Origin begins. */
.game-shell[data-step="coffeeOffice"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="coffeeEvidenceRoom"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="coffeeFormsCleanliness"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="coffeeGazpacho"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="coffeeGazpachoCorrection"] .dialogue-panel[data-speaker-key="sophia"] {
  left: clamp(20rem, 28vw, 23rem);
  right: auto;
  top: clamp(2rem, 5vh, 3.5rem);
  max-width: min(284px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}

.game-shell[data-step="coffeeCafeOrigin"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="coffeeFormsUseful"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="coffeeFormsImprove"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="coffeeRadiator"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="coffeeSaved"] .dialogue-panel[data-speaker-key="shane"] {
  left: clamp(1rem, 2vw, 2.5rem);
  right: auto;
  top: clamp(2rem, 5vh, 3.5rem);
  max-width: min(290px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}

/* Opening-office dialogue family: the wide player-desk composition leaves a
   clean lane to Shane's left and another between the detectives. Use those
   lanes instead of laying speech over either face. */
.game-shell[data-step="rhythm"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="shaneRhythmResponse"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="bankBanter"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="plainBanter"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="sheImprovesBanter"] .dialogue-panel[data-speaker-key="shane"] {
  left: clamp(1rem, 2vw, 2.5rem);
  right: auto;
  top: clamp(2rem, 5vh, 3.5rem);
  max-width: min(290px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}

.game-shell[data-step="businessBanter"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="gladBanter"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="improveBanter"] .dialogue-panel[data-speaker-key="sophia"] {
  left: clamp(29rem, 37.5vw, 31rem);
  right: auto;
  top: clamp(1.4rem, 4vh, 2.6rem);
  max-width: min(250px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-right-placement-margin-fix.png");
}

/* Keep the rest of the opening orientation exchange in the same two clear
   lanes: Shane speaks from the far-left margin; Sophia speaks from the gap
   immediately to her left. Neither lane crosses a character's head. */
.game-shell[data-step="plainBanter"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="cabinetBanter"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="cabinetBetrayal"] .dialogue-panel[data-speaker-key="shane"] {
  left: clamp(1rem, 2vw, 2.5rem);
  right: auto;
  width: 280px;
  max-width: min(280px, calc(100% - 2rem));
}
.game-shell[data-step="officeGrounding"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="cabinetPunchline"] .dialogue-panel[data-speaker-key="sophia"] {
  left: clamp(24rem, 31vw, 25rem);
  right: auto;
  top: clamp(2.2rem, 6vh, 4rem);
  max-width: min(270px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}
.game-shell[data-step="harbourtownPlan"] .dialogue-panel[data-speaker-key="sophia"] {
  right: clamp(3rem, 9vw, 7rem);
  top: clamp(3.7rem, 9vh, 5.2rem);
  width: 300px;
  min-height: 92px;
  padding: .95rem 1.65rem 1.05rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png");
}
.game-shell[data-step="scannerBoundary"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="scannerCooperate"] .dialogue-panel[data-speaker-key="sophia"] {
  left: auto;
  right: clamp(8rem, 18vw, 16rem);
  top: clamp(2rem, 6vh, 4rem);
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
}
.game-shell[data-step="scanner"] .dialogue-panel[data-speaker-key="scanner"] {
  left: clamp(5rem, 13vw, 11rem);
  right: auto;
  top: clamp(13rem, 39vh, 20rem);
  width: 258px;
  height: 104px;
  max-width: min(258px, calc(100% - 2rem));
  min-width: 0;
  min-height: 0;
  padding: .76rem 1.24rem .88rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
}
.game-shell[data-step="scanner"] .dialogue-panel[data-speaker-key="scanner"] .line {
  font-size: .8rem;
  line-height: 1.05;
  max-width: 24ch;
}
.game-shell[data-step="scannerPast"] .dialogue-panel[data-speaker-key="shane"] {
  left: clamp(10rem, 18vw, 16rem);
  right: auto;
  top: clamp(2.2rem, 6vh, 4rem);
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
}
.game-shell[data-step="coffeeOffice"] .dialogue-panel[data-speaker-key="sophia"] {
  left: auto;
  right: clamp(8rem, 15vw, 13rem);
  top: clamp(2.2rem, 6vh, 4rem);
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png");
}
.game-shell[data-step="coffeeEvidenceRoom"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="coffeeFormsCleanliness"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="coffeeGazpacho"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="coffeeGazpachoCorrection"] .dialogue-panel[data-speaker-key="sophia"] {
  left: auto;
  right: clamp(8rem, 15vw, 13rem);
  top: clamp(2.2rem, 6vh, 4rem);
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png");
}
.game-shell[data-step="coffeeCafeOrigin"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="coffeeFormsUseful"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="coffeeFormsImprove"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="coffeeRadiator"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="coffeeSaved"] .dialogue-panel[data-speaker-key="shane"] {
  left: clamp(10rem, 18vw, 16rem);
  right: auto;
  top: clamp(2.2rem, 6vh, 4rem);
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-left-placement-margin-fix.png");
}
.game-shell[data-step="coffeeCafeOrigin"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="coffeeRadiator"] .dialogue-panel[data-speaker-key="shane"] {
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-left-placement-margin-fix.png");
  max-width: min(230px, calc(100% - 2rem));
}
.game-shell[data-step="coffeeFormsImprove"] .dialogue-panel[data-speaker-key="shane"] {
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
  max-width: min(360px, calc(100% - 2rem));
}
.game-shell[data-step="housingReturnOffice"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="housingReturnWork"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="casePathRecordsSophia"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="harbourtownSophiaLead"] .dialogue-panel[data-speaker-key="shane"] {
  left: clamp(10rem, 18vw, 16rem);
  right: auto;
  top: clamp(2.2rem, 6vh, 4rem);
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
}
/* Post-apartment return: both detectives frame a deliberately open center lane. */
.game-shell[data-step="housingReturnOffice"] .dialogue-panel,
.game-shell[data-step="housingReturnMotto"] .dialogue-panel,
.game-shell[data-step="housingReturnWork"] .dialogue-panel {
  left: 50%;
  right: auto;
  top: clamp(1.35rem, 3.2vh, 2.35rem);
  transform: translateX(-50%);
  max-width: min(285px, calc(100% - 2rem));
}
.game-shell[data-step="housingReturnOffice"] .dialogue-panel[data-speaker-key="shane"] {
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-left-placement-margin-fix.png");
}
.game-shell[data-step="harbourtownSophiaLead"] .dialogue-panel[data-speaker-key="shane"] {
  max-width: min(390px, calc(100% - 2rem));
  width: 430px;
  min-height: 142px;
  padding: 1.1rem 1.95rem 1.2rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
}
.game-shell[data-step="housingReturnMotto"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="housingReturnWise"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="casePathRecordsSophia"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="harbourtownSophiaLead"] .dialogue-panel[data-speaker-key="sophia"] {
  left: auto;
  right: clamp(8rem, 15vw, 13rem);
  top: clamp(2.2rem, 6vh, 4rem);
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}
.game-shell[data-step="housingReturnMotto"] .dialogue-panel[data-speaker-key="sophia"] {
  left: 50%;
  right: auto;
  top: clamp(1.35rem, 3.2vh, 2.35rem);
  transform: translateX(-50%);
  max-width: min(285px, calc(100% - 2rem));
}
.game-shell[data-step="housingReturnWork"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="housingReturnMotto"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="housingReturnWise"] .dialogue-panel[data-speaker-key="sophia"] {
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-left-placement-margin-fix.png");
}
.game-shell[data-step="housingReturnMotto"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="housingReturnWise"] .dialogue-panel[data-speaker-key="sophia"] {
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png");
}
.game-shell[data-step="harbourtownPeoplePerson"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="harbourtownRadar"] .dialogue-panel[data-speaker-key="shane"] {
  left: clamp(10rem, 18vw, 16rem);
  right: auto;
  top: clamp(2.2rem, 6vh, 4rem);
  max-width: min(340px, calc(100% - 2rem));
  color: #17110d;
  background: transparent var(--bubble-sprite) center / 100% 100% no-repeat;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-left-placement-margin-fix.png");
}
.game-shell[data-step="harbourtownSmellAccusation"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="harbourtownWell"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="harbourtownEnough"] .dialogue-panel[data-speaker-key="sophia"] {
  left: auto;
  right: clamp(8rem, 15vw, 13rem);
  top: clamp(2.2rem, 6vh, 4rem);
  color: #17110d;
  background: transparent var(--bubble-sprite) center / 100% 100% no-repeat;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png");
}
.game-shell[data-step="harbourtownSmellAccusation"] .dialogue-panel[data-speaker-key="sophia"] {
  max-width: min(430px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}
.game-shell[data-step="harbourtownWell"] .dialogue-panel[data-speaker-key="sophia"] {
  width: 188px;
  max-width: min(188px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-right-placement-margin-fix.png");
}
.game-shell[data-step="harbourtownWell"] .dialogue-panel[data-speaker-key="sophia"] .line {
  max-width: none;
  white-space: nowrap;
  overflow-wrap: normal;
}
.game-shell[data-step="harbourtownEnough"] .dialogue-panel[data-speaker-key="sophia"] {
  max-width: min(390px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}
.game-shell[data-step="evidenceRule"] .dialogue-panel[data-speaker-key="shane"] {
  left: clamp(4rem, 10vw, 8rem);
  right: auto;
  top: clamp(2rem, 6vh, 4rem);
  max-width: min(390px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
}
.game-shell[data-step="cafeOriginInterior"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="cafeSophiaSvenTease"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="cafeSophiaBehave"] .dialogue-panel[data-speaker-key="sophia"] {
  left: clamp(17rem, 27vw, 22rem);
  right: auto;
  top: clamp(1.1rem, 3vh, 2rem);
  max-width: min(290px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png");
}
.game-shell[data-step="cafeOriginInterior"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="cafeSophiaSvenTease"] .dialogue-panel[data-speaker-key="sophia"] {
  width: 330px;
  min-height: 116px;
  padding: 1.04rem 1.78rem 1.14rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
}
.game-shell[data-step="cafeSophiaBehave"] .dialogue-panel[data-speaker-key="sophia"] {
  left: clamp(17rem, 27vw, 22rem);
  top: clamp(1.1rem, 3vh, 2rem);
  max-width: min(190px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-left-placement-margin-fix.png");
}
.game-shell[data-step="cafeCoffeeChoices"] .workspace {
  width: min(470px, calc(100% - 2rem));
  margin: auto 0 clamp(5.5rem, 12vh, 7.5rem) clamp(1rem, 5vw, 4rem);
}
.game-shell[data-step="cafeCoffeeChoices"] .object-panel {
  width: min(470px, 100%);
  background: rgba(8, 11, 10, .72);
}
.game-shell[data-step="cafeSvenCoffeeQuestion"] .dialogue-panel[data-speaker-key="sven"],
.game-shell[data-step="cafeSvenCoffeeReply"] .dialogue-panel[data-speaker-key="sven"],
.game-shell[data-step="cafeSvenBeans"] .dialogue-panel[data-speaker-key="sven"],
.game-shell[data-step="cafeSvenFeature"] .dialogue-panel[data-speaker-key="sven"] {
  left: clamp(1rem, 3vw, 3rem);
  right: auto;
  top: clamp(.45rem, 2vh, 1rem);
  width: 342px;
  height: 157px;
  min-width: 0;
  min-height: 0;
  max-width: min(342px, calc(100% - 2rem));
  padding: .95rem 1.58rem 1.08rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
  color: #17110d;
  background: transparent var(--bubble-sprite) center / 100% 100% no-repeat;
}
.game-shell[data-step="cafeSvenCoffeeQuestion"] .dialogue-panel[data-speaker-key="sven"],
.game-shell[data-step="cafeSvenBeans"] .dialogue-panel[data-speaker-key="sven"] {
  top: clamp(.1rem, .5vh, .35rem);
  height: 82px;
  min-height: 82px;
  padding: .7rem 1.36rem .86rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-left-placement-margin-fix.png");
}
.game-shell[data-step="cafeSvenCoffeeReply"] .dialogue-panel[data-speaker-key="sven"][data-line-count="one"] {
  top: clamp(.1rem, .5vh, .35rem);
  width: 250px;
  height: 82px;
  min-height: 82px;
  padding: .7rem 1.36rem .86rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-left-placement-margin-fix.png");
}
.game-shell[data-step="cafeSvenCoffeeReply"] .dialogue-panel[data-speaker-key="sven"][data-line-count="two"] {
  top: clamp(.2rem, 1vh, .6rem);
  width: 294px;
  height: 116px;
  min-height: 116px;
  padding: .8rem 1.48rem .96rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-left-placement-margin-fix.png");
}
.game-shell[data-step="cafeSvenCoffeeReply"] .dialogue-panel[data-speaker-key="sven"][data-line-count="three"] {
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}
.game-shell[data-step="cafeSvenRecommendation"] .dialogue-panel[data-speaker-key="sven"] {
  left: clamp(7rem, 13vw, 12rem);
  right: auto;
  top: clamp(.45rem, 2vh, 1rem);
  bottom: auto;
  width: 342px;
  height: 157px;
  min-height: 0;
  padding: .95rem 1.58rem 1.08rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
  color: #17110d;
  background: transparent var(--bubble-sprite) center / 100% 100% no-repeat;
}
.game-shell[data-step="cafeSvenRecommendation"] .dialogue-panel[data-speaker-key="sven"] .line {
  font-size: .84rem;
  line-height: 1.08;
  max-width: 25ch;
}
.game-shell[data-step="cafeSvenCoffeeQuestion"] .dialogue-panel[data-speaker-key="sven"] .line,
.game-shell[data-step="cafeSvenCoffeeReply"] .dialogue-panel[data-speaker-key="sven"] .line,
.game-shell[data-step="cafeSvenBeans"] .dialogue-panel[data-speaker-key="sven"] .line,
.game-shell[data-step="cafeSvenFeature"] .dialogue-panel[data-speaker-key="sven"] .line {
  font-size: .84rem;
  line-height: 1.08;
  max-width: 25ch;
}
.game-shell[data-step="cafe"] .dialogue-panel[data-speaker-key="shane"] {
  left: clamp(25rem, 39vw, 31rem);
  right: auto;
  top: clamp(2rem, 6vh, 4rem);
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-right-placement-margin-fix.png");
}
.game-shell[data-step="marleneMessage"] .dialogue-panel[data-speaker-key="marlene"] {
  left: clamp(19rem, 41vw, 34rem);
  right: auto;
  top: clamp(11rem, 30vh, 17rem);
  bottom: auto;
  max-width: min(360px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
}
.game-shell[data-step="marleneMessage"] .workspace {
  width: min(470px, calc(100% - 2rem));
  margin: auto auto 6.5rem clamp(1rem, 4vw, 3rem);
}
.game-shell[data-step="marleneMessage"] .phone-ui {
  width: min(470px, 100%);
}
.game-shell[data-step="marleneMessage"] .dialogue-panel[data-speaker-key="marlene"][data-line-count="four"] {
  width: 430px;
  max-width: min(430px, calc(100% - 2rem));
  min-height: 154px;
  padding: 1.18rem 2.12rem 1.32rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
}
.game-shell[data-step="marleneMessage"] .dialogue-panel[data-speaker-key="marlene"] .line {
  font-size: clamp(.82rem, 1vw, .96rem);
  line-height: 1.08;
  max-width: 31ch;
}
.game-shell[data-step="housingTourWelcome"] .dialogue-panel[data-speaker-key="marlene"],
.game-shell[data-step="housingTourBudget"] .dialogue-panel[data-speaker-key="marlene"],
.game-shell[data-step="housingTour"] .dialogue-panel[data-speaker-key="marlene"],
.game-shell[data-step="housingTourFlaws"] .dialogue-panel[data-speaker-key="marlene"],
.game-shell[data-step="housingTourNight"] .dialogue-panel[data-speaker-key="marlene"],
.game-shell[data-step="housingTourPreference"] .dialogue-panel[data-speaker-key="marlene"],
.game-shell[data-step="housingTourConfirm"] .dialogue-panel[data-speaker-key="marlene"],
.game-shell[data-step="housingTourShoes"] .dialogue-panel[data-speaker-key="marlene"],
.game-shell[data-step="housingTourSelect"] .dialogue-panel[data-speaker-key="marlene"],
.game-shell[data-step="housingChoice"] .dialogue-panel[data-speaker-key="marlene"],
.game-shell[data-step="housingDefer"] .dialogue-panel[data-speaker-key="marlene"] {
  left: auto;
  right: clamp(8rem, 16vw, 14rem);
  top: clamp(2rem, 6vh, 4rem);
  bottom: auto;
  max-width: min(390px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}
.game-shell[data-step="marleneCallback"] .dialogue-panel[data-speaker-key="marlene"] {
  z-index: 12;
  left: clamp(17rem, 30vw, 28rem);
  right: auto;
  top: clamp(4rem, 12vh, 7rem);
  width: 360px;
  min-width: 0;
  max-width: min(360px, calc(100% - 2rem));
  color: #17110d;
  background: transparent var(--bubble-sprite) center / 100% 100% no-repeat;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}
.game-shell[data-step="housingTour"] .dialogue-panel[data-speaker-key="marlene"],
.game-shell[data-step="housingTourFlaws"] .dialogue-panel[data-speaker-key="marlene"],
.game-shell[data-step="housingTourNight"] .dialogue-panel[data-speaker-key="marlene"],
.game-shell[data-step="housingTourWelcome"] .dialogue-panel[data-speaker-key="marlene"],
.game-shell[data-step="housingTourBudget"] .dialogue-panel[data-speaker-key="marlene"],
.game-shell[data-step="housingTourPreference"] .dialogue-panel[data-speaker-key="marlene"],
.game-shell[data-step="housingTourConfirm"] .dialogue-panel[data-speaker-key="marlene"],
.game-shell[data-step="housingTourShoes"] .dialogue-panel[data-speaker-key="marlene"],
.game-shell[data-step="housingTourSelect"] .dialogue-panel[data-speaker-key="marlene"],
.game-shell[data-step="housingChoice"] .dialogue-panel[data-speaker-key="marlene"] {
  left: clamp(3rem, 7vw, 6rem);
  right: auto;
  top: clamp(1.4rem, 4vh, 2.6rem);
  width: 390px;
  min-width: 0;
  max-width: min(390px, calc(100% - 2rem));
  color: #17110d;
  background: transparent var(--bubble-sprite) center / 100% 100% no-repeat;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}
.game-shell[data-step="housingTour"] .dialogue-panel[data-speaker-key="marlene"] {
  width: 300px;
  max-width: min(300px, calc(100% - 2rem));
  min-height: 82px;
  padding: 1.08rem 1.8rem 1.18rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-right-placement-margin-fix.png");
}
.game-shell[data-step="housingTour"] .dialogue-panel[data-speaker-key="marlene"] .line {
  font-size: clamp(.88rem, 1.05vw, 1rem);
  line-height: 1.08;
  max-width: 22ch;
}
.game-shell[data-step="housingTourFlaws"] .dialogue-panel[data-speaker-key="marlene"] {
  width: 390px;
  max-width: min(390px, calc(100% - 2rem));
  min-height: 110px;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png");
}
.game-shell[data-step="housingTourNight"] .dialogue-panel[data-speaker-key="marlene"] {
  width: 470px;
  max-width: min(470px, calc(100% - 2rem));
  min-height: 142px;
  padding: 1.16rem 2.08rem 1.34rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}
.game-shell[data-step="housingTourNight"] .dialogue-panel[data-speaker-key="marlene"] .line {
  font-size: clamp(.8rem, .98vw, .94rem);
  line-height: 1.08;
  max-width: 38ch;
}
.game-shell[data-step="housingTourConfirm"] .dialogue-panel[data-speaker-key="marlene"],
.game-shell[data-step="housingTourShoes"] .dialogue-panel[data-speaker-key="marlene"],
.game-shell[data-step="housingTourSelect"] .dialogue-panel[data-speaker-key="marlene"],
.game-shell[data-step="housingChoice"] .dialogue-panel[data-speaker-key="marlene"] {
  max-width: min(390px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png");
}
.game-shell[data-step="housingDowntown"] .dialogue-panel[data-speaker-key="marlene"],
.game-shell[data-step="housingWarehouse"] .dialogue-panel[data-speaker-key="marlene"],
.game-shell[data-step="housingBrownstone"] .dialogue-panel[data-speaker-key="marlene"],
.game-shell[data-step="housingPaperwork"] .dialogue-panel[data-speaker-key="marlene"],
.game-shell[data-step="housingFirstLook"] .dialogue-panel[data-speaker-key="marlene"] {
  left: clamp(2rem, 6vw, 5rem);
  right: auto;
  top: clamp(1.4rem, 4vh, 3rem);
  bottom: auto;
  width: 430px;
  min-width: 0;
  max-width: min(430px, calc(100% - 2rem));
  color: #17110d;
  background: transparent var(--bubble-sprite) center / 100% 100% no-repeat;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}
.game-shell[data-step="housingDowntown"] .workspace,
.game-shell[data-step="housingWarehouse"] .workspace,
.game-shell[data-step="housingBrownstone"] .workspace {
  position: absolute;
  right: clamp(1rem, 4vw, 3rem);
  bottom: clamp(5.25rem, 13vh, 6.25rem);
  left: auto;
  width: min(390px, calc(100% - 2rem));
  margin: 0;
  z-index: 4;
}
.game-shell[data-step="housingDowntown"] .tour-caption,
.game-shell[data-step="housingWarehouse"] .tour-caption,
.game-shell[data-step="housingBrownstone"] .tour-caption {
  margin-top: 0;
}
.game-shell[data-step="housingWarehouse"] .scene-image,
.game-shell[data-step="housingFirstLook"][data-housing="warehouse-district-conversion"] .scene-image {
  transform: scale(1.08);
  transform-origin: 62% 50%;
}
.game-shell[data-step="cafeWalkPrompt"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="cafeQuestions"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="cafeDistrust"] .dialogue-panel[data-speaker-key="shane"] {
  left: clamp(14.5rem, 31vw, 25rem);
  right: auto;
  top: clamp(1.55rem, 4.2vh, 2.8rem);
  width: 330px;
  height: 152px;
  min-width: 0;
  min-height: 0;
  max-width: min(330px, calc(100% - 2rem));
  padding: 1.14rem 1.78rem 1.24rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
}
.game-shell[data-step="cafeWalkPrompt"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="cafeQuestions"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="cafeWeakness"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="cafeDistrust"] .dialogue-panel[data-speaker-key="sophia"] {
  left: clamp(20rem, 39vw, 31rem);
  right: auto;
  top: clamp(1.55rem, 4.2vh, 2.8rem);
  width: 330px;
  height: 152px;
  min-width: 0;
  min-height: 0;
  max-width: min(330px, calc(100% - 2rem));
  padding: 1.14rem 1.78rem 1.24rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}
.game-shell[data-step="cafeWalkPrompt"] .dialogue-panel[data-mode="speech"],
.game-shell[data-step="cafeQuestions"] .dialogue-panel[data-mode="speech"],
.game-shell[data-step="cafeWeakness"] .dialogue-panel[data-mode="speech"],
.game-shell[data-step="cafeDistrust"] .dialogue-panel[data-mode="speech"] {
  color: #17110d;
  background: transparent var(--bubble-sprite) center / 100% 100% no-repeat;
}
.game-shell[data-step="cafeWalkPrompt"] .dialogue-panel[data-mode="speech"] .line,
.game-shell[data-step="cafeQuestions"] .dialogue-panel[data-mode="speech"] .line,
.game-shell[data-step="cafeWeakness"] .dialogue-panel[data-mode="speech"] .line,
.game-shell[data-step="cafeDistrust"] .dialogue-panel[data-mode="speech"] .line {
  font-size: clamp(.82rem, .98vw, .94rem);
  line-height: 1.08;
  max-width: 29ch;
}
.game-shell[data-step="cafeWeakness"] .dialogue-panel[data-speaker-key="shane"] {
  left: clamp(14.5rem, 31vw, 25rem);
  right: auto;
  top: clamp(1.55rem, 4.2vh, 2.8rem);
  width: 330px;
  height: 152px;
  min-width: 0;
  min-height: 0;
  max-width: min(330px, calc(100% - 2rem));
  padding: 1.14rem 1.78rem 1.24rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
}
.game-shell[data-step="cafeQuestions"] .dialogue-panel[data-speaker-key="sophia"][data-line-count="short"],
.game-shell[data-step="cafeQuestions"] .dialogue-panel[data-speaker-key="sophia"][data-line-count="one"],
.game-shell[data-step="cafeQuestions"] .dialogue-panel[data-speaker-key="sophia"][data-line-count="two"],
.game-shell[data-step="cafeWeakness"] .dialogue-panel[data-speaker-key="sophia"][data-line-count="short"],
.game-shell[data-step="cafeWeakness"] .dialogue-panel[data-speaker-key="sophia"][data-line-count="one"] {
  left: clamp(24rem, 42vw, 33rem);
  top: clamp(2.5rem, 6vh, 4rem);
  width: 238px;
  height: 96px;
  min-width: 0;
  min-height: 0;
  max-width: min(238px, calc(100% - 2rem));
  padding: .74rem 1.32rem .92rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-right-placement-margin-fix.png");
}
.game-shell[data-step="cafeWalk"] .dialogue-panel[data-speaker-key="sophia"] {
  left: auto;
  right: clamp(4rem, 10vw, 8rem);
  top: clamp(2rem, 6vh, 4rem);
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-left-placement-margin-fix.png");
}
.game-shell[data-step="cafeWalkUseful"] .dialogue-panel[data-speaker-key="shane"] {
  left: clamp(4rem, 10vw, 8rem);
  right: auto;
  top: clamp(2rem, 6vh, 4rem);
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png");
}
.game-shell[data-step="returnWalk"] .scene-image {
  transform: none;
  filter: saturate(.96) contrast(1.02) brightness(1.18);
}
.game-shell[data-step="returnWalk"] .scene-wash {
  background:
    linear-gradient(90deg, rgba(8, 11, 10, .24), rgba(8, 11, 10, .01) 48%, rgba(8, 11, 10, .2)),
    linear-gradient(0deg, rgba(8, 11, 10, .24), rgba(8, 11, 10, 0) 52%, rgba(8, 11, 10, .12));
}
.game-shell[data-step="returnOffice"] .dialogue-panel[data-speaker-key="sophia"] {
  left: auto;
  right: clamp(4rem, 10vw, 8rem);
  top: clamp(2rem, 6vh, 4rem);
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-left-placement-margin-fix.png");
}
.game-shell[data-step="returnOfficeReminder"] .dialogue-panel[data-speaker-key="shane"] {
  left: clamp(4rem, 10vw, 8rem);
  right: auto;
  top: clamp(2rem, 6vh, 4rem);
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png");
}
.game-shell[data-step="boardReturn"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="boardTeamFeedback"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="boardRankPrompt"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="boardRankResponse"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="boardNextStep"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="boardHumanNote"] .dialogue-panel[data-speaker-key="shane"] {
  left: clamp(7.5rem, 14vw, 12rem);
  right: auto;
  top: clamp(1.5rem, 4vh, 3rem);
  max-width: min(390px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
}
.game-shell[data-step="boardAssessment"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="boardReturn"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="boardTeamFeedback"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="boardRankPrompt"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="boardRankResponse"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="boardNextStep"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="boardHumanNote"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="boardAssessment"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="boardTeamFeedback"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="boardRankResponse"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="boardNextStep"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="boardHumanNote"] .dialogue-panel[data-speaker-key="sophia"] {
  padding: 1.08rem 1.95rem 1.2rem;
}
.game-shell[data-step="boardAssessment"] .dialogue-panel[data-mode="speech"] .line,
.game-shell[data-step="boardReturn"] .dialogue-panel[data-mode="speech"] .line,
.game-shell[data-step="boardTeamFeedback"] .dialogue-panel[data-mode="speech"] .line,
.game-shell[data-step="boardRankPrompt"] .dialogue-panel[data-mode="speech"] .line,
.game-shell[data-step="boardRankResponse"] .dialogue-panel[data-mode="speech"] .line,
.game-shell[data-step="boardNextStep"] .dialogue-panel[data-mode="speech"] .line,
.game-shell[data-step="boardHumanNote"] .dialogue-panel[data-mode="speech"] .line {
  font-size: clamp(.82rem, .98vw, .94rem);
  line-height: 1.08;
  max-width: 34ch;
}
.game-shell[data-step="boardAssessment"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="boardTeamFeedback"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="boardRankResponse"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="boardNextStep"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="boardHumanNote"] .dialogue-panel[data-speaker-key="sophia"] {
  left: auto;
  right: clamp(6rem, 12vw, 10rem);
  top: clamp(1.5rem, 4vh, 3rem);
  max-width: min(390px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}
.game-shell[data-step="boardTeamFeedback"] .dialogue-panel[data-speaker-key="sophia"] {
  width: 390px;
  max-width: min(390px, calc(100% - 2rem));
  color: #17110d;
  background: transparent var(--bubble-sprite) center / 100% 100% no-repeat;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}
.game-shell[data-step="boardReturn"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="boardRankPrompt"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="boardRankResponse"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="boardHumanNote"] .dialogue-panel[data-speaker-key="shane"] {
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-left-placement-margin-fix.png");
}
.game-shell[data-step="boardRankResponse"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="boardHumanNote"] .dialogue-panel[data-speaker-key="sophia"] {
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png");
}
.game-shell[data-step="boardRankResponse"] .dialogue-panel[data-speaker-key="sophia"] {
  top: clamp(3.5rem, 9vh, 5rem);
}
.game-shell[data-step="boardNextStep"] .dialogue-panel[data-speaker-key="sophia"] {
  top: clamp(3.5rem, 9vh, 5rem);
}
.game-shell[data-step="boardHumanNote"] .dialogue-panel[data-speaker-key="sophia"] {
  top: clamp(3.5rem, 9vh, 5rem);
}
.game-shell[data-step="officeSleepPlace"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="officeSleepLighting"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="officeSleepClosing"] .dialogue-panel[data-speaker-key="shane"] {
  left: clamp(7rem, 13vw, 11rem);
  right: auto;
  top: clamp(2rem, 6vh, 4rem);
  max-width: min(300px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-left-placement-margin-fix.png");
}
.game-shell[data-step="officeSleepStation"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="officeSleepOffer"] .dialogue-panel[data-speaker-key="sophia"] {
  left: auto;
  right: clamp(7rem, 13vw, 11rem);
  top: clamp(2rem, 6vh, 4rem);
  max-width: min(360px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}
.game-shell[data-step="officeSleepOffer"] .dialogue-panel[data-speaker-key="shane"] {
  left: clamp(7rem, 13vw, 11rem);
  right: auto;
  top: clamp(2rem, 6vh, 4rem);
  max-width: min(360px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
}
.dialogue-panel[data-speaker-key="senior-worker"] {
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png");
  left: auto;
  right: clamp(2rem, 7vw, 5.5rem);
  top: clamp(5rem, 10vh, 7rem);
  bottom: auto;
}
.dialogue-panel[data-speaker-key="ellie"],
.dialogue-panel[data-speaker-key="marlene"] {
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png");
  left: auto;
  right: clamp(1rem, 5vw, 4rem);
  bottom: clamp(7rem, 16vh, 9rem);
}
.dialogue-panel[data-speaker-key="ellie"]::after,
.dialogue-panel[data-speaker-key="marlene"]::after {
  display: none;
}
.dialogue-panel[data-speaker-key="anonymous-caller"] {
  left: auto;
  right: clamp(1rem, 5vw, 4rem);
  bottom: clamp(7rem, 16vh, 9rem);
}
.game-shell[data-step="voicemailFirstRead"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="voicemailFirstRead"] .dialogue-panel[data-speaker-key="shane"] {
  left: auto;
  right: clamp(1rem, 3vw, 2.75rem);
  top: clamp(1.35rem, 4vh, 2.6rem);
  bottom: auto;
  max-width: min(310px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-right-placement-margin-fix.png");
}
.game-shell[data-step="voicemailRiskSophia"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="voicemailKnownSource"] .dialogue-panel[data-speaker-key="sophia"] {
  /* Sophia speaks across the open lane, not over Shane's face. */
  left: clamp(22rem, 34vw, 27rem);
  right: auto;
  top: clamp(1.8rem, 4vh, 2.8rem);
  bottom: auto;
  max-width: min(285px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}
.game-shell[data-step="voicemailRiskShane"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="voicemailAnonymousSource"] .dialogue-panel[data-speaker-key="shane"] {
  left: clamp(1rem, 3vw, 2.75rem);
  right: auto;
  top: clamp(1.5rem, 4.5vh, 3rem);
  bottom: auto;
  max-width: min(390px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}
.game-shell[data-step="voicemailKnownUs"] .dialogue-panel[data-speaker-key="sophia"] {
  /* Keep the longer conclusion in shared negative space with a clear tail to Sophia. */
  left: clamp(21rem, 34vw, 27rem);
  right: auto;
  top: clamp(2rem, 5vh, 3.5rem);
  width: 340px;
  max-width: min(340px, calc(100% - 2rem));
  min-height: 0;
  padding: 1.05rem 1.8rem 1.18rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}
.game-shell[data-step="voicemailKnownUs"] .dialogue-panel[data-speaker-key="sophia"] .line,
.game-shell[data-step="voicemailAnonymousSource"] .dialogue-panel[data-speaker-key="shane"] .line {
  font-size: clamp(.8rem, .96vw, .94rem);
  line-height: 1.08;
  max-width: 42ch;
}
.game-shell[data-step="ellieIntro"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellieFactual"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellieCharmed"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="elliePlayerResponse"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellie"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellieOdd"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="seniorWorker"] .dialogue-panel[data-speaker-key="ellie"] {
  left: clamp(3rem, 8vw, 7rem);
  right: auto;
  top: clamp(1.75rem, 5vh, 3.5rem);
  bottom: auto;
  max-width: min(380px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}
.game-shell[data-step="elliePlayerResponse"] .dialogue-panel[data-speaker-key="sophia"] {
  left: auto;
  right: clamp(3rem, 8vw, 7rem);
  top: clamp(1.75rem, 5vh, 3.5rem);
  bottom: auto;
  max-width: min(390px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
}
.game-shell[data-step="ellieIntro"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellieFactual"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellieCharmed"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="elliePlayerResponse"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellie"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellieOdd"] .dialogue-panel[data-speaker-key="ellie"] {
  left: auto;
  right: clamp(15rem, 25vw, 20rem);
  top: clamp(3.8rem, 9vh, 5.6rem);
  width: auto;
  min-width: 210px;
  max-width: min(365px, calc(100% - 2rem));
  padding: 1rem 1.8rem 1.1rem;
}
.game-shell[data-step="ellieIntro"] .dialogue-panel[data-speaker-key="ellie"] {
  max-width: min(290px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png");
}
.game-shell[data-step="ellieIntro"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellieFactual"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellieCharmed"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="elliePlayerResponse"] .dialogue-panel[data-speaker-key="ellie"] {
  left: auto;
  right: clamp(2rem, 6vw, 5rem);
  top: clamp(1.1rem, 4vh, 2.5rem);
  bottom: auto;
  width: auto;
  min-width: 0;
  max-width: min(360px, calc(100% - 2rem));
  color: #17110d;
  background: transparent var(--bubble-sprite) center / 100% 100% no-repeat;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
}
.game-shell[data-step="ellieIntro"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="elliePlayerResponse"] .dialogue-panel[data-speaker-key="ellie"][data-line-count="short"],
.game-shell[data-step="elliePlayerResponse"] .dialogue-panel[data-speaker-key="ellie"][data-line-count="one"] {
  max-width: min(260px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-left-placement-margin-fix.png");
}
.game-shell[data-step="elliePlayerResponse"] .dialogue-panel[data-speaker-key="ellie"][data-line-count="two"],
.game-shell[data-step="elliePlayerResponse"] .dialogue-panel[data-speaker-key="ellie"][data-line-count="three"] {
  max-width: min(390px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-left-placement-margin-fix.png");
}
.game-shell[data-step="ellieFactual"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellieCharmed"] .dialogue-panel[data-speaker-key="ellie"] {
  max-width: min(330px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-left-placement-margin-fix.png");
}
.game-shell[data-step="freshPaintConcern"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="seniorWorker"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="seniorWorkerEllie"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="seniorWorkerEllieConcern"] .dialogue-panel[data-speaker-key="ellie"] {
  left: clamp(10rem, 18vw, 16rem);
  right: auto;
  top: clamp(2rem, 6vh, 4rem);
  bottom: auto;
  max-width: min(390px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}
.game-shell[data-step="ellieSophiaNice"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="ellieStressTest"] .dialogue-panel[data-speaker-key="sophia"] {
  left: clamp(2rem, 6vw, 5rem);
  right: auto;
  top: clamp(1.1rem, 4vh, 2.5rem);
  bottom: auto;
  width: auto;
  max-width: min(390px, calc(100% - 2rem));
  padding: 1rem 1.85rem 1.15rem;
  color: #17110d;
  background: transparent var(--bubble-sprite) center / 100% 100% no-repeat;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}
.game-shell[data-step="ellieSophiaNice"] .dialogue-panel[data-speaker-key="sophia"] {
  max-width: min(240px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-right-placement-margin-fix.png");
}
.game-shell[data-step="ellieStressTest"] .dialogue-panel[data-speaker-key="sophia"] {
  max-width: min(320px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png");
}
.game-shell[data-step="ellieBlueQuestion"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="freshPaintQuestion"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="camera"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="note"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="fieldNoteHonesty"] .dialogue-panel[data-speaker-key="sophia"] {
  left: auto;
  right: clamp(3rem, 8vw, 7rem);
  top: clamp(1.75rem, 5vh, 3.5rem);
  bottom: auto;
  max-width: min(390px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
}

/* Sophia stands on the dock's right edge here; her note response belongs in
   the open water/sky field, with its tail returning toward her. */
.game-shell[data-step="fieldNoteHonesty"] .dialogue-panel[data-speaker-key="sophia"] {
  left: clamp(2rem, 8vw, 7rem);
  right: auto;
  width: 370px;
  max-width: min(370px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}
.game-shell[data-step="ellieBlueQuestion"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="freshPaintQuestion"] .dialogue-panel[data-speaker-key="sophia"] {
  left: clamp(13rem, 22vw, 18rem);
  right: auto;
  top: clamp(3.8rem, 9vh, 5.6rem);
}
.game-shell[data-step="freshPaintQuestion"] .dialogue-panel[data-speaker-key="sophia"] {
  max-width: min(260px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-left-placement-margin-fix.png");
}
.game-shell[data-step="seniorWorkerSophia"] .dialogue-panel[data-speaker-key="sophia"] {
  left: auto;
  right: clamp(3rem, 8vw, 7rem);
  top: clamp(1.75rem, 5vh, 3.5rem);
  bottom: auto;
  max-width: min(300px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-left-placement-margin-fix.png");
}
.game-shell[data-step="elliePlayerResponse"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellie"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellieOdd"] .dialogue-panel[data-speaker-key="ellie"] {
  left: auto;
  right: clamp(2rem, 6vw, 5rem);
  top: clamp(1.1rem, 4vh, 2.6rem);
  bottom: auto;
  min-width: 0;
  max-width: min(410px, calc(100% - 2rem));
  color: #17110d;
  background: transparent var(--bubble-sprite) center / 100% 100% no-repeat;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
}
.game-shell[data-step="ellie"] .dialogue-panel[data-speaker-key="ellie"] {
  max-width: min(430px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
}
.game-shell[data-step="ellieBlueQuestion"] .dialogue-panel[data-speaker-key="sophia"] {
  left: clamp(2rem, 6vw, 5rem);
  right: auto;
  top: clamp(1.1rem, 4vh, 2.6rem);
  bottom: auto;
  max-width: min(390px, calc(100% - 2rem));
  color: #17110d;
  background: transparent var(--bubble-sprite) center / 100% 100% no-repeat;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png");
}
.game-shell[data-step="ellieIntro"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellieFactual"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellieCharmed"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="elliePlayerResponse"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellie"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellieOdd"] .dialogue-panel[data-speaker-key="ellie"] {
  left: clamp(23rem, 34vw, 27rem);
  right: auto;
  top: clamp(1.2rem, 4.2vh, 2.8rem);
  bottom: auto;
  width: 330px;
  min-width: 0;
  max-width: min(330px, calc(100% - 2rem));
  color: #17110d;
  background: transparent var(--bubble-sprite) center / 100% 100% no-repeat;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}
.game-shell[data-step="ellieIntro"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="elliePlayerResponse"] .dialogue-panel[data-speaker-key="ellie"][data-line-count="short"],
.game-shell[data-step="elliePlayerResponse"] .dialogue-panel[data-speaker-key="ellie"][data-line-count="one"] {
  max-width: min(260px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-right-placement-margin-fix.png");
}
.game-shell[data-step="ellieFactual"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellieCharmed"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="elliePlayerResponse"] .dialogue-panel[data-speaker-key="ellie"][data-line-count="two"],
.game-shell[data-step="elliePlayerResponse"] .dialogue-panel[data-speaker-key="ellie"][data-line-count="three"] {
  max-width: min(330px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-right-placement-margin-fix.png");
}
.game-shell[data-step="ellie"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellieOdd"] .dialogue-panel[data-speaker-key="ellie"] {
  max-width: min(330px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}
.game-shell[data-step="freshPaintQuestion"] .dialogue-panel[data-speaker-key="sophia"] {
  left: clamp(2rem, 6vw, 5rem);
  right: auto;
  top: clamp(1.1rem, 4vh, 2.6rem);
  bottom: auto;
  color: #17110d;
  background: transparent var(--bubble-sprite) center / 100% 100% no-repeat;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-right-placement-margin-fix.png");
}
.game-shell[data-step="freshPaintConcern"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="elliePointsContainer"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="seniorWorker"] .dialogue-panel[data-speaker-key="ellie"] {
  left: clamp(2rem, 6vw, 5rem);
  right: auto;
  top: clamp(1.25rem, 4vh, 3rem);
  bottom: auto;
  max-width: min(430px, calc(100% - 2rem));
  color: #17110d;
  background: transparent var(--bubble-sprite) center / 100% 100% no-repeat;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}
.game-shell[data-step="elliePointsContainer"] .dialogue-panel[data-speaker-key="ellie"] {
  max-width: min(220px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-right-placement-margin-fix.png");
}
.game-shell[data-step="seniorWorker"] .dialogue-panel[data-speaker-key="ellie"] {
  max-width: min(520px, calc(100% - 2rem));
  padding: 1.12rem 2.05rem 1.24rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}
.game-shell[data-step="seniorWorker"] .dialogue-panel[data-speaker-key="ellie"] .line {
  font-size: clamp(.82rem, .98vw, .95rem);
  line-height: 1.08;
  max-width: 46ch;
}
.game-shell[data-step="freshPaintConcern"] .dialogue-panel[data-speaker-key="sophia"] {
  left: auto;
  right: clamp(2rem, 6vw, 5rem);
  top: clamp(1.25rem, 4vh, 3rem);
  bottom: auto;
  max-width: min(410px, calc(100% - 2rem));
  color: #17110d;
  background: transparent var(--bubble-sprite) center / 100% 100% no-repeat;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-left-placement-margin-fix.png");
}
.game-shell[data-step="camera"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="note"] .dialogue-panel[data-speaker-key="sophia"] {
  left: clamp(2rem, 6vw, 5rem);
  right: auto;
  top: clamp(1.25rem, 4vh, 3rem);
  bottom: auto;
  max-width: min(390px, calc(100% - 2rem));
  color: #17110d;
  background: transparent var(--bubble-sprite) center / 100% 100% no-repeat;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png");
}
.game-shell[data-step="note"] .dialogue-panel[data-speaker-key="sophia"] {
  left: clamp(18rem, 33vw, 30rem);
  right: auto;
  top: clamp(1.4rem, 4vh, 2.8rem);
  max-width: min(360px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png");
}
.game-shell[data-step="harbourtownResponse"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="harbourtownObserve"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="harbourtownPaperwork"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="harbourtownEllieLead"] .dialogue-panel[data-speaker-key="sophia"] {
  left: 50%;
  right: auto;
  top: clamp(1.25rem, 4.5vh, 3rem);
  bottom: auto;
  width: 430px;
  max-width: min(430px, calc(100% - 2rem));
  color: #17110d;
  background: transparent var(--bubble-sprite) center / 100% 100% no-repeat;
  transform: translateX(-50%) rotate(.15deg);
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
}
.game-shell[data-step="harbourtownObserve"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="harbourtownPaperwork"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="harbourtownEllieLead"] .dialogue-panel[data-speaker-key="sophia"] {
  width: 460px;
  max-width: min(460px, calc(100% - 2rem));
  min-height: 126px;
  padding: 1rem 1.95rem 1.15rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
}
.dialogue-panel[data-speaker-key="camera"],
.dialogue-panel[data-speaker-key="notebook"],
.dialogue-panel[data-speaker-key="phone"],
.dialogue-panel[data-speaker-key="sophia-s-note"],
.dialogue-panel[data-speaker-key="agency-form-01"] {
  left: clamp(1rem, 5vw, 4rem);
  right: auto;
  bottom: clamp(1rem, 4vw, 2rem);
}
.game-shell[data-step="pin"] .dialogue-panel {
  display: none;
}
.game-shell[data-step="boardRankPrompt"] .dialogue-panel,
.game-shell[data-step="board"] .dialogue-panel {
  display: none;
}
.game-shell[data-step="arrival"] .dialogue-panel,
.game-shell[data-step="prep"] .dialogue-panel,
.game-shell[data-step="harbourtown"] .dialogue-panel,
.game-shell[data-step="board"] .dialogue-panel,
.game-shell[data-step="wrapup"] .dialogue-panel,
.game-shell[data-step="ending"] .dialogue-panel {
  top: auto;
  left: clamp(1rem, 5vw, 4rem);
  right: auto;
  bottom: clamp(1rem, 4vw, 2rem);
}
.game-shell[data-step="prep"] .dialogue-panel[data-speaker-key="sophia"] {
  left: clamp(1rem, 5vw, 4rem);
  right: auto;
  top: clamp(1.25rem, 3.5vh, 2.25rem);
  bottom: auto;
  max-width: min(285px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-left-placement-margin-fix.png");
}
.game-shell[data-step="prep"] .dialogue-panel::after,
.game-shell[data-step="harbourtown"] .dialogue-panel::after,
.game-shell[data-step="board"] .dialogue-panel::after,
.game-shell[data-step="wrapup"] .dialogue-panel::after,
.game-shell[data-step="ending"] .dialogue-panel::after {
  left: 34px;
  right: auto;
}
.game-shell[data-step="casePath"] .dialogue-panel[data-speaker-key="shane"] {
  left: clamp(1rem, 3vw, 2.75rem);
  right: auto;
  top: clamp(1.5rem, 4.5vh, 3rem);
  bottom: auto;
  max-width: min(315px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}
.game-shell[data-step="casePath"] .dialogue-panel[data-speaker-key="sophia"] {
  left: clamp(22rem, 34vw, 27rem);
  right: auto;
  top: clamp(1.8rem, 4vh, 2.8rem);
  bottom: auto;
  max-width: min(285px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}
.game-shell[data-step="arrival"] .dialogue-panel[data-speaker-key="sophia"] {
  left: clamp(16rem, 28vw, 22rem);
  right: auto;
  top: clamp(17.5rem, 42vh, 20rem);
  bottom: auto;
  max-width: min(390px, calc(100% - 2rem));
  transform: rotate(.25deg);
}
.game-shell[data-step="harbourtownPatience"] .dialogue-panel[data-speaker-key="sophia"] {
  /* The lower-card default can land below a short desktop viewport once the
     Harbourtown brief is open. Keep Sophia's first dock reply in the open
     field above that brief instead. */
  left: clamp(1rem, 5vw, 4rem);
  right: auto;
  top: clamp(17rem, 38vh, 21rem);
  bottom: auto;
}
.game-shell[data-step="harbourtown"] .dialogue-panel[data-mode="caption"],
.game-shell[data-step="harbourtownResponse"] .dialogue-panel[data-mode="caption"],
.game-shell[data-step="harbourtownObserve"] .dialogue-panel[data-mode="caption"],
.game-shell[data-step="harbourtownPaperwork"] .dialogue-panel[data-mode="caption"],
.game-shell[data-step="harbourtownEllieLead"] .dialogue-panel[data-mode="caption"] {
  left: clamp(1rem, 5vw, 4rem);
  right: auto;
  top: clamp(5.5rem, 12vh, 7rem);
  bottom: auto;
  width: min(370px, calc(100% - 2rem));
  /* Override the centered speech-bubble transform above for caption beats. */
  transform: rotate(.15deg);
}
.game-shell[data-step="arrival"] .dialogue-panel[data-speaker-key="sophia"]::after {
  left: auto;
  right: 38px;
  top: -10px;
  bottom: auto;
  clip-path: polygon(0 100%, 100% 92%, 82% 0);
  transform: rotate(-12deg);
}
.game-shell[data-step="arrival"] .dialogue-panel[data-speaker-key="sophia"]::before {
  left: auto;
  right: 35px;
  top: -14px;
  bottom: auto;
  clip-path: polygon(0 100%, 100% 94%, 82% 0);
  transform: rotate(-12deg);
}
.speaker {
  margin: 0 0 .35rem;
  color: var(--blue);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.line {
  margin: 0;
  color: inherit;
  font-size: clamp(1rem, 2vw, 1.25rem);
}
.dialogue-actions {
  position: fixed;
  right: calc(320px + clamp(1rem, 5vw, 4rem));
  bottom: clamp(1rem, 4vw, 2rem);
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
  max-width: min(300px, calc(100% - 2rem));
}
.dialogue-actions:empty {
  display: none;
}
.action-status {
  display: grid;
  gap: .12rem;
  margin: 0;
  padding: .45rem .6rem;
  border: 1px solid rgba(231, 224, 210, .24);
  color: var(--paper);
  background: rgba(8, 11, 10, .62);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.action-status span {
  color: var(--blue);
  font-size: .58rem;
  letter-spacing: .14em;
}
.dialogue-panel[data-mode="speech"] .speaker {
  display: none;
}
.dialogue-panel[data-mode="speech"] .line {
  font-family: var(--lettering);
  font-size: clamp(.94rem, 1.12vw, 1.08rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: pre-line;
  text-align: center;
  max-width: 27ch;
}
.dialogue-panel[data-mode="speech"][data-line-count="three"] {
  padding: 1.04rem 1.86rem 1.14rem;
}
.dialogue-panel[data-mode="speech"][data-line-count="four"] {
  padding: 1.12rem 1.98rem 1.24rem;
}
.dialogue-panel[data-mode="speech"][data-line-count="three"] .line {
  font-size: clamp(.86rem, 1vw, .98rem);
  line-height: 1.08;
  max-width: 30ch;
}
.dialogue-panel[data-mode="speech"][data-line-count="four"] .line {
  font-size: clamp(.78rem, .94vw, .9rem);
  line-height: 1.07;
  max-width: 34ch;
}
.dialogue-panel[data-mode="caption"] .speaker,
.dialogue-panel[data-mode="diegetic"] .speaker {
  color: var(--blue);
}

.case-state {
  display: grid;
  align-content: start;
  gap: 1px;
  min-height: 100svh;
  border-left: 1px solid var(--line);
  background: #121817;
}
.case-state > div {
  padding: 1rem;
  border-bottom: 1px solid var(--line);
}
.case-state p { margin: 0; color: var(--paper-soft); }
.case-state ul {
  display: grid;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.case-state li {
  padding: .5rem .55rem;
  border: 1px solid rgba(231, 224, 210, .16);
  color: var(--paper-soft);
  background: rgba(0, 0, 0, .18);
  font-size: .82rem;
}

@media (max-width: 980px) {
  .game-shell { grid-template-columns: 1fr; }
  .case-state {
    min-height: 0;
    grid-template-columns: repeat(2, 1fr);
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .stage { min-height: 100svh; }
  .dialogue-actions {
    right: clamp(1rem, 5vw, 4rem);
  }
  .debug-jump {
    right: .65rem;
    max-width: calc(100vw - 1.3rem);
  }
}

@media (max-width: 680px) {
  .game-shell[data-step="officeTourEvidence"] .workspace {
    width: calc(100% - 1rem);
    margin: .8rem .5rem 13.5rem;
  }

  .topbar { align-items: flex-start; }
  .topbar-actions { flex-shrink: 0; }
  .case-meta { max-width: 190px; }
  .case-meta .save-status { font-size: .57rem; }
  .workspace {
    width: calc(100% - 1rem);
    margin: .8rem .5rem 13.5rem;
  }
  .game-shell[data-step="intake"] .workspace {
    margin-bottom: 1rem;
  }
  .field-grid,
  .tool-row,
  .board-grid,
  .interpretation-grid,
  .board-authoring-grid,
  .board-working-set,
  .note-tabs {
    grid-template-columns: 1fr;
  }
  .board-region-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .choice-grid,
  .hotspot-grid,
  .object-list.compact,
  .panel-sequence { grid-template-columns: 1fr; }
  .dialogue-panel {
    position: fixed;
    left: .5rem;
    right: .5rem;
    bottom: 4.65rem;
    top: auto;
    width: auto;
    max-width: none;
    grid-template-columns: 1fr;
  }
  .game-shell .dialogue-panel,
  .game-shell[data-step] .dialogue-panel {
    left: .5rem;
    right: .5rem;
    bottom: 4.65rem;
    top: auto;
    width: auto;
    max-width: none;
  }
  .dialogue-panel::after { display: none !important; }
  .game-shell[data-step="intake"] .dialogue-panel {
    position: static;
    margin: .5rem;
    width: auto;
  }
  .game-shell[data-step="intro"] .dialogue-panel {
    top: 7.9rem;
    bottom: auto;
  }
  .response-strip {
    position: fixed;
    left: .5rem;
    right: .5rem;
    bottom: .5rem;
    flex-direction: column;
    align-items: stretch;
    gap: .4rem;
  }
  .script-choice {
    width: 100%;
    max-width: none;
    padding: .65rem .8rem;
  }
  .dialogue-actions {
    position: fixed;
    left: .5rem;
    right: .5rem;
    bottom: .5rem;
    max-width: none;
    justify-content: stretch;
  }
  .dialogue-actions button { width: 100%; }
  .action-status { width: 100%; text-align: center; }
  .case-state { grid-template-columns: 1fr; }
  .game-shell[data-step="camera"] .workspace {
    width: calc(100% - 1rem);
  }
  .reticle { width: min(70vw, 360px); }
}

@media (max-width: 500px) {
  .scene-back span:last-child { display: none; }
  .scene-back { padding-inline: .52rem; }
}


.game-shell[data-step="officeTourDesk"] .scene-image,
.game-shell[data-step="tools"] .scene-image,
.game-shell[data-step="inspectClose"][data-inspect-target="desk"] .scene-image {
  object-position: 58% center;
}
.desk-tool-hotspots [data-tool="camera"],
.desk-tool-hotspots [data-desk-tool="camera"] {
  left: 73%;
  top: 63%;
  width: 165px;
  height: 130px;
}
.desk-tool-hotspots [data-tool="phone"],
.desk-tool-hotspots [data-desk-tool="phone"] {
  left: 65%;
  top: 43%;
  width: 230px;
  height: 135px;
}

.game-shell[data-step="scannerBoundary"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="scannerCooperate"] .dialogue-panel[data-speaker-key="shane"] {
  left: clamp(10rem, 18vw, 16rem);
  right: auto;
  top: clamp(2.2rem, 6vh, 4rem);
  max-width: min(390px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
}
.game-shell[data-step="cafeSophiaBehave"] .dialogue-panel[data-speaker-key="sophia"] {
  right: clamp(15rem, 25vw, 22rem);
  top: clamp(2rem, 6vh, 4rem);
}
.game-shell[data-step="marleneCallback"] .dialogue-panel[data-speaker-key="marlene"] {
  left: clamp(17rem, 30vw, 28rem);
  right: auto;
  top: clamp(4rem, 12vh, 7rem);
  max-width: min(360px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}

.game-shell[data-step="casePath"] .workspace,
.game-shell[data-step="boardNextStep"] .workspace {
  width: min(470px, calc(100% - 2rem));
  margin: auto auto clamp(1rem, 4vh, 2rem) clamp(1rem, 5vw, 4rem);
  align-self: end;
}
.game-shell[data-step="casePath"] .workspace {
  margin-right: auto;
  margin-left: clamp(1rem, 4vw, 3rem);
}
.game-shell[data-step="boardNextStep"] .workspace {
  margin: auto auto clamp(1rem, 4vh, 2rem) clamp(1rem, 4vw, 3rem);
}
.game-shell[data-step="boardNextStep"] .next-step-card,
.game-shell[data-step="casePath"] .division-card {
  max-width: 470px;
}

.game-shell[data-step="casePath"] .workspace {
  position: fixed;
  left: clamp(1rem, 4vw, 3rem);
  right: auto;
  bottom: clamp(1rem, 4vh, 2rem);
  z-index: 8;
  width: min(470px, calc(100% - 2rem));
  margin: 0;
}

.game-shell[data-step="boardNextStep"] .workspace {
  position: fixed;
  left: clamp(1rem, 4vw, 3rem);
  right: auto;
  bottom: clamp(1rem, 4vh, 2rem);
  z-index: 8;
  width: min(430px, calc(100% - 2rem));
  margin: 0;
}

.game-shell[data-step="boardNextStep"] .next-step-card {
  max-width: 430px;
  overflow-wrap: anywhere;
}

.game-shell[data-step="boardNextStep"] .next-step-card h2 {
  font-size: clamp(1.12rem, 2vw, 1.55rem);
  line-height: 1.08;
  max-width: 18ch;
  overflow-wrap: anywhere;
}

.game-shell[data-step="ellieIntro"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellieFactual"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellieCharmed"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="elliePlayerResponse"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellie"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellieOdd"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="elliePlacard"] .dialogue-panel[data-speaker-key="ellie"] {
  left: clamp(9rem, 17vw, 15rem);
  right: auto;
  top: clamp(1.3rem, 4.2vh, 2.8rem);
  max-width: min(430px, calc(100% - 2rem));
  padding: 1.05rem 1.9rem 1.15rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}
.game-shell[data-step="ellieIntro"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellieFactual"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellieCharmed"] .dialogue-panel[data-speaker-key="ellie"] {
  max-width: min(330px, calc(100% - 2rem));
}
.game-shell[data-step="ellieIntro"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellieFactual"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellieCharmed"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="elliePlayerResponse"] .dialogue-panel[data-speaker-key="ellie"] {
  left: clamp(9rem, 16vw, 14rem);
  right: auto;
  top: clamp(1.25rem, 4vh, 2.6rem);
  padding: 1.12rem 2rem 1.22rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png");
}
.game-shell[data-step="ellieIntro"] .dialogue-panel[data-speaker-key="ellie"] {
  width: 260px;
  max-width: min(260px, calc(100% - 2rem));
  min-height: 108px;
}
.game-shell[data-step="ellieFactual"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellieCharmed"] .dialogue-panel[data-speaker-key="ellie"] {
  width: 330px;
  max-width: min(330px, calc(100% - 2rem));
  min-height: 112px;
}
.game-shell[data-step="elliePlayerResponse"] .dialogue-panel[data-speaker-key="ellie"] {
  width: 470px;
  max-width: min(470px, calc(100% - 2rem));
  min-height: 150px;
  padding: 1.18rem 2.22rem 1.34rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}
.game-shell[data-step="ellieIntro"] .dialogue-panel[data-speaker-key="ellie"] .line,
.game-shell[data-step="ellieFactual"] .dialogue-panel[data-speaker-key="ellie"] .line,
.game-shell[data-step="ellieCharmed"] .dialogue-panel[data-speaker-key="ellie"] .line {
  max-width: 22ch;
}
.game-shell[data-step="elliePlayerResponse"] .dialogue-panel[data-speaker-key="ellie"] .line {
  font-size: clamp(.82rem, .98vw, .96rem);
  line-height: 1.08;
  max-width: 37ch;
}
.game-shell[data-step="elliePlacard"] .dialogue-panel[data-speaker-key="ellie"] {
  width: 330px;
  max-width: min(330px, calc(100% - 2rem));
  min-height: 124px;
  padding: 1.02rem 1.78rem 1.12rem;
}
.game-shell[data-step="elliePlacard"] .dialogue-panel[data-speaker-key="ellie"] .line {
  font-size: clamp(.72rem, .88vw, .84rem);
  line-height: 1.07;
  max-width: 30ch;
}
.game-shell[data-step="ellieHandlingReminder"] .dialogue-panel[data-speaker-key="sophia"] {
  left: clamp(28rem, 43vw, 44rem);
  right: auto;
  top: clamp(1.3rem, 4.2vh, 2.8rem);
  max-width: min(390px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
}
.game-shell[data-step="elliePointsContainer"] .dialogue-panel[data-speaker-key="ellie"] {
  left: clamp(9rem, 17vw, 15rem);
  right: auto;
  top: clamp(2rem, 6vh, 4rem);
  max-width: min(260px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-right-placement-margin-fix.png");
}
.game-shell[data-step="freshPaintQuestion"] .dialogue-panel[data-speaker-key="sophia"] {
  left: clamp(28rem, 43vw, 44rem);
  right: auto;
  top: clamp(1.6rem, 5vh, 3.3rem);
  max-width: min(260px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-left-placement-margin-fix.png");
}
.game-shell[data-step="camera"] .dialogue-panel[data-speaker-key="ellie"] {
  left: clamp(8rem, 15vw, 14rem);
  right: auto;
  top: clamp(1.4rem, 4.5vh, 3rem);
  width: 370px;
  max-width: min(370px, calc(100% - 2rem));
  min-height: 142px;
  padding: 1.05rem 1.92rem 1.18rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}
.game-shell[data-step="camera"] .dialogue-panel[data-speaker-key="ellie"] .line {
  font-size: clamp(.78rem, .94vw, .9rem);
  line-height: 1.07;
  max-width: 31ch;
}

.game-shell[data-step="camera"] .placard-halo-mode .paint-halo {
  left: 55%;
  top: 32%;
  width: min(18vw, 220px);
  height: min(12vw, 150px);
  border-radius: 42% 58% 48% 52% / 50% 46% 54% 50%;
}
.paint-halo.focused {
  left: 28%;
  top: 12%;
  width: min(50vw, 620px);
  height: min(35vw, 390px);
}

.board-zoom-points button {
  border-color: rgba(247, 240, 224, .62);
  background: radial-gradient(ellipse at center, rgba(247, 240, 224, .18), rgba(121, 164, 163, .2) 48%, rgba(121, 164, 163, .03) 76%);
  box-shadow: 0 0 34px rgba(247, 240, 224, .24), inset 0 0 32px rgba(121, 164, 163, .18);
  opacity: .76;
}
.board-zoom-points button:hover,
.board-zoom-points button:focus-visible {
  opacity: 1;
}
.board-zoom-points button span {
  border-color: rgba(247, 240, 224, .52);
  background: rgba(8, 11, 10, .86);
}
.board-zoom-caption {
  position: fixed;
  left: clamp(1rem, 4vw, 3rem);
  bottom: clamp(1rem, 4vh, 2rem);
  width: min(430px, calc(100% - 2rem));
  z-index: 8;
}
.act-turn-placard-card {
  position: fixed;
  right: clamp(1rem, 5vw, 4rem);
  top: clamp(7rem, 18vh, 12rem);
  width: min(280px, 25vw);
  padding: .45rem;
  background: rgba(231, 224, 210, .9);
  color: #17110d;
  transform: rotate(-1.5deg);
  z-index: 6;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
}
.act-turn-placard-card img {
  display: block;
  width: 100%;
  height: auto;
}
.act-turn-placard-card figcaption {
  margin-top: .32rem;
  font-family: var(--display);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.game-shell[data-step="boardReturnSophia"] .dialogue-panel[data-speaker-key="sophia"] {
  right: clamp(6rem, 12vw, 10rem);
  left: auto;
  top: clamp(2rem, 6vh, 4rem);
}
.game-shell[data-step="boardReturnElliePrompt"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="boardAssessment"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="boardNextStep"] .dialogue-panel[data-speaker-key="shane"] {
  left: clamp(6rem, 12vw, 10rem);
  right: auto;
  top: clamp(1.5rem, 4vh, 3rem);
  max-width: min(460px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
}
.game-shell[data-step="boardReturnElliePrompt"] .dialogue-panel[data-speaker-key="shane"] {
  width: 390px;
  max-width: min(390px, calc(100% - 2rem));
  min-height: 126px;
  padding: 1.12rem 2.08rem 1.26rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-left-placement-margin-fix.png");
}
.game-shell[data-step="boardReturnElliePrompt"] .dialogue-panel[data-speaker-key="shane"] .line {
  font-size: clamp(.86rem, 1vw, .96rem);
  line-height: 1.08;
  max-width: 28ch;
}
.game-shell[data-step="boardDebriefSolid"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="officeSleepClosing"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="lateHousingSolidWork"] .dialogue-panel[data-speaker-key="shane"] {
  left: clamp(1.5rem, 4vw, 3.5rem);
  right: auto;
  top: clamp(1.4rem, 4vh, 3rem);
  max-width: min(420px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-left-placement-margin-fix.png");
}

.game-shell[data-step="lateHousingSolidWork"] .dialogue-panel[data-speaker-key="shane"] {
  width: 420px;
  min-height: 142px;
  padding: 1.1rem 2rem 1.25rem;
}

.game-shell[data-step="lateHousingSolidWork"] .dialogue-panel[data-speaker-key="shane"] .line {
  font-size: clamp(.8rem, .96vw, .92rem);
  line-height: 1.08;
  max-width: 33ch;
}

.game-shell[data-step="boardDebriefFeeling"] .dialogue-panel[data-speaker-key="sophia"] {
  left: auto;
  right: clamp(5rem, 11vw, 9rem);
  top: clamp(1.5rem, 4.5vh, 3.2rem);
  max-width: min(420px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}

.game-shell[data-step="boardDebriefResponse"] .dialogue-panel[data-speaker-key="sophia"] {
  left: auto;
  right: clamp(5rem, 11vw, 9rem);
  top: clamp(1.5rem, 4.5vh, 3.2rem);
  max-width: min(390px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png");
}

.game-shell[data-step="boardDebriefResponse"] .dialogue-panel[data-speaker-key="shane"] {
  left: clamp(6rem, 12vw, 10rem);
  right: auto;
  top: clamp(1.5rem, 4.5vh, 3.2rem);
  max-width: min(390px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-left-placement-margin-fix.png");
}

.game-shell[data-step="boardDebriefObservation"] .dialogue-panel[data-speaker-key="sophia"] {
  left: clamp(25rem, 35vw, 38rem);
  right: auto;
  top: clamp(.9rem, 3vh, 2rem);
  width: 520px;
  max-width: min(520px, calc(100% - 2rem));
  min-height: 168px;
  padding: 1.2rem 2.2rem 1.36rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}

.game-shell[data-step="boardDebriefObservation"] .dialogue-panel[data-speaker-key="sophia"] .line {
  font-size: clamp(.74rem, .9vw, .86rem);
  line-height: 1.06;
  max-width: 43ch;
}

.game-shell[data-step="boardDebriefMemory"] .dialogue-panel[data-speaker-key="sophia"] {
  left: auto;
  right: clamp(5rem, 11vw, 9rem);
  top: clamp(1.4rem, 4vh, 3rem);
  width: 440px;
  max-width: min(440px, calc(100% - 2rem));
  min-height: 130px;
  padding: 1.04rem 1.92rem 1.16rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}

.game-shell[data-step="boardDebriefMemory"] .dialogue-panel[data-speaker-key="shane"] {
  left: clamp(5rem, 11vw, 9rem);
  right: auto;
  top: clamp(1.4rem, 4vh, 3rem);
  width: 440px;
  max-width: min(440px, calc(100% - 2rem));
  min-height: 130px;
  padding: 1.04rem 1.92rem 1.16rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
}

.game-shell[data-step="boardDebriefMemory"] .dialogue-panel .line {
  font-size: clamp(.76rem, .92vw, .88rem);
  line-height: 1.06;
  max-width: 36ch;
}

/* Historical speech-bubble margin safety pass.
   The final private-demo authority is the stabilization block at the end. */
.dialogue-panel[data-mode="speech"][data-line-count="three"] {
  padding: 1.04rem 1.86rem 1.14rem;
}
.dialogue-panel[data-mode="speech"][data-line-count="four"] {
  padding: 1.12rem 1.98rem 1.24rem;
}
.dialogue-panel[data-mode="speech"][data-line-count="three"] .line {
  font-size: clamp(.86rem, 1vw, .98rem);
  line-height: 1.08;
  max-width: 30ch;
}
.dialogue-panel[data-mode="speech"][data-line-count="four"] .line {
  font-size: clamp(.78rem, .94vw, .9rem);
  line-height: 1.07;
  max-width: 34ch;
}
.game-shell[data-step="cafeWalkPrompt"] .dialogue-panel[data-mode="speech"] .line,
.game-shell[data-step="cafeQuestions"] .dialogue-panel[data-mode="speech"] .line,
.game-shell[data-step="cafeWeakness"] .dialogue-panel[data-mode="speech"] .line,
.game-shell[data-step="cafeDistrust"] .dialogue-panel[data-mode="speech"] .line,
.game-shell[data-step="boardAssessment"] .dialogue-panel[data-mode="speech"] .line,
.game-shell[data-step="boardReturn"] .dialogue-panel[data-mode="speech"] .line,
.game-shell[data-step="boardTeamFeedback"] .dialogue-panel[data-mode="speech"] .line,
.game-shell[data-step="boardRankPrompt"] .dialogue-panel[data-mode="speech"] .line,
.game-shell[data-step="boardRankResponse"] .dialogue-panel[data-mode="speech"] .line,
.game-shell[data-step="boardNextStep"] .dialogue-panel[data-mode="speech"] .line,
.game-shell[data-step="boardHumanNote"] .dialogue-panel[data-mode="speech"] .line {
  font-size: clamp(.82rem, .98vw, .94rem);
  line-height: 1.08;
  max-width: 34ch;
}
.game-shell[data-step="elliePlacard"] .dialogue-panel[data-speaker-key="ellie"] .line,
.game-shell[data-step="camera"] .dialogue-panel[data-speaker-key="ellie"] .line {
  font-size: clamp(.78rem, .94vw, .9rem);
  line-height: 1.07;
}
.game-shell[data-step="elliePlacard"] .dialogue-panel[data-speaker-key="ellie"] .line {
  max-width: 30ch;
}
.game-shell[data-step="camera"] .dialogue-panel[data-speaker-key="ellie"] .line {
  max-width: 31ch;
}

/* Ellie stands on the right in the opening dock exchange; keep her bubbles off Sophia. */
.game-shell[data-step="ellieIntro"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellieFactual"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellieCharmed"] .dialogue-panel[data-speaker-key="ellie"] {
  left: auto;
  right: clamp(10rem, 18vw, 17rem);
  top: clamp(1rem, 3.5vh, 2.25rem);
  bottom: auto;
  width: auto;
  max-width: min(330px, calc(100% - 2rem));
  min-height: 108px;
  padding: 1.08rem 1.95rem 1.2rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png");
}

.game-shell[data-step="ellieIntro"] .dialogue-panel[data-speaker-key="ellie"] {
  max-width: min(260px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-right-placement-margin-fix.png");
}

.game-shell[data-step="elliePlayerResponse"] .dialogue-panel[data-speaker-key="ellie"] {
  left: auto;
  right: clamp(7rem, 13vw, 13rem);
  top: clamp(1rem, 3.5vh, 2.25rem);
  bottom: auto;
  width: 470px;
  max-width: min(470px, calc(100% - 2rem));
  min-height: 150px;
  padding: 1.18rem 2.22rem 1.34rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}

.game-shell[data-step="camera"] .dialogue-panel[data-speaker-key="ellie"] {
  left: clamp(8rem, 15vw, 14rem);
  right: auto;
  top: clamp(1.2rem, 4vh, 2.7rem);
  width: 315px;
  max-width: min(315px, calc(100% - 2rem));
  min-height: 126px;
  padding: 1rem 1.78rem 1.12rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}

.game-shell[data-step="camera"] .dialogue-panel[data-speaker-key="ellie"] .line {
  font-size: clamp(.72rem, .88vw, .84rem);
  line-height: 1.06;
  max-width: 28ch;
}

/* Historical QA pass 278: late-stage placement corrections.
   Superseded where necessary by the stabilization block at the end. */
.game-shell[data-step="officeDoor"] .dialogue-panel[data-mode="caption"],
.game-shell[data-step="cafeWalk"] .dialogue-panel[data-mode="caption"],
.game-shell[data-step="returnWalk"] .dialogue-panel[data-mode="caption"],
.game-shell[data-step="harbourtownTransition"] .dialogue-panel[data-mode="caption"],
.game-shell[data-step="returnOfficeTransition"] .dialogue-panel[data-mode="caption"],
.game-shell[data-step="marleneOfficeWalk"] .dialogue-panel[data-mode="caption"] {
  bottom: clamp(2.4rem, 6vh, 3.6rem);
}

.scene-hotspot,
.guided-hotspots .scene-hotspot,
.tour-hotspots .scene-hotspot,
.paint-halo,
.board-zoom-points button {
  box-shadow:
    0 0 0 2px rgba(247, 240, 224, .7),
    0 0 34px rgba(121, 164, 163, .68),
    inset 0 0 30px rgba(121, 164, 163, .22);
}

.scene-hotspot::before,
.paint-halo::before,
.board-zoom-points button::before {
  opacity: .9;
}

.desk-tool-hotspots [data-tool="camera"],
.desk-tool-hotspots [data-desk-tool="camera"] {
  left: 74%;
  top: 64%;
  width: 210px;
  height: 165px;
}

.desk-tool-hotspots [data-tool="phone"],
.desk-tool-hotspots [data-desk-tool="phone"] {
  left: 68%;
  top: 43%;
  width: 280px;
  height: 162px;
}

.game-shell[data-step="freshPaintQuestion"] .dialogue-panel[data-speaker-key="sophia"] {
  left: clamp(11.5rem, 22vw, 18rem);
  right: auto;
  top: clamp(2.6rem, 7vh, 4.8rem);
  width: 200px;
  max-width: min(200px, calc(100% - 2rem));
  min-height: 72px;
  padding: .92rem 1.58rem 1.02rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-left-placement-margin-fix.png");
}

.game-shell[data-step="camera"] .placard-halo-mode .paint-halo {
  /* Match the painted placard itself in the medium container plate. */
  left: 48.2%;
  top: 50.1%;
  width: min(12vw, 200px);
  height: min(7vw, 118px);
}

.game-shell[data-step="camera"] .dialogue-panel[data-speaker-key="ellie"] {
  left: clamp(4.5rem, 8vw, 7rem);
  right: auto;
  top: clamp(1.6rem, 4.6vh, 3rem);
  width: 335px;
  max-width: min(335px, calc(100% - 2rem));
  min-height: 0;
  height: 142px;
  padding: 1.02rem 1.82rem 1.12rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}

.game-shell[data-step="camera"] .dialogue-panel[data-speaker-key="ellie"] .line {
  font-size: clamp(.72rem, .88vw, .84rem);
  line-height: 1.06;
  max-width: 27ch;
}

.game-shell[data-step="marleneCallback"] .dialogue-panel[data-speaker-key="marlene"] {
  left: clamp(7rem, 15vw, 10rem);
  right: auto;
  top: clamp(2.1rem, 6vh, 4rem);
  width: 370px;
  max-width: min(370px, calc(100% - 2rem));
  min-height: 0;
  height: 166px;
  padding: 1.08rem 1.92rem 1.18rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}

.game-shell[data-step="marleneCallback"] .dialogue-panel[data-speaker-key="marlene"] .line {
  font-size: clamp(.72rem, .88vw, .84rem);
  line-height: 1.06;
  max-width: 29ch;
}

.game-shell[data-step="boardDebriefSolid"] .dialogue-panel[data-speaker-key="shane"] {
  left: clamp(.65rem, 1.6vw, 1.4rem);
  right: auto;
  top: clamp(.55rem, 1.8vh, 1.25rem);
  width: 235px;
  max-width: min(235px, calc(100% - 2rem));
  min-height: 72px;
  padding: .9rem 1.62rem 1rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-left-placement-margin-fix.png");
}

.game-shell[data-step="ellieIntro"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellieFactual"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellieCharmed"] .dialogue-panel[data-speaker-key="ellie"] {
  left: clamp(27rem, 39vw, 35rem);
  right: auto;
  top: clamp(1rem, 3.5vh, 2.25rem);
  width: auto;
  max-width: min(315px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-right-placement-margin-fix.png");
}

.game-shell[data-step="ellieIntro"] .dialogue-panel[data-speaker-key="ellie"] {
  max-width: min(245px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-right-placement-margin-fix.png");
}

.game-shell[data-step="elliePlayerResponse"] .dialogue-panel[data-speaker-key="ellie"] {
  left: clamp(25rem, 36vw, 32rem);
  right: auto;
  top: clamp(1rem, 3.5vh, 2.25rem);
  width: 440px;
  max-width: min(440px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}

/* Historical QA pass 285: keep Ellie's dock bubbles out of Sophia's face.
   Superseded where necessary by the stabilization block at the end. */
.game-shell[data-step="ellie"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="elliePlacard"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellieOdd"] .dialogue-panel[data-speaker-key="ellie"] {
  left: clamp(25rem, 36vw, 32rem);
  right: auto;
  top: clamp(1rem, 3.5vh, 2.35rem);
  width: 410px;
  max-width: min(410px, calc(100% - 2rem));
  min-height: 132px;
  height: auto;
  padding: 1.04rem 1.86rem 1.16rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}

.game-shell[data-step="elliePlacard"] .dialogue-panel[data-speaker-key="ellie"] {
  width: 400px;
  max-width: min(400px, calc(100% - 2rem));
  min-height: 138px;
}

.game-shell[data-step="ellie"] .dialogue-panel[data-speaker-key="ellie"] .line,
.game-shell[data-step="elliePlacard"] .dialogue-panel[data-speaker-key="ellie"] .line,
.game-shell[data-step="ellieOdd"] .dialogue-panel[data-speaker-key="ellie"] .line {
  font-size: clamp(.74rem, .9vw, .86rem);
  line-height: 1.06;
  max-width: 36ch;
}

.game-shell[data-step="elliePointsContainer"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="freshPaintConcern"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="seniorWorker"] .dialogue-panel[data-speaker-key="ellie"] {
  left: clamp(23rem, 34vw, 31rem);
  right: auto;
  top: clamp(1.1rem, 4vh, 2.6rem);
  max-width: min(390px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}

.game-shell[data-step="elliePointsContainer"] .dialogue-panel[data-speaker-key="ellie"] {
  width: 190px;
  max-width: min(190px, calc(100% - 2rem));
  min-height: 72px;
  height: auto;
  padding: .9rem 1.48rem 1rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-right-placement-margin-fix.png");
}

.game-shell[data-step="boardReturnSophia"] .dialogue-panel[data-speaker-key="sophia"] {
  right: clamp(7rem, 14vw, 12rem);
  left: auto;
  top: clamp(1.4rem, 4vh, 2.8rem);
  width: 315px;
  max-width: min(315px, calc(100% - 2rem));
  min-height: 82px;
  padding: .96rem 1.72rem 1.06rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-right-placement-margin-fix.png");
}

.game-shell[data-step="boardDebriefSolid"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="lateHousingSolidWork"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="officeSleepClosing"] .dialogue-panel[data-speaker-key="shane"] {
  left: clamp(18rem, 31vw, 28rem);
  right: auto;
  top: clamp(1rem, 3vh, 2.4rem);
  width: 285px;
  max-width: min(285px, calc(100% - 2rem));
  min-height: 82px;
  height: auto;
  padding: .96rem 1.72rem 1.06rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-left-placement-margin-fix.png");
}

.game-shell[data-step="lateHousingSolidWork"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="officeSleepClosing"] .dialogue-panel[data-speaker-key="shane"] {
  width: 400px;
  max-width: min(400px, calc(100% - 2rem));
  min-height: 134px;
  padding: 1.08rem 1.96rem 1.22rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
}

.game-shell[data-step="officeTourDesk"] .scene-image {
  object-fit: contain;
  object-position: center center;
  transform: none;
  background: #080b0a;
}

.game-shell[data-step="officeTourBoard"] .scene-image {
  object-fit: contain;
  object-position: center center;
  transform: none;
  background: #080b0a;
}

.game-shell[data-step="officeTourDesk"] .player-kit {
  display: none;
}

.game-shell[data-step="officeTourDesk"] .desk-tool-hotspots [data-tool="camera"] {
  left: 76%;
  top: 68%;
  width: 160px;
  height: 132px;
}

.game-shell[data-step="officeTourDesk"] .desk-tool-hotspots [data-tool="phone"] {
  left: 79%;
  top: 48%;
  width: 174px;
  height: 146px;
}

.game-shell[data-step="officeTourDesk"] .desk-tool-hotspots [data-tool="keys"] {
  left: 54%;
  top: 75%;
  width: 118px;
  height: 92px;
}

.game-shell[data-step="housingBrownstone"] .workspace {
  position: absolute;
  left: clamp(1rem, 4vw, 3rem);
  bottom: clamp(1rem, 4vh, 2rem);
  width: min(420px, calc(100% - 2rem));
  margin: 0;
  z-index: 4;
}

.game-shell[data-step="housingBrownstone"] .tour-caption {
  margin-top: 0;
}

.game-shell[data-step="housingPaperwork"] .scene-image,
.game-shell[data-step="housingPaperwork"][data-route="housing"][data-late-housing="false"] .scene-image,
.game-shell[data-step="housingPaperwork"][data-late-housing="true"] .scene-image {
  filter: saturate(.94) contrast(1.04) brightness(.82);
}

.game-shell[data-step="housingPaperwork"] .scene-wash,
.game-shell[data-step="housingPaperwork"][data-route="housing"][data-late-housing="false"] .scene-wash,
.game-shell[data-step="housingPaperwork"][data-late-housing="true"] .scene-wash {
  background:
    linear-gradient(90deg, rgba(8, 11, 10, .36), rgba(8, 11, 10, .04) 48%, rgba(8, 11, 10, .3)),
    linear-gradient(0deg, rgba(8, 11, 10, .34), rgba(8, 11, 10, .03) 52%, rgba(8, 11, 10, .16));
}

.game-shell[data-step="elliePlacard"] .dialogue-panel[data-speaker-key="ellie"] {
  width: 330px;
  max-width: min(330px, calc(100% - 2rem));
  min-height: 122px;
  padding: .94rem 1.58rem 1.04rem;
}

.game-shell[data-step="elliePlacard"] .dialogue-panel[data-speaker-key="ellie"] .line {
  font-size: clamp(.66rem, .82vw, .78rem);
  line-height: 1.04;
  max-width: 30ch;
}

.game-shell[data-step="ellieIntro"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellieFactual"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellieCharmed"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="elliePlayerResponse"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellie"] .dialogue-panel[data-speaker-key="ellie"] {
  left: clamp(14rem, 22vw, 20rem);
  right: auto;
  bottom: auto;
  top: clamp(.85rem, 2.8vh, 1.8rem);
  width: auto;
  max-width: min(310px, calc(100% - 2rem));
  min-height: 94px;
  padding: .86rem 1.54rem .98rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-right-placement-margin-fix.png");
}

.game-shell[data-step="ellieIntro"] .dialogue-panel[data-speaker-key="ellie"] {
  max-width: min(220px, calc(100% - 2rem));
  min-height: 82px;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-right-placement-margin-fix.png");
}

.game-shell[data-step="ellieIntro"] .dialogue-panel[data-speaker-key="ellie"] .line,
.game-shell[data-step="ellieFactual"] .dialogue-panel[data-speaker-key="ellie"] .line,
.game-shell[data-step="ellieCharmed"] .dialogue-panel[data-speaker-key="ellie"] .line {
  font-size: clamp(.72rem, .9vw, .84rem);
  line-height: 1.04;
  max-width: 22ch;
}

.game-shell[data-step="elliePlacard"] .dialogue-panel[data-speaker-key="ellie"] {
  left: clamp(18rem, 27vw, 24rem);
  bottom: auto;
  top: clamp(.8rem, 2.7vh, 1.7rem);
  width: 290px;
  max-width: min(290px, calc(100% - 2rem));
  min-height: 112px;
  padding: .82rem 1.32rem .94rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}

.game-shell[data-step="elliePlacard"] .dialogue-panel[data-speaker-key="ellie"] .line {
  font-size: clamp(.62rem, .76vw, .72rem);
  line-height: 1.02;
  max-width: 27ch;
}

.game-shell[data-step="ellieHandlingReminder"] .dialogue-panel[data-speaker-key="sophia"] {
  left: clamp(18rem, 28vw, 25rem);
  right: auto;
  bottom: auto;
  top: clamp(.9rem, 3vh, 1.9rem);
  width: 350px;
  max-width: min(350px, calc(100% - 2rem));
  min-height: 126px;
  height: auto;
  padding: .98rem 1.68rem 1.08rem;
  color: #17110d;
  background: transparent var(--bubble-sprite) center / 100% 100% no-repeat;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
}

.game-shell[data-step="ellieHandlingReminder"] .dialogue-panel[data-speaker-key="sophia"] .line {
  font-size: clamp(.72rem, .88vw, .84rem);
  line-height: 1.04;
  max-width: 31ch;
}

.game-shell[data-step="ellieOdd"] .dialogue-panel[data-speaker-key="ellie"] {
  left: clamp(19rem, 28vw, 25rem);
  right: auto;
  bottom: auto;
  top: clamp(.9rem, 3vh, 1.9rem);
  width: 340px;
  max-width: min(340px, calc(100% - 2rem));
  min-height: 120px;
  height: auto;
  padding: .96rem 1.62rem 1.06rem;
  color: #17110d;
  background: transparent var(--bubble-sprite) center / 100% 100% no-repeat;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}

.game-shell[data-step="ellieOdd"] .dialogue-panel[data-speaker-key="ellie"] .line {
  font-size: clamp(.72rem, .88vw, .84rem);
  line-height: 1.04;
  max-width: 30ch;
}

.game-shell[data-step="elliePointsContainer"] .dialogue-panel[data-speaker-key="ellie"] {
  left: clamp(14rem, 22vw, 20rem);
  right: auto;
  bottom: auto;
  top: clamp(.85rem, 2.8vh, 1.8rem);
  width: 180px;
  max-width: min(180px, calc(100% - 2rem));
  min-width: 0;
  min-height: 76px;
  height: 76px;
  padding: .76rem 1.18rem .86rem;
  color: #17110d;
  background: transparent var(--bubble-sprite) center / 100% 100% no-repeat;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-right-placement-margin-fix.png");
}

.game-shell[data-step="elliePointsContainer"] .dialogue-panel[data-speaker-key="ellie"] .line {
  font-size: clamp(.78rem, .96vw, .9rem);
  line-height: 1;
  max-width: 10ch;
}

.game-shell[data-step="camera"] .placard-halo-mode .paint-halo {
  left: 34%;
  top: 30%;
  width: min(38vw, 460px);
  height: min(17vw, 215px);
}

.game-shell[data-step="bedtimeBedEdge"] .workspace {
  position: absolute;
  left: clamp(1rem, 4vw, 3rem);
  bottom: clamp(7rem, 12vh, 9rem);
  width: min(520px, calc(100% - 2rem));
  margin: 0;
  z-index: 8;
}

.game-shell[data-step="ending"] .workspace {
  position: absolute;
  left: clamp(1rem, 4vw, 3rem);
  bottom: clamp(7rem, 12vh, 9rem);
  width: min(560px, calc(100% - 2rem));
  margin: 0;
  z-index: 8;
}

.player-kit {
  position: absolute;
  z-index: 22;
  right: clamp(.55rem, 1.4vw, 1rem);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: .65rem;
  pointer-events: none;
}

.player-kit[hidden] {
  display: none;
}

.player-kit-rail {
  display: grid;
  justify-self: end;
  width: max-content;
  gap: .42rem;
  padding: .45rem;
  border: 1px solid rgba(231, 224, 210, .24);
  border-radius: 999px;
  background: rgba(8, 11, 10, .64);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .36);
  backdrop-filter: blur(8px);
  pointer-events: auto;
}

.player-kit-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(231, 224, 210, .22);
  border-radius: 999px;
  color: rgba(231, 224, 210, .82);
  background: rgba(12, 16, 15, .78);
}

.player-kit-button:hover,
.player-kit-button:focus-visible,
.player-kit-button[aria-pressed="true"] {
  color: var(--paper);
  border-color: rgba(231, 224, 210, .52);
  background: rgba(21, 28, 26, .92);
}

.player-kit-button.is-active::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 5px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 0 0 2px rgba(8, 11, 10, .86);
}

.player-kit-button.is-locked {
  opacity: .48;
  cursor: not-allowed;
}

.player-kit-button svg {
  width: 21px;
  height: 21px;
}

.player-kit-button span {
  position: absolute;
  right: calc(100% + .55rem);
  top: 50%;
  transform: translateY(-50%);
  min-width: max-content;
  padding: .34rem .52rem;
  border: 1px solid rgba(231, 224, 210, .2);
  color: var(--paper);
  background: rgba(8, 11, 10, .86);
  font-size: .58rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
}

.player-kit-button:hover span,
.player-kit-button:focus-visible span {
  opacity: 1;
}

.player-kit-popover {
  width: 220px;
  justify-self: end;
  padding: .78rem .86rem;
  border: 1px solid rgba(231, 224, 210, .22);
  color: var(--paper-soft);
  background: rgba(8, 11, 10, .82);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .38);
  pointer-events: auto;
}

.player-kit-popover p {
  margin: 0;
}

.player-kit-popover .eyebrow {
  margin-bottom: .36rem;
  color: var(--blue);
}

.player-kit-popover.is-map {
  width: min(600px, calc(100vw - 5rem));
  max-height: min(72svh, 680px);
  overflow-y: auto;
}

/* The notebook grows throughout a playthrough; keep its ledger readable
   without allowing the floating tool surface to run below the viewport. */
.player-kit-popover.is-notebook {
  width: min(390px, calc(100vw - 5rem));
  max-height: min(72svh, 680px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.dock-rhythm-note {
  margin-top: clamp(13rem, 34vh, 21rem);
}

.player-kit-popover .tool-summary {
  color: var(--paper-soft);
  font-size: .74rem;
  line-height: 1.35;
}

.tool-ledger,
.tool-log {
  display: grid;
  gap: .55rem;
  margin: .72rem 0 0;
  padding: 0;
  list-style: none;
}

.tool-note-section + .tool-note-section {
  margin-top: .88rem;
}

.tool-note-section > .label {
  color: var(--blue);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tool-ledger li {
  padding-top: .55rem;
  border-top: 1px solid rgba(231, 224, 210, .14);
}

.tool-ledger strong,
.tool-ledger span {
  display: block;
}

.tool-message-replay {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
}

.tool-message-replay:hover strong,
.tool-message-replay:focus-visible strong {
  color: var(--blue);
}

.tool-message-replay:focus-visible {
  outline: 1px solid var(--blue);
  outline-offset: .25rem;
}

.tool-ledger strong {
  color: var(--paper);
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.tool-ledger span,
.tool-log li,
.tool-muted {
  color: var(--blue);
  font-size: .62rem;
  line-height: 1.3;
  letter-spacing: .04em;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.tool-ledger p {
  margin-top: .22rem;
  color: var(--paper-soft);
  font-family: var(--hand);
  font-size: .94rem;
  line-height: 1.22;
}

.tool-trail-intro {
  margin-top: .22rem !important;
  color: var(--paper-soft);
  font-size: .7rem;
  line-height: 1.3;
}

.tool-photo {
  margin: .7rem 0 0;
}

.tool-photo img {
  display: block;
  width: 100%;
  max-height: 132px;
  object-fit: cover;
  border: 1px solid rgba(231, 224, 210, .26);
}

.tool-photo figcaption {
  margin-top: .35rem;
  color: var(--paper-soft);
  font: .62rem/1.15 var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tool-map {
  position: relative;
  margin: .7rem 0 0;
  border: 1px solid rgba(231, 224, 210, .26);
  background: #080b0a;
}

.tool-map img {
  display: block;
  width: 100%;
  height: auto;
}

.map-legend {
  position: absolute;
  top: .48rem;
  left: .48rem;
  z-index: 3;
  display: grid;
  gap: .2rem;
  margin: 0;
  padding: .38rem .46rem;
  border: 1px solid rgba(231, 224, 210, .32);
  background: rgba(11, 14, 14, .88);
  color: var(--paper);
  font-size: .54rem;
  font-weight: 900;
  letter-spacing: .07em;
  line-height: 1.15;
  text-transform: uppercase;
}

.map-legend span {
  display: flex;
  align-items: center;
  gap: .32rem;
}

.map-legend i {
  display: inline-block;
  width: .52rem;
  height: .52rem;
  border: 1px solid #0d1211;
  border-radius: 50%;
}

.map-legend-current i {
  background: #ead28b;
  box-shadow: 0 0 0 1px rgba(234, 210, 139, .54);
}

.map-legend-selected i {
  border: 2px solid #75b7ae;
  border-radius: 1px;
  background: rgba(11, 14, 14, .7);
  transform: rotate(45deg);
}

.map-legend-lead i {
  border-color: #d77b69;
  background: rgba(215, 123, 105, .18);
  box-shadow: 0 0 0 1px rgba(215, 123, 105, .42);
}

.map-location-marker {
  position: absolute;
  left: var(--pin-x);
  top: var(--pin-y);
  z-index: 2;
  width: 17px;
  height: 17px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.map-location-marker-core {
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid #0d1211;
  border-radius: 50%;
  background: rgba(231, 224, 210, .56);
  box-shadow: 0 0 0 1px rgba(231, 224, 210, .32);
}

.map-location-marker.is-known .map-location-marker-core {
  background: #b6a06a;
}

.map-location-marker.is-unlocked .map-location-marker-core,
.map-location-marker.is-visited .map-location-marker-core {
  background: #6e9783;
}

.map-location-marker.is-heard .map-location-marker-core {
  background: #7188a8;
}

.map-location-marker.is-unexplored {
  opacity: .28;
}

.map-location-marker.is-current .map-location-marker-core {
  background: #ead28b;
  box-shadow: 0 0 0 2px rgba(16, 19, 18, .92), 0 0 0 4px rgba(234, 210, 139, .78), 0 0 20px rgba(234, 210, 139, .76);
}

.map-location-marker.is-lead::after,
.map-location-marker.is-focused::before {
  position: absolute;
  content: "";
  pointer-events: none;
}

.map-location-marker.is-lead::after {
  inset: -6px;
  border: 1px solid rgba(215, 123, 105, .96);
  border-radius: 50%;
  box-shadow: 0 0 13px rgba(170, 58, 45, .72);
}

.map-location-marker.is-focused::before {
  inset: -5px;
  border: 2px solid #75b7ae;
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(117, 183, 174, .68);
  transform: rotate(45deg);
}

.map-location-marker.is-current.is-focused::before {
  border-radius: 50%;
  transform: none;
}

.map-location-marker-label {
  position: absolute;
  left: 50%;
  z-index: 4;
  max-width: 118px;
  padding: .2rem .32rem;
  border: 1px solid rgba(231, 224, 210, .44);
  background: rgba(11, 14, 14, .9);
  color: var(--paper);
  font-size: .52rem;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1.12;
  pointer-events: none;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
  white-space: nowrap;
}

.map-location-marker:not(.is-upper-map) .map-location-marker-label {
  bottom: calc(100% + 7px);
}

.map-location-marker.is-upper-map .map-location-marker-label {
  top: calc(100% + 7px);
}

.map-location-marker.is-current .map-location-marker-label {
  color: #f5e6b7;
}

.map-location-marker.is-focused .map-location-marker-label {
  border-color: rgba(117, 183, 174, .72);
  color: #aee0d8;
}

.map-location-marker.is-lead:not(.is-focused) .map-location-marker-label {
  border-color: rgba(215, 123, 105, .72);
  color: #f0b8ad;
}

.map-location-marker.is-focused .map-location-marker-core,
.map-location-marker:hover .map-location-marker-core,
.map-location-marker:focus-visible .map-location-marker-core {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}

.map-register {
  display: grid;
  gap: .32rem;
  margin-top: .68rem;
}

.map-register .label {
  margin: 0 0 .08rem;
}

.map-position-readout {
  display: grid;
  gap: .24rem;
  padding: .5rem .56rem;
  border: 1px solid rgba(231, 224, 210, .18);
  background: rgba(231, 224, 210, .045);
}

.map-position-readout p {
  display: grid;
  grid-template-columns: 4.8rem minmax(0, 1fr);
  gap: .42rem;
  margin: 0;
  color: var(--paper-soft);
  font-size: .69rem;
  line-height: 1.25;
}

.map-position-readout strong {
  color: var(--paper);
  font-family: var(--hand);
  font-size: .88rem;
  font-weight: 400;
}

.map-position-key {
  align-self: start;
  color: var(--blue);
  font-size: .54rem;
  font-weight: 900;
  letter-spacing: .07em;
  line-height: 1.25;
  text-transform: uppercase;
}

.map-position-key.is-current {
  color: #ead28b;
}

.map-position-key.is-selected {
  color: #aee0d8;
}

.map-register-row {
  margin: 0;
  color: var(--paper-soft);
  font-size: .74rem;
}

.map-register-list {
  display: grid;
  gap: .24rem;
  max-height: 132px;
  overflow-y: auto;
  padding-right: .18rem;
}

.map-register-row span {
  display: inline-block;
  min-width: 3.7rem;
  margin-right: .48rem;
  color: var(--blue);
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.map-register-row.is-current {
  color: var(--paper);
}

.map-register-row.is-current span {
  color: #ead28b;
}

.map-register-row.is-lead span,
.map-route-lead span {
  color: #d77b69;
}

.map-route-lead {
  margin: 0;
  color: var(--paper);
  font-size: .74rem;
}

.map-route-lead span {
  display: inline-block;
  min-width: 4.5rem;
  margin-right: .48rem;
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.map-location-detail {
  display: grid;
  gap: .22rem;
  padding: .6rem;
  border-left: 2px solid var(--blue);
  background: rgba(231, 224, 210, .05);
}

.map-location-detail p {
  margin: 0;
  color: var(--paper-soft);
  font-size: .74rem;
  line-height: 1.3;
}

.map-location-detail .eyebrow {
  color: var(--blue);
  font-size: .58rem;
}

.map-location-lead {
  padding-top: .32rem;
  border-top: 1px solid rgba(215, 123, 105, .32);
  color: #ead7d0 !important;
}

.map-location-detail strong {
  color: var(--paper);
  font-family: var(--hand);
  font-size: 1rem;
}

.game-shell[data-step="introVideo"],
.game-shell[data-step="feedback"] {
  grid-template-columns: minmax(0, 1fr);
}

.game-shell[data-step="introVideo"] .case-state,
.game-shell[data-step="feedback"] .case-state {
  display: none;
}

.game-shell[data-step="introVideo"] .scene-image,
.game-shell[data-step="orientationRule"] .scene-image,
.game-shell[data-step="feedback"] .scene-image {
  filter: saturate(.95) contrast(1.08) brightness(.9);
}

.game-shell[data-step="introVideo"] .scene-wash,
.game-shell[data-step="orientationRule"] .scene-wash,
.game-shell[data-step="feedback"] .scene-wash {
  background:
    linear-gradient(90deg, rgba(8, 11, 10, .74), rgba(8, 11, 10, .24) 50%, rgba(8, 11, 10, .74)),
    linear-gradient(0deg, rgba(8, 11, 10, .76), rgba(8, 11, 10, .14) 52%, rgba(8, 11, 10, .46));
}

.game-shell[data-step="orientationRule"] .scene-image {
  filter: grayscale(1) contrast(1.16) brightness(.72);
}

.game-shell[data-step="orientationRule"] .scene-wash {
  background:
    linear-gradient(90deg, rgba(3, 5, 4, .84), rgba(3, 5, 4, .4) 50%, rgba(3, 5, 4, .84)),
    linear-gradient(0deg, rgba(3, 5, 4, .86), rgba(3, 5, 4, .28) 52%, rgba(3, 5, 4, .58));
}

.game-shell[data-step="introVideo"] .workspace,
.game-shell[data-step="orientationRule"] .workspace,
.game-shell[data-step="feedback"] .workspace {
  display: grid;
  place-items: center;
  min-height: calc(100svh - 9rem);
  width: min(980px, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2.5rem) 0 7rem;
}

.intro-video-card,
.field-rule-card,
.playtest-feedback {
  width: min(920px, 100%);
  border: 1px solid rgba(231, 224, 210, .28);
  background: rgba(8, 11, 10, .82);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .48);
}

.intro-video-card {
  padding: clamp(1.2rem, 3vw, 2rem);
}

.field-rule-card {
  width: min(720px, 100%);
  padding: clamp(1.2rem, 3vw, 2.2rem);
}

.intro-video-card h1,
.field-rule-card h1,
.playtest-feedback h2 {
  margin: 0 0 1rem;
  font-family: var(--display);
  text-transform: uppercase;
}

.intro-video-card h1 {
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: .86;
}

.field-rule-card h1 {
  max-width: 17ch;
  font-size: clamp(2.5rem, 5vw, 4.65rem);
  line-height: .88;
}

.intro-video-card p,
.field-rule-card p,
.playtest-feedback p {
  max-width: 780px;
  color: var(--paper-soft);
}

.field-rule-intro {
  margin: 1rem 0 1.45rem;
  color: var(--paper) !important;
  font-size: clamp(1rem, 1.8vw, 1.16rem);
}

.field-rule-list {
  display: grid;
  gap: .85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.field-rule-list li {
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr);
  gap: .85rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(231, 224, 210, .18);
}

.field-rule-number {
  color: var(--blue);
  font: 900 .76rem/1 var(--display);
  letter-spacing: .14em;
}

.field-rule-list h2 {
  margin: 0;
  color: var(--paper);
  font: 800 clamp(1rem, 2vw, 1.18rem)/1.05 var(--display);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.field-rule-list p {
  margin: .35rem 0 0;
}

.field-rule-action {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.35rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(231, 224, 210, .18);
}

@media (min-width: 760px) {
  .field-rule-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .field-rule-list li {
    grid-template-columns: 1fr;
    gap: .5rem;
  }
}

.intro-video-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(231, 224, 210, .24);
  background: #050706;
  aspect-ratio: 16 / 9;
}

.intro-video-frame img,
.intro-video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.intro-video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(5, 7, 7, .52);
  pointer-events: none;
  transition: opacity .22s ease;
}

.intro-video-overlay.is-playing {
  opacity: 0;
}

.game-shell[data-step="introVideo"] .dialogue-actions,
.game-shell[data-step="orientationRule"] .dialogue-actions,
.game-shell[data-step="feedback"] .dialogue-actions {
  justify-content: center;
}

.playtest-feedback {
  padding: clamp(1.2rem, 3vw, 2.2rem);
}

.rating-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .85rem;
  margin: 1.4rem 0;
}

.perspective-fields {
  margin: 1.2rem 0 0;
  padding: 1rem;
  border: 1px solid rgba(231, 224, 210, .22);
  background: rgba(231, 224, 210, .05);
}

.perspective-fields legend {
  padding: 0 .45rem;
  color: var(--paper);
  font-family: var(--display);
  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.perspective-fields legend span {
  color: var(--paper-muted);
  font-family: var(--body);
  font-size: .68rem;
}

.perspective-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}

.rating-grid label,
.perspective-grid label,
.feedback-text,
.feedback-progress,
.feedback-email {
  display: grid;
  gap: .4rem;
}

.rating-grid span,
.perspective-grid span,
.feedback-text span,
.feedback-progress span,
.feedback-email span {
  color: var(--paper);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.rating-grid select,
.perspective-grid select,
.feedback-progress select,
.feedback-text textarea,
.feedback-email input {
  width: 100%;
  border: 1px solid rgba(231, 224, 210, .28);
  color: var(--paper);
  background: rgba(8, 11, 10, .74);
}

.rating-grid select,
.perspective-grid select {
  padding: .72rem .65rem;
}

.feedback-progress {
  margin-top: .85rem;
}

.feedback-progress select {
  padding: .72rem .65rem;
}

.feedback-text textarea,
.feedback-email input {
  padding: .85rem .9rem;
}

.feedback-text textarea {
  resize: vertical;
}

.feedback-text.compact {
  margin-top: .85rem;
}

.feedback-email {
  margin-top: .85rem;
}

.feedback-privacy {
  margin: .8rem 0 0;
  color: var(--paper-muted) !important;
  font-size: .82rem;
  line-height: 1.4;
}

.feedback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.2rem;
}

.feedback-status {
  min-height: 1.4em;
  margin: 1rem 0 0;
  color: var(--paper);
}

@media (max-width: 760px) {
  .player-kit {
    position: fixed;
    inset: auto .75rem calc(4.2rem + env(safe-area-inset-bottom)) .75rem;
    transform: none;
    justify-items: center;
  }

  .player-kit-rail {
    grid-auto-flow: column;
    grid-auto-columns: 42px;
    border-radius: 999px;
  }

  .player-kit-button {
    width: 42px;
    height: 42px;
  }

  .player-kit-button span {
    display: none;
  }

  .player-kit-popover {
    width: min(320px, calc(100vw - 1.5rem));
    justify-self: center;
    text-align: center;
    max-height: min(46svh, 320px);
    overflow-y: auto;
  }

  .player-kit-popover.is-map {
    width: min(640px, calc(100vw - 1.5rem));
  }

  .player-kit-popover.is-notebook {
    width: min(360px, calc(100vw - 1.5rem));
    text-align: left;
  }

  .rating-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .intro-video-card h1 {
    font-size: clamp(2.6rem, 15vw, 4.4rem);
  }
}

/* Final desktop placement pass for the current Cafe Origin and Ellie plates.
   These overrides live last so older prototype experiments cannot pull tails
   back onto the wrong character. */
@media (min-width: 761px) {
  /* Sven works at the right-side counter. Keep his bubbles in the open window /
     espresso space and use a down-right tail that resolves back to him. */
  .game-shell[data-step="cafeSvenCoffeeQuestion"] .dialogue-panel[data-speaker-key="sven"],
  .game-shell[data-step="cafeSvenCoffeeReply"] .dialogue-panel[data-speaker-key="sven"],
  .game-shell[data-step="cafeSvenBeans"] .dialogue-panel[data-speaker-key="sven"],
  .game-shell[data-step="cafeSvenFeature"] .dialogue-panel[data-speaker-key="sven"],
  .game-shell[data-step="cafeSvenRecommendation"] .dialogue-panel[data-speaker-key="sven"],
  .game-shell[data-step="cafeSvenRecommendationSven"] .dialogue-panel[data-speaker-key="sven"] {
    left: clamp(29rem, 42vw, 34rem);
    right: auto;
    top: clamp(.35rem, 1vh, .7rem);
    bottom: auto;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
  }

  .game-shell[data-step="cafeSvenCoffeeQuestion"] .dialogue-panel[data-speaker-key="sven"],
  .game-shell[data-step="cafeSvenBeans"] .dialogue-panel[data-speaker-key="sven"],
  .game-shell[data-step="cafeSvenRecommendationSven"] .dialogue-panel[data-speaker-key="sven"],
  .game-shell[data-step="cafeSvenCoffeeReply"] .dialogue-panel[data-speaker-key="sven"][data-line-count="one"] {
    width: 250px;
    height: 82px;
    min-height: 82px;
    padding: .7rem 1.36rem .86rem;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-right-placement-margin-fix.png");
  }

  .game-shell[data-step="cafeSvenCoffeeReply"] .dialogue-panel[data-speaker-key="sven"][data-line-count="two"] {
    width: 294px;
    height: 116px;
    min-height: 116px;
    padding: .8rem 1.48rem .96rem;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png");
  }

  .game-shell[data-step="cafeOriginInterior"] .dialogue-panel[data-speaker-key="sophia"],
  .game-shell[data-step="cafeSophiaSvenTease"] .dialogue-panel[data-speaker-key="sophia"] {
    left: clamp(17rem, 27vw, 22rem);
    top: clamp(7rem, 13vh, 9rem);
    width: 330px;
    min-height: 116px;
    padding: 1.04rem 1.78rem 1.14rem;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
  }

  .game-shell[data-step="cafeSophiaBehave"] .dialogue-panel[data-speaker-key="sophia"] {
    left: clamp(17rem, 27vw, 22rem);
    top: clamp(7rem, 13vh, 9rem);
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-left-placement-margin-fix.png");
  }

  .game-shell[data-step="ellieIntro"] .dialogue-panel[data-speaker-key="ellie"],
  .game-shell[data-step="ellieFactual"] .dialogue-panel[data-speaker-key="ellie"],
  .game-shell[data-step="ellieCharmed"] .dialogue-panel[data-speaker-key="ellie"],
  .game-shell[data-step="elliePlayerResponse"] .dialogue-panel[data-speaker-key="ellie"],
  .game-shell[data-step="ellie"] .dialogue-panel[data-speaker-key="ellie"],
  .game-shell[data-step="ellieOdd"] .dialogue-panel[data-speaker-key="ellie"] {
    left: clamp(22rem, 31vw, 26rem);
    right: auto;
    top: clamp(3.5rem, 9vh, 5rem);
    bottom: auto;
    width: 300px;
    max-width: min(300px, calc(100% - 2rem));
    min-height: 100px;
    padding: .86rem 1.42rem .98rem;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-right-placement-margin-fix.png");
  }

  .game-shell[data-step="ellieIntro"] .dialogue-panel[data-speaker-key="ellie"] {
    width: 205px;
    max-width: min(205px, calc(100% - 2rem));
    min-height: 82px;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-right-placement-margin-fix.png");
  }

  .game-shell[data-step="ellieFactual"] .dialogue-panel[data-speaker-key="ellie"],
  .game-shell[data-step="ellieCharmed"] .dialogue-panel[data-speaker-key="ellie"] {
    width: 300px;
    max-width: min(300px, calc(100% - 2rem));
  }

  .game-shell[data-step="elliePlayerResponse"] .dialogue-panel[data-speaker-key="ellie"] {
    width: 320px;
    max-width: min(320px, calc(100% - 2rem));
    min-height: 132px;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
  }

  .game-shell[data-step="marleneCallback"] .dialogue-panel[data-speaker-key="marlene"] {
    /* Leave Marlene's face clear in the callback composite. */
    left: clamp(10rem, 16vw, 13rem);
    right: auto;
    top: clamp(3rem, 9vh, 5rem);
    width: 370px;
    max-width: min(370px, calc(100% - 2rem));
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
  }

  .game-shell[data-step="casePath"] .dialogue-panel[data-speaker-key="shane"] {
    left: clamp(12rem, 17vw, 16rem);
    right: auto;
    top: clamp(9rem, 19vh, 12rem);
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
  }

  .game-shell[data-step="boardReturn"] .dialogue-panel[data-speaker-key="shane"] {
    left: clamp(10rem, 15vw, 12rem);
    right: auto;
    top: clamp(8rem, 15vh, 10rem);
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-left-placement-margin-fix.png");
  }

  .game-shell[data-step="boardReturnSophia"] .dialogue-panel[data-speaker-key="sophia"] {
    right: clamp(7rem, 14vw, 12rem);
    left: auto;
    top: clamp(6rem, 12vh, 8rem);
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-right-placement-margin-fix.png");
  }

  /* Sophia owns the first "Fresh paint?" beat. Keep it between the women
     but let the tail return to Sophia's left-side position, not Ellie's. */
  .game-shell[data-step="freshPaintQuestion"] .dialogue-panel[data-speaker-key="sophia"] {
    left: clamp(5rem, 10vw, 8rem);
    right: auto;
    top: clamp(2.6rem, 7vh, 4.8rem);
    width: 200px;
    max-width: min(200px, calc(100% - 2rem));
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-left-placement-margin-fix.png");
  }
}

/* On narrow screens, the board-reveal speech rules previously retained their
   desktop top offsets while the mobile shell also set a bottom offset. That
   stretched a short balloon over most of the board. Keep these compact and
   anchored over the foreground desk instead. */
@media (max-width: 680px) {
  .game-shell[data-step="boardShared"] .dialogue-panel[data-mode="speech"],
  .game-shell[data-step="boardTheoryDie"] .dialogue-panel[data-mode="speech"],
  .game-shell[data-step="boardTheoryImprove"] .dialogue-panel[data-mode="speech"],
  .game-shell[data-step="boardTheorySometimes"] .dialogue-panel[data-mode="speech"],
  .game-shell[data-step="boardAuthorRule"] .dialogue-panel[data-mode="speech"],
  .game-shell[data-step="boardDecorating"] .dialogue-panel[data-mode="speech"],
  .game-shell[data-step="boardDecoratingPays"] .dialogue-panel[data-mode="speech"],
  .game-shell[data-step="boardDecoratingNo"] .dialogue-panel[data-mode="speech"],
  .game-shell[data-step="boardDecoratingShould"] .dialogue-panel[data-mode="speech"] {
    top: auto !important;
    right: auto !important;
    bottom: 4.65rem;
    left: 50% !important;
    width: min(286px, calc(100% - 2rem)) !important;
    max-width: min(286px, calc(100% - 2rem)) !important;
    height: auto !important;
    min-height: 72px;
    grid-template-rows: auto !important;
    transform: translateX(-50%);
  }

  .game-shell[data-step="boardShared"] .dialogue-panel[data-mode="speech"] {
    top: 5rem !important;
    right: auto !important;
    bottom: auto;
    left: 1rem !important;
    width: min(230px, calc(100% - 2rem)) !important;
    max-width: min(230px, calc(100% - 2rem)) !important;
    min-height: 68px;
    padding: .64rem .76rem .8rem;
    transform: none;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-right-placement-margin-fix.png");
  }
}

/* Day One speech-bubble audit authority.
   Every positioned character balloon uses the same interior rhythm by authored
   line count. Scene rules may choose a location, width, and illustrated tail,
   but they must not squeeze one speaker's copy against the edge while another
   receives a different margin. This remains last so it is the sole formatting
   authority over historical placement experiments. */
@media (min-width: 761px) {
  .game-shell .dialogue-panel[data-mode="speech"] {
    box-sizing: border-box;
    align-content: center;
    justify-items: center;
    text-align: center;
  }

  .game-shell .dialogue-panel[data-mode="speech"] .line {
    max-width: calc(100% - 3rem);
    line-height: 1.22;
    overflow: visible;
  }

  .game-shell .dialogue-panel[data-mode="speech"][data-line-count="short"] {
    min-height: 60px;
    padding: .66rem 1.14rem .84rem;
  }

  .game-shell .dialogue-panel[data-mode="speech"][data-line-count="one"] {
    min-height: 68px;
    padding: .74rem 1.38rem .94rem;
  }

  .game-shell .dialogue-panel[data-mode="speech"][data-line-count="two"] {
    min-height: 82px;
    padding: .86rem 1.52rem 1.02rem;
  }

  .game-shell .dialogue-panel[data-mode="speech"][data-line-count="three"] {
    min-height: 110px;
    padding: 1rem 1.72rem 1.1rem;
  }

  .game-shell .dialogue-panel[data-mode="speech"][data-line-count="four"] {
    min-height: 128px;
    padding: 1.06rem 1.78rem 1.16rem;
  }
}

/* Follow-on desk inspection uses the same art and geometry as the first pass.
   Earlier rules accidentally left its key target at an obsolete camera-adjacent
   coordinate, so one click could make the keys behave like the camera. */
@media (min-width: 761px) {
  .game-shell[data-step="toolInspect"] .desk-tool-hotspots [data-tool="keys"] {
    left: 48.5% !important;
    top: 80% !important;
    width: 8.5% !important;
    height: 11% !important;
    z-index: 4;
    --desk-cue-x: 50%;
    --desk-cue-y: 38%;
  }

  .game-shell[data-step="toolInspect"] .desk-tool-hotspots [data-tool="camera"] {
    left: 15.5% !important;
    top: 81% !important;
    width: 9.5% !important;
    height: 14% !important;
    --desk-cue-x: 82%;
    --desk-cue-y: 12%;
  }

  .game-shell[data-step="toolInspect"] .desk-tool-hotspots [data-tool="files"] {
    left: 1.2% !important;
    top: 70% !important;
    width: 20% !important;
    height: 25% !important;
    --desk-cue-x: 88%;
    --desk-cue-y: 13%;
  }

  .game-shell[data-step="toolInspect"] .desk-tool-hotspots [data-tool="files"]:not(.done)::before {
    width: 20px !important;
    height: 20px !important;
    opacity: .86 !important;
    filter: drop-shadow(0 0 5px rgba(240, 192, 90, .72));
  }
}

/* Final evidence-table authority. Both the first pass and the after-click
   field-note pass use the same workstation, daylight, and compact discovery
   points. Neither may fall back to the old dark wash or a hidden cue state. */
@media (min-width: 761px) {
  .game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .scene-image {
    filter: saturate(1) contrast(.99) brightness(1.44) !important;
  }

  .game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .scene-wash {
    background: transparent !important;
  }

  .game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots [data-evidence-tool="folders"] {
    left: 54.5% !important;
    top: 49% !important;
    width: 18.5% !important;
    height: 29.5% !important;
    --evidence-cue-x: 50%;
    --evidence-cue-y: 50%;
  }

  .game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots [data-evidence-tool="bags"] {
    left: 25.5% !important;
    top: 55% !important;
    width: 29.5% !important;
    height: 31% !important;
    --evidence-cue-x: 50%;
    --evidence-cue-y: 50%;
  }

  .game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots [data-evidence-tool="gloves"] {
    left: 32.5% !important;
    top: 42.5% !important;
    width: 21.5% !important;
    height: 20% !important;
    --evidence-cue-x: 50%;
    --evidence-cue-y: 50%;
  }

  .game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots [data-evidence-tool="labeler"] {
    left: 76.5% !important;
    top: 42% !important;
    width: 16% !important;
    height: 28% !important;
    --evidence-cue-x: 50%;
    --evidence-cue-y: 50%;
  }

  .game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots [data-evidence-tool]:not(.done)::before {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    opacity: .86 !important;
    background: radial-gradient(circle, rgba(255, 249, 220, .98) 0 12%, rgba(245, 205, 121, .8) 25%, rgba(245, 205, 121, .18) 54%, transparent 74%) !important;
    filter: drop-shadow(0 0 5px rgba(240, 192, 90, .72)) !important;
  }
}

/* The filing-cabinet warning needs three balanced lines in the narrow lane
   beside Shane; this final authority prevents shared-office rules from
   squeezing its last line against the bubble edge. */
@media (min-width: 761px) {
  .game-shell[data-step="cabinetBanter"] .dialogue-panel[data-speaker-key="shane"] {
    width: 326px !important;
    max-width: min(326px, calc(100% - 2rem)) !important;
    min-height: 110px !important;
    padding: .86rem 1.05rem 1rem !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png") !important;
  }

  .game-shell[data-step="cabinetBanter"] .dialogue-panel[data-speaker-key="shane"] .line {
    max-width: 31ch;
    line-height: 1.12;
  }
}

/* All shared-office dialogue after Cafe Origin uses the same rainy-day daylight
   value range as the return trip. Earlier scene washes made the identical A10
   plate look like a different time of day from one beat to the next. */
.game-shell[data-scene-family="shared-office"] .scene-image {
  filter: saturate(1) contrast(1) brightness(1.4) !important;
}

.game-shell[data-scene-family="shared-office"] .scene-wash {
  background: transparent !important;
}

/* Sophia is visible at the Harbourtown public edge. Her post-answer reply
   belongs in a real bubble over the open water, with a tail returning right. */
@media (min-width: 761px) {
  .game-shell[data-step="harbourtownPatience"] .dialogue-panel[data-speaker-key="sophia"] {
    left: clamp(2rem, 7vw, 6rem) !important;
    right: auto !important;
    top: clamp(1.3rem, 4vh, 2.6rem) !important;
    width: 330px !important;
    max-width: min(330px, calc(100% - 2rem));
    min-height: 104px;
    padding: .92rem 1.48rem 1.04rem;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png") !important;
  }
}

/* Final Cafe Origin dialogue clearance. Sven's earlier lane began inside his
   own headroom; keep every counter line in the open window area and point its
   illustrated right-side tail back toward him. Sophia's short reply needs the
   compact one-line bubble rather than inheriting a wider multi-line shape. */
@media (min-width: 761px) {
  .game-shell:is(
    [data-step="cafeSvenCoffeeQuestion"],
    [data-step="cafeSvenCoffeeReply"],
    [data-step="cafeSvenBeans"],
    [data-step="cafeSvenFeature"],
    [data-step="cafeSvenRecommendation"],
    [data-step="cafeSvenRecommendationSven"]
  ) .dialogue-panel[data-speaker-key="sven"] {
    left: clamp(16rem, 27vw, 22rem) !important;
    right: auto !important;
    top: clamp(.35rem, 1vh, .7rem) !important;
  }

  .game-shell[data-step="cafeSophiaBehave"] .dialogue-panel[data-speaker-key="sophia"] {
    width: 190px !important;
    max-width: min(190px, calc(100% - 2rem)) !important;
    min-height: 68px !important;
    height: 68px !important;
    padding: .74rem 1.38rem .94rem !important;
  }

  .game-shell[data-step="cafeSophiaBehave"] .dialogue-panel[data-speaker-key="sophia"] .line {
    white-space: nowrap;
  }
}

/* Desk affordance recovery: an uninspected object keeps one restrained warm
   glint visible at rest, then brightens under the pointer. This is deliberately
   a pinpoint cue, never the retired halo or a guessed object outline. */
.game-shell[data-step="officeTourDesk"] .desk-tool-hotspots [data-tool]:not(.done)::before,
.game-shell[data-step="tools"] .desk-tool-hotspots [data-tool]:not(.done)::before,
.game-shell[data-step="inspectClose"] .desk-tool-hotspots [data-desk-tool]:not(.done)::before {
  display: block !important;
  opacity: .58 !important;
  filter: drop-shadow(0 0 3px rgba(240, 192, 90, .52));
}

.game-shell[data-step="officeTourDesk"] .desk-tool-hotspots [data-tool]:not(.done):hover::before,
.game-shell[data-step="officeTourDesk"] .desk-tool-hotspots [data-tool]:not(.done):focus-visible::before,
.game-shell[data-step="tools"] .desk-tool-hotspots [data-tool]:not(.done):hover::before,
.game-shell[data-step="tools"] .desk-tool-hotspots [data-tool]:not(.done):focus-visible::before,
.game-shell[data-step="inspectClose"] .desk-tool-hotspots [data-desk-tool]:not(.done):hover::before,
.game-shell[data-step="inspectClose"] .desk-tool-hotspots [data-desk-tool]:not(.done):focus-visible::before {
  opacity: 1 !important;
  filter: drop-shadow(0 0 6px rgba(240, 192, 90, .82));
}

/* Evidence-table affordance recovery. Older tour rules separately hid the
   trace-kit halo and its cue; this final authority keeps the entire hit field
   invisible and supplies the same small, physically neutral glint as the desk. */
.game-shell[data-step="evidenceRule"] .evidence-tool-hotspots .scene-hotspot,
.game-shell[data-step="evidenceRule"] .evidence-tool-hotspots .scene-hotspot:hover,
.game-shell[data-step="evidenceRule"] .evidence-tool-hotspots .scene-hotspot:focus-visible,
.game-shell[data-step="evidenceInspect"] .evidence-tool-hotspots .scene-hotspot,
.game-shell[data-step="evidenceInspect"] .evidence-tool-hotspots .scene-hotspot:hover,
.game-shell[data-step="evidenceInspect"] .evidence-tool-hotspots .scene-hotspot:focus-visible {
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

.game-shell[data-step="evidenceRule"] .evidence-tool-hotspots .scene-hotspot::after,
.game-shell[data-step="evidenceInspect"] .evidence-tool-hotspots .scene-hotspot::after {
  display: none !important;
}

.game-shell[data-step="evidenceRule"] .evidence-tool-hotspots .scene-hotspot::before,
.game-shell[data-step="evidenceInspect"] .evidence-tool-hotspots .scene-hotspot::before {
  display: block !important;
  inset: auto !important;
  left: var(--evidence-cue-x, 88%) !important;
  top: var(--evidence-cue-y, 12%) !important;
  width: 14px !important;
  height: 14px !important;
  border: 0 !important;
  border-radius: 50% !important;
  clip-path: none !important;
  background: radial-gradient(circle, rgba(255, 249, 220, .98) 0 12%, rgba(245, 205, 121, .78) 25%, rgba(245, 205, 121, .16) 53%, transparent 73%) !important;
  box-shadow: none !important;
  pointer-events: none !important;
  transform: translate(-50%, -50%) !important;
}

.game-shell[data-step="evidenceRule"] .evidence-tool-hotspots .scene-hotspot:not(.done)::before,
.game-shell[data-step="evidenceInspect"] .evidence-tool-hotspots .scene-hotspot:not(.done)::before {
  opacity: .58 !important;
  filter: drop-shadow(0 0 3px rgba(240, 192, 90, .52)) !important;
}

.game-shell[data-step="evidenceRule"] .evidence-tool-hotspots .scene-hotspot:not(.done):hover::before,
.game-shell[data-step="evidenceRule"] .evidence-tool-hotspots .scene-hotspot:not(.done):focus-visible::before,
.game-shell[data-step="evidenceInspect"] .evidence-tool-hotspots .scene-hotspot:not(.done):hover::before,
.game-shell[data-step="evidenceInspect"] .evidence-tool-hotspots .scene-hotspot:not(.done):focus-visible::before {
  opacity: 1 !important;
  filter: drop-shadow(0 0 6px rgba(240, 192, 90, .82)) !important;
}

/* Coffee interruption: this is Sophia's only three-line response on the
   full-office plate. Keep it out of her head space and use the matching deep
   illustrated bubble so the final line never crosses its lower edge. */
@media (min-width: 761px) {
  .game-shell[data-step="coffeeEvidenceRoom"] .dialogue-panel[data-speaker-key="sophia"] {
    left: 46% !important;
    right: auto !important;
    top: clamp(2.25rem, 5vh, 3.5rem) !important;
    width: min(310px, calc(100% - 2rem)) !important;
    max-width: min(310px, calc(100% - 2rem)) !important;
    min-height: 124px !important;
    padding: .9rem 1.02rem 1.08rem !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png") !important;
  }

  /* Keep Shane's filing-cabinet punchline in the same rainy-day exposure as
     the lines directly before it. This scene shares the dialogue plate, so a
     dark local treatment would read as an accidental lighting jump. */
  .game-shell[data-step="cabinetBetrayal"] .scene-image {
    filter: saturate(1) contrast(.99) brightness(1.44) !important;
  }

  .game-shell[data-step="cabinetBetrayal"] .scene-wash {
    background: transparent !important;
  }
}

/* First-greeting plate object map. Its visible foreground kit differs from the
   later desk-tour plate: camera left, key ring on the notebook, and phone right. */
.game-shell[data-step="intro"] .desk-tool-hotspots [data-tool="files"],
.game-shell[data-step="introResponse"] .desk-tool-hotspots [data-tool="files"] {
  left: 1.2% !important;
  top: 70% !important;
  width: 20% !important;
  height: 25% !important;
}

.game-shell[data-step="intro"] .desk-tool-hotspots [data-tool="camera"],
.game-shell[data-step="introResponse"] .desk-tool-hotspots [data-tool="camera"] {
  left: 15% !important;
  top: 77% !important;
  width: 9% !important;
  height: 13% !important;
}

.game-shell[data-step="intro"] .desk-tool-hotspots [data-tool="keys"],
.game-shell[data-step="introResponse"] .desk-tool-hotspots [data-tool="keys"] {
  left: 24% !important;
  top: 77% !important;
  width: 8.5% !important;
  height: 10% !important;
}

.game-shell[data-step="intro"] .desk-tool-hotspots [data-tool="note"],
.game-shell[data-step="introResponse"] .desk-tool-hotspots [data-tool="note"] {
  left: 25% !important;
  top: 73% !important;
  width: 22% !important;
  height: 20% !important;
}

.game-shell[data-step="intro"] .desk-tool-hotspots [data-tool="phone"],
.game-shell[data-step="introResponse"] .desk-tool-hotspots [data-tool="phone"] {
  left: 73% !important;
  top: 67% !important;
  width: 16% !important;
  height: 22% !important;
}

/* Opening-office cleanup authority. The entry, file insert, interruption, and
   shared orientation beats now use one exposure and one speech-bubble rhythm.
   Keep this late so historical scene rules cannot reintroduce dark inserts,
   oversized margins, or generic hotspot rings. */
@media (min-width: 761px) {
  /* The new office family shares the Bella-file triptych's rainy-day exposure:
     readable daylight with only a light vignette, never a separate night beat. */
  .game-shell[data-step="intro"] .scene-image,
  .game-shell[data-step="introResponse"] .scene-image,
  .game-shell[data-step="shaneFileTriptych"] .scene-image,
  .game-shell[data-step="sophiaCallsShane"] .scene-image,
  .game-shell[data-step="sophiaInterrupt"] .scene-image,
  .game-shell[data-step="shaneFileFixation"] .scene-image,
  .game-shell[data-step="officeTourDesk"] .scene-image,
  .game-shell[data-scene-family="shared-office"] .scene-image {
    filter: saturate(.97) contrast(1.02) brightness(1.02);
  }

  .game-shell[data-step="intro"] .scene-wash,
  .game-shell[data-step="introResponse"] .scene-wash,
  .game-shell[data-step="shaneFileTriptych"] .scene-wash,
  .game-shell[data-step="sophiaCallsShane"] .scene-wash,
  .game-shell[data-step="sophiaInterrupt"] .scene-wash,
  .game-shell[data-step="shaneFileFixation"] .scene-wash,
  .game-shell[data-step="officeTourDesk"] .scene-wash,
  .game-shell[data-scene-family="shared-office"] .scene-wash {
    background:
      linear-gradient(90deg, rgba(8, 11, 10, .12), rgba(8, 11, 10, 0) 48%, rgba(8, 11, 10, .08)),
      linear-gradient(0deg, rgba(8, 11, 10, .14), rgba(8, 11, 10, 0) 52%, rgba(8, 11, 10, .07));
  }

  .game-shell[data-step="intro"] .dialogue-panel[data-speaker-key="sophia"],
  .game-shell[data-step="introResponse"] .dialogue-panel[data-speaker-key="sophia"],
  .game-shell[data-step="sophiaCallsShane"] .dialogue-panel[data-speaker-key="sophia"],
  .game-shell[data-step="sophiaInterrupt"] .dialogue-panel[data-speaker-key="sophia"],
  .game-shell[data-scene-family="shared-office"] .dialogue-panel[data-mode="speech"] {
    box-sizing: border-box;
    padding-inline: 1.48rem;
  }

  .game-shell[data-step="intro"] .dialogue-panel[data-speaker-key="sophia"],
  .game-shell[data-step="introResponse"] .dialogue-panel[data-speaker-key="sophia"],
  .game-shell[data-step="sophiaCallsShane"] .dialogue-panel[data-speaker-key="sophia"] {
    padding-block: .78rem .94rem;
  }

  .game-shell[data-step="sophiaInterrupt"] .dialogue-panel[data-speaker-key="sophia"] {
    padding-block: .94rem 1.08rem;
  }

  .game-shell[data-scene-family="shared-office"] .dialogue-panel[data-line-count="one"] {
    min-height: 64px;
    padding-block: .72rem .92rem;
  }

  .game-shell[data-scene-family="shared-office"] .dialogue-panel[data-line-count="two"] {
    min-height: 78px;
    padding-block: .82rem 1rem;
  }

  .game-shell[data-scene-family="shared-office"] .dialogue-panel[data-line-count="three"] {
    min-height: 104px;
    padding-block: .98rem 1.05rem;
  }
}

/* Desk and evidence inspection fields remain generous for touch, but use a
   single larger warm point rather than any visible generic halo. */
.game-shell[data-step="officeTourDesk"] .desk-tool-hotspots .scene-hotspot,
.game-shell[data-step="tools"] .desk-tool-hotspots .scene-hotspot,
.game-shell[data-step="inspectClose"] .desk-tool-hotspots .scene-hotspot,
.game-shell[data-step="evidenceRule"] .evidence-tool-hotspots .scene-hotspot {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.game-shell[data-step="officeTourDesk"] .desk-tool-hotspots .scene-hotspot::before,
.game-shell[data-step="tools"] .desk-tool-hotspots .scene-hotspot::before,
.game-shell[data-step="inspectClose"] .desk-tool-hotspots .scene-hotspot::before,
.game-shell[data-step="evidenceRule"] .evidence-tool-hotspots .scene-hotspot::before {
  width: 15px !important;
  height: 15px !important;
  border: 0 !important;
  background: radial-gradient(circle, rgba(255, 250, 222, .99) 0 11%, rgba(245, 205, 121, .82) 25%, rgba(245, 205, 121, .2) 53%, transparent 73%) !important;
  box-shadow: none !important;
}

.game-shell[data-step="officeTourDesk"] .desk-tool-hotspots .scene-hotspot::after,
.game-shell[data-step="tools"] .desk-tool-hotspots .scene-hotspot::after,
.game-shell[data-step="inspectClose"] .desk-tool-hotspots .scene-hotspot::after,
.game-shell[data-step="evidenceRule"] .evidence-tool-hotspots .scene-hotspot::after {
  display: none !important;
}

.game-shell[data-step="officeTourDesk"] .desk-tool-hotspots .scene-hotspot.done,
.game-shell[data-step="tools"] .desk-tool-hotspots .scene-hotspot.done,
.game-shell[data-step="inspectClose"] .desk-tool-hotspots .scene-hotspot.done,
.game-shell[data-step="evidenceRule"] .evidence-tool-hotspots .scene-hotspot.done {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Shared-office visual family authority. The same wide A10 plate supports
   many later dialogue beats; preserve both desks and use its cabinet lane
   rather than letting 4:3 cover-cropping erase a speaker. */
@media (min-width: 761px) {
  .game-shell[data-scene-family="shared-office"] .scene-image {
    object-fit: contain;
    background: #111512;
    filter: saturate(.96) contrast(1.02) brightness(1.04);
  }

  .game-shell[data-scene-family="shared-office"] .scene-wash {
    background:
      linear-gradient(90deg, rgba(8, 11, 10, .18), rgba(8, 11, 10, 0) 48%, rgba(8, 11, 10, .18)),
      linear-gradient(0deg, rgba(8, 11, 10, .2), rgba(8, 11, 10, 0) 52%, rgba(8, 11, 10, .1));
  }

  .game-shell[data-scene-family="shared-office"] .dialogue-panel[data-speaker-key="shane"] {
    left: clamp(18rem, 30vw, 20rem);
    right: auto;
    top: clamp(6.5rem, 15vh, 7.5rem);
    bottom: auto;
    transform: none;
    width: 310px;
    max-width: min(310px, calc(100% - 2rem));
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
  }

  .game-shell[data-scene-family="shared-office"] .dialogue-panel[data-speaker-key="sophia"] {
    left: clamp(33rem, 54vw, 35rem);
    right: auto;
    top: clamp(6.5rem, 15vh, 7.5rem);
    bottom: auto;
    transform: none;
    width: 280px;
    max-width: min(280px, calc(100% - 2rem));
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
  }
}

/* Final anonymous-tip exchange authority. The shared office master is 16:9
   while the playable stage is 4:3; contain it here so both detectives remain
   visible instead of cropping the speakers off either edge. */
@media (min-width: 761px) {
  .game-shell[data-step="voicemailFirstRead"] .scene-image,
  .game-shell[data-step="voicemailRiskSophia"] .scene-image,
  .game-shell[data-step="voicemailRiskShane"] .scene-image,
  .game-shell[data-step="voicemailKnownSource"] .scene-image,
  .game-shell[data-step="voicemailAnonymousSource"] .scene-image,
  .game-shell[data-step="voicemailKnownUs"] .scene-image {
    object-fit: contain;
    background: #111512;
    filter: saturate(.96) contrast(1.02) brightness(1.04);
  }

  .game-shell[data-step="voicemailFirstRead"] .scene-wash,
  .game-shell[data-step="voicemailRiskSophia"] .scene-wash,
  .game-shell[data-step="voicemailRiskShane"] .scene-wash,
  .game-shell[data-step="voicemailKnownSource"] .scene-wash,
  .game-shell[data-step="voicemailAnonymousSource"] .scene-wash,
  .game-shell[data-step="voicemailKnownUs"] .scene-wash {
    background:
      linear-gradient(90deg, rgba(8, 11, 10, .18), rgba(8, 11, 10, 0) 48%, rgba(8, 11, 10, .18)),
      linear-gradient(0deg, rgba(8, 11, 10, .2), rgba(8, 11, 10, 0) 52%, rgba(8, 11, 10, .1));
  }

  .game-shell[data-step="voicemailFirstRead"] .dialogue-panel[data-speaker-key="sophia"],
  .game-shell[data-step="voicemailRiskSophia"] .dialogue-panel[data-speaker-key="sophia"],
  .game-shell[data-step="voicemailKnownSource"] .dialogue-panel[data-speaker-key="sophia"] {
    left: clamp(33rem, 54vw, 35rem);
    right: auto;
    top: clamp(6.5rem, 15vh, 7.5rem);
    bottom: auto;
    transform: none;
    width: 260px;
    max-width: min(260px, calc(100% - 2rem));
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png");
  }

  .game-shell[data-step="voicemailRiskShane"] .dialogue-panel[data-speaker-key="shane"],
  .game-shell[data-step="voicemailAnonymousSource"] .dialogue-panel[data-speaker-key="shane"] {
    left: clamp(16rem, 27vw, 18rem);
    right: auto;
    top: clamp(6.5rem, 15vh, 7.5rem);
    bottom: auto;
    transform: none;
    width: 310px;
    max-width: min(310px, calc(100% - 2rem));
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
  }

  .game-shell[data-step="voicemailKnownUs"] .dialogue-panel[data-speaker-key="sophia"] {
    left: clamp(25rem, 42vw, 27rem);
    right: auto;
    top: clamp(5.75rem, 13vh, 6.75rem);
    bottom: auto;
    transform: none;
    width: 365px;
    max-width: min(365px, calc(100% - 2rem));
    min-height: 126px;
    padding: 1rem 1.65rem 1.12rem;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
  }
}

/* Final housing-return authority. Keep the two detectives in the shared
   office frame and use the open lane between them for the brief handoff. */
@media (min-width: 761px) {
  .game-shell[data-step="housingReturnOffice"] .scene-image,
  .game-shell[data-step="housingReturnMotto"] .scene-image,
  .game-shell[data-step="housingReturnWork"] .scene-image {
    object-fit: contain;
    background: #111512;
    filter: saturate(.96) contrast(1.02) brightness(1.04);
  }

  .game-shell[data-step="housingReturnOffice"] .scene-wash,
  .game-shell[data-step="housingReturnMotto"] .scene-wash,
  .game-shell[data-step="housingReturnWork"] .scene-wash {
    background:
      linear-gradient(90deg, rgba(8, 11, 10, .18), rgba(8, 11, 10, 0) 48%, rgba(8, 11, 10, .18)),
      linear-gradient(0deg, rgba(8, 11, 10, .2), rgba(8, 11, 10, 0) 52%, rgba(8, 11, 10, .1));
  }

  .game-shell[data-step="housingReturnOffice"] .dialogue-panel[data-speaker-key="shane"],
  .game-shell[data-step="housingReturnWork"] .dialogue-panel[data-speaker-key="shane"] {
    left: clamp(18rem, 30vw, 20rem);
    right: auto;
    top: clamp(6.5rem, 15vh, 7.5rem);
    bottom: auto;
    transform: none;
    width: 260px;
    max-width: min(260px, calc(100% - 2rem));
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-left-placement-margin-fix.png");
  }

  .game-shell[data-step="housingReturnMotto"] .dialogue-panel[data-speaker-key="sophia"] {
    left: clamp(26rem, 43vw, 28rem);
    right: auto;
    top: clamp(6.5rem, 15vh, 7.5rem);
    bottom: auto;
    transform: none;
    width: 260px;
    max-width: min(260px, calc(100% - 2rem));
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png");
  }
}

/* Post-Harbourtown office return lock.
   The dedicated return plate puts Shane on the left and Sophia on the right,
   leaving the cabinet field between them as the only honest dialogue lane. */
@media (min-width: 761px) {
  .game-shell[data-step="boardReturn"] .dialogue-panel[data-speaker-key="shane"],
  .game-shell[data-step="boardReturnElliePrompt"] .dialogue-panel[data-speaker-key="shane"],
  .game-shell[data-step="boardAssessment"] .dialogue-panel[data-speaker-key="shane"] {
    left: clamp(14rem, 20vw, 17rem);
    right: auto;
    top: clamp(4.75rem, 10vh, 6rem);
    bottom: auto;
    transform: none;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-left-placement-margin-fix.png");
  }

  .game-shell[data-step="boardReturn"] .dialogue-panel[data-speaker-key="shane"] {
    width: 224px;
    max-width: min(224px, calc(100% - 2rem));
    min-height: 66px;
    padding: .68rem 1.06rem .78rem;
  }

  .game-shell[data-step="boardReturnElliePrompt"] .dialogue-panel[data-speaker-key="shane"] {
    width: 360px;
    max-width: min(360px, calc(100% - 2rem));
    min-height: 92px;
    height: auto;
    padding: .82rem 1.42rem .98rem;
  }

  .game-shell[data-step="boardAssessment"] .dialogue-panel[data-speaker-key="shane"] {
    width: 380px;
    max-width: min(380px, calc(100% - 2rem));
    min-height: 144px;
    padding: 1rem 1.68rem 1.14rem;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
  }

  .game-shell[data-step="boardReturnSophia"] .dialogue-panel[data-speaker-key="sophia"] {
    left: clamp(29rem, 38vw, 32rem);
    right: auto;
    top: clamp(4.75rem, 10vh, 6rem);
    bottom: auto;
    width: 310px;
    max-width: min(310px, calc(100% - 2rem));
    min-height: 82px;
    padding: .92rem 1.56rem 1.04rem;
    transform: none;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-right-placement-margin-fix.png");
  }
}

/* Day One speech-bubble audit authority.
   Every positioned character balloon uses the same interior rhythm by authored
   line count. Scene rules may choose a location, width, and illustrated tail,
   but they must not squeeze one speaker's copy against the edge while another
   receives a different margin. This remains last so it is the sole formatting
   authority over historical placement experiments. */
@media (min-width: 761px) {
  .game-shell .dialogue-panel[data-mode="speech"] {
    box-sizing: border-box;
    align-content: center;
    justify-items: center;
    text-align: center;
  }

  .game-shell .dialogue-panel[data-mode="speech"] .line {
    /* The painted bubble sprites already contain a paper edge. Leave that
       visible, but do not double it with a second wide CSS gutter. */
    max-width: calc(100% - 1.5rem) !important;
    line-height: 1.22 !important;
    overflow: visible;
  }

  .game-shell .dialogue-panel[data-mode="speech"][data-line-count="short"] {
    min-height: 60px !important;
    padding: .56rem .68rem .7rem !important;
  }

  .game-shell .dialogue-panel[data-mode="speech"][data-line-count="one"] {
    min-height: 68px !important;
    padding: .64rem .76rem .8rem !important;
  }

  .game-shell .dialogue-panel[data-mode="speech"][data-line-count="two"] {
    min-height: 82px !important;
    padding: .74rem .86rem .9rem !important;
  }

  .game-shell .dialogue-panel[data-mode="speech"][data-line-count="three"] {
    min-height: 110px !important;
    padding: .86rem .98rem .98rem !important;
  }

  .game-shell .dialogue-panel[data-mode="speech"][data-line-count="four"] {
    min-height: 128px !important;
    padding: .94rem 1.04rem 1.04rem !important;
  }

  /* Sophia's evidence-room joke needs the central empty lane, not the space
     over her head. Its right-side tail returns the line to her on the right. */
  .game-shell[data-step="coffeeEvidenceRoom"] .dialogue-panel[data-speaker-key="sophia"] {
    left: clamp(21rem, 31vw, 26rem) !important;
    right: auto !important;
    top: clamp(1.4rem, 3vh, 2.4rem) !important;
    width: min(320px, calc(100% - 2rem)) !important;
    max-width: min(320px, calc(100% - 2rem)) !important;
    min-height: 114px !important;
    padding: .86rem .98rem .98rem !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png") !important;
  }
}

/* Definitive desk-tour interaction authority. This must remain the last desk
   block: older review CSS used broad elliptical hover fills and retired source
   coordinates, both of which make an approximate target look like a halo. */
.game-shell:is([data-step="officeTourDesk"], [data-step="tools"], [data-step="inspectClose"]) .desk-tool-hotspots [data-tool="files"],
.game-shell:is([data-step="officeTourDesk"], [data-step="tools"], [data-step="inspectClose"]) .desk-tool-hotspots [data-tool="files"]:hover,
.game-shell:is([data-step="officeTourDesk"], [data-step="tools"], [data-step="inspectClose"]) .desk-tool-hotspots [data-tool="files"]:focus-visible,
.game-shell:is([data-step="officeTourDesk"], [data-step="tools"], [data-step="inspectClose"]) .desk-tool-hotspots [data-desk-tool="files"],
.game-shell:is([data-step="officeTourDesk"], [data-step="tools"], [data-step="inspectClose"]) .desk-tool-hotspots [data-desk-tool="files"]:hover,
.game-shell:is([data-step="officeTourDesk"], [data-step="tools"], [data-step="inspectClose"]) .desk-tool-hotspots [data-desk-tool="files"]:focus-visible {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  outline: 0 !important;
  opacity: 1 !important;
}

.game-shell:is([data-step="officeTourDesk"], [data-step="tools"], [data-step="inspectClose"]) .desk-tool-hotspots [data-tool="files"]::before,
.game-shell:is([data-step="officeTourDesk"], [data-step="tools"], [data-step="inspectClose"]) .desk-tool-hotspots [data-tool="files"]::after,
.game-shell:is([data-step="officeTourDesk"], [data-step="tools"], [data-step="inspectClose"]) .desk-tool-hotspots [data-desk-tool="files"]::before,
.game-shell:is([data-step="officeTourDesk"], [data-step="tools"], [data-step="inspectClose"]) .desk-tool-hotspots [data-desk-tool="files"]::after {
  display: none !important;
}

.game-shell:is([data-step="officeTourDesk"], [data-step="tools"]) .desk-tool-hotspots [data-tool="keys"],
.game-shell[data-step="inspectClose"] .desk-tool-hotspots [data-desk-tool="keys"] {
  left: 23% !important;
  top: 78% !important;
  width: 9% !important;
  height: 14% !important;
  z-index: 6 !important;
  --desk-cue-x: 50% !important;
  --desk-cue-y: 42% !important;
}

.game-shell:is([data-step="officeTourDesk"], [data-step="tools"]) .desk-tool-hotspots [data-tool="keys"]:not(.done)::before,
.game-shell[data-step="inspectClose"] .desk-tool-hotspots [data-desk-tool="keys"]:not(.done)::before {
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  background: radial-gradient(circle, rgba(255, 249, 220, .98) 0 12%, rgba(245, 205, 121, .78) 24%, rgba(245, 205, 121, .16) 52%, transparent 72%) !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 3px rgba(240, 192, 90, .52)) !important;
  opacity: .72 !important;
}

.game-shell:is([data-step="officeTourDesk"], [data-step="tools"]) .desk-tool-hotspots [data-tool="keys"]:not(.done):hover::before,
.game-shell[data-step="inspectClose"] .desk-tool-hotspots [data-desk-tool="keys"]:not(.done):hover::before {
  filter: drop-shadow(0 0 6px rgba(240, 192, 90, .82)) !important;
  opacity: 1 !important;
}

/* Opening-tour corrective authority. Keep the early office readable while the
   replacement art family is in production: these rules only adjust live UI,
   never attempt to paint over a source plate. */
@media (min-width: 761px) {
  .game-shell[data-step="intro"] .dialogue-panel[data-speaker-key="sophia"],
  .game-shell[data-step="introResponse"] .dialogue-panel[data-speaker-key="sophia"],
  .game-shell[data-step="sophiaCallsShane"] .dialogue-panel[data-speaker-key="sophia"],
  .game-shell[data-step="sophiaInterrupt"] .dialogue-panel[data-speaker-key="sophia"] {
    top: clamp(2.5rem, 6vh, 4.2rem);
  }

  .game-shell[data-step="boardTheoryDie"] .dialogue-panel[data-speaker-key="shane"] {
    min-height: 94px !important;
    padding-bottom: 1.06rem !important;
  }

  .game-shell[data-step="boardDecoratingShould"] .dialogue-panel[data-speaker-key="shane"] {
    width: 210px;
    min-width: 210px;
  }

  .game-shell[data-step="boardDecoratingShould"] .dialogue-panel[data-speaker-key="shane"] .line {
    white-space: nowrap !important;
  }

  /* The office coffee exchange shares a wide two-detective plate. Put each
     speaker's balloon in the open central lane and use its illustrated tail
     to return the line to the correct person. */
  .game-shell[data-step="coffeeOffice"] .dialogue-panel[data-speaker-key="sophia"],
  .game-shell[data-step="coffeeEvidenceRoom"] .dialogue-panel[data-speaker-key="sophia"],
  .game-shell[data-step="coffeeFormsCleanliness"] .dialogue-panel[data-speaker-key="sophia"],
  .game-shell[data-step="coffeeGazpacho"] .dialogue-panel[data-speaker-key="sophia"],
  .game-shell[data-step="coffeeGazpachoCorrection"] .dialogue-panel[data-speaker-key="sophia"] {
    left: clamp(38rem, 56vw, 47rem);
    right: auto;
    top: clamp(1.4rem, 3vh, 2.4rem);
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png");
  }

  .game-shell[data-step="coffeeCafeOrigin"] .dialogue-panel[data-speaker-key="shane"],
  .game-shell[data-step="coffeeFormsUseful"] .dialogue-panel[data-speaker-key="shane"],
  .game-shell[data-step="coffeeFormsImprove"] .dialogue-panel[data-speaker-key="shane"],
  .game-shell[data-step="coffeeRadiator"] .dialogue-panel[data-speaker-key="shane"],
  .game-shell[data-step="coffeeSaved"] .dialogue-panel[data-speaker-key="shane"] {
    left: clamp(11rem, 16vw, 14rem);
    right: auto;
    top: clamp(1.4rem, 3vh, 2.4rem);
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
  }

  .game-shell[data-step="officeTourFile"] .scene-image {
    object-fit: contain;
    object-position: center center;
  }
}

/* These two hotspots are repeatedly read as leftover halos rather than quiet
   discovery cues. Their text label and click target remain intact. */
.game-shell[data-step="officeTourDesk"] .desk-tool-hotspots [data-tool="files"]::before,
.game-shell[data-step="tools"] .desk-tool-hotspots [data-tool="files"]::before,
.game-shell[data-step="inspectClose"] .desk-tool-hotspots [data-desk-tool="files"]::before,
.game-shell[data-step="evidenceRule"] .evidence-tool-hotspots [data-evidence-tool="folders"]::before {
  display: none !important;
}

/* Final stabilization: the container exchange has two visible speakers at the
   left edge and an off-camera dockworker. Keep each balloon in clear sky/steel
   space and make the tail describe the actual source, rather than inheriting
   an older generic Harbourtown rule. */
@media (min-width: 761px) {
  .game-shell[data-step="seniorWorker"] .dialogue-panel[data-speaker-key="ellie"] {
    left: clamp(19rem, 28vw, 24rem);
    right: auto;
    top: clamp(1.15rem, 4vh, 2.6rem);
    width: 235px;
    max-width: min(235px, calc(100% - 2rem));
    min-height: 72px;
    padding: .72rem 1.14rem .82rem;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-left-placement-margin-fix.png");
  }

  .game-shell[data-step="seniorWorkerReply"] .dialogue-panel[data-speaker-key="senior-worker"],
  .game-shell[data-step="seniorWorkerDismissal"] .dialogue-panel[data-speaker-key="senior-worker"],
  .game-shell[data-step="freshPaintConcern"] .dialogue-panel[data-speaker-key="senior-worker"] {
    left: auto;
    right: clamp(5rem, 10vw, 9rem);
    top: clamp(1.6rem, 5vh, 3.3rem);
    width: 290px;
    max-width: min(290px, calc(100% - 2rem));
    min-height: 84px;
    height: auto;
    padding: .82rem 1.32rem .94rem;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-left-placement-margin-fix.png");
  }

  .game-shell[data-step="seniorWorkerSophia"] .dialogue-panel[data-speaker-key="sophia"] {
    left: clamp(2rem, 6vw, 5rem);
    right: auto;
    top: clamp(1.15rem, 4vh, 2.6rem);
    width: 245px;
    max-width: min(245px, calc(100% - 2rem));
    min-height: 72px;
    padding: .72rem 1.14rem .82rem;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-right-placement-margin-fix.png");
  }

  .game-shell[data-step="seniorWorkerEllie"] .dialogue-panel[data-speaker-key="ellie"] {
    left: clamp(13rem, 20vw, 18rem);
    right: auto;
    top: clamp(1.15rem, 4vh, 2.6rem);
    width: 192px;
    max-width: min(192px, calc(100% - 2rem));
    min-height: 72px;
    padding: .72rem 1.14rem .82rem;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-left-placement-margin-fix.png");
  }

  .game-shell[data-step="seniorWorkerEllieConcern"] .dialogue-panel[data-speaker-key="ellie"] {
    left: clamp(16rem, 24vw, 21rem);
    right: auto;
    top: clamp(1rem, 3vh, 2rem);
    width: 340px;
    max-width: min(340px, calc(100% - 2rem));
    min-height: 124px;
    height: auto;
    padding: .94rem 1.58rem 1.04rem;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
  }

}

/* Final clearance overrides for the office-to-coffee handoff. These follow
   the historical review blocks above, which otherwise reset the bubbles over
   a character's head. Sophia speaks from the open lane between the detectives;
   the right-facing tail returns to her without covering Shane. */
.game-shell[data-step="coffeeOffice"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="coffeeEvidenceRoom"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="coffeeFormsCleanliness"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="coffeeGazpacho"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="coffeeGazpachoCorrection"] .dialogue-panel[data-speaker-key="sophia"] {
  left: clamp(27rem, 43vw, 28rem);
  right: auto;
  top: clamp(.75rem, 2vh, 1.5rem);
  width: 250px;
  max-width: min(250px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png");
}

.game-shell[data-step="coffeeGazpachoCorrection"] .dialogue-panel[data-speaker-key="sophia"] {
  width: 180px;
  max-width: min(180px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-right-placement-margin-fix.png");
}

.game-shell[data-step="coffeeCafeOrigin"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="coffeeFormsUseful"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="coffeeFormsImprove"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="coffeeRadiator"] .dialogue-panel[data-speaker-key="shane"],
.game-shell[data-step="coffeeSaved"] .dialogue-panel[data-speaker-key="shane"] {
  left: clamp(1rem, 2vw, 2.5rem);
  right: auto;
  top: clamp(2rem, 5vh, 3.5rem);
  max-width: min(290px, calc(100% - 2rem));
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}

/* The office-sleep offer reuses the approved debrief composition. Keep the
   room legible while shifting only these dialogue beats into after-hours. */
.game-shell[data-step="officeSleepPlace"] .scene-image,
.game-shell[data-step="officeSleepStation"] .scene-image,
.game-shell[data-step="officeSleepLighting"] .scene-image,
.game-shell[data-step="officeSleepOffer"] .scene-image,
.game-shell[data-step="officeSleepClosing"] .scene-image {
  filter: saturate(.88) contrast(1.02) brightness(.94) hue-rotate(3deg);
}

.game-shell[data-step="officeSleepPlace"] .scene-wash,
.game-shell[data-step="officeSleepStation"] .scene-wash,
.game-shell[data-step="officeSleepLighting"] .scene-wash,
.game-shell[data-step="officeSleepOffer"] .scene-wash,
.game-shell[data-step="officeSleepClosing"] .scene-wash {
  background:
    linear-gradient(90deg, rgba(7, 12, 18, .18), rgba(7, 12, 18, .015) 48%, rgba(7, 12, 18, .14)),
    linear-gradient(0deg, rgba(7, 12, 18, .2), rgba(7, 12, 18, .01) 55%, rgba(7, 12, 18, .11));
}

/* Prototype layout stabilization block - 2026-07-03.
   Keep this block last. These are the approved private-demo placements
   for high-churn overlays, so older review-pass rules cannot fight them. */
.game-shell[data-step="officeTourDesk"] .scene-image {
  object-fit: contain;
  object-position: center center;
  transform: none;
  background: #080b0a;
}

.game-shell[data-step="officeTourDesk"] .player-kit {
  display: none;
}

.game-shell[data-step="officeTourDesk"] .hotspot[data-focus="camera"] {
  left: 76%;
  top: 68%;
  width: 160px;
  height: 132px;
}

.game-shell[data-step="officeTourDesk"] .desk-tool-hotspots [data-tool="camera"] {
  left: 76%;
  top: 68%;
  width: 160px;
  height: 132px;
}

.game-shell[data-step="officeTourDesk"] .hotspot[data-focus="phone"] {
  left: 79%;
  top: 48%;
  width: 174px;
  height: 146px;
}

.game-shell[data-step="officeTourDesk"] .desk-tool-hotspots [data-tool="phone"] {
  left: 79%;
  top: 48%;
  width: 174px;
  height: 146px;
}

.game-shell[data-step="officeTourDesk"] .hotspot[data-focus="keys"] {
  left: 54%;
  top: 75%;
  width: 118px;
  height: 92px;
}

.game-shell[data-step="officeTourDesk"] .desk-tool-hotspots [data-tool="keys"] {
  left: 54%;
  top: 75%;
  width: 118px;
  height: 92px;
}

.game-shell[data-step="casePath"] .workspace,
.game-shell[data-step="boardNextStep"] .workspace,
.game-shell[data-step="housingCallback"] .workspace {
  position: fixed;
  left: clamp(1rem, 4vw, 3rem);
  right: auto;
  bottom: clamp(1rem, 4vh, 2rem);
  width: min(470px, calc(100% - 2rem));
  margin: 0;
  z-index: 8;
}

.game-shell[data-step="boardNextStep"] .workspace {
  width: min(430px, calc(100% - 2rem));
}

.game-shell[data-step="housingDowntown"] .workspace,
.game-shell[data-step="housingWarehouse"] .workspace,
.game-shell[data-step="housingBrownstone"] .workspace {
  position: absolute;
  left: auto;
  right: clamp(1rem, 4vw, 3rem);
  bottom: clamp(5.25rem, 13vh, 6.25rem);
  width: min(390px, calc(100% - 2rem));
  margin: 0;
  z-index: 4;
}

.game-shell[data-step="housingDowntown"] .tour-caption,
.game-shell[data-step="housingWarehouse"] .tour-caption,
.game-shell[data-step="housingBrownstone"] .tour-caption {
  margin-top: 0;
}

.game-shell[data-step="housingPaperwork"] .scene-image,
.game-shell[data-step="housingPaperwork"][data-route="housing"][data-late-housing="false"] .scene-image,
.game-shell[data-step="housingPaperwork"][data-late-housing="true"] .scene-image {
  filter: saturate(.94) contrast(1.04) brightness(.82);
}

.game-shell[data-step="camera"] .paint-detail-mode::before,
.game-shell[data-step="camera"] .paint-detail-mode .camera-hud {
  /* Keep every painted edge, the lower drip, and nearby steel inside frame. */
  left: 16%;
  top: 8%;
  width: 72%;
  height: 84%;
}

/* The first placard look is a single quiet object target, not a camera overlay.
   The second, close-inspection state introduces the capture frame and button. */
.game-shell[data-step="camera"] .placard-halo-mode {
  position: fixed;
  inset: 0;
  min-height: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  pointer-events: none;
}

.game-shell[data-step="camera"] .placard-halo-mode .paint-halo {
  left: 47.5%;
  top: 49.5%;
  width: 13%;
  height: 12.5%;
  border: 0;
  border-radius: 8% 10% 9% 7%;
  box-shadow: none;
  pointer-events: auto;
}

.game-shell[data-step="camera"] .placard-halo-mode .camera-hud {
  display: none;
}

.game-shell[data-step="ellieIntro"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellieFactual"] .dialogue-panel[data-speaker-key="ellie"],
.game-shell[data-step="ellieCharmed"] .dialogue-panel[data-speaker-key="ellie"] {
  left: clamp(12rem, 18vw, 17rem);
  right: auto;
  bottom: auto;
  top: clamp(.85rem, 2.8vh, 1.8rem);
  width: 280px;
  max-width: min(280px, calc(100% - 2rem));
  min-height: 108px;
  height: auto;
  padding: .88rem 1.46rem .98rem;
  color: #17110d;
  background: transparent var(--bubble-sprite) center / 100% 100% no-repeat;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}

.game-shell[data-step="ellieIntro"] .dialogue-panel[data-speaker-key="ellie"] {
  width: 205px;
  max-width: min(205px, calc(100% - 2rem));
  min-height: 82px;
  padding: .74rem 1.2rem .84rem;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-right-placement-margin-fix.png");
}

.game-shell[data-step="ellieIntro"] .dialogue-panel[data-speaker-key="ellie"] .line,
.game-shell[data-step="ellieFactual"] .dialogue-panel[data-speaker-key="ellie"] .line,
.game-shell[data-step="ellieCharmed"] .dialogue-panel[data-speaker-key="ellie"] .line,
.game-shell[data-step="elliePlayerResponse"] .dialogue-panel[data-speaker-key="ellie"] .line,
.game-shell[data-step="ellie"] .dialogue-panel[data-speaker-key="ellie"] .line {
  font-size: clamp(.74rem, .92vw, .86rem);
  line-height: 1.04;
  max-width: 27ch;
}

.game-shell[data-step="elliePlacard"] .dialogue-panel[data-speaker-key="ellie"] {
  left: clamp(18rem, 27vw, 24rem);
  right: auto;
  bottom: auto;
  top: clamp(.8rem, 2.7vh, 1.7rem);
  width: 290px;
  max-width: min(290px, calc(100% - 2rem));
  min-height: 112px;
  height: auto;
  padding: .82rem 1.32rem .94rem;
  color: #17110d;
  background: transparent var(--bubble-sprite) center / 100% 100% no-repeat;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}

.game-shell[data-step="elliePlacard"] .dialogue-panel[data-speaker-key="ellie"] .line {
  font-size: clamp(.64rem, .78vw, .76rem);
  line-height: 1.02;
  max-width: 28ch;
}

.game-shell[data-step="ellieHandlingReminder"] .dialogue-panel[data-speaker-key="sophia"] {
  left: clamp(18rem, 28vw, 25rem);
  right: auto;
  bottom: auto;
  top: clamp(.9rem, 3vh, 1.9rem);
  width: 350px;
  max-width: min(350px, calc(100% - 2rem));
  min-height: 126px;
  height: auto;
  padding: .98rem 1.68rem 1.08rem;
  color: #17110d;
  background: transparent var(--bubble-sprite) center / 100% 100% no-repeat;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
}

.game-shell[data-step="ellieHandlingReminder"] .dialogue-panel[data-speaker-key="sophia"] .line {
  font-size: clamp(.72rem, .88vw, .84rem);
  line-height: 1.04;
  max-width: 31ch;
}

.game-shell[data-step="ellieOdd"] .dialogue-panel[data-speaker-key="ellie"] {
  left: clamp(19rem, 28vw, 25rem);
  right: auto;
  bottom: auto;
  top: clamp(.9rem, 3vh, 1.9rem);
  width: 340px;
  max-width: min(340px, calc(100% - 2rem));
  min-height: 120px;
  height: auto;
  padding: .96rem 1.62rem 1.06rem;
  color: #17110d;
  background: transparent var(--bubble-sprite) center / 100% 100% no-repeat;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
}

.game-shell[data-step="ellieOdd"] .dialogue-panel[data-speaker-key="ellie"] .line {
  font-size: clamp(.72rem, .88vw, .84rem);
  line-height: 1.04;
  max-width: 30ch;
}

.game-shell[data-step="elliePointsContainer"] .dialogue-panel[data-speaker-key="ellie"] {
  left: clamp(14rem, 22vw, 20rem);
  right: auto;
  bottom: auto;
  top: clamp(1.4rem, 4vh, 2.8rem);
  width: 168px;
  max-width: min(168px, calc(100% - 2rem));
  min-width: 0;
  min-height: 72px;
  height: 72px;
  padding: .72rem 1.14rem .82rem;
  color: #17110d;
  background: transparent var(--bubble-sprite) center / 100% 100% no-repeat;
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-right-placement-margin-fix.png");
}

.game-shell[data-step="elliePointsContainer"] .dialogue-panel[data-speaker-key="ellie"] .line {
  font-size: clamp(.78rem, .96vw, .9rem);
  line-height: 1;
  max-width: 10ch;
}

@media (max-width: 760px) {
  .game-shell[data-step="officeTourDesk"] .hotspot[data-focus="camera"] {
    left: 73%;
    top: 68%;
    width: 112px;
    height: 96px;
  }

  .game-shell[data-step="officeTourDesk"] .desk-tool-hotspots [data-tool="camera"] {
    left: 73%;
    top: 68%;
    width: 112px;
    height: 96px;
  }

  .game-shell[data-step="officeTourDesk"] .hotspot[data-focus="phone"] {
    left: 78%;
    top: 48%;
    width: 124px;
    height: 108px;
  }

  .game-shell[data-step="officeTourDesk"] .desk-tool-hotspots [data-tool="phone"] {
    left: 78%;
    top: 48%;
    width: 124px;
    height: 108px;
  }

  .game-shell[data-step="officeTourDesk"] .hotspot[data-focus="keys"] {
    left: 54%;
    top: 75%;
    width: 88px;
    height: 70px;
  }

  .game-shell[data-step="officeTourDesk"] .desk-tool-hotspots [data-tool="keys"] {
    left: 54%;
    top: 75%;
    width: 88px;
    height: 70px;
  }

  .game-shell[data-step="casePath"] .workspace,
  .game-shell[data-step="boardNextStep"] .workspace,
  .game-shell[data-step="housingCallback"] .workspace,
  .game-shell[data-step="housingDowntown"] .workspace,
  .game-shell[data-step="housingWarehouse"] .workspace,
  .game-shell[data-step="housingBrownstone"] .workspace {
    left: 1rem;
    right: 1rem;
    bottom: calc(5rem + env(safe-area-inset-bottom));
    width: auto;
  }

  .game-shell[data-step="ellieIntro"] .dialogue-panel[data-speaker-key="ellie"],
  .game-shell[data-step="ellieFactual"] .dialogue-panel[data-speaker-key="ellie"],
  .game-shell[data-step="ellieCharmed"] .dialogue-panel[data-speaker-key="ellie"],
  .game-shell[data-step="elliePlayerResponse"] .dialogue-panel[data-speaker-key="ellie"],
  .game-shell[data-step="ellie"] .dialogue-panel[data-speaker-key="ellie"],
  .game-shell[data-step="elliePlacard"] .dialogue-panel[data-speaker-key="ellie"],
  .game-shell[data-step="ellieHandlingReminder"] .dialogue-panel[data-speaker-key="sophia"],
  .game-shell[data-step="ellieOdd"] .dialogue-panel[data-speaker-key="ellie"] {
    left: 1rem;
    right: 1rem;
    top: 1rem;
    width: auto;
    max-width: none;
  }
}

/* Final override: Ellie first-meeting bubbles must stay off Sophia. */
@media (min-width: 761px) {
  .game-shell[data-step="ellieIntro"] .dialogue-panel[data-speaker-key="ellie"],
  .game-shell[data-step="ellieFactual"] .dialogue-panel[data-speaker-key="ellie"],
  .game-shell[data-step="ellieCharmed"] .dialogue-panel[data-speaker-key="ellie"],
  .game-shell[data-step="elliePlayerResponse"] .dialogue-panel[data-speaker-key="ellie"],
  .game-shell[data-step="ellie"] .dialogue-panel[data-speaker-key="ellie"] {
    left: clamp(3rem, 7vw, 7rem);
    right: auto;
    top: clamp(.9rem, 3vh, 1.9rem);
    bottom: auto;
    width: 280px;
    max-width: min(280px, calc(100% - 2rem));
    min-height: 100px;
    height: auto;
    padding: .86rem 1.42rem .98rem;
    background: transparent var(--bubble-sprite) center / 100% 100% no-repeat;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-right-placement-margin-fix.png");
  }

  .game-shell[data-step="ellieIntro"] .dialogue-panel[data-speaker-key="ellie"] {
    width: 205px;
    max-width: min(205px, calc(100% - 2rem));
    min-height: 82px;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-right-placement-margin-fix.png");
  }

  .game-shell[data-step="ellieFactual"] .dialogue-panel[data-speaker-key="ellie"],
  .game-shell[data-step="ellieCharmed"] .dialogue-panel[data-speaker-key="ellie"] {
    width: 250px;
    max-width: min(250px, calc(100% - 2rem));
  }

  .game-shell[data-step="elliePlayerResponse"] .dialogue-panel[data-speaker-key="ellie"] {
    width: 315px;
    max-width: min(315px, calc(100% - 2rem));
    min-height: 132px;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
  }
}

/* Final override: Ellie call bridge speaker placement. */
@media (min-width: 761px) {
  .game-shell[data-step="ellieMovedMessage"] .dialogue-panel[data-speaker-key="shane"],
  .game-shell[data-step="ellieMovedQuestion"] .dialogue-panel[data-speaker-key="shane"],
  .game-shell[data-step="ellieMovedWithoutHer"] .dialogue-panel[data-speaker-key="shane"],
  .game-shell[data-step="ellieMovedMeaning"] .dialogue-panel[data-speaker-key="shane"] {
    left: clamp(18rem, 39vw, 41rem);
    right: auto;
    top: clamp(.8rem, 2vh, 1.5rem);
    width: 360px;
    max-width: min(360px, calc(100% - 2rem));
    min-height: 104px;
    height: auto;
    padding: .96rem 1.68rem 1.08rem;
    background: transparent var(--bubble-sprite) center / 100% 100% no-repeat;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-left-placement-margin-fix.png");
  }

  .game-shell[data-step="ellieMovedQuestion"] .dialogue-panel[data-speaker-key="shane"] {
    width: 245px;
    max-width: min(245px, calc(100% - 2rem));
    min-height: 82px;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-left-placement-margin-fix.png");
  }

  .game-shell[data-step="ellieMovedWithoutHer"] .dialogue-panel[data-speaker-key="shane"] {
    width: 430px;
    max-width: min(430px, calc(100% - 2rem));
    min-height: 136px;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
  }

  .game-shell[data-step="ellieMovedCleared"] .dialogue-panel[data-speaker-key="sophia"],
  .game-shell[data-step="ellieMovedAfter"] .dialogue-panel[data-speaker-key="sophia"],
  .game-shell[data-step="ellieMovedDisappearing"] .dialogue-panel[data-speaker-key="sophia"] {
    left: clamp(22rem, 53vw, 56rem);
    right: auto;
    top: clamp(.8rem, 2vh, 1.5rem);
    width: 285px;
    max-width: min(285px, calc(100% - 2rem));
    min-height: 86px;
    height: auto;
    padding: .96rem 1.68rem 1.08rem;
    background: transparent var(--bubble-sprite) center / 100% 100% no-repeat;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-right-placement-margin-fix.png");
  }

  .game-shell[data-step="ellieMovedDisappearing"] .dialogue-panel[data-speaker-key="sophia"] {
    width: 390px;
    max-width: min(390px, calc(100% - 2rem));
    min-height: 116px;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-right-placement-margin-fix.png");
  }
}

/* Board Mode control surface - v0.2 chassis wiring. The art is a physical
   stage; the live case data remains DOM so it can evolve without regenerating images. */
@media (min-width: 761px) {
  .game-shell[data-step="board"] .workspace {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: min(100%, 177.777svh);
    aspect-ratio: 16 / 9;
    margin: 0;
    transform: translate(-50%, -50%);
    z-index: 8;
    pointer-events: none;
  }

  .game-shell[data-step="board"] .board-zoom-points {
    position: absolute;
    inset: 0;
  }

  .game-shell[data-step="board"] .board-zoom-points [data-board-focus="notebook"] {
    left: 4.5%;
    top: 13%;
    width: 19%;
    height: 55%;
  }

  .game-shell[data-step="board"] .board-zoom-points [data-board-focus="center"] {
    left: 27%;
    top: 13%;
    width: 48%;
    height: 58%;
  }

  .game-shell[data-step="board"] .board-zoom-points [data-board-focus="evidence"] {
    left: 18%;
    top: 76%;
    width: 59%;
    height: 17%;
  }

  .game-shell[data-step="board"] .board-photo-pin-chassis {
    left: 47%;
    top: 38%;
    width: 14%;
    transform: rotate(1.1deg);
  }

  .game-shell[data-step="board"] .board-ui--intro {
    position: absolute;
    left: 42%;
    top: 7%;
    z-index: 8;
    width: 28%;
    padding: .6rem .72rem;
    border-color: rgba(231, 224, 210, .38);
    background: rgba(8, 11, 10, .76);
    backdrop-filter: blur(5px);
  }

  .game-shell[data-step="board"] .player-kit {
    left: .75rem;
    right: auto;
    top: calc(4.8rem + env(safe-area-inset-top));
    transform: none;
  }

  .game-shell[data-step="board"] .player-kit-rail {
    grid-template-columns: repeat(7, 38px);
    grid-auto-flow: column;
    gap: .28rem;
    padding: .3rem;
  }

  .game-shell[data-step="board"] .player-kit-button {
    width: 38px;
    height: 38px;
  }

  .game-shell[data-step="board"] .player-kit-button svg {
    width: 18px;
    height: 18px;
  }

  .game-shell[data-step="board"] .player-kit-popover {
    justify-self: start;
    max-height: min(54svh, 430px);
    overflow-y: auto;
  }

  .board-control-surface {
    position: absolute;
    inset: 0;
    color: #211b15;
    pointer-events: none;
  }

  .board-control-surface > section {
    position: absolute;
    pointer-events: auto;
  }

  .board-surface-ledger {
    left: 4.8%;
    top: 12.5%;
    width: 18.8%;
    max-height: 58%;
    padding: .9% 1.05%;
    overflow-y: auto;
    color: #211b15;
  }

  .board-surface-ledger .eyebrow,
  .board-surface-ledger .label,
  .board-surface-web .label,
  .board-surface-dossiers .eyebrow,
  .board-surface-materials .eyebrow {
    display: inline-flex;
    width: fit-content;
    padding: .16rem .3rem;
    border: 1px solid rgba(51, 80, 77, .28);
    color: #244d49;
    background: rgba(247, 241, 225, .9);
    box-shadow: 0 2px 5px rgba(38, 28, 17, .12);
    font-size: clamp(.5rem, .68vw, .7rem);
  }

  .board-surface-progress {
    display: grid;
    gap: .12rem;
    margin: 0 0 .48rem;
    padding: .4rem .46rem;
    border: 1px solid rgba(44, 35, 25, .2);
    background: rgba(246, 239, 220, .78);
  }

  .board-surface-progress strong {
    color: #211b15;
    font-family: var(--display);
    font-size: clamp(.72rem, 1vw, .98rem);
    text-transform: uppercase;
  }

  .board-surface-progress span {
    color: #594f43;
    font-size: clamp(.54rem, .72vw, .72rem);
    line-height: 1.18;
  }

  .board-surface-ledger .board-working-set {
    grid-template-columns: 1fr;
    gap: .32rem;
    margin: 0;
  }

  .board-surface-ledger .board-working-card {
    min-height: 0;
    padding: .38rem .46rem;
    border-color: rgba(93, 72, 42, .45);
    border-top-width: 1px;
    background: rgba(236, 227, 204, .74);
  }

  .board-surface-ledger .board-working-card .label {
    color: #6e5932;
    font-size: clamp(.43rem, .56vw, .57rem);
  }

  .board-surface-ledger .board-working-card > p:not(.label) {
    color: #211b15;
    font-size: clamp(.64rem, .82vw, .8rem);
    line-height: 1.24;
  }

  .board-surface-ledger .board-working-card-action {
    color: #6e5932;
    border-color: rgba(110, 89, 50, .48);
    background: rgba(182, 160, 106, .12);
    font-size: clamp(.4rem, .5vw, .52rem);
  }

  .board-surface-current-task {
    display: grid;
    gap: .2rem;
    margin-top: .48rem;
    padding: .42rem .46rem;
    border: 1px solid rgba(54, 43, 29, .28);
    background: rgba(246, 239, 220, .76);
  }

  .board-surface-current-task .label {
    margin: 0;
  }

  .board-surface-current-task strong {
    color: #211b15;
    font-family: var(--hand);
    font-size: clamp(.62rem, .8vw, .8rem);
    line-height: 1.18;
  }

  .board-surface-current-task span {
    color: #594f43;
    font-size: clamp(.52rem, .66vw, .68rem);
    line-height: 1.2;
  }

  .board-surface-ledger .board-map-link {
    color: #254d4b;
    border-color: rgba(37, 77, 75, .46);
    background: rgba(121, 164, 163, .2);
    font-size: .48rem;
  }

  .board-surface-ledger .board-context-carry {
    padding: .38rem .44rem;
    border-left-color: rgba(53, 94, 90, .72);
    background: rgba(121, 164, 163, .2);
  }

  .board-surface-ledger .board-context-carry > p:not(.label) {
    color: #4c493f;
    font-size: .58rem;
  }

  .board-surface-direction-builder {
    display: grid;
    gap: .38rem;
    margin-top: .48rem;
    padding-top: .46rem;
    border-top: 1px solid rgba(44, 35, 25, .18);
  }

  .board-surface-direction-builder > div {
    display: grid;
    gap: .22rem;
  }

  .board-surface-direction-builder .label {
    margin: 0;
  }

  .board-surface-choice {
    padding: .28rem .34rem;
    border: 1px solid rgba(53, 44, 32, .28);
    color: #332b22;
    background: rgba(238, 230, 211, .68);
    font-family: var(--hand);
    font-size: clamp(.52rem, .66vw, .66rem);
    line-height: 1.16;
    text-align: left;
  }

  .board-surface-choice:hover,
  .board-surface-choice:focus-visible,
  .board-surface-choice.selected {
    border-color: #497c78;
    background: rgba(121, 164, 163, .44);
  }

  .board-surface-authoring {
    margin-top: .12rem;
  }

  .board-surface-authoring summary {
    color: #4b453a;
    cursor: pointer;
    font-size: clamp(.48rem, .62vw, .62rem);
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .board-surface-authoring .board-authoring-grid {
    grid-template-columns: 1fr;
    gap: .38rem;
    margin-top: .38rem;
  }

  .board-surface-authoring .board-authoring-form {
    padding: .38rem;
    background: rgba(236, 227, 204, .66);
  }

  .board-surface-authoring .board-authoring-form label,
  .board-surface-authoring .board-authoring-form textarea {
    color: #332b22;
    font-size: .58rem;
  }

  .board-surface-authoring .board-authoring-form textarea {
    min-height: 48px;
    background: rgba(255, 250, 238, .76);
  }

  .board-surface-web {
    left: 27%;
    top: 13%;
    width: 48%;
    height: 58%;
    pointer-events: none !important;
  }

  .board-surface-photo {
    position: absolute;
    left: 8%;
    top: 27%;
    width: 25%;
    margin: 0;
    padding: .3rem;
    transform: rotate(-1.2deg);
    border: 1px solid rgba(54, 44, 31, .42);
    background: rgba(239, 232, 216, .94);
    box-shadow: 0 6px 14px rgba(48, 36, 23, .2);
  }

  .board-surface-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .board-surface-photo figcaption {
    margin-top: .16rem;
    color: #282019;
    font-family: var(--display);
    font-size: clamp(.42rem, .55vw, .56rem);
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
  }

  .board-surface-empty,
  .board-surface-detail {
    position: absolute;
    right: 7%;
    top: 14%;
    width: 55%;
    max-height: 72%;
    padding: .65rem .72rem;
    overflow-y: auto;
    border: 1px solid rgba(53, 43, 30, .34);
    background: rgba(242, 235, 218, .88);
    box-shadow: 0 7px 17px rgba(47, 35, 21, .16);
    pointer-events: auto;
  }

  .board-surface-task {
    position: absolute;
    left: 8%;
    top: 8%;
    width: 84%;
    max-height: 84%;
    padding: .92rem 1rem;
    overflow-y: auto;
    border: 1px solid rgba(53, 43, 30, .36);
    background: rgba(246, 239, 220, .94);
    box-shadow: 0 9px 21px rgba(47, 35, 21, .2);
    pointer-events: auto;
  }

  .board-surface-task .eyebrow {
    margin: 0 0 .4rem;
  }

  .board-surface-task h2 {
    margin: 0;
    color: #211b15;
    font-family: var(--hand);
    font-size: clamp(.96rem, 1.38vw, 1.36rem);
    line-height: 1.05;
  }

  .board-surface-task > p:not(.eyebrow):not(.board-surface-task-next) {
    margin: .4rem 0 0;
    color: #40382e;
    font-size: clamp(.68rem, .88vw, .86rem);
    line-height: 1.28;
  }

  .board-surface-task-options {
    display: grid;
    gap: .42rem;
    margin-top: .64rem;
  }

  .board-surface-task--materials .board-surface-task-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .3rem;
  }

  .board-surface-task-choice {
    display: grid;
    gap: .16rem;
    padding: .56rem .62rem;
    border: 1px solid rgba(53, 43, 30, .34);
    color: #2f271d;
    background: rgba(255, 251, 240, .88);
    font-family: var(--hand);
    font-size: clamp(.66rem, .84vw, .82rem);
    line-height: 1.2;
    text-align: left;
  }

  .board-surface-task-choice:hover,
  .board-surface-task-choice:focus-visible,
  .board-surface-task-choice.selected {
    border-color: #3d7771;
    background: rgba(154, 190, 185, .62);
    box-shadow: 0 0 0 2px rgba(61, 119, 113, .12);
  }

  .board-surface-task-choice--direction strong {
    color: #211b15;
    font-family: var(--hand);
    font-size: inherit;
    font-weight: 700;
    line-height: 1.18;
  }

  .board-surface-task-choice--direction span {
    color: #5c5142;
    font-family: var(--body);
    font-size: clamp(.56rem, .68vw, .68rem);
    line-height: 1.24;
  }

  .board-surface-task-choice--direction b {
    color: #28524e;
    font-size: .88em;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .board-surface-task-material strong {
    color: #211b15;
    font-family: var(--display);
    font-size: clamp(.56rem, .7vw, .7rem);
    letter-spacing: .03em;
    text-transform: uppercase;
  }

  .board-surface-task-material span {
    color: #28524e;
    font-size: clamp(.44rem, .54vw, .54rem);
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  .board-surface-task-material em {
    display: none;
  }

  .board-surface-task--materials .board-surface-task-choice {
    min-height: 45px;
    padding: .4rem;
  }

  .board-surface-task .board-surface-authoring {
    margin-top: .6rem;
    padding-top: .5rem;
    border-top: 1px solid rgba(53, 43, 30, .18);
  }

  .board-surface-task-references {
    display: grid;
    gap: .28rem;
    margin-top: .06rem;
    padding-top: .48rem;
    border-top: 1px solid rgba(53, 43, 30, .18);
  }

  .board-surface-task-references > span {
    color: #28524e;
    font-size: clamp(.52rem, .66vw, .66rem);
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .board-surface-task-references > div {
    display: flex;
    flex-wrap: wrap;
    gap: .26rem;
  }

  .board-surface-task-references button {
    padding: .28rem .38rem;
    border: 1px solid rgba(37, 77, 75, .42);
    color: #244d49;
    background: rgba(219, 235, 230, .7);
    font-size: clamp(.5rem, .62vw, .62rem);
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .board-surface-task .board-authoring-form {
    margin-top: .44rem;
    padding: .58rem;
    background: rgba(232, 222, 200, .68);
  }

  .board-surface-task .board-authoring-form label,
  .board-surface-task .board-authoring-form textarea {
    color: #2f271d;
    font-size: clamp(.62rem, .78vw, .76rem);
  }

  .board-surface-task .board-authoring-form textarea {
    min-height: 64px;
    background: rgba(255, 251, 240, .9);
  }

  .board-surface-task-next {
    margin: .62rem 0 0;
    color: #28524e;
    font-size: clamp(.58rem, .72vw, .72rem);
    font-weight: 800;
    line-height: 1.2;
  }

  .board-surface-empty {
    width: 44%;
    background: rgba(242, 235, 218, .6);
  }

  .board-surface-empty p,
  .board-surface-detail > p {
    margin: 0;
    color: #40382e;
    font-family: var(--hand);
    font-size: clamp(.56rem, .76vw, .75rem);
    line-height: 1.25;
  }

  .board-surface-detail-items {
    display: grid;
    gap: .42rem;
    margin-top: .42rem;
  }

  .board-surface-detail-items article {
    display: grid;
    gap: .14rem;
    padding-top: .38rem;
    border-top: 1px solid rgba(53, 43, 30, .2);
  }

  .board-surface-detail-items strong {
    color: #30261c;
    font-size: clamp(.62rem, .8vw, .8rem);
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .board-surface-detail-items span,
  .board-surface-detail-items p {
    margin: 0;
    color: #62594d;
    font-size: clamp(.56rem, .7vw, .7rem);
    line-height: 1.22;
  }

  .board-surface-task-back {
    justify-self: start;
    margin-top: .48rem;
    padding: .3rem .42rem;
    border: 1px solid rgba(37, 77, 75, .46);
    color: #244d49;
    background: rgba(219, 235, 230, .76);
    font-size: clamp(.5rem, .66vw, .66rem);
    font-weight: 800;
    text-transform: uppercase;
  }

  .board-surface-detail-items b {
    color: #3f6b67;
    text-transform: uppercase;
  }

  .board-surface-detail-items .board-material-link {
    color: #5d4824;
    border-color: rgba(93, 72, 36, .46);
    background: rgba(229, 211, 164, .56);
    font-size: clamp(.48rem, .62vw, .62rem);
  }

  .board-surface-detail-items .board-material-link:hover,
  .board-surface-detail-items .board-material-link:focus-visible,
  .board-surface-detail-items .board-material-link.selected {
    color: #2f271d;
    background: rgba(210, 180, 111, .7);
  }

  .board-surface-dossiers {
    right: 3.6%;
    top: 11.8%;
    width: 21.5%;
    max-height: 61%;
    padding: .32rem;
    overflow-y: auto;
  }

  .board-surface-dossiers > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .3rem;
  }

  .board-surface-dossier {
    display: grid;
    gap: .12rem;
    min-height: 60px;
    padding: .46rem;
    border: 1px solid rgba(41, 35, 27, .32);
    color: #2d251c;
    background: rgba(239, 231, 211, .68);
    text-align: left;
  }

  .board-surface-dossier:hover,
  .board-surface-dossier:focus-visible,
  .board-surface-dossier.selected {
    border-color: #497c78;
    background: rgba(121, 164, 163, .48);
  }

  .board-surface-dossier strong {
    color: #2f271d;
    font-family: var(--display);
    font-size: clamp(.56rem, .72vw, .72rem);
    line-height: 1.06;
    text-transform: uppercase;
  }

  .board-surface-dossier span {
    color: #62594d;
    font-size: clamp(.5rem, .62vw, .62rem);
  }

  .board-surface-materials {
    left: 18%;
    right: 22%;
    bottom: 3.2%;
    height: 20.5%;
  }

  .board-surface-material-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: .24rem;
  }

  .board-surface-material-heading .eyebrow {
    margin: 0;
  }

  .board-surface-material-heading span {
    color: #5a5043;
    font-size: clamp(.44rem, .56vw, .57rem);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .board-surface-material-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: .38rem;
    height: calc(100% - 1.15rem);
  }

  .board-surface-material {
    display: grid;
    align-content: center;
    gap: .18rem;
    min-width: 0;
    padding: .32rem;
    border: 1px solid rgba(43, 35, 26, .35);
    color: #2f271d;
    background: rgba(238, 230, 211, .66);
    text-align: left;
  }

  .board-surface-material:hover,
  .board-surface-material:focus-visible,
  .board-surface-material.placed {
    border-color: #3d7771;
    background: rgba(121, 164, 163, .48);
    box-shadow: 0 0 0 1px rgba(63, 110, 105, .2);
  }

  .board-surface-material strong {
    color: #2d251c;
    font-family: var(--display);
    font-size: clamp(.5rem, .66vw, .66rem);
    line-height: 1.04;
    overflow-wrap: anywhere;
    text-transform: uppercase;
  }

  .board-surface-material em {
    color: #476d69;
    font-size: clamp(.44rem, .54vw, .54rem);
    font-style: normal;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .board-surface-material span {
    display: none;
  }
}

@media (max-width: 760px) {
  .game-shell[data-step="board"] .workspace {
    position: relative;
    width: calc(100% - 1rem);
    margin: .8rem .5rem 5.8rem;
    transform: none;
  }

  /* The full board is a long, touch-first workspace. Keep the kit reachable
     without letting a floating rail obscure theory, evidence, or Continue. */
  .game-shell[data-step="board"] .player-kit {
    position: static;
    width: max-content;
    max-width: calc(100% - 1rem);
    margin: .75rem auto;
    transform: none;
  }

.game-shell[data-step="board"] .board-zoom-points,
.game-shell[data-step="board"] .board-photo-pin-chassis {
  display: none;
}

  .board-control-surface {
    display: grid;
    gap: .72rem;
    padding: .8rem;
    border: 1px solid rgba(231, 224, 210, .22);
    background: rgba(8, 11, 10, .84);
    box-shadow: 0 16px 42px rgba(0, 0, 0, .3);
  }

  .board-surface-ledger,
  .board-surface-web,
  .board-surface-dossiers,
  .board-surface-materials {
    position: static;
  }

  .board-surface-progress,
  .board-surface-empty,
  .board-surface-detail,
  .board-surface-dossiers,
  .board-surface-materials {
    padding: .7rem;
    border: 1px solid rgba(231, 224, 210, .18);
    background: rgba(5, 7, 7, .34);
  }

  .board-surface-progress {
    display: grid;
    gap: .2rem;
    margin: .5rem 0;
  }

  .board-surface-progress strong,
  .board-surface-material strong,
  .board-surface-dossier strong {
    color: var(--paper);
  }

  .board-surface-progress span,
  .board-surface-empty p,
  .board-surface-detail > p,
  .board-surface-detail-items p,
  .board-surface-detail-items span,
  .board-surface-dossier span {
    color: var(--paper-soft);
  }

  .board-surface-web {
    display: grid;
    gap: .65rem;
  }

  .board-surface-task {
    display: grid;
    gap: .55rem;
    padding: .8rem;
    border: 1px solid rgba(231, 224, 210, .24);
    color: var(--paper);
    background: rgba(231, 224, 210, .08);
  }

  .board-surface-task .eyebrow,
  .board-surface-current-task .label {
    width: fit-content;
    margin: 0;
    padding: .16rem .3rem;
    color: #234946;
    background: rgba(240, 235, 221, .92);
  }

  .board-surface-task h2 {
    margin: 0;
    color: var(--paper);
    font-family: var(--hand);
    font-size: 1.2rem;
    line-height: 1.08;
  }

  .board-surface-task > p:not(.eyebrow):not(.board-surface-task-next) {
    margin: 0;
    color: var(--paper-soft);
    font-size: .86rem;
    line-height: 1.34;
  }

  .board-surface-task-options {
    display: grid;
    gap: .48rem;
  }

  .board-surface-task--materials .board-surface-task-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .board-surface-task-choice {
    display: grid;
    gap: .18rem;
    padding: .62rem;
    border: 1px solid rgba(231, 224, 210, .24);
    color: var(--paper);
    background: rgba(231, 224, 210, .08);
    font-family: var(--hand);
    font-size: .84rem;
    line-height: 1.22;
    text-align: left;
  }

  .board-surface-task-choice.selected {
    border-color: var(--blue);
    background: rgba(51, 79, 78, .7);
  }

  .board-surface-task-choice--direction strong {
    color: var(--paper);
  }

  .board-surface-task-choice--direction span {
    color: var(--paper-soft);
    font-family: var(--body);
    font-size: .7rem;
    line-height: 1.28;
  }

  .board-surface-task-choice--direction b {
    color: var(--blue);
    font-size: .88em;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .board-surface-task-material strong {
    color: var(--paper);
    font-family: var(--display);
    font-size: .68rem;
    text-transform: uppercase;
  }

  .board-surface-task-material span,
  .board-surface-task-next {
    color: var(--blue);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .board-surface-task-material em {
    color: var(--paper-soft);
    font-family: var(--body);
    font-size: .68rem;
    font-style: normal;
    line-height: 1.25;
  }

  .board-surface-task .board-authoring-form {
    padding: .6rem;
    background: rgba(231, 224, 210, .08);
  }

  .board-surface-task-references {
    display: grid;
    gap: .3rem;
    padding-top: .58rem;
    border-top: 1px solid rgba(231, 224, 210, .18);
  }

  .board-surface-task-references > span {
    color: var(--blue);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  .board-surface-task-references > div {
    display: flex;
    flex-wrap: wrap;
    gap: .32rem;
  }

  .board-surface-task-references button {
    padding: .38rem .48rem;
    border: 1px solid rgba(130, 181, 175, .58);
    color: var(--paper);
    background: rgba(51, 79, 78, .58);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .board-surface-task .board-authoring-form textarea {
    min-height: 72px;
    color: var(--ink);
    background: rgba(245, 240, 226, .94);
  }

  .board-surface-task-back {
    justify-self: start;
    padding: .42rem .56rem;
    border: 1px solid var(--blue);
    color: var(--paper);
    background: rgba(51, 79, 78, .58);
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase;
  }

  .board-surface-photo {
    width: min(260px, 100%);
    margin: 0 auto;
    padding: .35rem;
    border: 1px solid rgba(231, 224, 210, .3);
    background: rgba(231, 224, 210, .9);
  }

  .board-surface-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .board-surface-photo figcaption {
    color: var(--ink);
    font-size: .62rem;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
  }

  .board-surface-dossiers > div,
  .board-surface-material-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
  }

  .board-surface-dossier,
  .board-surface-material {
    display: grid;
    gap: .2rem;
    min-height: 62px;
    padding: .55rem;
    border: 1px solid rgba(231, 224, 210, .2);
    color: var(--paper);
    background: rgba(231, 224, 210, .06);
    text-align: left;
  }

  .board-surface-dossier.selected,
  .board-surface-material.placed {
    border-color: var(--blue);
    background: rgba(51, 79, 78, .58);
  }

  .board-surface-material em,
  .board-surface-dossier span {
    color: var(--blue);
    font-size: .58rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .board-surface-material span {
    display: none;
  }

  .board-surface-material-heading {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
  }

  .board-surface-material-heading .eyebrow {
    margin: 0;
  }

  .board-surface-material-heading span {
    color: var(--paper-soft);
    font-size: .62rem;
  }
}

/* Board access is always legible: a player may inspect the record, while
   a clear lock and authored reason distinguish unavailable case actions. */
.board-access-state {
  display: inline-flex;
  align-items: center;
  gap: .18rem;
  width: fit-content;
  color: #2c5b56;
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.15;
  text-transform: uppercase;
}

.board-access-state svg {
  width: .78rem;
  height: .78rem;
}

.board-access-state--read-only,
.board-access-state--not-collected {
  color: #665b4b;
}

.board-surface-dossier--read-only,
.board-surface-dossier--not-collected,
.board-surface-material--read-only,
.board-surface-material--not-collected,
.board-surface-material--locked {
  filter: saturate(.56);
  opacity: .72;
}

.board-surface-dossier small,
.board-surface-material small,
.board-material-lock-note small {
  display: block;
  margin-top: .14rem;
  color: inherit;
  font-family: var(--body);
  font-size: .52rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.16;
  text-transform: none;
}

.board-surface-material:disabled {
  cursor: not-allowed;
}

.board-material-lock-note {
  display: grid;
  gap: .12rem;
  margin-top: .22rem;
}

.board-control-surface--awaiting .board-surface-task {
  pointer-events: auto;
}

/* Touch devices need room to act without making the illustrated interface
   visually heavier. Keep map pins visually small while enlarging their hit box. */
button,
input,
select,
textarea {
  touch-action: manipulation;
}

@media (pointer: coarse) {
  .primary-button,
  .choice-button,
  .object-choice,
  .ghost-button,
  .pin-key,
  .hotspot,
  .chip,
  .scene-back,
  .audio-toggle,
  .tool-map-link,
  .board-material-link,
  .board-surface-task-choice,
  .board-surface-task-references button,
  .board-surface-task-back,
  .board-surface-dossier,
  .board-surface-material,
  .board-intro-guide button,
  .tool-message-replay {
    min-height: 44px;
  }

  .scene-back {
    min-width: 44px;
  }

  .player-kit-button {
    width: 44px;
    height: 44px;
  }

  .map-location-marker {
    width: 44px;
    height: 44px;
  }

  .map-location-marker-core {
    width: 17px;
    height: 17px;
    margin: auto;
  }

  .map-location-marker.is-lead::after,
  .map-location-marker.is-focused::before {
    inset: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .map-location-marker.is-lead::after {
    width: 29px;
    height: 29px;
  }

  .map-location-marker.is-focused::before {
    width: 27px;
    height: 27px;
  }

  .map-location-marker.is-current.is-focused::before {
    transform: translate(-50%, -50%);
  }

  .map-location-marker:not(.is-upper-map) .map-location-marker-label {
    bottom: calc(50% + 14px);
  }

  .map-location-marker.is-upper-map .map-location-marker-label {
    top: calc(50% + 14px);
  }
}

/* Quiet examination affordances.
   Investigation targets should read as part of the illustration at rest. Their
   hit areas remain intentionally generous; a warm edge and label appear only
   when a player rests a pointer, keyboard focus, or touch on one. */
.scene-hotspot,
.paint-halo,
.board-zoom-points button {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  transition: none;
}

.scene-hotspot::before,
.scene-hotspot::after,
.paint-halo::before,
.board-zoom-points button::before {
  opacity: 0;
}

.scene-hotspot span,
.guided-hotspots .scene-hotspot span,
.paint-halo span,
.board-zoom-points button span {
  opacity: 0;
  pointer-events: none;
  transition: none;
}

.scene-hotspot:hover,
.scene-hotspot:focus-visible,
.scene-hotspot:active,
.paint-halo:hover,
.paint-halo:focus-visible,
.paint-halo:active,
.board-zoom-points button:hover,
.board-zoom-points button:focus-visible,
.board-zoom-points button:active {
  border-color: rgba(242, 211, 145, .44);
  background: radial-gradient(ellipse at center, rgba(255, 239, 196, .1), rgba(215, 165, 82, .045) 58%, transparent 78%);
  box-shadow: 0 0 14px rgba(235, 192, 111, .2), inset 0 0 12px rgba(255, 239, 196, .08);
}

.scene-hotspot:hover span,
.scene-hotspot:focus-visible span,
.scene-hotspot:active span,
.paint-halo:hover span,
.paint-halo:focus-visible span,
.paint-halo:active span,
.board-zoom-points button:hover span,
.board-zoom-points button:focus-visible span,
.board-zoom-points button:active span {
  opacity: 1;
}

.scene-hotspot.done {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  opacity: 1;
}

/* Day One cabinet Board Mode.
   The cabinet itself remains the illustrated surface. Live case data is placed
   only on physical planes already present in that art: the left notebook,
   central map, right-hand people files, lower tray, and top tool marks. */
@media (min-width: 761px) {
  .game-shell[data-step="board"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .game-shell[data-step="board"] .case-state {
    display: none;
  }

  .game-shell[data-step="board"] .scene-image {
    object-fit: contain;
    background: #090b0c;
    filter: saturate(.98) contrast(1.01) brightness(1.03);
  }

  .game-shell[data-step="board"] .scene-wash {
    background: rgba(5, 8, 8, .08);
  }

  .game-shell[data-step="board"] .scene-vignette {
    box-shadow: none;
  }

  .game-shell[data-step="board"] .workspace {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: block;
    width: min(100%, 150svh);
    height: auto;
    max-height: 100svh;
    aspect-ratio: 3 / 2;
    margin: auto;
    transform: none;
    pointer-events: none;
  }

  .casework-cabinet-live {
    position: relative;
    width: 100%;
    height: 100%;
    color: #2b2117;
    pointer-events: none;
  }

  .casework-cabinet-ledger {
    position: absolute;
    left: 7.2%;
    top: 17.6%;
    width: 17.3%;
    max-height: 56%;
    padding: .8% 1.05%;
    overflow: auto;
    color: #2b2117;
    pointer-events: auto;
    scrollbar-color: rgba(77, 59, 37, .72) transparent;
    scrollbar-width: thin;
  }

  .casework-cabinet-ledger .eyebrow,
  .casework-cabinet-ledger .label {
    display: inline-flex;
    width: fit-content;
    margin: 0 0 .28rem;
    padding: .12rem .24rem;
    border: 1px solid rgba(62, 79, 69, .32);
    color: #2d5753;
    background: rgba(250, 243, 224, .8);
    font-size: clamp(.46rem, .62vw, .64rem);
  }

  .casework-cabinet-ledger .board-surface-progress,
  .casework-cabinet-ledger .board-surface-current-task,
  .casework-cabinet-ledger .board-surface-task,
  .casework-cabinet-ledger .board-surface-detail,
  .casework-cabinet-direction {
    position: static;
    box-sizing: border-box;
    width: 100%;
    max-height: none;
    margin: 0 0 .38rem;
    padding: .42rem;
    overflow: visible;
    border: 1px solid rgba(63, 49, 33, .24);
    background: rgba(248, 241, 222, .7);
    box-shadow: none;
    color: #2b2117;
  }

  .casework-cabinet-ledger .board-surface-progress {
    display: grid;
    gap: .12rem;
  }

  .casework-cabinet-ledger .board-surface-progress strong {
    color: #2b2117;
    font-size: clamp(.58rem, .78vw, .78rem);
  }

  .casework-cabinet-ledger .board-surface-progress span,
  .casework-cabinet-ledger .board-surface-current-task span,
  .casework-cabinet-ledger .board-surface-task-next,
  .casework-cabinet-ledger .board-surface-detail p,
  .casework-cabinet-ledger .board-surface-detail-items p,
  .casework-cabinet-ledger .board-surface-detail-items span {
    color: #584b3b;
    font-size: clamp(.48rem, .61vw, .62rem);
    line-height: 1.22;
  }

  .casework-cabinet-ledger .board-surface-current-task strong,
  .casework-cabinet-ledger .board-surface-task h2,
  .casework-cabinet-ledger .board-surface-detail-items strong {
    color: #2b2117;
    font-size: clamp(.62rem, .82vw, .82rem);
  }

  .casework-cabinet-ledger .board-surface-task {
    display: grid;
    gap: .35rem;
  }

  .casework-cabinet-ledger .board-surface-task h2 {
    margin: 0;
    font-family: var(--hand);
    line-height: 1.08;
  }

  .casework-cabinet-ledger .board-surface-task > p:not(.eyebrow):not(.board-surface-task-next) {
    margin: 0;
    color: #483c2f;
    font-size: clamp(.5rem, .64vw, .65rem);
    line-height: 1.24;
  }

  .casework-cabinet-ledger .board-surface-task-options,
  .casework-cabinet-ledger .board-surface-task--materials .board-surface-task-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: .25rem;
    margin: 0;
  }

  .casework-cabinet-ledger .board-surface-task-choice {
    padding: .3rem .36rem;
    border-color: rgba(63, 49, 33, .28);
    color: #33281d;
    background: rgba(255, 250, 237, .8);
    font-size: clamp(.48rem, .61vw, .62rem);
  }

  .casework-cabinet-ledger .board-surface-task-choice:hover,
  .casework-cabinet-ledger .board-surface-task-choice:focus-visible,
  .casework-cabinet-ledger .board-surface-task-choice.selected {
    border-color: rgba(179, 136, 63, .72);
    background: rgba(235, 214, 159, .78);
    box-shadow: 0 0 8px rgba(201, 157, 79, .2);
  }

  .casework-cabinet-ledger .board-surface-task-material strong,
  .casework-cabinet-ledger .board-surface-task-material span,
  .casework-cabinet-ledger .board-surface-task-material em {
    font-size: inherit;
  }

  .casework-cabinet-ledger .board-surface-task-material em {
    display: none;
  }

  .casework-cabinet-ledger .board-surface-task-references,
  .casework-cabinet-ledger .board-surface-authoring {
    margin-top: .16rem;
    padding-top: .28rem;
  }

  .casework-cabinet-ledger .board-surface-task-references button,
  .casework-cabinet-ledger .board-surface-task-back,
  .casework-cabinet-ledger .board-material-link,
  .casework-cabinet-direction button {
    padding: .2rem .28rem;
    border: 1px solid rgba(55, 83, 76, .48);
    color: #274d49;
    background: rgba(213, 230, 221, .54);
    font-size: clamp(.44rem, .56vw, .56rem);
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .casework-cabinet-ledger .board-authoring-form {
    padding: .34rem;
    background: rgba(253, 247, 230, .66);
  }

  .casework-cabinet-ledger .board-authoring-form textarea {
    min-height: 46px;
    color: #2b2117;
    background: rgba(255, 252, 241, .86);
    font-size: clamp(.5rem, .62vw, .64rem);
  }

  .casework-cabinet-direction {
    display: grid;
    gap: .26rem;
  }

  .casework-cabinet-direction p {
    display: grid;
    gap: .12rem;
    margin: 0;
    color: #4c4032;
    font-size: clamp(.48rem, .6vw, .62rem);
    line-height: 1.2;
  }

  .casework-cabinet-direction b {
    color: #2d5753;
    font-size: .9em;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .casework-cabinet-field-note {
    display: grid;
    gap: .14rem;
    width: 100%;
    margin: 0 0 .36rem;
    padding: .38rem;
    border: 1px solid rgba(45, 87, 83, .38);
    color: #2b2117;
    background: rgba(250, 243, 224, .76);
    box-shadow: none;
    cursor: pointer;
    text-align: left;
  }

  .casework-cabinet-field-note > span {
    color: #2d5753;
    font-size: clamp(.42rem, .55vw, .56rem);
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .casework-cabinet-field-note strong {
    display: -webkit-box;
    overflow: hidden;
    color: #3a3026;
    font-family: var(--hand);
    font-size: clamp(.5rem, .64vw, .64rem);
    font-weight: 700;
    line-height: 1.16;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .casework-cabinet-field-note em {
    color: #4c5d58;
    font-size: clamp(.4rem, .51vw, .52rem);
    font-style: normal;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .casework-cabinet-field-note:hover,
  .casework-cabinet-field-note:focus-visible {
    border-color: rgba(179, 136, 63, .72);
    background: rgba(253, 247, 230, .92);
    outline: 0;
  }

  .casework-cabinet-map,
  .casework-cabinet-tools,
  .casework-cabinet-people,
  .casework-cabinet-tray {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .casework-cabinet-material,
  .casework-cabinet-tool,
  .casework-cabinet-lens,
  .casework-cabinet-person {
    position: absolute;
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    pointer-events: auto;
    transition: filter .16s ease, transform .16s ease, box-shadow .16s ease;
  }

  .casework-cabinet-material:hover,
  .casework-cabinet-material:focus-visible,
  .casework-cabinet-material.is-current,
  .casework-cabinet-tool:hover,
  .casework-cabinet-tool:focus-visible,
  .casework-cabinet-tool.is-current,
  .casework-cabinet-lens:hover,
  .casework-cabinet-lens:focus-visible,
  .casework-cabinet-lens.is-current,
  .casework-cabinet-person:hover,
  .casework-cabinet-person:focus-visible,
  .casework-cabinet-person.is-current {
    outline: 0;
    filter: brightness(1.08) drop-shadow(0 0 7px rgba(245, 203, 113, .54));
  }

  .casework-cabinet-material--map {
    background-size: contain;
  }

  .casework-cabinet-material--map.casework-cabinet-material--field { left: 31.8%; top: 61.8%; width: 8%; height: 13%; }
  .casework-cabinet-material--map.casework-cabinet-material--photo { left: 42.3%; top: 51.3%; width: 12.2%; height: 14.4%; background-size: cover; }
  .casework-cabinet-material--map.casework-cabinet-material--source { left: 56.4%; top: 56%; width: 11.8%; height: 14.2%; background-size: contain; }
  .casework-cabinet-material--map.casework-cabinet-material--voicemail { left: 61%; top: 44.6%; width: 12.6%; height: 18%; background-size: contain; }

  .casework-cabinet-material--tray { bottom: 7.2%; height: 8.6%; background-size: contain; }
  .casework-cabinet-material--tray.casework-cabinet-material--photo { left: 19.2%; width: 10.4%; background-size: cover; }
  .casework-cabinet-material--tray.casework-cabinet-material--field { left: 41.6%; width: 12.2%; }
  .casework-cabinet-material--tray.casework-cabinet-material--source { left: 55.1%; width: 7.8%; background-size: 112% auto; }
  .casework-cabinet-material--tray.casework-cabinet-material--voicemail { left: 65.2%; width: 13.5%; }

  .casework-cabinet-tool { top: 4.7%; width: 7.1%; height: 6.8%; }
  .casework-cabinet-tool--notebook { left: 28.1%; }
  .casework-cabinet-tool--files { left: 37.4%; }
  .casework-cabinet-tool--people { left: 46.7%; }
  .casework-cabinet-tool--places { left: 56%; }
  .casework-cabinet-tool--audio { left: 65.3%; }
  .casework-cabinet-lens { left: 83%; top: 2.4%; width: 12.5%; height: 9.5%; }

  /* Match the four physical folder pockets in the v1.5 cabinet chassis. */
  .casework-cabinet-person { left: 80.2%; width: 10.4%; background-size: cover; }
  .casework-cabinet-person--shane { top: 16.7%; height: 14.5%; background-position: 52% 38%; }
  .casework-cabinet-person--sophia { top: 32.4%; height: 14.4%; background-position: center; }
  .casework-cabinet-person--ellie { top: 49.6%; height: 15%; background-position: center; }
  .casework-cabinet-person--caller {
    top: 67.8%;
    height: 13.2%;
    background: radial-gradient(circle at 50% 38%, rgba(243, 225, 177, .8) 0 8%, transparent 9%), radial-gradient(ellipse at 50% 73%, rgba(243, 225, 177, .72) 0 20%, transparent 21%);
    opacity: .78;
  }
}

/* The end-of-day casework table is a full playable surface between the dock
   return and the shared cabinet. It owns its own scroll and controls. */
.game-shell[data-step="caseworkWorkspace"] {
  grid-template-columns: minmax(0, 1fr);
}
.game-shell[data-step="caseworkWorkspace"] .case-state,
.game-shell[data-step="caseworkWorkspace"] .player-kit,
.game-shell[data-step="caseworkWorkspace"] .player-kit-popover,
.game-shell[data-step="caseworkWorkspace"] .dialogue-panel,
.game-shell[data-step="caseworkWorkspace"] .scene-back {
  display: none;
}
.game-shell[data-step="caseworkWorkspace"] .workspace {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  transform: none;
  pointer-events: auto;
}
.casework-workspace-embed,
.casework-workspace-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #111513;
}

/* Housing tour close-ups deliberately exclude Marlene. Keep her authored lines
   readable without falsely assigning a tail to an object or an empty frame. */
.game-shell[data-step="housingDowntown"] .dialogue-panel[data-mode="caption"],
.game-shell[data-step="housingWarehouse"] .dialogue-panel[data-mode="caption"],
.game-shell[data-step="housingBrownstone"] .dialogue-panel[data-mode="caption"],
.game-shell[data-step="housingPaperwork"] .dialogue-panel[data-mode="caption"],
.game-shell[data-step="housingFirstLook"] .dialogue-panel[data-mode="caption"] {
  /* Keep off-camera Marlene narration below the game chrome and away from the
     apartment detail the player is inspecting. */
  top: clamp(4.8rem, 10vh, 5.75rem);
  right: auto;
  bottom: auto;
  left: clamp(1rem, 4vw, 3rem);
  width: min(430px, calc(100% - 2rem));
  max-width: min(430px, calc(100% - 2rem));
  padding: .72rem .9rem;
  border: 2px solid rgba(231, 224, 210, .78);
  background: rgba(8, 11, 10, .78);
  color: var(--paper);
  box-shadow: 0 10px 0 rgba(0, 0, 0, .18), 0 18px 44px rgba(0, 0, 0, .34);
  transform: none;
}
.game-shell[data-step="housingDowntown"] .dialogue-panel[data-mode="caption"] .line,
.game-shell[data-step="housingWarehouse"] .dialogue-panel[data-mode="caption"] .line,
.game-shell[data-step="housingBrownstone"] .dialogue-panel[data-mode="caption"] .line,
.game-shell[data-step="housingPaperwork"] .dialogue-panel[data-mode="caption"] .line,
.game-shell[data-step="housingFirstLook"] .dialogue-panel[data-mode="caption"] .line {
  max-width: none;
}

/* The close placard frame deliberately excludes Ellie. Keep her exact dialogue
   attributed, but do not aim a tail at the container as if it were speaking. */
.game-shell[data-step="camera"] .dialogue-panel[data-mode="caption"] {
  top: auto;
  right: auto;
  bottom: clamp(1rem, 4vh, 2rem);
  left: clamp(1rem, 4vw, 3rem);
  width: min(270px, calc(100% - 2rem));
  padding: .58rem .72rem;
  background: rgba(8, 11, 10, .82);
}
.game-shell[data-step="camera"] .dialogue-panel[data-mode="caption"] .speaker {
  display: block;
  color: var(--paper-muted);
}

/* Cafe counter speaker lock. This is deliberately after the earlier placement
   experiments: Sven is the right-side counter worker, never the left-side
   group conversation. */
@media (min-width: 761px) {
  .game-shell[data-step="cafeSvenCoffeeQuestion"] .dialogue-panel[data-speaker-key="sven"],
  .game-shell[data-step="cafeSvenCoffeeReply"] .dialogue-panel[data-speaker-key="sven"],
  .game-shell[data-step="cafeSvenBeans"] .dialogue-panel[data-speaker-key="sven"],
  .game-shell[data-step="cafeSvenFeature"] .dialogue-panel[data-speaker-key="sven"],
  .game-shell[data-step="cafeSvenRecommendation"] .dialogue-panel[data-speaker-key="sven"],
  .game-shell[data-step="cafeSvenRecommendationSven"] .dialogue-panel[data-speaker-key="sven"] {
    left: clamp(29rem, 42vw, 34rem);
    right: auto;
    top: clamp(.35rem, 1vh, .7rem);
    bottom: auto;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
  }

  .game-shell[data-step="cafeSvenCoffeeQuestion"] .dialogue-panel[data-speaker-key="sven"],
  .game-shell[data-step="cafeSvenBeans"] .dialogue-panel[data-speaker-key="sven"],
  .game-shell[data-step="cafeSvenRecommendationSven"] .dialogue-panel[data-speaker-key="sven"],
  .game-shell[data-step="cafeSvenCoffeeReply"] .dialogue-panel[data-speaker-key="sven"][data-line-count="one"] {
    width: 250px;
    height: 82px;
    min-height: 82px;
    padding: .7rem 1.36rem .86rem;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-right-placement-margin-fix.png");
  }

  .game-shell[data-step="cafeSvenCoffeeReply"] .dialogue-panel[data-speaker-key="sven"][data-line-count="two"] {
    width: 294px;
    height: 116px;
    min-height: 116px;
    padding: .8rem 1.48rem .96rem;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png");
  }

  .game-shell[data-step="cafeSvenCoffeeReply"] .dialogue-panel[data-speaker-key="sven"][data-line-count="three"],
  .game-shell[data-step="cafeSvenFeature"] .dialogue-panel[data-speaker-key="sven"],
  .game-shell[data-step="cafeSvenRecommendation"] .dialogue-panel[data-speaker-key="sven"] {
    width: 280px;
    height: 96px;
    min-height: 96px;
    padding: .58rem 1.3rem .72rem;
    border: 3px solid #1c1611;
    border-radius: 44px;
    background: #f4efe4;
    box-shadow: none;
    transform: rotate(-.4deg);
  }

  .game-shell[data-step="cafeSvenCoffeeReply"] .dialogue-panel[data-speaker-key="sven"][data-line-count="three"]::after,
  .game-shell[data-step="cafeSvenFeature"] .dialogue-panel[data-speaker-key="sven"]::after,
  .game-shell[data-step="cafeSvenRecommendation"] .dialogue-panel[data-speaker-key="sven"]::after {
    display: block;
    left: 62%;
    bottom: -27px;
    width: 0;
    height: 0;
    border: 16px solid transparent;
    border-top-color: #1c1611;
    transform: rotate(-10deg);
  }

  .game-shell[data-step="cafeSvenCoffeeReply"] .dialogue-panel[data-speaker-key="sven"][data-line-count="three"]::before,
  .game-shell[data-step="cafeSvenFeature"] .dialogue-panel[data-speaker-key="sven"]::before,
  .game-shell[data-step="cafeSvenRecommendation"] .dialogue-panel[data-speaker-key="sven"]::before {
    display: block;
    z-index: 1;
    left: calc(62% + 3px);
    bottom: -20px;
    width: 0;
    height: 0;
    border: 12px solid transparent;
    border-top-color: #f4efe4;
    transform: rotate(-10deg);
  }

  .game-shell[data-step="cafeSvenCoffeeReply"] .dialogue-panel[data-speaker-key="sven"][data-line-count="three"] .line,
  .game-shell[data-step="cafeSvenFeature"] .dialogue-panel[data-speaker-key="sven"] .line,
  .game-shell[data-step="cafeSvenRecommendation"] .dialogue-panel[data-speaker-key="sven"] .line {
    max-width: 25ch;
    font-size: .8rem;
    line-height: 1.02;
  }
}

.phone-ui .audio-transcript {
  margin: .7rem 0;
  border: 1px solid rgba(237, 229, 209, .28);
  background: rgba(2, 6, 6, .24);
}
.phone-ui .audio-transcript summary {
  padding: .55rem .7rem;
  color: var(--paper);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.phone-ui .audio-transcript p {
  margin: 0;
  padding: 0 .7rem .7rem;
  color: var(--paper-muted);
  font-size: .92rem;
  line-height: 1.38;
}
@media (max-width: 760px) {
  .game-shell[data-step="caseworkWorkspace"] .workspace {
    position: relative;
    min-height: 100svh;
  }
  .casework-workspace-embed,
  .casework-workspace-frame {
    min-height: 100svh;
  }
}

/* Definitive desktop speaker placement. This appears at EOF intentionally: the
   prototype contains historical placement experiments above it. */
@media (min-width: 761px) {
  .game-shell[data-step="cafeOriginInterior"] .dialogue-panel[data-speaker-key="sophia"],
  .game-shell[data-step="cafeSophiaSvenTease"] .dialogue-panel[data-speaker-key="sophia"] {
    left: clamp(17rem, 27vw, 22rem);
    top: clamp(7rem, 13vh, 9rem);
    width: 330px;
    min-height: 116px;
    padding: 1.04rem 1.78rem 1.14rem;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
  }

  .game-shell[data-step="cafeSophiaBehave"] .dialogue-panel[data-speaker-key="sophia"] {
    left: clamp(17rem, 27vw, 22rem);
    top: clamp(7rem, 13vh, 9rem);
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-left-placement-margin-fix.png");
  }

  .game-shell[data-step="ellieIntro"] .dialogue-panel[data-speaker-key="ellie"],
  .game-shell[data-step="ellieFactual"] .dialogue-panel[data-speaker-key="ellie"],
  .game-shell[data-step="ellieCharmed"] .dialogue-panel[data-speaker-key="ellie"],
  .game-shell[data-step="elliePlayerResponse"] .dialogue-panel[data-speaker-key="ellie"],
  .game-shell[data-step="ellie"] .dialogue-panel[data-speaker-key="ellie"],
  .game-shell[data-step="ellieOdd"] .dialogue-panel[data-speaker-key="ellie"] {
    left: clamp(22rem, 31vw, 26rem);
    right: auto;
    top: clamp(3.5rem, 9vh, 5rem);
    bottom: auto;
    width: 300px;
    max-width: min(300px, calc(100% - 2rem));
    min-height: 100px;
    padding: .86rem 1.42rem .98rem;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-right-placement-margin-fix.png");
  }

  .game-shell[data-step="ellieIntro"] .dialogue-panel[data-speaker-key="ellie"] {
    width: 205px;
    max-width: min(205px, calc(100% - 2rem));
    min-height: 82px;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-right-placement-margin-fix.png");
  }

  .game-shell[data-step="ellieFactual"] .dialogue-panel[data-speaker-key="ellie"],
  .game-shell[data-step="ellieCharmed"] .dialogue-panel[data-speaker-key="ellie"] {
    width: 300px;
    max-width: min(300px, calc(100% - 2rem));
  }

  .game-shell[data-step="elliePlayerResponse"] .dialogue-panel[data-speaker-key="ellie"] {
    width: 320px;
    max-width: min(320px, calc(100% - 2rem));
    min-height: 132px;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
  }

  /* The current populated desk plate uses one stable 16:9 composition. These
     fields sit over the actual objects, with hover light but no "click here" ring. */
  .game-shell[data-step="officeTourDesk"] .desk-tool-hotspots [data-tool="files"],
  .game-shell[data-step="tools"] .desk-tool-hotspots [data-tool="files"] {
    left: 1.5%;
    top: 68%;
    width: 22%;
    height: 16%;
    z-index: 2;
  }

  .game-shell[data-step="officeTourDesk"] .desk-tool-hotspots [data-tool="note"],
  .game-shell[data-step="tools"] .desk-tool-hotspots [data-tool="note"] {
    left: 22.5%;
    top: 69%;
    width: 27%;
    height: 18%;
    z-index: 1;
  }

  .game-shell[data-step="officeTourDesk"] .desk-tool-hotspots [data-tool="keys"],
  .game-shell[data-step="tools"] .desk-tool-hotspots [data-tool="keys"] {
    left: 26.5%;
    top: 75%;
    width: 8%;
    height: 10%;
    z-index: 4;
  }

  .game-shell[data-step="officeTourDesk"] .desk-tool-hotspots [data-tool="camera"],
  .game-shell[data-step="tools"] .desk-tool-hotspots [data-tool="camera"] {
    left: 15.5%;
    top: 71%;
    width: 9.5%;
    height: 15%;
    z-index: 3;
  }

  .game-shell[data-step="officeTourDesk"] .desk-tool-hotspots [data-tool="phone"],
  .game-shell[data-step="tools"] .desk-tool-hotspots [data-tool="phone"] {
    left: 70%;
    top: 63%;
    width: 20%;
    height: 22%;
    z-index: 3;
  }

  .game-shell[data-step="officeTourDesk"] .desk-tool-hotspots .scene-hotspot,
  .game-shell[data-step="tools"] .desk-tool-hotspots .scene-hotspot {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    opacity: .5;
  }

  .game-shell[data-step="officeTourDesk"] .desk-tool-hotspots .scene-hotspot:hover,
  .game-shell[data-step="officeTourDesk"] .desk-tool-hotspots .scene-hotspot:focus-visible,
  .game-shell[data-step="tools"] .desk-tool-hotspots .scene-hotspot:hover,
  .game-shell[data-step="tools"] .desk-tool-hotspots .scene-hotspot:focus-visible {
    border-color: transparent;
    background: radial-gradient(ellipse at center, rgba(255, 239, 196, .18), rgba(215, 165, 82, .065) 56%, transparent 78%);
    box-shadow: 0 0 22px rgba(235, 192, 111, .42), inset 0 0 16px rgba(255, 239, 196, .13);
    opacity: 1;
    transform: none;
  }

  .game-shell[data-step="officeTourDesk"] .workspace {
    width: min(250px, calc(100% - 2rem));
    margin: clamp(.8rem, 2vh, 1.35rem) 0 11rem 44%;
  }

  .game-shell[data-step="officeTourDesk"] .desk-caption {
    width: 100%;
    margin: 0;
  }

  /* Sophia stands just left of the cabinet in the early board reveal. Keep her
     dialogue in the clear door/floor space to her left and aim tails back right. */
  .game-shell[data-step="boardShared"] .dialogue-panel[data-speaker-key="sophia"],
  .game-shell[data-step="boardTheoryImprove"] .dialogue-panel[data-speaker-key="sophia"],
  .game-shell[data-step="boardDecoratingNo"] .dialogue-panel[data-speaker-key="sophia"] {
    left: clamp(20rem, 28vw, 24rem);
    right: auto;
    top: clamp(2rem, 5vh, 3.4rem);
    bottom: auto;
    width: 285px;
    max-width: min(285px, calc(100% - 2rem));
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png");
  }

  .game-shell[data-step="boardDecorating"] .dialogue-panel[data-speaker-key="sophia"] {
    left: clamp(17rem, 24vw, 21rem);
    right: auto;
    top: clamp(1.3rem, 3vh, 2.2rem);
    bottom: auto;
    width: 350px;
    max-width: min(350px, calc(100% - 2rem));
    min-height: 132px;
    padding: .98rem 1.65rem 1.12rem;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
  }
}

/* Evidence tools use the same pinpoint edge-glint language as the player desk.
   An approximate shape must never tint the prop or pretend to be its outline. */
.game-shell[data-step="evidenceRule"] .evidence-tool-hotspots .scene-hotspot {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.game-shell[data-step="evidenceRule"] .evidence-tool-hotspots .scene-hotspot::before {
  inset: auto !important;
  left: var(--evidence-cue-x, 88%);
  top: var(--evidence-cue-y, 12%);
  width: 11px;
  height: 11px;
  display: block;
  border: 0;
  border-radius: 50%;
  clip-path: none;
  background: radial-gradient(circle, rgba(255, 249, 220, .98) 0 12%, rgba(245, 205, 121, .78) 24%, rgba(245, 205, 121, .16) 52%, transparent 72%);
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
  transition: filter .16s ease, opacity .16s ease;
}

.game-shell[data-step="evidenceRule"] .evidence-tool-hotspots .scene-hotspot::after {
  display: none;
}

.game-shell[data-step="evidenceRule"] .evidence-tool-hotspots .scene-hotspot:hover,
.game-shell[data-step="evidenceRule"] .evidence-tool-hotspots .scene-hotspot:focus-visible {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.game-shell[data-step="evidenceRule"] .evidence-tool-hotspots .scene-hotspot:hover::before,
.game-shell[data-step="evidenceRule"] .evidence-tool-hotspots .scene-hotspot:focus-visible::before {
  border: 0;
  background: radial-gradient(circle, rgba(255, 249, 220, .98) 0 12%, rgba(245, 205, 121, .78) 24%, rgba(245, 205, 121, .16) 52%, transparent 72%);
  filter: drop-shadow(0 0 5px rgba(240, 192, 90, .72));
  opacity: .9;
}

.game-shell[data-step="evidenceRule"] .evidence-tool-hotspots .scene-hotspot > span {
  display: block;
  z-index: 5;
  border-color: rgba(235, 207, 151, .42);
  background: rgba(8, 11, 10, .88);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .28);
}

.game-shell[data-step="evidenceRule"] .evidence-tool-hotspots .scene-hotspot:hover > span,
.game-shell[data-step="evidenceRule"] .evidence-tool-hotspots .scene-hotspot:focus-visible > span {
  opacity: 1;
}

.evidence-tool-hotspots [data-evidence-tool="folders"] {
  left: 54.5% !important;
  top: 49% !important;
  width: 18.5% !important;
  height: 29.5% !important;
  z-index: 2;
  --evidence-cue-x: 91%;
  --evidence-cue-y: 9%;
}

.evidence-tool-hotspots [data-evidence-tool="bags"] {
  left: 25.5% !important;
  top: 55% !important;
  width: 29.5% !important;
  height: 31% !important;
  z-index: 2;
  --evidence-cue-x: 91%;
  --evidence-cue-y: 9%;
}

.evidence-tool-hotspots [data-evidence-tool="gloves"] {
  left: 32.5% !important;
  top: 42.5% !important;
  width: 21.5% !important;
  height: 20% !important;
  z-index: 3;
  --evidence-cue-x: 88%;
  --evidence-cue-y: 15%;
}

.evidence-tool-hotspots [data-evidence-tool="labeler"] {
  left: 76.5% !important;
  top: 42% !important;
  width: 16% !important;
  height: 28% !important;
  z-index: 2;
  --evidence-cue-x: 88%;
  --evidence-cue-y: 10%;
}

.game-shell[data-step="toolInspect"] .item-field-note,
.game-shell[data-step="evidenceInspect"] .item-field-note {
  width: min(390px, calc(100% - 2rem));
  max-height: min(55svh, 430px);
  overflow-y: auto;
  scrollbar-gutter: stable;
  background: linear-gradient(165deg, rgba(29, 31, 27, .94), rgba(10, 13, 12, .94));
}

/* The scanner exchange is one continuous conversation on one locked plate.
   Preserve identical framing across all three lines so the final beat does not
   appear to zoom away from Shane. */
.game-shell[data-step="scannerBoundary"] .scene-image,
.game-shell[data-step="scannerPast"] .scene-image,
.game-shell[data-step="scannerCooperate"] .scene-image {
  object-fit: cover;
  object-position: center center;
  transform: none;
}

/* The first file-tour plate establishes the whole workroom. Keep the complete
   frame visible rather than treating it like a portrait dialogue close-up. */
.game-shell[data-step="officeTourFile"] .scene-image {
  object-fit: contain;
  object-position: center center;
  transform: none;
  background: #080b0a;
}

/* The file-tour prompt uses the approved open Bella file plate. Keep the
   interaction field on the visible pages rather than an inherited office-wide
   hotspot where no file exists. */
.game-shell[data-step="officeTourFile"] .scene-hotspot[data-hotspot="file"] {
  left: 18.5%;
  top: 24%;
  width: 55%;
  height: 57%;
}

/* The Bella-file tour keeps a generous invisible click field, but the visual
   invitation belongs on the open pages rather than in a floating label. */
.game-shell[data-step="officeTourFile"] .scene-hotspot[data-hotspot="file"],
.game-shell[data-step="officeTourFile"] .scene-hotspot[data-hotspot="file"]:hover,
.game-shell[data-step="officeTourFile"] .scene-hotspot[data-hotspot="file"]:focus-visible,
.game-shell[data-step="officeTourFile"] .scene-hotspot[data-hotspot="file"]:active {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.game-shell[data-step="officeTourFile"] .scene-hotspot[data-hotspot="file"]::before {
  content: "";
  display: block !important;
  inset: auto !important;
  left: 50%;
  top: 51%;
  width: 22px;
  height: 22px;
  border: 0 !important;
  border-radius: 50%;
  background: radial-gradient(circle, #f8feff 0 15%, rgba(104, 224, 255, .98) 16% 38%, rgba(104, 224, 255, .28) 39% 67%, transparent 68%);
  box-shadow: 0 0 0 1px rgba(5, 27, 39, .72), 0 0 18px rgba(104, 224, 255, .72);
  filter: drop-shadow(0 0 3px rgba(5, 27, 39, .92));
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity .16s ease, filter .16s ease;
}

.game-shell[data-step="officeTourFile"] .scene-hotspot[data-hotspot="file"]:is(:hover, :focus-visible, :active)::before {
  opacity: .96;
}

.game-shell[data-step="officeTourFile"] .scene-hotspot[data-hotspot="file"]::after,
.game-shell[data-step="officeTourFile"] .scene-hotspot[data-hotspot="file"] span {
  display: none !important;
}

/* The coffee exchange reuses the complete player-desk plate. The PIN reminder
   remains a physical desk note beside the phone rather than a UI prompt. */
.coffee-pin-note {
  position: absolute;
  left: 67.1%;
  top: 81.1%;
  z-index: 2;
  width: clamp(48px, 5.8vw, 82px);
  min-height: clamp(32px, 3.5vw, 48px);
  padding: .28rem .35rem;
  color: #3d3423;
  background: #d7bd64;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .32);
  font-family: "Comic Sans MS", "Bradley Hand", cursive;
  font-size: clamp(.45rem, .7vw, .68rem);
  line-height: 1.1;
  letter-spacing: 0;
  pointer-events: none;
  transform: rotate(-3deg);
}

.coffee-pin-note span {
  font-size: .86em;
}

/* Daylight office exposure lock. These plates are all part of one continuous
   morning/afternoon office visit; inherited legacy washes must not make the
   player jump between murky and overexposed frames. Deliberate night scenes
   are intentionally excluded. */
.game-shell:is(
  [data-step="intro"], [data-step="introResponse"], [data-step="sophiaCallsShane"],
  [data-step="shaneFileTriptych"], [data-step="sophiaInterrupt"], [data-step="shaneFileFixation"],
  [data-step="shaneIntro"], [data-step="rhythm"], [data-step="shaneRhythmResponse"],
  [data-step="businessBanter"], [data-step="bankBanter"], [data-step="gladBanter"],
  [data-step="plainBanter"], [data-step="improveBanter"], [data-step="boardShared"],
  [data-step="boardTheoryDie"], [data-step="boardTheoryImprove"], [data-step="boardTheorySometimes"],
  [data-step="boardAuthorRule"], [data-step="boardDecorating"], [data-step="boardDecoratingPays"],
  [data-step="boardDecoratingNo"], [data-step="boardDecoratingShould"], [data-step="officeTourBoard"],
  [data-step="officeTourDesk"], [data-step="officeTourEvidence"], [data-step="officeTourScanner"],
  [data-step="officeTourFile"], [data-step="scanner"], [data-step="scannerBoundary"],
  [data-step="scannerPast"], [data-step="scannerCooperate"], [data-step="coffeeOffice"],
  [data-step="coffeeCafeOrigin"], [data-step="coffeeEvidenceRoom"], [data-step="coffeeRadiator"],
  [data-step="coffeeGazpacho"], [data-step="coffeeGazpachoCorrection"], [data-step="coffeeSaved"],
  [data-step="coffeeFormsUseful"], [data-step="coffeeFormsCleanliness"], [data-step="coffeeFormsImprove"]
) .scene-image {
  filter: saturate(1) contrast(.99) brightness(1.44) !important;
}

.game-shell:is(
  [data-step="intro"], [data-step="introResponse"], [data-step="sophiaCallsShane"],
  [data-step="shaneFileTriptych"], [data-step="sophiaInterrupt"], [data-step="shaneFileFixation"],
  [data-step="shaneIntro"], [data-step="rhythm"], [data-step="shaneRhythmResponse"],
  [data-step="businessBanter"], [data-step="bankBanter"], [data-step="gladBanter"],
  [data-step="plainBanter"], [data-step="improveBanter"], [data-step="boardShared"],
  [data-step="boardTheoryDie"], [data-step="boardTheoryImprove"], [data-step="boardTheorySometimes"],
  [data-step="boardAuthorRule"], [data-step="boardDecorating"], [data-step="boardDecoratingPays"],
  [data-step="boardDecoratingNo"], [data-step="boardDecoratingShould"], [data-step="officeTourBoard"],
  [data-step="officeTourDesk"], [data-step="officeTourEvidence"], [data-step="officeTourScanner"],
  [data-step="officeTourFile"], [data-step="scanner"], [data-step="scannerBoundary"],
  [data-step="scannerPast"], [data-step="scannerCooperate"], [data-step="coffeeOffice"],
  [data-step="coffeeCafeOrigin"], [data-step="coffeeEvidenceRoom"], [data-step="coffeeRadiator"],
  [data-step="coffeeGazpacho"], [data-step="coffeeGazpachoCorrection"], [data-step="coffeeSaved"],
  [data-step="coffeeFormsUseful"], [data-step="coffeeFormsCleanliness"], [data-step="coffeeFormsImprove"]
) .scene-wash {
  background: transparent !important;
}

/* The Bella-file hold uses the same approved opening plate, so it must share
   the surrounding office daylight rather than retain the former triptych's
   custom exposure. */
.game-shell[data-step="shaneFileTriptych"] .scene-image {
  filter: saturate(1) contrast(.99) brightness(1.44) !important;
  object-position: center bottom !important;
}

/* The opening has important desk continuity at the lower edge: make that kit
   visible in the browser rather than sacrificing it to a centered cover crop. */
.game-shell[data-step="intro"] .scene-image,
.game-shell[data-step="introResponse"] .scene-image {
  object-position: center bottom !important;
}

/* Final coffee-office dialogue authority. The player-desk plate holds Shane on
   the left and Sophia on the right, so every bubble stays in the adjacent open
   lane and its tail returns directly to the speaker. */
@media (min-width: 761px) {
  .game-shell[data-step="coffeeCafeOrigin"] .dialogue-panel[data-speaker-key="shane"],
  .game-shell[data-step="coffeeFormsUseful"] .dialogue-panel[data-speaker-key="shane"],
  .game-shell[data-step="coffeeFormsImprove"] .dialogue-panel[data-speaker-key="shane"],
  .game-shell[data-step="coffeeRadiator"] .dialogue-panel[data-speaker-key="shane"],
  .game-shell[data-step="coffeeSaved"] .dialogue-panel[data-speaker-key="shane"] {
    left: 28% !important;
    right: auto !important;
    top: clamp(7rem, 16vh, 9rem) !important;
    width: min(280px, calc(100% - 2rem)) !important;
    max-width: min(280px, calc(100% - 2rem)) !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png") !important;
  }

  .game-shell[data-step="coffeeOffice"] .dialogue-panel[data-speaker-key="sophia"],
  .game-shell[data-step="coffeeEvidenceRoom"] .dialogue-panel[data-speaker-key="sophia"],
  .game-shell[data-step="coffeeFormsCleanliness"] .dialogue-panel[data-speaker-key="sophia"],
  .game-shell[data-step="coffeeGazpacho"] .dialogue-panel[data-speaker-key="sophia"],
  .game-shell[data-step="coffeeGazpachoCorrection"] .dialogue-panel[data-speaker-key="sophia"] {
    left: 63% !important;
    right: auto !important;
    top: clamp(7rem, 16vh, 9rem) !important;
    width: min(250px, calc(100% - 2rem)) !important;
    max-width: min(250px, calc(100% - 2rem)) !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png") !important;
  }

  .game-shell[data-step="coffeeCafeOrigin"] .dialogue-panel[data-speaker-key="shane"],
  .game-shell[data-step="coffeeRadiator"] .dialogue-panel[data-speaker-key="shane"] {
    width: min(220px, calc(100% - 2rem)) !important;
    max-width: min(220px, calc(100% - 2rem)) !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-left-placement-margin-fix.png") !important;
  }

  .game-shell[data-step="coffeeGazpachoCorrection"] .dialogue-panel[data-speaker-key="sophia"] {
    width: min(190px, calc(100% - 2rem)) !important;
    max-width: min(190px, calc(100% - 2rem)) !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-right-placement-margin-fix.png") !important;
  }
}

/* The correction lands on the same daylight office plate as the surrounding
   coffee exchange. Match their readable exposure instead of leaving it in the
   default dark treatment. */
.game-shell[data-step="coffeeGazpachoCorrection"] .scene-image {
  filter: saturate(.98) contrast(1.02) brightness(1.24);
}
.game-shell[data-step="coffeeGazpachoCorrection"] .scene-wash {
  background:
    linear-gradient(90deg, rgba(8, 11, 10, .34), rgba(8, 11, 10, .02) 48%, rgba(8, 11, 10, .28)),
    linear-gradient(0deg, rgba(8, 11, 10, .34), rgba(8, 11, 10, .01) 52%, rgba(8, 11, 10, .18));
}

/* Sven stands at the right-side counter. Use the illustrated right-facing
   bubble tail here; the former custom triangle pointed into the counter. */
@media (min-width: 761px) {
  .game-shell[data-step="cafeSvenCoffeeReply"] .dialogue-panel[data-speaker-key="sven"][data-line-count="three"] {
    width: 342px;
    height: 157px;
    min-height: 157px;
    padding: .95rem 1.58rem 1.08rem;
    border: 0;
    border-radius: 0;
    background: transparent url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png") center / 100% 100% no-repeat;
    box-shadow: none;
    transform: none;
  }

  .game-shell[data-step="cafeSvenCoffeeReply"] .dialogue-panel[data-speaker-key="sven"][data-line-count="three"]::before,
  .game-shell[data-step="cafeSvenCoffeeReply"] .dialogue-panel[data-speaker-key="sven"][data-line-count="three"]::after {
    display: none;
  }

  .game-shell[data-step="cafeSvenRecommendation"] .dialogue-panel[data-speaker-key="sven"] {
    width: 342px;
    height: 157px;
    min-height: 157px;
    padding: .95rem 1.58rem 1.08rem;
    border: 0;
    border-radius: 0;
    background: transparent url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png") center / 100% 100% no-repeat;
    box-shadow: none;
    transform: none;
  }

  .game-shell[data-step="cafeSvenRecommendation"] .dialogue-panel[data-speaker-key="sven"]::before,
  .game-shell[data-step="cafeSvenRecommendation"] .dialogue-panel[data-speaker-key="sven"]::after {
    display: none;
  }
}

/* The first counter plate is rainlit, but it should still introduce Sven and
   the room clearly. Give it the same readable daytime exposure as the office. */
.game-shell[data-step="cafeOriginInterior"] .scene-image {
  filter: saturate(1) contrast(1.01) brightness(1.16);
}

/* Shane owns the coffee-flavor quip. Keep the bubble on his side of the counter
   and use a down-right tail that lands back on him, not Sophia or Sven. */
@media (min-width: 761px) {
  .game-shell[data-step="cafe"] .dialogue-panel[data-speaker-key="shane"] {
    left: clamp(.5rem, 2vw, 1.5rem);
    right: auto;
    top: clamp(.25rem, 1vh, .6rem);
    width: 260px;
    max-width: min(260px, calc(100% - 2rem));
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-right-placement-margin-fix.png");
  }
}

/* Keep Shane's police-cooperation beat immediately to his right. The
   left-facing tail returns to him without crossing his head or the desk. */
@media (min-width: 761px) {
  .game-shell[data-step="scannerCooperate"] .dialogue-panel[data-speaker-key="shane"] {
    left: clamp(12rem, 19vw, 16rem);
    right: auto;
    top: clamp(1.5rem, 4vh, 2.75rem);
    width: 310px;
    max-width: min(310px, calc(100% - 2rem));
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
  }
}

/* Definitive desk-inspection targeting. These are deliberately narrow, separate
   object zones: the key ring rests on the notebook in the art, but it must not
   compete with the notebook's own inspection target. The hover treatment traces
   each object's footprint instead of casting a generic click-here halo. */
.game-shell[data-step="officeTourDesk"] .desk-tool-hotspots [data-tool],
.game-shell[data-step="tools"] .desk-tool-hotspots [data-tool],
.game-shell[data-step="inspectClose"] .desk-tool-hotspots [data-desk-tool] {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.game-shell[data-step="officeTourDesk"] .desk-tool-hotspots [data-tool]::before,
.game-shell[data-step="tools"] .desk-tool-hotspots [data-tool]::before,
.game-shell[data-step="inspectClose"] .desk-tool-hotspots [data-desk-tool]::before {
  inset: auto !important;
  left: var(--desk-cue-x, 88%);
  top: var(--desk-cue-y, 12%);
  width: 11px;
  height: 11px;
  display: block;
  /* A pinpoint edge glint avoids pretending that an approximate polygon is
     the object's silhouette. The illustration itself remains untouched. */
  border: 0;
  border-radius: 50%;
  clip-path: none;
  background: radial-gradient(circle, rgba(255, 249, 220, .98) 0 12%, rgba(245, 205, 121, .78) 24%, rgba(245, 205, 121, .16) 52%, transparent 72%);
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: filter .16s ease, opacity .16s ease;
}

.game-shell[data-step="officeTourDesk"] .desk-tool-hotspots [data-tool]::after,
.game-shell[data-step="tools"] .desk-tool-hotspots [data-tool]::after,
.game-shell[data-step="inspectClose"] .desk-tool-hotspots [data-desk-tool]::after {
  display: none;
}

.game-shell[data-step="officeTourDesk"] .desk-tool-hotspots [data-tool]:hover::before,
.game-shell[data-step="officeTourDesk"] .desk-tool-hotspots [data-tool]:focus-visible::before,
.game-shell[data-step="tools"] .desk-tool-hotspots [data-tool]:hover::before,
.game-shell[data-step="tools"] .desk-tool-hotspots [data-tool]:focus-visible::before,
.game-shell[data-step="inspectClose"] .desk-tool-hotspots [data-desk-tool]:hover::before,
.game-shell[data-step="inspectClose"] .desk-tool-hotspots [data-desk-tool]:focus-visible::before {
  border-color: transparent;
  background: radial-gradient(circle, rgba(255, 249, 220, .98) 0 12%, rgba(245, 205, 121, .78) 24%, rgba(245, 205, 121, .16) 52%, transparent 72%);
  filter: drop-shadow(0 0 5px rgba(240, 192, 90, .72));
  opacity: .9;
}

.game-shell[data-step="officeTourDesk"] .desk-tool-hotspots [data-tool] > span,
.game-shell[data-step="tools"] .desk-tool-hotspots [data-tool] > span,
.game-shell[data-step="inspectClose"] .desk-tool-hotspots [data-desk-tool] > span {
  display: block;
  z-index: 5;
  border-color: rgba(235, 207, 151, .42);
  background: rgba(8, 11, 10, .88);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .28);
}

.game-shell[data-step="officeTourDesk"] .desk-tool-hotspots [data-tool]:hover > span,
.game-shell[data-step="officeTourDesk"] .desk-tool-hotspots [data-tool]:focus-visible > span,
.game-shell[data-step="tools"] .desk-tool-hotspots [data-tool]:hover > span,
.game-shell[data-step="tools"] .desk-tool-hotspots [data-tool]:focus-visible > span,
.game-shell[data-step="inspectClose"] .desk-tool-hotspots [data-desk-tool]:hover > span,
.game-shell[data-step="inspectClose"] .desk-tool-hotspots [data-desk-tool]:focus-visible > span {
  opacity: 1;
}

.desk-tool-hotspots [data-tool="files"],
.desk-tool-hotspots [data-desk-tool="files"] {
  left: 0 !important;
  top: 67% !important;
  width: 18.5% !important;
  height: 20% !important;
  z-index: 2;
  --desk-outline-radius: 7px;
  --desk-outline-shape: polygon(5% 14%, 95% 5%, 98% 83%, 8% 96%);
  --desk-cue-x: 92%;
  --desk-cue-y: 13%;
}

.game-shell[data-step="officeTourDesk"] .desk-tool-hotspots [data-tool="files"]::before,
.game-shell[data-step="tools"] .desk-tool-hotspots [data-tool="files"]::before,
.game-shell[data-step="inspectClose"] .desk-tool-hotspots [data-desk-tool="files"]::before {
  display: block !important;
}

/* Inspection completion must never revive the retired ellipse highlight. The
   compact cue point remains the sole desk affordance in every interaction state. */
.game-shell[data-step="officeTourDesk"] .desk-tool-hotspots .scene-hotspot,
.game-shell[data-step="officeTourDesk"] .desk-tool-hotspots .scene-hotspot:hover,
.game-shell[data-step="officeTourDesk"] .desk-tool-hotspots .scene-hotspot:focus-visible,
.game-shell[data-step="officeTourDesk"] .desk-tool-hotspots .scene-hotspot:active,
.game-shell[data-step="officeTourDesk"] .desk-tool-hotspots .scene-hotspot.done,
.game-shell[data-step="tools"] .desk-tool-hotspots .scene-hotspot,
.game-shell[data-step="tools"] .desk-tool-hotspots .scene-hotspot:hover,
.game-shell[data-step="tools"] .desk-tool-hotspots .scene-hotspot:focus-visible,
.game-shell[data-step="tools"] .desk-tool-hotspots .scene-hotspot:active,
.game-shell[data-step="tools"] .desk-tool-hotspots .scene-hotspot.done,
.game-shell[data-step="inspectClose"] .desk-tool-hotspots .scene-hotspot,
.game-shell[data-step="inspectClose"] .desk-tool-hotspots .scene-hotspot:hover,
.game-shell[data-step="inspectClose"] .desk-tool-hotspots .scene-hotspot:focus-visible,
.game-shell[data-step="inspectClose"] .desk-tool-hotspots .scene-hotspot:active,
.game-shell[data-step="inspectClose"] .desk-tool-hotspots .scene-hotspot.done {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* The trace-testing kit is a practical instrument, not an invitation card.
   Its generous hit field must remain visually invisible in every state. */
.game-shell[data-step="evidenceRule"] .evidence-tool-hotspots .scene-hotspot,
.game-shell[data-step="evidenceRule"] .evidence-tool-hotspots .scene-hotspot:hover,
.game-shell[data-step="evidenceRule"] .evidence-tool-hotspots .scene-hotspot:focus-visible,
.game-shell[data-step="evidenceRule"] .evidence-tool-hotspots .scene-hotspot:active,
.game-shell[data-step="evidenceRule"] .evidence-tool-hotspots .scene-hotspot.done {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

.desk-tool-hotspots [data-tool="camera"],
.desk-tool-hotspots [data-desk-tool="camera"] {
  left: 15.7% !important;
  top: 76.5% !important;
  width: 8.5% !important;
  height: 10.5% !important;
  z-index: 3;
  --desk-outline-radius: 18px;
  --desk-outline-shape: polygon(15% 10%, 83% 4%, 98% 68%, 81% 96%, 12% 84%, 2% 43%);
  --desk-cue-x: 82%;
  --desk-cue-y: 12%;
}

/* Opening-office desk family v1.0: map each interaction to the visible prop,
   not the retired v4.3 desk coordinates. The larger pinpoint is an invitation,
   not a halo or a substitute for the object's real outline. */
.game-shell[data-step="officeTourDesk"] .desk-tool-hotspots [data-tool]::before,
.game-shell[data-step="tools"] .desk-tool-hotspots [data-tool]::before,
.game-shell[data-step="inspectClose"] .desk-tool-hotspots [data-desk-tool]::before {
  width: 18px;
  height: 18px;
}

.desk-tool-hotspots [data-tool="files"],
.desk-tool-hotspots [data-desk-tool="files"] {
  left: 1.2% !important;
  top: 70% !important;
  width: 20% !important;
  height: 25% !important;
  --desk-cue-x: 88%;
  --desk-cue-y: 13%;
}

.desk-tool-hotspots [data-tool="note"],
.desk-tool-hotspots [data-desk-tool="note"] {
  left: 23% !important;
  top: 72% !important;
  width: 24% !important;
  height: 25% !important;
  --desk-cue-x: 90%;
  --desk-cue-y: 12%;
}

.desk-tool-hotspots [data-tool="camera"],
.desk-tool-hotspots [data-desk-tool="camera"] {
  left: 47% !important;
  top: 71% !important;
  width: 10% !important;
  height: 18% !important;
  --desk-cue-x: 88%;
  --desk-cue-y: 12%;
}

.desk-tool-hotspots [data-tool="keys"],
.desk-tool-hotspots [data-desk-tool="keys"] {
  left: 49% !important;
  top: 88.5% !important;
  width: 12% !important;
  height: 10% !important;
  --desk-cue-x: 53%;
  --desk-cue-y: 43%;
}

.desk-tool-hotspots [data-tool="phone"],
.desk-tool-hotspots [data-desk-tool="phone"] {
  left: 71% !important;
  top: 64% !important;
  width: 22% !important;
  height: 32% !important;
  --desk-cue-x: 10%;
  --desk-cue-y: 13%;
}

.desk-tool-hotspots [data-tool="keys"],
.desk-tool-hotspots [data-desk-tool="keys"] {
  left: 24.5% !important;
  top: 77.5% !important;
  width: 8.5% !important;
  height: 9% !important;
  z-index: 4;
  --desk-outline-radius: 48%;
  --desk-outline-shape: polygon(7% 41%, 27% 12%, 78% 5%, 97% 42%, 74% 91%, 28% 96%, 3% 67%);
  --desk-cue-x: 78%;
  --desk-cue-y: 12%;
}

.desk-tool-hotspots [data-tool="note"],
.desk-tool-hotspots [data-desk-tool="note"] {
  left: 23% !important;
  top: 74% !important;
  width: 24% !important;
  height: 22% !important;
  z-index: 1;
  --desk-outline-radius: 5px;
  --desk-outline-shape: polygon(2% 5%, 98% 2%, 96% 97%, 5% 96%);
  --desk-cue-x: 87%;
  --desk-cue-y: 12%;
}

/* Final desk-tour authority: the stable v2.2 plate puts the key ring on the
   left notebook page. The tray remains clickable, but receives no visual halo;
   only its hover label identifies it. This block is intentionally last so
   retired coordinate and highlight rules cannot revive during inspection. */
.game-shell:is([data-step="officeTourDesk"], [data-step="tools"], [data-step="inspectClose"]) .desk-tool-hotspots [data-tool="files"]::before,
.game-shell:is([data-step="officeTourDesk"], [data-step="tools"], [data-step="inspectClose"]) .desk-tool-hotspots [data-desk-tool="files"]::before {
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 0 !important;
}

.game-shell:is([data-step="officeTourDesk"], [data-step="tools"]) .desk-tool-hotspots [data-tool="keys"],
.game-shell[data-step="inspectClose"] .desk-tool-hotspots [data-desk-tool="keys"] {
  left: 48.5% !important;
  top: 80% !important;
  width: 8.5% !important;
  height: 11% !important;
  --desk-cue-x: 50%;
  --desk-cue-y: 38%;
}

/* The trace-testing kit is the first evidence-table object the player can
   examine. Restore its compact discovery point without restoring the retired
   broad halo around its intentionally generous click field. */
.game-shell[data-step="evidenceRule"] .evidence-tool-hotspots [data-evidence-tool="folders"]:not(.done)::before {
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  background: radial-gradient(circle, rgba(255, 249, 220, .98) 0 12%, rgba(245, 205, 121, .78) 24%, rgba(245, 205, 121, .16) 52%, transparent 72%) !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 3px rgba(240, 192, 90, .52)) !important;
  opacity: .68 !important;
}

.game-shell[data-step="evidenceRule"] .evidence-tool-hotspots [data-evidence-tool="folders"]:not(.done):hover::before,
.game-shell[data-step="evidenceRule"] .evidence-tool-hotspots [data-evidence-tool="folders"]:not(.done):focus-visible::before {
  filter: drop-shadow(0 0 6px rgba(240, 192, 90, .82)) !important;
  opacity: 1 !important;
}

.desk-tool-hotspots [data-tool="phone"],
.desk-tool-hotspots [data-desk-tool="phone"] {
  left: 74% !important;
  top: 68% !important;
  width: 16% !important;
  height: 25% !important;
  z-index: 3;
  --desk-outline-radius: 24px 20px 18px 13px;
  --desk-outline-shape: polygon(8% 13%, 88% 1%, 99% 68%, 77% 97%, 17% 92%, 1% 39%);
  --desk-cue-x: 82%;
  --desk-cue-y: 13%;
}

/* Current desk master coordinates. Keep the targets on the objects in the
   populated v2.3 plate; prior desk masters placed the camera and keys elsewhere. */
.game-shell:is([data-step="officeTourDesk"], [data-step="tools"], [data-step="inspectClose"]) .desk-tool-hotspots [data-tool="camera"],
.game-shell[data-step="inspectClose"] .desk-tool-hotspots [data-desk-tool="camera"] {
  left: 15.5% !important;
  top: 81% !important;
  width: 9.5% !important;
  height: 14% !important;
  --desk-cue-x: 82%;
  --desk-cue-y: 12%;
}

/* After the first desk note, the player remains in toolInspect while choosing
   another object. Keep that follow-on state on the same compact glow language
   as the first pass; the generic scene-hotspot hover must never return here. */
.game-shell[data-step="toolInspect"] .desk-tool-hotspots .scene-hotspot,
.game-shell[data-step="toolInspect"] .desk-tool-hotspots .scene-hotspot:hover,
.game-shell[data-step="toolInspect"] .desk-tool-hotspots .scene-hotspot:focus-visible,
.game-shell[data-step="toolInspect"] .desk-tool-hotspots .scene-hotspot:active,
.game-shell[data-step="toolInspect"] .desk-tool-hotspots .scene-hotspot.done {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.game-shell[data-step="toolInspect"] .desk-tool-hotspots [data-tool]::before {
  inset: auto !important;
  left: var(--desk-cue-x, 50%);
  top: var(--desk-cue-y, 14%);
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  border: 0 !important;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 249, 220, .98) 0 12%, rgba(245, 205, 121, .78) 24%, rgba(245, 205, 121, .16) 52%, transparent 72%) !important;
  box-shadow: none !important;
  opacity: .58 !important;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.game-shell[data-step="toolInspect"] .desk-tool-hotspots [data-tool].done::before {
  display: none !important;
}

.game-shell[data-step="toolInspect"] .desk-tool-hotspots [data-tool]:not(.done):hover::before,
.game-shell[data-step="toolInspect"] .desk-tool-hotspots [data-tool]:not(.done):focus-visible::before {
  filter: drop-shadow(0 0 6px rgba(240, 192, 90, .82));
  opacity: 1 !important;
}

.game-shell[data-step="toolInspect"] .desk-tool-hotspots .scene-hotspot::after {
  display: none !important;
}

.game-shell[data-step="toolInspect"] .desk-tool-hotspots [data-tool="files"]:not(.done)::before {
  display: block !important;
}

/* Evidence inspection has the same two-stage flow as the desk. Treat the
   first pass and follow-on notes identically: every uninspected object gets a
   small positioned glow point, never a broad target-shaped halo. */
.game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots .scene-hotspot,
.game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots .scene-hotspot:hover,
.game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots .scene-hotspot:focus-visible,
.game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots .scene-hotspot:active,
.game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots .scene-hotspot.done {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots [data-evidence-tool]::before {
  inset: auto !important;
  left: var(--evidence-cue-x, 50%) !important;
  top: var(--evidence-cue-y, 14%) !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255, 249, 220, .98) 0 12%, rgba(245, 205, 121, .78) 24%, rgba(245, 205, 121, .16) 52%, transparent 72%) !important;
  box-shadow: none !important;
  opacity: .58 !important;
  pointer-events: none;
  transform: translate(-50%, -50%) !important;
}

.game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots [data-evidence-tool].done::before {
  display: none !important;
}

.game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots [data-evidence-tool]:not(.done):hover::before,
.game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots [data-evidence-tool]:not(.done):focus-visible::before {
  filter: drop-shadow(0 0 6px rgba(240, 192, 90, .82));
  opacity: 1 !important;
}

.game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots .scene-hotspot::after {
  display: none !important;
}

/* Division of Labor: use the open center field to Shane's right. The
   left-facing tail returns to him without crossing his face. */
@media (min-width: 761px) {
  .game-shell[data-step="casePath"] .dialogue-panel[data-speaker-key="shane"] {
    left: clamp(18rem, 31vw, 23rem) !important;
    right: auto !important;
    top: clamp(5.5rem, 12vh, 6.5rem) !important;
    width: 345px !important;
    max-width: min(345px, calc(100% - 2rem));
    min-height: 106px;
    padding: 1.04rem 1.86rem 1.14rem;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png") !important;
  }
}

/* Absolute final dialogue placements. Keep this after every historical pass so
   scene-specific speaker ownership cannot be accidentally overwritten. */
@media (min-width: 761px) {
  .game-shell[data-step="seniorWorker"] .dialogue-panel[data-speaker-key="ellie"] {
    left: clamp(19rem, 28vw, 24rem); right: auto; top: clamp(1.15rem, 4vh, 2.6rem);
    width: 235px; max-width: min(235px, calc(100% - 2rem)); min-height: 72px;
    padding: .72rem 1.14rem .82rem;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-left-placement-margin-fix.png");
  }

  .game-shell[data-step="seniorWorkerReply"] .dialogue-panel[data-speaker-key="senior-worker"],
  .game-shell[data-step="seniorWorkerDismissal"] .dialogue-panel[data-speaker-key="senior-worker"],
  .game-shell[data-step="freshPaintConcern"] .dialogue-panel[data-speaker-key="senior-worker"] {
    left: auto; right: clamp(5rem, 10vw, 9rem); top: clamp(1.6rem, 5vh, 3.3rem);
    width: 290px; max-width: min(290px, calc(100% - 2rem)); min-height: 84px;
    height: auto; padding: .82rem 1.32rem .94rem;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-left-placement-margin-fix.png");
  }

  .game-shell[data-step="seniorWorkerSophia"] .dialogue-panel[data-speaker-key="sophia"] {
    left: clamp(2rem, 6vw, 5rem); right: auto; top: clamp(1.15rem, 4vh, 2.6rem);
    width: 245px; max-width: min(245px, calc(100% - 2rem)); min-height: 72px;
    padding: .72rem 1.14rem .82rem;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-right-placement-margin-fix.png");
  }

  .game-shell[data-step="seniorWorkerEllie"] .dialogue-panel[data-speaker-key="ellie"] {
    left: clamp(13rem, 20vw, 18rem); right: auto; top: clamp(1.15rem, 4vh, 2.6rem);
    width: 192px; max-width: min(192px, calc(100% - 2rem)); min-height: 72px;
    padding: .72rem 1.14rem .82rem;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-left-placement-margin-fix.png");
  }

  .game-shell[data-step="seniorWorkerEllieConcern"] .dialogue-panel[data-speaker-key="ellie"] {
    left: clamp(16rem, 24vw, 21rem); right: auto; top: clamp(1rem, 3vh, 2rem);
    width: 340px; max-width: min(340px, calc(100% - 2rem)); min-height: 124px;
    height: auto; padding: .94rem 1.58rem 1.04rem;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
  }
}

/* Final board-tour clearance. This must remain at the end of the sheet: the
   older board pass was restoring the long Sophia balloon across her face. */
@media (min-width: 761px) {
  .game-shell[data-step="boardTheoryDie"] .dialogue-panel[data-speaker-key="shane"],
  .game-shell[data-step="boardTheorySometimes"] .dialogue-panel[data-speaker-key="shane"],
  .game-shell[data-step="boardDecoratingPays"] .dialogue-panel[data-speaker-key="shane"],
  .game-shell[data-step="boardDecoratingShould"] .dialogue-panel[data-speaker-key="shane"] {
    left: clamp(14rem, 22vw, 18rem); right: auto; top: clamp(1.25rem, 4vh, 2.6rem);
    width: 240px; max-width: min(240px, calc(100% - 2rem)); min-height: 72px;
    padding: .72rem 1.14rem .82rem;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-left-placement-margin-fix.png");
  }

  .game-shell[data-step="boardTheoryDie"] .dialogue-panel[data-speaker-key="shane"] {
    min-height: 86px;
    padding: .78rem 1.14rem .92rem;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-left-placement-margin-fix.png");
  }

  .game-shell[data-step="boardAuthorRule"] .dialogue-panel[data-speaker-key="shane"] {
    left: clamp(14rem, 22vw, 18rem); right: auto; top: clamp(1.1rem, 3vh, 2rem);
    width: 295px; max-width: min(295px, calc(100% - 2rem)); min-height: 106px;
    padding: .9rem 1.52rem 1rem;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
  }

  .game-shell[data-step="boardDecorating"] .dialogue-panel[data-speaker-key="sophia"] {
    /* Keep the long warning left of Sophia; its painted right-side tail points
       back to her instead of turning the line into a detached UI card. */
    left: clamp(7rem, 12vw, 12rem); right: auto; top: clamp(1rem, 2.5vh, 1.8rem);
    width: 410px; max-width: min(410px, calc(100% - 2rem)); min-height: 164px;
    height: auto; padding: 1.02rem 1.74rem 1.16rem; z-index: 8;
    background: transparent var(--bubble-sprite) center / 100% 100% no-repeat !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
  }

  .game-shell[data-step="boardDecorating"] .dialogue-panel[data-speaker-key="sophia"] .line {
    font-size: clamp(.7rem, .84vw, .8rem); line-height: 1.1; max-width: 36ch;
  }

  .game-shell[data-step="boardDecorating"] .dialogue-panel[data-speaker-key="sophia"]::before,
  .game-shell[data-step="boardDecorating"] .dialogue-panel[data-speaker-key="sophia"]::after {
    display: none !important;
  }

  /* Post-Harbourtown debrief: the first three balloons belong in the quiet
     upper field, not across either detective's face. */
  .game-shell[data-step="boardReturn"] .dialogue-panel[data-speaker-key="shane"] {
    left: clamp(2rem, 6vw, 5rem); right: auto; top: clamp(1.2rem, 3vh, 2rem);
    width: 224px; max-width: min(224px, calc(100% - 2rem)); min-height: 66px;
    padding: .68rem 1.06rem .78rem;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-right-placement-margin-fix.png");
  }

  .game-shell[data-step="boardReturnSophia"] .dialogue-panel[data-speaker-key="sophia"] {
    left: clamp(28rem, 37vw, 31rem); right: auto; top: clamp(1.2rem, 3vh, 2rem);
    width: 390px; max-width: min(390px, calc(100% - 2rem)); min-height: 124px;
    padding: .88rem 1.48rem 1rem;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
  }

  .game-shell[data-step="boardReturnElliePrompt"] .dialogue-panel[data-speaker-key="shane"] {
    left: clamp(1rem, 3vw, 2.5rem); right: auto; top: 0;
    width: 370px; max-width: min(370px, calc(100% - 2rem)); min-height: 76px; height: 76px;
    padding: .48rem 1.1rem .58rem; z-index: 8;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png");
  }

  .game-shell[data-step="boardReturnElliePrompt"] .dialogue-panel[data-speaker-key="shane"] .line {
    font-size: clamp(.7rem, .84vw, .78rem); line-height: 1.01; max-width: 35ch;
  }
}

/* Final Cafe Origin tail lock. Every Sven line uses the illustrated bubble
   family; none may fall back to the old CSS triangle. Shane's coffee-flavor
   quip sits to his right, so its tail returns down-left toward him. */
@media (min-width: 761px) {
  .game-shell[data-step="cafeSvenCoffeeQuestion"] .dialogue-panel[data-speaker-key="sven"],
  .game-shell[data-step="cafeSvenCoffeeReply"] .dialogue-panel[data-speaker-key="sven"],
  .game-shell[data-step="cafeSvenBeans"] .dialogue-panel[data-speaker-key="sven"],
  .game-shell[data-step="cafeSvenFeature"] .dialogue-panel[data-speaker-key="sven"],
  .game-shell[data-step="cafeSvenRecommendation"] .dialogue-panel[data-speaker-key="sven"],
  .game-shell[data-step="cafeSvenRecommendationSven"] .dialogue-panel[data-speaker-key="sven"] {
    left: clamp(29rem, 42vw, 34rem);
    right: auto;
    top: clamp(.35rem, 1vh, .7rem);
    bottom: auto;
    border: 0;
    border-radius: 0;
    background: transparent var(--bubble-sprite) center / 100% 100% no-repeat;
    box-shadow: none;
    transform: none;
  }

  .game-shell[data-step="cafeSvenCoffeeQuestion"] .dialogue-panel[data-speaker-key="sven"]::before,
  .game-shell[data-step="cafeSvenCoffeeQuestion"] .dialogue-panel[data-speaker-key="sven"]::after,
  .game-shell[data-step="cafeSvenCoffeeReply"] .dialogue-panel[data-speaker-key="sven"]::before,
  .game-shell[data-step="cafeSvenCoffeeReply"] .dialogue-panel[data-speaker-key="sven"]::after,
  .game-shell[data-step="cafeSvenBeans"] .dialogue-panel[data-speaker-key="sven"]::before,
  .game-shell[data-step="cafeSvenBeans"] .dialogue-panel[data-speaker-key="sven"]::after,
  .game-shell[data-step="cafeSvenFeature"] .dialogue-panel[data-speaker-key="sven"]::before,
  .game-shell[data-step="cafeSvenFeature"] .dialogue-panel[data-speaker-key="sven"]::after,
  .game-shell[data-step="cafeSvenRecommendation"] .dialogue-panel[data-speaker-key="sven"]::before,
  .game-shell[data-step="cafeSvenRecommendation"] .dialogue-panel[data-speaker-key="sven"]::after,
  .game-shell[data-step="cafeSvenRecommendationSven"] .dialogue-panel[data-speaker-key="sven"]::before,
  .game-shell[data-step="cafeSvenRecommendationSven"] .dialogue-panel[data-speaker-key="sven"]::after {
    display: none !important;
  }

  .game-shell[data-step="cafeSvenCoffeeQuestion"] .dialogue-panel[data-speaker-key="sven"],
  .game-shell[data-step="cafeSvenBeans"] .dialogue-panel[data-speaker-key="sven"],
  .game-shell[data-step="cafeSvenRecommendationSven"] .dialogue-panel[data-speaker-key="sven"],
  .game-shell[data-step="cafeSvenCoffeeReply"] .dialogue-panel[data-speaker-key="sven"][data-line-count="one"] {
    width: 250px;
    height: 82px;
    min-height: 82px;
    padding: .7rem 1.36rem .86rem;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-right-placement-margin-fix.png");
  }

  .game-shell[data-step="cafeSvenCoffeeReply"] .dialogue-panel[data-speaker-key="sven"][data-line-count="two"] {
    width: 294px;
    height: 116px;
    min-height: 116px;
    padding: .8rem 1.48rem .96rem;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png");
  }

  .game-shell[data-step="cafeSvenCoffeeReply"] .dialogue-panel[data-speaker-key="sven"][data-line-count="three"],
  .game-shell[data-step="cafeSvenFeature"] .dialogue-panel[data-speaker-key="sven"],
  .game-shell[data-step="cafeSvenRecommendation"] .dialogue-panel[data-speaker-key="sven"] {
    width: 342px;
    height: 157px;
    min-height: 157px;
    padding: .95rem 1.58rem 1.08rem;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
  }

  .game-shell[data-step="cafe"] .dialogue-panel[data-speaker-key="shane"] {
    left: clamp(13rem, 22vw, 18rem);
    right: auto;
    top: clamp(.25rem, 1vh, .6rem);
    width: 260px;
    max-width: min(260px, calc(100% - 2rem));
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-left-placement-margin-fix.png");
  }

  .game-shell[data-step="cafeSophiaRecommendation"] .dialogue-panel[data-speaker-key="sophia"],
.game-shell[data-step="cafeSvenRecommendationSophia"] .dialogue-panel[data-speaker-key="sophia"] {
    left: clamp(12rem, 18vw, 15rem);
    right: auto;
    top: clamp(.25rem, 1vh, .6rem);
    width: 250px;
    height: 82px;
    min-height: 82px;
    max-width: min(250px, calc(100% - 2rem));
    padding: .7rem 1.36rem .86rem;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-right-placement-margin-fix.png");
  }
}

/* Harbourtown dock dialogue authority. Sophia remains visibly right of the
   open-water lane, so every line from her first reply through Ellie's arrival
   uses a physical speech bubble to her left with its tail returning right.
   These are on-screen lines, never narration captions. */
.game-shell:is(
  [data-step="harbourtownPatience"],
  [data-step="harbourtownResponse"],
  [data-step="harbourtownObserve"],
  [data-step="harbourtownPaperwork"],
  [data-step="harbourtownEllieLead"]
) .dialogue-panel[data-speaker-key="sophia"] {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent var(--bubble-sprite) center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  color: #17110d !important;
}

.game-shell:is(
  [data-step="harbourtownPatience"],
  [data-step="harbourtownResponse"],
  [data-step="harbourtownObserve"],
  [data-step="harbourtownPaperwork"],
  [data-step="harbourtownEllieLead"]
) .dialogue-panel[data-speaker-key="sophia"]:is([data-line-count="short"], [data-line-count="one"]) {
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-right-placement-margin-fix.png") !important;
}

.game-shell:is(
  [data-step="harbourtownPatience"],
  [data-step="harbourtownResponse"],
  [data-step="harbourtownObserve"],
  [data-step="harbourtownPaperwork"],
  [data-step="harbourtownEllieLead"]
) .dialogue-panel[data-speaker-key="sophia"][data-line-count="two"] {
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png") !important;
}

.game-shell:is(
  [data-step="harbourtownPatience"],
  [data-step="harbourtownResponse"],
  [data-step="harbourtownObserve"],
  [data-step="harbourtownPaperwork"],
  [data-step="harbourtownEllieLead"]
) .dialogue-panel[data-speaker-key="sophia"]:is([data-line-count="three"], [data-line-count="four"]) {
  --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png") !important;
}

@media (min-width: 761px) {
  .game-shell:is(
    [data-step="harbourtownPatience"],
    [data-step="harbourtownResponse"],
    [data-step="harbourtownObserve"],
    [data-step="harbourtownPaperwork"],
    [data-step="harbourtownEllieLead"]
  ) .dialogue-panel[data-speaker-key="sophia"] {
    left: clamp(3rem, 6vw, 5rem) !important;
    right: auto !important;
    top: clamp(5rem, 11vh, 6.5rem) !important;
    bottom: auto !important;
    transform: rotate(.15deg) !important;
  }

  .game-shell[data-step="harbourtownPatience"] .dialogue-panel[data-speaker-key="sophia"] {
    width: 350px !important;
    max-width: min(350px, calc(100% - 2rem)) !important;
  }

  .game-shell[data-step="harbourtownResponse"] .dialogue-panel[data-speaker-key="sophia"] {
    width: 390px !important;
    max-width: min(390px, calc(100% - 2rem)) !important;
  }

  .game-shell[data-step="harbourtownObserve"] .dialogue-panel[data-speaker-key="sophia"] {
    width: 400px !important;
    max-width: min(400px, calc(100% - 2rem)) !important;
  }

  .game-shell[data-step="harbourtownPaperwork"] .dialogue-panel[data-speaker-key="sophia"] {
    width: 440px !important;
    max-width: min(440px, calc(100% - 2rem)) !important;
  }

  .game-shell[data-step="harbourtownEllieLead"] .dialogue-panel[data-speaker-key="sophia"] {
    width: 410px !important;
    max-width: min(410px, calc(100% - 2rem)) !important;
  }
}

/* Opening-office presentation lock.
   This is the single desktop authority for the entry, file triptych, and
   Sophia interruption. Do not add scene-specific overrides above this block. */
@media (min-width: 761px) {
  .game-shell[data-step="intro"] .scene-image,
  .game-shell[data-step="introResponse"] .scene-image,
  .game-shell[data-step="sophiaCallsShane"] .scene-image,
  .game-shell[data-step="sophiaInterrupt"] .scene-image,
  .game-shell[data-step="shaneFileFixation"] .scene-image {
    object-fit: cover;
    object-position: center;
    filter: saturate(.98) contrast(1.02) brightness(1);
  }

  .game-shell[data-step="shaneFileTriptych"] .scene-image {
    filter: saturate(.94) contrast(1) brightness(.86);
  }

  .game-shell[data-step="shaneFileTriptych"] .scene-wash,
  .game-shell[data-step="sophiaCallsShane"] .scene-wash,
  .game-shell[data-step="sophiaInterrupt"] .scene-wash,
  .game-shell[data-step="shaneFileFixation"] .scene-wash {
    background:
      linear-gradient(90deg, rgba(8, 11, 10, .12), rgba(8, 11, 10, 0) 48%, rgba(8, 11, 10, .08)),
      linear-gradient(0deg, rgba(8, 11, 10, .14), rgba(8, 11, 10, 0) 52%, rgba(8, 11, 10, .07));
  }

  .game-shell[data-step="intro"] .dialogue-panel[data-speaker-key="sophia"],
  .game-shell[data-step="introResponse"] .dialogue-panel[data-speaker-key="sophia"],
  .game-shell[data-step="sophiaCallsShane"] .dialogue-panel[data-speaker-key="sophia"],
  .game-shell[data-step="sophiaInterrupt"] .dialogue-panel[data-speaker-key="sophia"] {
    left: auto;
    right: clamp(10rem, 15vw, 12rem);
    top: clamp(8.5rem, 17vh, 10rem);
    bottom: auto;
    transform: none;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png");
  }

  .game-shell[data-step="intro"] .dialogue-panel[data-speaker-key="sophia"] {
    width: 230px;
    max-width: min(230px, calc(100% - 2rem));
  }

  .game-shell[data-step="introResponse"] .dialogue-panel[data-speaker-key="sophia"],
  .game-shell[data-step="sophiaCallsShane"] .dialogue-panel[data-speaker-key="sophia"] {
    width: 252px;
    max-width: min(252px, calc(100% - 2rem));
  }

  .game-shell[data-step="sophiaInterrupt"] .dialogue-panel[data-speaker-key="sophia"] {
    width: 294px;
    max-width: min(294px, calc(100% - 2rem));
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png");
  }
}

/* Final post-Harbourtown office-return authority. The earlier board rules
   predate the dedicated return plate and place dialogue over Shane's head. */
@media (min-width: 761px) {
  .game-shell[data-step="boardReturn"] .dialogue-panel[data-speaker-key="shane"],
  .game-shell[data-step="boardReturnElliePrompt"] .dialogue-panel[data-speaker-key="shane"],
  .game-shell[data-step="boardAssessment"] .dialogue-panel[data-speaker-key="shane"] {
    left: clamp(14rem, 20vw, 17rem);
    right: auto;
    top: clamp(4.75rem, 10vh, 6rem);
    bottom: auto;
    transform: none;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-left-placement-margin-fix.png");
  }

  .game-shell[data-step="boardReturn"] .dialogue-panel[data-speaker-key="shane"] {
    width: 224px;
    max-width: min(224px, calc(100% - 2rem));
    min-height: 66px;
    padding: .68rem 1.06rem .78rem;
  }

  .game-shell[data-step="boardReturnElliePrompt"] .dialogue-panel[data-speaker-key="shane"] {
    width: 360px;
    max-width: min(360px, calc(100% - 2rem));
    min-height: 92px;
    height: auto;
    padding: .82rem 1.42rem .98rem;
  }

  .game-shell[data-step="boardAssessment"] .dialogue-panel[data-speaker-key="shane"] {
    width: 380px;
    max-width: min(380px, calc(100% - 2rem));
    min-height: 144px;
    padding: 1rem 1.68rem 1.14rem;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png");
  }

  .game-shell[data-step="boardReturnSophia"] .dialogue-panel[data-speaker-key="sophia"] {
    left: clamp(29rem, 38vw, 32rem);
    right: auto;
    top: clamp(4.75rem, 10vh, 6rem);
    bottom: auto;
    width: 310px;
    max-width: min(310px, calc(100% - 2rem));
    min-height: 82px;
    padding: .92rem 1.56rem 1.04rem;
    transform: none;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-right-placement-margin-fix.png");
  }
}

/* Day One speech-bubble audit authority (final cascade position).
   Every positioned character balloon uses the same interior rhythm by authored
   line count. Scene rules may choose a location, width, and illustrated tail,
   but they must not squeeze one speaker's copy against the edge while another
   receives a different margin. The horizontal margin stays compact: enough
   for the painted paper edge, without creating empty side gutters. */
@media (min-width: 761px) {
  .game-shell .dialogue-panel[data-mode="speech"] {
    box-sizing: border-box;
    align-content: center;
    justify-items: center;
    text-align: center;
  }

  .game-shell .dialogue-panel[data-mode="speech"] .line {
    max-width: calc(100% - 1rem) !important;
    line-height: 1.22 !important;
    overflow: visible;
  }

  .game-shell .dialogue-panel[data-mode="speech"][data-line-count="short"] {
    min-height: 60px !important;
    padding: .56rem .52rem .7rem !important;
  }

  .game-shell .dialogue-panel[data-mode="speech"][data-line-count="one"] {
    min-height: 68px !important;
    padding: .64rem .6rem .8rem !important;
  }

  .game-shell .dialogue-panel[data-mode="speech"][data-line-count="two"] {
    min-height: 82px !important;
    padding: .74rem .7rem .9rem !important;
  }

  .game-shell .dialogue-panel[data-mode="speech"][data-line-count="three"] {
    min-height: 110px !important;
    padding: .86rem .78rem .98rem !important;
  }

  .game-shell .dialogue-panel[data-mode="speech"][data-line-count="four"] {
    min-height: 128px !important;
    padding: .94rem .86rem 1.04rem !important;
  }
}

/* Final desk follow-on authority. ToolInspect reuses the populated v2.3 desk,
   so its targets must exactly match the first inspection pass. */
@media (min-width: 761px) {
  .game-shell[data-step="toolInspect"] .desk-tool-hotspots [data-tool="keys"] {
    left: 48.5% !important;
    top: 80% !important;
    width: 8.5% !important;
    height: 11% !important;
    z-index: 4;
    --desk-cue-x: 50%;
    --desk-cue-y: 38%;
  }

  .game-shell[data-step="toolInspect"] .desk-tool-hotspots [data-tool="camera"] {
    left: 15.5% !important;
    top: 81% !important;
    width: 9.5% !important;
    height: 14% !important;
    --desk-cue-x: 82%;
    --desk-cue-y: 12%;
  }

  .game-shell[data-step="toolInspect"] .desk-tool-hotspots [data-tool="files"] {
    left: 1.2% !important;
    top: 70% !important;
    width: 20% !important;
    height: 25% !important;
    --desk-cue-x: 88%;
    --desk-cue-y: 13%;
  }

  .game-shell[data-step="toolInspect"] .desk-tool-hotspots [data-tool="files"]:not(.done)::before {
    width: 20px !important;
    height: 20px !important;
    opacity: .86 !important;
    filter: drop-shadow(0 0 5px rgba(240, 192, 90, .72));
  }
}

/* Final evidence-table authority. Both the first pass and the after-click
   field-note pass use the same workstation, daylight, and compact discovery
   points. Neither may fall back to the old dark wash or a hidden cue state. */
@media (min-width: 761px) {
  .game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .scene-image {
    filter: saturate(1) contrast(.99) brightness(1.44) !important;
  }

  .game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .scene-wash {
    background: transparent !important;
  }

  .game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots [data-evidence-tool="folders"] {
    left: 54.5% !important;
    top: 49% !important;
    width: 18.5% !important;
    height: 29.5% !important;
    --evidence-cue-x: 91%;
    --evidence-cue-y: 9%;
  }

  .game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots [data-evidence-tool="bags"] {
    left: 25.5% !important;
    top: 55% !important;
    width: 29.5% !important;
    height: 31% !important;
    --evidence-cue-x: 91%;
    --evidence-cue-y: 9%;
  }

  .game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots [data-evidence-tool="gloves"] {
    left: 32.5% !important;
    top: 42.5% !important;
    width: 21.5% !important;
    height: 20% !important;
    --evidence-cue-x: 88%;
    --evidence-cue-y: 15%;
  }

  .game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots [data-evidence-tool="labeler"] {
    left: 76.5% !important;
    top: 42% !important;
    width: 16% !important;
    height: 28% !important;
    --evidence-cue-x: 88%;
    --evidence-cue-y: 12%;
  }

  .game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots [data-evidence-tool]:not(.done)::before {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    opacity: .86 !important;
    background: radial-gradient(circle, rgba(255, 249, 220, .98) 0 12%, rgba(245, 205, 121, .8) 25%, rgba(245, 205, 121, .18) 54%, transparent 74%) !important;
    filter: drop-shadow(0 0 5px rgba(240, 192, 90, .72)) !important;
  }
}

/* Final discovery-cue authority. A cool white/cyan core with a dark outer
   edge remains legible on cream paper, warm wood, black trays, and metal.
   Desk cues remain reusable after inspection so retained playtest progress
   cannot make a still-clickable desk look inert. */
.game-shell:is([data-step="officeTourDesk"], [data-step="tools"], [data-step="toolInspect"]) .desk-tool-hotspots [data-tool]::before,
.game-shell[data-step="inspectClose"] .desk-tool-hotspots [data-desk-tool]::before,
.game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots [data-evidence-tool]:not(.done)::before {
  content: "" !important;
  position: absolute !important;
  z-index: 6 !important;
  display: block !important;
  visibility: visible !important;
  width: 22px !important;
  height: 22px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: radial-gradient(circle,
    rgba(255, 255, 255, 1) 0 12%,
    rgba(104, 224, 255, .98) 24%,
    rgba(40, 170, 216, .56) 44%,
    rgba(9, 42, 58, .82) 56%,
    transparent 73%) !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 3px rgba(5, 27, 39, .92)) drop-shadow(0 0 7px rgba(82, 211, 246, .78)) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.game-shell:is([data-step="officeTourDesk"], [data-step="tools"], [data-step="toolInspect"]) .desk-tool-hotspots [data-tool]:is(:hover, :focus-visible)::before,
.game-shell[data-step="inspectClose"] .desk-tool-hotspots [data-desk-tool]:is(:hover, :focus-visible)::before,
.game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots [data-evidence-tool]:not(.done):is(:hover, :focus-visible)::before {
  opacity: .96 !important;
}

/* Older inspection rules hide completed desk cues with a more specific
   selector. Keep those objects quietly reusable without leaving a permanent
   marker on the illustration. */
.game-shell:is([data-step="officeTourDesk"], [data-step="tools"], [data-step="toolInspect"]) .desk-tool-hotspots [data-tool].done::before,
.game-shell[data-step="inspectClose"] .desk-tool-hotspots [data-desk-tool].done::before {
  display: block !important;
  opacity: 0 !important;
}

.game-shell:is([data-step="officeTourDesk"], [data-step="tools"], [data-step="toolInspect"]) .desk-tool-hotspots [data-tool].done:is(:hover, :focus-visible)::before,
.game-shell[data-step="inspectClose"] .desk-tool-hotspots [data-desk-tool].done:is(:hover, :focus-visible)::before {
  opacity: .96 !important;
}

/* A desk redraw can place a fresh hotspot beneath a stationary cursor. Do not
   reveal its cue or label until the pointer genuinely moves over the object. */
.game-shell:is([data-step="officeTourDesk"], [data-step="tools"], [data-step="toolInspect"]) .desk-tool-hotspots [data-tool]::before,
.game-shell:is([data-step="officeTourDesk"], [data-step="tools"], [data-step="toolInspect"]) .desk-tool-hotspots [data-tool]:hover::before,
.game-shell[data-step="inspectClose"] .desk-tool-hotspots [data-desk-tool]::before,
.game-shell[data-step="inspectClose"] .desk-tool-hotspots [data-desk-tool]:hover::before {
  opacity: 0 !important;
}

.game-shell:is([data-step="officeTourDesk"], [data-step="tools"], [data-step="toolInspect"]) .desk-tool-hotspots [data-tool].cue-active::before,
.game-shell:is([data-step="officeTourDesk"], [data-step="tools"], [data-step="toolInspect"]) .desk-tool-hotspots [data-tool]:focus-visible::before,
.game-shell[data-step="inspectClose"] .desk-tool-hotspots [data-desk-tool].cue-active::before,
.game-shell[data-step="inspectClose"] .desk-tool-hotspots [data-desk-tool]:focus-visible::before {
  opacity: .96 !important;
}

.game-shell:is([data-step="officeTourDesk"], [data-step="tools"], [data-step="toolInspect"]) .desk-tool-hotspots [data-tool] > span,
.game-shell:is([data-step="officeTourDesk"], [data-step="tools"], [data-step="toolInspect"]) .desk-tool-hotspots [data-tool]:hover > span,
.game-shell[data-step="inspectClose"] .desk-tool-hotspots [data-desk-tool] > span,
.game-shell[data-step="inspectClose"] .desk-tool-hotspots [data-desk-tool]:hover > span {
  opacity: 0 !important;
  visibility: hidden !important;
}

.game-shell:is([data-step="officeTourDesk"], [data-step="tools"], [data-step="toolInspect"]) .desk-tool-hotspots [data-tool].cue-active > span,
.game-shell:is([data-step="officeTourDesk"], [data-step="tools"], [data-step="toolInspect"]) .desk-tool-hotspots [data-tool]:focus-visible > span,
.game-shell[data-step="inspectClose"] .desk-tool-hotspots [data-desk-tool].cue-active > span,
.game-shell[data-step="inspectClose"] .desk-tool-hotspots [data-desk-tool]:focus-visible > span {
  opacity: 1 !important;
  visibility: visible !important;
}

.game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots [data-evidence-tool].done::before {
  display: none !important;
}

/* Final evidence-table hover authority. Every cue belongs in the center of
   its physical tool, and neither the cue nor its name is persistent UI. */
.game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots [data-evidence-tool] {
  --evidence-cue-x: 50% !important;
  --evidence-cue-y: 50% !important;
}

.game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots [data-evidence-tool]:not(.done)::before {
  left: 50% !important;
  top: 50% !important;
  opacity: 0 !important;
}

.game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots [data-evidence-tool]:not(.done):is(:hover, :focus-visible)::before {
  opacity: .96 !important;
}

.game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots [data-evidence-tool] > span {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots [data-evidence-tool]:not(.done):is(:hover, :focus-visible) > span {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Clicking replaces the table DOM under the pointer. Do not let the newly
   completed target inherit hover/focus and leave its object label stranded. */
.game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots [data-evidence-tool].done > span,
.game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots [data-evidence-tool].done:hover > span,
.game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots [data-evidence-tool].done:focus-visible > span {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* A table redraw can place a fresh hotspot beneath a stationary cursor. Do
   not reveal its cue or label until the pointer genuinely moves over it. */
.game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots [data-evidence-tool]:not(.done)::before,
.game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots [data-evidence-tool]:not(.done):hover::before {
  opacity: 0 !important;
}

.game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots [data-evidence-tool]:not(.done).cue-active::before,
.game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots [data-evidence-tool]:not(.done):focus-visible::before {
  opacity: .96 !important;
}

.game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots [data-evidence-tool]:not(.done):hover > span {
  opacity: 0 !important;
  visibility: hidden !important;
}

.game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots [data-evidence-tool]:not(.done).cue-active > span,
.game-shell:is([data-step="evidenceRule"], [data-step="evidenceInspect"]) .evidence-tool-hotspots [data-evidence-tool]:not(.done):focus-visible > span {
  opacity: 1 !important;
  visibility: visible !important;
}

/* The scanner dispatch is four authored lines. Give it a true four-line
   footprint so the street names do not force an accidental fifth line or
   press the first word against the painted paper edge. */
@media (min-width: 761px) {
  .game-shell[data-step="scanner"] .dialogue-panel[data-speaker-key="scanner"] {
    width: 292px !important;
    height: 126px !important;
    max-width: min(292px, calc(100% - 2rem)) !important;
    min-height: 126px !important;
    padding: .84rem 1.05rem .98rem !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png") !important;
  }

  .game-shell[data-step="scanner"] .dialogue-panel[data-speaker-key="scanner"] .line {
    max-width: 27ch !important;
    font-size: .78rem !important;
    line-height: 1.08 !important;
  }
}

/* Shane's forms line is authored as two complete lines. Give both sentences
   enough horizontal room so the first one does not wrap into a cramped third
   line inside a two-line text footprint. */
@media (min-width: 761px) {
  .game-shell[data-step="coffeeFormsImprove"] .dialogue-panel[data-speaker-key="shane"] {
    width: min(400px, calc(100% - 2rem)) !important;
    max-width: min(400px, calc(100% - 2rem)) !important;
    min-height: 94px !important;
    padding: .78rem .92rem .94rem !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-left-placement-margin-fix.png") !important;
  }

  .game-shell[data-step="coffeeFormsImprove"] .dialogue-panel[data-speaker-key="shane"] .line {
    width: 356px !important;
    max-width: 356px !important;
    white-space: pre-line;
  }
}

/* Sophia clarifies Sven's recommendation from the open counter lane on her
   right. The down-left tail returns to Sophia without crossing Sven. */
@media (min-width: 761px) {
  .game-shell[data-step="cafeSvenRecommendationSophia"] .dialogue-panel[data-speaker-key="sophia"] {
    left: clamp(22rem, 36vw, 26rem) !important;
    right: auto !important;
    top: clamp(.25rem, 1vh, .6rem) !important;
    width: 250px !important;
    max-width: min(250px, calc(100% - 2rem)) !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-left-placement-margin-fix.png") !important;
  }
}

/* Marlene's budget summary carries two complete thoughts. Give the words a
   generous paper margin while keeping the bubble in the open lane left of her. */
@media (min-width: 761px) {
  .game-shell[data-step="housingTourBudget"] .dialogue-panel[data-speaker-key="marlene"] {
    width: 440px !important;
    max-width: min(440px, calc(100% - 2rem)) !important;
    min-height: 118px !important;
    padding: 1rem 1.25rem 1.1rem !important;
  }

  .game-shell[data-step="housingTourBudget"] .dialogue-panel[data-speaker-key="marlene"] .line {
    width: 390px !important;
    max-width: 390px !important;
    white-space: pre-line;
  }
}

/* Blue Containers face-to-face exchange. The conversation plate puts Sophia
   on the left and Ellie on the right; keep each bubble in the open lane between
   them and return its tail to the active speaker. */
.game-shell:is(
  [data-step="ellieBlueQuestion"],
  [data-step="ellie"],
  [data-step="elliePlacard"],
  [data-step="ellieHandlingReminder"],
  [data-step="ellieOdd"]
) .dialogue-panel {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent var(--bubble-sprite) center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}

@media (min-width: 761px) {
  .game-shell:is(
    [data-step="ellieBlueQuestion"],
    [data-step="ellieHandlingReminder"]
  ) .dialogue-panel[data-speaker-key="sophia"] {
    left: clamp(18rem, 26vw, 21rem) !important;
    right: auto !important;
    top: clamp(5rem, 11vh, 6.5rem) !important;
    bottom: auto !important;
    width: 360px !important;
    max-width: min(360px, calc(100% - 2rem)) !important;
    transform: rotate(.15deg) !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png") !important;
  }

  .game-shell:is(
    [data-step="ellie"],
    [data-step="elliePlacard"],
    [data-step="ellieOdd"]
  ) .dialogue-panel[data-speaker-key="ellie"] {
    left: clamp(18rem, 26vw, 21rem) !important;
    right: auto !important;
    top: clamp(5rem, 11vh, 6.5rem) !important;
    bottom: auto !important;
    width: 340px !important;
    max-width: min(340px, calc(100% - 2rem)) !important;
    transform: rotate(-.15deg) !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png") !important;
  }
}

/* Ellie's pointing beat has open container space down-right of her head and
   above the placard. Keep the short reply there, with a left-side tail aimed
   back toward Ellie rather than toward the container. */
@media (min-width: 761px) {
  .game-shell[data-step="elliePointsContainer"] .dialogue-panel[data-speaker-key="ellie"] {
    left: clamp(20rem, 31vw, 25rem) !important;
    right: auto !important;
    top: clamp(7rem, 16vh, 9rem) !important;
    bottom: auto !important;
    width: 180px !important;
    max-width: min(180px, calc(100% - 2rem)) !important;
    min-height: 68px !important;
    border: 0 !important;
    background: transparent var(--bubble-sprite) center / 100% 100% no-repeat !important;
    box-shadow: none !important;
    transform: rotate(-.15deg) !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-left-placement-margin-fix.png") !important;
  }
}

/* Post-point dock exchange authority. Sophia remains at far left, Ellie at
   center-left, and the senior worker speaks from off-screen right. Keep each
   speaker in a stable clear lane and aim every tail toward that source. This
   block intentionally follows every historical Harbourtown placement pass. */
@media (min-width: 761px) {
  .game-shell[data-step="freshPaintQuestion"] .dialogue-panel[data-speaker-key="sophia"] {
    left: clamp(12rem, 16vw, 14rem) !important;
    right: auto !important;
    top: clamp(4.5rem, 10vh, 5.5rem) !important;
    width: 190px !important;
    max-width: min(190px, calc(100% - 2rem)) !important;
    min-height: 72px !important;
    padding: .64rem .72rem .8rem !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-left-placement-margin-fix.png") !important;
  }

  .game-shell[data-step="seniorWorkerSophia"] .dialogue-panel[data-speaker-key="sophia"] {
    left: clamp(3rem, 7vw, 5rem) !important;
    right: auto !important;
    top: clamp(4.5rem, 10vh, 5.5rem) !important;
    bottom: auto !important;
    width: 245px !important;
    max-width: min(245px, calc(100% - 2rem)) !important;
    min-height: 72px !important;
    border: 0 !important;
    background: transparent var(--bubble-sprite) center / 100% 100% no-repeat !important;
    box-shadow: none !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-left-placement-margin-fix.png") !important;
  }

  .game-shell[data-step="freshPaintConcern"] .dialogue-panel[data-speaker-key="ellie"] {
    left: clamp(25rem, 34vw, 28rem) !important;
    right: auto !important;
    top: clamp(2.5rem, 7vh, 3.5rem) !important;
    bottom: auto !important;
    width: 350px !important;
    max-width: min(350px, calc(100% - 2rem)) !important;
    min-height: 94px !important;
    height: auto !important;
    padding: .82rem 1.32rem 1.04rem !important;
    border: 0 !important;
    background: transparent var(--bubble-sprite) center / 100% 100% no-repeat !important;
    box-shadow: none !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-left-placement-margin-fix.png") !important;
  }

  .game-shell[data-step="freshPaintConcern"] .dialogue-panel[data-speaker-key="ellie"]:is([data-line-count="short"], [data-line-count="one"]) {
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-left-placement-margin-fix.png") !important;
  }

  .game-shell[data-step="freshPaintConcern"] .dialogue-panel[data-speaker-key="ellie"][data-line-count="two"] {
    min-height: 118px !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-left-placement-margin-fix.png") !important;
  }

  .game-shell[data-step="seniorWorker"] .dialogue-panel[data-speaker-key="ellie"],
  .game-shell[data-step="seniorWorkerEllie"] .dialogue-panel[data-speaker-key="ellie"] {
    left: clamp(18rem, 28vw, 22rem) !important;
    right: auto !important;
    top: clamp(2.5rem, 7vh, 3.5rem) !important;
    bottom: auto !important;
    width: 220px !important;
    max-width: min(220px, calc(100% - 2rem)) !important;
    min-height: 72px !important;
    border: 0 !important;
    background: transparent var(--bubble-sprite) center / 100% 100% no-repeat !important;
    box-shadow: none !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-left-placement-margin-fix.png") !important;
  }

  .game-shell:is(
    [data-step="seniorWorkerReply"],
    [data-step="seniorWorkerDismissal"],
    [data-step="seniorWorkerDeparture"]
  ) .dialogue-panel[data-speaker-key="senior-worker"] {
    left: auto !important;
    right: clamp(3rem, 6vw, 5rem) !important;
    top: clamp(2.5rem, 7vh, 3.5rem) !important;
    bottom: auto !important;
    width: 290px !important;
    max-width: min(290px, calc(100% - 2rem)) !important;
    min-height: 84px !important;
    height: auto !important;
    padding: .82rem 1.24rem 1.02rem !important;
    border: 0 !important;
    background: transparent var(--bubble-sprite) center / 100% 100% no-repeat !important;
    box-shadow: none !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-right-placement-margin-fix.png") !important;
  }

  .game-shell[data-step="seniorWorkerDismissal"] .dialogue-panel[data-speaker-key="senior-worker"] {
    min-height: 118px !important;
  }

  .game-shell[data-step="seniorWorkerDeparture"] .dialogue-panel[data-speaker-key="senior-worker"] {
    width: 220px !important;
    max-width: min(220px, calc(100% - 2rem)) !important;
    min-height: 72px !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-right-placement-margin-fix.png") !important;
  }
}

/* Placard interaction geometry. Both the quiet approach target and the close
   camera frame belong to the 16:9 scene stage, not the full shell plus case
   sidebar. The target encloses the complete medium-view placard; the photo
   frame encloses the complete close-up paint field, drip, and edge context. */
.game-shell[data-step="camera"] :is(.placard-halo-mode, .paint-detail-mode) {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
}

.game-shell[data-step="camera"] .placard-halo-mode .paint-halo {
  left: 47% !important;
  top: 49% !important;
  width: 16.5% !important;
  height: 13.5% !important;
}

.game-shell[data-step="camera"] .paint-detail-mode::before,
.game-shell[data-step="camera"] .paint-detail-mode .camera-hud {
  left: 6% !important;
  top: 8% !important;
  width: 90% !important;
  height: 84% !important;
}

/* Complete post-Harbourtown office-return dialogue authority. Shane occupies
   the left side of this plate and Sophia the right; their balloons stay in the
   central clear field at mouth height, with side tails returning to the active
   speaker. This final block supersedes every partial historical return rule. */
@media (min-width: 761px) {
  .game-shell:is(
    [data-step="boardReturn"],
    [data-step="boardReturnElliePrompt"],
    [data-step="ellieMovedMessage"],
    [data-step="ellieMovedQuestion"],
    [data-step="ellieMovedWithoutHer"],
    [data-step="ellieMovedMeaning"],
    [data-step="boardAssessment"]
  ) .dialogue-panel[data-speaker-key="shane"] {
    left: clamp(12.5rem, 20vw, 15rem) !important;
    right: auto !important;
    top: clamp(4.5rem, 10vh, 5.75rem) !important;
    bottom: auto !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent var(--bubble-sprite) center / 100% 100% no-repeat !important;
    box-shadow: none !important;
    transform: none !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-left-placement-margin-fix.png") !important;
  }

  .game-shell:is(
    [data-step="boardReturnSophia"],
    [data-step="ellieMovedCleared"],
    [data-step="ellieMovedAfter"],
    [data-step="ellieMovedDisappearing"]
  ) .dialogue-panel[data-speaker-key="sophia"] {
    left: auto !important;
    right: clamp(8rem, 13vw, 10rem) !important;
    top: clamp(4.5rem, 10vh, 5.75rem) !important;
    bottom: auto !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent var(--bubble-sprite) center / 100% 100% no-repeat !important;
    box-shadow: none !important;
    transform: none !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-right-placement-margin-fix.png") !important;
  }

  .game-shell:is(
    [data-step="boardReturn"],
    [data-step="ellieMovedQuestion"]
  ) .dialogue-panel[data-speaker-key="shane"] {
    width: 225px !important;
    max-width: min(225px, calc(100% - 2rem)) !important;
    min-height: 68px !important;
    padding: .64rem .68rem .8rem !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-left-placement-margin-fix.png") !important;
  }

  .game-shell[data-step="boardReturnElliePrompt"] .dialogue-panel[data-speaker-key="shane"] {
    width: 350px !important;
    max-width: min(350px, calc(100% - 2rem)) !important;
    min-height: 92px !important;
    padding: .78rem .82rem .94rem !important;
  }

  .game-shell[data-step="ellieMovedMessage"] .dialogue-panel[data-speaker-key="shane"] {
    width: 335px !important;
    max-width: min(335px, calc(100% - 2rem)) !important;
    min-height: 108px !important;
    padding: .84rem .86rem 1rem !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png") !important;
  }

  .game-shell[data-step="ellieMovedWithoutHer"] .dialogue-panel[data-speaker-key="shane"] {
    width: 370px !important;
    max-width: min(370px, calc(100% - 2rem)) !important;
    min-height: 120px !important;
    padding: .88rem .92rem 1.04rem !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png") !important;
  }

  .game-shell[data-step="ellieMovedMeaning"] .dialogue-panel[data-speaker-key="shane"] {
    width: 300px !important;
    max-width: min(300px, calc(100% - 2rem)) !important;
    min-height: 84px !important;
    padding: .72rem .76rem .9rem !important;
  }

  .game-shell[data-step="boardAssessment"] .dialogue-panel[data-speaker-key="shane"] {
    width: 390px !important;
    max-width: min(390px, calc(100% - 2rem)) !important;
    min-height: 174px !important;
    padding: 1rem 1rem 1.14rem !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png") !important;
  }

  .game-shell[data-step="boardReturnSophia"] .dialogue-panel[data-speaker-key="sophia"] {
    width: 300px !important;
    max-width: min(300px, calc(100% - 2rem)) !important;
    min-height: 82px !important;
    padding: .72rem .76rem .9rem !important;
  }

  .game-shell:is(
    [data-step="ellieMovedCleared"],
    [data-step="ellieMovedAfter"]
  ) .dialogue-panel[data-speaker-key="sophia"] {
    width: 190px !important;
    max-width: min(190px, calc(100% - 2rem)) !important;
    min-height: 68px !important;
    padding: .64rem .66rem .8rem !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-right-placement-margin-fix.png") !important;
  }

  .game-shell[data-step="ellieMovedDisappearing"] .dialogue-panel[data-speaker-key="sophia"] {
    width: 330px !important;
    max-width: min(330px, calc(100% - 2rem)) !important;
    min-height: 98px !important;
    padding: .78rem .82rem .96rem !important;
  }

  .game-shell:is(
    [data-step="boardReturn"],
    [data-step="boardReturnSophia"],
    [data-step="boardReturnElliePrompt"],
    [data-step="ellieMovedMessage"],
    [data-step="ellieMovedQuestion"],
    [data-step="ellieMovedCleared"],
    [data-step="ellieMovedWithoutHer"],
    [data-step="ellieMovedAfter"],
    [data-step="ellieMovedMeaning"],
    [data-step="ellieMovedDisappearing"],
    [data-step="boardAssessment"]
  ) .dialogue-panel::before,
  .game-shell:is(
    [data-step="boardReturn"],
    [data-step="boardReturnSophia"],
    [data-step="boardReturnElliePrompt"],
    [data-step="ellieMovedMessage"],
    [data-step="ellieMovedQuestion"],
    [data-step="ellieMovedCleared"],
    [data-step="ellieMovedWithoutHer"],
    [data-step="ellieMovedAfter"],
    [data-step="ellieMovedMeaning"],
    [data-step="ellieMovedDisappearing"],
    [data-step="boardAssessment"]
  ) .dialogue-panel::after {
    display: none !important;
  }
}

/* Placard-pointing exchange authority. The container plate keeps Sophia at
   far left and Ellie center-left, so each tail must return to that speaker
   without landing on the placard or Ellie's pointing hand. */
@media (min-width: 761px) {
  .game-shell[data-step="elliePointsContainer"] .dialogue-panel[data-speaker-key="ellie"] {
    left: clamp(20rem, 31vw, 25rem) !important;
    right: auto !important;
    top: clamp(9rem, 20vh, 10.5rem) !important;
    width: 190px !important;
    max-width: min(190px, calc(100% - 2rem)) !important;
    min-height: 72px !important;
    padding: .64rem .72rem .8rem !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-left-placement-margin-fix.png") !important;
  }

  .game-shell[data-step="freshPaintQuestion"] .dialogue-panel[data-speaker-key="sophia"] {
    left: clamp(12rem, 16vw, 14rem) !important;
    right: auto !important;
    top: clamp(4.5rem, 10vh, 5.5rem) !important;
    width: 190px !important;
    max-width: min(190px, calc(100% - 2rem)) !important;
    min-height: 72px !important;
    padding: .64rem .72rem .8rem !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-left-placement-margin-fix.png") !important;
  }

  .game-shell[data-step="seniorWorkerSophia"] .dialogue-panel[data-speaker-key="sophia"] {
    left: clamp(12rem, 16vw, 14rem) !important;
    right: auto !important;
    top: clamp(5rem, 11vh, 6rem) !important;
    width: 245px !important;
    max-width: min(245px, calc(100% - 2rem)) !important;
    min-height: 72px !important;
    padding: .64rem .72rem .8rem !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-left-placement-margin-fix.png") !important;
  }

  .game-shell[data-step="freshPaintConcern"] .dialogue-panel[data-speaker-key="ellie"] {
    left: clamp(25rem, 34vw, 28rem) !important;
    right: auto !important;
    top: clamp(4.5rem, 10vh, 5.5rem) !important;
    width: 350px !important;
    max-width: min(350px, calc(100% - 2rem)) !important;
    min-height: 118px !important;
    padding: .82rem 1.1rem .96rem !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-left-placement-margin-fix.png") !important;
  }

  .game-shell[data-step="seniorWorker"] .dialogue-panel[data-speaker-key="ellie"],
  .game-shell[data-step="seniorWorkerEllie"] .dialogue-panel[data-speaker-key="ellie"] {
    left: clamp(10rem, 16vw, 13rem) !important;
    right: auto !important;
    top: clamp(4rem, 9vh, 5rem) !important;
    width: 220px !important;
    max-width: min(220px, calc(100% - 2rem)) !important;
    min-height: 72px !important;
    padding: .64rem .72rem .8rem !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-left-placement-margin-fix.png") !important;
  }

  .game-shell[data-step="seniorWorkerReply"] .dialogue-panel[data-speaker-key="senior-worker"] {
    left: clamp(18rem, 25vw, 21rem) !important;
    right: auto !important;
    top: clamp(4rem, 9vh, 5rem) !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-left-placement-margin-fix.png") !important;
  }

  .game-shell[data-step="seniorWorkerDismissal"] .dialogue-panel[data-speaker-key="senior-worker"] {
    left: clamp(18rem, 25vw, 21rem) !important;
    right: auto !important;
    top: clamp(4rem, 9vh, 5rem) !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-left-placement-margin-fix.png") !important;
  }

  .game-shell[data-step="seniorWorkerDeparture"] .dialogue-panel[data-speaker-key="senior-worker"] {
    left: clamp(18rem, 25vw, 21rem) !important;
    right: auto !important;
    top: clamp(4rem, 9vh, 5rem) !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-down-left-placement-margin-fix.png") !important;
  }
}

/* Post-Harbourtown daylight and dialogue authority. The dedicated return and
   debrief plates are daytime office scenes; they must not inherit the default
   noir wash. Shane is left and Sophia is right in both compositions. */
.game-shell[data-step="returnOfficeTransition"] .scene-image {
  filter: saturate(1) contrast(1) brightness(1.28) !important;
}

.game-shell:is(
  [data-step="boardReturn"],
  [data-step="boardReturnSophia"],
  [data-step="boardReturnElliePrompt"],
  [data-step="ellieMovedMessage"],
  [data-step="ellieMovedQuestion"],
  [data-step="ellieMovedCleared"],
  [data-step="ellieMovedWithoutHer"],
  [data-step="ellieMovedAfter"],
  [data-step="ellieMovedMeaning"],
  [data-step="ellieMovedDisappearing"],
  [data-step="boardAssessment"],
  [data-step="boardAssessmentResult"],
  [data-step="boardDebriefSolid"],
  [data-step="boardDebriefFeeling"],
  [data-step="boardDebriefResponse"],
  [data-step="boardDebriefObservation"],
  [data-step="boardDebriefObservationFollowup"],
  [data-step="boardDebriefMemory"]
) .scene-image {
  filter: saturate(1) contrast(1) brightness(1.4) !important;
}

.game-shell:is(
  [data-step="returnOfficeTransition"],
  [data-step="boardReturn"],
  [data-step="boardReturnSophia"],
  [data-step="boardReturnElliePrompt"],
  [data-step="ellieMovedMessage"],
  [data-step="ellieMovedQuestion"],
  [data-step="ellieMovedCleared"],
  [data-step="ellieMovedWithoutHer"],
  [data-step="ellieMovedAfter"],
  [data-step="ellieMovedMeaning"],
  [data-step="ellieMovedDisappearing"],
  [data-step="boardAssessment"],
  [data-step="boardAssessmentResult"],
  [data-step="boardDebriefSolid"],
  [data-step="boardDebriefFeeling"],
  [data-step="boardDebriefResponse"],
  [data-step="boardDebriefObservation"],
  [data-step="boardDebriefObservationFollowup"],
  [data-step="boardDebriefMemory"]
) .scene-wash {
  background: transparent !important;
}

@media (min-width: 761px) {
  .game-shell:is(
    [data-step="boardReturn"],
    [data-step="boardReturnElliePrompt"],
    [data-step="ellieMovedMessage"],
    [data-step="ellieMovedQuestion"],
    [data-step="ellieMovedWithoutHer"],
    [data-step="ellieMovedMeaning"],
    [data-step="boardAssessment"],
    [data-step="boardAssessmentResult"]
  ) .dialogue-panel[data-speaker-key="shane"] {
    left: clamp(16rem, 22vw, 19rem) !important;
    right: auto !important;
    top: clamp(4.5rem, 10vh, 5.75rem) !important;
    bottom: auto !important;
    height: auto !important;
    transform: none !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-left-placement-margin-fix.png") !important;
  }

  .game-shell[data-step="boardReturn"] .dialogue-panel[data-speaker-key="shane"] {
    left: clamp(16rem, 22vw, 19rem) !important;
    right: auto !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-left-placement-margin-fix.png") !important;
  }

  .game-shell:is(
    [data-step="boardReturnSophia"],
    [data-step="ellieMovedCleared"],
    [data-step="ellieMovedAfter"],
    [data-step="ellieMovedDisappearing"]
  ) .dialogue-panel[data-speaker-key="sophia"] {
    left: clamp(28rem, 38vw, 31rem) !important;
    right: auto !important;
    top: clamp(4.5rem, 10vh, 5.75rem) !important;
    bottom: auto !important;
    height: auto !important;
    transform: none !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-right-placement-margin-fix.png") !important;
  }

  .game-shell[data-step="boardReturnSophia"] .dialogue-panel[data-speaker-key="sophia"] {
    left: clamp(28rem, 38vw, 31rem) !important;
    right: auto !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-right-placement-margin-fix.png") !important;
  }

  .game-shell:is(
    [data-step="ellieMovedCleared"],
    [data-step="ellieMovedAfter"]
  ) .dialogue-panel[data-speaker-key="sophia"] {
    left: clamp(28rem, 38vw, 31rem) !important;
    right: auto !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-right-placement-margin-fix.png") !important;
  }

  .game-shell[data-step="ellieMovedMessage"] .dialogue-panel[data-speaker-key="shane"] {
    width: 380px !important;
    max-width: min(380px, calc(100% - 2rem)) !important;
    min-height: 102px !important;
    padding: .8rem .84rem .96rem !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png") !important;
  }

  .game-shell[data-step="ellieMovedWithoutHer"] .dialogue-panel[data-speaker-key="shane"] {
    width: 390px !important;
    max-width: min(390px, calc(100% - 2rem)) !important;
    min-height: 116px !important;
  }

  .game-shell:is(
    [data-step="boardAssessment"],
    [data-step="boardAssessmentResult"]
  ) .dialogue-panel[data-speaker-key="shane"] {
    width: 350px !important;
    max-width: min(350px, calc(100% - 2rem)) !important;
    min-height: 92px !important;
    padding: .76rem .8rem .92rem !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-left-placement-margin-fix.png") !important;
  }

  .game-shell[data-step="boardDebriefSolid"] .dialogue-panel[data-speaker-key="shane"] {
    left: clamp(25rem, 33vw, 26.5rem) !important;
    right: auto !important;
    top: clamp(6rem, 13vh, 7.5rem) !important;
    width: 220px !important;
    max-width: min(220px, calc(100% - 2rem)) !important;
    min-height: 72px !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-left-placement-margin-fix.png") !important;
  }

  .game-shell:is(
    [data-step="boardDebriefFeeling"],
    [data-step="boardDebriefResponse"],
    [data-step="boardDebriefObservation"],
    [data-step="boardDebriefObservationFollowup"],
    [data-step="boardDebriefMemory"]
  ) .dialogue-panel[data-speaker-key="sophia"] {
    left: clamp(25rem, 33vw, 26.5rem) !important;
    right: auto !important;
    top: clamp(6rem, 13vh, 7.5rem) !important;
    width: 260px !important;
    max-width: min(260px, calc(100% - 2rem)) !important;
    min-height: 96px !important;
    height: auto !important;
    padding: .78rem .82rem .94rem !important;
    transform: none !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png") !important;
  }

  .game-shell:is(
    [data-step="boardDebriefResponse"],
    [data-step="boardDebriefMemory"]
  ) .dialogue-panel[data-speaker-key="shane"] {
    left: clamp(25rem, 33vw, 26.5rem) !important;
    right: auto !important;
    top: clamp(6rem, 13vh, 7.5rem) !important;
    width: 260px !important;
    max-width: min(260px, calc(100% - 2rem)) !important;
    min-height: 96px !important;
    height: auto !important;
    padding: .78rem .82rem .94rem !important;
    transform: none !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png") !important;
  }

  .game-shell:is(
    [data-step="boardReturn"], [data-step="boardReturnSophia"],
    [data-step="boardReturnElliePrompt"], [data-step="ellieMovedMessage"],
    [data-step="ellieMovedQuestion"], [data-step="ellieMovedCleared"],
    [data-step="ellieMovedWithoutHer"], [data-step="ellieMovedAfter"],
    [data-step="ellieMovedMeaning"], [data-step="ellieMovedDisappearing"],
    [data-step="boardAssessment"], [data-step="boardAssessmentResult"],
    [data-step="boardDebriefSolid"], [data-step="boardDebriefFeeling"],
    [data-step="boardDebriefResponse"], [data-step="boardDebriefObservation"],
    [data-step="boardDebriefObservationFollowup"], [data-step="boardDebriefMemory"]
  ) .dialogue-panel::before,
  .game-shell:is(
    [data-step="boardReturn"], [data-step="boardReturnSophia"],
    [data-step="boardReturnElliePrompt"], [data-step="ellieMovedMessage"],
    [data-step="ellieMovedQuestion"], [data-step="ellieMovedCleared"],
    [data-step="ellieMovedWithoutHer"], [data-step="ellieMovedAfter"],
    [data-step="ellieMovedMeaning"], [data-step="ellieMovedDisappearing"],
    [data-step="boardAssessment"], [data-step="boardAssessmentResult"],
    [data-step="boardDebriefSolid"], [data-step="boardDebriefFeeling"],
    [data-step="boardDebriefResponse"], [data-step="boardDebriefObservation"],
    [data-step="boardDebriefObservationFollowup"], [data-step="boardDebriefMemory"]
  ) .dialogue-panel::after {
    display: none !important;
  }
}

/* Shane delivers the filing-cabinet warning. Keep its balloon in the clear
   lane immediately to his right with a left-facing tail returning to him. */
@media (min-width: 761px) {
  .game-shell[data-step="cabinetBanter"] .dialogue-panel[data-speaker-key="shane"] {
    left: clamp(13rem, 20vw, 16rem) !important;
    right: auto !important;
    top: clamp(5.5rem, 13vh, 7rem) !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png") !important;
  }
}

/* On the board-wall plate, Shane and Sophia stand at the far edges. Keep the
   complete follow-up and final exchange in the open board field between them. */
@media (min-width: 761px) {
  /* Sophia's longer personalized reflection needs the center-right gap; the
     shared debrief lane crosses Shane's face on this particular plate. */
  .game-shell[data-step="boardDebriefMemory"] .dialogue-panel[data-speaker-key="sophia"] {
    left: clamp(32rem, 43vw, 36rem) !important;
    right: auto !important;
    top: clamp(6rem, 13vh, 7.5rem) !important;
    width: 300px !important;
    max-width: min(300px, calc(100% - 2rem)) !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png") !important;
  }
}

@media (min-width: 761px) {
  .game-shell:is(
    [data-step="boardRankResponse"],
    [data-step="boardNextStep"],
    [data-step="boardHumanNote"]
  ) .dialogue-panel[data-speaker-key="shane"] {
    left: clamp(18rem, 27vw, 21rem) !important;
    right: auto !important;
    top: clamp(4rem, 9vh, 5rem) !important;
    width: 340px !important;
    max-width: min(340px, calc(100% - 2rem)) !important;
    height: auto !important;
    transform: none !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png") !important;
  }

  .game-shell:is(
    [data-step="boardRankResponse"],
    [data-step="boardNextStep"],
    [data-step="boardHumanNote"]
  ) .dialogue-panel[data-speaker-key="sophia"] {
    left: clamp(18rem, 27vw, 21rem) !important;
    right: auto !important;
    top: clamp(4rem, 9vh, 5rem) !important;
    width: 340px !important;
    max-width: min(340px, calc(100% - 2rem)) !important;
    height: auto !important;
    transform: none !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png") !important;
  }
}

/* Center Shane's two-line motive question as a single balanced thought. The
   shared cafe rule centers glyphs, but its inner text box can sit off-axis. */
.game-shell[data-step="cafeWalkPrompt"] .dialogue-panel[data-speaker-key="shane"] .line {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* The callback layout sets both vertical edges on Marlene's panel, which can
   stretch a short route summary into a nearly full-height balloon. */
@media (min-width: 761px) {
  .game-shell[data-step="marleneCallback"] .dialogue-panel[data-speaker-key="marlene"] {
    bottom: auto !important;
    width: 380px !important;
    max-width: min(380px, calc(100% - 2rem)) !important;
    height: 176px !important;
    min-height: 176px !important;
    padding: .92rem 1.08rem 1.02rem !important;
  }

  .game-shell[data-step="marleneCallback"] .dialogue-panel[data-speaker-key="marlene"] .line {
    width: 340px !important;
    max-width: 340px !important;
    margin: auto !important;
  }
}

/* Final speech-bubble text-fit authority. This changes only the interior text
   box: every bubble keeps a consistent paper margin, while longer balloons
   use slightly smaller lettering instead of crowding or crossing the edge. */
.game-shell .dialogue-panel[data-mode="speech"] {
  height: auto !important;
}

.game-shell .dialogue-panel[data-mode="speech"] .line {
  box-sizing: border-box;
  width: calc(100% - 1.4rem) !important;
  max-width: 34ch !important;
  line-height: 1.16 !important;
  overflow: visible;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.game-shell .dialogue-panel[data-mode="speech"][data-line-count="short"] {
  min-height: 62px !important;
  padding: .6rem .7rem .78rem !important;
}

.game-shell .dialogue-panel[data-mode="speech"][data-line-count="one"] {
  min-height: 72px !important;
  padding: .68rem .8rem .86rem !important;
}

.game-shell .dialogue-panel[data-mode="speech"][data-line-count="two"] {
  min-height: 88px !important;
  padding: .8rem .9rem .96rem !important;
}

.game-shell .dialogue-panel[data-mode="speech"][data-line-count="three"] {
  min-height: 116px !important;
  padding: .92rem 1rem 1.02rem !important;
}

.game-shell .dialogue-panel[data-mode="speech"][data-line-count="three"] .line {
  font-size: clamp(.82rem, .94vw, .94rem) !important;
}

.game-shell .dialogue-panel[data-mode="speech"][data-line-count="four"] {
  min-height: 136px !important;
  padding: 1rem 1.08rem 1.12rem !important;
}

.game-shell .dialogue-panel[data-mode="speech"][data-line-count="four"] .line {
  font-size: clamp(.74rem, .86vw, .84rem) !important;
}

/* Final office-sleep exchange lock. The shared closing rules above predate the
   approved two-character plate and can pull Shane's last balloon into the
   center of the room. Keep every beat near its speaker with the tail returning
   toward the correct side, while preserving the quieter evening exposure. */
@media (min-width: 761px) {
  .game-shell:is(
    [data-step="officeSleepPlace"],
    [data-step="officeSleepLighting"],
    [data-step="officeSleepClosing"]
  ) .dialogue-panel[data-speaker-key="shane"] {
    left: clamp(17rem, 27vw, 21rem) !important;
    right: auto !important;
    top: clamp(2.5rem, 6vh, 3.75rem) !important;
    bottom: auto !important;
    width: 300px !important;
    max-width: min(300px, calc(100% - 2rem)) !important;
    min-height: 88px !important;
    padding: .78rem .88rem .96rem !important;
    transform: rotate(-.4deg) !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-down-left-placement-margin-fix.png") !important;
  }

  .game-shell[data-step="officeSleepClosing"] .dialogue-panel[data-speaker-key="shane"] {
    width: 315px !important;
    max-width: min(315px, calc(100% - 2rem)) !important;
    min-height: 116px !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png") !important;
  }

  .game-shell:is(
    [data-step="officeSleepStation"],
    [data-step="officeSleepOffer"],
    [data-step="officeSleepClean"]
  ) .dialogue-panel[data-speaker-key="sophia"] {
    left: clamp(28.5rem, 39vw, 31rem) !important;
    right: auto !important;
    top: clamp(2.5rem, 6vh, 3.75rem) !important;
    bottom: auto !important;
    width: 340px !important;
    max-width: min(340px, calc(100% - 2rem)) !important;
    min-height: 88px !important;
    padding: .8rem .92rem .98rem !important;
    transform: rotate(.35deg) !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-right-placement-margin-fix.png") !important;
  }

  .game-shell[data-step="officeSleepOffer"] .dialogue-panel[data-speaker-key="sophia"][data-line-count="three"] {
    min-height: 116px !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png") !important;
  }

  .game-shell[data-step="officeSleepOffer"] .dialogue-panel[data-speaker-key="shane"] {
    left: clamp(17rem, 27vw, 21rem) !important;
    right: auto !important;
    top: clamp(2.5rem, 6vh, 3.75rem) !important;
    bottom: auto !important;
    width: 330px !important;
    max-width: min(330px, calc(100% - 2rem)) !important;
    min-height: 88px !important;
    padding: .8rem .92rem .98rem !important;
    transform: rotate(-.35deg) !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-two-line-tail-left-placement-margin-fix.png") !important;
  }
}

.game-shell:is(
  [data-step="officeSleepPlace"],
  [data-step="officeSleepStation"],
  [data-step="officeSleepLighting"],
  [data-step="officeSleepOffer"],
  [data-step="officeSleepClean"],
  [data-step="officeSleepClosing"]
) .scene-image {
  filter: saturate(1) contrast(1) brightness(1.4) !important;
}

.game-shell:is(
  [data-step="officeSleepPlace"],
  [data-step="officeSleepStation"],
  [data-step="officeSleepLighting"],
  [data-step="officeSleepOffer"],
  [data-step="officeSleepClean"],
  [data-step="officeSleepClosing"]
) .scene-wash {
  background: transparent !important;
}

.game-shell:is(
  [data-step="officeSleepCot"],
  [data-step="officeSleepSink"],
  [data-step="officeSleepScreen"],
  [data-step="ending"][data-housing=""]
) .scene-image {
  filter: saturate(.94) contrast(1) brightness(1.34) !important;
}

.game-shell:is(
  [data-step="officeSleepCot"],
  [data-step="officeSleepSink"],
  [data-step="officeSleepScreen"],
  [data-step="ending"][data-housing=""]
) .scene-wash {
  background:
    linear-gradient(90deg, rgba(7, 10, 14, .08), transparent 46%, rgba(7, 10, 14, .06)),
    linear-gradient(0deg, rgba(7, 10, 14, .08), transparent 62%, rgba(7, 10, 14, .04)) !important;
}

/* Final board-debrief dialogue authority. Shane stands left and Sophia right
   on the approved debrief plate, leaving one clean lane between their faces.
   Earlier personalized-memory rules pushed the final balloon over Sophia. */
@media (min-width: 761px) {
  .game-shell[data-step="boardDebriefSolid"] .dialogue-panel[data-speaker-key="shane"] {
    left: clamp(24.5rem, 32.5vw, 26rem) !important;
    right: auto !important;
    top: clamp(5.25rem, 11vh, 6.5rem) !important;
    bottom: auto !important;
    width: 220px !important;
    max-width: min(220px, calc(100% - 2rem)) !important;
    min-height: 72px !important;
    padding: .68rem .76rem .84rem !important;
    transform: none !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-left-placement-margin-fix.png") !important;
  }

  .game-shell:is(
    [data-step="boardDebriefFeeling"],
    [data-step="boardDebriefResponse"],
    [data-step="boardDebriefObservation"],
    [data-step="boardDebriefObservationFollowup"],
    [data-step="boardDebriefMemory"]
  ) .dialogue-panel[data-speaker-key="sophia"] {
    left: clamp(25rem, 33vw, 26.5rem) !important;
    right: auto !important;
    top: clamp(5.25rem, 11vh, 6.5rem) !important;
    bottom: auto !important;
    width: 270px !important;
    max-width: min(270px, calc(100% - 2rem)) !important;
    min-height: 96px !important;
    height: auto !important;
    padding: .78rem .84rem .96rem !important;
    transform: none !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png") !important;
  }

  .game-shell:is(
    [data-step="boardDebriefResponse"],
    [data-step="boardDebriefMemory"]
  ) .dialogue-panel[data-speaker-key="shane"] {
    left: clamp(24.5rem, 32.5vw, 26rem) !important;
    right: auto !important;
    top: clamp(5.25rem, 11vh, 6.5rem) !important;
    bottom: auto !important;
    width: 270px !important;
    max-width: min(270px, calc(100% - 2rem)) !important;
    min-height: 96px !important;
    height: auto !important;
    padding: .78rem .84rem .96rem !important;
    transform: none !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png") !important;
  }

  .game-shell[data-step="boardDebriefMemory"] .dialogue-panel {
    min-height: 122px !important;
  }

  .game-shell[data-step="boardDebriefMemory"] .dialogue-panel .line {
    font-size: clamp(.78rem, .9vw, .88rem) !important;
    line-height: 1.05 !important;
  }
}

/* Final chosen-home night visibility lock. These approved sources already
   contain their own night lighting, so the global scene wash was crushing the
   shadow detail a second time. Keep the sequence nocturnal but fully readable. */
.game-shell:is(
  [data-step="wrapup"][data-housing]:not([data-housing=""]),
  [data-step="ending"][data-housing]:not([data-housing=""])
) .scene-image {
  filter: saturate(.94) contrast(1) brightness(1.18) !important;
}

.game-shell:is(
  [data-step="bedtimeSink"],
  [data-step="bedtimeChanging"],
  [data-step="bedtimeBedEdge"]
) .scene-image {
  filter: saturate(.94) contrast(1) brightness(1.34) !important;
}

.game-shell:is(
  [data-step="wrapup"][data-housing]:not([data-housing=""]),
  [data-step="bedtimeSink"],
  [data-step="bedtimeChanging"],
  [data-step="bedtimeBedEdge"],
  [data-step="ending"][data-housing]:not([data-housing=""])
) .scene-wash {
  background:
    linear-gradient(90deg, rgba(7, 10, 14, .08), transparent 46%, rgba(7, 10, 14, .06)),
    linear-gradient(0deg, rgba(7, 10, 14, .08), transparent 62%, rgba(7, 10, 14, .04)) !important;
}

/* Platform-regression authority. Older inspection passes used permanent
   halos and more-specific cue rules. The shipped interaction is a quiet point
   that appears only after genuine pointer movement or keyboard focus. */
.game-shell:is(
  [data-step="officeTourDesk"],
  [data-step="tools"],
  [data-step="toolInspect"]
) .desk-tool-hotspots .scene-hotspot[data-tool],
.game-shell:is(
  [data-step="evidenceRule"],
  [data-step="evidenceInspect"]
) .evidence-tool-hotspots .scene-hotspot[data-evidence-tool] {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.game-shell:is(
  [data-step="officeTourDesk"],
  [data-step="tools"],
  [data-step="toolInspect"]
) .desk-tool-hotspots .scene-hotspot[data-tool]::after,
.game-shell:is(
  [data-step="evidenceRule"],
  [data-step="evidenceInspect"]
) .evidence-tool-hotspots .scene-hotspot[data-evidence-tool]::after {
  display: none !important;
  content: none !important;
}

.game-shell:is(
  [data-step="officeTourDesk"],
  [data-step="tools"],
  [data-step="toolInspect"]
) .desk-tool-hotspots .scene-hotspot[data-tool]::before,
.game-shell:is(
  [data-step="officeTourDesk"],
  [data-step="tools"],
  [data-step="toolInspect"]
) .desk-tool-hotspots .scene-hotspot[data-tool]:hover::before,
.game-shell:is(
  [data-step="evidenceRule"],
  [data-step="evidenceInspect"]
) .evidence-tool-hotspots .scene-hotspot[data-evidence-tool]:not(.done)::before,
.game-shell:is(
  [data-step="evidenceRule"],
  [data-step="evidenceInspect"]
) .evidence-tool-hotspots .scene-hotspot[data-evidence-tool]:not(.done):hover::before {
  opacity: 0 !important;
}

.game-shell:is(
  [data-step="officeTourDesk"],
  [data-step="tools"],
  [data-step="toolInspect"]
) .desk-tool-hotspots .scene-hotspot[data-tool].cue-active::before,
.game-shell:is(
  [data-step="officeTourDesk"],
  [data-step="tools"],
  [data-step="toolInspect"]
) .desk-tool-hotspots .scene-hotspot[data-tool]:focus-visible::before,
.game-shell:is(
  [data-step="evidenceRule"],
  [data-step="evidenceInspect"]
) .evidence-tool-hotspots .scene-hotspot[data-evidence-tool]:not(.done).cue-active::before,
.game-shell:is(
  [data-step="evidenceRule"],
  [data-step="evidenceInspect"]
) .evidence-tool-hotspots .scene-hotspot[data-evidence-tool]:not(.done):focus-visible::before {
  opacity: .96 !important;
}

.game-shell:is(
  [data-step="officeTourDesk"],
  [data-step="tools"],
  [data-step="toolInspect"]
) .desk-tool-hotspots .scene-hotspot[data-tool] > span,
.game-shell:is(
  [data-step="evidenceRule"],
  [data-step="evidenceInspect"]
) .evidence-tool-hotspots .scene-hotspot[data-evidence-tool] > span {
  opacity: 0 !important;
  visibility: hidden !important;
}

.game-shell:is(
  [data-step="officeTourDesk"],
  [data-step="tools"],
  [data-step="toolInspect"]
) .desk-tool-hotspots .scene-hotspot[data-tool].cue-active > span,
.game-shell:is(
  [data-step="officeTourDesk"],
  [data-step="tools"],
  [data-step="toolInspect"]
) .desk-tool-hotspots .scene-hotspot[data-tool]:focus-visible > span,
.game-shell:is(
  [data-step="evidenceRule"],
  [data-step="evidenceInspect"]
) .evidence-tool-hotspots .scene-hotspot[data-evidence-tool]:not(.done).cue-active > span,
.game-shell:is(
  [data-step="evidenceRule"],
  [data-step="evidenceInspect"]
) .evidence-tool-hotspots .scene-hotspot[data-evidence-tool]:not(.done):focus-visible > span {
  opacity: 1 !important;
  visibility: visible !important;
}

.game-shell:is(
  [data-step="evidenceRule"],
  [data-step="evidenceInspect"]
) .evidence-tool-hotspots .scene-hotspot[data-evidence-tool].done::before,
.game-shell:is(
  [data-step="evidenceRule"],
  [data-step="evidenceInspect"]
) .evidence-tool-hotspots .scene-hotspot[data-evidence-tool].done::after {
  display: none !important;
  opacity: 0 !important;
  content: none !important;
}

/* Harbourtown is rainy daylight. Public packaging must not reapply the
   default noir wash after the authored images are loaded. */
.game-shell:is(
  [data-step="harbourtownTransition"],
  [data-step="harbourtown"],
  [data-step="harbourtownPatience"],
  [data-step="harbourtownResponse"],
  [data-step="harbourtownPatternObservation"],
  [data-step="harbourtownObserve"],
  [data-step="harbourtownPaperwork"],
  [data-step="harbourtownEllieLead"],
  [data-step^="ellie"],
  [data-step^="freshPaint"],
  [data-step^="seniorWorker"],
  [data-step="camera"],
  [data-step="note"],
  [data-step="fieldNoteHonesty"]
) .scene-image {
  filter: saturate(1) contrast(1) brightness(1.16) !important;
}

.game-shell:is(
  [data-step="harbourtownTransition"],
  [data-step="harbourtown"],
  [data-step="harbourtownPatience"],
  [data-step="harbourtownResponse"],
  [data-step="harbourtownPatternObservation"],
  [data-step="harbourtownObserve"],
  [data-step="harbourtownPaperwork"],
  [data-step="harbourtownEllieLead"],
  [data-step^="ellie"],
  [data-step^="freshPaint"],
  [data-step^="seniorWorker"],
  [data-step="camera"],
  [data-step="note"],
  [data-step="fieldNoteHonesty"]
) .scene-wash {
  background: transparent !important;
}

/* The debrief plate leaves one vertical lane between Shane and Sophia. Keep
   the complete "Solid work today" exchange in that lane, with each tail
   returning toward its speaker instead of covering either face. */
@media (min-width: 761px) {
  .game-shell:is(
    [data-step="boardDebriefSolid"],
    [data-step="boardDebriefFeeling"],
    [data-step="boardDebriefResponse"],
    [data-step="boardDebriefObservation"],
    [data-step="boardDebriefObservationFollowup"],
    [data-step="boardDebriefMemory"]
  ) .dialogue-panel {
    left: 43% !important;
    right: auto !important;
    top: clamp(4rem, 9vh, 5.5rem) !important;
    bottom: auto !important;
    width: 270px !important;
    max-width: min(270px, calc(100% - 2rem)) !important;
    height: auto !important;
    transform: none !important;
  }

  .game-shell:is(
    [data-step="boardDebriefSolid"],
    [data-step="boardDebriefResponse"],
    [data-step="boardDebriefMemory"]
  ) .dialogue-panel[data-speaker-key="shane"] {
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-left-placement-margin-fix.png") !important;
  }

  .game-shell:is(
    [data-step="boardDebriefFeeling"],
    [data-step="boardDebriefResponse"],
    [data-step="boardDebriefObservation"],
    [data-step="boardDebriefObservationFollowup"],
    [data-step="boardDebriefMemory"]
  ) .dialogue-panel[data-speaker-key="sophia"] {
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-three-line-tail-right-placement-margin-fix.png") !important;
  }

  .game-shell[data-step="boardDebriefSolid"] .dialogue-panel[data-speaker-key="shane"] {
    width: 220px !important;
    min-height: 72px !important;
    --bubble-sprite: url("assets/prototype/speech-bubbles/bubble-one-line-tail-left-placement-margin-fix.png") !important;
  }
}