/* ==========================================================================
   Econópolis · UI KIT GLOBAL (estilo Noe)
   --------------------------------------------------------------------------
   Reglas y tokens COMPARTIDOS por todos los retos. Cambiar la paleta o el
   estilo de los modales/botones aquí se propaga a todo el juego.
   Cargar en cada reto DESPUÉS de juego.css y ANTES del css propio del reto.

   Componentes:
     .intro-card (+.col)         → tarjeta-modal pergamino con marco dorado
     .intro-fig / .intro-body    → personaje (recorte) + texto
     .intro-titulo / .intro-p    → título serif verde + texto
     .btn-siguiente              → botón naranja de "continuar"
     .intro-x                    → botón ✕ naranja (cerrar/salir)
     .intro-progreso > i(.on)    → barra de pasos
     body.intro-limpia           → oculta chrome del juego (top/fases/HUD)
   ========================================================================== */

:root{
  --ec-pergamino-1:#fdf7e9;
  --ec-pergamino-2:#f7eed6;
  --ec-pergamino-claro:#fffdf6;
  --ec-oro:#cda84f;
  --ec-oro-tenue:rgba(205,168,79,.45);
  --ec-oro-borde:#e4d4ab;
  --ec-verde:#1f7a46;         /* títulos serif / acentos */
  --ec-naranja-1:#f0a53e;     /* continuar / siguiente / cerrar */
  --ec-naranja-2:#e0852b;
  --ec-naranja-sombra:rgba(150,90,20,.5);
  --ec-texto:#3a2c10;
  --ec-texto-suave:#6a5a3a;
  --ec-serif:'Source Serif 4',serif;
}

/* ============ Tarjeta-modal centrada ============ */
/* Cualquier .fase que contenga una .intro-card la centra en pantalla
   (sirve para con-fases y para los sistemas de fases propios de cada reto). */
.fase:has(> .intro-card){min-height:100vh;padding:18px 14px;place-items:center}
.fase.activa:has(> .intro-card){display:grid}

.intro-card{
  position:relative;width:min(94vw,880px);
  background:linear-gradient(180deg,var(--ec-pergamino-1),var(--ec-pergamino-2));
  border:3px solid var(--ec-oro);border-radius:28px;
  box-shadow:0 26px 70px rgba(0,0,0,.55);
  padding:30px 40px 34px;overflow:visible;
  display:flex;align-items:center;gap:22px;
}
.intro-card::before{content:"";position:absolute;inset:6px;border-radius:22px;border:2px solid var(--ec-oro-tenue);pointer-events:none}
.intro-card.col{flex-direction:column;align-items:stretch;text-align:center;gap:14px;max-width:900px}

/* Personaje (recorte) que asoma del marco */
.intro-fig{flex:0 0 38%;max-width:290px;align-self:flex-end;margin:-60px 0 -34px -30px;display:flex;justify-content:center}
.intro-fig img{width:100%;height:auto;display:block;filter:drop-shadow(0 14px 16px rgba(70,50,20,.3))}
.intro-fig .intro-em{font-size:120px;line-height:1}
.intro-body{flex:1;min-width:0}
.intro-titulo{font-family:var(--ec-serif);font-weight:800;font-size:34px;line-height:1.08;color:var(--ec-verde);margin:0 0 12px}
.intro-p{font-size:17px;line-height:1.5;color:#33503d;margin:0 0 8px;font-weight:600}
.intro-p strong{color:var(--ec-verde);font-weight:800}

/* Cabecera reutilizada dentro del modal (avatar pequeño + frase), sin doble tarjeta */
.intro-card .cabecera-fase{background:none;border:none;box-shadow:none;padding:0;margin:0 2px 4px;align-items:center}
.intro-card .cabecera-fase::after{display:none}
.intro-card .bocadillo-mini p{color:var(--ec-verde);font-weight:800;font-size:16px}
.intro-card .bocadillo-mini strong{color:var(--ec-verde)}
.intro-card .mini-personaje{border-color:var(--ec-pergamino-1);box-shadow:0 0 0 3px var(--ec-oro)}

/* Tarjetas internas (p.ej. "tres cosas"): claras, borde tenue, alineadas a la izquierda */
.intro-card .reglas-grandes{margin:6px 0 0;grid-template-columns:repeat(3,1fr);max-width:none;gap:14px}
.intro-card .reglas-grandes .regla-card{
  align-items:flex-start;text-align:left;padding:16px 18px 18px;
  background:var(--ec-pergamino-claro);border:1.5px solid var(--ec-oro-borde);box-shadow:0 6px 16px rgba(110,84,40,.15);
}
.intro-card .reglas-grandes .regla-card .regla-ico{height:auto;margin:0 0 8px;justify-content:flex-start}
.intro-card .reglas-grandes .regla-card .regla-ico img{width:74px;height:74px;object-fit:contain}
.intro-card .reglas-grandes .regla-card .deseos-mini{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;width:96px}
.intro-card .reglas-grandes .regla-card .deseos-mini img{width:44px;height:44px;object-fit:contain}
.intro-card .reglas-grandes .regla-card .regla-num{margin-top:0;font-size:21px;color:var(--ec-verde)}
.intro-card .reglas-grandes .regla-card .regla-txt{min-height:0;display:block;text-align:left;font-size:13.5px;line-height:1.45;color:var(--ec-texto-suave)}
.intro-card .deseos-grid{margin:8px auto 0}

/* Acciones + botón "Siguiente/continuar" naranja (el verde se reserva para confirmar) */
.intro-acciones{display:flex;gap:12px;margin:18px 0 0;align-items:center;flex-wrap:wrap}
.intro-card .acciones-fase{margin:16px 2px 6px}
.intro-card:not(.col) .intro-acciones{justify-content:flex-end}
.intro-card.col .intro-acciones{justify-content:center}
.btn-siguiente{
  font-family:var(--ec-serif);text-transform:uppercase;letter-spacing:.6px;
  font-size:18px;font-weight:800;color:#fff;cursor:pointer;border:none;padding:13px 30px;border-radius:14px;
  background:linear-gradient(180deg,var(--ec-naranja-1),var(--ec-naranja-2));
  box-shadow:0 5px 0 var(--ec-naranja-sombra),0 9px 20px rgba(0,0,0,.22);
  display:inline-flex;align-items:center;gap:9px;transition:transform .12s}
.btn-siguiente:hover{transform:translateY(-2px)}
.btn-siguiente:active{transform:translateY(2px);box-shadow:0 3px 0 var(--ec-naranja-sombra)}
.btn-siguiente .fl{font-size:13px}

/* ✕ naranja que sale del marco */
.intro-x{position:absolute;top:-14px;right:-14px;z-index:6;width:42px;height:42px;padding:0;border-radius:50%;
  border:3px solid #fff;cursor:pointer;color:#fff;font-size:19px;font-weight:900;line-height:1;
  background:linear-gradient(180deg,var(--ec-naranja-1),var(--ec-naranja-2));box-shadow:0 5px 14px rgba(0,0,0,.32);
  display:flex;align-items:center;justify-content:center;transition:transform .12s}
.intro-x:hover{transform:scale(1.09)}

/* Progreso de segmentos */
.intro-progreso{position:absolute;left:32px;right:32px;bottom:14px;display:flex;gap:8px}
.intro-progreso i{flex:1;height:7px;border-radius:99px;background:rgba(160,120,40,.22)}
.intro-progreso i.on{background:linear-gradient(90deg,var(--ec-naranja-1),var(--ec-naranja-2))}

/* ============ Modo "intro limpia": oculta el chrome del juego ============ */
body.intro-limpia .juego-top,
body.intro-limpia .fases-bar,
body.intro-limpia .ch-hud{display:none !important}

/* ============ Diálogo de apertura de cada reto ============
   .dialogo-personaje + .bocadillo (en juego.css) lo usan n1-r2…r7 y n2-r0…r7.
   Restilarlo aquí propaga el look pergamino+dorado a TODOS sus intros de golpe. */
.dialogo-personaje .avatar-personaje{
  border-color:var(--ec-pergamino-1,#fdf7e9);
  box-shadow:0 0 0 4px var(--ec-oro,#cda84f),0 6px 16px rgba(0,0,0,.28);
}
.dialogo-personaje .bocadillo{
  background:linear-gradient(180deg,var(--ec-pergamino-1,#fdf7e9),var(--ec-pergamino-2,#f7eed6));
  border:2px solid var(--ec-oro,#cda84f) !important;   /* gana al border-color inline (tema por personaje) → dorado coherente */
  box-shadow:0 6px 16px rgba(13,30,55,.2);
}
.dialogo-personaje .bocadillo::before{border-right-color:var(--ec-oro,#cda84f)}
.dialogo-personaje .bocadillo::after{border-right-color:var(--ec-pergamino-1,#fdf7e9)}
.dialogo-personaje .bocadillo strong{color:var(--ec-verde,#1f7a46)}
.dialogo-personaje .bocadillo strong.who{color:#c98f1d}

/* ============ Elementos de diálogo/cierre compartidos (en pergamino) ============ */
.resultado-detalle:empty{display:none}
.bocadillo-grande{background:linear-gradient(180deg,var(--ec-pergamino-1),var(--ec-pergamino-2));border:3px solid var(--ec-oro);border-radius:22px;position:relative}
.bocadillo-grande::before{border-bottom-color:var(--ec-oro)}
.bocadillo-grande .who{color:#c98f1d}
.bocadillo-grande p strong{color:var(--ec-verde)}
.avatar-grande{border-color:var(--ec-pergamino-1);box-shadow:0 0 0 4px var(--ec-oro),0 12px 30px rgba(0,0,0,.35)}

@media (max-width:640px){
  .intro-card{flex-direction:column;text-align:center;padding:26px 18px 30px;gap:6px}
  .intro-fig{flex:none;max-width:158px;align-self:center;margin:-48px 0 0 0}
  .intro-titulo{font-size:25px}
  .intro-p{font-size:15px}
  .intro-progreso{left:18px;right:18px}
  .intro-card .reglas-grandes{grid-template-columns:1fr}
}