/* Campaign mini-games: Conseil's Catalogue (.cls-), Ned's Target Practice (.hrp-) and Nemo's Signal
   Lamp (.sig-). They reuse the encounter shell (.enc-, encounters.css) and add the typing chip that
   sits under the stage (.mg-type). Colours are tokens only. */

/* ---------- the typing chip under the stage ---------- */

.mg-type {
  justify-self: center;
  justify-content: center;
  gap: 4px 14px;
  flex-wrap: wrap;
  width: min(100%, 30rem);
  min-height: 64px;
  padding: 8px 18px;
  border-radius: 22px;
  text-align: center;
  background: var(--sb-card);
  color: var(--sb-card-ink);
  transition: box-shadow 0.2s ease, background 0.2s ease;
}
.mg-type[data-state="live"] {
  box-shadow: 0 3px 0 var(--sb-outline), 0 0 0 4px color-mix(in srgb, var(--sb-glow-color) 55%, transparent);
}
.mg-type-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sb-card-muted);
}
.mg-type.is-empty .mg-type-label { display: none; }
/* HUD chip labels (Netted, Time, Hits, Combo, Lamps, Net, Signal) in sentence case, like the rest of the cartoon UI */
.cls .enc-label,
.hrp .enc-label,
.sig .enc-label {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sb-card-muted);
}
.mg-type-word {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: 0.04em;
}
.mg-type-word:empty { display: none; }
.mg-l {
  display: inline-block;
  min-width: 0.7em;
  text-align: center;
  color: var(--sb-card-ink);
  border-bottom: 3px solid color-mix(in srgb, var(--sb-card-ink) 22%, transparent);
  margin: 0 1px;
}
.mg-l.is-typed {
  color: color-mix(in srgb, var(--accent) 55%, var(--sb-card-ink));
  border-bottom-color: var(--sb-kelp);
}
.mg-l.is-next { border-bottom-color: var(--sb-glow-color); }
.mg-l.is-pop { animation: mg-hop 0.26s var(--ease-spring, ease-out); }
.mg-l.is-wrong { color: var(--sb-danger); border-bottom-color: var(--sb-danger); animation: sb-shake 0.3s linear 1; }
.mg-type.is-miss { animation: sb-wiggle 0.32s ease-in-out 1; }
.mg-type-hint {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--sb-card-muted);
}
.mg-type-hint:empty { display: none; }
@keyframes mg-hop {
  0% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-9px) scale(1.18); }
  100% { transform: translateY(0) scale(1); }
}
html.reduced-motion .mg-l.is-pop,
html.reduced-motion .mg-l.is-wrong,
html.reduced-motion .mg-type.is-miss { animation: none; }
html.reduced-motion .mg-l.is-pop { color: var(--sb-kelp); }

/* ---------- stages ---------- */

.cls-stage,
.hrp-stage,
.sig-stage { background: var(--sb-deep); }

/* the crew bust sits low on the stage at phone width and stays out of the action */
.cls .comp-layer,
.hrp .comp-layer,
.sig .comp-layer { --badge: 64px; }
@media (max-width: 640px) {
  .cls .comp-layer,
  .hrp .comp-layer,
  .sig .comp-layer { --badge: 52px; }
  .mg-type { min-height: 58px; padding: 6px 14px; }

  /* the crew's bubble sits beside the bust, small, so the action stays in view */
  .cls .comp-bubble,
  .hrp .comp-bubble,
  .sig .comp-bubble {
    left: calc(var(--badge) * 1.1 + 34px); /* clear of the swelling, glowing speaker */
    bottom: 14px;
    max-width: calc(100% - var(--badge) * 1.1 - 46px);
    padding: 17px 12px 8px;
    font-size: 0.95rem;
    transform-origin: 0 100%;
  }
  /* the catalogue's jars live at the bottom, so Conseil speaks from the top */
  .cls .comp-bubble {
    left: 10px;
    bottom: auto;
    top: 26px;
    max-width: calc(100% - 20px);
    transform-origin: 0 0;
  }
  .cls .comp-bubble::after,
  .hrp .comp-bubble::after,
  .sig .comp-bubble::after { display: none; }
  .cls .comp-who,
  .hrp .comp-who,
  .sig .comp-who { top: -14px; left: 10px; font-size: 0.85rem; padding: 1px 10px 2px; }

  /* three or four chips and the pause button on one line at 360px */
  .cls .enc-hud,
  .hrp .enc-hud,
  .sig .enc-hud { gap: 6px; }
  .cls .enc-chip,
  .hrp .enc-chip,
  .sig .enc-chip { padding: 4px 9px 4px 7px; gap: 4px; }
  .cls .enc-value,
  .hrp .enc-value,
  .sig .enc-value { font-size: 1rem; }
  .cls .enc-pause,
  .hrp .enc-pause,
  .sig .enc-pause { width: 40px; height: 40px; }
}