/* The tutorial's guide: one card over the game screen and the highlight it
   points with. Inert on every other page — nothing here matches until
   `guide.js` adds `.tutorial` to the body and its card to the screen. The
   highlight rules themselves are written by the guide into a <style> per step;
   this file holds only what they share. */
:root {
  /* Not the selection's yellow and not the hover's white: the guide points
     at things beside both of those, and has to read as a third voice. */
  --tutorial-glow: #5ee1ff;
}

.tutorial-card {
  position: absolute;
  /* Under the pennants, clear of the journal below and the panel to the right;
     above a modal's backdrop so the card stays readable and its buttons live
     while a window is open. */
  top: calc(var(--topbar-h) + 64px + 10px);
  left: var(--pennant-left);
  z-index: 11;
  width: min(320px, calc(100vw - 2 * var(--pennant-left)));
  padding: 12px 14px 10px;
  background: rgb(28 36 51 / 0.96);
  border: 1px solid #3a4558;
  border-left: 3px solid var(--tutorial-glow);
  border-radius: 4px;
  color: #e7e1d3;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.45);
}
.tutorial-kicker {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tutorial-glow);
}
.tutorial-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}
.tutorial-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.tutorial-actions:empty {
  display: none;
}
.tutorial-exit {
  margin-left: auto;
  font-size: 11px;
  color: #9aa3b5;
  text-decoration: none;
}
.tutorial-exit:hover {
  color: #e7e1d3;
  text-decoration: underline;
}

/* One viewport overlay for every rectangular highlight. Keeping the border
   outside the target's own stacking context means that neighbouring rows,
   clipped pennants and the top bar can never paint over the guide. */
.tutorial-highlight-layer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}
.tutorial-highlight-box {
  position: absolute;
  box-sizing: border-box;
  outline: 2px solid var(--tutorial-glow);
  outline-offset: 3px;
  border-radius: 3px;
  animation: tutorial-pulse 1.4s ease-in-out infinite;
}

/* Pressed End turn before the step allowed it: the card answers, not a dialog. */
.tutorial-card.is-nudged {
  animation: tutorial-nudge 0.5s ease;
}
@keyframes tutorial-nudge {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* Locked until the turn's last step: the look only — the block itself is the
   guide's capture handler, which a keyboard cannot get past either. */
body.tutorial-locked #end-turn {
  opacity: 0.45;
}

@keyframes tutorial-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* The guide's outline around a region, drawn in the map's selection layer
   beside the game's own (see `.game-selection-outline` in game.css). */
.game-tutorial-outline {
  fill: none;
  pointer-events: none;
  stroke: var(--tutorial-glow);
  stroke-width: 6;
  stroke-linejoin: round;
  stroke-linecap: round;
  animation: tutorial-pulse 1.4s ease-in-out infinite;
}