/* Shot (syringe) tool — theme + composite layout.
   Phase 1: the core syringe with a draggable plunger and draining rainbow
   fluid. (Intro, instruction card, bandage picker, outro come later.) */

/* Sky-blue theme — the shot tool's own identity (stethoscope = red, reflex =
   green). Calm/reassuring to suit the bravery moment. */
:root {
  --color-bg-center: #b6e3f7;
  --color-bg-edge: #6bb8e0;
}

body {
  background: radial-gradient(circle at 50% 38%,
    var(--color-bg-center) 0%, var(--color-bg-edge) 90%);
}

/* Faint heart/star pattern, same motif as the other tools (inline-SVG tile, no
   image asset), recolored to a deep sky blue. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.42;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'><g fill='%2314557a'><path transform='translate(16,14) scale(0.85)' d='M12 21C12 21 3 14 3 8.5 3 5.4 5.4 3 8.5 3 10.3 3 11.6 4 12 5 12.4 4 13.7 3 15.5 3 18.6 3 21 5.4 21 8.5 21 14 12 21 12 21Z'/><path transform='translate(94,82) scale(0.85)' d='M12 2 14.6 8.6 21.6 9.2 16.3 13.8 18 20.6 12 16.9 6 20.6 7.7 13.8 2.4 9.2 9.4 8.6Z'/><path transform='translate(104,18) scale(0.5)' d='M12 2 14.6 8.6 21.6 9.2 16.3 13.8 18 20.6 12 16.9 6 20.6 7.7 13.8 2.4 9.2 9.4 8.6Z'/><path transform='translate(20,94) scale(0.5)' d='M12 21C12 21 3 14 3 8.5 3 5.4 5.4 3 8.5 3 10.3 3 11.6 4 12 5 12.4 4 13.7 3 15.5 3 18.6 3 21 5.4 21 8.5 21 14 12 21 12 21Z'/></g></svg>");
  background-size: 150px 150px;
}

.app { position: relative; z-index: 1; }

/* ---- Screens ----
   The syringe and bandage screens are stacked absolutely and cross-fade. The
   instruction + final cards are separate overlays. */
.screen {
  position: absolute;
  inset: 0;
  transition: opacity 450ms ease;
}

/* Bandage screen hidden until the shot is given; syringe hidden once it is. */
.bandage-screen {
  opacity: 0;
  visibility: hidden;
  transition: opacity 450ms ease, visibility 0s linear 450ms;
}
.app.bandaging .bandage-screen {
  opacity: 1;
  visibility: visible;
  transition: opacity 450ms ease;
}
.app.bandaging .shot-screen {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 450ms ease, visibility 0s linear 450ms;
}
/* Dim the bandage screen behind the terminal final card. */
.app.complete .bandage-screen {
  opacity: 0.28;
  pointer-events: none;
}

/* ---- Stage ----
   Box matches the syringe art (688×1024), pinned to the top so the needle tip
   (art y60) bleeds to the very top edge; the handle overhangs the bottom, so
   overflow stays visible. Geometry vars below drive the plunger + fluid. */
.stage {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -5.86%); /* pull needle tip (art y60/1024) to the top edge */
  /* svh (the *small* viewport) so the whole syringe — incl. the pusher handle
     that overhangs below the stage — fits the visible area when the mobile
     toolbars are showing, rather than overflowing the bottom. */
  width: min(90vw, 42svh);
  aspect-ratio: 688 / 1024;
  overflow: visible;
  touch-action: none; /* dragging the plunger must not scroll the page */

  /* Progress + composite geometry (fractions of the stage; see config.js). */
  --p: 0;                 /* 0 = full, 1 = injected; set by JS during the drag */
  --pusher-start: 69.3%;  /* plunger top at start (seal at chamber bottom, y772) */
  --travel: 46.1%;        /* plunger rises this much (472/1024) → seal to chamber top */
  --fluid-top: 29.3%;     /* fluid top, tucked just under the blue needle (y300) */
  --fluid-max: 46.1%;     /* fluid height at start (full chamber); 0 when injected */
}

.layer {
  position: absolute;
  left: 0;
  top: 0;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Pusher (back): the plunger. Slides up as --p grows (seal bottom → top). */
.pusher {
  left: 11%;            /* (1 - 0.78) / 2 */
  top: calc(var(--pusher-start) - var(--p) * var(--travel));
  width: 78%;          /* scaled so the seal/O-ring lines up with the bore */
  height: auto;
  z-index: 1;
  cursor: grab;
  touch-action: none;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.22));
}
.pusher:active { cursor: grabbing; }

/* Fluid (middle): a programmatic rainbow fill clipped to the barrel interior.
   Top pinned under the needle; height shrinks to 0 as the seal reaches the top,
   staying welded to the rising seal. */
.fluid {
  left: 40.0%;
  top: var(--fluid-top);
  width: 19.9%;
  height: calc((1 - var(--p)) * var(--fluid-max));
  z-index: 2;
  overflow: hidden;
  border-radius: 2px 2px 7px 7px;
  background: linear-gradient(160deg,
    #ff5fa2 0%, #ff8e3c 18%, #ffd23f 36%, #2ecc71 56%, #36c5f0 76%, #9b6cf0 100%);
  background-size: 100% 240%;
  box-shadow: inset 0 6px 10px rgba(255, 255, 255, 0.45),
              inset 0 -8px 12px rgba(0, 0, 0, 0.12);
}
/* Sparkly shimmer: a soft diagonal sheen sweeping across the fluid. */
.fluid::after {
  content: "";
  position: absolute;
  inset: -40% -120%;
  background: linear-gradient(115deg,
    transparent 38%, rgba(255, 255, 255, 0.65) 50%, transparent 62%);
  animation: fluid-shimmer 2.6s ease-in-out infinite;
}
@keyframes fluid-shimmer {
  0%   { transform: translateX(-40%); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateX(40%); opacity: 0; }
}

/* Syringe (front): static glass barrel + needle, on top of everything. */
.syringe {
  width: 100%;
  height: auto;
  z-index: 3;
  pointer-events: none; /* drags pass through to the pusher */
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.22));
}

/* While the instruction card is up, dim the syringe and block dragging it. */
.app.instructing .stage {
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 350ms ease;
}

/* ---- Bandage picker ---- */
.bandage-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2.5vh, 20px);
  padding: calc(env(safe-area-inset-top) + 3vh)
           max(16px, env(safe-area-inset-right))
           calc(env(safe-area-inset-bottom) + 2vh)
           max(16px, env(safe-area-inset-left));
}
.bandage-prompt {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 4vw;
  text-align: center;
  font-weight: 800;
  font-size: clamp(20px, 6vw, 26px);
  line-height: 1.25;
  color: var(--color-button-text);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
/* Three equal rows that share the remaining height so all three always fit (no
   scroll); each image scales to fit its row, reading as a full-width row. Grid
   1fr rows give a definite row height (unlike flex-basis:auto, which would size
   to the images' huge natural height and overflow). */
.bandage-list {
  flex: 1 1 0;
  min-height: 0;
  width: min(92vw, 460px);
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: clamp(10px, 2.4vh, 20px);
}
.bandage {
  position: relative;         /* containing block for the absolutely-sized image */
  min-height: 0;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Absolute inset:0 ties the image to the grid cell's definite height (a <button>
   doesn't establish a definite height for a child's percentage height), so
   object-fit can letterbox it to fit the row instead of overflowing. */
.bandage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 14px;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.22));
  -webkit-user-drag: none;
  user-select: none;
  transition: transform 120ms ease;
}
.bandage:active img { transform: scale(0.97); }
/* Once one is chosen, fade the others back. */
.app.choosing .bandage:not(.chosen) {
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 250ms ease;
}

/* ---- Final card (same cream card shell as the other tools' verdict cards) ---- */
.final-card {
  position: fixed;
  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);
  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 .final-card {
  transform: translate(-50%, -50%);
  opacity: 1;
  visibility: visible;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 400ms ease;
}
.final-thump {
  width: 124px;
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.2));
}
.final-title {
  margin: 2px 0 0;
  text-align: center;
  font-weight: 800;
  font-size: 25px;
  line-height: 1.2;
  color: var(--color-button-text);
}
.final-body {
  margin: 0;
  text-align: center;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-button-text);
}
.verdict-divider {
  width: 56px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-button-text);
  opacity: 0.22;
  margin: 4px 0;
}
.final-return {
  margin: 0;
  text-align: center;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.4;
  color: var(--color-button-text);
  opacity: 0.75;
}

/* ---- Intro overlay (same treatment as the stethoscope / reflex) ---- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #a9dcf2;          /* sky-family hold color while the video loads */
  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. */
.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;
}
.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);
}
.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); }
}
.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;
}

/* ---- Instruction card (same cream card shell as the reflex/verdict cards) ---- */
.instruction-card {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 50;
  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);
  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;
}