/* ── Tutorial coach layer ───────────────────────────────────────────
   Loaded only by tutorial.html. Everything here draws on top of the
   real game; none of it changes how the game plays. The dimming is
   four opaque bands arranged around the highlighted target rather than
   one masked sheet, so the "hole" is genuinely empty and the click the
   player makes lands on the real control underneath it. */

#tut {
  position: fixed;
  inset: 0;
  z-index: 400;          /* over the overlays (10) and the toast (20) */
  pointer-events: none;
  font-family: var(--f-disp);
}
#tut.done { display: none; }

/* the four dimming bands - these DO swallow clicks, which is what keeps
   a beginner on the rails while a step is waiting on one specific action */
.tut-mask {
  position: fixed;
  background: rgba(2, 7, 5, 0.74);
  pointer-events: auto;
  transition: background-color 0.3s;
}

/* the default: no dimming at all. The breathing ring is cue enough, and
   the bands stay in place swallowing stray clicks either way, so steps
   are still gated - just invisibly. Only a step that sets `dim` (the
   loadout draft, where three chips out of twelve need to stand out)
   drops the shade back in */
#tut.clear .tut-mask { background: transparent; }

/* a ring around each thing the current step wants clicked - a step may
   highlight several at once (the three loadout chips, say) */
.tut-ring {
  position: fixed;
  border: 2px solid var(--gold);
  border-radius: 4px;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(2, 7, 5, 0.8), 0 0 22px rgba(232, 196, 104, 0.45);
  animation: tut-breathe 1.6s ease-in-out infinite;
}

@keyframes tut-breathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(2, 7, 5, 0.8), 0 0 8px rgba(232, 196, 104, 0.3); }
  50%      { box-shadow: 0 0 0 1px rgba(2, 7, 5, 0.8), 0 0 26px rgba(232, 196, 104, 0.6); }
}

/* ── the coach card ─────────────────────────────────────────────── */
#tut-card {
  position: fixed;
  width: 410px;
  max-width: calc(100vw - 32px);
  padding: 20px 22px 18px;
  background: var(--mask-3);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  clip-path: var(--notch-sm);
  pointer-events: auto;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
  transition: left 0.25s, top 0.25s;
}

#tut-title {
  font: 700 19px/1.25 var(--f-disp);
  letter-spacing: 1.6px;
  color: var(--gold);
  margin-bottom: 11px;
}
#tut-body {
  font: 400 15px/1.6 var(--f-disp);
  color: var(--silk);
}
#tut-body b { color: var(--gold); font-weight: 600; }
#tut-body .cu { color: var(--copper); font-weight: 600; }

/* the "your turn" strip - shown instead of NEXT when the step is
   waiting on the player to actually do the thing */
#tut-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
  padding: 10px 12px;
  background: rgba(232, 196, 104, 0.07);
  border: 1px dashed rgba(232, 196, 104, 0.45);
  font: 600 13px/1.3 var(--f-disp);
  letter-spacing: 0.6px;
  color: var(--gold);
}
#tut-hint::before {
  content: '▸';
  animation: tut-nudge 1s ease-in-out infinite;
}
@keyframes tut-nudge {
  0%, 100% { transform: translateX(0); opacity: 0.6; }
  50%      { transform: translateX(3px); opacity: 1; }
}

#tut-btns {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 15px;
}
#tut-next {
  font-size: 13px;
  padding: 11px 24px;
}
.tut-hidden { display: none !important; }

/* the finish card sits centred with nothing highlighted behind it */
#tut-card.tut-final { border-left-color: var(--copper); }

@media (max-width: 700px) {
  #tut-card { width: calc(100vw - 24px); padding: 16px 18px 14px; }
  #tut-title { font-size: 17px; }
  #tut-body { font-size: 14px; }
}

/* the card glides between steps and the ring breathes - both are pure
   decoration, so honour a reduced-motion preference and snap instead */
@media (prefers-reduced-motion: reduce) {
  #tut-card { transition: none; }
  .tut-ring { animation: none; }
  #tut-hint::before { animation: none; }
}