/* ════════════════════════════════════════════════════
   EL DEBATE · TV Studio UI · v2.1
   ════════════════════════════════════════════════════ */

:root {
  --bg:      #07070d;
  --studio:  #0b0b14;
  --panel:   #0f0f1c;
  --line:    #1a1a2e;
  --text:    #e4eaf8;
  --muted:   #6070a0;

  --thesis-c:    #52c5f0;
  --thesis-glow: rgba(82,197,240,.45);
  --mod-c:       #f0c038;
  --mod-glow:    rgba(240,192,56,.4);
  --anti-c:      #f05080;
  --anti-glow:   rgba(240,80,128,.45);

  --skin:   #f0c890;
  --skin-s: #d4a870;
  --skin-d: #b88048;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body { height: 100%; height: 100dvh; overflow: hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }

/* ════════════════════════════════════════════════════
   LANDING SCREEN
   ════════════════════════════════════════════════════ */
#landing {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  transition: opacity .4s;
}
.landing-gavel { font-size: 3rem; line-height: 1; }
.landing-heading {
  font-size: clamp(2.8rem, 10vw, 6rem);
  letter-spacing: .2em;
  color: #d4a017;
  font-weight: 900;
  margin: 0;
  text-shadow: 0 0 60px rgba(212,160,23,.35);
}
.landing-sub {
  color: #555;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin: 0 0 1.2rem;
}
.landing-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  width: 100%;
  max-width: 600px;
}
.landing-input {
  width: 100%;
  padding: .85rem 1.2rem;
  background: #0c0c0c;
  border: 1px solid #222;
  border-radius: 8px;
  color: #e8e8e8;
  font-size: 1rem;
  text-align: center;
  outline: none;
  font-family: inherit;
  transition: border-color .2s;
}
.landing-input:focus { border-color: #d4a017; }
.landing-btn {
  padding: .75rem 3rem;
  background: #d4a017;
  color: #000;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: .06em;
  transition: background .15s, transform .1s;
  align-self: center;
}
.landing-btn:hover  { background: #e8b820; }
.landing-btn:active { transform: scale(.97); }
.landing-settings-btn {
  margin-top: 1.8rem;
  background: #111;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  color: #777;
  font-size: .85rem;
  cursor: pointer;
  letter-spacing: .05em;
  padding: .5rem 1.2rem;
  transition: color .2s, border-color .2s;
  font-family: inherit;
}
.landing-settings-btn:hover { color: #bbb; border-color: #444; }
.landing-install-btn {
  margin-top: .5rem;
  background: #0c1a0c;
  border: 1px solid #1a4a1a;
  border-radius: 8px;
  color: #4caf50;
  font-size: .85rem;
  cursor: pointer;
  letter-spacing: .05em;
  padding: .5rem 1.2rem;
  transition: color .2s, border-color .2s;
  font-family: inherit;
}
.landing-install-btn:hover { color: #8bc34a; border-color: #2e7d32; }

.landing-preload {
  margin-top: 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  opacity: 1;
  transition: opacity .6s ease;
}
.landing-preload.ready { opacity: 0; pointer-events: none; }
.landing-preload-bar-wrap {
  width: 180px;
  height: 3px;
  background: rgba(255,255,255,.1);
  border-radius: 2px;
  overflow: hidden;
}
.landing-preload-bar {
  height: 100%;
  width: 0%;
  background: #d4a017;
  border-radius: 2px;
  transition: width .4s ease;
}
.landing-preload-text {
  font-size: .7rem;
  color: rgba(255,255,255,.35);
  letter-spacing: .05em;
}

/* ════════════════════════════════════════════════════
   CABECERA VIDEO OVERLAY
   ════════════════════════════════════════════════════ */
#cabecera-wrap {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
  background: #000;
  overflow: hidden;
}
#cabecera-wrap.active { display: block; }

/* Capa de fondo: mismo vídeo borroso — scale(1.1) tapa los bordes del blur */
#cabecera-blur {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(22px) brightness(0.3) saturate(1.5);
  transform: scale(1.1);
  pointer-events: none;
}

/* Capa principal: vídeo centrado a su aspect ratio natural */
#cabecera-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  z-index: 1;
}

#cabecera-fade {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 155;
  opacity: 0;
  pointer-events: none;
  transition: opacity 2.5s ease-in;
}
#cabecera-fade.fading { opacity: 1; }

.no-key-warning {
  background: #1a0a00;
  border: 1px solid #7a3800;
  border-radius: 6px;
  color: #f5a623;
  padding: .6rem .9rem;
  font-size: .85rem;
  margin-bottom: .5rem;
}

.skip-cabecera {
  position: fixed;
  bottom: 1.8rem;
  right: 1.8rem;
  z-index: 160;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.7);
  padding: .45rem 1.1rem;
  border-radius: 6px;
  font-size: .82rem;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: .04em;
  transition: background .15s, color .15s;
  backdrop-filter: blur(6px);
}
.skip-cabecera:hover { background: rgba(0,0,0,.75); color: #fff; }

/* ════════════════════════════════════════════════════
   INTRO OVERLAY
   ════════════════════════════════════════════════════ */
#intro {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Flash effect */
.intro-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  animation: introFlash .6s ease forwards;
  pointer-events: none;
  z-index: 5;
}
@keyframes introFlash {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* Dramatic rays behind logo */
.intro-bg-rays {
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 0deg at 50% 42%,
    rgba(200,160,40,.06) 0deg, transparent 10deg,
    rgba(200,160,40,.06) 20deg, transparent 30deg,
    rgba(200,160,40,.06) 40deg, transparent 50deg,
    rgba(200,160,40,.06) 60deg, transparent 70deg,
    rgba(200,160,40,.06) 80deg, transparent 90deg,
    rgba(200,160,40,.06) 100deg, transparent 110deg,
    rgba(200,160,40,.06) 120deg, transparent 130deg,
    rgba(200,160,40,.06) 140deg, transparent 150deg,
    rgba(200,160,40,.06) 160deg, transparent 170deg,
    rgba(200,160,40,.06) 180deg, transparent 190deg,
    rgba(200,160,40,.06) 200deg, transparent 210deg,
    rgba(200,160,40,.06) 220deg, transparent 230deg,
    rgba(200,160,40,.06) 240deg, transparent 250deg,
    rgba(200,160,40,.06) 260deg, transparent 270deg,
    rgba(200,160,40,.06) 280deg, transparent 290deg,
    rgba(200,160,40,.06) 300deg, transparent 310deg,
    rgba(200,160,40,.06) 320deg, transparent 330deg,
    rgba(200,160,40,.06) 340deg, transparent 350deg,
    rgba(200,160,40,.06) 360deg
  );
  animation: raysRotate 8s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes raysRotate { to { transform: rotate(360deg); } }

.intro-scanlines {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg, rgba(255,255,255,.025) 0px, rgba(255,255,255,.025) 1px,
    transparent 1px, transparent 4px
  );
  pointer-events: none;
  z-index: 2;
}

/* Top strip */
.intro-top-strip {
  position: absolute;
  top: 24px;
  left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32px;
  font-size: 12px;
  letter-spacing: 2px;
  color: #555;
  text-transform: uppercase;
  z-index: 3;
  animation: fadeIn .5s ease .1s both;
}
.intro-channel { color: #444; }
.intro-live-badge {
  background: #c00;
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  animation: livePulse 1s steps(1) infinite;
}
@keyframes livePulse { 50% { opacity: .4; } }
.intro-date { color: #444; }

/* Center logo */
.intro-center {
  position: relative;
  z-index: 3;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.intro-el-wrap {
  font-size: clamp(20px, 3.5vw, 38px);
  font-weight: 300;
  letter-spacing: 22px;
  color: #c8a040;
  font-family: Georgia, "Times New Roman", serif;
  animation: introElIn .5s ease .1s both;
  text-indent: 22px;
}
@keyframes introElIn {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: none; }
}

.intro-debate-wrap {
  display: flex;
  gap: 4px;
  line-height: 1;
}
.dl {
  display: inline-block;
  font-size: clamp(72px, 13vw, 140px);
  font-weight: 900;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  text-shadow:
    0 0 40px rgba(200,160,40,.3),
    0 0 80px rgba(200,160,40,.15),
    0 4px 20px rgba(0,0,0,.8);
  animation: letterDrop .45s cubic-bezier(.34,1.56,.64,1) both;
  animation-delay: calc(var(--i) * 0.08s + 0.25s);
}
@keyframes letterDrop {
  from { opacity: 0; transform: translateY(-60px) scale(1.4); }
  to   { opacity: 1; transform: none; }
}

.intro-divider {
  width: min(500px, 88vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, #c8a040 20%, #c8a040 80%, transparent);
  animation: dividerGrow .7s ease .8s both;
}
@keyframes dividerGrow {
  from { width: 0; opacity: 0; }
  to   { opacity: 1; }
}

.intro-subtitle-line {
  font-size: 13px;
  letter-spacing: 4px;
  color: #666;
  text-transform: uppercase;
  animation: fadeIn .5s ease 1s both;
}

/* Topic block */
.intro-topic-block {
  position: relative;
  z-index: 3;
  text-align: center;
  margin-top: 28px;
  animation: fadeUp .5s ease both;
}
.intro-topic-label {
  font-size: 10px;
  letter-spacing: 4px;
  color: #888;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.intro-topic-text {
  font-size: clamp(15px, 2.2vw, 22px);
  color: #e8dfc0;
  font-style: italic;
  font-family: Georgia, serif;
  max-width: 560px;
  line-height: 1.4;
}

/* Credits block */
.intro-credits-block {
  position: relative;
  z-index: 3;
  text-align: center;
  margin-top: 20px;
  animation: fadeUp .5s ease both;
}
.intro-credits-vs {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
}
.intro-cred {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.cred-role {
  font-size: 10px;
  letter-spacing: 3px;
  font-weight: 700;
}
.thesis-cred .cred-role  { color: var(--thesis-c); }
.anti-cred .cred-role    { color: var(--anti-c); }
.cred-name {
  font-size: 14px;
  color: #ccc;
  font-style: italic;
  max-width: 180px;
  line-height: 1.3;
}
.intro-vs-badge {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 3px;
  color: #c8a040;
  border: 2px solid #c8a040;
  border-radius: 50%;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.intro-moderator-cred {
  margin-top: 10px;
  font-size: 12px;
  color: #666;
  letter-spacing: 1px;
}
.intro-moderator-cred span { color: #999; }

@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; } }

#intro.fade-out { animation: introFadeOut .7s ease forwards; }
@keyframes introFadeOut { to { opacity: 0; pointer-events: none; } }

/* ════════════════════════════════════════════════════
   STAGE LAYOUT
   ════════════════════════════════════════════════════ */
#stage {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* Ambient studio light */
#stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 85% 45% at 50% 15%, rgba(30,30,80,.35) 0%, transparent 70%),
    radial-gradient(ellipse 30% 25% at 22% 55%, rgba(82,197,240,.06) 0%, transparent 60%),
    radial-gradient(ellipse 30% 25% at 78% 55%, rgba(240,80,128,.06) 0%, transparent 60%);
  pointer-events: none;
}

/* ── Topbar ── */
#topbar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(7,7,13,.85);
  backdrop-filter: blur(10px);
}
#brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-family: Georgia, serif;
  font-size: 18px;
}
.brand-gavel { font-size: 20px; }
#topbar-right { display: flex; align-items: center; gap: 10px; }
.avatar-mode-badge {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.75);
  user-select: none;
}
.avatar-mode-badge.on {
  color: #fff;
  border-color: rgba(240,192,56,.35);
  box-shadow: 0 0 18px rgba(240,192,56,.12);
}
.avatar-mode-badge.fail {
  color: #fff;
  border-color: rgba(240,80,128,.35);
  box-shadow: 0 0 18px rgba(240,80,128,.12);
}
.on-air-badge {
  background: #c00;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 4px 10px;
  border-radius: 4px;
  animation: livePulse 1s steps(1) infinite;
}
#btnSettings {
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  width: 34px; height: 34px;
  cursor: pointer;
  font-size: 15px;
  transition: all .15s;
}
#btnSettings:hover { background: var(--panel); color: var(--text); }

/* ════════════════════════════════════════════════════
   DEBATE STAGE
   ════════════════════════════════════════════════════ */
#debate-stage {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  min-height: 0;
}

#stage3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 28%, rgba(60,60,100,.28) 0%, transparent 70%),
    linear-gradient(180deg, #15121d 0%, #0d0b14 55%, #07060b 100%);
}

/* Cuando hay escena compartida 3D: escondemos figuras 2D y mesa 2D porque la 3D ya las trae */
.char-head-slot,
.char-figure,
.char-glow,
.sound-bars,
#debate-table,
.studio-floor,
.studio-lights {
  display: none !important;
}

/* En 3D: cada personaje posicionado individualmente vía proyección 3D (JS setea top/left) */
#characters {
  position: absolute;
  inset: 0;
  display: block;
  max-width: none;
  width: 100%;
  padding: 0;
  z-index: 6;
  pointer-events: none;
}
#characters .character {
  position: absolute;
  transform: translateX(-50%);
  gap: 2px;
  text-align: center;
}
#characters .character.speaking { transform: translateX(-50%) translateY(-6px); }
#characters .character.idle     { transform: translateX(-50%); filter: brightness(.55) saturate(.8); }
#characters .char-avatar {
  display: none !important;
}
#characters .char-name {
  text-shadow: 0 2px 10px rgba(0,0,0,.8), 0 0 3px rgba(0,0,0,.8);
  font-weight: 700;
}
#characters .char-role {
  text-shadow: 0 1px 6px rgba(0,0,0,.9);
  font-size: 10px;
}
/* speaking/idle overrides están en el bloque 3D de arriba */

/* Studio floor gradient */
.studio-floor {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(14,14,30,.5) 40%,
    rgba(10,10,20,.8) 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* Studio spotlights (overhead) */
.studio-lights {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 3;
}
.studio-light {
  position: absolute;
  top: -10%;
  width: 160px;
  height: 70%;
  clip-path: polygon(35% 0%, 65% 0%, 100% 100%, 0% 100%);
  opacity: .06;
  filter: blur(12px);
}
.sl-left   { left: 12%; background: var(--thesis-c); }
.sl-center { left: 50%; transform: translateX(-50%); background: var(--mod-c); }
.sl-right  { right: 12%; background: var(--anti-c); }

/* ── Characters ── */
#characters {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(16px, 5vw, 72px);
  padding: 16px 16px 0;
  width: 100%;
  max-width: 920px;
}

.character {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), filter .4s ease;
}
.character.speaking {
  transform: translateY(-14px);
}
.character.idle {
  filter: brightness(.55) saturate(.7);
  transform: translateY(6px) scale(.96);
}

/* ── Avatar glow ── */
.char-avatar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.char-glow {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 100px; height: 100px;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}
#char-thesis    .char-glow { background: radial-gradient(var(--thesis-glow), transparent 65%); }
#char-moderator .char-glow { background: radial-gradient(var(--mod-glow),    transparent 65%); }
#char-antithesis .char-glow { background: radial-gradient(var(--anti-glow),   transparent 65%); }
.character.speaking .char-glow { opacity: 1; }

/* ════ CSS CHARACTER FIGURE ════ */
.char-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* Hair */
.hair {
  position: relative;
  z-index: 4;
  width: clamp(56px,9vw,80px);
  height: clamp(22px,3.5vw,32px);
  border-radius: 50% 50% 0 0;
  margin-bottom: -4px;
}
.h-thesis { background: linear-gradient(180deg, #2a1a0a, #3d2515); }
.h-mod    {
  background: linear-gradient(180deg, #707070, #909090);
  /* Salt-and-pepper / distinguished grey */
  background-image:
    radial-gradient(circle at 30% 60%, #c0c0c0 1px, transparent 1px),
    radial-gradient(circle at 70% 40%, #484848 1px, transparent 1px),
    linear-gradient(180deg, #707070, #909090);
}
.h-anti   {
  background: linear-gradient(180deg, #14103a, #1e1850);
  /* Dark navy */
}

/* Head */
.head {
  position: relative;
  z-index: 3;
  width: clamp(64px,10vw,90px);
  height: clamp(64px,10vw,90px);
  border-radius: 48% 48% 42% 42% / 52% 52% 48% 48%;
  overflow: visible;
}

/* Face */
.face {
  position: absolute;
  inset: 6% 7%;
  background: var(--skin);
  border-radius: 46% 46% 38% 38% / 50% 50% 44% 44%;
  overflow: hidden;
}
.face-mod  { background: #f2d0a0; }
.face-anti { background: #eed0b8; }

/* Eyebrows */
.eyebrows {
  display: flex;
  justify-content: space-around;
  padding: 0 16%;
  position: absolute;
  top: 16%; left: 0; right: 0;
}
.brow {
  width: 22%; height: 3.5px;
  background: #2a1a0a;
  border-radius: 2px;
}
.brow-authoritative {
  height: 4px;
  background: #4a3a2a;
  width: 24%;
}
.brow-arch {
  transform: rotate(-10deg);
  background: #18103a;
}
.brow-skeptic {
  transform: rotate(8deg);
  background: #18103a;
}
.face-mod .brow { background: #5a4a3a; }

/* Eyes */
.eyes {
  display: flex;
  justify-content: space-around;
  padding: 0 12%;
  position: absolute;
  top: 28%; left: 0; right: 0;
  gap: 0;
}
.eye {
  width: 20%; aspect-ratio: 1;
  background: #fff;
  border-radius: 50%;
  position: relative;
  border: 1px solid rgba(0,0,0,.1);
}
.pupil {
  position: absolute;
  width: 55%; height: 55%;
  background: #1a1a2a;
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}
.gleam {
  position: absolute;
  width: 28%; height: 28%;
  background: #fff;
  border-radius: 50%;
  top: 20%; left: 55%;
}
.eye-anti .pupil { background: #2a103a; }

/* Glasses (El Analítico) */
.glasses {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 8%;
  position: absolute;
  top: 26%; left: 0; right: 0;
  pointer-events: none;
}
.glass-frame {
  width: 26%; height: 22%;
  border: 1.5px solid rgba(40,40,40,.55);
  border-radius: 4px;
  background: rgba(200,220,255,.06);
}
.glass-bridge {
  width: 12%;
  height: 1.5px;
  background: rgba(40,40,40,.45);
  margin-top: -6%;
}

/* Nose */
.nose {
  position: absolute;
  bottom: 40%; left: 50%;
  transform: translateX(-50%);
  width: 8%; height: 8%;
  background: var(--skin-d);
  border-radius: 50%;
  opacity: .5;
}

/* Mouth */
.mouth-area {
  position: absolute;
  bottom: 16%; left: 50%;
  transform: translateX(-50%);
  width: 44%;
  display: flex;
  justify-content: center;
}
.mouth {
  width: 100%; height: 12%;
  background: #c06060;
  border-radius: 0 0 50% 50%;
  transform-origin: top center;
  min-height: 5px;
  transition: height .06s ease;
}
.mouth-mod { background: #b07050; }
.mouth-smirk {
  background: #c06070;
  border-radius: 0 40% 50% 20%;
  transform: rotate(-4deg);
}

/* Speaking: mouth animates */
.character.speaking .mouth {
  animation: mouthTalk .16s ease-in-out infinite alternate;
}
@keyframes mouthTalk {
  from { transform: scaleY(.4) rotate(0deg); }
  to   { transform: scaleY(1.6) rotate(0deg); }
}
.character.speaking .mouth-smirk {
  animation: mouthTalkSmirk .16s ease-in-out infinite alternate;
}
@keyframes mouthTalkSmirk {
  from { transform: scaleY(.4) rotate(-4deg); }
  to   { transform: scaleY(1.5) rotate(-2deg); }
}

/* Neck */
.neck {
  width: clamp(16px,2.5vw,22px);
  height: clamp(8px,1.2vw,12px);
  background: var(--skin-s);
  z-index: 2;
  margin-top: -2px;
}

/* Body (suit) */
.body {
  position: relative;
  width: clamp(58px,9vw,82px);
  height: clamp(40px,6vw,54px);
  border-radius: 14px 14px 0 0;
  z-index: 2;
  overflow: hidden;
}
.b-thesis {
  background: linear-gradient(180deg, #1c3458, #0d1f38);
  box-shadow: inset 0 1px 0 rgba(82,197,240,.18);
}
.b-mod {
  background: linear-gradient(180deg, #222222, #111111);
  box-shadow: inset 0 1px 0 rgba(240,192,56,.12);
}
.b-anti {
  background: linear-gradient(180deg, #381226, #200a16);
  box-shadow: inset 0 1px 0 rgba(240,80,128,.18);
}

/* Lapels */
.lapel-l, .lapel-r {
  position: absolute;
  top: 0;
  width: 36%; height: 80%;
}
.lapel-l {
  left: 0;
  background: rgba(255,255,255,.06);
  clip-path: polygon(0 0, 100% 0, 60% 100%, 0 100%);
}
.lapel-r {
  right: 0;
  background: rgba(255,255,255,.04);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 40% 100%);
}
.shirt-strip {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 30%; height: 90%;
  background: rgba(255,255,255,.08);
}

/* Tie */
.tie {
  position: absolute;
  top: 5px; left: 50%;
  transform: translateX(-50%);
  width: 18%; height: 62%;
  clip-path: polygon(30% 0%, 70% 0%, 90% 100%, 10% 100%);
}
.t-thesis { background: var(--thesis-c); opacity: .75; }
.t-anti   { background: var(--anti-c);   opacity: .65; }

/* Bow tie (moderator) */
.bow-tie {
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
}
.bow-left, .bow-right {
  width: 10px; height: 8px;
  background: var(--mod-c);
  opacity: .75;
  border-radius: 1px;
}
.bow-left  { clip-path: polygon(0 0, 100% 30%, 100% 70%, 0 100%); }
.bow-right { clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 70%); }
.bow-knot {
  width: 5px; height: 5px;
  background: #c8900a;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Sound bars ── */
.sound-bars {
  display: flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 16px;
  opacity: 0;
  transition: opacity .2s;
}
.character.speaking .sound-bars { opacity: 1; }
.sound-bars span {
  width: 2.5px;
  min-height: 3px;
  border-radius: 1.5px;
  animation: sBar .5s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * 0.09s);
}
.sb-thesis span { background: var(--thesis-c); }
.sb-mod    span { background: var(--mod-c); }
.sb-anti   span { background: var(--anti-c); }
@keyframes sBar {
  from { height: 3px; }
  to   { height: 15px; }
}

/* ── Name plate ── */
.char-plate { text-align: center; }
.char-name {
  font-size: clamp(11px,1.8vw,14px);
  font-weight: 600;
  color: var(--text);
  transition: color .3s;
  white-space: nowrap;
}
.char-role {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2.5px;
  margin-top: 2px;
}
.cr-thesis { color: var(--thesis-c); }
.cr-mod    { color: var(--mod-c); }
.cr-anti   { color: var(--anti-c); }

#char-thesis.speaking    .char-name { color: var(--thesis-c); }
#char-moderator.speaking .char-name { color: var(--mod-c); }
#char-antithesis.speaking .char-name { color: var(--anti-c); }

/* ════════════════════════════════════════════════════
   DEBATE TABLE
   ════════════════════════════════════════════════════ */
#debate-table {
  width: 100%;
  max-width: 900px;
  position: relative;
  z-index: 4;
  margin-top: 6px;
}

.table-top {
  width: 100%;
  height: clamp(40px,5.5vh,64px);
  background: linear-gradient(180deg, #2e1e08 0%, #1c1206 60%, #110d04 100%);
  border-top: 2.5px solid #6a4a1a;
  border-left: 1.5px solid #3e2a0c;
  border-right: 1.5px solid #3e2a0c;
  border-radius: 6px 6px 0 0;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 16px;
  box-shadow:
    0 -6px 28px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -1px 0 rgba(0,0,0,.5);
}
/* Wood grain */
.table-top::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    88deg,
    rgba(255,255,255,.012) 0px,
    rgba(255,255,255,.012) 1px,
    transparent 1px, transparent 8px
  );
  border-radius: inherit;
  pointer-events: none;
}

.table-mic {
  font-size: clamp(14px,2vw,20px);
  opacity: .5;
}
.thesis-mic { justify-self: start; }
.anti-mic   { justify-self: end; }

.table-nameplate-row {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}
.table-logo-center {
  font-size: clamp(9px,1.3vw,13px);
  letter-spacing: 3px;
  color: rgba(200,160,60,.6);
  font-family: Georgia, serif;
  font-weight: 700;
  white-space: nowrap;
}
.table-np {
  font-size: 10px;
  letter-spacing: 1px;
  font-style: italic;
  opacity: .6;
}
.thesis-np { color: var(--thesis-c); }
.anti-np   { color: var(--anti-c); }

/* ════════════════════════════════════════════════════
   SUBTITLES
   ════════════════════════════════════════════════════ */
#subtitles {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  min-height: 52px;
  background: rgba(0,0,0,.78);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
#sub-inner {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  min-width: 0;
}
#sub-speaker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  flex-shrink: 0;
  min-width: 100px;
  transition: color .3s;
}
#subtitles[data-role="thesis"]     #sub-speaker { color: var(--thesis-c); }
#subtitles[data-role="moderator"]  #sub-speaker { color: var(--mod-c); }
#subtitles[data-role="antithesis"] #sub-speaker { color: var(--anti-c); }
#sub-text {
  font-size: clamp(13px,1.8vw,17px);
  line-height: 1.45;
  color: var(--text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-width: 0;
}
#btnTranscript {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  width: 28px; height: 28px;
  cursor: pointer;
  font-size: 15px;
  margin-right: 12px;
  transition: all .15s;
}
#btnTranscript:hover { background: var(--panel); color: var(--text); }
#btnTranscript.active { color: var(--text); border-color: #4060a0; }

/* ════════════════════════════════════════════════════
   TRANSCRIPT
   ════════════════════════════════════════════════════ */
#transcript {
  position: relative;
  z-index: 10;
  max-height: 150px;
  overflow-y: auto;
  background: rgba(0,0,0,.55);
  border-top: 1px solid var(--line);
  padding: 8px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#transcript::-webkit-scrollbar { width: 3px; }
#transcript::-webkit-scrollbar-thumb { background: var(--line); }

.te {
  display: flex;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.45;
  animation: teIn .2s ease;
}
@keyframes teIn { from { opacity: 0; transform: translateY(4px); } }
.te-role {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.8px;
  padding-top: 2px;
  flex-shrink: 0;
  width: 72px;
  text-transform: uppercase;
}
.te.thesis    .te-role { color: var(--thesis-c); }
.te.moderator .te-role { color: var(--mod-c); }
.te.antithesis .te-role { color: var(--anti-c); }
.te-text { color: #9098c0; }

/* ════════════════════════════════════════════════════
   CONTROLS
   ════════════════════════════════════════════════════ */
#controls {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px 16px;
  background: rgba(7,7,13,.9);
  border-top: 1px solid var(--line);
}

#topicInput {
  flex: 1;
  background: rgba(255,255,255,.055);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 16px;
  font-size: 14.5px;
  color: var(--text);
  outline: none;
  transition: border-color .15s, background .15s;
  min-width: 0;
}
#topicInput:focus {
  border-color: #4060a0;
  background: rgba(255,255,255,.08);
}
#topicInput:disabled { opacity: .45; }

#ctrl-btns { display: flex; gap: 8px; flex-shrink: 0; }

.btn-start, .btn-stop {
  padding: 11px 26px;
  border-radius: 10px;
  border: none;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}
.btn-start {
  background: linear-gradient(135deg, #5070ee, #3850cc);
  color: #fff;
  box-shadow: 0 4px 18px rgba(80,112,238,.4);
}
.btn-start:hover:not(:disabled) {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(80,112,238,.55);
}
.btn-start:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn-stop {
  background: rgba(200,60,60,.12);
  color: #f08080;
  border: 1px solid rgba(200,60,60,.25);
}
.btn-stop:hover { background: rgba(200,60,60,.2); }

/* ════════════════════════════════════════════════════
   SETTINGS DIALOG
   ════════════════════════════════════════════════════ */
dialog {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--text);
  padding: 0;
  width: min(460px, 94vw);
  box-shadow: 0 30px 80px rgba(0,0,0,.7);
}
dialog::backdrop { background: rgba(0,0,0,.7); }
.dlg-form {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dlg-form h2 { font-size: 18px; font-weight: 700; }
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.field a { color: #6080e0; font-size: 11px; margin-left: 6px; }
.field small { font-size: 11px; color: #404060; }
.field input[type=password],
.field input[type=number] {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 13px;
  font-size: 14px;
  color: var(--text);
  outline: none;
}
.field input:focus { border-color: #4060a0; }
.toggle-row { flex-direction: row; gap: 18px; flex-wrap: wrap; }
.toggle-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  cursor: pointer;
}
.toggle-label input { accent-color: #5070ee; }
.dlg-form menu {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  list-style: none;
}
.dlg-form menu button {
  padding: 9px 18px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.btn-primary {
  background: linear-gradient(135deg, #5070ee, #3850cc) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* ════════════════════════════════════════════════════
   CHARACTER HEAD SLOT — encuadre busto para 3D / SVG
   ════════════════════════════════════════════════════ */
.char-head-slot {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: clamp(100px, 15vw, 160px);
  height: clamp(120px, 18vw, 200px);
  overflow: hidden;
  border-radius: 14px;
  background: radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.09), rgba(0,0,0,.28) 60%, rgba(0,0,0,.45));
  box-shadow:
    0 20px 50px rgba(0,0,0,.65),
    inset 0 0 0 1px rgba(255,255,255,.07);
  position: relative;
}
.char-head-slot canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Emotion flashes ── */
.character.emotion-angry {
  animation: emotionAngry .5s ease;
}
.character.emotion-amused {
  animation: emotionAmused .4s ease;
}
@keyframes emotionAngry {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-5px) translateY(-2px); }
  40%  { transform: translateX(5px) translateY(-2px); }
  60%  { transform: translateX(-3px); }
  80%  { transform: translateX(3px); }
  100% { transform: translateX(0); }
}
@keyframes emotionAmused {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.04) translateY(-4px); }
  100% { transform: scale(1); }
}
.char-svg {
  width: clamp(68px, 11vw, 98px);
  height: auto;
  display: block;
  overflow: visible;
}

/* Animated SVG mouth when speaking */
.character.speaking .char-mouth {
  animation: svgMouthTalk .14s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes svgMouthTalk {
  from { transform: scaleY(0.15); }
  to   { transform: scaleY(3); }
}

/* Female: hide tie/bow-tie (SVG already shows no tie) */
.char-figure.female .tie,
.char-figure.female .bow-tie { display: none; }

/* Female: soft brooch on shirt */
.char-figure.female .shirt-strip::after {
  content: "◆";
  position: absolute;
  top: 5px; left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  color: rgba(255,220,180,.8);
}

/* ════════════════════════════════════════════════════
   RESPONSIVE — MÓVIL
   ════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Topbar más compacto */
  #topbar { padding: 8px 14px; }
  #brand { font-size: 15px; gap: 7px; }
  .brand-gavel { font-size: 17px; }
  .avatar-mode-badge { display: none; }
  #btnSettings { width: 30px; height: 30px; font-size: 14px; }
  .on-air-badge { font-size: 10px; padding: 3px 7px; }

  /* Controls: input arriba, botones abajo */
  #controls { flex-wrap: wrap; padding: 10px 14px 12px; gap: 8px; }
  #topicInput { flex: 1 1 100%; order: -1; font-size: 14px; padding: 10px 14px; }
  #ctrl-btns { width: 100%; }
  .btn-start, .btn-stop {
    flex: 1;
    padding: 12px 16px;
    font-size: 14px;
    min-height: 44px;
  }

  /* Subtítulos más compactos */
  #subtitles { min-height: 44px; }
  #sub-inner { padding: 8px 12px; gap: 7px; }
  #sub-speaker { font-size: 9px; min-width: 70px; letter-spacing: 1.5px; }
  #sub-text { font-size: 12px; }
  #btnTranscript { width: 26px; height: 26px; margin-right: 8px; }

  /* Transcript más pequeño */
  #transcript { max-height: 100px; padding: 6px 14px; }
  .te { font-size: 11.5px; }
  .te-role { width: 60px; font-size: 8px; }

  /* Placas de personaje más pequeñas */
  .char-name { font-size: 10px; }
  .char-role { font-size: 8px; letter-spacing: 1px; }

  /* Landing: ajustar padding para pantallas pequeñas */
  #landing { padding: 1.5rem; gap: .7rem; }
  .landing-input { font-size: 14px; padding: 12px 14px; }
  .landing-btn { font-size: 15px; padding: 13px 28px; }
  .landing-preload-bar-wrap { width: 140px; }

  /* Tabla: ocultar nameplates laterales */
  .table-np { display: none; }
  .table-logo-center { font-size: 10px; letter-spacing: .08em; }
}

/* ════════════════════════════════════════════════════
   MOBILE LANDSCAPE — debate stage
   ════════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 500px) {
  /* Topbar mínimo para ceder espacio al canvas */
  #topbar { padding: 5px 12px; }
  #brand { font-size: 13px; gap: 6px; }
  .brand-gavel { font-size: 14px; }
  #btnSettings { width: 26px; height: 26px; font-size: 12px; }
  .on-air-badge { font-size: 9px; padding: 2px 6px; }
  .avatar-mode-badge { display: none; }

  /* Subtítulos mínimos */
  #subtitles { min-height: 34px; }
  #sub-inner { padding: 5px 10px; gap: 6px; }
  #sub-speaker { font-size: 8px; min-width: 55px; letter-spacing: 1px; }
  #sub-text { font-size: 11px; line-height: 1.3; }
  #btnTranscript { width: 24px; height: 24px; font-size: 11px; margin-right: 6px; }

  /* Placas de personaje más pequeñas */
  .char-plate { padding: 3px 8px 4px; gap: 1px; }
  .char-name { font-size: 9px; }
  .char-role { font-size: 7px; letter-spacing: 0.5px; }

  /* Controls compactos */
  #controls { padding: 5px 12px 7px; gap: 6px; flex-wrap: nowrap; }
  #topicInput { font-size: 13px; padding: 7px 10px; }
  .btn-start, .btn-stop { padding: 8px 14px; font-size: 13px; min-height: 36px; }
}

/* ════════════════════════════════════════════════════
   CHARACTER CASTING GALLERY
   ════════════════════════════════════════════════════ */
.landing-cast {
  width: 100%;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin: 1.1rem 0 1rem;
}
.cast-block {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.cast-block-label {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 0 .25rem;
  margin-bottom: .3rem;
}
.cast-label-pick { color: #8a90b8; }

.cast-row {
  display: flex;
  gap: .55rem;
  overflow-x: auto;
  padding-bottom: .25rem;
  scrollbar-width: none;
}
.cast-row::-webkit-scrollbar { display: none; }

.cast-card {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  background: #0d0d18;
  border: 1.5px solid #1e1e35;
  border-radius: 7px;
  padding: .5rem .4rem .45rem;
  cursor: pointer;
  transition: border-color .15s, transform .1s;
  font-family: inherit;
}
.cast-card:hover { border-color: #3a3a60; transform: translateY(-1px); }
.cast-card.selected { border-color: #52c5f0; }
#castAnti .cast-card.selected { border-color: #f05080; }

.cast-card-img {
  width: 70px;
  height: 88px;
  border-radius: 5px;
  overflow: hidden;
  background: #13131f;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cast-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.cast-card-img.no-img::after {
  content: "👤";
  font-size: 2rem;
  opacity: .4;
}
.cast-card-name {
  font-size: .66rem;
  color: #8a90b8;
  letter-spacing: .04em;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}
.cast-card-tag {
  font-size: .52rem;
  color: #4a5070;
  text-align: center;
  letter-spacing: .03em;
  white-space: nowrap;
  margin-top: -.1rem;
}
.cast-card-info {
  position: absolute;
  top: 3px; right: 3px;
  width: 16px; height: 16px;
  background: rgba(255,255,255,.06);
  border: none;
  border-radius: 50%;
  color: #4a5070;
  font-size: .55rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  transition: color .15s, background .15s;
}
.cast-card:hover .cast-card-info,
.cast-card-info:focus { color: #8a90b8; background: rgba(255,255,255,.12); }
.cast-card { position: relative; }
.cast-card-badge {
  position: absolute; top: 3px; left: 3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  font-size: .55rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.badge-a { background: #52c5f0; color: #000; }
.badge-b { background: #f05080; color: #fff; }
.cast-card.sel-a { border-color: #52c5f0; }
.cast-card.sel-b { border-color: #f05080; }
.cast-card.sel-a .cast-card-name { color: #c5d8f0; }
.cast-card.sel-b .cast-card-name { color: #f0c5d0; }
.cast-card.sel-a .cast-card-tag  { color: #52c5f066; }
.cast-card.sel-b .cast-card-tag  { color: #f0508066; }

@media (max-width: 500px) {
  .cast-card-img { width: 58px; height: 74px; }
  .cast-card { padding: .4rem .3rem .35rem; }
}

/* ════════════════════════════════════════════════════
   CHARACTER BIO MODAL
   ════════════════════════════════════════════════════ */
.char-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.char-modal.hidden { display: none; }
.char-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(6px);
}
.char-modal-card {
  position: relative;
  display: flex; gap: 1.4rem; align-items: flex-start;
  background: #0d0d1a;
  border: 1px solid #1e1e35;
  border-radius: 12px;
  padding: 1.5rem 1.5rem 1.5rem 1.2rem;
  max-width: 420px; width: 100%;
  box-shadow: 0 0 40px rgba(0,0,0,.8);
}
.char-modal-close {
  position: absolute; top: 10px; right: 12px;
  background: none; border: none;
  color: #4a5070; font-size: .85rem; cursor: pointer;
  line-height: 1;
  transition: color .15s;
}
.char-modal-close:hover { color: #8a90b8; }
.char-modal-portrait {
  flex: 0 0 110px;
  height: 138px;
  border-radius: 8px;
  overflow: hidden;
  background: #13131f;
}
.char-modal-portrait img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
}
.char-modal-info {
  flex: 1;
  display: flex; flex-direction: column; gap: .5rem;
  padding-top: .2rem;
}
.char-modal-method {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #52c5f0;
}
#castAnti ~ * .char-modal-method,
.char-modal-card[data-side="anti"] .char-modal-method { color: #f05080; }
.char-modal-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: #e0e8ff;
  line-height: 1.1;
}
.char-modal-tag {
  font-size: .68rem;
  color: #8a90b8;
  font-style: italic;
}
.char-modal-desc {
  font-size: .73rem;
  color: #6a7090;
  line-height: 1.55;
  margin-top: .2rem;
}

/* ════════════════════════════════════════════════════
   STAGE 3D LOADING OVERLAY
   ════════════════════════════════════════════════════ */
.stage3d-loading {
  position: fixed;
  inset: 0;
  background: #050510;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
}
.stage3d-loading.hidden { display: none; }

/* Modo compacto: píldora arriba a la izquierda, por encima del vídeo de cabecera
   (vídeo 150 · fundido 155 · saltar 160 · intro 1000) para ver el progreso real
   mientras se reproduce, sin tapar la imagen. */
.stage3d-loading.compact {
  inset: auto auto auto 0;
  top: max(.9rem, env(safe-area-inset-top));
  left: max(.9rem, env(safe-area-inset-left));
  background: rgba(5, 5, 16, .55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  padding: .5rem .8rem;
  display: block;
  pointer-events: none;
}
.stage3d-loading.compact .stage3d-loading-inner { text-align: left; }
.stage3d-loading.compact .stage3d-loading-title {
  font-size: .62rem;
  margin-bottom: .4rem;
  opacity: .65;
}
.stage3d-loading.compact .stage3d-loading-bar-wrap {
  width: 120px;
  height: 3px;
  margin: 0 0 .3rem;
}
.stage3d-loading.compact .stage3d-loading-text { font-size: .62rem; }

@media (prefers-reduced-motion: reduce) {
  .stage3d-loading-bar { transition: none; }
}
.stage3d-loading-inner {
  text-align: center;
  color: #fff;
  font-family: inherit;
}
.stage3d-loading-title {
  font-size: 1.3rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  opacity: .9;
}
.stage3d-loading-bar-wrap {
  width: 260px;
  height: 5px;
  background: rgba(255,255,255,.12);
  border-radius: 3px;
  overflow: hidden;
  margin: 0 auto .8rem;
}
.stage3d-loading-bar {
  height: 100%;
  width: 0%;
  background: #e63946;
  border-radius: 3px;
  transition: width .35s ease;
}
.stage3d-loading-text {
  font-size: .8rem;
  color: rgba(255,255,255,.45);
  letter-spacing: .05em;
}