/* playground.css */

.pg-stage {
  position: relative;
  min-height: 140px;
  max-height: 30vh;
  border-radius: 22px;
  border: 1px solid rgba(120, 160, 90, 0.25);
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 50% at 50% 90%, rgba(120, 180, 90, 0.15), transparent),
    radial-gradient(circle at 75% 20%, rgba(255, 230, 160, 0.12), transparent 35%),
    radial-gradient(circle at 20% 30%, rgba(180, 220, 150, 0.08), transparent 30%),
    linear-gradient(180deg, #3a4a30 0%, #2d3b25 40%, #364a2e 70%, #2a3822 100%);
}

.pg-scene,
.pg-particles {
  position: absolute;
  inset: 0;
}

.pg-scene__mist,
.pg-scene__glow,
.pg-scene__ground {
  position: absolute;
  inset: auto 0 0;
}

.pg-scene__mist {
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(180, 220, 140, 0.06), transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(255, 240, 180, 0.08), transparent 25%);
  opacity: 0.9;
}

/* Ambient fireflies — pure CSS, no JS cost */
/* Static top/left for base position; movement via transform (GPU-composited) */
.pg-scene__mist::before,
.pg-scene__mist::after {
  content: "";
  position: absolute;
  top: 30%;
  left: 20%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 240, 160, 0.7);
  box-shadow: 0 0 6px 2px rgba(255, 230, 120, 0.4);
  will-change: transform, opacity;
  animation: pg-firefly-a 8s ease-in-out infinite;
}

.pg-scene__mist::after {
  top: 45%;
  left: 70%;
  width: 3px;
  height: 3px;
  animation: pg-firefly-b 11s ease-in-out infinite 3s;
  background: rgba(180, 230, 140, 0.6);
  box-shadow: 0 0 5px 2px rgba(160, 220, 120, 0.35);
}

@keyframes pg-firefly-a {
  0%   { transform: translate(0, 0); opacity: 0; }
  15%  { opacity: 0.8; }
  50%  { transform: translate(35vw, -12vh); opacity: 0.5; }
  85%  { opacity: 0.9; }
  100% { transform: translate(58vw, -5vh); opacity: 0; }
}

@keyframes pg-firefly-b {
  0%   { transform: translate(0, 0); opacity: 0; }
  20%  { opacity: 0.7; }
  50%  { transform: translate(-35vw, -23vh); opacity: 0.4; }
  80%  { opacity: 0.8; }
  100% { transform: translate(-55vw, -5vh); opacity: 0; }
}

.pg-scene__glow {
  bottom: 20%;
  left: 30%;
  width: 40%;
  height: 30%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 240, 180, 0.12), transparent 70%);
  filter: blur(12px);
}

.pg-scene__ground {
  height: 35%;
  background:
    radial-gradient(ellipse 120% 100% at 50% 100%, rgba(90, 140, 70, 0.3), transparent 50%),
    linear-gradient(180deg, transparent 0%, rgba(60, 90, 45, 0.25) 30%, rgba(50, 80, 40, 0.45) 100%);
  border-top: 1px solid rgba(120, 180, 90, 0.1);
}

.pg-prop {
  position: absolute;
  bottom: 18%;
  opacity: 0.18;
  transition: opacity 180ms ease, transform 180ms ease;
}

.pg-prop--mining {
  left: 13%;
  width: 108px;
  height: 88px;
}

.pg-rock,
.pg-tool,
.pg-herb,
.pg-pond__ring,
.pg-pond__bobber {
  position: absolute;
  display: block;
}

.pg-rock {
  bottom: 0;
  left: 10px;
  width: 52px;
  height: 40px;
  border-radius: 58% 42% 46% 54% / 50% 40% 60% 50%;
  background: linear-gradient(180deg, rgba(145, 134, 123, 0.86), rgba(92, 86, 80, 0.94));
}

.pg-rock--small {
  left: 48px;
  width: 32px;
  height: 26px;
  background: linear-gradient(180deg, rgba(126, 117, 108, 0.82), rgba(85, 79, 73, 0.9));
}

.pg-tool {
  right: 12px;
  bottom: 10px;
  width: 10px;
  height: 48px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(169, 123, 76, 0.96), rgba(118, 78, 42, 0.96));
  transform: rotate(26deg);
}

.pg-tool::after {
  content: "";
  position: absolute;
  top: -6px;
  left: -12px;
  width: 30px;
  height: 14px;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, rgba(216, 221, 226, 0.92), rgba(143, 157, 167, 0.92));
}

.pg-prop--foraging {
  left: 40%;
  width: 108px;
  height: 84px;
}

.pg-herb {
  bottom: 0;
  width: 26px;
  height: 56px;
  border-radius: 999px 999px 6px 6px;
  background: linear-gradient(180deg, rgba(127, 184, 101, 0.92), rgba(69, 118, 61, 0.94));
  transform-origin: bottom center;
}

.pg-herb:nth-child(1) { left: 8px; }
.pg-herb--tall { left: 40px; height: 64px; }
.pg-herb--tiny { left: 72px; width: 18px; height: 42px; }

.pg-prop--fishing {
  right: 10%;
  width: 132px;
  height: 90px;
}

.pg-prop--fishing::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 58px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(88, 138, 156, 0.82), rgba(47, 88, 104, 0.92));
}

.pg-pond__ring {
  left: 28px;
  bottom: 18px;
  width: 34px;
  height: 14px;
  border: 2px solid rgba(238, 250, 255, 0.5);
  border-radius: 50%;
}

.pg-pond__ring--late {
  left: 58px;
  bottom: 10px;
  width: 26px;
  height: 10px;
  opacity: 0.7;
}

.pg-pond__bobber {
  left: 80px;
  bottom: 34px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(250, 106, 89, 0.96), rgba(255, 232, 176, 0.94));
}

.pg-task {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(245, 232, 206, 0.18);
  background: rgba(42, 35, 25, 0.76);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  z-index: var(--z-sticky);
}

.pg-mote {
  position: absolute;
  left: 50%;
  top: 60%;
  translate: -50% -50%;
  transition: left 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), top 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  display: grid;
  justify-items: center;
  gap: 4px;
  z-index: calc(var(--z-sticky) - 1);
}

.pg-mote__avatar { width: 104px; height: 104px; display: grid; place-items: center; }
.pg-mote__avatar svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 12px rgba(208, 170, 90, 0.42));
}

/* Gentle breathing pulse — always on, makes mote feel alive */
.pg-mote--idle .pg-mote__avatar svg,
.pg-mote--gather .pg-mote__avatar svg {
  animation: pg-breathe 3.5s ease-in-out infinite;
}

@keyframes pg-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04) translateY(-1px); }
}

/* Squash-stretch for landing after movement */
@keyframes pg-squash {
  0% { transform: scaleY(0.85) scaleX(1.12); }
  40% { transform: scaleY(1.05) scaleX(0.95); }
  70% { transform: scaleY(0.98) scaleX(1.01); }
  100% { transform: scaleY(1) scaleX(1); }
}

.pg-mote--landing .pg-mote__avatar {
  animation: pg-squash 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Sleep: dim + very slow breathing */
.pg-mote--sleep .pg-mote__avatar svg {
  animation: pg-sleep-breathe 6s ease-in-out infinite;
  opacity: 0.7;
}

@keyframes pg-sleep-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}
.pg-mote__name { font-size: 12px; font-weight: 700; color: var(--text); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); white-space: nowrap; }

.pg-mote--idle { animation: pg-idle-hop 2.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
.pg-mote--sleep { animation: pg-sleep-bob 5s ease-in-out infinite; filter: brightness(0.75) saturate(0.7); opacity: 0.72; }
.pg-mote--play { animation: pg-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.pg-mote--gather { animation: pg-work 1.8s ease-in-out infinite; }
.pg-mote--job-mining { animation-name: pg-mine-hop; }
.pg-mote--job-foraging { animation-name: pg-forage-dip; }
.pg-mote--job-fishing { animation-name: pg-fish-sway; }
.pg-mote--lonely { animation: pg-sway 4s ease-in-out infinite; filter: saturate(0.6); }

.pg-stage--job-mining .pg-prop--mining,
.pg-stage--job-foraging .pg-prop--foraging,
.pg-stage--job-fishing .pg-prop--fishing {
  opacity: 1;
  transform: translateY(-4px);
}

.pg-stage--job-mining .pg-tool { animation: pg-tool-swing 1.2s ease-in-out infinite; }
.pg-stage--job-foraging .pg-herb { animation: pg-leaf-sway 1.9s ease-in-out infinite; }
.pg-stage--job-fishing .pg-pond__ring { animation: pg-ripple 1.8s ease-out infinite; }
.pg-stage--job-fishing .pg-pond__bobber { animation: pg-bobber 1.4s ease-in-out infinite; }

.pg-particles { pointer-events: none; z-index: calc(var(--z-sticky) + 1); }
.pg-particle { position: absolute; font-size: 20px; pointer-events: none; animation: pg-float-up 1.2s ease-out forwards; z-index: calc(var(--z-sticky) + 2); }
.pg-particle--zzz { animation: pg-drift-right 2s ease-out forwards; }
.pg-particle--tear { animation: pg-float-down 1.4s ease-in forwards; }
.pg-particle--note { animation-duration: 1.6s; }
.pg-particle--fish,
.pg-particle--splash { animation-duration: 1.4s; }

.pg-thought {
  position: absolute;
  max-width: 170px;
  padding: 8px 12px;
  translate: -50% 0;
  background: rgba(250, 244, 230, 0.95);
  color: #2a2010;
  border-radius: 14px;
  font-size: 13px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(200, 160, 80, 0.15);
  z-index: calc(var(--z-sticky) + 3);
  animation: pg-thought-in 0.35s var(--ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
}

.pg-thought::after,
.pg-thought::before {
  content: "";
  position: absolute;
  left: 50%;
  border-radius: 50%;
  background: rgba(250, 244, 230, 0.95);
}

.pg-thought::after { bottom: -6px; translate: -50% 0; width: 12px; height: 12px; }
.pg-thought::before { bottom: -12px; translate: -30% 0; width: 7px; height: 7px; background: rgba(250, 244, 230, 0.92); }
.pg-thought[hidden],
.pg-task[hidden] { display: none; }

/* pg-bob removed — unused, replaced by pg-idle-hop */
@keyframes pg-idle-hop {
  0%, 100% { transform: translateY(0) scaleY(1) scaleX(1); }
  15% { transform: translateY(0) scaleY(0.92) scaleX(1.06); }
  30% { transform: translateY(-14px) scaleY(1.08) scaleX(0.94); }
  50% { transform: translateY(0) scaleY(0.94) scaleX(1.04); }
  65% { transform: translateY(-4px) scaleY(1.02) scaleX(0.98); }
  80% { transform: translateY(0) scaleY(1) scaleX(1); }
}
@keyframes pg-sleep-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes pg-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes pg-work { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-3px) rotate(-3deg); } 75% { transform: translateY(-3px) rotate(3deg); } }
@keyframes pg-mine-hop { 0%, 100% { transform: translateY(0) rotate(0deg); } 30% { transform: translateY(-4px) rotate(-8deg); } 65% { transform: translateY(-2px) rotate(6deg); } }
@keyframes pg-forage-dip { 0%, 100% { transform: translateY(0) rotate(0deg); } 35% { transform: translateY(3px) rotate(-6deg); } 70% { transform: translateY(-4px) rotate(5deg); } }
@keyframes pg-fish-sway { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-2px) rotate(-3deg); } 75% { transform: translateY(-1px) rotate(3deg); } }
@keyframes pg-sway { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes pg-float-up { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-40px); opacity: 0; } }
@keyframes pg-float-down { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(20px); opacity: 0; } }
@keyframes pg-drift-right { 0% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(15px, -30px); opacity: 0; } }
@keyframes pg-thought-in {
  0% { opacity: 0; transform: scale(0.5) translateY(8px); }
  60% { opacity: 1; transform: scale(1.06) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.pg-mote:active .pg-mote__avatar {
  transform: scale(0.88);
  transition: transform var(--dur-instant, 0.08s) ease;
}
@keyframes pg-tool-swing { 0%, 100% { transform: rotate(26deg); } 50% { transform: rotate(8deg); } }
@keyframes pg-leaf-sway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-8deg); } }
@keyframes pg-ripple { 0% { transform: scale(0.9); opacity: 0.8; } 100% { transform: scale(1.18); opacity: 0.1; } }
@keyframes pg-bobber { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* HUD overlaid on playground */
.mote-habitat {
  position: relative;
}

.mote-habitat__hud {
  position: relative;
  padding: 12px 12px 12px;
  border-top: 1px solid rgba(162, 133, 84, 0.12);
}

.mote-habitat__name {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 2px;
}

.mote-habitat__name strong {
  font-size: 16px;
}

@media (max-width: 700px) {
  .pg-stage { min-height: 140px; max-height: 28vh; }
  .pg-mote__avatar { width: 84px; height: 84px; }
  .pg-particle { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-mote, .pg-particle, .pg-thought, .pg-tool, .pg-herb, .pg-pond__ring, .pg-pond__bobber { animation: none !important; }
  .pg-mote, .pg-prop { transition-duration: 0.01s !important; }
}