/* Harbor House — Explorer Passport (Stage 7) */

/* ── Passport cover ── */
.pp-cover{
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 60%,var(--navy-3) 100%);
  border:3px solid var(--sun-dark); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg), inset 0 0 0 6px var(--navy), inset 0 0 0 8px rgba(255,201,60,.45);
  color:#fff; text-align:center; padding:var(--sp-8) var(--sp-6) var(--sp-6); margin-top:var(--sp-6);
}
.pp-cover-emblem{margin-bottom:var(--sp-3)}
.pp-cover-brand{font-family:var(--font-display);letter-spacing:.14em;text-transform:uppercase;font-size:var(--fs-sm);color:var(--sun);margin:0 0 var(--sp-1)}
.pp-cover h1{color:#fff;font-size:clamp(2.2rem,6vw,var(--fs-5xl));margin:0 0 var(--sp-2)}
.pp-cover-tag{color:#dbe6f5;max-width:34rem;margin:0 auto var(--sp-4);font-size:var(--fs-lg)}
.pp-cover-explorer{font-size:var(--fs-xl);color:#fff;margin:0 0 var(--sp-4)}
.pp-cover-explorer strong{color:var(--sun);font-family:var(--font-display)}
.pp-name-form{max-width:30rem;margin:0 auto;text-align:left}
.pp-name-form label{font-family:var(--font-display);font-weight:700;color:var(--sun);display:block;margin-bottom:var(--sp-2)}
.pp-name-row{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.pp-name-row input{
  flex:1 1 220px;min-height:48px;border-radius:var(--radius-full);border:3px solid rgba(255,255,255,.35);
  background:#fff;color:var(--ink);font-family:var(--font-body);font-size:var(--fs-base);font-weight:700;padding:var(--sp-2) var(--sp-4);
}
.pp-name-row input:focus{outline:3px solid var(--sun);border-color:var(--sun)}
.pp-name-note{color:#a9bedd;font-size:var(--fs-sm);margin:var(--sp-2) 0 0}
.pp-saved-note{margin-top:var(--sp-4)}

/* ── Progress band ── */
.pp-progress-band{display:flex;gap:var(--sp-6);align-items:center;margin-top:var(--sp-6);flex-wrap:wrap}
.pp-ring{flex:0 0 auto}
#pp-ring-fill{transition:stroke-dashoffset var(--dur-slow) var(--ease)}
.pp-progress-copy{flex:1 1 260px}
.pp-progress-copy h2{margin-top:0}
.pp-progress-actions{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-3)}

/* ── Sections ── */
.pp-section{margin-top:var(--sp-10)}

/* ── Badge book ── */
.pp-badge-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--sp-5);margin-top:var(--sp-5)}
.pp-badge-card{
  background:#fff;border-radius:var(--radius-lg);padding:var(--sp-5);text-align:center;
  border:3px solid #dbe3ee; box-shadow:var(--shadow-sm); display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);
}
.pp-badge-card.is-earned{background:var(--wc-bg);border-color:var(--wc);box-shadow:var(--shadow)}
.pp-badge-card h3{margin:var(--sp-2) 0 0;font-size:var(--fs-xl)}
.pp-medallion{width:132px;height:132px}
.pp-medallion-svg{width:100%;height:100%;display:block}
.pp-badge-card.is-earned .pp-medallion{transform:rotate(-5deg)} /* the "stamp" tilt */
.pp-burst{transform-box:fill-box;transform-origin:center;animation:pp-spin 46s linear infinite}
@keyframes pp-spin{to{transform:rotate(360deg)}}
.pp-badge-name{font-family:var(--font-display);font-weight:800;font-size:var(--fs-lg);color:var(--ink-soft);margin:0}
.pp-badge-card.is-earned .pp-badge-name{color:var(--wc)}
.pp-badge-status{color:var(--ink-soft);margin:0 0 var(--sp-3);min-height:2.6em}
.pp-badge-status.is-earned{color:var(--ink);font-weight:800}
.pp-badge-card .btn{margin-top:auto}

/* ── Memories ── */
.pp-memories-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-5);margin-top:var(--sp-5)}
.pp-memory h3{margin-top:0}
.pp-memory-art{display:flex;justify-content:center;background:var(--cream);border-radius:var(--radius);padding:var(--sp-3);margin-bottom:var(--sp-3)}
.pp-creature-svg{width:190px;height:auto;max-width:100%}
.pp-skyline-art{align-items:flex-end}
.pp-skyline-svg{width:100%;height:auto;max-height:170px}
.pp-building-svg{width:130px;height:auto}
.pp-memory-title{font-size:var(--fs-lg);margin:0 0 var(--sp-1)}
.pp-memory-sub{color:var(--ink-soft);margin:0 0 var(--sp-3)}
.pp-memory-empty{color:var(--ink-soft);margin:0 0 var(--sp-3)}
.pp-day-list{list-style:none;margin:0 0 var(--sp-3);padding:0;display:grid;gap:var(--sp-2)}
.pp-day-list li{background:var(--cream);border-radius:var(--radius);padding:var(--sp-2) var(--sp-3);display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.pp-day-num{background:var(--navy);color:#fff;font-family:var(--font-display);font-weight:800;border-radius:50%;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.pp-day-min{margin-left:auto;color:var(--ink-soft);font-weight:700;font-size:var(--fs-sm)}

/* ── Finale: locked ── */
.pp-finale-locked{
  border:3px dashed var(--sun-dark);border-radius:var(--radius-xl);background:#fff7d6;
  text-align:center;padding:var(--sp-8) var(--sp-6);margin-top:var(--sp-5);
}
.pp-finale-locked h3{margin-top:0}
.pp-fog-line{font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);color:var(--navy);max-width:38rem;margin:0 auto var(--sp-4)}
.pp-scene-fogwrap{margin-bottom:var(--sp-5);text-align:left}
.pp-missing-chips{display:flex;gap:var(--sp-2);flex-wrap:wrap;justify-content:center;margin-top:var(--sp-3)}
.pp-missing-chip{
  display:inline-flex;align-items:center;min-height:44px;padding:var(--sp-2) var(--sp-4);border-radius:var(--radius-full);
  background:#fff;border:2.5px solid var(--wc);color:var(--navy);font-weight:800;text-decoration:none;
}
.pp-missing-chip:hover{background:var(--wc);color:#fff}

/* ── Finale: celebration ── */
.pp-finale-party{position:relative;margin-top:var(--sp-5)}
.pp-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:6;border-radius:var(--radius-xl)}
.pp-confetti-piece{position:absolute;top:-16px;display:block;opacity:0;animation-name:pp-fall;animation-timing-function:linear;animation-fill-mode:both}
@keyframes pp-fall{
  0%{transform:translateY(0) rotate(0deg);opacity:0}
  8%{opacity:1}
  88%{opacity:1}
  100%{transform:translateY(600px) rotate(320deg);opacity:0}
}
.pp-party-banner{
  position:relative;background:linear-gradient(165deg,var(--navy) 0%,var(--navy-3) 100%);color:#fff;
  border-radius:var(--radius-xl);padding:0 var(--sp-6) var(--sp-6);text-align:center;overflow:hidden;box-shadow:var(--shadow-lg);
  margin-top:var(--sp-6);
}
.pp-bunting{width:100%;height:52px;display:block}
.pp-party-title{color:var(--sun);font-size:clamp(1.5rem,4.5vw,var(--fs-3xl));margin:var(--sp-2) 0 var(--sp-4)}
.pp-party-pip{display:flex;gap:var(--sp-4);align-items:center;justify-content:center;flex-wrap:wrap;max-width:46rem;margin:0 auto}
.pp-party-speech{
  background:#fff;color:var(--ink);border-radius:var(--radius-lg);padding:var(--sp-4) var(--sp-5);
  font-size:var(--fs-lg);text-align:left;flex:1 1 280px;margin:0;box-shadow:var(--shadow);position:relative;
}
.pp-party-speech span{font-weight:800;color:var(--teal-dark);white-space:nowrap}
.pp-party-banner .btn-ghost{border-color:#fff;color:#fff}
.pp-party-banner .btn-ghost:hover{background:#fff;color:var(--navy)}
.pp-party-medals{display:flex;gap:var(--sp-2);justify-content:center;flex-wrap:wrap;margin:var(--sp-5) 0 var(--sp-4)}
.pp-party-medal{width:64px;height:64px;display:block}
.pp-party-medal .pp-medallion-svg{width:100%;height:100%}
/* ── Finale scene (Phase F3) ── */
.pp-scene-wrap{
  position:relative;border-radius:var(--radius-xl);overflow:hidden;background:#ffe7bd;
  box-shadow:var(--shadow-lg);border:3px solid rgba(15,35,64,.14);line-height:0;
}
.fn-scene-svg{display:block;width:100%;height:auto}
.fn-land{transition:opacity .7s ease,filter .7s ease}
.fn-land.is-dim{opacity:.26;filter:saturate(.3)}
.fn-land.is-fogged{opacity:.45;filter:saturate(.15) brightness(1.06)}
.fn-fw{transform-box:fill-box;transform-origin:center;animation:fn-pulse 3.8s ease-in-out infinite alternate}
.fn-fw-wrap{transition:opacity .8s ease}
.fn-fw-wrap.is-dim{opacity:.12}
@keyframes fn-pulse{from{transform:scale(.82);opacity:.55}to{transform:scale(1.08);opacity:1}}
.fn-shimmer{animation:fn-shimmer 3.4s ease-in-out infinite alternate}
@keyframes fn-shimmer{from{opacity:.25}to{opacity:.85}}
.fn-scene-calm .fn-fw,.fn-scene-calm .fn-shimmer{animation:none}
.fn-scene-calm .fn-shimmer{opacity:.7}
/* The visitor's skyline: a backdrop street along the shore, behind the podium */
.pp-scene-wrap .pp-party-skyline{
  position:absolute;left:50%;transform:translateX(-50%);bottom:23%;z-index:2;
  width:min(540px,84%);height:88px;pointer-events:none;line-height:0;
}
.pp-scene-wrap .pp-party-skyline .pp-skyline-svg{width:100%;height:100%}
/* The visitor's creation, center stage on the podium */
.pp-party-creature{
  position:absolute;left:50%;bottom:10.5%;transform:translateX(-50%);z-index:3;
  width:min(176px,32%);text-align:center;line-height:1.3;
  transition:opacity .8s ease,filter .8s ease;
}
.pp-party-creature.is-dim{opacity:.22;filter:saturate(.35)}
.pp-party-creature .pp-creature-svg{width:100%;height:auto}
.pp-party-creature.pp-creature-invite{width:min(320px,72%);bottom:12%}
.pp-stage-caption{
  display:inline-block;background:rgba(15,35,64,.85);color:#fff;border-radius:var(--radius-full);
  padding:.3rem .8rem;margin:.35rem 0 0;font-size:var(--fs-sm);font-weight:700;line-height:1.35;
}
.pp-stage-caption a{color:var(--sun)}
.pp-skyline-invite{max-width:640px;margin:var(--sp-4) auto 0;text-align:center;color:var(--ink-soft)}
.pp-rollcall-line{
  font-family:var(--font-display);font-weight:800;font-size:var(--fs-xl);color:var(--navy);
  text-align:center;min-height:1.5em;margin:var(--sp-4) auto 0;max-width:44rem;
}
.pp-rollcall-actions{text-align:center;margin-top:var(--sp-2)}

/* ── Certificate ── */
.pp-certificate{
  position:relative;background:var(--cream);border:4px solid var(--navy);border-radius:6px;
  outline:2px solid var(--sun-dark);outline-offset:-12px;
  max-width:880px;margin:var(--sp-8) auto 0;padding:var(--sp-8) var(--sp-6) var(--sp-6);text-align:center;
  box-shadow:var(--shadow-lg), inset 0 0 0 3px rgba(240,165,0,.4), inset 0 0 46px rgba(255,201,60,.22);
  print-color-adjust:exact;-webkit-print-color-adjust:exact;
}
.pp-certificate::after{
  content:"★";position:absolute;right:30px;bottom:26px;width:62px;height:62px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 38% 34%,#ffedb0,#ffc93c 58%,#f0a500);
  border:2px dashed rgba(15,35,64,.45);color:var(--navy);font-size:1.55rem;line-height:1;
  box-shadow:0 3px 8px rgba(15,35,64,.28), inset 0 0 0 4px rgba(255,248,236,.55);
  transform:rotate(10deg);
}
.pp-corner{position:absolute;color:var(--sun-dark);font-size:1.3rem;line-height:1}
.pp-corner-tl{top:16px;left:18px}.pp-corner-tr{top:16px;right:18px}
.pp-corner-bl{bottom:16px;left:18px}.pp-corner-br{bottom:16px;right:18px}
.pp-cert-brand{font-family:var(--font-display);letter-spacing:.16em;text-transform:uppercase;color:var(--navy);font-weight:800;margin:0}
.pp-cert-kind{letter-spacing:.3em;text-transform:uppercase;color:var(--coral-dark);font-weight:800;font-size:var(--fs-sm);margin:var(--sp-2) 0}
.pp-cert-title{font-size:clamp(1.6rem,4.5vw,var(--fs-3xl));color:var(--navy);margin:var(--sp-2) 0 var(--sp-4)}
.pp-cert-presented{color:var(--ink-soft);margin:0}
.pp-cert-name{
  font-family:var(--font-display);font-weight:800;font-size:clamp(1.8rem,5vw,var(--fs-4xl));color:var(--coral-dark);
  margin:var(--sp-1) auto var(--sp-3);padding-bottom:var(--sp-1);border-bottom:3px solid var(--sun);max-width:32rem;
}
.pp-cert-line{max-width:40rem;margin:0 auto;color:var(--ink)}
.pp-cert-badges{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap;margin:var(--sp-5) 0 var(--sp-2)}
.pp-cert-badge{width:104px}
.pp-cert-medal{width:72px;height:72px;margin:0 auto}
.pp-cert-medal .pp-medallion-svg{width:100%;height:100%}
.pp-cert-badge p{font-size:var(--fs-xs);font-weight:800;color:var(--navy);margin:var(--sp-1) 0 0;line-height:1.25}
.pp-cert-foot{display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;max-width:40rem;margin:var(--sp-5) auto 0;text-align:left}
.pp-cert-foot-cell p{margin:0}
.pp-cert-date{font-family:var(--font-display);font-weight:800;font-size:var(--fs-lg);color:var(--navy);border-bottom:2px solid rgba(15,35,64,.3);padding-bottom:2px}
.pp-cert-foot-label{font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-top:var(--sp-1)!important}
.pp-cert-sign{text-align:center}
.pp-cert-sig-face{display:inline-block;vertical-align:middle;margin-right:var(--sp-2)}
.pp-cert-sig{display:inline-block!important;font-family:var(--font-display);font-weight:800;font-size:var(--fs-2xl);color:var(--teal-dark);transform:rotate(-4deg)}
.pp-cert-actions{text-align:center;margin-top:var(--sp-5)}
.pp-cert-print-note{color:var(--ink-soft);font-size:var(--fs-sm)}

/* ── Reset ── */
.pp-reset{margin-top:var(--sp-10);border-top:2px solid rgba(15,35,64,.12);padding-top:var(--sp-5);color:var(--ink-soft)}
.pp-reset-title{font-size:var(--fs-lg);color:var(--ink-soft)}
.pp-reset-warn{color:var(--ink)}
.pp-reset-actions{display:flex;gap:var(--sp-2);flex-wrap:wrap}

/* ── Small screens ── */
@media (max-width:560px){
  .pp-progress-band{justify-content:center;text-align:center}
  .pp-progress-actions{justify-content:center}
  .pp-cert-foot{justify-content:center;text-align:center}
  .pp-medallion{width:118px;height:118px}
  .pp-party-creature{bottom:2%;width:min(140px,36%)}
  .pp-stage-cap-pre{display:none}
  .pp-stage-caption{font-size:.75rem;padding:.2rem .55rem}
  .pp-party-creature.pp-creature-invite{bottom:4%}
  .pp-scene-wrap .pp-party-skyline{height:64px;bottom:20%}
  .pp-rollcall-line{font-size:var(--fs-lg)}
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce){
  .pp-burst{animation:none}
  .pp-confetti-piece{animation:none;display:none}
  #pp-ring-fill{transition:none}
  .fn-fw,.fn-shimmer{animation:none}
  .fn-land,.fn-fw-wrap,.pp-party-creature{transition:none}
}

/* ── Print: the certificate, on its own page ── */
@page{size:landscape;margin:8mm}
@media print{
  body *{visibility:hidden}
  #pp-certificate, #pp-certificate *{visibility:visible}
  #pp-certificate{
    position:fixed;top:0;left:0;right:0;margin:0 auto;width:97%;max-width:none;height:fit-content;
    box-shadow:none;border-width:3px;
  }
  .pp-cert-actions{display:none!important}
}

/* ── Your Harbor House Story + bonus finds (Stage 8, Challenge B) ── */
.pp-bonus-finds{margin-top:var(--sp-5)}
.pp-bonus-line{
  background:#fff7d6;border:2px solid var(--sun);border-radius:var(--radius-full);
  padding:var(--sp-3) var(--sp-5);margin:0;text-align:center;font-size:var(--fs-lg);
}
.pp-story{
  background:linear-gradient(165deg,var(--paper),var(--cream));
  border-left:6px solid var(--sun);
  padding:var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-8);
  margin-top:var(--sp-5);
}
.pp-story-text{line-height:1.65;font-size:var(--fs-lg);margin:0}
.pp-story-text::first-letter{
  font-family:var(--font-display);font-weight:800;color:var(--sun-dark);
  font-size:2.6em;line-height:1;float:left;padding:.06em .12em 0 0;
}

/* Phase 3 premium art */
.pp-finale-art{width:100%;height:auto;display:block;border-radius:18px;margin:0 0 var(--sp-4);box-shadow:0 14px 34px rgba(15,35,64,.25)}