/*
 * cena.css — os estilos do que o NÚCLEO desenha no DOM: as etiquetas CSS2D e
 * a seta de borda das ajudas tácticas (js/race/aids.js). Vai no pacote
 * (`import 'regata-principe/cena.css'`): o site e a app usam o mesmo. O que é
 * só do site (HUD, painéis, toolbar) fica no styles.css dele.
 *
 * Contrato: uma classe criada por um ficheiro que o package.json exporta tem a
 * regra aqui, não no styles.css do site — o smoke verifica.
 */

/* ── ajudas tácticas (js/race/aids.js) ─────────────────────────────────── */
.aid-label {
  font: 600 12px/1.2 system-ui, sans-serif; color: #fff;
  background: rgba(16, 20, 24, 0.72); border: 1px solid #d8352a;
  border-radius: 5px; padding: 2px 6px; white-space: nowrap;
  pointer-events: none; text-shadow: 0 1px 2px #000;
}
.aid-label.aid-next { font-size: 12px; }   /* a próxima baliza: o estilo base, borda vermelha */
.aid-label.aid-later { font-weight: 500; font-size: 11px; opacity: 0.75; border-color: #5a6670; }
.aid-label.aid-lay { font-size: 11px; font-weight: 500; }
.aid-label.aid-eb { border-color: #43c463; }
.aid-label.aid-bb { border-color: #e8453c; }
.aid-label.aid-shift { font-size: 11px; border-color: #9fd8ff; }
.aid-label.aid-shift.lev { border-color: #7ee787; color: #c8f7cf; }
.aid-label.aid-shift.abat { border-color: #ff9e8a; color: #ffd5cc; }
.aid-label.aid-fav { font-size: 11px; border-color: #ffd54f; color: #ffe89a; }
.aid-label.aid-line { font-size: 11px; border-color: #f2f2ee; }
.aid-label.aid-line.ocs { border-color: #ff4a3d; color: #ffd0cb; background: rgba(90, 16, 12, 0.85); }
.aid-label.aid-boat { font-size: 11px; font-weight: 500; border-width: 2px; }
.aid-label.aid-boat.ghost { opacity: 0.6; font-style: italic; }
.aid-edge {
  position: fixed; z-index: 15; pointer-events: none;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  font: 600 12px system-ui, sans-serif; text-shadow: 0 1px 3px #000;
}
.aid-edge-arrow { font-size: 26px; line-height: 1; }
.aid-edge-dist { color: #fff; margin-top: 2px; }