/* ═══════════════════════════════════════════
   Dialogue UI — shared between game & arcade
   ═══════════════════════════════════════════ */
#dialogue {
  position: absolute; left: 50%; top: 32px;
  transform: translateX(-50%);
  width: min(560px, 72vw);
  display: flex; align-items: flex-end; gap: 10px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s ease;
  z-index: 8;
}
#dialogue.active { opacity: 1; }

.dlg-portrait {
  width: 80px; height: 80px; border-radius: 6px;
  border: 1px solid var(--c-border);
  object-fit: cover; flex-shrink: 0;
  opacity: 0; transition: opacity 0.25s ease;
  box-shadow: 0 0 14px rgba(0,0,0,0.6);
  display: none;
}
.dlg-portrait.visible { opacity: 1; display: block; }
.dlg-portrait-left { order: -1; }
.dlg-portrait-right { order: 1; }
.dlg-portrait.pilot-border   { border-color: #5ef4d6; box-shadow: 0 0 12px rgba(94,244,214,0.3); }
.dlg-portrait.control-border { border-color: #ffb066; box-shadow: 0 0 12px rgba(255,176,102,0.3); }
.dlg-portrait.unknown-border { border-color: #ff5588; box-shadow: 0 0 12px rgba(255,85,136,0.3); }

.dlg-frame {
  flex: 1; min-width: 0;
  background: linear-gradient(180deg, rgba(4,10,20,0.88) 0%, rgba(2,6,14,0.92) 100%);
  border: 1px solid var(--c-border);
  padding: 10px 16px 12px; position: relative;
  box-shadow: 0 0 24px rgba(94,244,214,0.08), inset 0 0 20px rgba(94,244,214,0.04);
}
.dlg-frame::before, .dlg-frame::after {
  content: ''; position: absolute; width: 10px; height: 10px;
  border-color: var(--c-accent);
}
.dlg-frame::before { top: -1px; left: -1px; border-top: 1px solid; border-left: 1px solid; }
.dlg-frame::after  { bottom: -1px; right: -1px; border-bottom: 1px solid; border-right: 1px solid; }

.dlg-header {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: 'Orbitron', sans-serif; font-size: 11px;
  letter-spacing: 0.25em; text-transform: uppercase;
  padding-bottom: 6px; margin-bottom: 6px;
  border-bottom: 1px solid rgba(94,244,214,0.15);
}
.dlg-speaker { color: var(--c-accent); font-weight: 600; text-shadow: 0 0 10px rgba(94,244,214,0.5); }
.dlg-speaker.pilot   { color: #5ef4d6; }
.dlg-speaker.control  { color: #ffb066; text-shadow: 0 0 10px rgba(255,176,102,0.5); }
.dlg-speaker.unknown  { color: #ff5588; text-shadow: 0 0 10px rgba(255,85,136,0.5); }
.dlg-channel { color: var(--c-muted); font-size: 9px; font-weight: 300; }

.dlg-text {
  font-family: 'Share Tech Mono', monospace; font-size: 16px;
  color: var(--c-text); letter-spacing: 0.04em; line-height: 1.4;
}