/* Harbor House — Shared Exhibit Styles (world-specific rules are prefixed per world) */
.ex-hero{border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow);position:relative;margin-top:var(--sp-4)}
.ex-stage{display:block;width:100%;height:auto}
.ex-stage.ex-offscreen *{animation-play-state:paused!important}
.ex-titlebar{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;justify-content:space-between;margin:var(--sp-5) 0 var(--sp-3)}
.ex-badge-chip{display:inline-flex;align-items:center;gap:var(--sp-2)}
.ex-section{margin:var(--sp-8) 0}
.ex-panel{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:2px solid rgba(15,35,64,.06);padding:var(--sp-5)}
.ex-panel h2{margin-bottom:var(--sp-2)}
.ex-hint{color:var(--ink-soft);font-size:var(--fs-sm);font-weight:600}

/* Calm toggle (shared with home/map pattern) */
.calm-toggle{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;padding:var(--sp-2) var(--sp-4);border-radius:var(--radius-full);background:#fff;color:var(--navy);font-family:var(--font-body);font-weight:800;font-size:var(--fs-sm);border:2px dashed rgba(15,35,64,.45);cursor:pointer}
.calm-toggle[aria-pressed="true"]{background:var(--navy);color:#fff;border-style:solid;border-color:var(--navy)}
body.hh-calm .ex-stage *,body.hh-calm .pip-svg *,body.hh-calm .ex-ambient *{animation-play-state:paused!important}

/* Pip strip */
.pip-strip{display:flex;gap:var(--sp-4);align-items:center;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:2px solid rgba(15,35,64,.06);padding:var(--sp-4) var(--sp-5);margin:var(--sp-5) 0;flex-wrap:wrap}
.pip-strip .pip-art{flex:0 0 84px;cursor:pointer;background:none;border:none;padding:0;min-width:64px;min-height:64px}
.pip-strip .pip-art svg{width:84px;height:80px;display:block}
.pip-bubble{flex:1 1 260px;background:var(--cream);border:2px solid var(--sun);border-radius:var(--radius);padding:var(--sp-3) var(--sp-4);font-weight:700;color:var(--navy);position:relative}
.pip-bubble p{margin:0}
.pip-name{font-family:var(--font-display);font-size:var(--fs-sm);letter-spacing:.08em;text-transform:uppercase;color:var(--coral-dark)}
.pip-wave{transform-box:fill-box;transform-origin:bottom right}
body:not(.hh-calm) .pip-wave{animation:pipWave 2.6s ease-in-out infinite}
@keyframes pipWave{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-14deg)}}
.pip-beacon-pulse{transform-box:fill-box;transform-origin:center}
body:not(.hh-calm) .pip-beacon-pulse{animation:pipBeacon 2s ease-in-out infinite}
@keyframes pipBeacon{0%,100%{opacity:1}50%{opacity:.45}}

/* Fact card */
.fact-card{background:var(--cream);border:3px solid var(--sun);border-radius:var(--radius-lg);padding:var(--sp-5);margin-top:var(--sp-4);box-shadow:var(--shadow-sm)}
.fact-card h3{margin-bottom:var(--sp-2)}
.fact-card p{margin:0}
.fact-pop{animation:factPop var(--dur) var(--ease-bounce)}
@keyframes factPop{0%{transform:scale(.96)}100%{transform:scale(1)}}
body.hh-calm .fact-pop{animation:none}

/* Badge celebration overlay */
.bc-overlay{position:fixed;inset:0;background:rgba(15,35,64,.55);display:flex;align-items:center;justify-content:center;z-index:300;padding:var(--sp-4);opacity:0;transition:opacity var(--dur) var(--ease)}
.bc-overlay[hidden]{display:none!important}
.bc-overlay.show{opacity:1}
.bc-card{background:var(--paper);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);max-width:420px;width:100%;text-align:center;padding:var(--sp-6) var(--sp-5);transform:scale(.92);transition:transform var(--dur) var(--ease-bounce)}
.bc-overlay.show .bc-card{transform:scale(1)}
.bc-medal{width:110px;height:110px;margin:0 auto var(--sp-3)}
.bc-card h2{margin-bottom:var(--sp-1)}
.bc-stars{font-size:1.4rem;letter-spacing:.4em;color:var(--sun-dark)}

/* Progress */
.ex-progress{height:18px;background:rgba(15,35,64,.12);border-radius:var(--radius-full);overflow:hidden}
.ex-progress > div{height:100%;width:0%;border-radius:var(--radius-full);transition:width var(--dur) var(--ease)}

/* World nav footer */
.ex-nav{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:space-between;align-items:center;margin:var(--sp-8) 0 var(--sp-4)}
.ex-nav .btn{min-height:52px}

/* Entrance */
.ex-rise{opacity:0;transform:translateY(14px);transition:opacity var(--dur-cine) var(--ease),transform var(--dur-cine) var(--ease)}
body.ex-entered .ex-rise{opacity:1;transform:none}
body.hh-calm .ex-rise{transition-duration:.01s}

/* Big tappable scene hotspots in SVG */
svg .hotspot{cursor:pointer;outline:none}
svg .hotspot:focus-visible{outline:3px solid var(--sun);outline-offset:2px}

@media (max-width:560px){
  .pip-strip{padding:var(--sp-3) var(--sp-4)}
  .ex-nav .btn{flex:1 1 100%;justify-content:center}
}


/* ═══════════════ DINO DISCOVERY ═══════════════ */
.daisy-sway{transform-box:view-box;transform-origin:852px 480px}
body:not(.hh-calm) .daisy-sway{animation:daisySway 7s ease-in-out infinite}
@keyframes daisySway{0%,100%{transform:rotate(0deg)}50%{transform:rotate(.8deg)}}
.daisy-neck{transform-box:view-box;transform-origin:762px 436px;transition:transform .9s var(--ease-bounce)}
#daisy.daisy-lean .daisy-neck{transform:rotate(-8deg) scale(1.07)}
body.hh-calm #daisy.daisy-lean .daisy-neck{transform:rotate(-3deg) scale(1.02)}
.daisy-eye{transform-box:fill-box;transform-origin:center}
body:not(.hh-calm) .daisy-eye{animation:daisyBlink 4.8s ease-in-out infinite}
@keyframes daisyBlink{0%,91%,100%{transform:scaleY(1)}94%,97%{transform:scaleY(.08)}}
#daisy{cursor:pointer}
.volcano-smoke{animation:smokeRise 5s ease-in-out infinite}
@keyframes smokeRise{0%,100%{transform:translateY(0);opacity:.85}50%{transform:translateY(-7px);opacity:1}}
.egg-shake .egg-wiggle{animation:eggShake .45s ease-in-out}
@keyframes eggShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
.egg-wiggle{transform-box:fill-box;transform-origin:bottom center}
.egg-hatched .egg-wiggle{transform:rotate(-3deg)}
.footprint{transition:transform var(--dur-fast) var(--ease)}
.footprint:hover{transform-box:fill-box}

/* Fossil dig */
.dig-wrap{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.dig-pit{position:relative;aspect-ratio:800/460;background:#4a3220}
.dig-fossil{position:absolute;inset:0;width:100%;height:100%}
.dig-fossil.fossil-found .fossil-glow{opacity:1;transition:opacity 1s var(--ease)}
.dig-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(6,1fr);gap:3px;padding:6px}
.dig-tile{border:2px solid rgba(0,0,0,.18);border-radius:8px;cursor:pointer;min-height:44px;padding:0;
  background:
    radial-gradient(circle at 30% 35%, rgba(0,0,0,.22) 0 3px, transparent 4px),
    radial-gradient(circle at 68% 62%, rgba(255,255,255,.14) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 82% 22%, rgba(0,0,0,.18) 0 2px, transparent 3px),
    linear-gradient(145deg,#8a5a2b,#6d451f);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.dig-tile.v1{background:radial-gradient(circle at 62% 30%, rgba(0,0,0,.2) 0 3px, transparent 4px),radial-gradient(circle at 26% 66%, rgba(255,255,255,.12) 0 2.5px, transparent 3.5px),linear-gradient(145deg,#96652f,#755026)}
.dig-tile.v2{background:radial-gradient(circle at 44% 58%, rgba(0,0,0,.24) 0 3.5px, transparent 4.5px),radial-gradient(circle at 80% 40%, rgba(255,255,255,.1) 0 2px, transparent 3px),linear-gradient(145deg,#7d5226,#5f3d1a)}
.dig-tile.v3{background:radial-gradient(circle at 20% 44%, rgba(255,255,255,.13) 0 2.5px, transparent 3.5px),radial-gradient(circle at 72% 74%, rgba(0,0,0,.2) 0 3px, transparent 4px),linear-gradient(145deg,#8f602c,#6d451f)}
.dig-tile:hover{filter:brightness(1.1)}
.dig-tile.cleared{opacity:0;transform:scale(.55);pointer-events:none}
body.hh-calm .dig-tile{transition-duration:.01s}
@media (max-width:640px){
  .dig-pit{aspect-ratio:4/5}
  .dig-grid{grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(8,1fr)}
  .dig-tile{min-height:44px}
}


/* ═══════════════ MISSION SPACE ═══════════════ */
.space-scene-wrap{position:relative}
#space-stage .sky-layer,#space-stage .orbit-layer,#space-stage .pad-layer{transition:opacity 1.2s var(--ease)}
#space-stage .orbit-layer{pointer-events:none}
#space-scene-wrap.in-orbit .orbit-layer{pointer-events:auto}
#space-scene-wrap.in-orbit .sky-layer,#space-scene-wrap.in-orbit .pad-layer{opacity:0}
#space-scene-wrap.launching .orbit-layer{opacity:.45}
#space-scene-wrap.in-orbit .orbit-layer{opacity:1}
.rocket-inner{transform-box:view-box}
#space-scene-wrap.launching .rocket-inner{transform:translateY(-780px);transition:transform 3.4s cubic-bezier(.55,.06,.85,.36)}
#space-scene-wrap.launching .rocket-flame,#space-scene-wrap.launching .rocket-puffs{opacity:1!important;transition:opacity .3s}
.rocket-flame{transform-box:fill-box;transform-origin:top center}
#space-scene-wrap.launching .rocket-flame{animation:flameFlick .18s ease-in-out infinite alternate}
@keyframes flameFlick{from{transform:scaleY(.88)}to{transform:scaleY(1.12)}}
body.hh-calm #space-scene-wrap.launching .rocket-inner{transform:none;opacity:0;transition:opacity .3s}
body.hh-calm .rocket-flame{display:none}
.rocket-beacon{animation:pipBeacon 1.6s ease-in-out infinite}
body.hh-calm .rocket-beacon{animation:none}
.stars-twinkle{animation:starTwinkle 3.4s ease-in-out infinite}
@keyframes starTwinkle{0%,100%{opacity:1}50%{opacity:.55}}
.orbit-bob{transform-box:fill-box;transform-origin:center;animation:orbitBob 5s ease-in-out infinite}
@keyframes orbitBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
body.hh-calm .orbit-bob,body.hh-calm .stars-twinkle{animation:none}
#rocket-orbit{transition:opacity 1s var(--ease)}
#space-scene-wrap.in-orbit #rocket-orbit{opacity:1!important}
.nova-arm{transform-box:fill-box;transform-origin:bottom left}
#nova.nova-wave .nova-arm{animation:novaWave .45s ease-in-out 5}
@keyframes novaWave{0%,100%{transform:rotate(0)}50%{transform:rotate(26deg)}}
.count-display{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:clamp(4rem,14vw,9rem);color:#fff;text-shadow:0 6px 30px rgba(15,35,64,.65),0 2px 0 rgba(15,35,64,.4);pointer-events:none;letter-spacing:.02em}
.count-display.pop{animation:countPop .5s var(--ease-bounce)}
@keyframes countPop{0%{transform:scale(1.5);opacity:.4}100%{transform:scale(1);opacity:1}}
body.hh-calm .count-display.pop{animation:none}

/* Checklist */
.check-list{display:grid;gap:var(--sp-3);margin:var(--sp-4) 0}
.check-toggle{display:flex;align-items:center;gap:var(--sp-4);width:100%;min-height:64px;padding:var(--sp-3) var(--sp-4);background:var(--w-space-bg);border:3px solid rgba(58,28,113,.25);border-radius:var(--radius);cursor:pointer;font-family:var(--font-body);text-align:left;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.check-toggle .switch{flex:0 0 62px;width:62px;height:34px;border-radius:var(--radius-full);background:#b9c4d4;position:relative;transition:background var(--dur) var(--ease)}
.check-toggle .knob{position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:left var(--dur) var(--ease-bounce)}
.check-toggle.on{border-color:#2d9e5f;background:#e6f7ee}
.check-toggle.on .switch{background:#2d9e5f}
.check-toggle.on .knob{left:31px}
.check-toggle .check-label{flex:1;font-weight:800;font-size:var(--fs-lg);color:var(--navy)}
.check-toggle .check-state{font-weight:800;font-size:var(--fs-sm);color:var(--ink-soft)}
.check-toggle.on .check-state{color:#1e7a46}
.check-toggle:disabled{opacity:.55;cursor:default}
.space-status{font-weight:800;color:var(--w-space-2);font-size:var(--fs-lg)}
.btn-launch{font-size:var(--fs-xl);min-height:60px;width:100%}
.btn-launch:disabled{opacity:.45;cursor:not-allowed;transform:none!important}

/* Planets */
.planet-row{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.planet-btn{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:52px;padding:var(--sp-2) var(--sp-4);border-radius:var(--radius-full);border:3px solid rgba(15,35,64,.15);background:#fff;font-family:var(--font-display);font-weight:700;font-size:var(--fs-base);color:var(--navy);cursor:pointer;transition:transform var(--dur-fast) var(--ease),border-color var(--dur) var(--ease)}
.planet-btn:hover{transform:translateY(-2px);border-color:var(--w-space-2)}
.planet-dot{width:26px;height:26px;border-radius:50%;box-shadow:inset -5px -5px 0 rgba(0,0,0,.16)}

/* Astronaut card */
.astro-wrap{display:grid;grid-template-columns:220px 1fr;gap:var(--sp-5);align-items:start}
.astro-card-svg{width:100%;max-width:220px;height:auto;filter:drop-shadow(0 10px 22px rgba(27,16,53,.35))}
.swatch-row{display:flex;gap:var(--sp-3)}
.swatch{width:52px;height:52px;border-radius:50%;border:4px solid #fff;box-shadow:var(--shadow-sm);cursor:pointer;padding:0}
.swatch.sel{outline:4px solid var(--navy);outline-offset:2px}
@media (max-width:640px){ .astro-wrap{grid-template-columns:1fr} .astro-card-svg{margin:0 auto} }


/* ═══════════════ OCEAN EXPLORERS ═══════════════ */
#ocean-stage .rays{animation:raySway 9s ease-in-out infinite;transform-box:view-box;transform-origin:top center}
@keyframes raySway{0%,100%{transform:skewX(0deg)}50%{transform:skewX(-2.2deg)}}
.fish-drift{animation:fishDrift 11s ease-in-out infinite}
@keyframes fishDrift{0%,100%{transform:translateX(0)}50%{transform:translateX(-16px)}}
.seaweed{animation:weedSway 6s ease-in-out infinite}
@keyframes weedSway{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
.bubbles circle{animation:bubbleRise 7s ease-in infinite}
.bubbles circle:nth-child(2n){animation-delay:-2.4s}.bubbles circle:nth-child(3n){animation-delay:-4.6s}
@keyframes bubbleRise{0%{transform:translateY(0);opacity:0}18%{opacity:.55}80%{opacity:.45}100%{transform:translateY(-72px);opacity:0}}
.sub-bob{animation:subBob 6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes subBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.jelly-drift{animation:jellyDrift 7s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes jellyDrift{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
body.hh-calm #ocean-stage .rays,body.hh-calm .fish-drift,body.hh-calm .seaweed,body.hh-calm .bubbles circle,body.hh-calm .sub-bob,body.hh-calm .jelly-drift{animation:none}
#sub-beam{transform-box:view-box;transform-origin:822px 432px;transition:transform .35s var(--ease)}
#beam-zone{cursor:crosshair;pointer-events:all}

/* Creatures */
.creature{transition:opacity var(--dur) var(--ease),filter var(--dur) var(--ease)}
.creature.blended{opacity:.48;filter:saturate(.45)}
.creature.lit,.deep-creature.lit{opacity:.96!important;filter:drop-shadow(0 0 14px rgba(255,230,109,.95)) brightness(1.18)}
.creature.found{opacity:1;filter:drop-shadow(0 0 10px rgba(255,201,60,.55))}

/* Treasure chest */
#chest .chest-lid{transform-box:fill-box;transform-origin:bottom left;transition:transform .8s var(--ease-bounce)}
#chest.chest-open .chest-lid{transform:rotate(-34deg) translateY(-4px)}
#chest.chest-open .chest-glow{opacity:.5!important;transition:opacity .8s}
#chest.chest-open .chest-coins{opacity:1!important;transition:opacity .8s .2s}
body.hh-calm #chest .chest-lid{transition-duration:.01s}

/* Willa */
#willa{transform:translate(-580px,150px);opacity:0;transition:transform 9.5s ease-in-out,opacity .9s var(--ease);cursor:pointer}
#willa.swimming{transform:translate(1870px,150px);opacity:1}
#willa.whale-stay{transform:translate(740px,150px);opacity:1;transition:opacity 1.1s var(--ease)}
#willa.no-anim{transition:none!important}
.willa-body{animation:willaBob 5.5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes willaBob{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-10px) rotate(-.6deg)}}
body.hh-calm .willa-body{animation:none}
#ocean-dim{transition:opacity 1.6s ease}

/* Discovery log */
.log-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);margin-top:var(--sp-4)}
.log-slot{background:var(--w-ocean-bg);border:2.5px dashed rgba(2,62,138,.3);border-radius:var(--radius);padding:var(--sp-3);text-align:center;min-height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-1)}
.log-slot .log-emoji{font-size:2rem;line-height:1;filter:grayscale(1);opacity:.5}
.log-slot .log-name{font-weight:800;font-size:var(--fs-sm);color:var(--ink-soft)}
.log-slot.found{border-style:solid;border-color:var(--sun);background:#fff8e1}
.log-slot.found .log-emoji{filter:none;opacity:1}
.log-slot.found .log-name{color:var(--navy)}
@media (max-width:640px){ .log-grid{grid-template-columns:repeat(2,1fr)} }

/* ═══════════════ IMAGINATION FACTORY ═══════════════ */
/* All selectors are factory-prefixed; merged into exhibit.css by the coordinator. */

/* Scene ambience — opacity/colour feedback only on inner shapes;
   transforms are used solely on whole top-level groups (fill-box). */
.factory-gear,.factory-gear-rev,.factory-gear-slow{transform-box:fill-box;transform-origin:center}
body:not(.hh-calm) .factory-gear{animation:factoryGearSpin 16s linear infinite}
body:not(.hh-calm) .factory-gear-rev{animation:factoryGearSpin 11s linear infinite reverse}
body:not(.hh-calm) .factory-gear-slow{animation:factoryGearSpin 22s linear infinite}
@keyframes factoryGearSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

.factory-drip{opacity:.85}
body:not(.hh-calm) .factory-drip{animation:factoryDripPulse 3.2s ease-in-out infinite}
body:not(.hh-calm) .factory-drip-2{animation-delay:-1.1s}
body:not(.hh-calm) .factory-drip-3{animation-delay:-2.2s}
@keyframes factoryDripPulse{0%,100%{opacity:.45}50%{opacity:1}}

.factory-bubble{opacity:.45}
body:not(.hh-calm) .factory-bubble{animation:factoryBubblePulse 2.8s ease-in-out infinite}
body:not(.hh-calm) .factory-bubble-2{animation-delay:-.9s}
body:not(.hh-calm) .factory-bubble-3{animation-delay:-1.8s}
@keyframes factoryBubblePulse{0%,100%{opacity:.25}50%{opacity:.65}}

body:not(.hh-calm) .factory-spot{animation:factorySpotPulse 5s ease-in-out infinite}
@keyframes factorySpotPulse{0%,100%{opacity:.13}50%{opacity:.2}}

/* Big Lever — arm is a whole group, fill-box rotation */
.factory-lever-arm{transform-box:fill-box;transform-origin:bottom center;transition:transform .45s var(--ease-bounce)}
#big-lever.pulled .factory-lever-arm{transform:rotate(28deg)}
#big-lever{cursor:pointer}
body.hh-calm .factory-lever-arm{transition-duration:.01s}

/* Creature on stage — dance/idle animate the injected root group only */
#stage-creature .creature-root{transform-box:fill-box;transform-origin:bottom center}
body:not(.hh-calm) #stage-creature.alive .creature-root{animation:factoryDance .68s ease-in-out infinite alternate}
body:not(.hh-calm) #stage-creature.idle .creature-root{animation:factoryIdle 4.5s ease-in-out infinite}
@keyframes factoryDance{0%{transform:translateY(0) rotate(-2.4deg)}55%{transform:translateY(-17px) rotate(0deg)}100%{transform:translateY(0) rotate(2.4deg)}}
@keyframes factoryIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
#stage-creature .cfg-acc{transform-box:fill-box;transform-origin:center}
body:not(.hh-calm) #stage-creature.alive .cfg-acc{animation:factoryAccWiggle .5s ease-in-out infinite alternate}
@keyframes factoryAccWiggle{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}

/* Wonder Wall mural */
#mural-zone{cursor:pointer;outline:none}
#mural-zone:hover{fill:#fbeed3}
#mural-zone:focus-visible{stroke:var(--navy);stroke-width:4.5;stroke-dasharray:none}
#mural-splats,#mural-splats *{pointer-events:none}
.factory-mural-count{font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);color:var(--w-factory);margin:var(--sp-3) 0 0}

/* Panels */
.factory-panel{border-top:6px solid var(--w-factory)}

/* Creature Studio layout */
.factory-studio{display:grid;grid-template-columns:1fr 300px;gap:var(--sp-5);align-items:start;margin-top:var(--sp-4)}
.factory-controls{display:grid;gap:var(--sp-4)}
.factory-group{border:2px solid rgba(232,93,4,.22);border-radius:var(--radius);padding:var(--sp-3) var(--sp-4) var(--sp-4);margin:0;min-width:0}
.factory-group legend,.factory-name-label{font-family:var(--font-display);font-weight:700;font-size:var(--fs-base);color:var(--navy);padding:0 var(--sp-2)}
.factory-name-label{display:block;padding:0;margin-bottom:var(--sp-2)}
.factory-choice-row{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.factory-choice{min-height:48px;padding:var(--sp-2) var(--sp-4);border-radius:var(--radius-full);border:3px solid rgba(15,35,64,.16);background:#fff;font-family:var(--font-display);font-weight:700;font-size:var(--fs-base);color:var(--navy);cursor:pointer;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.factory-choice:hover{border-color:var(--w-factory-2)}
.factory-choice.sel{border-color:var(--w-factory);background:var(--w-factory-bg);box-shadow:inset 0 0 0 2px var(--w-factory)}
.factory-swatch-row{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.factory-swatch{width:48px;height:48px;min-width:48px;min-height:48px;border-radius:50%;border:3px solid rgba(15,35,64,.22);box-shadow:var(--shadow-sm);cursor:pointer;padding:0}
.factory-swatch:hover{border-color:var(--navy)}
.factory-swatch.sel{outline:4px solid var(--w-factory);outline-offset:2px;border-color:#fff}
.factory-name-input{width:100%;min-height:48px;padding:var(--sp-2) var(--sp-3);border:2.5px solid rgba(15,35,64,.25);border-radius:var(--radius);font-family:var(--font-body);font-weight:700;font-size:var(--fs-base);color:var(--navy);background:#fff}
.factory-name-input:focus-visible{outline:3px solid var(--sun);outline-offset:1px;border-color:var(--w-factory)}
.factory-fineprint{font-size:var(--fs-sm);color:var(--ink-soft);font-weight:600;margin:var(--sp-2) 0 0}
.factory-preview-wrap{background:var(--w-factory-bg);border:2.5px dashed rgba(232,93,4,.4);border-radius:var(--radius-lg);padding:var(--sp-4);text-align:center}
.factory-preview-label{font-family:var(--font-display);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:var(--fs-sm);color:var(--w-factory);margin:0 0 var(--sp-2)}
.factory-preview{width:100%;max-width:280px;height:auto;max-height:280px}
.factory-preview-name{font-family:var(--font-display);font-weight:800;font-size:var(--fs-lg);color:var(--navy);margin:var(--sp-2) 0 0;overflow-wrap:anywhere}
.factory-bring{display:block;width:100%;min-height:60px;margin-top:var(--sp-5);border:none;border-radius:var(--radius);background:linear-gradient(135deg,var(--w-factory-2),var(--w-factory));color:#fff;font-family:var(--font-display);font-weight:800;font-size:var(--fs-xl);cursor:pointer;box-shadow:var(--shadow);transition:filter var(--dur) var(--ease)}
.factory-bring:hover{filter:brightness(1.08)}
.factory-bring:active{filter:brightness(.95)}
.factory-status{font-weight:800;color:var(--w-factory);margin:var(--sp-3) 0 0;min-height:1.4em}

/* Colour-mixing vats */
.factory-mix-layout{display:grid;grid-template-columns:1fr 280px;gap:var(--sp-5);align-items:start;margin-top:var(--sp-4)}
.factory-mix-pickers{display:grid;gap:var(--sp-4)}
.factory-mix-btn{min-height:52px;font-size:var(--fs-lg);justify-self:start}
.factory-mix-result{font-weight:800;font-size:var(--fs-lg);color:var(--navy);background:var(--w-factory-bg);border:2px solid rgba(232,93,4,.3);border-radius:var(--radius);padding:var(--sp-3) var(--sp-4);margin:0}
.factory-vat-wrap{text-align:center}
.factory-vat-svg{width:100%;max-width:260px;height:auto}
.factory-vat-svg #mix-liquid{transition:fill .45s var(--ease)}
.factory-vat-svg .factory-drops{opacity:0}
body:not(.hh-calm) .factory-vat-svg.splashing .factory-drops{animation:factorySplash .9s ease-out}
@keyframes factorySplash{0%{opacity:0}25%{opacity:.95}100%{opacity:0}}

/* Invention Machine */
.factory-slots{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin:var(--sp-4) 0}
.factory-slot{flex:1 1 150px;min-height:88px;background:var(--w-factory-bg);border:2.5px solid rgba(232,93,4,.35);border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-1);padding:var(--sp-3);text-align:center}
.factory-slot-label{font-size:var(--fs-sm);font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--w-factory)}
.factory-slot strong{font-family:var(--font-display);font-size:var(--fs-lg);color:var(--navy)}
.factory-invent-btn{min-height:52px;font-size:var(--fs-lg)}
.factory-invent-btn:disabled{opacity:.55;cursor:wait}
.factory-invent-result{font-family:var(--font-display);font-weight:700;font-size:var(--fs-xl);color:var(--navy);margin:var(--sp-4) 0 0}

@media (max-width:720px){
  .factory-studio{grid-template-columns:1fr}
  .factory-mix-layout{grid-template-columns:1fr}
  .factory-preview-wrap{order:-1}
  .factory-vat-svg{margin:0 auto}
  .factory-mix-btn{justify-self:stretch}
}

/* ═══════════════ ADVENTURE ISLAND ═══════════════
   Fragment — coordinator merges into exhibit.css.
   All selectors island-scoped. Accent: #bc6c25.
   Firefox rule honoured: no transform animation on inner SVG shapes;
   feedback is opacity/colour, transforms only on whole top-level
   groups with transform-box:fill-box. */

/* ── Scene ambience (whole-group transforms only) ── */
.isl-cloud{transform-box:fill-box}
body:not(.hh-calm) .isl-cloud{animation:islCloudDrift 11s ease-in-out infinite}
@keyframes islCloudDrift{0%,100%{transform:translateX(0)}50%{transform:translateX(14px)}}
body:not(.hh-calm) .isl-waves{animation:islWaveFade 5s ease-in-out infinite}
@keyframes islWaveFade{0%,100%{opacity:.35}50%{opacity:.6}}
#bottle{transform-box:fill-box;transform-origin:center}
body:not(.hh-calm) #bottle{animation:islBob 3.6s ease-in-out infinite}
@keyframes islBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.isl-waterfall{animation:islWaterFade 3.2s ease-in-out infinite}
@keyframes islWaterFade{0%,100%{opacity:.75}50%{opacity:1}}
body.hh-calm .isl-waterfall{animation:none}

/* Solved-clue zones: sparkle + warm glow (opacity/filter only) */
.isl-sparkles{opacity:0;transition:opacity .5s var(--ease)}
.clue-solved .isl-sparkles{opacity:1}
#island-stage .clue-solved{filter:drop-shadow(0 0 12px rgba(255,201,60,.85))}
body.hh-calm .isl-sparkles{transition-duration:.01s}

/* Cave mouth states (driven by classes on #island-stage) */
#island-stage .cave-door{transition:opacity .8s var(--ease)}
#island-stage.cave-revealed .cave-door{opacity:.55}
#island-stage.cave-open .cave-door{opacity:1}
#island-stage .cave-glow{transition:opacity 1s var(--ease)}
#island-stage.cave-open .cave-glow{opacity:.75}
#island-stage.cave-revealed .cave-crack{stroke:#17100b;stroke-width:5}
body.hh-calm #island-stage .cave-door,body.hh-calm #island-stage .cave-glow{transition-duration:.01s}

/* Ship's wheel spin — whole group, transform-box:fill-box (allowed pattern) */
#ship-wheel .isl-wheel-rim{transform-box:fill-box;transform-origin:center}
#ship-wheel.wheel-spin .isl-wheel-rim{animation:islWheelSpin 1.15s var(--ease)}
@keyframes islWheelSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
body.hh-calm #ship-wheel.wheel-spin .isl-wheel-rim{animation:none;transform:rotate(45deg)}

/* Cannon smoke puff — opacity only */
#cannon-smoke{transition:opacity .3s var(--ease)}
body:not(.hh-calm) #cannon-smoke.puff{animation:islPuff .95s ease-out}
@keyframes islPuff{0%{opacity:0}18%{opacity:.95}100%{opacity:0}}
body.hh-calm #cannon-smoke.puff{opacity:.85}

/* Polly's speech bubble */
#polly-bubble{opacity:0;transition:opacity .35s var(--ease);pointer-events:none}
#polly-bubble.show{opacity:1}
body.hh-calm #polly-bubble{transition-duration:.01s}

/* Seashells */
#island-stage .shell{transition:filter var(--dur) var(--ease)}
#island-stage .shell.found{filter:drop-shadow(0 0 10px rgba(255,201,60,.95))}
#island-stage .shell .shell-shine{transition:opacity .4s var(--ease)}
#island-stage .shell.found .shell-shine{opacity:1}

/* ── Treasure map panel (parchment) ── */
.isl-panel{
  background:
    radial-gradient(circle at 18% 22%, rgba(188,108,37,.10) 0 60px, transparent 61px),
    radial-gradient(circle at 84% 78%, rgba(188,108,37,.08) 0 80px, transparent 81px),
    linear-gradient(160deg,#fdf3d8,#fbecc4);
  border:3px dashed #bc6c25;
  box-shadow:var(--shadow);
}
.isl-panel .kicker{color:#96520f}
.isl-panel h2{font-family:var(--font-display);color:#7a4a12}
.isl-map{display:block;width:100%;height:auto;background:#a8e6e0;border:2.5px solid #dda15e;border-radius:var(--radius);margin:var(--sp-4) 0}
.isl-map-seg{opacity:.15;transition:opacity .7s var(--ease)}
.isl-map-seg.drawn{opacity:1}
body.hh-calm .isl-map-seg{transition-duration:.01s}
.isl-map-marker text{pointer-events:none}
.isl-map-marker.done > circle:not(.isl-map-halo){fill:#ffc93c}
.isl-map-marker.current .isl-map-halo{opacity:.9}
body:not(.hh-calm) .isl-map-marker.current .isl-map-halo{animation:islHaloPulse 1.8s ease-in-out infinite}
@keyframes islHaloPulse{0%,100%{opacity:.25}50%{opacity:.95}}
.isl-map-x{transition:opacity .6s var(--ease)}
.isl-map-x.show{opacity:1}

/* Clue card */
.isl-clue-card{background:#fffaf0;border:2.5px solid #dda15e;border-radius:var(--radius-lg);padding:var(--sp-4) var(--sp-5);box-shadow:var(--shadow-sm)}
.isl-clue-progress{font-family:var(--font-display);font-weight:800;font-size:var(--fs-sm);letter-spacing:.08em;text-transform:uppercase;color:#bc6c25;margin:0 0 var(--sp-1)}
.isl-clue-text{font-size:var(--fs-lg);font-weight:700;color:var(--navy);margin:0 0 var(--sp-3)}
.isl-clue-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.isl-clue-actions .btn{min-height:44px}
.isl-clue-actions [hidden]{display:none!important}
.isl-shell-count{font-weight:800;color:#7a4a12;margin:var(--sp-3) 0 0}
.isl-skip-row{margin:var(--sp-2) 0 0}
.isl-skip{background:none;border:none;padding:var(--sp-2);min-height:44px;font-family:var(--font-body);font-weight:800;font-size:var(--fs-sm);color:#96520f;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.isl-skip[hidden]{display:none!important}

/* ── Secret Cave overlay ── */
.cave-overlay{position:fixed;inset:0;background:rgba(23,14,6,.86);display:flex;align-items:center;justify-content:center;z-index:290;padding:var(--sp-4);opacity:0;transition:opacity var(--dur) var(--ease)}
.cave-overlay[hidden]{display:none!important}
.cave-overlay.show{opacity:1}
.cave-card{background:linear-gradient(170deg,#2e2115,#1d1409);border:3px solid #7a5a2b;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);max-width:760px;width:100%;max-height:92vh;overflow:auto;padding:var(--sp-5);color:#fdf0d5;transform:scale(.96);transition:transform var(--dur) var(--ease-bounce)}
.cave-overlay.show .cave-card{transform:scale(1)}
body.hh-calm .cave-overlay,body.hh-calm .cave-card{transition-duration:.01s}
.cave-card h2{color:#ffc93c;margin-bottom:var(--sp-1)}
.cave-sub{color:#e8d9b8;font-weight:600;margin-top:0}
.cave-stage{display:block;width:100%;height:auto;border-radius:var(--radius)}
.cave-back{background:transparent;color:#fdf0d5;border-color:rgba(253,240,213,.6)}
.cave-back:hover{border-color:#ffc93c;color:#ffc93c}
.cave-message{margin-top:var(--sp-4);color:var(--ink)}
.cave-message h3{color:var(--navy)}
.cave-message p{color:var(--ink)}

/* Glow-worms: gentle opacity twinkle only */
body:not(.hh-calm) .cave-worms circle{animation:islWorm 3.4s ease-in-out infinite}
body:not(.hh-calm) .cave-worms circle:nth-child(2n){animation-delay:-1.2s}
body:not(.hh-calm) .cave-worms circle:nth-child(3n){animation-delay:-2.3s}
@keyframes islWorm{0%,100%{opacity:.45}50%{opacity:1}}

/* Cave treasure chest (ocean lid pattern, island-scoped) */
#isl-chest .isl-chest-lid{transform-box:fill-box;transform-origin:bottom left;transition:transform .8s var(--ease-bounce)}
#isl-chest.chest-open .isl-chest-lid{transform:rotate(-34deg) translateY(-4px)}
#isl-chest.chest-open .isl-chest-glow{opacity:.55!important;transition:opacity .8s}
#isl-chest.chest-open .isl-chest-coins{opacity:1!important;transition:opacity .8s .2s}
body.hh-calm #isl-chest .isl-chest-lid{transition-duration:.01s}

@media (max-width:560px){
  .isl-panel{padding:var(--sp-4)}
  .isl-clue-card{padding:var(--sp-3) var(--sp-4)}
  .isl-clue-actions .btn{flex:1 1 100%;justify-content:center}
  .cave-card{padding:var(--sp-4)}
}

/* ═══════════════ LITTLE BUILDERS CITY ═══════════════ */
/* World CSS for Little Builders City only — merged into exhibit.css by coordinator.
   All selectors are builders-scoped (builders- classes / scene ids under #builders-stage). */

.builders-stage-wrap{position:relative}

/* Crane hook — whole top-level group only (Firefox inner-transform rule).
   The hook line is drawn long, with its top hidden behind the jib, so
   lowering the group never opens a gap at the jib. */
#builders-stage #crane-hook{transform-box:fill-box;transition:transform .95s var(--ease)}
#builders-stage-wrap.crew-working #crane-hook{transform:translateY(112px)}
body.hh-calm #builders-stage #crane-hook{transition:none}

/* Workers — bounce the whole figure groups only */
#builders-stage .worker{transform-box:fill-box;transform-origin:bottom center}
body:not(.hh-calm) #builders-stage-wrap.crew-working .worker{animation:buildersWorkerBounce .48s ease-in-out infinite alternate}
@keyframes buildersWorkerBounce{from{transform:translateY(0)}to{transform:translateY(-10px)}}

/* Grand opening banner */
#builders-stage #grand-banner{opacity:0;transition:opacity .5s var(--ease)}
#builders-stage-wrap.show-banner #grand-banner{opacity:1}
body.hh-calm #builders-stage #grand-banner{transition:none}

/* Freddie the Fire Truck — whole-group drive (space rocket view-box pattern) */
#builders-stage #freddie{transform-box:view-box;transition:transform 2.6s ease-in-out;cursor:pointer}
#builders-stage-wrap.freddie-go #freddie{transform:translateX(340px)}
body.hh-calm #builders-stage #freddie{transition:none}
/* Freddie's lights — gentle opacity pulse, only while driving, never a strobe */
#builders-stage .freddie-light{opacity:.85}
body:not(.hh-calm) #builders-stage-wrap.freddie-go .freddie-light{animation:buildersFreddiePulse .7s ease-in-out infinite alternate}
@keyframes buildersFreddiePulse{from{opacity:.35}to{opacity:1}}

/* Cars — whole-group glide when the light is green */
#builders-stage .city-car{transform-box:view-box;transition:transform 1.2s var(--ease)}
body:not(.hh-calm) #builders-stage .city-car.car-go{transform:translateX(120px)}
body.hh-calm #builders-stage .city-car{transition:none}

/* Traffic light */
#builders-stage #traffic-light{cursor:pointer}
#builders-stage .tl-light{transition:fill .3s var(--ease),opacity .3s var(--ease)}

/* Helper buildings + plot hotspots */
#builders-stage #helper-bakery,#builders-stage #helper-clinic,#builders-stage #helper-school{cursor:pointer}

/* Gentle cloud drift — whole groups only */
#builders-stage .builders-clouds{transform-box:view-box}
body:not(.hh-calm) #builders-stage .builders-clouds{animation:buildersCloudDrift 12s ease-in-out infinite alternate}
@keyframes buildersCloudDrift{from{transform:translateX(0)}to{transform:translateX(14px)}}

/* ── Build-a-Building Studio panel ── */
.builders-studio-grid{display:grid;grid-template-columns:1fr 264px;gap:var(--sp-5);align-items:start;margin-top:var(--sp-4)}
.builders-section-label{font-family:var(--font-display);font-weight:700;color:var(--navy);margin:var(--sp-4) 0 var(--sp-2)}
.builders-section-label:first-child{margin-top:0}
.builders-choice-row{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.builders-opt{min-height:48px;padding:var(--sp-2) var(--sp-4);border-radius:var(--radius-full);border:3px solid rgba(15,35,64,.15);background:#fff;font-family:var(--font-display);font-weight:700;font-size:var(--fs-base);color:var(--navy);cursor:pointer;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.builders-opt:hover{border-color:var(--w-builders-2)}
.builders-opt.sel{border-color:var(--w-builders);background:var(--w-builders-bg)}
.builders-swatch{width:52px;height:52px;min-width:52px;min-height:52px;border-radius:50%;border:4px solid #fff;box-shadow:var(--shadow-sm);cursor:pointer;padding:0}
.builders-swatch.sel{outline:4px solid var(--navy);outline-offset:2px}
.builders-add-btn{min-height:52px}
.builders-floor-list{list-style:none;margin:var(--sp-3) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.builders-floor-chip{display:flex;align-items:center;gap:var(--sp-3);background:var(--cream);border:2px solid rgba(15,35,64,.08);border-radius:var(--radius);padding:var(--sp-2) var(--sp-3);min-height:52px;font-weight:800;color:var(--navy)}
.builders-floor-chip span:nth-child(2){flex:1}
.builders-chip-swatch{flex:0 0 22px;width:22px;height:22px;border-radius:6px;border:2px solid rgba(15,35,64,.2)}
.builders-floor-remove{min-width:44px;min-height:44px;border-radius:var(--radius-full);border:2px solid rgba(15,35,64,.2);background:#fff;color:var(--w-builders);font-weight:800;font-size:var(--fs-base);cursor:pointer;padding:0}
.builders-floor-empty{color:var(--ink-soft);font-weight:700;margin:var(--sp-2) 0 0}
.builders-preview-wrap{background:linear-gradient(180deg,#eaf7ff,#fdf3e3);border:2px solid rgba(15,35,64,.08);border-radius:var(--radius-lg);padding:var(--sp-3);text-align:center}
.builders-preview-wrap p{margin:0 0 var(--sp-2);font-family:var(--font-display);font-weight:700;color:var(--navy)}
#builders-preview{width:100%;max-width:240px;height:auto;display:block;margin:0 auto}
.builders-status{font-weight:800;color:var(--w-builders);font-size:var(--fs-lg);margin:var(--sp-4) 0 var(--sp-3)}
.builders-crew-btn{font-size:var(--fs-xl);min-height:60px;width:100%}
.builders-crew-btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important}
.builders-city-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;margin-top:var(--sp-4)}
.builders-city-count{font-weight:800;color:var(--navy);font-size:var(--fs-lg);margin:0;flex:1 1 200px}
@media (max-width:640px){
  .builders-studio-grid{grid-template-columns:1fr}
  .builders-preview-wrap{order:-1}
}