/* Harbor House — Little Builders City (Phase 3 premium)
   Crane-delivery blueprint building. Scene = painted plate +
   HTML/SVG play layer; state (placed pieces) is the only source
   of truth — visuals are rendered from it, never from pixels. */

/* ── Stage ─────────────────────────────────────── */
.b3-stage{
  position:relative;overflow:hidden;border-radius:var(--radius-xl);
  box-shadow:var(--shadow);margin-top:var(--sp-4);
  aspect-ratio:3/2;background:#a9d6e5;
  touch-action:none;
}
.b3-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.b3-stage .progress-dock{
  position:absolute;left:50%;transform:translateX(-50%);bottom:10px;z-index:9;
  width:min(680px,calc(100% - 16px));justify-content:center;pointer-events:none;
}
.b3-stage .progress-dock .pd-text{white-space:normal;text-align:center}

/* ── Blueprint card (left) ─────────────────────── */
.blueprint-card{
  position:absolute;z-index:5;left:2.5%;top:3.5%;width:min(25%,248px);
  background:linear-gradient(165deg,#fdf6df,#f7ead0);
  border:3px solid #b0894f;border-radius:14px;
  box-shadow:0 12px 26px rgba(30,20,4,.35);
  padding:10px 12px 12px;text-align:center;
}
.bp-kicker{margin:0;font-family:var(--font-display);font-weight:800;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#96520f}
.bp-name{margin:2px 0 4px;font-size:clamp(.95rem,1.7vw,1.2rem);line-height:1.15;color:var(--navy)}
.bp-art{display:flex;justify-content:center;align-items:flex-end;min-height:86px}
.bp-art svg{height:104px;width:auto;max-width:100%;display:block}
.bp-blueprint{filter:drop-shadow(0 3px 5px rgba(30,20,4,.25))}
.bp-progress{margin:6px 0 4px;font-family:var(--font-display);font-weight:800;font-size:.92rem;color:var(--navy)}
.bp-pips{display:flex;gap:5px;justify-content:center;flex-wrap:wrap}
.bp-pip{width:14px;height:14px;border-radius:50%;border:2.5px solid #b0894f;background:#fff}
.bp-pip.done{background:#ffc93c;border-color:#d18f1d}
.bp-pip.next{border-color:#dc2f02;background:#ffe3d6}

/* ── Bruno & Bella frame (right) ───────────────── */
.beaver-wrap{position:absolute;z-index:5;right:2%;bottom:7.5%;width:min(30%,330px);pointer-events:none}
.beaver-frame{
  position:relative;aspect-ratio:3/2;border-radius:18px;overflow:hidden;
  box-shadow:0 14px 30px rgba(20,16,4,.4);border:3px solid rgba(255,248,234,.85);
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 97%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 7%,#000 97%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 97%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 7%,#000 97%,transparent 100%);
          mask-composite:intersect;
}
.beaver-frame img,.beaver-frame video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .25s ease;
}
.beaver-frame .on{opacity:1}
#beaver-still{z-index:1}
#beaver-idle{z-index:2}
#beaver-react{z-index:3}
.beaver-wrap.celebrating .beaver-frame{animation:beaverHop .6s ease-in-out 3}
@keyframes beaverHop{0%,100%{transform:translateY(0)}35%{transform:translateY(-8px)}60%{transform:translateY(0)}80%{transform:translateY(-4px)}}
body.hh-calm .beaver-wrap.celebrating .beaver-frame{animation:none}
.beaver-bubble{
  position:absolute;z-index:6;left:-6%;top:-16%;max-width:230px;
  background:#fff;border:3px solid #ffc93c;border-radius:16px;padding:.5rem .75rem;
  box-shadow:0 12px 26px rgba(20,16,4,.35);
  opacity:0;visibility:hidden;transform:translateY(5px);
  transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s;
}
.beaver-bubble.show{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease,transform .3s ease}
.beaver-bubble p{margin:0;font-weight:800;font-size:.9rem;line-height:1.3;color:var(--navy)}
.beaver-bubble::after{content:"";position:absolute;right:36px;bottom:-12px;border:6px solid transparent;border-top:9px solid #ffc93c}
.beaver-caption{
  margin:7px 0 0;text-align:center;font-family:var(--font-display);font-weight:800;font-size:.85rem;color:#fff;
  text-shadow:0 2px 8px rgba(10,20,10,.75),0 1px 2px rgba(10,20,10,.9);
}

/* ── Build zone (center-foreground foundation plot) ── */
.build-zone{
  position:absolute;z-index:4;left:50%;bottom:5.5%;
  transform:translateX(-50%);width:min(31%,330px);
  cursor:pointer;outline:none;border-radius:12px;
}
.build-zone:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.build-zone.armed{filter:drop-shadow(0 0 14px rgba(255,201,60,.95))}
#build-svg{display:block;width:100%;height:auto;overflow:visible}
.slot-glow{animation:slotPulse 1.5s ease-in-out infinite}
@keyframes slotPulse{0%,100%{opacity:.5}50%{opacity:1}}
body.hh-calm .slot-glow{animation:none;opacity:.85}
.piece{transform-box:fill-box;transform-origin:50% 100%}
.piece-new{animation:pieceClunk .55s cubic-bezier(.2,1.6,.4,1)}
@keyframes pieceClunk{0%{transform:translateY(-16px) scale(1.02)}55%{transform:translateY(2px) scaleY(.97)}100%{transform:translateY(0) scale(1)}}
body.hh-calm .piece-new{animation:none}
.plot-sparkle{animation:sparkleFade 1.4s ease-out forwards}
@keyframes sparkleFade{0%{opacity:0;transform:scale(.4)}30%{opacity:1}100%{opacity:0;transform:scale(1.25)}}
body.hh-calm .plot-sparkle{display:none}

/* ── Hanging crane piece ───────────────────────── */
.hanging-wrap{
  position:absolute;z-index:7;width:min(21%,215px);
  will-change:left,top;
}
.hanging-wrap.returning{transition:left .7s cubic-bezier(.3,1.3,.5,1),top .7s cubic-bezier(.3,1.3,.5,1)}
body.hh-calm .hanging-wrap.returning{transition-duration:1.4s}
.hook-cable{
  width:4px;height:34px;margin:0 auto;background:#0f2340;border-radius:2px;position:relative;
}
.hook-cable::after{
  content:"";position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);
  width:16px;height:12px;border-radius:4px;background:#f0a500;border:2px solid #0f2340;
}
.hanging-piece{
  cursor:grab;touch-action:none;outline:none;border-radius:8px;
  filter:drop-shadow(0 10px 14px rgba(20,16,4,.35));
  transform-origin:50% 0%;
}
body:not(.hh-calm) .hanging-piece{animation:pieceSway 2.6s ease-in-out infinite alternate}
@keyframes pieceSway{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}}
.hanging-piece svg{display:block;width:100%;height:auto;overflow:visible}
.hanging-piece:active{cursor:grabbing}
.hanging-piece.dragging{animation:none;transform:scale(1.05);filter:drop-shadow(0 18px 22px rgba(20,16,4,.45))}
.hanging-piece.selected{animation:none;outline:4px solid #ffc93c;outline-offset:3px}
.hanging-piece:focus-visible{outline:4px solid var(--sun);outline-offset:3px}
.hang-hint{
  margin:4px 0 0;text-align:center;font-family:var(--font-display);font-weight:800;font-size:.85rem;color:#fff;
  text-shadow:0 2px 8px rgba(10,20,10,.8),0 1px 2px rgba(10,20,10,.9);pointer-events:none;
}
.hanging-wrap.done{display:none}

/* ── Completion panel ──────────────────────────── */
.build-complete{
  position:absolute;z-index:8;left:50%;top:12%;transform:translateX(-50%);
  background:#fffdf6;border:3px solid #ffc93c;border-radius:20px;
  box-shadow:0 20px 44px rgba(20,16,4,.45);padding:16px 22px 18px;text-align:center;
  width:min(340px,86%);
}
.build-complete[hidden]{display:none}
.bc-emoji{font-size:2rem;margin:0}
.bc-text{font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:var(--navy);margin:2px 0 12px;line-height:1.3}

/* ── Skyline strip ─────────────────────────────── */
.builders-panel{border-top:6px solid var(--w-builders)}
.skyline-strip{
  display:flex;gap:var(--sp-3);align-items:flex-end;flex-wrap:wrap;
  margin-top:var(--sp-4);padding:var(--sp-4) var(--sp-3) var(--sp-2);
  background:linear-gradient(180deg,#cdeffd 0%,#eaf7ff 55%,#fdf3e3 100%);
  border:2px solid rgba(15,35,64,.1);border-bottom:8px solid #40916c;border-radius:var(--radius-lg);
  min-height:132px;
}
.skyline-item{text-align:center;position:relative}
.skyline-item svg{height:104px;width:auto;max-width:130px;display:block;margin:0 auto}
.skyline-item figcaption{font-size:.75rem;font-weight:800;color:var(--navy);margin-top:2px}
.skyline-item .new-tag{
  position:absolute;top:-10px;right:2px;background:#ffc93c;color:#4a3205;
  font-family:var(--font-display);font-weight:800;font-size:.7rem;
  padding:2px 8px;border-radius:999px;border:2px solid #d18f1d;transform:rotate(8deg);
}
.skyline-item.is-new svg{animation:skyGlow 1.8s ease}
@keyframes skyGlow{0%{filter:drop-shadow(0 0 0 rgba(255,201,60,0))}35%{filter:drop-shadow(0 0 16px rgba(255,201,60,.95))}100%{filter:drop-shadow(0 0 0 rgba(255,201,60,0))}}
body.hh-calm .skyline-item.is-new svg{animation:none}
.skyline-empty{color:var(--ink-soft);font-weight:700}
.skyline-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;margin-top:var(--sp-4)}
.skyline-count{font-weight:800;color:var(--navy);font-size:var(--fs-lg);margin:0;flex:1 1 180px}
.btn-clear-city.confirming{background:#9d0208;color:#fff;border-color:#9d0208}
.clear-status{font-weight:800;color:var(--w-builders)}

/* ── Mobile (P3-6 BIG GAMES) ───────────────────── */
@media (max-width:640px){
  /* Portrait: the build scene is the whole game — ~72% of the
     viewport height (Ocean standard), not a 3/2 banner. The painted
     plate is 3/2, so cover-cropping a tall stage shifts it sideways:
     object-position 59% puts the painted foundation centre at
     stage x≈129 and the painted crane hook at x≈243 (of 358), which
     is exactly where the play layer below is anchored. */
  .b3-stage{aspect-ratio:auto;height:min(72vh,660px);height:min(72svh,660px);min-height:470px}
  .b3-backdrop{object-position:59% 50%}
  /* Blueprint hugs the top-left edge, compact like a HUD card */
  .blueprint-card{width:40%;left:2.5%;top:2%;padding:8px 9px 9px}
  .bp-name{font-size:.86rem}
  .bp-art{min-height:54px}
  .bp-art svg{height:60px}
  .bp-progress{font-size:.8rem}
  .bp-pip{width:11px;height:11px}
  /* Bruno & Bella hug the bottom-right edge, clear of the building */
  .beaver-wrap{width:25%;right:1.5%;bottom:15.5%}
  .beaver-bubble{width:152px;max-width:152px;left:-256px;top:-181px;padding:.4rem .6rem}
  .beaver-bubble::after{display:none}
  .beaver-bubble p{font-size:.76rem;line-height:1.25}
  .beaver-caption{font-size:.68rem;margin-top:5px}
  /* The building is hero-sized: 73% of the stage width, centred on
     the painted foundation (36.5%). At this scale a floor slot
     renders ≈44px tall, the base ≈71px. Its base sits on the slab,
     clear above the progress dock. */
  .build-zone{width:73%;left:36.5%;bottom:11%}
  .hanging-wrap{width:46%}
  /* Completion panel docks top-right so it never covers the
     finished building or its topper */
  .build-complete{left:auto;right:8px;top:8px;transform:none;width:190px;padding:12px 14px 14px}
  .bc-text{font-size:1rem}
  .b3-stage .progress-dock .pd-text{font-size:.78rem}
  .skyline-item svg{height:84px}
}
@media (prefers-reduced-motion:reduce){
  .slot-glow,.hanging-piece,.piece-new,.skyline-item.is-new svg{animation:none!important}
}