/* Room scene — background + tappable item targets layered above. */

.scene-room { gap: var(--sp-md); padding-top: var(--sp-lg); }

/* ----- HUD ----- */

.room-hud {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: var(--mp-card);
  border: 1px solid var(--mp-border);
  border-radius: var(--radius-md);
  padding: var(--sp-xs) var(--sp-sm);
  gap: var(--sp-xs);
  font-family: var(--font-sans);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 480px) {
  .room-hud { padding: var(--sp-sm) var(--sp-md); gap: var(--sp-sm); }
}

.hud-room {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--mp-text);
}

.hud-timer {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--mp-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
@media (min-width: 480px) { .hud-timer { font-size: 1.75rem; } }
.hud-timer.urgent { color: var(--mp-bad); animation: pulse 0.5s infinite alternate; }

@keyframes pulse {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

.hud-score {
  text-align: right;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--mp-accent);
  font-variant-numeric: tabular-nums;
}
.hud-of { color: var(--mp-muted); font-size: 0.875rem; margin-left: 2px; }

/* ----- Scenario card (Insurance Panic) ----- */

.scenario-card {
  display: flex;
  gap: var(--sp-md);
  background: rgba(192, 101, 74, 0.10);
  border: 1px solid rgba(192, 101, 74, 0.30);
  border-radius: var(--radius-md);
  padding: var(--sp-md);
  align-items: flex-start;
}

.scenario-emoji { font-size: 1.5rem; line-height: 1; }
.scenario-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--mp-bad);
}
.scenario-desc {
  margin: 4px 0 0 0;
  color: var(--mp-text);
  font-size: 0.9375rem;
  line-height: 1.4;
}

/* ----- Room stage (background + items) ----- */

.room-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--mp-surface);
  border: 1px solid var(--mp-border);
  box-shadow: var(--shadow-md);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.room-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.room-items {
  position: absolute;
  inset: 0;
}

/* Miss shake */
.room-stage.miss-shake { animation: miss-shake 220ms ease-in-out; }
@keyframes miss-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

/* Tint overlays for Insurance Panic effects */
.stage-tint {
  position: absolute; inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.stage-effect-water .stage-tint    { background: rgba(63, 122, 171, 0.18); }
.stage-effect-burglary .stage-tint { background: rgba(31, 37, 48, 0.28); }
.stage-effect-smoke .stage-tint    { background: rgba(91, 100, 112, 0.32); }

/* ----- Tappable item target ----- */

.item-target {
  position: absolute;
  /* x, y, width, height set via inline style (% of stage) */
  transform: translate(-50%, -50%);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* invisible-but-hittable ring so finger taps work */
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s var(--ease);
  /* Ensure mobile tap target is never smaller than 44px */
  min-width: 44px;
  min-height: 44px;
}
.item-target:hover { transform: translate(-50%, -50%) scale(1.04); }
.item-target:active { transform: translate(-50%, -50%) scale(0.96); }

/* Hoarder chaos — items get a random rotation set inline via --item-rot */
.item-target.has-rotation {
  transform: translate(-50%, -50%) rotate(var(--item-rot, 0deg));
}
.item-target.has-rotation:hover {
  transform: translate(-50%, -50%) rotate(var(--item-rot, 0deg)) scale(1.04);
}
.item-target.has-rotation:active {
  transform: translate(-50%, -50%) rotate(var(--item-rot, 0deg)) scale(0.96);
}

/* Flipped (mirrored) — applied to the inner image only so container rotation still works */
.item-target.is-flipped .item-img,
.item-target.is-flipped .item-placeholder {
  transform: scaleX(-1);
}

.item-art {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* soft halo so item reads against any background */
  filter: drop-shadow(0 2px 6px rgba(31,37,48,0.18));
}

.item-art.is-high-value::after {
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(163,114,20,0.18), transparent 70%);
  z-index: -1;
  pointer-events: none;
}

.item-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.item-placeholder {
  width: 100%;
  height: 100%;
  background: var(--mp-card);
  border: 2px solid var(--mp-accent);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.6875rem;
  color: var(--mp-text);
  padding: 4px;
  line-height: 1.1;
  box-shadow: var(--shadow-sm);
}

/* ─────────────────────────────────────────────────────────────────────────
   Captured state — small corner badge + capture-flash, not full coverage
   ───────────────────────────────────────────────────────────────────────── */

/* Corner badge — sage square with rounded corner, sits top-right of item.
   Sized as % of the item so it scales with item width, with min/max guards. */
.item-tick {
  position: absolute;
  top: -10%;
  right: -10%;
  width: 38%;
  height: 38%;
  min-width: 22px;
  min-height: 22px;
  max-width: 36px;
  max-height: 36px;
  background: var(--mp-accent);
  border: 2px solid var(--mp-card);
  border-radius: 30% 30% 30% 4px;  /* dog-eared receipt-corner shape */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0;
  font-weight: 800;
  box-shadow: 0 3px 8px rgba(31, 37, 48, 0.30);
  opacity: 0;
  transform: scale(0.2) rotate(-30deg);
  pointer-events: none;
  z-index: 5;
}

.item-target.captured .item-tick {
  opacity: 1;
  font-size: 1.05rem;
  animation: tick-snap 520ms var(--ease-back) both;
}

@keyframes tick-snap {
  0%   { opacity: 0; transform: scale(0.2)  rotate(-30deg); }
  40%  { opacity: 1; transform: scale(1.30) rotate(8deg);   }
  65%  {              transform: scale(0.95) rotate(-4deg);  }
  100% { opacity: 1; transform: scale(1)    rotate(-6deg);  }
}

/* Capture flash — single white pulse sweeps across the item on tap */
.item-target.captured::before {
  content: "";
  position: absolute;
  inset: -4%;
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.6) 40%, transparent 75%);
  border-radius: 30%;
  pointer-events: none;
  animation: capture-flash 480ms ease-out forwards;
  z-index: 3;
}

@keyframes capture-flash {
  0%   { opacity: 0;  transform: scale(0.4); }
  30%  { opacity: 0.95; transform: scale(1.1); }
  100% { opacity: 0;  transform: scale(1.5); }
}

/* Sparkle ring — Magpie-flavoured burst that radiates outward */
.item-target.captured::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid var(--mp-accent);
  opacity: 0;
  pointer-events: none;
  animation: sparkle-ring 600ms ease-out forwards;
  z-index: 2;
}

@keyframes sparkle-ring {
  0%   { opacity: 0.9; transform: scale(0.5); border-width: 4px; }
  100% { opacity: 0;   transform: scale(1.8); border-width: 1px; }
}

/* Item itself: brief shrink-bump then settle slightly smaller + desaturated */
.item-target.captured .item-art {
  opacity: 0.55;
  filter: saturate(0.4);
  animation: captured-settle 400ms var(--ease) both;
}

@keyframes captured-settle {
  0%   { transform: scale(1);    filter: saturate(1); }
  35%  { transform: scale(1.08); filter: saturate(0.7); }
  100% { transform: scale(0.94); filter: saturate(0.4); }
}

.item-target.captured { cursor: default; }

/* Value toast — small green floater on capture */
.value-toast {
  position: absolute;
  top: -10%; left: 50%;
  transform: translate(-50%, 0);
  background: var(--mp-good);
  color: #fff;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  animation: value-pop 900ms var(--ease-back) forwards;
  box-shadow: var(--shadow-md);
  z-index: 5;
}

@keyframes value-pop {
  0%   { opacity: 0; transform: translate(-50%, 8px) scale(0.6); }
  25%  { opacity: 1; transform: translate(-50%, -8px) scale(1.1); }
  60%  { opacity: 1; transform: translate(-50%, -24px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -44px) scale(1); }
}

/* Hint banner — sits at the top of the scene, above the HUD */
.room-hint {
  margin: 0 0 var(--sp-xs);
  text-align: center;
  color: var(--mp-accent);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
@media (max-width: 480px) {
  .room-hint { font-size: 1.125rem; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Marketplace Frenzy — pulse marketplace items, dim non-sellable.
   ───────────────────────────────────────────────────────────────────────── */

.scene-mode-marketplace-frenzy .item-market .item-art::after {
  content: "";
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(163,114,20,0.30), transparent 65%);
  z-index: -1;
  animation: market-pulse 1.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes market-pulse {
  0%, 100% { transform: scale(1);   opacity: 0.7; }
  50%      { transform: scale(1.1); opacity: 1; }
}

.toast-good { background: var(--mp-good); }
.toast-bad  { background: var(--mp-bad); }

/* ─────────────────────────────────────────────────────────────────────────
   Hoarder Challenge — junk muted, treasure tilted/shrunk like "buried".
   ───────────────────────────────────────────────────────────────────────── */

.scene-mode-hoarder-challenge .item-junk .item-art {
  filter: saturate(0.5) brightness(0.85);
}

.scene-mode-hoarder-challenge .item-treasure {
  transform: translate(-50%, -50%) rotate(-8deg);
}
.scene-mode-hoarder-challenge .item-treasure .item-art {
  transform: scale(0.78);
  opacity: 0.85;
}
.scene-mode-hoarder-challenge .item-treasure .item-art::after {
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(192,101,74,0.20), transparent 70%);
  z-index: -1;
  pointer-events: none;
}
.scene-mode-hoarder-challenge .item-treasure:hover {
  transform: translate(-50%, -50%) rotate(-8deg) scale(1.04);
}

.toast-treasure {
  background: var(--mp-amber);
  font-weight: 800;
}

/* ─────────────────────────────────────────────────────────────────────────
   Spot the Missing Item — memorise overlay + ghost outlines.
   ───────────────────────────────────────────────────────────────────────── */

.hud-phase {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mp-accent);
  padding: 4px 10px;
  background: var(--mp-accent-soft);
  border-radius: var(--radius-pill);
}
.hud-phase.phase-spot { background: rgba(192,101,74,0.12); color: var(--mp-bad); }

.spot-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(31, 37, 48, 0.62);
  pointer-events: none;
  transition: opacity 0.6s var(--ease);
  z-index: 10;
}
.spot-overlay.fading { opacity: 0; }
.spot-overlay.brief  { background: rgba(192, 101, 74, 0.42); }
.spot-overlay.gone   { opacity: 0; visibility: hidden; }

.spot-overlay-text {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.2;
  text-align: center;
  padding: var(--sp-lg);
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.spot-overlay-text span {
  display: block;
  margin-top: var(--sp-xs);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1rem;
  opacity: 0.85;
}

/* Display-only items in spot-missing (memorise phase) — no hit-box, no click cursor */
.item-display-only {
  cursor: default;
  pointer-events: none;
}

/* Ghost outline shown when user correctly taps a missing-item spot */
.spot-ghost {
  position: absolute;
  transform: translate(-50%, -50%);
  border: 3px dashed var(--mp-accent);
  border-radius: var(--radius-md);
  background: var(--mp-accent-soft);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  animation: ghost-pop 400ms var(--ease-back) both;
  z-index: 5;
}

@keyframes ghost-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.spot-ghost-label {
  background: var(--mp-accent);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.6875rem;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  margin-bottom: -10px;
  box-shadow: var(--shadow-sm);
}

/* ─────────────────────────────────────────────────────────────────────────
   Insurance Panic — rising hazard layer (fire OR water)
   ───────────────────────────────────────────────────────────────────────── */

.hazard-layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--hazard-height, 0%);
  pointer-events: none;
  z-index: 4;
  transition: height 1s linear;
}

/* WATER — bright cartoony blue with thick white foam wave + visible bubbles */
.hazard-water {
  background:
    /* bubbles */
    radial-gradient(circle 10px at 18% 38%, rgba(255,255,255,0.55) 0 7px, transparent 8px),
    radial-gradient(circle 7px  at 65% 22%, rgba(255,255,255,0.50) 0 5px, transparent 6px),
    radial-gradient(circle 9px  at 82% 60%, rgba(255,255,255,0.45) 0 6px, transparent 7px),
    radial-gradient(circle 6px  at 35% 70%, rgba(255,255,255,0.40) 0 4px, transparent 5px),
    /* highlight + body */
    linear-gradient(180deg,
      rgba(120, 200, 240, 0.78) 0%,
      rgba(70, 160, 220, 0.85) 45%,
      rgba(35, 110, 180, 0.92) 100%);
  overflow: visible;
}

/* Cartoony scalloped wave top — single SVG-shaped curve via radial-gradient stack */
.hazard-water .hazard-surface {
  position: absolute;
  top: -22px; left: 0; right: 0; height: 28px;
  background-image:
    radial-gradient(circle 22px at 10% 105%, rgba(120, 200, 240, 1) 0 20px, transparent 21px),
    radial-gradient(circle 22px at 30% 105%, rgba(120, 200, 240, 1) 0 20px, transparent 21px),
    radial-gradient(circle 22px at 50% 105%, rgba(120, 200, 240, 1) 0 20px, transparent 21px),
    radial-gradient(circle 22px at 70% 105%, rgba(120, 200, 240, 1) 0 20px, transparent 21px),
    radial-gradient(circle 22px at 90% 105%, rgba(120, 200, 240, 1) 0 20px, transparent 21px);
  filter: drop-shadow(0 -4px 0 rgba(255,255,255,0.85)) drop-shadow(0 2px 4px rgba(0,0,0,0.18));
  animation: water-bob 2s ease-in-out infinite alternate;
}
@keyframes water-bob {
  0%   { transform: translateX(-8px); }
  100% { transform: translateX(8px);  }
}

/* FIRE — bright cartoon flames with strong yellow→orange contrast */
.hazard-smoke {
  background:
    /* embers/sparks */
    radial-gradient(circle 4px at 25% 40%, rgba(255,220,90,0.7) 0 3px, transparent 4px),
    radial-gradient(circle 3px at 75% 28%, rgba(255,200,80,0.6) 0 2px, transparent 3px),
    radial-gradient(circle 3px at 55% 65%, rgba(255,230,100,0.55) 0 2px, transparent 3px),
    /* main fire body */
    linear-gradient(180deg,
      rgba(255, 210, 100, 0.78) 0%,
      rgba(255, 140, 50, 0.85) 30%,
      rgba(220, 70, 40, 0.92) 70%,
      rgba(170, 40, 30, 0.95) 100%);
}

/* Bright glow bed at top of hazard layer */
.hazard-smoke .hazard-surface {
  position: absolute;
  top: -8px;
  left: 0; right: 0;
  height: 18px;
  background: linear-gradient(180deg,
    rgba(255, 240, 180, 0.95) 0%,
    rgba(255, 180, 80, 0.7) 50%,
    transparent 100%);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  filter: blur(1px);
  animation: flame-bed-flicker 0.6s ease-in-out infinite alternate;
  z-index: 1;
}

/* Flame strip sits above hazard layer */
.hazard-smoke .hazard-flames {
  position: absolute;
  top: -56px;
  left: 0; right: 0;
  height: 64px;
  pointer-events: none;
  z-index: 2;
}

/* ─── SVG cartoon flames — Toca Boca style matching panic mode tile ─── */
.hazard-fire-svg {
  position: absolute;
  bottom: 0;       /* anchor flames at the top of hazard layer */
  left: -2%;
  right: -2%;
  width: 104%;
  height: 210px;   /* 3× taller flames */
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}

.hazard-fire-svg .fire-back .flame-path {
  fill: #c64a25;
  stroke: #1a1418;
  stroke-width: 1.4;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(220, 80, 30, 0.55));
  animation: fire-back-dance 0.9s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.hazard-fire-svg .fire-front .flame-path {
  fill: #ffb13a;
  stroke: #1a1418;
  stroke-width: 1.6;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(255, 200, 80, 0.6));
  animation: fire-front-dance 0.5s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

/* Stagger each flame's animation start so they dance independently */
.hazard-fire-svg .fire-front .flame-path:nth-child(1) { animation-delay: 0.00s; fill: #ffcd55; }
.hazard-fire-svg .fire-front .flame-path:nth-child(2) { animation-delay: 0.08s; fill: #ffa838; }
.hazard-fire-svg .fire-front .flame-path:nth-child(3) { animation-delay: 0.16s; fill: #ffc150; }
.hazard-fire-svg .fire-front .flame-path:nth-child(4) { animation-delay: 0.24s; fill: #ff9a30; }
.hazard-fire-svg .fire-front .flame-path:nth-child(5) { animation-delay: 0.06s; fill: #ffc850; }
.hazard-fire-svg .fire-front .flame-path:nth-child(6) { animation-delay: 0.14s; fill: #ffa838; }
.hazard-fire-svg .fire-front .flame-path:nth-child(7) { animation-delay: 0.22s; fill: #ffcd5e; }

.hazard-fire-svg .fire-back .flame-path:nth-child(odd)  { animation-delay: 0.10s; fill: #d35a28; }
.hazard-fire-svg .fire-back .flame-path:nth-child(even) { animation-delay: 0.30s; fill: #b94020; }

@keyframes fire-front-dance {
  0%, 100% { transform: scaleY(0.9)  scaleX(1.05) translateY(0); }
  25%      { transform: scaleY(1.15) scaleX(0.95) translateY(-3px); }
  50%      { transform: scaleY(1.0)  scaleX(1.02) translateY(-1px); }
  75%      { transform: scaleY(1.3)  scaleX(0.88) translateY(-5px); }
}

@keyframes fire-back-dance {
  0%, 100% { transform: scaleY(0.95) scaleX(1.03); opacity: 0.85; }
  50%      { transform: scaleY(1.12) scaleX(0.96); opacity: 1; }
}

/* Each flame — proper teardrop via clip-path + bright inner core + dancing motion */
.flame {
  position: absolute;
  bottom: 0;
  width: 13%;
  background: linear-gradient(180deg,
    rgba(255, 250, 200, 1) 0%,
    rgba(255, 220, 100, 1) 25%,
    rgba(255, 160, 50, 1) 55%,
    rgba(220, 80, 30, 0.95) 85%,
    rgba(170, 40, 25, 0.85) 100%);
  /* Teardrop / flame shape — narrow at top, wide near bottom */
  clip-path: polygon(
    50% 0%,
    62% 18%, 78% 38%, 88% 60%, 82% 82%,
    65% 95%, 50% 100%, 35% 95%,
    18% 82%, 12% 60%, 22% 38%, 38% 18%
  );
  transform-origin: 50% 100%;
  filter: drop-shadow(0 0 6px rgba(255, 160, 60, 0.55));
  animation: flame-dance 0.55s ease-in-out infinite;
}

/* Brighter inner core — pseudo-element layered on top */
.flame::before {
  content: "";
  position: absolute;
  inset: 25% 28% 8% 28%;
  background: linear-gradient(180deg,
    rgba(255, 255, 240, 1) 0%,
    rgba(255, 235, 140, 1) 50%,
    rgba(255, 180, 70, 0.85) 100%);
  clip-path: polygon(
    50% 0%,
    65% 30%, 75% 65%, 60% 92%,
    50% 100%, 40% 92%,
    25% 65%, 35% 30%
  );
  animation: flame-core 0.42s ease-in-out infinite;
}

@keyframes flame-dance {
  0%   { transform: scaleY(0.85) scaleX(1.05) translateY(0)    rotate(-2deg); }
  25%  { transform: scaleY(1.15) scaleX(0.95) translateY(-3px) rotate(1deg); }
  50%  { transform: scaleY(0.95) scaleX(1.02) translateY(-1px) rotate(2deg); }
  75%  { transform: scaleY(1.30) scaleX(0.88) translateY(-5px) rotate(-1deg); }
  100% { transform: scaleY(0.85) scaleX(1.05) translateY(0)    rotate(-2deg); }
}

@keyframes flame-core {
  0%, 100% { transform: scaleY(0.9)  translateY(2px); opacity: 0.85; }
  50%      { transform: scaleY(1.15) translateY(-2px); opacity: 1; }
}

@keyframes flame-bed-flicker {
  0%   { opacity: 0.85; transform: scaleY(0.9); }
  100% { opacity: 1;    transform: scaleY(1.15); }
}

/* Items submerged in the hazard layer */
.item-target.flooded {
  opacity: 0.35;
  filter: saturate(0.3) blur(1px);
  cursor: not-allowed;
  pointer-events: none;
  transition: opacity 0.4s ease, filter 0.4s ease;
}
.item-target.flooded .item-tick { display: none; }
.item-target.flooded::after {
  content: "✕";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.3rem;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  text-shadow: 0 0 6px rgba(0,0,0,0.4);
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   Marketplace Frenzy — streak badge + essential-mistake feedback
   ───────────────────────────────────────────────────────────────────────── */

.hud-streak {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--mp-amber);
  margin-top: 2px;
  min-height: 1em;
  animation: streak-pop 0.3s var(--ease-back);
}
@keyframes streak-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}

.scene-mode-marketplace-frenzy .item-target {
  /* Subtle pulse on items appearing more than once (duplicates) */
}
.scene-mode-marketplace-frenzy .item-market-extra .item-art::after {
  content: "";
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(163,114,20,0.32), transparent 65%);
  z-index: -1;
  animation: market-pulse 1.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes market-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.6; }
  50%      { transform: scale(1.12); opacity: 1; }
}

/* Duplicates render slightly smaller + rotated to feel "extra" */
.scene-mode-marketplace-frenzy .item-duplicate {
  transform: translate(-50%, -50%) rotate(6deg);
}
.scene-mode-marketplace-frenzy .item-duplicate:hover {
  transform: translate(-50%, -50%) rotate(6deg) scale(1.04);
}

.item-target.essential-mistake {
  animation: essential-shake 350ms ease-in-out;
}
@keyframes essential-shake {
  0%,100% { transform: translate(-50%, -50%); }
  20%,60% { transform: translate(-54%, -50%); }
  40%,80% { transform: translate(-46%, -50%); }
}

/* ─────────────────────────────────────────────────────────────────────────
   Spot the Missing — multiple-choice answer panel + blackout transition
   ───────────────────────────────────────────────────────────────────────── */

.spot-blackout {
  position: absolute; inset: 0;
  background: #0d1117;
  opacity: 0;
  z-index: 20;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.spot-blackout.on { opacity: 1; }

.spot-answer-panel {
  background: var(--mp-card);
  border: 1px solid var(--mp-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-md) var(--sp-md) var(--sp-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  box-shadow: var(--shadow-md);
}

.spot-answer-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--mp-text);
  text-align: center;
}

.spot-answer-sub {
  margin: 0 0 var(--sp-xs);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--mp-muted);
  text-align: center;
}

.spot-answer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-sm);
}
@media (max-width: 480px) {
  .spot-answer-grid { grid-template-columns: repeat(2, 1fr); }
}

.spot-choice {
  background: var(--mp-bg);
  border: 2px solid var(--mp-border-hi);
  border-radius: var(--radius-md);
  padding: var(--sp-sm) var(--sp-xs);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 88px;
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.spot-choice:hover {
  border-color: var(--mp-accent);
  background: var(--mp-accent-soft);
}
.spot-choice.selected {
  border-color: var(--mp-accent);
  background: var(--mp-accent-soft);
  box-shadow: 0 0 0 2px var(--mp-accent), var(--shadow-md);
  transform: scale(1.02);
}
.spot-choice-img {
  width: 44px; height: 44px;
  object-fit: contain;
}
.spot-choice-name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--mp-text);
  text-align: center;
  line-height: 1.2;
}

.spot-lock-btn {
  margin-top: var(--sp-sm);
  width: 100%;
  min-height: 52px;
}
.spot-lock-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}