/* ==========================================================================
   The case screen — stage on top, interaction panel below.
   On wide screens the panel moves to the right so the patient stays huge.
   ========================================================================== */

.case-root {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex; flex-direction: column;
  background: var(--bg);
}

/* ------------------------------------------------------------------ stage */
.case-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.case-scene {
  position: absolute; inset: 0;
  display: grid;
  place-items: end center;
  padding-bottom: 5%;
}

.case-patient {
  position: relative;
  height: 72%;
  aspect-ratio: 200 / 250;
  max-width: 62%;
  filter: drop-shadow(0 14px 18px rgba(44,51,80,.22));
  z-index: 2;
}

.case-overlay { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.case-overlay > * { pointer-events: auto; }

.bubble-lane {
  position: absolute; left: 3%; top: 3%; padding-right: 4px;
  display: flex; flex-direction: column; gap: 8px;
  max-width: min(40ch, 56%);
  z-index: 4; pointer-events: none;
}
.bubble-lane .bubble { font-size: clamp(14px, 1.5vw + 9px, 21px); }
.bubble-lane .bubble--settled { opacity: .96; }
.bubble-lane .bubble:not(:last-child) {
  opacity: .5; transform: scale(.93); transform-origin: left top;
  max-height: 3.4em; overflow: hidden;
}
.bubble--narrator, .bubble--nurse { background: var(--card-2); }
.bubble--hero { background: #e2f4ff; }
.bubble--hero::after { border-top-color: #e2f4ff; }
.bubble--narrator::after, .bubble--nurse::after { border-top-color: var(--card-2); }
.bubble__tkey { opacity: .8; }

.case-nametag {
  position: absolute; right: 12px; top: 12px; z-index: 5;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 18px 8px 10px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.95); box-shadow: var(--lift-1);
  font-family: var(--font-display); font-weight: 800; font-size: var(--step-1);
}
.case-nametag__emoji { font-size: 26px; }

.case-tally {
  position: absolute; left: 12px; bottom: 10px; z-index: 6;
  display: flex; gap: 8px;
}
.chip--tiny { height: 38px; font-size: var(--step-0); padding: 0 14px 0 10px; }
.chip--tiny .chip__icon { font-size: 18px; }

/* ------------------------------------------------------------- step dots */
.case-dots {
  display: flex; gap: 6px; justify-content: center;
  padding: 8px 12px 4px; flex: none; flex-wrap: wrap;
}
.case-dots i {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(44,51,80,.2); transition: all .3s;
}
.case-dots i.done { background: var(--mint); }
.case-dots i.now  { background: var(--sun); transform: scale(1.6); box-shadow: 0 0 0 4px rgba(255,200,68,.28); }

/* ------------------------------------------------------------------ panel */
.case-panel {
  flex: none;
  max-height: 52vh;   /* fallback for browsers without dynamic viewport units */
  max-height: 52dvh;  /* `vh` on a phone is the URL-bar-hidden height, which
                         let the panel run off the bottom of the screen */
  overflow-y: auto;
  padding: 4px 16px calc(26px + var(--safe));
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}

.panel__prompt { text-align: center; }
.panel__prompt-main {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--step-2); line-height: 1.15; color: var(--ink);
}
.panel__prompt-sub { font-size: var(--step-0); color: var(--ink-soft); margin-top: 4px; }

.panel__body { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }

.panel__teach {
  display: flex; align-items: flex-start; gap: 10px;
  background: linear-gradient(180deg,#fffdf5,#fff2d4);
  border-radius: var(--r-md); padding: 12px 18px;
  font-size: var(--step-0); color: #7a5a12; line-height: 1.35;
  box-shadow: var(--lift-1); max-width: 62ch;
  animation: pop-in .35s cubic-bezier(.2,1.3,.4,1.1) both;
}
.panel__teach-icon { font-size: 22px; }

.btn--wide { width: min(340px, 100%); }
.btn__arrow { animation: wiggle 1.4s ease-in-out infinite; }

/* ------------------------------------------------------------- tool tray */
.tool-tray {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  width: 100%;
}
.tool {
  --tool-tint: var(--sky);
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: clamp(88px, 21vw, 118px); padding: 12px 6px 10px;
  border: none; border-radius: var(--r-md);
  background: linear-gradient(180deg, #fff, #f4f8ff);
  box-shadow: 0 6px 0 color-mix(in srgb, var(--tool-tint) 55%, #2c3350),
              0 12px 22px rgba(44,51,80,.18);
  cursor: grab; touch-action: none; user-select: none;
  transition: transform .14s cubic-bezier(.3,1.4,.5,1), box-shadow .14s;
}
.tool:hover { transform: translateY(-4px); }
.tool:active, .tool--dragging { cursor: grabbing; transform: translateY(3px) scale(.97); }
.tool__icon {
  font-size: 40px; line-height: 1;
  filter: drop-shadow(0 3px 3px rgba(44,51,80,.2));
}
.tool__name {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  color: var(--ink-soft); text-align: center; line-height: 1.1;
}
.tool--glow { animation: glow-ring 1.5s ease-in-out infinite; }
.tool--armed { outline: 5px solid var(--sun); outline-offset: 3px; transform: translateY(-6px) scale(1.06); }
.tool--shake { animation: wiggle .48s ease-in-out; }
.tool--away { opacity: .35; transform: scale(.9); pointer-events: none; }

.tool-ghost {
  position: fixed; z-index: 950; pointer-events: none;
  transform: translate(-50%,-50%) scale(1.25);
  width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center; font-size: 42px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 26px rgba(44,51,80,.35);
  animation: pop-in .18s ease both;
}

.tool-stuck {
  position: absolute; transform: translate(-50%,-50%);
  font-size: clamp(34px, 6vw, 54px); z-index: 6;
  filter: drop-shadow(0 4px 6px rgba(44,51,80,.3));
  animation: pop-in .3s cubic-bezier(.2,1.4,.4,1) both;
  pointer-events: none;
}

/* ----------------------------------------------------------- target spot */
.spot-marker {
  position: absolute; transform: translate(-50%,-50%);
  width: 84px; height: 84px; display: grid; place-items: center;
  pointer-events: none; z-index: 5;
}
.spot-marker__ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 5px dashed var(--sun);
  animation: spin 9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }
.spot-marker__dot {
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255,255,255,.85); display: grid; place-items: center;
  font-size: 26px; opacity: .55;
  animation: bob 2s ease-in-out infinite;
}
.spot-marker--hit { animation: pop-in .3s reverse forwards; }

.spots circle { pointer-events: auto; }
.spot--over { fill: rgba(255,200,68,.4) !important; }

/* -------------------------------------------------------------- gauges */
.gauge {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 26px; border-radius: var(--r-lg);
  background: #fff; box-shadow: var(--lift-2);
  touch-action: none; user-select: none;
  animation: pop-in .3s cubic-bezier(.2,1.3,.4,1.1) both;
}
.gauge--hold { width: 168px; cursor: pointer; }
.gauge__ring { position: absolute; top: 10px; left: 50%; transform: translateX(-50%) rotate(-90deg); width: 108px; height: 108px; }
.gauge__track { fill: none; stroke: rgba(44,51,80,.12); stroke-width: 10; }
.gauge__fill  { fill: none; stroke: var(--sun); stroke-width: 10; stroke-linecap: round; transition: stroke .2s; }
.gauge--pressing .gauge__fill { stroke: var(--mint); }
.gauge__icon { font-size: 48px; height: 108px; display: grid; place-items: center; }
.gauge__label { font-family: var(--font-display); font-weight: 700; font-size: var(--step-0); color: var(--ink-soft); }
.gauge--done { animation: pop-in .26s reverse forwards; }
.gauge--pressing { box-shadow: var(--lift-1), 0 0 0 6px rgba(63,208,166,.25); }

.gauge--rub { width: min(340px, 100%); cursor: ew-resize; }
.gauge__icon--rub { font-size: 44px; height: 60px; transition: transform .06s linear; }
.gauge__pips { display: flex; gap: 6px; }
.gauge__pips i {
  width: 16px; height: 10px; border-radius: 99px; background: rgba(44,51,80,.16);
  transition: background .2s, transform .2s;
}
.gauge__pips i.on { background: var(--mint); transform: scaleY(1.5); }

/* ------------------------------------------------------------- readouts */
.readout {
  --tint: var(--sky);
  width: min(420px, 100%);
  background: #fff; border-radius: var(--r-lg);
  box-shadow: var(--lift-2); padding: 14px 20px;
  border-top: 8px solid var(--tint);
  animation: pop-in .38s cubic-bezier(.2,1.3,.4,1.1) both;
}
.readout__head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 800; font-size: var(--step-0);
  color: var(--ink-soft); text-transform: uppercase; letter-spacing: .5px;
}
.readout__icon { font-size: 22px; }
.readout__value { display: flex; align-items: baseline; gap: 6px; justify-content: center; }
.readout__num {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(38px, 8vw, 62px); color: var(--tint); line-height: 1;
}
.readout__unit { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); color: var(--ink-soft); }
.readout__text {
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-1);
  color: var(--ink); text-align: center; padding: 6px 0;
}
.readout__note { font-size: var(--step-0); color: var(--ink-soft); text-align: center; }
.readout__ecg { color: var(--tint); }
.readout__ecg svg { width: 100%; height: 54px; }

/* --------------------------------------------------------------- choices */
.choice-grid { display: grid; gap: 12px; width: 100%; max-width: 720px; }
.choice-grid--cards { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.choice-grid--empathy { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.choice-grid--chips { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.choice-grid--shapes { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }

.choice {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 14px; min-height: 96px;
  border: none; border-radius: var(--r-lg);
  background: linear-gradient(180deg,#fff,#f6f9ff);
  box-shadow: 0 6px 0 rgba(44,51,80,.16), 0 12px 22px rgba(44,51,80,.14);
  cursor: pointer; text-align: center;
  transition: transform .14s cubic-bezier(.3,1.4,.5,1), box-shadow .14s, filter .2s;
}
.choice:hover { transform: translateY(-3px); }
.choice:active { transform: translateY(3px); }
.choice:focus-visible { outline: 4px solid var(--ink); outline-offset: 3px; }
.choice__icon { font-size: 38px; line-height: 1; }
.choice__label { font-family: var(--font-display); font-weight: 700; font-size: var(--step-0); color: var(--ink); line-height: 1.2; }
.choice__detail { font-size: 13px; color: var(--ink-soft); font-style: italic; }
.choice--shapes .choice__icon { font-size: clamp(48px, 11vw, 80px); }
.choice--shapes { min-height: 120px; }
.choice--empathy { background: linear-gradient(180deg,#fff,#fff1f6); }
.choice--right {
  background: linear-gradient(180deg,#e6fff4,#c6f7e2);
  box-shadow: 0 6px 0 var(--mint-deep), 0 0 0 5px rgba(63,208,166,.35);
}
.choice--dim { opacity: .4; filter: grayscale(.5); }
.choice--wobble { animation: wiggle .5s ease-in-out; }
.choice--glow { animation: glow-ring 1.4s ease-in-out infinite; }
.choice--picked { background: linear-gradient(180deg,#fff0f6,#ffd9e8); box-shadow: 0 6px 0 #e06a99; }
.choice[disabled] { cursor: default; }

/* ------------------------------------------------------------ find spots */
.find-spot {
  position: absolute; transform: translate(-50%,-50%);
  width: 62px; height: 62px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.55);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 4px 10px rgba(44,51,80,.2);
  animation: pop-in .4s cubic-bezier(.2,1.3,.4,1.1) both;
  z-index: 6;
}
.find-spot__icon { font-size: 30px; animation: bob-slow 3s ease-in-out infinite; }
.find-spot:hover { transform: translate(-50%,-50%) scale(1.12); }
.find-spot--halo { box-shadow: 0 0 0 5px rgba(255,200,68,.5), 0 4px 10px rgba(44,51,80,.2); }
.find-spot--found { animation: pop-in .35s reverse forwards; pointer-events: none; }
.find-spot--wobble { animation: wiggle .48s ease-in-out; }

.find-counter {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 20px; border-radius: var(--r-pill);
  background: #fff; box-shadow: var(--lift-1);
  font-family: var(--font-display); font-weight: 800; font-size: var(--step-1);
}
.find-counter__num { color: var(--mint-deep); font-size: var(--step-2); }

/* ---------------------------------------------------------------- triage */
.triage { display: grid; gap: 10px; width: 100%; max-width: 620px; }
.triage__card {
  display: grid; grid-template-columns: 44px 54px 1fr; align-items: center; gap: 12px;
  padding: 12px 16px; border: none; border-radius: var(--r-lg);
  background: linear-gradient(180deg,#fff,#f6f9ff);
  box-shadow: 0 6px 0 rgba(44,51,80,.14), 0 10px 20px rgba(44,51,80,.12);
  cursor: pointer; text-align: left;
  transition: transform .14s, box-shadow .14s;
}
.triage__card:hover { transform: translateY(-3px); }
.triage__rank {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(44,51,80,.1); color: var(--ink);
  font-family: var(--font-display); font-weight: 800; font-size: 20px;
}
.triage__icon { font-size: 40px; }
.triage__body { display: flex; flex-direction: column; }
.triage__body strong { font-family: var(--font-display); font-size: var(--step-1); }
.triage__body em { font-size: var(--step-0); color: var(--ink-soft); font-style: normal; }
.triage__card--done { background: linear-gradient(180deg,#e6fff4,#c6f7e2); box-shadow: 0 6px 0 var(--mint-deep); }
.triage__card--done .triage__rank { background: var(--mint); color: #fff; }
.triage__card--halo { animation: glow-ring 1.5s ease-in-out infinite; }

/* --------------------------------------------------------------- scanner */
.scanner { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }

.xray-frame {
  position: absolute; transform: translate(-50%,-50%);
  width: clamp(120px, 28vw, 190px); aspect-ratio: 1;
  border-radius: 18px; cursor: grab; touch-action: none; z-index: 7;
  background: rgba(140,200,255,.16);
  box-shadow: inset 0 0 0 3px rgba(120,190,255,.7);
}
.xray-frame__corner { position: absolute; width: 26px; height: 26px; border: 6px solid var(--grape); }
.xray-frame__corner.tl { top: -3px; left: -3px; border-right: 0; border-bottom: 0; border-radius: 14px 0 0 0; }
.xray-frame__corner.tr { top: -3px; right: -3px; border-left: 0; border-bottom: 0; border-radius: 0 14px 0 0; }
.xray-frame__corner.bl { bottom: -3px; left: -3px; border-right: 0; border-top: 0; border-radius: 0 0 0 14px; }
.xray-frame__corner.br { bottom: -3px; right: -3px; border-left: 0; border-top: 0; border-radius: 0 0 14px 0; }
.xray-frame__hint { position: absolute; inset: 0; display: grid; place-items: center; font-size: 38px; opacity: .5; }
.xray-frame--locked { background: rgba(63,208,166,.25); box-shadow: inset 0 0 0 3px var(--mint), 0 0 0 8px rgba(63,208,166,.25); }
.xray-frame--locked .xray-frame__corner { border-color: var(--mint-deep); }
.xray-frame--firing { animation: pop-in .3s reverse forwards; }

.micro-view {
  width: min(420px, 100%); aspect-ratio: 3/2; border-radius: var(--r-lg);
  overflow: hidden; background: #101a2e; box-shadow: var(--lift-2);
  position: relative; transition: box-shadow .3s;
}
.micro-view--sharp { box-shadow: var(--lift-2), 0 0 0 6px rgba(63,208,166,.4); }
.micro-blur { width: 100%; height: 100%; transition: filter .12s linear, opacity .12s; }
.micro-blur svg { width: 100%; height: 100%; }
.micro-dial-wrap { display: flex; align-items: center; gap: 12px; width: min(420px, 100%); font-size: 26px; }
.micro-dial {
  flex: 1; height: 44px; -webkit-appearance: none; appearance: none; background: transparent;
}
.micro-dial::-webkit-slider-runnable-track { height: 18px; border-radius: 99px; background: linear-gradient(90deg,#cfd8ea,#a4b4d0); }
.micro-dial::-moz-range-track { height: 18px; border-radius: 99px; background: linear-gradient(90deg,#cfd8ea,#a4b4d0); }
.micro-dial::-webkit-slider-thumb {
  -webkit-appearance: none; width: 44px; height: 44px; margin-top: -13px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--mint)); box-shadow: 0 4px 0 var(--mint-deep), 0 8px 16px rgba(0,0,0,.2);
  cursor: pointer;
}
.micro-dial::-moz-range-thumb {
  width: 44px; height: 44px; border: none; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--mint)); box-shadow: 0 4px 0 var(--mint-deep);
  cursor: pointer;
}

.scan-loading { display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--font-display); font-size: var(--step-1); }
.scan-loading__bar { width: min(320px, 100%); height: 18px; border-radius: 99px; background: rgba(44,51,80,.14); overflow: hidden; }
.scan-loading__bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg,var(--grape),var(--sky)); animation: scanfill 1.2s ease-out forwards; }
@keyframes scanfill { to { width: 100% } }

.scan-plate {
  width: min(440px, 100%); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--lift-2);
  animation: pop-in .45s cubic-bezier(.2,1.3,.4,1.1) both;
}
.scan-plate svg { width: 100%; display: block; }
.scan-caption { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); text-align: center; }
.art--xray .scanline { animation: scansweep 2.4s linear infinite; }
@keyframes scansweep { from { transform: translateY(-30px) } to { transform: translateY(200px) } }
/* Pulse the marker with opacity only.
   `twinkle` also animates `transform`, and a CSS transform on an SVG element
   overrides its transform="..." attribute — which threw any positioned group
   (the swallowed duck) off the plate. It also dipped to opacity .25, far too
   faint to find on a dark X-ray. */
.art-flag { animation: flag-pulse 1.8s ease-in-out infinite; }
@keyframes flag-pulse { 0%, 100% { opacity: .72 } 50% { opacity: 1 } }

/* ------------------------------------------------------------- show card */
.showcard {
  width: min(520px, 100%);
  background: linear-gradient(180deg,#fff,#f7fbff);
  border-radius: var(--r-xl); box-shadow: var(--lift-2);
  padding: 12px 20px 20px; text-align: center;
  animation: pop-in .42s cubic-bezier(.2,1.3,.4,1.1) both;
}
.showcard__art svg { width: 100%; height: auto; max-height: 30vh; max-height: 30dvh; }
.showcard__title { font-size: var(--step-2); margin: 4px 0 6px; }
.showcard__text { font-size: var(--step-0); color: var(--ink-soft); line-height: 1.45; margin: 0; }
.art-beat { animation: art-beat 1.1s ease-in-out infinite; transform-origin: center; }
@keyframes art-beat { 0%,100% { transform: scale(1) } 18% { transform: scale(1.14) } 36% { transform: scale(1) } 54% { transform: scale(1.08) } }
.art-breathe { animation: art-breathe 2.6s ease-in-out infinite; transform-origin: center 40px; }
@keyframes art-breathe { 0%,100% { transform: scale(1) } 50% { transform: scale(1.11, 1.06) } }

/* ------------------------------------------------------------- backdrop */
.backdrop { position: absolute; inset: 0; overflow: hidden; }
.backdrop__wall {
  position: absolute; inset: 0 0 26% 0;
  background: linear-gradient(180deg, var(--wall2), var(--wall));
}
.backdrop__wall::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background: rgba(255,255,255,.6);
  box-shadow: 0 3px 6px rgba(44,51,80,.12);
}
.backdrop__floor {
  position: absolute; inset: 74% 0 0 0;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 2px, transparent 2px 62px),
    linear-gradient(180deg, color-mix(in srgb, var(--floor) 88%, #000), var(--floor));
}
.backdrop__window {
  position: absolute; right: 5%; top: 16%;
  width: clamp(96px, 19vw, 190px); aspect-ratio: 5/4;
  border-radius: 18px 18px 8px 8px; overflow: hidden;
  background: linear-gradient(180deg,#9fdcff,#d9f2ff);
  box-shadow: inset 0 0 0 8px #fff, 0 6px 14px rgba(44,51,80,.16);
}
.backdrop__window--night { background: linear-gradient(180deg,#2b3f6e,#5b74ad); }
.win-sun { position: absolute; right: 12%; top: 10%; font-size: 26px; animation: bob-slow 5s ease-in-out infinite; }
.win-cloud { position: absolute; height: 16px; width: 52px; border-radius: 99px; background: rgba(255,255,255,.9); }
.win-cloud--a { top: 34%; animation: drift 22s linear infinite; }
.win-cloud--b { top: 58%; width: 38px; animation: drift 32s linear infinite 6s; }
.win-bird { position: absolute; top: 22%; font-size: 15px; animation: drift 26s linear infinite 3s; }
.win-star { position: absolute; left: 24%; top: 26%; font-size: 16px; animation: twinkle 3s ease-in-out infinite; }
.backdrop__screen {
  position: absolute; right: 5%; top: 17%;
  width: clamp(90px, 18vw, 170px); aspect-ratio: 4/3; border-radius: 12px;
  background: #16233f; box-shadow: inset 0 0 0 7px #cfd8ea, 0 6px 14px rgba(44,51,80,.2);
  padding: 14px; display: flex; flex-direction: column; justify-content: center; gap: 10px;
}
.screen-line { height: 6px; border-radius: 99px; background: #4fd0a6; opacity: .8; animation: shimmer 3s linear infinite; background-image: linear-gradient(90deg,#4fd0a6,#8fdcff,#4fd0a6); background-size: 200% 100%; }
.screen-line:nth-child(2) { width: 60%; animation-delay: .6s; }
.backdrop__poster {
  position: absolute; left: 5%; top: 46%;
  width: clamp(44px, 8vw, 78px); aspect-ratio: 3/4; border-radius: 10px;
  background: #fff; box-shadow: 0 5px 12px rgba(44,51,80,.18);
  display: grid; place-items: center; font-size: clamp(24px, 5vw, 42px);
  transform: rotate(-3deg);
}
.backdrop__shelf {
  position: absolute; left: 34%; top: 5%; transform: translateX(-50%);
  display: flex; gap: clamp(10px, 3vw, 28px);
  padding: 8px 18px 6px; border-radius: 0 0 12px 12px;
  background: rgba(255,255,255,.75); box-shadow: 0 5px 10px rgba(44,51,80,.12);
}
.backdrop__prop { font-size: clamp(20px, 4vw, 32px); animation: bob-slow 4s ease-in-out infinite; }
.backdrop__table {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(66%, 560px); height: 12%;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg,#fff,#e3ebf7);
  box-shadow: 0 8px 0 #c3cee0, 0 16px 26px rgba(44,51,80,.18);
}

/* -------------------------------------------------------- wide screens */
@media (min-width: 900px) and (orientation: landscape) {
  .case-root { flex-direction: row; }
  .case-stage { flex: 1 1 58%; }
  .case-dots { position: absolute; bottom: 6px; left: 0; right: 42%; z-index: 8; }
  .case-panel {
    flex: 0 0 42%; max-width: 560px; max-height: none;
    justify-content: center;
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(8px);
    box-shadow: -10px 0 30px rgba(44,51,80,.1);
    padding: 24px;
  }
  .case-patient { height: 78%; max-width: 76%; }
}

@media (max-height: 560px) and (orientation: landscape) {
  .case-panel { max-height: 60vh; max-height: 60dvh; }
  .case-patient { height: 88%; }
}

/* Portrait phones: keep the stage generous and the bubbles compact. */
@media (max-width: 620px) {
  .bubble-lane { max-width: 66%; }
  .bubble-lane .bubble { padding: 12px 16px; }
  .case-panel { max-height: 52vh; max-height: 52dvh; }
  .case-nametag { padding: 6px 14px 6px 8px; }
  .case-nametag__emoji { font-size: 22px; }
}

/* On any screen where the panel is tight — a narrow phone in portrait OR a
   short one in landscape — the tool tray becomes a single side-scrolling
   strip. Wrapped onto a second row it pushed tools past the bottom of the
   panel, and because every tool sets `touch-action: none` a child could not
   scroll them back into reach: the tools were simply gone off the screen.
   A strip always shows the first tools and keeps the rest one swipe away. */
@media (max-width: 620px), (max-height: 620px) {
  .tool-tray {
    flex-wrap: nowrap;
    /* `safe` keeps a tray that overflows left-aligned rather than centring it
       and cutting off the first tool. */
    justify-content: safe center;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    /* room for the tools' drop shadow, which would otherwise be clipped */
    padding: 4px 2px 14px;
    -webkit-overflow-scrolling: touch;
  }
  .tool-tray::-webkit-scrollbar { height: 0; }
  .tool {
    flex: 0 0 auto;
    scroll-snap-align: center;
    /* Sideways swipes scroll the strip; an upward drag still picks the tool
       up and carries it to the patient, which is the gesture the game asks
       for and the one that must keep working. */
    touch-action: pan-x;
  }
}