/* =========================================
   TERMINAL + DIÁLOGO: Monitor CRT físico
   y caja de diálogo de NPC estilo RPG
   El CRT es un objeto real: bisel de plástico,
   pantalla curva y reflejo de cristal
   ========================================= */

/* Bisel de plástico del monitor */
.crt-bezel {
  background: linear-gradient(160deg, #3b3447 0%, #262031 55%, #1b1626 100%);
  border-radius: 14px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.14),
    inset 0 -3px 6px rgba(0, 0, 0, 0.5),
    0 10px 24px rgba(0, 0, 0, 0.55);
  padding: 16px 16px 24px;
  position: relative;
}

/* LED de encendido */
.crt-bezel::after {
  background-color: var(--neon-cyan);
  border-radius: 50%;
  bottom: 9px;
  box-shadow: 0 0 6px rgba(var(--rgb-cyan), 0.9);
  content: "";
  height: 6px;
  position: absolute;
  right: 18px;
  width: 6px;
}

.terminal-screen {
  background: radial-gradient(ellipse at center, #1d1838 0%, #0d0a1c 85%);
  border-radius: 10px;
  box-shadow:
    inset 0 0 38px rgba(0, 0, 0, 0.85),
    inset 0 0 5px rgba(var(--rgb-cyan), 0.35);
  color: var(--pastel-cyan);
  font-family: var(--font-pixel);
  font-size: 1.2rem;
  line-height: 1.2;
  overflow: hidden;
  padding: 16px;
  position: relative;
}

/* Reflejo de cristal curvo */
.terminal-screen::after {
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.09) 0%, transparent 32%);
  border-radius: 10px;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.terminal-screen .term-path {
  color: var(--text-dim);
  word-break: break-all;
}

.terminal-screen .term-title {
  color: var(--neon-pink);
  font-size: 1.7rem;
  margin: 10px 0;
  text-shadow: 0 0 12px rgba(var(--rgb-pink), 0.55);
}

.terminal-screen p {
  margin: 4px 0;
}

/* --- CAJA DE DIÁLOGO NPC (esto sí es HUD: neón) --- */
.dialog-box {
  background-color: var(--panel-bg-deep);
  border: 2px solid var(--pastel-pink);
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(var(--rgb-pink), 0.3), inset 0 0 0 2px var(--void);
  font-family: var(--font-pixel);
  font-size: 1.35rem;
  line-height: 1.3;
  min-height: 86px;
  padding: 20px 18px 24px;
  position: relative;
}

.dialog-speaker {
  background-color: var(--neon-pink);
  clip-path: var(--clip-chip);
  color: var(--void);
  font-family: var(--font-hud);
  font-size: 0.55rem;
  left: 14px;
  padding: 5px 12px;
  position: absolute;
  text-transform: uppercase;
  top: -12px;
}

.dialog-box p {
  margin: 0;
}

.dialog-next {
  animation: blink 1s step-end infinite;
  bottom: 6px;
  color: var(--neon-pink);
  font-size: 0.8rem;
  position: absolute;
  right: 12px;
}

/* Avatar dentro del marco de TV pixel art */
.custom-tv-container {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 0 auto 24px;
  max-width: 320px;
  position: relative;
  width: 100%;
}

.avatar-base {
  filter: brightness(0.88);
  height: 80%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  width: 80%;
  z-index: 1;
}

.tv-frame-overlay {
  filter: drop-shadow(0 0 14px rgba(var(--rgb-purple), 0.55));
  height: auto;
  pointer-events: none;
  position: relative;
  width: 100%;
  z-index: 2;
}