/* ---------------------------------------------------------------
   Brick Life — toy-box flat illustration
   Tokens
---------------------------------------------------------------- */
:root {
  --ink: #2b1c12;

  --wall-tile: #f0e3c6;
  --wall-tile-line: #dcc99f;
  --room-purple: #bd93da;
  --room-purple-deep: #9a5ec4;
  --room-purple-dark: #7c3fa8;
  --floor-tan: #ecc98d;
  --floor-stud: #dcb26e;

  --cream: #f6efdd;
  --orange: #f2921d;
  --pink: #e83c8e;
  --magenta: #d61f7c;
  --green: #2f9e44;
  --leaf: #46b02e;
  --lime: #a3c918;
  --blue: #1f6fd6;
  --denim: #1a56a8;
  --sky: #c4e6f5;
  --steel: #a9adb3;
  --steel-dark: #4a4e54;
  --brown: #7c4a21;
  --wood: #4a2f1d;

  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #d8b97f;
  font-family: "Baloo 2", "Comic Sans MS", ui-rounded, sans-serif;
}

#app {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
}

#stage-wrap {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

#stage-wrap svg {
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  display: block;
}

/* ---------------------------------------------------------------
   HUD
---------------------------------------------------------------- */
.hud {
  position: absolute;
  top: clamp(8px, 1.5vh, 18px);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  z-index: 5;
}

.hud-title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(1rem, 2.4vw, 1.6rem);
  color: #fff;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink), 0 4px 10px rgb(43 28 18 / 35%);
}

.hud-hint {
  margin: 2px 0 0;
  font-weight: 600;
  font-size: clamp(0.7rem, 1.4vw, 0.95rem);
  color: rgb(255 255 255 / 92%);
  background: rgb(43 28 18 / 45%);
  border-radius: 999px;
  padding: 2px 14px;
  display: inline-block;
  opacity: 1;
  transition: opacity 600ms ease;
}

.hud-hint.is-hidden { opacity: 0; }

/* ---------------------------------------------------------------
   Interactivity affordances
---------------------------------------------------------------- */
[data-drag], [data-tap] { cursor: grab; }
[data-tap]:not([data-drag]) { cursor: pointer; }
.is-dragging { cursor: grabbing; }

.draggable-item, .character {
  transition: filter var(--duration-fast) ease;
}

.is-dragging .drag-target,
.draggable-item.is-dragging,
.character.is-dragging {
  filter: drop-shadow(0 10px 8px rgb(43 28 18 / 30%)) brightness(1.05);
}

/* Snap-to-slot easing (positions are set via style.transform) */
.settling {
  transition: transform 260ms var(--ease-pop);
}

/* Articulated arms: the engine sets rotation targets, the transition turns
   them into continuous motion (compositor-friendly transform only). */
.arm {
  transition: transform 140ms ease-out;
}

/* Tap feedback: quick squash-and-stretch */
@keyframes tap-boing {
  0%   { transform: scale(1, 1); }
  35%  { transform: scale(1.12, 0.88); }
  70%  { transform: scale(0.94, 1.06); }
  100% { transform: scale(1, 1); }
}

/* Descendant selector: .boing-inner may sit deeper than one level
   (e.g. characters wrap it inside their .bob group). */
.boing .boing-inner {
  animation: tap-boing 380ms var(--ease-pop);
  transform-origin: center bottom;
  transform-box: fill-box;
}

/* ---------------------------------------------------------------
   Effects
---------------------------------------------------------------- */
@keyframes flame-flicker {
  0%, 100% { transform: scaleY(1) scaleX(1); }
  30%      { transform: scaleY(1.25) scaleX(0.9); }
  60%      { transform: scaleY(0.85) scaleX(1.08); }
}

.flame {
  opacity: 0;
  transition: opacity var(--duration-fast) ease;
  pointer-events: none;
}

.flame.on { opacity: 1; }

.flame .flame-shape {
  animation: flame-flicker 260ms ease-in-out infinite;
  transform-origin: center bottom;
  transform-box: fill-box;
}

@keyframes steam-rise {
  0%   { transform: translateY(0) scale(0.5); opacity: 0; }
  20%  { opacity: 0.85; }
  100% { transform: translateY(-90px) scale(1.4); opacity: 0; }
}

.steam-puff {
  animation: steam-rise 1.6s ease-out infinite;
  pointer-events: none;
}

@keyframes water-wiggle {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(0.75); }
}

.water {
  opacity: 0;
  transition: opacity var(--duration-fast) ease;
  pointer-events: none;
}

.water.on { opacity: 1; }
.water .water-stream {
  animation: water-wiggle 300ms ease-in-out infinite;
  transform-origin: center top;
  transform-box: fill-box;
}

@keyframes heart-float {
  0%   { transform: translate(0, 0) scale(0.4); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(var(--hx, 0px), -130px) scale(1.1) rotate(var(--hr, 0deg)); opacity: 0; }
}

.heart {
  animation: heart-float 1.3s ease-out forwards;
  pointer-events: none;
}

@keyframes smoke-rise {
  0%   { transform: translate(0, 0) scale(0.35); opacity: 0; }
  18%  { opacity: 0.7; }
  100% { transform: translate(var(--sx, 0px), -150px) scale(1.5); opacity: 0; }
}

.smoke-puff {
  animation: smoke-rise 1.5s ease-out forwards;
  pointer-events: none;
}

/* Effects layer never intercepts input (flames, steam, water, TV overlay,
   hearts all live here, above the tap hotspots). */
#effects { pointer-events: none; }
/* Flames/steam are re-homed into #world for depth sorting: keep them
   input-transparent there too. */
.flame, .steam { pointer-events: none; }

/* Screen overlay (generic; legacy .tv-* kept as aliases) */
.tv-screen-on,
.screen-glass { opacity: 0; transition: opacity var(--duration-normal) ease; }
.tv-screen-on.on,
.screen-glass.on { opacity: 1; }

@keyframes screen-blob {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(26px); }
}

.tv-anim,
.screen-blob { animation: screen-blob 1.8s ease-in-out infinite; }

/* Standalone glow toggle (table lamps, crystals, signs) */
.glow-fx {
  opacity: 0;
  transition: opacity var(--duration-normal) ease;
  pointer-events: none;
}

.glow-fx.on { opacity: 1; }

/* Night mode */
.night-overlay {
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
}

.night .night-overlay { opacity: 1; }

.lamp-glow,
.night-glow {
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
}

.night .lamp-glow,
.night .night-glow { opacity: 1; }

/* Jar wobble */
@keyframes jar-wobble {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-8deg); }
  65%      { transform: rotate(6deg); }
}

.wobble .boing-inner {
  animation: jar-wobble 420ms var(--ease-pop);
  transform-origin: center bottom;
  transform-box: fill-box;
}

@media (prefers-reduced-motion: reduce) {
  .character .bob,
  .flame .flame-shape,
  .steam-puff,
  .water .water-stream,
  .tv-anim,
  .screen-blob {
    animation: none;
  }
}