/* ════════════════════════════════════════════════════════════
   Plush Explorer — V5 brand styles (Phase 0)
   Hand-drawn / sketchy adventure aesthetic: parchment cream +
   warm brass + sage green + rust + sepia ink. Architects Daughter
   (hand-lettered kicker) · Baloo 2 (display) · Nunito (body) ·
   Patrick Hand (handwritten notes). Sketchy language = bold ink
   borders + offset brass shadows + slight tilts + dashed rules
   (per static-v1; Theme1 wobble clip-paths can layer in later).
   Layered over /qx/v5/blocks.css; targets brand classes carried
   by blocks via the `class` universal prop. NB: where a block
   needs CSS display (e.g. grid), author it WITHOUT direction/
   justify so the adapter emits no inline flex.
   ════════════════════════════════════════════════════════════ */
:root {
  /* parchment + adventure palette (canonical static-v1 tokens) */
  --c-parchment:#f4ecd5; --c-parchment-deep:#e6d8b3; --c-cream:#fff9e8;
  --c-ink:#3d2914; --c-ink-soft:#6b4f33; --c-ink-muted:#8a7159;
  --c-brass:#c8a460; --c-brass-deep:#8a5820; --c-brass-light:#f0d878;
  --c-sage:#5a7048; --c-sage-deep:#3a4a2e;
  --c-rust:#b85432; --c-rust-deep:#93401f;
  --c-purple:#5b39a8;
  --c-rule:rgba(61,41,20,0.15);
  --f-display:"Architects Daughter","Marker Felt",cursive;
  --f-title:"Baloo 2",system-ui,sans-serif;
  --f-body:"Nunito",-apple-system,system-ui,sans-serif;
  --f-hand:"Patrick Hand",cursive;
}

/* ── reset ── */
*, *::before, *::after { box-sizing:border-box; }
html, body { margin:0; max-width:100%; overflow-x:hidden; }
body {
  font-family:var(--f-body); font-weight:500; color:var(--c-ink);
  background:var(--c-parchment);
  background-image:
    radial-gradient(ellipse at top, rgba(255,255,255,0.4) 0%, transparent 60%),
    radial-gradient(ellipse at bottom, rgba(0,0,0,0.04) 0%, transparent 70%);
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
.qx-heading { font-family:var(--f-title); color:var(--c-ink); line-height:1.15; margin:0; }
.qx-text { margin:0; }
.qx-link { color:inherit; }

/* paw-mark — SVG via mask so background-color sets the colour */
.pe-paw {
  width:34px; height:34px; min-width:34px; background:var(--c-brass-deep);
  -webkit-mask:url("../svg/pawmark.svg") no-repeat center / contain;
          mask:url("../svg/pawmark.svg") no-repeat center / contain;
}

/* ════════════════════════════════════════════════ STICKY HEADER */
.pe-header {
  position:sticky; top:0; z-index:100;
  background:rgba(244,236,213,0.96);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:2px solid var(--c-brass);
  box-shadow:0 4px 18px rgba(61,41,20,0.06);
  padding-block:0.85rem; padding-inline:max(1.5rem, calc((100% - 78rem) / 2));
  gap:1.5rem;
}
.pe-mark { text-decoration:none; display:inline-flex; align-items:center; gap:0.6rem; }
.pe-mark .pe-wordmark {
  font-family:var(--f-title); font-weight:800; font-size:1.35rem; line-height:1;
  color:var(--c-ink); letter-spacing:0.01em;
}
.pe-nav { gap:1.6rem; }
.pe-navlink {
  position:relative; font-family:var(--f-title); font-weight:600; font-size:0.92rem;
  color:var(--c-ink-soft); text-decoration:none; transition:color .2s;
}
.pe-navlink:hover { color:var(--c-ink); }
/* active page — hand-drawn brass underline */
.pe-navlink.qx-link--active { color:var(--c-ink); }
.pe-navlink.qx-link--active::after {
  content:""; position:absolute; left:-2px; right:-2px; bottom:-0.4rem; height:3px;
  background:var(--c-brass); border-radius:2px 3px 2px 3px; transform:rotate(-0.6deg);
}
.pe-cta-mini {
  font-family:var(--f-title); font-weight:700; font-size:0.85rem; color:var(--c-cream);
  background:var(--c-rust); border:2.5px solid var(--c-ink); border-radius:10px;
  padding:0.42rem 1.1rem; text-decoration:none; box-shadow:3px 3px 0 var(--c-brass);
  transition:transform .15s, box-shadow .15s;
}
.pe-cta-mini:hover { transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--c-brass); }
@media (max-width:720px){
  .pe-header{ flex-wrap:wrap; row-gap:0.7rem; }
  .pe-nav{ flex-basis:100%; flex-wrap:wrap; justify-content:center; gap:0.5rem 1.2rem; }
}

/* ════════════════════════════════════════════════ HERO */
.pe-hero {
  padding:5rem 1.5rem 5.5rem; text-align:center;
  background:
    radial-gradient(ellipse at 50% -20%, rgba(240,216,120,0.28) 0%, transparent 55%),
    url("../svg/paper-mottle.svg"),
    var(--c-parchment);
}
.pe-kicker {
  font-family:var(--f-display); font-size:1.15rem; color:var(--c-brass-deep);
  letter-spacing:0.08em; transform:rotate(-1.2deg); margin-bottom:0.75rem;
}
.pe-hero-title {
  font-family:var(--f-title); font-weight:800; line-height:1.1;
  font-size:clamp(2.2rem,6vw,3.8rem); color:var(--c-ink); max-width:18ch; margin-inline:auto;
}
.pe-hero-title .pe-accent {
  font-family:var(--f-display); font-weight:400; color:var(--c-rust);
  display:inline-block; transform:rotate(-1.5deg);
}
.pe-hero-lead {
  font-size:1.1rem; color:var(--c-ink-soft); max-width:52ch; margin-top:1.25rem;
  line-height:1.7;
}
.pe-hero-ctas { gap:1rem; margin-top:2rem; flex-wrap:wrap; justify-content:center; }
.pe-cta {
  display:inline-block; font-family:var(--f-title); font-weight:700; font-size:1rem;
  color:var(--c-cream); background:var(--c-rust); text-decoration:none;
  border:3px solid var(--c-ink); border-radius:12px; padding:0.8rem 1.9rem;
  box-shadow:5px 5px 0 var(--c-brass); transition:transform .15s, box-shadow .15s;
}
.pe-cta:hover { transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--c-brass); }
.pe-cta.alt { color:var(--c-ink); background:var(--c-cream); }
.pe-cta.sage { background:var(--c-sage); }

/* ════════════════════════════════════════════════ SECTIONS */
.pe-section { padding:4.5rem 1.5rem; }
.pe-section.bg-deep { background:var(--c-parchment-deep); }
.pe-section.bg-sage { background:var(--c-sage-deep); color:var(--c-cream); }
.pe-container { max-width:72rem; margin:0 auto; width:100%; }
.pe-container.narrow { max-width:46rem; }
.text-center { text-align:center; }
.pe-eyebrow {
  font-family:var(--f-display); font-size:1.05rem; color:var(--c-brass-deep);
  transform:rotate(-1deg); margin-bottom:1rem;
}
.bg-sage .pe-eyebrow { color:var(--c-brass-light); }
.pe-h2 {
  font-family:var(--f-title); font-weight:800; font-size:clamp(1.7rem,4vw,2.5rem);
  color:var(--c-ink); margin-bottom:1rem;
}
.bg-sage .pe-h2 { color:var(--c-cream); }
.pe-body { color:var(--c-ink-soft); font-size:1.02rem; line-height:1.7; max-width:60ch; }
.bg-sage .pe-body { color:rgba(255,249,232,0.88); }
.pe-body + .pe-body { margin-top:1rem; }
/* hand-drawn dashed divider */
.pe-divider { border:none; border-top:2px dashed var(--c-rule); max-width:14rem; margin:0 auto; }

/* ── sketchy cards (grid — authored WITHOUT direction so display wins) ── */
.pe-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(15rem, 100%),1fr)); gap:1.75rem; margin-top:2.5rem; }
.pe-card {
  background:var(--c-cream); border:3px solid var(--c-ink); border-radius:12px 10px 14px 11px;
  padding:2rem 1.5rem; text-align:center; box-shadow:5px 5px 0 var(--c-brass);
  transition:transform .2s, box-shadow .2s;
}
.pe-card:hover { transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--c-brass); }
.pe-card:nth-child(2n) { transform:rotate(0.4deg); }
.pe-card:nth-child(2n):hover { transform:rotate(0.4deg) translate(-2px,-2px); }
.pe-card-stamp {
  font-family:var(--f-hand); font-size:1.25rem; color:var(--c-brass-deep);
  border:2px solid var(--c-brass); border-radius:50%; width:2.4rem; height:2.4rem;
  display:inline-flex; align-items:center; justify-content:center;
  margin:0 auto 0.9rem; transform:rotate(-4deg);
}
.pe-card-h { font-family:var(--f-title); font-weight:700; font-size:1.2rem; color:var(--c-ink); margin-bottom:0.5rem; }
.pe-card-p { color:var(--c-ink-soft); font-size:0.95rem; line-height:1.55; }

/* ── expedition-region field-guide chips ── */
.pe-regions { gap:0.8rem; margin-top:2rem; flex-wrap:wrap; justify-content:center; }
.pe-region-chip {
  font-family:var(--f-hand); font-size:1.05rem; color:var(--c-ink);
  background:var(--c-cream); border:2.5px solid var(--c-ink); border-radius:999px;
  padding:0.45rem 1.15rem; text-decoration:none; box-shadow:3px 3px 0 var(--c-brass);
  transition:transform .15s, box-shadow .15s; white-space:nowrap;
}
.pe-region-chip:hover { transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--c-brass); }
.pe-region-chip.is-dim { opacity:0.55; box-shadow:3px 3px 0 var(--c-ink-muted); }
.pe-footnote {
  font-family:var(--f-hand); font-size:0.98rem; color:var(--c-ink-muted);
  margin-top:1.25rem; transform:rotate(-0.5deg);
}

/* ════════════════════════════════════════════════ FOOTER */
.pe-footer {
  background:var(--c-sage-deep); color:rgba(255,249,232,0.75);
  padding:3rem 1.5rem; text-align:center;
}
.pe-footer .pe-paw { background:var(--c-brass-light); margin:0 auto; }
.footer-wordmark {
  font-family:var(--f-title); font-weight:800; font-size:1.6rem; color:var(--c-cream);
  margin-top:0.6rem;
}
.footer-tag { font-family:var(--f-hand); font-size:1.02rem; color:var(--c-brass-light); margin-top:0.3rem; }
.footer-nav { gap:1.5rem; margin-top:1.75rem; flex-wrap:wrap; justify-content:center; }
.footer-link {
  color:rgba(255,249,232,0.75); text-decoration:none; font-family:var(--f-title);
  font-weight:600; font-size:0.9rem;
}
.footer-link:hover { color:var(--c-cream); }
.footer-copy { margin-top:2rem; font-size:0.78rem; color:rgba(255,249,232,0.5); letter-spacing:0.04em; }

/* ════════════════════════════════════════════════ HOLDING PAGE (pre-launch) */
.pe-holding { min-height:100vh; min-height:100svh; padding:1.5rem; }
.pe-holding-card { max-width:34rem; padding:3rem 2rem 2.5rem; }
.pe-holding-card:hover { transform:none; box-shadow:5px 5px 0 var(--c-brass); }
.pe-paw-lg { width:64px; height:64px; min-width:64px; margin-bottom:0.75rem; }
.pe-holding-title {
  font-family:var(--f-title); font-weight:800; line-height:1.15;
  font-size:clamp(1.9rem,6vw,2.6rem); color:var(--c-ink); text-align:center;
}
.pe-holding-rule { border-top:2px dashed var(--c-rule); width:11rem; max-width:60%; margin-top:1.5rem; }

/* ════════════════════════════════════════════════ SECTION PAGES (Phase 1 spine) */
.pe-page-top {
  padding:4rem 1.5rem 3.5rem; text-align:center;
  background:
    radial-gradient(ellipse at 50% -20%, rgba(240,216,120,0.24) 0%, transparent 55%),
    url("../svg/paper-mottle.svg"),
    var(--c-parchment);
}
.pe-h1 {
  font-family:var(--f-title); font-weight:800; line-height:1.12;
  font-size:clamp(2rem,5.5vw,3.2rem); color:var(--c-ink); max-width:20ch; margin-inline:auto;
}
.pe-h1 .pe-accent { font-family:var(--f-display); font-weight:400; color:var(--c-rust); display:inline-block; transform:rotate(-1.5deg); }

/* dimmed card — sightings under verification / not yet catalogued */
.pe-card.is-dim { opacity:0.62; box-shadow:5px 5px 0 var(--c-ink-muted); }
.pe-card.is-dim:hover { transform:none; box-shadow:5px 5px 0 var(--c-ink-muted); }
.pe-card-meta {
  font-family:var(--f-hand); font-size:0.95rem; color:var(--c-ink-muted); margin-top:0.6rem;
}
/* link-wrapped card: the link is the card */
.pe-card-link { display:block; text-decoration:none; color:inherit; }

/* big handwritten quote (society) */
.pe-quote {
  font-family:var(--f-hand); font-size:clamp(1.25rem,3vw,1.7rem); color:var(--c-ink-soft);
  line-height:1.5; max-width:36ch; margin-inline:auto; transform:rotate(-0.6deg);
}
.bg-sage .pe-footnote { color:rgba(255,249,232,0.62); }

/* ════════════════════════════════════════════════ SPECIMEN FIELD ENTRY (Phase 2) */
.pe-taxon-banner {
  gap:0.35rem 1.4rem; flex-wrap:wrap; justify-content:center;
  padding:0.8rem 1.5rem; background:var(--c-parchment-deep);
  border-bottom:2px dashed var(--c-rule);
}
.pe-taxon { font-size:0.78rem; color:var(--c-ink-muted); }
.pe-taxon b { font-family:var(--f-title); font-weight:700; color:var(--c-ink-soft); margin-left:0.3em; }
.pe-taxon-sep { color:var(--c-brass); }

.pe-specimen-top { padding:3rem 1.5rem 1.5rem; text-align:center; }
.pe-specimen-no {
  font-family:var(--f-hand); font-size:0.95rem; color:var(--c-ink-muted);
  letter-spacing:0.06em; margin-bottom:0.6rem; transform:rotate(-0.8deg);
}
.pe-sci-name { font-family:var(--f-hand); font-size:1.15rem; color:var(--c-sage); font-style:italic; margin-top:0.4rem; }

/* record card — key/value ledger rows */
.pe-record {
  background:var(--c-cream); border:3px solid var(--c-ink); border-radius:12px 10px 13px 11px;
  box-shadow:5px 5px 0 var(--c-brass); padding:1.5rem 1.75rem; text-align:left;
  max-width:38rem; width:100%;
}
.pe-record-heading {
  font-family:var(--f-title); font-weight:800; font-size:1.05rem; text-transform:uppercase;
  letter-spacing:0.05em; color:var(--c-brass-deep); margin-bottom:0.75rem;
}
.pe-record-row { justify-content:space-between; gap:1rem; padding:0.5rem 0; border-bottom:1.5px dashed var(--c-rule); }
.pe-record-row:last-child { border-bottom:none; }
.pe-record-key { font-family:var(--f-title); font-weight:700; font-size:0.85rem; color:var(--c-ink-soft); white-space:nowrap; }
.pe-record-val { font-size:0.92rem; color:var(--c-ink); text-align:right; }

/* acquisition — region offers */
.pe-acq-row {
  justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:0.65rem 0.9rem; border:2.5px solid var(--c-ink); border-radius:10px;
  background:var(--c-cream); box-shadow:3px 3px 0 var(--c-brass);
}
.pe-acq-row + .pe-acq-row { margin-top:0.7rem; }
.pe-acq-region { font-family:var(--f-title); font-weight:800; font-size:0.95rem; color:var(--c-ink); }
.pe-acq-price { font-family:var(--f-hand); font-size:1.1rem; color:var(--c-ink-soft); }
.pe-acq-link {
  font-family:var(--f-title); font-weight:700; font-size:0.85rem; color:var(--c-cream);
  background:var(--c-rust); border:2.5px solid var(--c-ink); border-radius:9px;
  padding:0.35rem 0.95rem; text-decoration:none; white-space:nowrap;
  transition:transform .15s;
}
.pe-acq-link:hover { transform:translate(-1px,-1px); }
.pe-disclosure { font-size:0.78rem; color:var(--c-ink-muted); margin-top:1rem; line-height:1.5; }

/* field notes — handwritten card */
.pe-fieldnotes {
  background:var(--c-cream); border:3px solid var(--c-ink); border-radius:12px 14px 11px 13px;
  box-shadow:5px 5px 0 var(--c-sage); padding:1.5rem 1.75rem; max-width:38rem; width:100%;
  text-align:left; transform:rotate(-0.5deg);
}
.pe-fieldnotes-h { font-family:var(--f-display); font-size:1.05rem; color:var(--c-sage-deep); margin-bottom:0.6rem; }
.pe-fieldnotes-p { font-family:var(--f-hand); font-size:1.08rem; line-height:1.6; color:var(--c-ink-soft); }
.pe-fieldnotes-sig { font-family:var(--f-hand); font-size:0.98rem; color:var(--c-ink-muted); margin-top:0.75rem; text-align:right; }

/* stacked page column */
.pe-specimen-col { gap:1.75rem; max-width:38rem; margin-inline:auto; width:100%; }
.pe-taxon { gap:0.35rem; }
.pe-taxon-label { font-size:0.78rem; color:var(--c-ink-muted); }
.pe-taxon-val { font-family:var(--f-title); font-weight:700; font-size:0.8rem; color:var(--c-ink-soft); }

/* ════════════════════════════════════════════════ SPECIMEN MOUNT + CARD THUMBS */
/* museum-mount frame — cream card, ink border, brass offset, gentle tilt */
.pe-mount {
  background:var(--c-cream); border:3px solid var(--c-ink); border-radius:14px 11px 15px 12px;
  box-shadow:6px 6px 0 var(--c-brass); padding:1.75rem 1.5rem 1.1rem;
  max-width:38rem; width:100%; transform:rotate(0.5deg);
}
.pe-mount-img {
  width:min(15rem, 70%); aspect-ratio:1;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(240,216,120,0.25) 0%, transparent 65%),
    var(--c-parchment);
  border:2.5px solid var(--c-brass); border-radius:50%;
  padding:0.9rem;
}
.pe-mount-cap {
  font-family:var(--f-hand); font-style:italic; font-size:1.05rem;
  color:var(--c-sage-deep); margin-top:0.9rem;
}
.pe-mount-id { font-family:var(--f-hand); font-size:0.9rem; color:var(--c-ink-muted); margin-top:0.15rem; }

/* card thumbnails (collection + world grids) */
.pe-card-img {
  width:7rem; height:7rem; margin:0 auto 0.9rem;
  background:var(--c-parchment); border:2.5px solid var(--c-brass); border-radius:50%;
  padding:0.5rem;
}

/* ════════════════════════════════════════════════ MAP OF EXPLORATION */
.pe-map-frame {
  position:relative; width:100%; max-width:64rem; margin-inline:auto;
  aspect-ratio:1000/560;
  background:url("../svg/expedition-map.svg") center / contain no-repeat;
  border:3px solid var(--c-ink); border-radius:14px 11px 15px 12px;
  box-shadow:6px 6px 0 var(--c-brass);
}
/* hotspot regions — invisible until hover: dashed brass outline */
.pe-map-spot { position:absolute; border-radius:10px; border:2.5px dashed transparent; transition:border-color .2s, background .2s; }
.pe-map-spot:hover, .pe-map-spot:focus-visible { border-color:var(--c-brass-deep); background:rgba(240,216,120,0.18); }
.spot-underwater { left:26%; top:42%; width:16%; height:24%; }
.spot-space { left:1.5%; top:2%; width:97%; height:11%; }
/* expedition stamps — brass circles with volume numerals.
   Positions come from data (repeater style tokens, engine C3) — no per-marker classes. */
.pe-map-stamp {
  position:absolute; transform:translate(-50%,-50%);
  width:2rem; height:2rem; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-hand); font-size:0.95rem; color:var(--c-ink);
  background:var(--c-cream); border:2.5px solid var(--c-brass-deep); border-radius:50%;
  box-shadow:2px 2px 0 rgba(61,41,20,0.25); text-decoration:none;
  transition:transform .15s;
}
.pe-map-stamp:hover { transform:translate(-50%,-50%) scale(1.15); }
/* specimen sighting pins — lanterns */
.pe-map-pin { position:absolute; transform:translate(-50%,-90%); font-size:1.35rem; text-decoration:none; line-height:1; transition:transform .15s; }
.pe-map-pin:hover { transform:translate(-50%,-90%) scale(1.25); }
/* shared tooltip */
.pe-map-tip {
  position:absolute; left:50%; bottom:calc(100% + 0.45rem); transform:translateX(-50%);
  white-space:nowrap; font-family:var(--f-hand); font-size:0.95rem; color:var(--c-cream);
  background:var(--c-ink); border-radius:8px; padding:0.25rem 0.7rem;
  opacity:0; pointer-events:none; transition:opacity .15s; z-index:5;
}
.pe-map-spot .pe-map-tip { bottom:auto; top:0.4rem; }
.pe-map-spot:hover .pe-map-tip, .pe-map-spot:focus-visible .pe-map-tip,
.pe-map-stamp:hover .pe-map-tip, .pe-map-stamp:focus-visible .pe-map-tip,
.pe-map-pin:hover .pe-map-tip, .pe-map-pin:focus-visible .pe-map-tip { opacity:1; }
/* legend */
.pe-map-legend { gap:1.5rem; margin-top:1.5rem; flex-wrap:wrap; justify-content:center; }
.pe-map-legend .pe-footnote { margin-top:0; }

/* ── narrator (pe.narrator) ────────────────────────────────────────────────
   An iconkind character from the shared library, introducing a section in the
   Society's voice. The FIGURE is library-owned; everything styled here is the
   Plush Explorer frame around it. */
.pe-narrator {
  gap: 1.5rem;
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.5rem 1.75rem;
  background: var(--plush-parchment, #f4ecd5);
  border: 1px solid rgba(42, 36, 24, .12);
  border-radius: 1.25rem;
}
.pe-narrator-figure { flex: none; line-height: 0; }
.pe-narrator-speech { gap: .4rem; }
.pe-narrator-line {
  margin: 0;
  font-family: "Patrick Hand", "Architects Daughter", Georgia, serif;
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--plush-ink, #2a2114);
}
.pe-narrator-by {
  margin: 0;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--plush-sage, #5a7048);
}
@media (max-width: 560px) {
  .pe-narrator { flex-direction: column; text-align: center; gap: .75rem; padding: 1.25rem; }
}

/* ── SCENES ────────────────────────────────────────────────────────────────
   pe-scene / pe-scene-host were used in markup with NO css behind them — the
   same fault I filed against the engine's ambient block, committed in my own
   site. The scene had no bounds, so a figure could spill out of the frame and
   land on the caption underneath it.

   overflow:hidden is the load-bearing line: it makes the scene a rectangle
   whatever a layer does inside it. The caption sits below in normal flow and
   is raised so nothing can print over it. */
.pe-scene-host   { position: relative; }
.pe-scene        { overflow: hidden; border-radius: 12px; background: #dfe4ea;
                   box-shadow: 0 1px 3px rgba(45,40,30,.10); }
.pe-scene-host > .pe-footnote {
                   position: relative; z-index: 2; margin: .6rem 0 0;
                   text-align: center; }

/* the specimen mount on a field-index card — used with no rule until
   tools/check-classes.mjs pointed it out */
.pe-card-mount { display: block; width: 100%; max-width: 9rem; margin: 0 auto .6rem; }

/* gesture chips on the bench — Plush Explorer's own, not borrowed from iconkind
   (tools/check-classes.mjs caught that) */
.pe-chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.pe-chip  { display: inline-flex; align-items: center; justify-content: center;
            min-height: 2.75rem; padding: .5rem .95rem; border-radius: 999px;
            border: 1px solid #d9cfb8; background: #fffdf7; cursor: pointer;
            font-size: .9rem; line-height: 1; user-select: none; }
.pe-chip:hover  { border-color: #8fa06a; background: #fbf7ec; }
.pe-chip:active { transform: translateY(1px); }

/* ── TAPPABLE SCENE ELEMENTS ───────────────────────────────────────────────
   Android draws a translucent highlight over the whole bounding BOX of a
   tapped element, so tapping the frog or the correspondent flashed a grey
   square across the scene — the character is a rectangular layer, not the
   shape you can see. -webkit-tap-highlight-color kills it.

   The focus ring is kept for :focus-visible only: a keyboard user still needs
   to see what is selected, a thumb does not. */
.pe-tappable { -webkit-tap-highlight-color: transparent;
               -webkit-touch-callout: none; user-select: none; }
.pe-tappable:focus { outline: none; }
.pe-tappable:focus-visible { outline: 2px solid #7f8a52; outline-offset: 3px; border-radius: 6px; }