/* Petal's Way Home (D-027) - engine styles.
 * CSS draws UI chrome only: glows, rings, chips, focus states, sparkle dots.
 * Every final visual is produced art in /games/petal-quest/.
 * Layout round 3 (Deniz, 2026-07-17): the stage is SQUARE (1400x1400 art),
 * Twillan and the pickable items live in a side panel (desktop) or a tray
 * below the stage (mobile), never on the artwork. Spot coordinates are
 * percentages of the square stage. Halo and glow tokens come from
 * tokens.css (D-027 block).
 * Reduced motion: the site-wide rule in tokens.css freezes every animation
 * and transition; the engine also swaps in calm static variants. */

.kf-petal-quest {
  width: 100%;
  box-sizing: border-box;
}

.kf-petal-quest *,
.kf-petal-quest *::before,
.kf-petal-quest *::after {
  box-sizing: border-box;
}

/* The hidden attribute must always win, even over display: flex rules. */
.kf-petal-quest [hidden],
.kfpq-finale[hidden] {
  display: none !important;
}

.kfpq-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;
}

/* ---------------- top bar: progress dots + controls ---------------- */

.kfpq-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--space-2);
}

.kfpq-spacer {
  flex: 1;
}

.kfpq-dotsrow {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.kfpq-dot {
  position: relative;
  display: inline-flex;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  overflow: visible;
}

.kfpq-dot img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 8px;
  opacity: 0.65;
}

.kfpq-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 11px;
  border: 3px solid transparent;
  pointer-events: none;
}

.kfpq-dot.is-current img {
  opacity: 1;
}

.kfpq-dot.is-current::after {
  border-color: var(--kf-gold);
}

.kfpq-dot.is-done img {
  opacity: 1;
}

.kfpq-dot.is-done::after {
  border-color: var(--kf-teal);
}

.kfpq-dot-check {
  position: absolute;
  right: -7px;
  top: -7px;
  display: none;
  line-height: 0;
}

.kfpq-dot.is-done .kfpq-dot-check {
  display: block;
}

.kfpq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.75rem; /* 44px control floor */
  min-width: 2.75rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--kf-purple-deep);
  background: var(--kf-lilac-soft);
  border: 2px solid var(--kf-lilac);
  border-radius: var(--radius-pill);
  padding: 0.4rem 1rem;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}

.kfpq-btn:hover:not(:disabled) {
  background: #fff;
  transform: translateY(-1px);
}

.kfpq-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.kfpq-mute {
  padding: 0.4rem 0.65rem;
}

.kfpq-muted-note {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: 0.92rem;
  text-align: center;
}

/* ---------------- layout: stage + side panel / tray ---------------- */

.kfpq-layout {
  position: relative;
}

/* The panel holds Twillan's portrait, the scene label + line mirror, and
   the dock tray / checklist. Below 1024px it is the tray under the stage
   (portrait and text hidden); from 1024px it is the right-hand column. */
.kfpq-panel {
  margin-top: 0.65rem;
}

.kfpq-portrait,
.kfpq-rail {
  display: none;
}

.kfpq-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--kf-lilac-soft);
  box-shadow: var(--shadow-soft);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.kfpq-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.kfpq-scene-open {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.kfpq-scene-open.kfpq-open-shown {
  opacity: 1;
}

.kfpq-dimmed .kfpq-scene {
  filter: brightness(0.72) saturate(0.85);
}

/* ---------------- sprites ---------------- */

/* Petal is the only character on the stage; she is the traveler.
   Twillan lives in the side-panel portrait.
   The warm glow is CONSTANT (never pulsing, no flashing) so she always
   separates from the painted ground, idle and while walking alike
   (Deniz 2026-07-17: she blended into the art during the advance). */
.kfpq-petal {
  position: absolute;
  left: calc(var(--x, 50) * 1%);
  top: calc(var(--y, 50) * 1%);
  transform: translate(-50%, -50%) scale(var(--s, 1));
  pointer-events: none;
  height: auto;
  filter: drop-shadow(0 4px 8px rgba(15, 10, 36, 0.28))
    drop-shadow(0 0 10px rgba(255, 243, 205, 0.9))
    drop-shadow(0 0 22px rgba(255, 220, 150, 0.55));
  z-index: 3;
  width: 20%; /* Deniz 2026-07-17: bigger on the image (was 16%) */
  transition: opacity 0.3s ease;
}

.kfpq-petal-go {
  transition: left 1.2s ease-in-out, top 1.2s ease-in-out, transform 1.2s ease-in-out, opacity 0.3s ease;
}

/* ---------------- speech chip ---------------- */

/* The speech bar lives ABOVE the stage, never over the illustration
   (Deniz layout feedback, 2026-07-16). Reserved height so text changes
   do not shift the scene below. */
.kfpq-chip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--kf-cream);
  border-radius: var(--radius-md);
  padding: 0.6rem 1rem;
  box-shadow: var(--shadow-soft);
  margin: 0 0 10px;
  min-height: 72px;
}

.kfpq-chip-avatar {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 12%;
  background: var(--kf-teal-soft);
  border: 2px solid var(--kf-teal);
}

.kfpq-chip-text {
  flex: 1;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(0.82rem, 2.4vw, 1rem);
  line-height: 1.35;
  color: var(--kf-purple-deep);
}

.kfpq-say {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--kf-teal-soft);
  border: 2px solid var(--kf-teal);
  cursor: pointer;
}

.kfpq-say:hover {
  background: #fff;
}

/* ---------------- play targets ---------------- */

/* Spots are real buttons for keyboard and screen readers; pointer taps are
   routed by the stage listener to the nearest target, so these stay
   hit-transparent. The VISIBLE circle size comes per scene from the engine
   (--ring, % of the square stage width), sized so that no two rings ever
   intersect in that scene's art; the effective tap area stays generous via
   the router radius. */
.kfpq-spot {
  position: absolute;
  left: calc(var(--x, 50) * 1%);
  top: calc(var(--y, 50) * 1%);
  transform: translate(-50%, -50%);
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 50%;
  pointer-events: none;
  cursor: pointer;
  width: calc(var(--ring, 16.5) * 1%);
  aspect-ratio: 1;
  z-index: 4;
}

/* Dock items are plain tray buttons (side panel on desktop, row below the
   stage on mobile). They never sit on the artwork. 75px floor on small
   screens, 88px in the desktop panel. */
.kfpq-item {
  position: relative;
  display: grid;
  place-items: center;
  width: 75px;
  height: 75px;
  padding: 0;
  background: var(--kf-cream);
  border: 2px solid var(--kf-lilac);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.kfpq-item img {
  /* Fixed pixel box so no sprite can ever poke out of its chip regardless
     of intrinsic aspect ratio (Deniz round 3: the tall star charm did). */
  width: 55px;
  height: 55px;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(15, 10, 36, 0.3));
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.kfpq-item .kfpq-dot-check {
  right: -6px;
  top: -6px;
}

.kfpq-item.is-held {
  transform: translateY(-4px);
  box-shadow: var(--halo-select);
}

/* Re-tapping the held item: a tiny re-lift, "still in your hand" (Pip #9). */
.kfpq-item.is-held.kfpq-relift {
  animation: kfpqRelift 0.32s ease;
}

@keyframes kfpqRelift {
  0%, 100% { transform: translateY(-4px); }
  50% { transform: translateY(-12px); }
}

/* Placing: the seed shrinks away in the tray while the sparkle burst lands
   on the spot in the scene. */
.kfpq-item.is-placing img {
  transform: scale(0.35);
  opacity: 0.25;
}

/* Placed: the button stays put (no mid-scene layout shift) as a calm
   "done" chip with a check, same language as the scene 3 checklist. */
.kfpq-item.is-placed {
  background: var(--kf-teal-soft);
  border-color: var(--kf-teal);
  cursor: default;
}

.kfpq-item.is-placed img {
  opacity: 0.85;
}

.kfpq-item.is-placed .kfpq-dot-check {
  display: block;
}

/* When something is picked up, every open spot shows a cream outline. */
.kfpq-show-spots .kfpq-spot:not(.kfpq-planted) {
  border: 3px dashed var(--kf-cream);
  box-shadow: 0 0 10px 2px rgba(253, 250, 244, 0.45);
}

/* A solved spot keeps a soft gold glow. */
.kfpq-spot.kfpq-planted {
  box-shadow: var(--glow-hint-soft);
}

/* ---------------- help ladder visuals ---------------- */

/* Step 1, wrong tap: a small side-to-side wiggle (about 4px), 360ms. */
.kfpq-wiggle {
  animation: kfpqWiggle 0.36s ease-in-out;
}

@keyframes kfpqWiggle {
  0%, 100% { margin-left: 0; }
  25% { margin-left: -4px; }
  75% { margin-left: 4px; }
}

/* Step 1, reduced motion: a still lilac dashed ring instead of movement. */
.kfpq-ring-miss {
  border: 3px dashed var(--kf-lilac);
}

/* Step 2: a continuous gentle breathing glow (Pip #4). It oscillates
   between about 40% and 100% of --glow-hint-soft and is never fully off,
   so a child who looks over at any moment sees the help. */
.kfpq-pulse {
  animation: kfpqPulse 2.4s ease-in-out infinite;
}

@keyframes kfpqPulse {
  0%, 100% { box-shadow: 0 0 12px 3px rgba(212, 168, 67, 0.16); }
  50% { box-shadow: 0 0 18px 6px rgba(212, 168, 67, 0.4); }
}

/* Step 2, reduced motion: the same faint glow, held still. */
.kfpq-ring-soft {
  box-shadow: var(--glow-hint-soft);
}

/* Step 3: steady, unmissable gold glow until solved. */
.kfpq-glow-full {
  box-shadow: var(--glow-hint-full);
}

/* One-shot glow swell when a checklist chip asks "where is it?" (Pip #5). */
.kfpq-pulse-once {
  animation: kfpqPulseOnce 1.1s ease-in-out;
}

@keyframes kfpqPulseOnce {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 168, 67, 0); }
  50% { box-shadow: var(--glow-hint-full); }
}

/* ---------------- sparkle burst (correct answer) ---------------- */

.kfpq-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}

.kfpq-burst {
  position: absolute;
  left: calc(var(--x, 50) * 1%);
  top: calc(var(--y, 50) * 1%);
  width: 0;
  height: 0;
}

.kfpq-burst span {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--kf-gold);
  box-shadow: 0 0 8px 2px rgba(212, 168, 67, 0.7);
  transform: rotate(var(--a, 0deg)) translateY(0);
  animation: kfpqBurst 0.85s ease-out forwards;
}

@keyframes kfpqBurst {
  to {
    transform: rotate(var(--a, 0deg)) translateY(-48px);
    opacity: 0;
  }
}

/* ---------------- advance pill and start button ---------------- */

.kfpq-pill,
.kfpq-start-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 72px;
  padding: 0.5rem 2rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.1rem, 3vw, 1.3rem);
  color: var(--kf-navy-dark);
  background: var(--kf-gold);
  border: 3px solid #fff;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lift);
  cursor: pointer;
}

.kfpq-pill {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  max-width: 92%;
  z-index: 7;
}

/* Pre-reader affordance inside the pill (Pip #2): Petal's face + arrow. */
.kfpq-pill img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex: none;
}

.kfpq-pill-arrow {
  flex: none;
}

/* One soft scale-in bounce when the pill appears; display toggling from
   [hidden] restarts it. Off under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .kfpq-pill:not([hidden]) {
    animation: kfpqPillIn 0.5s ease;
  }
}

@keyframes kfpqPillIn {
  0% { transform: translateX(-50%) scale(0.7); opacity: 0; }
  65% { transform: translateX(-50%) scale(1.05); opacity: 1; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

.kfpq-startover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 8;
}

.kfpq-start-btn {
  padding-left: 0.8rem;
  box-shadow: 0 0 28px 8px rgba(212, 168, 67, 0.6), var(--shadow-lift);
  animation: kfpqBreathe 2.6s ease-in-out infinite;
}

.kfpq-start-btn img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

/* A slow, soft breathing glow. Never a flash. */
@keyframes kfpqBreathe {
  0%, 100% { box-shadow: 0 0 22px 5px rgba(212, 168, 67, 0.5), var(--shadow-lift); }
  50% { box-shadow: 0 0 32px 11px rgba(212, 168, 67, 0.75), var(--shadow-lift); }
}

/* ---------------- dock tray + checklist (shared panel slot) ---------------- */

/* One tray slot: the dock (scenes 1-2) or the checklist (scene 3) sits
   below the stage as a wrapping row on mobile, and as a vertical tray in
   the side panel on desktop. Never on the artwork. */
.kfpq-dock,
.kfpq-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}

/* Chips are real buttons (Pip #5): tap one to ask where that thing hides.
   Same 75px floor as the dock items, so the tray reads as one system. */
.kfpq-check-chip {
  position: relative;
  display: grid;
  place-items: center;
  width: 75px;
  height: 75px;
  padding: 0;
  background: var(--kf-cream);
  border: 2px solid var(--kf-lilac);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
}

.kfpq-check-chip.kfpq-chip-pop {
  animation: kfpqChipPop 0.35s ease;
}

@keyframes kfpqChipPop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

.kfpq-check-chip img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.kfpq-check-chip .kfpq-dot-check {
  right: -6px;
  top: -6px;
}

.kfpq-check-chip.is-found {
  background: var(--kf-teal-soft);
  border-color: var(--kf-teal);
}

.kfpq-check-chip.is-found .kfpq-dot-check {
  display: block;
}

/* ---------------- finale popup ---------------- */

.kfpq-finale {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 10, 36, 0.55);
  padding: 1rem;
  z-index: 60;
}

.kfpq-finale-card {
  background: var(--kf-cream);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  width: 100%;
  max-width: 30rem;
  max-height: 92dvh;
  overflow: auto;
  text-align: center;
  box-shadow: var(--shadow-lift);
}

.kfpq-finale-card h2 {
  margin: 0 0 var(--space-2);
  font-size: clamp(1.5rem, 4vw, 2rem);
}

.kfpq-finale-card img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.kfpq-finale-line {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-weight: 700;
}

.kfpq-finale-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-3);
}

.kfpq-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 0.5rem 1.6rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
}

.kfpq-again {
  color: var(--kf-navy-dark);
  background: var(--kf-gold);
  border: 3px solid #fff;
  box-shadow: var(--shadow-soft);
}

.kfpq-back {
  color: var(--kf-purple-deep);
  background: var(--kf-lilac-soft);
  border: 3px solid var(--kf-lilac);
}

.kfpq-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.kfpq-confetti span {
  position: absolute;
  top: -18px;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  animation: kfpqFall 1.8s ease-in forwards;
}

@keyframes kfpqFall {
  to {
    transform: translateY(105vh) rotate(320deg);
    opacity: 0.4;
  }
}

/* ---------------- desktop side panel (1024px and up) ---------------- */

@media (min-width: 1024px) {
  .kfpq-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: var(--space-3);
    align-items: start;
  }

  /* Square stage, capped so it never towers over the fold. */
  .kfpq-stage {
    grid-column: 1;
    width: min(100%, 70vh, 40rem);
    min-width: 20rem;
    margin-inline: auto;
  }

  .kfpq-panel {
    grid-column: 2;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: var(--color-surface);
    border: 2px solid var(--kf-lilac-soft);
    border-radius: var(--radius-md);
    padding: var(--space-3);
  }

  /* Twillan's framed portrait at the top of the panel. The engine swaps it
     to twillan-celebrate.png on scene-complete and finale moments. */
  .kfpq-portrait {
    display: block;
    width: 100%;
    height: 170px;
    object-fit: contain;
    background: var(--kf-teal-soft);
    border: 2px solid var(--kf-teal);
    border-radius: var(--radius-md);
    padding: 6px;
  }

  .kfpq-rail {
    display: block;
  }

  .kfpq-rail-scene {
    margin: 0 0 0.35rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-kicker);
  }

  .kfpq-rail-line {
    margin: 0;
    font-weight: 700;
    color: var(--kf-purple-deep);
  }

  /* Two-by-two tray of big buttons (Deniz 2026-07-17: "2'li yan yana",
     better use of the panel space than a single column). */
  .kfpq-dock,
  .kfpq-checklist {
    display: grid;
    grid-template-columns: repeat(2, 88px);
    justify-content: center;
    gap: 0.7rem;
  }

  .kfpq-item,
  .kfpq-check-chip {
    width: 88px;
    height: 88px;
  }

  .kfpq-check-chip img {
    width: 60px;
    height: 60px;
  }

  .kfpq-item img {
    width: 64px;
    height: 64px;
  }
}