/* ui/Tutorial — the tutorial overlay over the scripted tutorial match.
   Contract: ./Tutorial.spec.md

   The player has to be able to see their screen: nothing here darkens, dims
   or covers the arena. One small card at the top centre, under the HUD's
   match readout, and a highlight that is an outline only.                   */

.qc-tut {
  position: fixed;
  inset: 0;
  z-index: 35;
  pointer-events: none;
  /* The card's top edge: just below ui/Hud's match readout. Measured from the
     top, so the card grows downward and never reaches the ship at centre. */
  --tut-top: 152px;
}

/* A ring, not a cutout: no fill, no shadow, nothing dimmed around it. */
.qc-tut__spotlight {
  position: fixed;
  border-radius: var(--qc-radius);
  outline: 2px solid var(--qc-accent-2);
  outline-offset: 2px;
  pointer-events: none;
  animation: qc-tut-pulse 1.6s var(--qc-ease-out) infinite alternate;
}

.qc-tut__prompt {
  position: fixed;
  top: var(--tut-top);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(520px, calc(100vw - 32px));
  padding: 8px 12px 10px;
  color: var(--qc-text);
  background: var(--qc-glass);
  border: 2px solid var(--qc-rarity-legendary);
  border-radius: var(--qc-radius-sm);
  pointer-events: none;
}

.qc-tut__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.qc-tut__progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-width: 0;
  pointer-events: none;
}

.qc-tut__pips {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.qc-tut__pip {
  width: 18px;
  height: 5px;
  background: var(--qc-line-strong);
}

.qc-tut__pip[data-state="done"] { background: var(--qc-hull); }
.qc-tut__pip[data-state="current"] { background: var(--qc-rarity-legendary); }

.qc-tut__mode {
  color: var(--qc-text-dim);
  white-space: nowrap;
}

.qc-tut__skip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 6px 12px;
  margin: -4px -6px -4px 0;
  color: var(--qc-text-dim);
  background: transparent;
  border: 1px solid var(--qc-line-strong);
  border-radius: var(--qc-radius-sm);
  font-size: 0.8rem;
  pointer-events: auto;
}

.qc-tut__skip:hover { color: var(--qc-text); }

.qc-tut__text {
  margin: 0;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

.qc-tut__detail {
  margin: 2px 0 0;
  color: var(--qc-text-dim);
  font-size: 0.85rem;
}

.qc-tut__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.qc-tut__step {
  color: var(--qc-text-faint);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.qc-tut__glyph {
  display: inline-flex;
  gap: 4px;
}

/* Once, not forever. */
.qc-tut__glyph[data-idle="glyph"] {
  animation: qc-tut-nudge 0.9s var(--qc-ease-out) 1;
}

/* Finished: the player has nothing left to do in the arena, so the card may
   sit at the centre. */
.qc-tut__prompt[data-finished] {
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 16px 20px;
  text-align: center;
}

.qc-tut__finish-title {
  margin: 0;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* The rule the tutorial leaves the pilot with, set apart from the detail. */
.qc-tut__finish-note {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--qc-line);
  color: var(--qc-text);
  font-size: 0.85rem;
}

.qc-tut__finish-row {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.qc-tut__finish {
  min-width: 44px;
  min-height: 44px;
  padding: 0 22px;
  pointer-events: auto;
}

@keyframes qc-tut-nudge {
  0%, 100% { transform: none; }
  30% { transform: translateY(-4px) scale(1.12); }
  60% { transform: translateY(0) scale(0.96); }
}

@keyframes qc-tut-pulse {
  from { outline-color: var(--qc-accent-2); outline-offset: 2px; }
  to { outline-color: transparent; outline-offset: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .qc-tut__glyph[data-idle="glyph"],
  .qc-tut__spotlight {
    animation: none;
  }
}

/* A short screen (a phone on its side): the HUD readout is smaller, so the
   card tucks up closer to it. */
@media (max-height: 600px) {
  .qc-tut { --tut-top: 116px; }
}

/* A phone: ui/Hud's top band is padded by the safe area, and so is the card. */
@media (pointer: coarse) {
  .qc-tut__prompt:not([data-finished]) {
    top: calc(var(--tut-top) + env(safe-area-inset-top));
  }
}

/* A phone on its side: across the top centre the card would reach the ship at
   mid-height, so it sits at the left edge under the HUD band instead. It takes
   no pointer, so the move thumb under it still flies. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 600px) {
  .qc-tut__prompt:not([data-finished]) {
    top: calc(96px + env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    transform: none;
    max-width: min(300px, 40vw);
  }
}