/* ==========================================================================
   DryScout.org — Pet Prep: Out the Door (V1)
   Builds on ../styles.css (tokens, header, buttons, type). Game-only rules here.
   The scene is laid out in percentages of its own box so one layout serves the
   16:9 desktop panel and the taller phone panel. State lives in data-attributes
   on #scene; movement is driven from pet-prep.js with the Web Animations API.
   ========================================================================== */

.pp-body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 60% 42% at 12% 6%, rgba(23, 163, 218, 0.10), transparent 70%),
    radial-gradient(ellipse 52% 36% at 88% 10%, rgba(15, 27, 61, 0.08), transparent 70%),
    linear-gradient(180deg, #EEF5FC 0%, #FFFFFF 460px);
}
.pp-body .site-header { background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(6px); }

.pp-back { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--navy); min-height: 44px; white-space: nowrap; flex: none; }
.pp-back:hover { color: var(--blue); }

.pp-main { padding: 0 0 56px; }
.pp-screen[hidden] { display: none; }

.pp-body button:focus-visible, .pp-body a:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.pp-body button, .pp-body a { -webkit-tap-highlight-color: transparent; }

/* ---------- SCREEN 1: START ---------- */
.pp-start-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; column-gap: 40px;
  min-height: calc(100vh - 76px - 56px);
  padding-top: 24px; padding-bottom: 24px;
}
.pp-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(40px, 4.6vw, 64px); line-height: 1.08; letter-spacing: -0.02em;
  color: var(--navy); margin-top: 22px;
}
.pp-lede { font-size: 22px; color: var(--text-soft); margin-top: 14px; }
.pp-btn-start { font-size: 20px; padding: 18px 30px; margin-top: 34px; border-radius: 14px; min-height: 56px; }
.pp-start-jax { position: relative; width: clamp(240px, 28vw, 420px); margin-right: clamp(0px, 5vw, 70px); pointer-events: none; }
.pp-start-jax img { width: 100%; height: auto; position: relative; z-index: 1; }
.pp-jax-shadow {
  position: absolute; left: 10%; right: 8%; bottom: 0; height: 8%;
  background: radial-gradient(ellipse at center, rgba(15, 27, 61, 0.20) 0%, rgba(15, 27, 61, 0) 70%);
}

/* ---------- SCREEN 2: GAME PANEL ---------- */
.pp-game .container { padding-top: 22px; }
.pp-panel {
  max-width: 1100px; margin: 0 auto;
  background: var(--surface);
  border: 1px solid rgba(15, 27, 61, 0.08);
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(15, 27, 61, 0.07);
  overflow: hidden;
}
.pp-panel-head {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  padding: 16px 26px;
  background: linear-gradient(100deg, var(--navy) 0%, var(--navy-soft) 100%);
  color: #fff;
}
.pp-game-title { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.01em; line-height: 1.1; }
.pp-objective { font-size: 15px; color: rgba(255, 255, 255, 0.82); margin-top: 3px; }
.pp-stats { display: flex; gap: 8px; flex: none; justify-self: end; }

/* 3-step progress: neutral rings that fill green with a check as each real state is reached */
.pp-steps { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; }
.pp-step { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.62); white-space: nowrap; }
.pp-step + .pp-step::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.22); margin-right: 4px; }
.pp-step-dot {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.06);
  transition: background-color .2s ease, border-color .2s ease;
}
.pp-step-dot svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.6); transition: opacity .2s ease, transform .25s cubic-bezier(.2, .9, .3, 1.3); }
.pp-step[data-done="true"] { color: #fff; }
.pp-step[data-done="true"] .pp-step-dot { background: #22A35B; border-color: #22A35B; }
.pp-step[data-done="true"] .pp-step-dot svg { opacity: 1; transform: scale(1); }
.pp-step[aria-current="step"] .pp-step-dot { border-color: #fff; }
.pp-stat {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 92px; padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}
.pp-stat-label { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.pp-stat-value { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.pp-stat-value.is-low { color: #FFD166; }

/* ---------- THE SCENE ---------- */
.pp-scene {
  position: relative; overflow: hidden;
  width: 100%; aspect-ratio: 16 / 9;
  max-height: calc(100vh - 262px); min-height: 380px;
  margin: 0 auto;
  background: #BFE0FA;
  user-select: none; -webkit-user-select: none;
}
.pp-scene > * { position: absolute; }

/* Backdrop art: the closed-door room, with the open-door room fading in on top */
.pp-bg { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; pointer-events: none; }
.pp-bg-open { opacity: 0; transition: opacity .3s ease; }
.pp-scene[data-door="open"] .pp-bg-open, .pp-scene[data-door="gust"] .pp-bg-open { opacity: 1; }

/* Plain wall cut from the same art, laid over the hanging leash once it is on the dog */
.pp-wall-patch {
  left: 46.65%; top: 33.6%; width: 7.2%; height: 17%; z-index: 2;
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent), linear-gradient(to bottom, #000 0, #000 84%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent), linear-gradient(to bottom, #000 0, #000 84%, transparent);
          mask-composite: intersect;
}
.pp-scene[data-leash="held"] .pp-wall-patch, .pp-scene[data-dog="leashed"] .pp-wall-patch { opacity: 1; }

/* Leash on its hook: an invisible hit area over the painted leash; pulses as a hint when needed */
.pp-hook { left: 46.5%; top: 29%; width: 7.5%; height: 26%; z-index: 4; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 40%; }
.pp-hook::before { content: ""; position: absolute; inset: -10px; }
.pp-hook::after { content: ""; position: absolute; inset: 4% 8%; border-radius: 45%; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(30, 111, 230, 0.5); opacity: 0; }

.pp-scene[data-leash="held"] .pp-hook, .pp-scene[data-dog="leashed"] .pp-hook { pointer-events: none; }
@media (hover: hover) { .pp-hook:hover::after { opacity: 1; } .pp-scene[data-leash="held"] .pp-hook:hover::after { opacity: 0; } }

/* Front door: an invisible hit area over the painted door */
.pp-door { left: 59.5%; bottom: 29%; width: 10.5%; height: 58%; z-index: 4; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 8px; }
.pp-door::after { content: ""; position: absolute; inset: -4px; border-radius: 10px; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(30, 111, 230, 0.5), 0 0 14px rgba(255, 255, 255, 0.6); opacity: 0; pointer-events: none; }
@media (hover: hover) { .pp-door:hover::after { opacity: .7; } }

/* Gust: wind lines blowing in through the doorway */
.pp-gust { left: 49%; bottom: 40%; width: 12%; height: 26%; z-index: 6; pointer-events: none; opacity: 0; }
.pp-gust span { position: absolute; left: 0; height: 7px; border-radius: 7px; background: #fff; box-shadow: 0 0 0 2px rgba(30, 111, 230, 0.45), 0 2px 6px rgba(15, 27, 61, 0.18); }
.pp-gust span:nth-child(1) { top: 10%; width: 70%; }
.pp-gust span:nth-child(2) { top: 45%; width: 100%; }
.pp-gust span:nth-child(3) { top: 80%; width: 55%; }
.pp-scene[data-door="gust"] .pp-gust { opacity: 1; animation: pp-gust 1.1s ease-out infinite; }
@keyframes pp-gust { 0% { transform: translateX(70%); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateX(-40%); opacity: 0; } }

/* Pets */
.pp-pet {
  padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 5;
  transition: left .8s linear, bottom .8s linear, transform .45s ease;
  transform-origin: 50% 100%;
}
.pp-pet img { display: block; width: 100%; height: auto; pointer-events: none; }
.pp-pet::after { /* soft ground shadow */
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -2%; height: 8%;
  background: radial-gradient(ellipse at center, rgba(15, 27, 61, 0.22) 0%, rgba(15, 27, 61, 0) 70%);
  z-index: -1;
}
.pp-dog { left: 19%; bottom: 3%; width: 18.7%; z-index: 6; } /* front lane */
.pp-cat { left: 41%; bottom: 12%; width: 13%; z-index: 5; }   /* back lane */
/* Paused = catchable: the pet comes to the front of the stack and a soft ring pulses under it */
.pp-pet.is-paused { z-index: 8; }
.pp-pet.is-paused::after {
  background: none; left: 6%; right: 6%; bottom: -3%; height: 10%;
  border: 3px solid rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 2px rgba(30, 111, 230, 0.45); border-radius: 50%;
  animation: pp-ring 1s ease-in-out infinite;
}
@keyframes pp-ring { 0%, 100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.08); opacity: 1; } }
.pp-pet.is-dodge img { animation: pp-dodge .3s ease-out; }
@keyframes pp-dodge { 0% { transform: translateX(0); } 40% { transform: translateX(6%) rotate(3deg); } 100% { transform: translateX(0); } }
.pp-pet.is-hop img { animation: pp-hop .42s ease-out; }
@keyframes pp-hop { 0% { transform: translateY(0); } 40% { transform: translateY(-9%); } 100% { transform: translateY(0); } }
.pp-pet.is-walk img { animation: pp-bob .32s ease-in-out infinite; }
@keyframes pp-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4%) rotate(-2deg); } }
.pp-pet.is-run img { animation: pp-bob .16s ease-in-out infinite; }
.pp-pet.is-flip img { transform: scaleX(-1); }
.pp-pet.is-flip.is-walk img { animation: pp-bob-flip .32s ease-in-out infinite; }
.pp-pet.is-flip.is-run img { animation: pp-bob-flip .16s ease-in-out infinite; }
@keyframes pp-bob-flip { 0%, 100% { transform: scaleX(-1) translateY(0); } 50% { transform: scaleX(-1) translateY(-4%); } }

/* Leash on the dog: drawn behind the dog so it emerges from the collar and leads right */
.pp-leash { position: absolute; left: 0; top: 0; width: 170%; height: 100%; z-index: -1; opacity: 0; transition: opacity .2s ease; overflow: visible; pointer-events: none; }
.leash-line { fill: none; stroke: #1E6FE6; stroke-width: 3.2; stroke-linecap: round; }
.leash-handle { fill: none; stroke: #1E6FE6; stroke-width: 3.2; stroke-linecap: round; }
.pp-scene[data-dog="leashed"] .pp-leash { opacity: 1; }
.pp-scene[data-dog="leashed"] .pp-dog::before { /* clip on top of the collar ring */
  content: ""; position: absolute; left: 49.5%; top: 58.5%; width: 4.2%; aspect-ratio: 1; border-radius: 50%;
  background: #FFE08A; border: 2px solid #1E6FE6; z-index: 2; box-sizing: border-box;
}

/* Carrier: square art canvas; the door opening is at 55.8%-84.8% x, 33.3%-75.2% y of the canvas */
/* The carrier sits on the left of the floor below the window, a little back into the room (so pets pass in front of it) */
.pp-carrier { left: 4%; bottom: 12%; width: 16%; aspect-ratio: 1; pointer-events: none; } /* no z-index: children stack in the scene */
.pp-carrier > * { position: absolute; z-index: 4; }                 /* crate art sits behind wandering pets */
.pp-latch { pointer-events: auto; z-index: 7; }
.carrier-hint { left: 3%; top: 8%; width: 93%; height: 82%; border-radius: 16%; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(30, 111, 230, 0.5), 0 0 14px rgba(255, 255, 255, 0.6); opacity: 0; z-index: 7; pointer-events: none; }                     /* ...but its door is tappable through them; a paused pet (8) still wins */
.carrier-open, .carrier-closed { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity .18s ease; }
.carrier-interior { left: 56.5%; top: 34%; width: 27.5%; height: 40.5%; background: #2A4F8F; border-radius: 10% / 8%; opacity: 0; }
.carrier-window { left: 55.8%; top: 33.3%; width: 29%; height: 41.9%; border-radius: 12% / 9%; overflow: hidden; }
.carrier-cat { position: absolute; left: -6%; bottom: -3%; width: 112%; height: auto; opacity: 0; transition: opacity .15s ease; }
.pp-scene[data-cat="inside"] .carrier-cat { opacity: 1; }
.carrier-closed { opacity: 0; }
.pp-scene[data-carrier="latched"] .carrier-closed { opacity: 1; }
.pp-scene[data-carrier="latched"] .carrier-open { opacity: 0; }
.pp-scene[data-carrier="latched"] .carrier-interior { opacity: 1; }
.pp-latch { left: 53%; top: 31%; width: 39%; height: 47%; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 12%; }
.pp-latch::before { content: ""; position: absolute; inset: -10px; } /* forgiving tap area */
.pp-latch::after { /* pulse around the latch plate while the cat can still get out */
  content: ""; position: absolute; right: -6%; top: 30%; width: 46%; aspect-ratio: 1; border-radius: 30%;
  border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(30, 111, 230, 0.5); opacity: 0;
}
.pp-latch.is-window::after { opacity: 1; animation: pp-ring .55s ease-in-out infinite; }
.pp-carrier.is-wobble > img, .pp-carrier.is-wobble > .carrier-window, .pp-carrier.is-wobble > .carrier-interior { animation: pp-wobble .5s ease-in-out; transform-origin: 50% 90%; }
@keyframes pp-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 60% { transform: rotate(2.5deg); } }
@media (hover: hover) { .pp-latch:hover { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.55); } }

/* "What next" hints, derived from real state (see updateSteps in pet-prep.js):
   leash on the hook blinks every 3s -> crate blinks every 3s -> door blinks every second */
@keyframes pp-blink { 0% { opacity: 0; } 8% { opacity: 1; } 22% { opacity: 0; } 100% { opacity: 0; } }
@keyframes pp-blink-fast { 0% { opacity: 0; } 35% { opacity: 1; } 70% { opacity: 0; } 100% { opacity: 0; } }
.pp-scene[data-hint="leash"] .pp-hook::after { animation: pp-blink 3s ease-in-out infinite; }
.pp-scene[data-hint="crate"] .carrier-hint { animation: pp-blink 3s ease-in-out infinite; }
.pp-scene[data-hint="car"] .pp-door::after { animation: pp-blink-fast 1s ease-in-out infinite; }
.pp-scene .pp-hook.is-hint::after { opacity: 1; animation: pp-ring .55s ease-in-out 3; }

/* In-scene messages */
.pp-note {
  left: 50%; top: 6%; transform: translateX(-50%); z-index: 20;
  padding: 10px 18px; border-radius: 999px;
  background: #fff; color: var(--navy); font-size: 15px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(15, 27, 61, 0.16);
  animation: pp-note-in .18s ease-out;
}
.pp-note[hidden] { display: none; }
@keyframes pp-note-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.pp-banner {
  left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 30;
  padding: 16px 30px; border-radius: 999px;
  background: #fff; color: var(--navy);
  font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2.6vw, 32px); letter-spacing: 0.02em; white-space: nowrap;
  box-shadow: 0 14px 40px rgba(15, 27, 61, 0.20);
  animation: pp-banner-in .28s cubic-bezier(.2, .9, .3, 1.3);
}
.pp-banner[hidden] { display: none; }
.pp-banner .tick { color: #1B7F4B; }
@keyframes pp-banner-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.7); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* ---------- SCREEN 3: RESULTS ---------- */
.pp-results-inner {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  min-height: calc(100vh - 76px - 56px); justify-content: center;
  padding-top: 24px; padding-bottom: 24px;
}
.pp-results-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(38px, 4.2vw, 56px); line-height: 1.1; letter-spacing: -0.02em; color: var(--navy); }
.pp-results-sub { font-size: 20px; color: var(--text-soft); margin-top: 8px; }
.pp-results-stats { display: flex; gap: 14px; margin-top: 22px; }
.pp-results-stats > div {
  min-width: 132px; padding: 12px 22px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
}
.pp-results-stats dt { font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-soft); }
.pp-results-stats dd { font-family: var(--font-display); font-weight: 800; font-size: 34px; color: var(--blue); line-height: 1.1; margin-top: 2px; font-variant-numeric: tabular-nums; }
.pp-results-jax { width: clamp(220px, 24vw, 320px); margin-top: 16px; }
.pp-results-jax img { width: 100%; height: auto; }
.pp-btn-again { font-size: 20px; padding: 18px 34px; margin-top: 18px; border-radius: 14px; min-height: 56px; }

/* ---------- Motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  .pp-pet.is-walk img, .pp-pet.is-run img, .pp-pet.is-flip.is-walk img, .pp-pet.is-flip.is-run img, .pp-pet.is-hop img, .pp-pet.is-dodge img,
  .pp-pet.is-paused::after, .pp-latch.is-window::after, .pp-hook.is-hint::after, .pp-scene[data-door="gust"] .pp-gust, .pp-carrier.is-wobble > * { animation: none; }
  .pp-note, .pp-banner { animation: none; }
  .pp-scene[data-hint="leash"] .pp-hook::after, .pp-scene[data-hint="crate"] .carrier-hint, .pp-scene[data-hint="car"] .pp-door::after { animation: none; opacity: .6; }
  .pp-bg-open, .carrier-open, .carrier-closed, .pp-step-dot, .pp-step-dot svg { transition-duration: .1s; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 980px) {
  .pp-start-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; min-height: 0; padding-top: 28px; }
  .pp-start-jax { width: min(48vw, 300px); margin: 20px 0 0; }
  .eyebrow-bar { justify-content: center; }
}

@media (max-width: 640px) {
  .pp-main { padding-bottom: 32px; }
  .pp-back { font-size: 14px; }
  .pp-back-long { display: none; }
  .pp-title { font-size: 40px; }
  .pp-lede { font-size: 18px; }
  .pp-btn-start { width: 100%; max-width: 360px; }
  .pp-start-jax { width: min(58vw, 250px); }

  .pp-game .container { padding: 14px 12px 0; }
  .pp-panel { border-radius: 16px; }
  .pp-panel-head { grid-template-columns: 1fr; gap: 12px; padding: 14px 16px; }
  .pp-steps { justify-content: space-between; gap: 6px; }
  .pp-step { flex-direction: column; gap: 5px; font-size: 11px; flex: 1 1 0; }
  .pp-step + .pp-step::before { display: none; }
  .pp-step-dot { width: 24px; height: 24px; }
  .pp-stats { justify-self: stretch; }
  .pp-game-title { font-size: 20px; }
  .pp-objective { font-size: 14px; }
  .pp-stats { justify-content: space-between; }
  .pp-stat { flex: 1 1 0; min-width: 0; padding: 6px 10px; }
  .pp-stat-value { font-size: 21px; }

  /* 4:3 box; the art covers it anchored right, so the window is cropped and the door + car stay in view.
     Horizontal positions map as (x - 25) / 0.75 from the desktop values. */
  .pp-scene { aspect-ratio: 4 / 3; max-height: none; min-height: 0; }
  .pp-door { left: 46%; width: 14%; }
  .pp-gust { left: 30%; width: 17%; }
  .pp-wall-patch { left: 28.9%; width: 9.6%; }
  .pp-hook { left: 28.7%; width: 10%; }
  .pp-dog { width: 22%; left: 8%; bottom: 3%; }
  .pp-cat { width: 16%; left: 26%; bottom: 12%; }
  .pp-carrier { left: 0; width: 20%; bottom: 12%; }
  .pp-note { font-size: 13px; padding: 9px 14px; top: 4%; max-width: 92%; white-space: normal; text-align: center; }
  .pp-banner { font-size: 22px; padding: 14px 24px; }

  .pp-results-inner { min-height: 0; padding-top: 32px; }
  .pp-results-sub { font-size: 17px; }
  .pp-results-stats { width: 100%; max-width: 360px; }
  .pp-results-stats > div { flex: 1 1 0; min-width: 0; padding: 10px 12px; }
  .pp-results-stats dd { font-size: 28px; }
  .pp-results-jax { width: min(60vw, 240px); }
  .pp-btn-again { width: 100%; max-width: 360px; }
}