/* Visual guide (guide.js): one-time lessons. The classic "Бабай хочет" highlight keeps its
   pre-0.37 look (style.css). Everything here is pointer-events:none: hints never block a click. */
.guide-layer { position:fixed; inset:0; z-index:9000; pointer-events:none; overflow:hidden; }
.guide-layer > * { position:absolute; left:0; top:0; pointer-events:none; opacity:0; transition:opacity .28s ease-out; will-change:transform; }
.guide-layer.on > .guide-ring,
.guide-layer.on > .guide-tip { opacity:1; }
.guide-layer.on.strong > .guide-hand { opacity:1; }
.guide-layer.on.spotlight > .guide-spot { opacity:1; }
/* Target scrolled out of view: only the hint stays, at the edge, pointing toward it. */
.guide-layer.offscreen > :is(.guide-ring,.guide-spot,.guide-hand) { opacity:0!important; }

/* Spotlight: everything except the target is dimmed (first steps only). */
.guide-spot { box-shadow:0 0 0 200vmax #0705039e; transition:opacity .45s ease-out; }

/* Glowing, pulsing ring with an outgoing ripple. */
.guide-ring {
  box-sizing:border-box;
  border:3px solid #ffd65c;
  box-shadow:0 0 0 2px #3a28047a,0 0 16px 3px #ffc93d99,inset 0 0 12px #ffe28a55;
}
.guide-layer.on .guide-ring { animation:guide-ring 1.3s ease-in-out infinite; }
.guide-ring::before,
.guide-ring::after {
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:inherit;
  border:3px solid #ffe08a;
  opacity:0;
}
.guide-layer.on .guide-ring::before { animation:guide-ripple 1.6s ease-out infinite; }
.guide-layer.on .guide-ring::after { animation:guide-ripple 1.6s ease-out .8s infinite; }
@keyframes guide-ring {
  0%,100% { box-shadow:0 0 0 2px #3a28047a,0 0 14px 2px #ffc93d88,inset 0 0 10px #ffe28a44; }
  50% { box-shadow:0 0 0 2px #3a28047a,0 0 30px 9px #ffd65ccc,inset 0 0 18px #ffe28a88; }
}
@keyframes guide-ripple {
  0% { inset:-3px; opacity:.85; }
  100% { inset:-20px; opacity:0; }
}

/* Hint bubble: bold call to action, optional second line, arrow toward the target. */
.guide-tip { max-width:min(300px,calc(100vw - 12px)); }
.guide-bob { position:relative; --bx:0px; --by:6px; animation:guide-bob 1.1s ease-in-out infinite; }
.guide-tip[data-side="bottom"] .guide-bob { --by:-6px; }
.guide-tip[data-side="right"] .guide-bob { --bx:-6px; --by:0px; }
.guide-tip[data-side="left"] .guide-bob { --bx:6px; --by:0px; }
@keyframes guide-bob { 0%,100% { transform:translate(0,0); } 50% { transform:translate(var(--bx),var(--by)); } }
.guide-tip-body {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:8px 15px 9px;
  border:2px solid #ffd65c;
  border-radius:14px;
  background:linear-gradient(180deg,#45320fef,#21180aef);
  color:#fff4d2;
  text-align:center;
  box-shadow:0 7px 18px #000b,0 0 18px #ffc93d55,inset 0 1px 0 #fff0b84d;
}
.guide-tip-body b { font:800 14px/1.2 system-ui,sans-serif; letter-spacing:.2px; text-shadow:0 1px 0 #000; }
.guide-tip-body small { font:500 11.5px/1.25 system-ui,sans-serif; color:#f3dda4; }
.guide-tip-body small:empty { display:none; }
.guide-layer.strong .guide-tip-body { padding:10px 18px 11px; border-width:2.5px; box-shadow:0 8px 22px #000c,0 0 26px #ffc93d88,inset 0 1px 0 #fff0b866; }
.guide-layer.strong .guide-tip-body b { font-size:16px; }
.guide-arrow { position:absolute; width:0; height:0; border:10px solid transparent; transform:translateX(-50%); }
.guide-tip[data-side="top"] .guide-arrow { top:calc(100% - 1px); border-bottom:0; border-top-color:#ffd65c; }
.guide-tip[data-side="bottom"] .guide-arrow { bottom:calc(100% - 1px); border-top:0; border-bottom-color:#ffd65c; }
.guide-tip[data-side="right"] .guide-arrow { right:calc(100% - 1px); border-left:0; border-right-color:#ffd65c; transform:translateY(-50%); }
.guide-tip[data-side="left"] .guide-arrow { left:calc(100% - 1px)!important; border-right:0; border-left-color:#ffd65c; transform:translateY(-50%); }

/* Tapping hand for the very first steps. */
.guide-hand { width:44px; height:44px; margin:-4px 0 0 -14px; filter:drop-shadow(0 3px 3px #000c) drop-shadow(0 0 8px #ffd65c88); }
.guide-hand svg { width:100%; height:100%; fill:#fffaf0; stroke:#2b1d06; stroke-width:.9px; paint-order:stroke; }
.guide-layer.on.strong .guide-hand svg { animation:guide-tap 1.1s ease-in-out infinite; transform-origin:45% 20%; }
@keyframes guide-tap {
  0%,100% { transform:translate(0,0) scale(1); }
  40% { transform:translate(-4px,-7px) scale(.9); }
  55% { transform:translate(-4px,-7px) scale(.86); }
}

/* Yard places named by the guide light up in the scene itself. */
.yard-place.guide-target::before { opacity:.95!important; animation:guide-place 1.3s ease-in-out infinite; }
.yard-place.guide-target > span { border-color:#ffd65c!important; color:#fff4d2; box-shadow:0 2px 10px #000a,0 0 18px #ffc93d88!important; }
@keyframes guide-place { 50% { opacity:.55; } }

/* Vitals pulse with the first lessons only (first treat, first empty stock). */
.vitals .meter.guide-alert { animation:guide-meter 1.1s ease-in-out infinite; }
.vitals .meter.need.guide-alert { --guide-alert:#ff8a73; }
.vitals .meter.guide-alert { --guide-alert:#ffd65c; }
.vitals label.guide-alert b { color:#ffd65c; }
.vitals label.guide-alert #needLabel { color:#ff9c86; }
@keyframes guide-meter {
  0%,100% { box-shadow:0 0 0 1px color-mix(in srgb,var(--guide-alert) 40%,transparent); }
  50% { box-shadow:0 0 0 2px var(--guide-alert),0 0 12px var(--guide-alert); }
}
.beer-stock.guide-alert { animation:guide-stock 1.1s ease-in-out infinite; border-radius:8px; }
@keyframes guide-stock { 50% { box-shadow:0 0 0 2px #ff8a73,0 0 12px #ff8a73; color:#ffd2c7; } }

@media (prefers-reduced-motion: reduce) {
  .guide-layer *, .guide-layer *::before, .guide-layer *::after,
  .yard-place.guide-target::before,
  .vitals .meter.guide-alert, .beer-stock.guide-alert { animation:none!important; }
  .guide-layer > * { transition:none; }
}