/* ============================================================
   THE APPRENTICE — first-run tutorial (spotlight coach marks)
   ============================================================ */

#tut{position:fixed;inset:0;z-index:600;pointer-events:none}
#tut[hidden]{display:none}

/* The four masks tile the screen around the highlighted rect. Nothing covers
   the hole itself, so the real control keeps receiving clicks. */
#tut .tm{
  position:fixed;background:rgba(2,5,8,.84);pointer-events:auto;
  backdrop-filter:saturate(.25) blur(1.5px);
  transition:top .42s var(--ease),left .42s var(--ease),
             width .42s var(--ease),height .42s var(--ease);
}
#tut.snap .tm{transition:none}

#tut .tring{
  position:fixed;pointer-events:none;border:2px solid var(--gold-hot);
  box-shadow:0 0 0 4px rgba(255,210,74,.16),0 0 44px 6px rgba(255,210,74,.32),
             inset 0 0 22px rgba(255,210,74,.18);
  transition:top .42s var(--ease),left .42s var(--ease),
             width .42s var(--ease),height .42s var(--ease),opacity .3s;
}
#tut.snap .tring{transition:opacity .3s}
#tut .tring::after{
  content:'';position:absolute;inset:-2px;border:2px solid var(--gold-hot);
  animation:tutPing 1.9s ease-out infinite;
}
@keyframes tutPing{
  0%{transform:scale(1);opacity:.85}
  70%{transform:scale(1.13);opacity:0}
  100%{opacity:0}
}
#tut .tring.off{opacity:0}

/* boss + speech bubble */
#tut .tbox{
  position:fixed;display:flex;align-items:flex-end;gap:0;pointer-events:none;
  max-width:min(520px,92vw);
  transition:top .42s var(--ease),left .42s var(--ease);
}
#tut.snap .tbox{transition:none}
#tut .tboss{
  width:clamp(78px,9vw,124px);flex:none;margin-right:-8px;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.9));
  animation:tutBossIn .5s var(--ease);
}
@keyframes tutBossIn{from{opacity:0;transform:translateY(22px) scale(.86)}to{opacity:1;transform:none}}
/* Only the controls inside take clicks. If the bubble ever lands over the
   highlighted button, the click still reaches the button underneath. */
#tut .tbub{
  pointer-events:none;background:rgba(7,11,24,.97);border:1px solid var(--line-hot);
  border-left:3px solid var(--gold);padding:15px 18px 13px;box-shadow:var(--shadow);
  backdrop-filter:blur(12px);min-width:0;flex:1;
  animation:tutBubIn .4s var(--ease);
}
@keyframes tutBubIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#tut .twho{
  display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold-hot);margin-bottom:7px;
}
#tut .ttxt{font-size:14.5px;line-height:1.52;margin-bottom:14px}
#tut .ttxt b{color:var(--gold-hot);font-weight:600}
#tut .tacts{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#tut .tbub button{pointer-events:auto}
#tut .tdots{display:flex;gap:5px;margin-right:auto}
#tut .tdots i{width:5px;height:5px;background:rgba(255,186,0,.28);transition:.3s}
#tut .tdots i.on{background:var(--gold-hot);transform:scale(1.35)}
#tut .tdots i.past{background:rgba(255,186,0,.5)}
#tut .tskip{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim-2);border-bottom:1px solid transparent;transition:.2s;padding:2px 0;
}
#tut .tskip:hover{color:var(--text);border-bottom-color:var(--line-hot)}
#tut #tutNext[hidden]{display:none}

/* a nudge on the highlighted control when we are waiting for the player */
#tut .thint{
  position:fixed;pointer-events:none;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-hot);
  transition:top .42s var(--ease),left .42s var(--ease);
}

@media (max-width:760px){
  #tut .tbox{left:12px!important;right:12px;max-width:none;width:calc(100vw - 24px)}
  #tut .tboss{width:62px}
  #tut .ttxt{font-size:13.5px}
}

/* actionable buttons breathe so the next move is never hidden */
.btn.pulse{animation:btnPulse 2.4s ease-in-out infinite}
@keyframes btnPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,210,74,0)}
  50%{box-shadow:0 0 0 7px rgba(255,210,74,.14)}
}