/* ============================================================
   מאסטרים בכסף — Trivia design system
   Hebrew RTL, mobile-first, responsive desktop/tablet/mobile.
   ============================================================ */

/* ---------- Bank Hapoalim brand font (Poalim) ----------
   Three cuts registered under a single family, with weight ranges
   so any font-weight in the stylesheet maps to the right file:
     Light   → 100–350   (sub-text, captions, muted labels)
     Regular → 351–550   (questions, body text)
     Bold    → 551–900   (titles, CTAs, emphasized text)            */
@font-face {
  font-family: "Poalim";
  src: url("fonts/Poalim-Light.otf") format("opentype");
  font-weight: 100 350;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poalim";
  src: url("fonts/Poalim-Regular.otf") format("opentype");
  font-weight: 351 550;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poalim";
  src: url("fonts/Poalim-Bold.otf") format("opentype");
  font-weight: 551 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette — sampled directly from Figma frames (pixel-exact) */
  --cream:        #F5F1E4;
  --cream-deep:   #ECE6D2;
  --paper:        #FFFFFF;

  --ink:          #1F2330;
  --ink-soft:     #3D4356;
  --muted:        #7A8095;

  /* Question pill — medium blue with white text per Figma */
  --pill-bg:      #5E93F3;
  --pill-ink:     #FFFFFF;

  /* All answer buttons unified to olive per latest Figma */
  --olive:        #D0E567;
  --olive-deep:   #9FAD2C;

  /* Decorative + feedback */
  --yellow:       #F2F352;
  --yellow-deep:  #DBDC3A;
  --teal:         #42E884;   /* bright green sparkle / leaf */
  --red:          #E04A3C;
  --orange-x:     #F26A4A;   /* wrong-state X color */
  --blue:         #3A5BC9;

  /* Lilac/purple — primary CTA color in the new Figma screens */
  --lilac:        #8793F4;
  --lilac-deep:   #6877DB;
  --lilac-soft:   #C0C7F9;
  --pink-soft:    #F3A9E3;

  /* Radii */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 36px;

  /* Shadows */
  --shadow-soft:  0 6px 18px rgba(31, 35, 48, 0.08);
  --shadow-card:  0 14px 40px rgba(31, 35, 48, 0.10);
  --shadow-press: 0 2px 6px rgba(31, 35, 48, 0.18);

  /* Layout */
  --content-max: 560px;
  --content-pad: 20px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  /* Hide native scrollbars — the design is meant to fit the viewport,
     and any tiny overflow from sub-pixel rounding shouldn't show a bar. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html { -webkit-text-size-adjust: 100%; overflow: hidden; }
html::-webkit-scrollbar,
body::-webkit-scrollbar { width: 0; height: 0; display: none; }
body {
  font-family: "Poalim", sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
  /* Figma background: subtle grid net */
  background: #FFFFFF url("images/background-net.jpg") top center / 600px 600px repeat;
  overflow-x: hidden;
  overflow-y: auto;
}
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
button:disabled { cursor: not-allowed; }
[hidden] { display: none !important; }

/* ---------- App shell ---------- */
.app {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.screen {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  padding: 28px var(--content-pad) 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.screen[hidden] { display: none !important; }

/* ============================================================
   Path interstitial — full-screen character-specific path image
   shown before each question and as a celebration between phases.
   Two stacked <img> layers cross-fade between consecutive stages
   so the route lights up segment-by-segment without a hard cut.
   ============================================================ */
.screen--path {
  justify-content: center;
  padding: 24px var(--content-pad);
}
.path-stage {
  position: relative;
  width: 100%;
  max-width: var(--content-max);
  aspect-ratio: 1080 / 1920;
  max-height: 80dvh;
  margin: auto 0;
}
.path-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  /* Cross-fade between consecutive phase images — duration matches
     PATH_TIMING.crossfade in app.js. */
  transition: opacity .9s ease;
}
.path-image--prev { opacity: 1; z-index: 0; }
.path-image--next { opacity: 0; z-index: 1; }
/* Lottie transition container — overlays the path image area while a
   stage-change animation plays. Hidden between transitions. */
.path-anim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  animation: pathFadeIn .25s ease-out both;
}
.path-anim[hidden] { display: none !important; }
.path-anim svg {
  display: block;
  width: 100%;
  height: 100%;
}
@keyframes pathFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   Decorative elements — flower image (top-right corner)
   ============================================================ */
.opening-bg-deco {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}
.deco-flower {
  display: block;
  height: 38px;
  width: auto;
  pointer-events: none;
}
.deco-flower--top {
  position: relative;
  height: 34px;
  justify-self: end;
}
.deco-flower--corner {
  position: absolute;
  top: 18px;
  right: 20px;
  height: 42px;
}

/* ============================================================
   Opening screen
   ============================================================ */
.opening-card {
  position: relative;
  width: 100%;
  max-width: var(--content-max);
  background: transparent;        /* net background shows through on every screen */
  border-radius: var(--r-xl);
  padding: 36px 26px 32px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: auto 0;
}

/* Opening screen — card fills the entire viewport so each block is positioned
   at Figma-exact %s (frame 412×917). All four blocks (brand / blob / age-pick /
   CTA) are absolutely placed so they hit the right Y regardless of viewport. */
/* Higher-specificity selector so the tablet/desktop `.screen { padding-top: 48px }`
   override in the media queries below can't push the opening screen off-viewport. */
.screen.screen--opening { padding: 0; }
.screen--opening .opening-card {
  width: 100%;
  max-width: var(--content-max);
  height: 100dvh;
  margin: 0 auto;
  /* Mobile: illustration flush with the device edge (top padding 0,
     just the safe-area inset for notched phones). Tighter gaps so the
     brand row + age picker + CTA all sit comfortably higher, well
     above the bottom safe area. */
  padding: env(safe-area-inset-top, 0px) 26px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  overflow: hidden;
}
.screen--opening .brand,
.screen--opening .age-pick,
.screen--opening .cta-lilac {
  position: relative;
  top: auto; left: auto; transform: none;
  width: 100%;
  max-width: 380px;
  margin: 0;
  flex: 0 0 auto;
  z-index: 3;
}
/* Top illustration: explicit height so it always reads big, with
   `mix-blend-mode: multiply` knocking the white surround out against
   the page-wide grid pattern. The image keeps its natural aspect
   ratio thanks to object-fit: contain. */
.screen--opening .opening-illustration {
  flex: 0 0 auto;
  width: 100%;
  height: 36dvh;
  object-fit: contain;
  /* Center the artwork vertically inside its slot so the yellow blob
     and green banknote at the top of the source PNG have breathing room
     above them instead of touching the viewport edge. */
  object-position: center;
  display: block;
  margin: 0 auto;
  user-select: none;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.brand { text-align: center; position: relative; z-index: 1; }
/* Two-logo row: equal-flex halves with the divider on the exact
   centerline, each logo centered inside its half AND constrained to
   the same fixed height so the two marks read as the same visual
   size and sit at the same Y. */
.brand-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  width: 100%;
  max-width: 380px;
}
.brand-logos__half {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
}
.brand-logo {
  display: block;
  /* Same target visual width for both logos so they read at the same
     scale across the brand row, even though their intrinsic aspect
     ratios differ. Vertical alignment between the two is handled by
     `align-items: center` on .brand-logos — and since each PNG/SVG is
     cropped so its visible ink center equals its bbox center, the
     centers land on the same Y. */
  width: clamp(140px, 38vw, 200px);
  height: auto;
  max-width: 100%;
  object-fit: contain;
  flex: 0 0 auto;
}
.brand-logo--merkaz {
  /* Cropped from the design composite — has a white background with
     the page-wide grid baked in. Multiply blends those into the live
     grid pattern so only the logo marks read on top. */
  mix-blend-mode: multiply;
  /* Tiny per-feedback bump: a hair larger than the junior wordmark
     and nudged 1px down so the brand row feels balanced. */
  width: clamp(146px, 39.5vw, 208px);
  transform: translateY(1px);
}
.brand-logos__divider {
  display: block;
  width: 1px;
  height: clamp(36px, 9vw, 52px);
  background: #B7B9C4;
  flex: 0 0 auto;
}
.brand-title {
  font-family: "Poalim", sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 9vw, 60px);
  color: var(--ink);
  margin: 6px 0 4px;
  line-height: 1.02;
  letter-spacing: -.01em;
}
.brand-sub {
  font-size: clamp(14px, 4.4vw, 24px);
  color: var(--ink-soft);
  margin: 0;
  font-weight: 300;
  line-height: 1.3;
  white-space: nowrap;
}

/* ---------- Age picker — white pill buttons with thin border ---------- */
.age-pick { position: relative; z-index: 1; }
.age-pick__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.age-btn {
  background: var(--paper);
  border: 1.5px solid #252525;
  border-radius: 15px;
  padding: 18px 10px;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.age-btn:hover { background: #FAFAFA; }
.age-btn:active { transform: scale(.97); }
.age-btn.is-active {
  border-color: var(--lilac);
  background: var(--lilac-soft);
}
.age-btn__label {
  font-family: "Poalim", sans-serif;
  font-weight: 600;
  font-size: clamp(18px, 4.6vw, 20px);
  color: var(--ink);
  line-height: 1.15;
  text-align: center;
}

/* ---------- Lilac primary CTA — used across all screens ---------- */
.cta-lilac {
  position: relative;
  z-index: 1;
  background: var(--lilac);
  color: white;
  border-radius: 15px;
  padding: 22px 22px;
  min-height: 68px;
  font-weight: 700;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s ease, background .12s ease, opacity .12s ease;
}
.cta-lilac:hover:not(:disabled) { background: var(--lilac-deep); }
.cta-lilac:active:not(:disabled) { transform: translateY(1px); }
.cta-lilac:disabled { opacity: .45; cursor: not-allowed; }

/* Text-only link (e.g. WhatsApp share) */
.text-link {
  background: none;
  border: 0;
  color: var(--ink);
  font-size: 24px;
  font-weight: 300;
  margin: 6px auto 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.text-link:hover { color: var(--lilac); }

/* Close X button (top-left in RTL = visual top-left of dialogs) */
.close-x {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: transparent;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: background .15s ease;
}
.close-x:hover { background: #F5F5F5; }

/* Brand title — kept identical color to the main word */
.brand-title__green {
  color: var(--ink);
}

/* ============================================================
   Question screen
   ============================================================ */
.game-top {
  width: 100%;
  max-width: var(--content-max);
  display: grid;
  grid-template-columns: 40px 1fr 56px;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.icon-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--paper);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
  transition: transform .12s ease;
}
.icon-btn:active { transform: scale(.92); }

.phase-progress__bar {
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: #E5E0CC;
  overflow: hidden;
}
.phase-progress__fill {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  height: 100%;
  width: 0%;
  background: var(--olive);
  border-radius: 999px;
  transition: width .45s ease;
}
.phase-progress__char {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
}

/* ---------- Question card ---------- */
.question-card {
  position: relative;
  width: 100%;
  max-width: var(--content-max);
  background: transparent;
  border-radius: var(--r-xl);
  padding: 22px 22px 24px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.question-pill {
  align-self: flex-start;
  background: var(--pill-bg);
  color: var(--pill-ink);
  font-weight: 700;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 999px;
  letter-spacing: .01em;
}

.question-text {
  margin: 0;
  font-size: clamp(16px, 4vw, 18px);
  line-height: 1.55;
  color: var(--lilac-deep);
  font-weight: 700;
  white-space: pre-line;
}

.question-illustration {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  animation: floatY 4s ease-in-out infinite;
}
.question-illustration img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ---------- Answer buttons — all olive per latest Figma, flat ---------- */
.answers {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.answer {
  position: relative;
  width: 100%;
  text-align: right;
  background: var(--olive);
  color: var(--ink);
  border-radius: 15px;
  padding: 16px 18px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  transition: transform .12s ease, filter .15s ease;
}
.answer:hover:not(:disabled)  { filter: brightness(.97); }
.answer:active:not(:disabled) { transform: translateY(1px); }
.answer.is-locked { pointer-events: none; }
.answer.is-locked:not(.is-correct):not(.is-wrong) { opacity: .45; }
.answer.is-correct {
  outline: 3px solid #1F2330;
  outline-offset: 0;
}
.answer.is-wrong {
  outline: 3px solid var(--red);
  outline-offset: 0;
}

/* Legal disclaimer — only on the first question of each round */
.question-disclaimer {
  margin: 18px 0 0;
  text-align: center;
  font-size: 11px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.3;
}

/* ============================================================
   Feedback overlay — cloud bubble in the style of Figma frame 2
   ============================================================ */
.feedback {
  position: fixed;
  inset: 0;
  background: rgba(31, 35, 48, 0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 30;
  animation: fadeIn .2s ease;
}
/* Wrong state keeps the same 30% dark backdrop as the correct state so
   the answer buttons on the question screen behind are dimmed
   consistently in both popups. */
.feedback[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.feedback__inner {
  position: relative;
  width: 100%;
  max-width: var(--content-max);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  animation: popIn .35s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes popIn {
  from { opacity: 0; transform: translateY(10px) scale(.92); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Wrong-only character art (cloud + chosen character head). The PNG
   is pre-processed to drop the opaque white surround to alpha=0 so
   only the dark-blue cloud + character read on top of the dimmed
   backdrop. The educational body text is then absolutely positioned
   over the cloud's empty lower half so it reads as part of the bubble
   instead of a separate card. */
.feedback__wrong-art {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin: 0;
  z-index: 0;
  user-select: none;
  pointer-events: none;
}
.feedback--wrong .feedback__wrong-art {
  display: block;
  /* Reserve ~90px at the bottom of .feedback__inner for the "המשך"
     button (button ~65px + shadow + flex gap) so the cloud image
     (object-fit: contain within this box) is scaled to end above the
     button rather than covering it. bottom:auto prevents an
     over-constrained box; height is set explicitly so an <img> can't
     fall back to its intrinsic aspect and overflow. */
  bottom: auto;
  height: calc(100% - 90px);
}
.feedback--wrong .feedback__cloud { display: none; }
.feedback--wrong .feedback__bubble {
  position: relative;
  background: transparent;
  /* The character + cloud PNG is roughly 379 × 312, so reserve a box
     matching that aspect ratio (with some slack) so the cloud renders
     at its intended proportions across viewports. */
  aspect-ratio: 379 / 312;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}
.feedback--wrong .feedback__bubble-content {
  position: absolute;
  inset: 50% 16% 8% 16%;   /* top 50% reserved for the character head */
  z-index: 2;
  padding: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.feedback--wrong .feedback__body {
  color: #FFFFFF;
  font-size: clamp(14px, 3.6vw, 16px);
  font-weight: 500;
  line-height: 1.35;
  margin: 0;
}

/* The bubble itself — content determines size, cloud stretches to fit */
.feedback__bubble {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  /* Flat design — drop shadow removed per spec */
}

.feedback__cloud {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  fill: var(--yellow);
  pointer-events: none;
}
.feedback--wrong .feedback__cloud {
  fill: #FFFFFF;
}

.feedback__bubble-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 40px 40px;     /* 40px breathing room around the text on every side */
  gap: 12px;
  min-height: 240px;           /* keeps the cloud big enough even for short messages */
}

.feedback__headline {
  font-family: "Poalim", sans-serif;
  font-weight: 800;
  font-size: 36px;
  color: #FFFFFF;
  margin: 0 0 10px;
  line-height: 1.0;
  letter-spacing: -.01em;
  /* Thick blue outline — flat (no drop shadow per spec) */
  text-shadow:
    -3px -3px 0 #5E93F3,  3px -3px 0 #5E93F3,
    -3px  3px 0 #5E93F3,  3px  3px 0 #5E93F3,
    -4px  0px 0 #5E93F3,  4px  0px 0 #5E93F3,
     0px -4px 0 #5E93F3,  0px  4px 0 #5E93F3,
    -4px -2px 0 #5E93F3,  4px -2px 0 #5E93F3,
    -4px  2px 0 #5E93F3,  4px  2px 0 #5E93F3,
    -2px -4px 0 #5E93F3,  2px -4px 0 #5E93F3,
    -2px  4px 0 #5E93F3,  2px  4px 0 #5E93F3;
}
.feedback--wrong .feedback__headline { display: none; }

.feedback__body {
  margin: 0;
  font-size: 16px;
  color: var(--ink);
  line-height: 19px;
  font-weight: 500;
  white-space: pre-line;
}

/* Green leaf decoration (top-right of cloud) — actual Figma asset */
.feedback__leaf {
  position: absolute;
  top: -18px; right: -18px;
  width: 72px; height: auto;
  z-index: 3;
  transform: rotate(-12deg);
  pointer-events: none;
}
.feedback--wrong .feedback__leaf { display: none; }

/* Purple heart decoration (top-left of cloud) — actual Figma asset */
.feedback__heart {
  position: absolute;
  top: -2px; left: -8px;
  width: 36px; height: auto;
  z-index: 3;
  transform: rotate(-20deg);
  pointer-events: none;
}
.feedback--wrong .feedback__heart { display: none; }

/* Pink balloon-dog illustration below the cloud — success state only */
.feedback__illo {
  display: block;
  width: clamp(180px, 50vw, 240px);
  height: auto;
  margin: -24px auto 0;
  pointer-events: none;
  user-select: none;
  animation: floatY 3.6s ease-in-out infinite;
}
.feedback--wrong .feedback__illo { display: none; }


/* Continue button */
.feedback__next {
  align-self: stretch;
  background: var(--blue);
  color: white;
  border-radius: var(--r-lg);
  padding: 16px 22px;
  font-weight: 800;
  font-size: 17px;
  box-shadow: 0 5px 0 #2A4399;
  /* Sit above .feedback__wrong-art (position:absolute; z-index:0) so the
     character-cloud PNG in the wrong state doesn't paint on top of the
     "המשך" button. */
  position: relative;
  z-index: 1;
  transition: transform .12s ease, box-shadow .12s ease;
  margin-top: 8px;
}
.feedback__next:active { transform: translateY(3px); box-shadow: 0 2px 0 #2A4399; }

/* ============================================================
   Character pick — vertical list of 3 illustrated buttons.
   Tap a character to immediately start the round.
   ============================================================ */
.screen--char-pick {
  padding-top: 24px;
  padding-bottom: 32px;
}
.char-pick__title {
  font-family: "Poalim", sans-serif;
  font-weight: 800;
  font-size: clamp(36px, 9vw, 52px);
  color: #1B2E6B;
  text-align: center;
  margin: 8px 0 18px;
  letter-spacing: -.01em;
}
.char-pick__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 380px;
  gap: 6px;
}
.char-pick__btn {
  position: relative;
  background: none;
  border: 0;
  padding: 0;
  width: 100%;
  display: block;
  transition: transform .12s ease;
}
.char-pick__btn:hover:not(:disabled) { transform: translateY(-2px); }
.char-pick__btn:active:not(:disabled) { transform: scale(.97); }
/* Each character art slot uses a pre-cropped PNG (sliced from the
   shared picker composite during the build step), so the size keeps
   the source's natural aspect ratio. */
.char-pick__art {
  display: block;
  width: 100%;
  aspect-ratio: 824 / 560;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.char-pick__art--isha   { background-image: url("images/characters/pick-isha.png"); }
.char-pick__art--gever  { background-image: url("images/characters/pick-gever.png"); }
.char-pick__art--chatul { background-image: url("images/characters/pick-chatul.png"); }

/* ============================================================
   Story end — full-bleed image sequence (instagram-style).
   Three steps, each fills the viewport; tap forward / back to
   navigate; auto-advances after a few seconds.
   ============================================================ */
.screen.screen--story {
  padding: 0;
  background: #000;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
}
.story-image {
  flex: 1 1 auto;
  display: block;
  width: 100%;
  height: 100dvh;
  object-fit: cover;
  object-position: center;
  user-select: none;
  pointer-events: none;
}
/* Tap zones — invisible buttons covering the left & right halves of
   the screen to navigate prev / next. Left half goes back, right half
   advances (LTR convention even in RTL UI — matches Instagram). */
.story-tap {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: transparent;
  border: 0;
  z-index: 4;
  cursor: pointer;
}
.story-tap--back { left: 0; }
.story-tap--forward { right: 0; }
.close-x--story {
  position: absolute;
  top: 18px;
  left: 18px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink);
  z-index: 6;
}
.close-x--story:hover { background: rgba(255, 255, 255, 0.85); }

/* ============================================================
   Responsive — tablet + desktop
   ============================================================ */
@media (min-width: 720px) {
  :root {
    --content-max: 620px;
    --content-pad: 32px;
  }
  .screen { padding-top: 48px; padding-bottom: 56px; }
  /* Tablet: a little top padding so the illustration's top-edge blob +
     banknote have breathing room from the viewport top instead of
     looking clipped. */
  .screen--opening .opening-card { padding: 3vh 40px 24px; gap: 14px; }
  .screen--opening .opening-illustration { height: 38dvh; }
  .question-card { padding: 28px 28px 32px; }
  .question-illustration { height: 160px; font-size: 120px; }
  .answer { font-size: 17px; padding: 18px 22px; }
  .feedback__bubble       { max-width: 560px; }
  .feedback__bubble-content { padding: 48px 56px 48px; min-height: 280px; }
  .question-illustration { height: 220px; }
}

@media (min-width: 1080px) {
  :root {
    --content-max: 720px;
  }
  .screen { padding-top: 60px; padding-bottom: 70px; }

  .question-card { padding: 32px 36px 36px; }
  .question-illustration {
    height: 200px;
    font-size: 140px;
    margin: 0;
  }
  /* Desktop: matching top padding so the illustration sits comfortably
     below the viewport top, with more side padding for the wider
     content column. */
  .screen--opening .opening-card { padding: 3vh 56px 32px; gap: 16px; }
  .screen--opening .opening-illustration { height: 38dvh; }
  .brand-title { font-size: clamp(56px, 6vw, 64px); }
  .age-pick__buttons { gap: 18px; }

  /* Larger feedback cloud on desktop */
  .feedback__bubble       { max-width: 600px; }
  .feedback__bubble-content { padding: 56px 64px 56px; min-height: 320px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .question-illustration, .interest-burst, .feedback__inner { animation: none; }
}