/* Harbor House — Imagination Factory · Phase 3 (premium Creature Studio)
   World styles only. The stage is the painted workshop plate
   (factory-scene.webp): the creature SVG stands on its round platform,
   Professor Ember performs in a feathered frame at the right, and a DOM
   Big Lever stands over the brass machine. Controls live on the
   workbench BELOW the stage — never over the creature. */

/* ── Panel + checklist ──────────────────────────── */
.factory-panel{border-top:6px solid var(--w-factory)}
.studio-progress{font-family:var(--font-display);font-weight:800;font-size:var(--fs-lg);color:var(--navy);background:var(--w-factory-bg);border:2px solid rgba(232,93,4,.35);border-radius:var(--radius);padding:var(--sp-3) var(--sp-4);margin:var(--sp-3) 0 var(--sp-4)}

/* ── Premium workshop stage ─────────────────────── */
.factory-stage{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:3/2;background:#2a1a08;box-shadow:var(--shadow)}
.factory-scene-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%;display:block}
#confetti-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:8}

/* Creature on the painted platform (centre-front of the plate) */
.creature-stage{position:absolute;left:41%;bottom:1.5%;width:37%;transform:translateX(-50%);z-index:4;text-align:center}
.stage-svg{display:block;width:100%;height:auto}
.factory-preview-name{display:inline-block;position:relative;margin-top:-16px;background:rgba(15,35,64,.8);color:#fff;font-weight:800;font-size:.85rem;padding:4px 14px;border-radius:999px;white-space:nowrap}
#stage-creature .creature-root{transform-box:fill-box;transform-origin:50% 96%}
#stage-creature .cfg-acc{transform-box:fill-box;transform-origin:center}
.creature-stage.react #stage-creature .creature-root{animation:creatureSquash .38s ease}
@keyframes creatureSquash{0%{transform:scale(1,1)}35%{transform:scale(1.07,.9)}70%{transform:scale(.97,1.04)}100%{transform:scale(1,1)}}
/* alive idle: a gentle happy bob */
body:not(.hh-calm) .creature-stage.is-alive:not(.dancing) #stage-creature .creature-root{animation:factoryIdle 4.5s ease-in-out infinite}
@keyframes factoryIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
/* THE dance: bounce + full spin + accessory physics (one pass, 2.9s) */
body:not(.hh-calm) .creature-stage.dancing #stage-creature .creature-root{animation:creatureAlive 2.9s ease-in-out}
@keyframes creatureAlive{
  0%{transform:translateY(0) rotate(0deg)}
  14%{transform:translateY(-20px) rotate(-5deg)}
  28%{transform:translateY(0) rotate(0deg)}
  42%{transform:translateY(-20px) rotate(5deg)}
  54%{transform:translateY(0) rotate(0deg)}
  74%{transform:translateY(-8px) rotate(360deg)}
  88%{transform:translateY(-14px) rotate(360deg)}
  100%{transform:translateY(0) rotate(360deg)}
}
body:not(.hh-calm) .creature-stage.dancing .acc-hat{animation:hatBounce .5s ease-in-out infinite alternate}
@keyframes hatBounce{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(-7px) rotate(5deg)}}
body:not(.hh-calm) .creature-stage.dancing .acc-antenna{animation:antennaWobble .38s ease-in-out infinite alternate}
@keyframes antennaWobble{from{transform:rotate(-11deg)}to{transform:rotate(11deg)}}
.acc-antenna{transform-origin:50% 92%!important}
body:not(.hh-calm) .creature-stage.dancing .acc-wings{animation:wingFlap .32s ease-in-out infinite alternate}
@keyframes wingFlap{from{transform:scaleY(.82) rotate(-3deg)}to{transform:scaleY(1.08) rotate(3deg)}}
.acc-wings{transform-origin:50% 30%!important}
body:not(.hh-calm) .creature-stage.dancing .acc-bow{animation:bowPulse .5s ease-in-out infinite alternate}
@keyframes bowPulse{from{transform:scale(1)}to{transform:scale(1.14)}}
/* calm dance = gentle sway only */
body.hh-calm .creature-stage.dancing #stage-creature .creature-root{animation:creatureGentle 1.3s ease-in-out infinite alternate}
@keyframes creatureGentle{from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-6px) rotate(1deg)}}
body.hh-calm .creature-stage.dancing .cfg-acc{animation:none}

/* ── Professor Ember — performance frame ────────── */
.dragon-wrap{position:absolute;top:1.5%;right:1.5%;width:24.5%;z-index:5;pointer-events:none}
.dragon-frame{
  position:relative;aspect-ratio:5/6;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 97%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 8%,#000 96%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 97%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 8%,#000 96%,transparent 100%);
          mask-composite:intersect;
}
.dragon-frame img,.dragon-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 16%;display:block;opacity:0;transition:opacity .25s ease}
.dragon-frame .on{opacity:1}
.dragon-name{margin:2px 0 0;text-align:center;font-family:var(--font-display);font-weight:800;font-size:.8rem;color:#ffe9b8;text-shadow:0 1px 6px rgba(20,10,0,.85);background:rgba(24,12,0,.45);border-radius:999px;padding:3px 8px}
.dragon-bubble{
  position:absolute;z-index:6;right:104%;top:4%;width:212px;
  background:#fff;border:3px solid var(--sun);border-radius:16px;padding:.5rem .75rem;
  box-shadow:0 14px 34px rgba(16,32,18,.35);opacity:0;visibility:hidden;transform:translateY(5px);
  transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s;
}
.dragon-bubble.show{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease,transform .3s ease}
.dragon-bubble p{margin:0;font-weight:800;font-size:.9rem;line-height:1.32;color:var(--navy)}
.dragon-bubble::after{content:"";position:absolute;right:-12px;top:38px;border:6px solid transparent;border-left:9px solid var(--sun)}

/* ── THE BIG LEVER ──────────────────────────────── */
.big-lever{position:absolute;right:5%;bottom:21%;width:92px;z-index:6;text-align:center;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent}
.big-lever:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:14px}
.lever-track{position:relative;width:38px;height:104px;margin:0 auto;background:linear-gradient(180deg,#8a6420,#5f430e);border:3px solid #3a2703;border-radius:21px;box-shadow:inset 0 3px 8px rgba(0,0,0,.55),0 8px 18px rgba(20,10,0,.45)}
.lever-handle{position:absolute;left:50%;top:5px;transform:translate(-50%,0);transition:transform .35s cubic-bezier(.2,1.4,.4,1)}
.big-lever.pulled .lever-handle{transform:translate(-50%,56px)}
.lever-knob{display:block;width:34px;height:34px;margin:0 auto;border-radius:50%;background:radial-gradient(circle at 35% 32%,#ff9d8a,#e63946 62%,#a80f1d);border:3px solid #6d0a14;box-shadow:0 4px 10px rgba(20,5,0,.5)}
.lever-handle::after{content:"";display:block;width:10px;height:38px;margin:0 auto;background:linear-gradient(90deg,#a87c2a,#7a5510);border-radius:5px;border:2px solid #4a3205}
.lever-label{margin:7px 0 0;font-family:var(--font-display);font-weight:800;font-size:.82rem;line-height:1.15;letter-spacing:.06em;color:#ffe9b8;text-shadow:0 1px 5px rgba(20,10,0,.9);background:rgba(24,12,0,.5);border-radius:10px;padding:4px 2px}
.lever-hint{margin:4px 0 0;font-weight:800;font-size:.8rem;color:#fff;text-shadow:0 1px 5px rgba(20,10,0,.9)}
body:not(.hh-calm) .lever-hint{animation:leverBob 1.6s ease-in-out infinite}
@keyframes leverBob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ── Workbench controls ─────────────────────────── */
.factory-controls{display:grid;gap:var(--sp-4);margin-top:var(--sp-5)}
.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:52px;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);align-items:center}
.factory-swatch{width:52px;height:52px;min-width:52px;min-height:52px;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}
.mixed-swatches{display:contents}
.mixed-swatch{border-style:dashed}
.factory-name-input{width:100%;min-height:52px;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);font-weight:700;color:var(--ink-soft);margin:var(--sp-2) 0 0}
.factory-bring{width:100%;margin-top:var(--sp-5);min-height:62px;border-radius:var(--radius-full);border:3px solid #b96a00;background:linear-gradient(180deg,#ffd873,#ffc93c);color:#4a3205;font-family:var(--font-display);font-weight:800;font-size:var(--fs-xl);cursor:pointer;box-shadow:var(--shadow-sm)}
.factory-bring:hover{filter:brightness(1.05)}
.factory-bring:disabled{opacity:.55;cursor:wait}
.factory-status{font-weight:800;color:var(--w-factory);margin:var(--sp-3) 0 0}
.alive-note{font-family:var(--font-display);font-weight:800;font-size:var(--fs-lg);color:var(--w-factory);margin:var(--sp-3) 0 var(--sp-1)}
.alive-btns{margin:0;display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.alive-actions{padding-bottom:var(--sp-1)}

/* ── Colour Vat ─────────────────────────────────── */
.vat-block{margin-top:var(--sp-6);border-top:3px dashed rgba(232,93,4,.4);padding-top:var(--sp-4)}
.vat-title{font-family:var(--font-display);font-weight:800;color:var(--navy);margin:0 0 var(--sp-1)}
.vat-how{font-weight:700;color:var(--ink);margin:0 0 var(--sp-3);max-width:62ch}
.vat-layout{display:flex;gap:var(--sp-4);align-items:stretch;flex-wrap:wrap}
.vat-drops{display:flex;gap:var(--sp-3);align-items:flex-start}
.vat-drop{min-width:94px;min-height:72px;padding:var(--sp-2);border-radius:18px;border:3px solid rgba(15,35,64,.18);background:#fff;font-family:var(--font-display);font-weight:800;font-size:var(--fs-base);color:var(--navy);cursor:grab;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;touch-action:none}
.vat-drop span{font-size:1.7rem;line-height:1}
.vat-drop:hover{border-color:var(--w-factory-2)}
.vat-drop.in-vat{border-color:var(--w-factory);background:var(--w-factory-bg);box-shadow:inset 0 0 0 2px var(--w-factory)}
.vat-drop.dragging{opacity:.35}
.drop-ghost{position:fixed;width:46px;height:46px;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:999;border:3px solid #fff;box-shadow:0 10px 22px rgba(15,35,64,.4)}
.vat-visual{flex:1 1 230px;max-width:330px;background:linear-gradient(180deg,#fff8ec,#ffe9c9);border:3px solid rgba(232,93,4,.4);border-radius:18px;padding:var(--sp-3);text-align:center}
.vat-visual.drop-hover{outline:4px solid var(--sun);outline-offset:2px}
.vat-liquid{height:72px;border-radius:14px 14px 42px 42px;border:3px solid rgba(15,35,64,.25);background:linear-gradient(90deg,rgba(230,57,70,.4),rgba(255,201,60,.4),rgba(87,167,115,.4),rgba(67,97,238,.4));transition:background .4s var(--ease)}
.vat-visual.stirring .vat-liquid{animation:vatStir .9s ease-in-out}
@keyframes vatStir{0%{transform:rotate(0)}25%{transform:rotate(-2.2deg) scale(1.03)}60%{transform:rotate(2.2deg)}100%{transform:rotate(0)}}
body.hh-calm .vat-visual.stirring .vat-liquid{animation:none}
.vat-slots{display:flex;gap:10px;justify-content:center;margin-top:10px}
.vat-slot{width:44px;height:44px;border-radius:50%;border:3px dashed rgba(15,35,64,.35);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--ink-soft);background:#fff}
.vat-slot.filled{border-style:solid;border-color:rgba(15,35,64,.35);box-shadow:inset 0 -6px 10px rgba(0,0,0,.18)}
.vat-name{font-family:var(--font-display);font-weight:800;color:var(--navy);margin:var(--sp-2) 0 0}
.vat-status{font-weight:800;color:var(--w-factory);margin:var(--sp-3) 0 0}
.color-log-wrap{margin-top:var(--sp-3)}
.color-log-title{font-family:var(--font-display);font-size:var(--fs-lg);color:var(--navy);margin:0 0 var(--sp-2)}
.color-log{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.color-log-empty{font-weight:700;color:var(--ink-soft);margin:0}
.color-chip{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;padding:var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-1);border-radius:999px;border:2.5px solid rgba(15,35,64,.2);background:#fff;font-weight:800;font-size:var(--fs-sm);color:var(--navy)}
.color-chip .chip-dot{width:30px;height:30px;border-radius:50%;border:2px solid rgba(15,35,64,.25);flex:0 0 30px}

/* ── Mobile ─────────────────────────────────────── */
@media (max-width:640px){
  /* P3-6 BIG GAMES: on a portrait phone the workshop stage is the
     game — ~72% of the viewport height (Ocean standard:
     min(72svh, 660px)) instead of a 4/4.4 plate (~40%). The
     creature, Ember and the Big Lever scale up inside it; Ember
     and the lever hug the right edge, the creature owns the
     platform at centre-left, and no frame covers the creation. */
  .factory-stage{aspect-ratio:auto;height:min(72vh,660px);height:min(72svh,660px)}
  .factory-scene-img{object-position:46% 58%}
  .creature-stage{width:80%;left:40%;bottom:2.5%}
  .factory-preview-name{font-size:.95rem;padding:6px 16px;margin-top:-12px}
  .dragon-wrap{width:36%;top:1.5%;right:2%;z-index:7}
  /* bubble parks top-LEFT on small screens so it never covers Ember */
  .dragon-bubble{width:176px;right:auto;left:-128%;top:3%}
  .dragon-bubble p{font-size:.8rem;line-height:1.3}
  .dragon-bubble::after{top:30px}
  .dragon-name{font-size:.64rem;white-space:normal;line-height:1.2}
  /* THE BIG LEVER is the main event: a 94px-wide, edge-hugging
     target with a 46px knob (was 70px wide / 34px knob) */
  .big-lever{width:94px;right:2.5%;bottom:3.5%;top:auto}
  .lever-track{width:44px;height:126px;border-radius:24px}
  .lever-knob{width:46px;height:46px}
  .lever-handle::after{width:12px;height:52px}
  .big-lever.pulled .lever-handle{transform:translate(-50%,66px)}
  .lever-label{font-size:.8rem;padding:5px 3px}
  .lever-hint{font-size:.85rem}
  .vat-drops{flex-wrap:wrap}
  .vat-drop{min-width:96px;min-height:76px}
  .vat-visual{max-width:none}
  .vat-liquid{height:88px}
  .vat-slot{width:48px;height:48px}
}

@media (prefers-reduced-motion:reduce){
  .creature-stage.dancing #stage-creature .creature-root,
  .creature-stage.react #stage-creature .creature-root,
  .creature-stage.is-alive #stage-creature .creature-root,
  .acc-hat,.acc-antenna,.acc-wings,.acc-bow,.lever-hint{animation:none!important}
}