/* Stethoscope tool — theme + layout.
   Phase 1: idle/listening main screen with a synced, pulsing heart.
   (Intro video, verdict card, glow bloom, THUMP-THUMP come in phase 2.) */

body {
  /* Friendly leafy green for a fun toy feel, with a whisper of a deeper edge
     for soft depth. Keeps #8FC97A as the dominant tone. */
  background: radial-gradient(circle at 50% 30%, #8FC97A 0%, #79b566 100%);
}

/* ---- Layout ----
   The stethoscope image bleeds off the bottom of the screen. A fixed,
   viewport-centered stage with the image's exact aspect (752×1344) is sized to
   COVER the viewport, so the chestpiece sits up top and the yellow tube runs
   down the center and exits the bottom edge on any phone height. The glow,
   heart, and drum tap target are positioned as % of this stage, so they stay
   locked to the drum however the stage is cropped. (Same pattern as the xray
   machine.) */
.steth {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100vw, calc(100svh * 752 / 1344));
  height: max(100svh, calc(100vw * 1344 / 752));
  z-index: 0;
}

/* The chestpiece + yellow tube, filling the cover stage (no distortion — the
   stage shares the image's aspect). */
.bell {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.45));
}

/* Idle "attract" cue: a slow, gentle breathe on the chestpiece while the screen
   waits to be tapped. Added/removed by JS (pre-tap only). The origin sits at the
   drum centre so the breathe radiates from the chestpiece; the heartbeat pulse
   animates the heart/thump (not the bell), so the two never collide. */
@keyframes steth-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}
.bell.breathe {
  transform-origin: 50% 29.5%;
  animation: steth-breathe 1.8s ease-in-out infinite;
}

/* ---- Idle Stage-2 cue: a hand tapping the chestpiece + a ripple ----
   An overlay locked to the drum centre (the toy PNG is never transformed).
   Shown + animated only while .app.idle-hint is set; clearing the class fades it
   out and stops the loops, so nothing keeps running in the background. */
.idle-hand-wrap {
  position: absolute;
  left: 50%;
  top: 29.5%;            /* the drum centre = the tap/contact point */
  width: 0;
  height: 0;
  z-index: 5;
  pointer-events: none;  /* taps pass straight through to the drum target */
  opacity: 0;
  transition: opacity 350ms ease;
}
.app.idle-hint .idle-hand-wrap { opacity: 1; }
.idle-ripple {
  position: absolute;
  left: 0;
  top: 0;
  width: 30vw;
  height: 30vw;
  border-radius: 50%;
  border: 0.8vw solid rgba(255, 255, 255, 0.85);
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0;
}
.idle-hand {
  position: absolute;
  left: 0;
  top: 0;
  width: 48vw;            /* the square hand PNG; its fingertip is anchored below */
  margin-left: -26.7vw;   /* fingertip x (≈55.7% of the art) sits on the anchor */
  margin-top: -7.5vw;     /* fingertip y (≈15.6% of the art) sits on the anchor */
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
}
/* Animations live on the .idle-hint state so removing the class halts them. */
.app.idle-hint .idle-hand   { animation: idle-tap 1.6s ease-in-out infinite; }
.app.idle-hint .idle-ripple { animation: idle-ripple 1.6s ease-in-out infinite; }
@keyframes idle-tap {
  0%, 25%  { transform: translateY(3.5vw); }  /* rest, just below the drum centre */
  50%, 62% { transform: translateY(0); }      /* gentle tap up to contact + hold */
  100%     { transform: translateY(3.5vw); }
}
@keyframes idle-ripple {
  0%, 42%  { opacity: 0;    transform: translate(-50%, -50%) scale(0.3); }
  50%      { opacity: 0.75; transform: translate(-50%, -50%) scale(0.45); }
  100%     { opacity: 0;    transform: translate(-50%, -50%) scale(1.15); }
}

/* Heart character centered on the drum's diaphragm (~50%, 29.5% of the image).
   aspect-ratio matches heart.png (~1.10) so the box fits the art; object-fit
   contain fills it. Shown + pulsing only while listening. */
.heart-pos {
  position: absolute;
  left: 50%;
  top: 29.5%;
  width: 30%;
  aspect-ratio: 1.102;
  transform: translate(-50%, -50%);
  z-index: 3;
  opacity: 0;
  pointer-events: none;       /* taps pass through to the drum target below */
  transition: opacity 500ms ease;
}
.listening .heart-pos { opacity: 1; }
.heart {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;   /* scale about center so it stays on the diaphragm */
  will-change: transform;
}

/* Warm glow that blooms from behind the drum while listening. */
.glow {
  position: absolute;
  left: 50%;
  top: 29.5%;
  width: 85%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 150, 70, 0.5) 0%, transparent 62%);
  opacity: 0;
  transition: opacity 600ms ease;
  pointer-events: none;
  z-index: 0;
}
.listening .glow { opacity: 1; }

/* ---- Drum tap target ----
   The chestpiece is the control now: a transparent circle over the drum.
   font-size:0 hides the "LISTENING…" text the listen logic still sets. */
.drum-tap {
  position: absolute;
  left: 50%;
  top: 29.5%;
  width: 70%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 4;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  font-size: 0;
  overflow: hidden;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.drum-tap:active:not(:disabled) { transform: translate(-50%, -50%) scale(0.96); }

/* ======================================================================
   Control overlays in the blank gutters left / right of the tube. They are
   fixed (viewport-relative) so they stay in the visible blank areas however
   the cover stage is cropped, and they live inside .screen so they dim at
   completion / under the instruction card. Static for now (no wiring yet),
   except the finish clip.
   ====================================================================== */

/* ---- Speed buttons — column near the BOTTOM-LEFT ----
   Each row is an icon button with a word beneath it. Hidden until listening
   begins, then it pops in. */
.modes {
  position: fixed;
  left: 4%;
  bottom: calc(env(safe-area-inset-bottom) + 5%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Sized in svh so the whole column is a fixed FRACTION of the screen height
     and always clears the blue chestpiece (the drum bottom sits at ~49% of the
     viewport on any phone), rather than overlapping it on shorter viewports. */
  gap: clamp(11px, 2svh, 20px);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 400ms ease, transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.listening .modes {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* Each row is one tidy unit: an icon button with a quiet word directly beneath
   it. The small gap here keeps the pair together; the larger, even gap between
   units lives on .modes. */
.mode-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(3px, 0.6svh, 6px);
}
/* Quiet label under each button (and the matching "All done!" under the Dolly).
   Simple, clean rounded text — the cream-outline sticker look is reserved for
   thump-thump alone. */
.mode-word,
.alldone {
  font-family: var(--font-rounded);
  font-weight: 700;
  font-size: clamp(11px, 1.85svh, 15px);
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #4e2e1a;
}
.mode-btn {
  width: clamp(62px, 10.5svh, 88px);
  height: clamp(62px, 10.5svh, 88px);
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-cream);
  color: var(--color-button-text);    /* icon color via currentColor */
  display: grid;
  place-items: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 0 var(--color-cream-edge), 0 7px 14px rgba(0, 0, 0, 0.28);
  transition: transform 80ms ease, box-shadow 120ms ease, background-color 200ms ease;
}
.mode-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--color-cream-edge), 0 4px 8px rgba(0, 0, 0, 0.3);
}
/* Ghosted (unselected): a muted dark fill + light icon, so they read clearly
   "off" against the light background. */
.mode-btn:not(.active) {
  background: rgba(74, 45, 32, 0.34);
  color: rgba(255, 244, 230, 0.72);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}
/* Active (selected): bright cream, warm gold glow ring, red icon. */
.mode-btn.active {
  background: var(--color-cream);
  color: var(--color-heart);
  box-shadow:
    0 0 0 3px rgba(255, 196, 92, 0.9),
    0 0 18px 4px rgba(255, 170, 70, 0.75),
    0 4px 0 var(--color-cream-edge),
    0 8px 16px rgba(0, 0, 0, 0.3);
}
.mode-icon {
  width: 52%;            /* scales with the button */
  height: 52%;
  fill: currentColor;
}

/* ---- THUMP-THUMP: single-line sticker in the chestpiece, below the heart ----
   Positioned as % of the cover stage (like the heart) so it tracks the drum.
   Sticker style: deep heart-red fill with a cream outline (paint-order keeps the
   outline outside the fill) → legible over both the light and dark blue. Reveals
   + pulses (JS scales the element) while listening; left/right:0 + text-align
   center means no positioning transform to fight the pulse scale. */
.thump {
  position: absolute;
  left: 0;
  right: 0;
  top: 39%;
  z-index: 2;
  margin: 0;
  text-align: center;
  white-space: nowrap;
  font-weight: 800;
  font-size: 27px;
  letter-spacing: 0.01em;
  color: #B82A0E;
  -webkit-text-stroke: 3.5px #FFF4E0;
  paint-order: stroke fill;
  pointer-events: none;
  opacity: 0;
  transition: opacity 350ms ease;
  will-change: transform;
}
.listening .thump { opacity: 1; }

/* ---- Finish button (Nurse Dolly clipboard) — bottom-RIGHT, the lone exit ----
   Balanced against the speed-button column. Hidden until listening begins (so
   the checkup can't be ended before it's started), then it pops in. */
.dolly {
  position: fixed;
  right: 3%;
  /* Land the clipboard baseline on the coffee button's bottom edge so the lower
     edge reads as one band. The coffee button sits ~22px above the mode column's
     6% anchor (its word label is below it); the clipboard sits ~0.25×width above
     the PNG's bottom edge (it has ~19% transparent padding below it). */
  bottom: calc(env(safe-area-inset-bottom) + 5% + 22px - min(30vw, 128px) * 0.25);
  z-index: 2;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  width: min(30vw, 128px);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1), opacity 400ms ease;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25));
}
.listening .dolly {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.dolly:active { transform: translateY(0) scale(0.94); }
/* After completion the screen dims; keep the controls non-interactive too. */
.app.complete .modes,
.app.complete .dolly { pointer-events: none; }
.dolly-img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}
/* "All done!" label, centered under the Dolly and sitting on the same bottom
   band as the speed-button words. Reveals with the Dolly. */
.alldone {
  position: fixed;
  right: calc(3% + min(30vw, 128px) / 2);
  bottom: calc(env(safe-area-inset-bottom) + 5%);
  transform: translateX(50%);
  z-index: 2;
  pointer-events: none;
  text-align: center;
  opacity: 0;
  transition: opacity 400ms ease;
}
.listening .alldone { opacity: 1; }

/* ---- Intro overlay ---- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #edc18a;          /* matches the warm exam-room palette */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 600ms ease;
}
/* Scrim so the caption + button stay legible against any video content.
   Tall enough to cover both elements with comfortable margin, dark enough at
   the bottom that cream text reads clearly. */
.intro::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.35) 40%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  z-index: 1;
}
.intro.hide {
  opacity: 0;
  pointer-events: none;
}
.intro-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* CTA group (caption + tap-to-start pill) anchored at the bottom of the intro. */
.intro-cta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom) + 7%);
  z-index: 2;                   /* above the scrim */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.intro-caption {
  margin: 0;
  text-align: center;
  font-weight: 800;
  font-size: 38px;
  letter-spacing: 0.005em;
  color: var(--color-cream);
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.55);
}
/* "Tap to start" rendered as a real cream pill so the affordance is unmistakable;
   the whole intro stays tappable, so this is purely a visual cue. */
.intro-hint {
  margin: 0;
  padding: 13px 28px;
  background: var(--color-cream);
  color: var(--color-button-text);
  font: 700 18px/1 inherit;
  letter-spacing: 0.04em;
  border-radius: 999px;
  box-shadow: 0 5px 0 var(--color-cream-edge), 0 10px 18px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  animation: hint-bob 1.6s ease-in-out infinite;
  transition: opacity 250ms ease;
}
.intro-hint.hide {
  opacity: 0;
  animation: none;
}
@keyframes hint-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
/* Skip-intro close button (top-right corner). */
.intro-skip {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 14px);
  right: calc(env(safe-area-inset-right) + 14px);
  z-index: 2;
  width: 46px;
  height: 46px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-button-text);
  color: var(--color-cream);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
  opacity: 0.92;
}
.intro-skip:hover,
.intro-skip:focus-visible {
  opacity: 1;
}
.intro-skip:active {
  transform: scale(0.92);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.intro-skip-icon {
  display: block;
  width: 60%;
  height: 60%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
}

/* ---- Completion: dim the screen behind the terminal verdict card ---- */
/* .screen groups the stethoscope stage + THUMP-THUMP + disclaimer (all
   positioned overlays) so they fade together at completion / while the
   instruction card is up. */
.screen {
  transition: opacity 700ms ease;
}
.app.complete .screen {
  opacity: 0.3;
  pointer-events: none;
}

.verdict-card {
  position: fixed;           /* viewport-relative: never extends the page's scroll area */
  top: 50%;
  left: 50%;
  z-index: 50;
  width: min(86vw, 400px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px 28px;
  background: var(--color-cream);
  border-radius: 28px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.45);
  /* Hidden until completion: centered, nudged down, faded out. Kept on-screen
     and visibility:hidden so it never contributes to layout/overflow. */
  transform: translate(-50%, calc(-50% + 10vh));
  opacity: 0;
  visibility: hidden;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 450ms ease,
              visibility 0s linear 600ms;
}
.app.complete .verdict-card {
  transform: translate(-50%, -50%);   /* slide up into the center */
  opacity: 1;
  visibility: visible;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 400ms ease;
}
.verdict-thump {
  width: 124px;
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.2));
}
.verdict-label {
  margin: 4px 0 -4px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-button-text);
  opacity: 0.55;
}
.verdict-text {
  margin: 0;
  text-align: center;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.35;
  color: var(--color-button-text);
}
/* Subtle pill divider separating the verdict from the warm closing note. */
.verdict-divider {
  width: 56px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-button-text);
  opacity: 0.22;
  margin: 6px 0;
}
.verdict-return {
  margin: 0;
  text-align: center;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.4;
  color: var(--color-button-text);
  opacity: 0.75;
}

/* ---- Instruction card (same cream card shell as the verdict card) ----
   Shown after the intro fades; dims + blocks the LISTEN screen behind it
   until OK! is tapped. */
.app.instructing .screen {
  opacity: 0.3;
  pointer-events: none;
}
.instruction-card {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 60;
  width: min(86vw, 400px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 30px 28px;
  background: var(--color-cream);
  border-radius: 28px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.45);
  /* Hidden until the intro ends: centered, nudged down, faded out. Kept
     visibility:hidden so it never contributes to layout/overflow. */
  transform: translate(-50%, calc(-50% + 10vh));
  opacity: 0;
  visibility: hidden;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 450ms ease,
              visibility 0s linear 600ms;
}
.app.instructing .instruction-card {
  transform: translate(-50%, -50%);
  opacity: 1;
  visibility: visible;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 400ms ease;
}
.instruction-thump {
  width: 150px;
  height: auto;
  margin-bottom: -4px;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.2));
}
.instruction-title {
  margin: 2px 0 0;
  text-align: center;
  font-weight: 800;
  font-size: 25px;
  line-height: 1.2;
  color: var(--color-button-text);
}
.instruction-body {
  margin: 0;
  text-align: center;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.4;
  color: var(--color-button-text);
}
/* Smaller, grownup-facing aside. */
.instruction-grownup {
  margin: -2px 0;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
  color: var(--color-button-text);
  opacity: 0.6;
}