.game-stage.is-lab-dark .lab-wall,
.game-stage.is-lab-dark .lab-window,
.game-stage.is-lab-dark .lab-machine,
.game-stage.is-lab-dark .lab-floor {
  filter: brightness(0.22);
}

.game-stage.is-lab-dark .lab-strip,
.game-stage.is-lab-dark .lab-lamp-glow {
  opacity: 0;
}

.game-stage.is-lab-waking .lab-strip {
  animation: labWake calc(var(--anim-slow) * 3) ease forwards;
}

@keyframes labWake {
  from { opacity: 0; }
  to { opacity: 1; }
}

.story-title {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  font-size: 56px;
  color: #fffaf1;
  letter-spacing: 0.12em;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 8px 0 rgba(36, 50, 70, 0.15);
}

.story-title.is-on {
  opacity: 1;
  transition: opacity var(--anim-slow) ease;
}

.prop-ai-board[data-state="wrong"] .board-icon,
.prop-ai-board[data-state="right"] .board-icon,
.prop-ai-board[data-state="compose"] .board-icon {
  display: none;
}

.board-art,
.board-compose {
  display: none;
  position: absolute;
  inset: 24px;
}

.prop-ai-board[data-state="wrong"] .board-art-wrong,
.prop-ai-board[data-state="right"] .board-art-right,
.prop-ai-board[data-state="compose"] .board-compose {
  display: block;
}

.board-scan {
  position: absolute;
  left: 8%;
  right: 8%;
  height: 10px;
  background: rgba(126, 224, 208, 0.7);
  animation: boardScan calc(var(--anim-slow) * 2) linear infinite;
}

@keyframes boardScan {
  from { top: 12%; }
  to { top: 80%; }
}

.gray-dog {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 180px;
  height: 140px;
  transform: translate(-50%, -50%);
}

.gray-dog-head,
.gray-dog-body,
.gray-dog-ear {
  position: absolute;
  background: #9aa3ad;
  border: 5px solid #4d5966;
}

.gray-dog-head {
  left: 18px;
  top: 8px;
  width: 70px;
  height: 62px;
  border-radius: 50%;
}

.gray-dog-ear {
  left: 8px;
  top: 0;
  width: 24px;
  height: 36px;
  border-radius: 16px 16px 8px 8px;
}

.gray-dog-body {
  left: 56px;
  top: 48px;
  width: 110px;
  height: 72px;
  border-radius: 40px;
}

.moon-disc {
  display: block;
  position: absolute;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: #f4e2a8;
  box-shadow: inset -16px -10px 0 #e0c56a;
}

.board-art-right .moon-disc {
  left: 36px;
  top: 48px;
}

.corgi-mini {
  display: block;
  position: absolute;
  width: 88px;
  height: 58px;
  background: #f5c14a;
  border: 5px solid #c48a1a;
  border-radius: 40px 48px 28px 24px;
}

.corgi-mini::before {
  content: "";
  position: absolute;
  left: -10px;
  top: -16px;
  width: 22px;
  height: 28px;
  background: #f5c14a;
  border: 5px solid #c48a1a;
  border-radius: 14px 14px 8px 8px;
}

.corgi-mini::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 16px;
  width: 18px;
  height: 14px;
  background: #ffe6a8;
  border-radius: 10px;
}

.board-art-right .corgi-mini {
  left: 150px;
  top: 88px;
}

.skate-mini {
  display: block;
  position: absolute;
  width: 92px;
  height: 16px;
  background: #ff8fab;
  border-radius: 10px;
  box-shadow: 10px 12px 0 #5ec8ff, 60px 12px 0 #5ec8ff;
}

.board-art-right .skate-mini {
  left: 148px;
  top: 150px;
}

.board-compose {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 56px;
}

.prop-ai-board[data-state="compose"] .board-compose {
  display: flex;
}

.prop-projector {
  width: 120px;
  height: 90px;
}

.projector-body {
  width: 88px;
  height: 48px;
  background: #efe0c4;
  border: 5px solid #c9a36a;
  border-radius: 16px;
}

.projector-lens {
  position: absolute;
  right: 8px;
  top: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #7ee0d0;
}

.prop-projector.is-on .projector-lens {
  box-shadow: 0 0 22px #7ee0d0;
}

.prop-capsule {
  width: 90px;
  height: 120px;
}

.capsule-shell {
  width: 70px;
  height: 110px;
  margin: 0 auto;
  border-radius: 40px;
  background: linear-gradient(#fff3a0, #ffb3c7);
  border: 5px solid #c9a36a;
}

.prop-capsule.is-open .capsule-shell {
  transform: scaleY(0.4);
  opacity: 0.3;
}

.prop-target-shot {
  width: 340px;
  height: 300px;
}

.target-frame {
  position: relative;
  width: 100%;
  height: 100%;
  background: #f7fbff;
  border: 8px solid #f4efe4;
  border-radius: 28px;
  box-shadow: 0 0 0 6px #2fb7b0;
  overflow: hidden;
}

.target-tag {
  position: absolute;
  left: 14px;
  top: 12px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  background: #2fb7b0;
  color: #fffaf1;
  font-size: 20px;
  letter-spacing: 0.08em;
}

.target-spot {
  position: absolute;
  border: 0;
  background: transparent;
  padding: 0;
  pointer-events: none;
}

.spot-moon { left: 28px; top: 58px; width: 120px; height: 120px; }
.spot-corgi { left: 148px; top: 96px; width: 140px; height: 110px; }
.spot-skate { left: 146px; top: 196px; width: 140px; height: 56px; }

.target-spot .moon-disc,
.target-spot .corgi-mini,
.target-spot .skate-mini {
  display: block;
  position: absolute;
  left: 8px;
  top: 8px;
  font-style: normal;
  opacity: 0.28;
}

.target-spot .moon-disc {
  width: 104px;
  height: 104px;
}

.target-spot .corgi-mini {
  width: 108px;
  height: 70px;
}

.target-spot .skate-mini {
  width: 112px;
  height: 18px;
  box-shadow: 12px 14px 0 #5ec8ff, 74px 14px 0 #5ec8ff;
}

.prop-target-shot[data-phase="moon"] .spot-moon .moon-disc,
.prop-target-shot[data-phase="corgi"] .spot-moon .moon-disc,
.prop-target-shot[data-phase="corgi"] .spot-corgi .corgi-mini,
.prop-target-shot[data-phase="skate"] .spot-moon .moon-disc,
.prop-target-shot[data-phase="skate"] .spot-corgi .corgi-mini,
.prop-target-shot[data-phase="skate"] .spot-skate .skate-mini,
.prop-target-shot[data-phase="full"] .target-spot .moon-disc,
.prop-target-shot[data-phase="full"] .target-spot .corgi-mini,
.prop-target-shot[data-phase="full"] .target-spot .skate-mini,
.target-spot.is-found .moon-disc,
.target-spot.is-found .corgi-mini,
.target-spot.is-found .skate-mini {
  opacity: 1;
}

.target-spot.is-found {
  filter: drop-shadow(0 0 12px #ffe56a);
  transform: scale(1.08);
}

.prop-draw-button {
  width: 220px;
  height: 150px;
}

.draw-crystal {
  width: 92px;
  height: 92px;
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #7ee0d0 46%, #b197fc);
  box-shadow: 0 0 24px rgba(126, 224, 208, 0.8);
  display: grid;
  place-items: center;
  font-size: 40px;
  animation: hitPulse calc(var(--anim-slow) * 2) ease-out infinite;
}

.draw-label {
  margin-top: 10px;
  text-align: center;
  font-size: 32px;
  color: var(--ink);
}

.prop-story-chip {
  width: 180px;
  height: 72px;
}

.story-chip-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #fffaf1;
  border: 4px solid var(--ink);
  border-radius: 20px;
  font-size: 24px;
  color: var(--ink);
}

.story-chip-inner em {
  font-style: normal;
}

.prop-continue-hint {
  width: 200px;
  height: 48px;
  font-size: 22px;
  color: rgba(36, 50, 70, 0.7);
}

.spot-hit.is-found {
  opacity: 0;
  pointer-events: none;
}

.character.pose-hips .q01-arm-left {
  transform: rotate(28deg);
}

.character.pose-hips .q01-arm-right {
  transform: rotate(-28deg);
}

.character.pose-lean .q01-pose {
  transform: rotate(6deg);
}

.character.pose-proud-mini .q01-pose {
  transform: rotate(-6deg);
}

.juan-svg { width: 100%; height: 100%; overflow: visible; }
.juan-shadow { fill: rgba(72, 102, 128, 0.16); }
.juan-body,
.juan-bum,
.juan-face,
.juan-ear,
.juan-leg rect {
  fill: #f5c14a;
  stroke: #c48a1a;
  stroke-width: 5;
}
.juan-snout { fill: #ffe6a8; stroke: #c48a1a; stroke-width: 4; }
.juan-nose { fill: #3b2a16; }
.juan-tail { fill: none; stroke: #f5c14a; stroke-width: 10; stroke-linecap: round; }
.juan-eye { fill: #2a4d6e; }
.juan-shine { fill: #fff; }
.juan-mouth,
.juan-eyes-roast path {
  fill: none;
  stroke: #2a4d6e;
  stroke-width: 5;
  stroke-linecap: round;
}
.juan-eyes,
.juan-mouth { display: none; }
.character[data-emotion="normal"] .juan-eyes-normal,
.character[data-emotion="normal"] .juan-mouth-normal,
.character[data-emotion="roast"] .juan-eyes-roast,
.character[data-emotion="roast"] .juan-mouth-roast {
  display: block;
}

.effect-bulb {
  font-size: 48px;
  animation: questionPop calc(var(--anim-slow) * 2) ease forwards;
}

.effect-confetti {
  width: 240px;
  height: 160px;
}

.effect-confetti i {
  position: absolute;
  width: 14px;
  height: 22px;
  border-radius: 3px;
  animation: sparkleTwinkle calc(var(--anim-slow) * 3) ease-in-out infinite;
}

.effect-confetti i:nth-child(1) { left: 10px; top: 8px; background: #ff8fab; }
.effect-confetti i:nth-child(2) { left: 70px; top: 20px; background: #ffe56a; }
.effect-confetti i:nth-child(3) { left: 130px; top: 4px; background: #7ee0d0; }
.effect-confetti i:nth-child(4) { left: 190px; top: 28px; background: #b197fc; }
.effect-confetti i:nth-child(5) { left: 40px; top: 70px; background: #5ec8ff; }
.effect-confetti i:nth-child(6) { left: 160px; top: 80px; background: #ffb3c7; }