/* ==========================================================================
   The Guide — sticker Prashant + speech bubble
   ========================================================================== */
.guide-layer {
  position: fixed; inset: 0; z-index: 56;
  pointer-events: none;
  opacity: 0; transition: opacity 0.6s;
}
.guide-layer.is-on { opacity: 1; }

.guide { position: absolute; left: 0; top: 0; will-change: transform; }
.guide__shadow {
  position: absolute; left: 0; top: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  transform: translate(-50%, -50%);
}
.guide__rig { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.guide__flip { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.guide__pose {
  position: absolute; max-width: none; height: auto;
  opacity: 0; visibility: hidden;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.35)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
  user-select: none; -webkit-user-drag: none;
}
.guide__pose.is-on { opacity: 1; visibility: visible; }
.guide__puff {
  position: absolute; left: 0; top: 0; width: 30px; height: 14px; margin: -10px 0 0 -15px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(200, 190, 175, 0.55), rgba(200, 190, 175, 0));
  pointer-events: none;
}
.guide__hit { position: absolute; pointer-events: auto; cursor: pointer; border-radius: 40% 40% 20% 20%; }

.guide__bubble {
  position: absolute; left: 0; top: 0;
  max-width: min(260px, 70vw);
  padding: 12px 16px 13px;
  border-radius: 18px;
  background: var(--paper); color: var(--ink);
  font: 500 15px/1.35 var(--f-display); letter-spacing: -0.01em;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.55);
  opacity: 0; transform-origin: 50% 100%;
  transition: opacity 0.35s, background-color 0.4s, color 0.4s;
  will-change: transform;
}
.guide__bubble.is-on { opacity: 1; }
.guide__bubble.is-ink { background: var(--ink); color: var(--paper); }
.guide__text { min-height: 1.35em; }
.guide__tail {
  position: absolute; bottom: -7px; width: 14px; height: 14px;
  background: inherit; transform: rotate(45deg); border-radius: 0 0 3px 0;
}
.guide__bubble.is-side .guide__tail { display: none; }

@media (max-width: 820px) {
  .guide__bubble { font-size: 13px; padding: 10px 13px 11px; max-width: min(210px, 62vw); }
}
@media print { .guide-layer { display: none; } }