/* FTR-010: the COPILOT speech bubble and the Mission Director pop-up, sewn onto the game screen.
   DESIGN.md tokens only (the site's custom properties, with the same values as fallbacks so the file also works
   without styles.css). One authored motion each, exponential ease-out; none under reduced motion.
   The layer never takes pointer events, so the game and the landed patch underneath stay fully tappable. */

.ftr-narr {
  --n-navy: var(--navy, #1D2340);
  --n-gold: var(--gold, #D9A63E);
  --n-cream: var(--cream, #EFE4CC);
  --n-tape: var(--tape, #141414);
  --n-display: var(--display, "Bungee", "Arial Black", sans-serif);
  --n-text: var(--text, "Atkinson Next", "Atkinson Hyperlegible", system-ui, sans-serif);
  --n-ease: cubic-bezier(.16, 1, .3, 1);
  --n-twill: url("img/twill.png");
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none; overflow: hidden;
  container-type: size;
}
.ftr-narr__sr { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- COPILOT: round twill patch with the robot face, plus a sewn speech bubble ----------
   Sits just under the whole HUD (score, hop pips, up to 3 power-up rows on the left, combo and TO MARS on the right
   end at ~21% of the screen) and 8% in from each edge so the comet warning arrows stay visible. The car row is ~82%. */
.ftr-copilot {
  position: absolute; left: 8cqw; top: 22cqh; max-width: 82cqw;
  display: flex; align-items: flex-start; gap: 10px;
  opacity: 0; transform: translateY(-8px) scale(.92); transform-origin: 24px 24px;
  transition: opacity 200ms var(--n-ease), transform 320ms var(--n-ease);
}
.ftr-copilot[data-on="1"] { opacity: 1; transform: none; }

.ftr-copilot__icon {
  position: relative; flex: none; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--n-navy) var(--n-twill) 0 0 / 24px 24px;
  box-shadow: inset 0 0 0 3px var(--n-gold), 0 3px 8px rgba(60, 14, 0, .35);
}
.ftr-copilot__face { width: 32px; height: 32px; image-rendering: pixelated; }

.ftr-copilot__bubble {
  position: relative; min-width: 0;
  padding: 10px 14px 11px;
  border-radius: 14px;
  background: var(--n-navy) var(--n-twill) 0 0 / 24px 24px;
  box-shadow: inset 0 0 0 3px var(--n-gold), 0 4px 10px rgba(60, 14, 0, .3);
}
.ftr-copilot__bubble::before { /* the cream running stitch, inset inside the gold rim */
  content: ""; position: absolute; inset: 6px; border-radius: 8px;
  border: 2px dashed rgba(239, 228, 204, .4);
}
.ftr-copilot__bubble::after { /* the tail, sewn onto the rim, pointing at the copilot */
  content: ""; position: absolute; left: -6px; top: 15px; width: 11px; height: 11px;
  background: var(--n-navy);
  box-shadow: inset 3px -3px 0 0 var(--n-gold); border-bottom-left-radius: 3px; /* gold rim on the two outer edges */
  transform: rotate(45deg);
}
.ftr-copilot__name {
  display: block; margin: 0 0 3px;
  font: 400 clamp(10px, 2.9cqw, 13px)/1.1 var(--n-display); letter-spacing: .06em; text-transform: uppercase;
  color: var(--n-gold);
}
.ftr-copilot__text {
  margin: 0; color: var(--n-cream);
  font: 600 clamp(13px, 4.1cqw, 18px)/1.3 var(--n-text); text-wrap: pretty;
}
.ftr-copilot__rest { visibility: hidden; } /* the untyped part keeps its space, so the bubble never resizes */
.ftr-copilot__credit {
  display: block; margin-top: 4px; color: rgba(239, 228, 204, .75);
  font: 700 clamp(10px, 2.7cqw, 12px)/1.2 var(--n-text); letter-spacing: .02em;
}
.ftr-copilot__credit[hidden] { display: none; }

/* ---------- MISSION DIRECTOR: a black name tape that slides in from the right edge ---------- */
.ftr-director {
  position: absolute; right: 8cqw; top: 22cqh; max-width: 80cqw;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 16px 9px 9px;
  border-radius: 8px; background: var(--n-tape);
  box-shadow: 0 3px 8px rgba(60, 14, 0, .35);
  transform: translateX(calc(100% + 8cqw + 16px));
  transition: transform 460ms var(--n-ease);
}
.ftr-director[data-on="1"] { transform: none; }
.ftr-director::before { /* running stitch */
  content: ""; position: absolute; inset: 5px; border-radius: 6px;
  border: 2px dashed rgba(239, 228, 204, .5);
}
.ftr-director__face {
  position: relative; flex: none; display: grid; place-items: center;
  width: 60px; height: 60px; border-radius: 10px;
  background: var(--n-navy) var(--n-twill) 0 0 / 24px 24px;
  box-shadow: inset 0 0 0 3px var(--n-gold);
}
.ftr-director__face canvas { width: 48px; height: 48px; image-rendering: pixelated; }
.ftr-director__tape { position: relative; min-width: 0; }
.ftr-director__name {
  display: block; color: var(--n-gold);
  font: 400 clamp(10px, 2.8cqw, 13px)/1.1 var(--n-display); letter-spacing: .06em; text-transform: uppercase;
}
.ftr-director__text {
  margin: 3px 0 0; color: var(--n-cream);
  font: 600 clamp(13px, 3.9cqw, 17px)/1.3 var(--n-text); text-wrap: pretty;
}

/* wide screens (desktop game patch): 3x pixels */
@container (min-width: 440px) {
  .ftr-copilot__icon { width: 64px; height: 64px; }
  .ftr-copilot__face { width: 48px; height: 48px; }
  .ftr-copilot__bubble::after { top: 22px; }
  .ftr-copilot { transform-origin: 32px 32px; }
  .ftr-director__face { width: 84px; height: 84px; }
  .ftr-director__face canvas { width: 72px; height: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .ftr-copilot, .ftr-director { transition: none; }
}