/* Picture-space actions. The scene keeps its full image; labels sit at its foot. */
.scene-interaction-host {
  position: absolute;
  inset: 0 0 var(--panel-reserve, 270px);
  z-index: 7;
  overflow: hidden;
  pointer-events: none;
}
.si-root {
  --si-target-x: 50%;
  --si-target-y: 66%;
  --si-beam-x: 50%;
  --si-beam-y: 66%;
  --si-beam-size: 42px;
  --si-contact-opacity: 0;
  --si-ring-scale: 1;
  --si-drag-x: 0px;
  --si-drag-y: 0px;
  --si-reach-y: 0px;
  position: absolute;
  inset: 0;
  isolation: isolate;
  pointer-events: none;
}
.si-after, .si-light, .si-contact-light, .si-dust, .si-surface {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.si-after {
  z-index: 0;
  object-fit: contain;
  opacity: 0;
  transition: opacity .12s linear;
}
.si-root.is-revealed .si-after { opacity: 1; }
.si-light { z-index: 1; display: none; }
.si-lamp .si-light {
  display: block;
  background: radial-gradient(circle at var(--si-beam-x) var(--si-beam-y),
    transparent 0, rgba(9,15,11,.13) calc(var(--si-beam-size) * .55),
    rgba(2,7,5,.76) var(--si-beam-size), rgba(1,5,3,.9) 160%);
}
.si-contact-light {
  z-index: 3;
  opacity: var(--si-contact-opacity);
  background: radial-gradient(ellipse 90px 80px at var(--si-target-x) var(--si-target-y),
    rgba(245,221,163,.65), rgba(215,195,142,.18) 37%, transparent 75%);
  mix-blend-mode: screen;
}
.si-dust { z-index: 2; }
.si-surface { z-index: 3; pointer-events: auto; }
.si-lamp .si-surface { cursor: crosshair; }
.si-wipe .si-surface { cursor: grab; touch-action: none; }
.si-wipe.is-active .si-surface { cursor: grabbing; }
.si-wipe-progress{position:absolute;bottom:32px;left:18%;width:64%;height:3px;z-index:5;background:#e0d5ba25;pointer-events:none}
.si-wipe-progress::before{content:'';display:block;height:100%;width:var(--wipe-coverage,0%);background:#c8b58e;transition:width .1s linear}
.si-wipe-regions{position:absolute;z-index:4;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);pointer-events:auto;gap:3px;padding:4px}
.si-wipe-regions[hidden]{display:none}
.si-wipe-region{border:1px dashed #c8bca56a;background:#12181635;color:#e4ddcf;font-size:12px;min-width:44px;min-height:44px;text-shadow:0 1px 4px #000;padding:4px}
.si-wipe-region:disabled{background:transparent;opacity:.22;border-color:transparent;color:transparent}
.si-wipe.is-wipe-clean .si-surface{pointer-events:none}
.si-target {
  position: absolute;
  z-index: 4;
  width: 56px;
  min-width: 56px;
  height: 56px;
  min-height: 56px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  transform: translate(-50%, -50%) translate(var(--si-drag-x), var(--si-drag-y));
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  outline-offset: 5px;
  transition: opacity .2s ease;
}
.si-target:hover, .si-target:active {
  background: rgba(217,201,157,.08);
  color: inherit;
}
.si-target:focus-visible {
  outline: 2px solid #f2ddaa;
  background: rgba(225,209,166,.12);
}
.si-target-ring {
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(239,220,170,.86);
  border-radius: 50%;
  box-shadow: 0 0 13px rgba(5,9,6,.9), inset 0 0 12px rgba(4,8,5,.45);
  animation: si-breathe 2.5s ease-in-out infinite;
}
.si-target-ring::after {
  content: '';
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(228,215,177,.24);
  border-radius: 50%;
}
.si-target-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  top: calc(50% - 2px);
  left: calc(50% - 2px);
  background: #f0deb4;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(242,224,175,.7);
}
.si-reach .si-target { touch-action: none; }
.si-reach .si-target-ring {
  border-style: dashed;
  transform: translateY(var(--si-reach-y));
}
.si-hint {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 18px;
  width: max-content;
  max-width: min(82%, 560px);
  transform: translateX(-50%);
  padding: 7px 11px;
  border: 1px solid rgba(218,211,183,.13);
  border-radius: 2px;
  color: #ded9c7;
  background: rgba(7,15,10,.71);
  box-shadow: 0 3px 18px rgba(0,0,0,.15);
  text-shadow: 0 1px 6px #000;
  font: 11px/1.65 system-ui, sans-serif;
  letter-spacing: .6px;
  text-align: center;
  pointer-events: none;
}
.si-root.is-disabled .si-target { opacity: .28; pointer-events: none; }
.si-root.is-disabled .si-target-ring { animation: none; }
.si-root.is-disabled .si-surface { pointer-events: none; }
.si-root.is-disabled .si-hint { opacity: .6; }
.si-root.is-active .si-target { cursor: default; pointer-events: none; }
.si-root.is-active .si-target-ring {
  animation: none;
  transform: scale(var(--si-ring-scale)) translateY(var(--si-reach-y));
}
.si-root.is-settled .si-target { opacity: 0; }
.si-root.is-settled .si-hint { color: #e8dfc5; }
.si-root.is-done .si-surface { pointer-events: none; }
.si-root.is-paused .si-target, .si-root.is-paused .si-surface { pointer-events: none; }
.si-root.is-paused * { animation-play-state: paused !important; }
.si-root.is-reduced .si-target-ring { animation: none; }
.si-root.is-reduced .si-after { transition: none; }
.waking .scene-interaction-host { visibility: hidden; }
.on-title .scene-interaction-host, .saluting .scene-interaction-host { display: none; }
@keyframes si-breathe {
  0%, 100% { opacity: .58; transform: scale(.94); }
  50% { opacity: 1; transform: scale(1.09); }
}
@media (max-width: 760px) {
  .scene-interaction-host { bottom: var(--panel-reserve, 265px); }
  .si-hint { bottom: 22px; font-size: 10px; max-width: 84%; padding: 6px 9px; }
  .si-contact-light {
    background: radial-gradient(ellipse 65px 60px at var(--si-target-x) var(--si-target-y),
      rgba(245,221,163,.6), rgba(215,195,142,.16) 37%, transparent 75%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .si-target-ring { animation: none; }
}