/* ─── Sí, Ministro · Estilos ─────────────────────────── */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Evitar que se pueda seleccionar/copiar el texto del juego */
html, body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none; /* iOS: sin menú de copiar al mantener pulsado */
}

body {
  font-family: 'Courier New', monospace;
  background: #1a1a2e;
  color: #e0e0e0;
  min-height: 100vh;
  line-height: 1.5;
}

#firma-autor-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  cursor: pointer;
  animation: firmaAutorFadeOut 3.4s ease forwards;
}
#firma-autor-overlay.oculto { display: none; }
#firma-autor-linea1 {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  letter-spacing: 7px;
  color: #6b7280;
  opacity: 0;
  animation: firmaAutorLinea1 3.4s ease forwards;
}
#firma-autor-linea2 {
  font-family: 'Courier New', monospace;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 5px;
  color: #ffd700;
  text-shadow: 0 0 26px rgba(255,215,0,0.4);
  opacity: 0;
  animation: firmaAutorLinea2 3.4s ease forwards;
}
@keyframes firmaAutorFadeOut {
  0%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes firmaAutorLinea1 {
  0%   { opacity: 0; transform: translateY(6px); }
  15%  { opacity: 1; transform: translateY(0); }
  78%  { opacity: 1; }
  92%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes firmaAutorLinea2 {
  0%   { opacity: 0; transform: scale(0.92); }
  28%  { opacity: 0; }
  40%  { opacity: 1; transform: scale(1); }
  82%  { opacity: 1; }
  96%  { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #firma-autor-overlay, #firma-autor-linea1, #firma-autor-linea2 { animation-duration: 0.01ms !important; }
}

#game {
  max-width: 920px;
  margin: 0 auto;
  padding: 12px;
}
/* Escala de interfaz para accesibilidad (botón A+ arriba). zoom recalcula el layout
   de verdad (no solo estira visualmente), así que funciona igual de bien en móvil. */
body.escala-grande #game { zoom: 1.15; }
body.escala-muygrande #game { zoom: 1.3; }

/* ─── HEADER ─── */
#header {
  background: #16213e;
  border: 2px solid #e63946;
  padding: 10px 16px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#header h1 {
  font-size: 20px;
  color: #e63946;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.header-sub {
  font-size: 10px;
  color: #888;
  letter-spacing: 2px;
  text-transform: uppercase;
}
#turno-num {
  font-size: 22px;
  color: #ffd700;
  font-weight: bold;
}

/* ─── RECURSOS ─── */
#recursos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.recurso-card {
  background: #16213e;
  border: 1px solid #333;
  padding: 8px 10px;
  text-align: center;
}
.recurso-card.cloaca-card { border-color: #ff6b3566; }
.cloaca-label { color: #ff6b35 !important; }
.recurso-label {
  font-size: 10px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.recurso-val {
  font-size: 20px;
  font-weight: bold;
  margin-top: 2px;
}
.r-dinero { color: #ffd700; }
.r-favores { color: #a8dadc; }
.r-influencia { color: #9d4edd; }
.r-lealtad { color: #2dc653; }
.r-cloaca { color: #ff6b35; }

/* ─── ESCÁNDALO ─── */
#escandalo-wrap {
  background: #16213e;
  border: 1px solid #e63946;
  padding: 8px 12px;
  margin-bottom: 10px;
}
#escandalo-label {
  font-size: 10px;
  color: #e63946;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
}
#escandalo-bar-bg {
  background: #0d0d1a;
  height: 14px;
  border: 1px solid #333;
}
#escandalo-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #e63946, #ff6b35);
  transition: width 0.5s;
}

#covid-aviso {
  background: linear-gradient(90deg, #052a25 0%, #0a4a3e 50%, #052a25 100%);
  border: 1px solid #00d4aa;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 12px;
  color: #00d4aa;
  text-align: center;
  letter-spacing: 1px;
  animation: covid-aviso-pulse 2s ease-in-out infinite;
}
@keyframes covid-aviso-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(0,212,170,0.3); }
  50% { box-shadow: 0 0 20px rgba(0,212,170,0.6); }
}
#covid-aviso .covid-icon { font-size: 14px; margin-right: 6px; }
#covid-aviso .covid-info { font-size: 11px; color: #88ddc4; margin-left: 4px; }
#covid-aviso b { color: #ff9966; }

#kitty-aviso {
  background: linear-gradient(90deg, #2a0a1f 0%, #4a1535 50%, #2a0a1f 100%);
  border: 1px solid #ff66cc;
  padding: 7px 12px;
  margin-bottom: 10px;
  font-size: 11px;
  color: #ff99dd;
  text-align: center;
  letter-spacing: 1px;
  animation: kitty-aviso-pulse 2.5s ease-in-out infinite;
}
@keyframes kitty-aviso-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(255,102,204,0.3); }
  50% { box-shadow: 0 0 18px rgba(255,102,204,0.6); }
}
#kitty-aviso .kitty-icon { font-size: 13px; margin-right: 6px; }
#kitty-aviso .kitty-info { font-size: 10px; color: #cc88bb; margin-left: 4px; }
#kitty-aviso b { color: #ffaaee; }

#vidaloca-aviso {
  background: linear-gradient(90deg, #2a1505 0%, #4a2810 50%, #2a1505 100%);
  border: 1px solid #f59e0b;
  padding: 7px 12px;
  margin-bottom: 10px;
  font-size: 11px;
  color: #fbbf24;
  text-align: center;
  letter-spacing: 1px;
  animation: vidaloca-pulse 1.5s ease-in-out infinite;
}
@keyframes vidaloca-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(245,158,11,0.3); }
  50% { box-shadow: 0 0 20px rgba(245,158,11,0.7); }
}
#vidaloca-aviso .vidaloca-icon { font-size: 13px; margin-right: 6px; }
#vidaloca-aviso .vidaloca-info { font-size: 10px; color: #d99a4a; margin-left: 4px; }
#vidaloca-aviso b { color: #ffb020; }
.tag-granjera { color: #f472b6; font-weight: bold; }

/* ─── LAYOUT PRINCIPAL ─── */
#main {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 10px;
}
#panel-left { display: flex; flex-direction: column; gap: 10px; }
#panel-right { display: flex; flex-direction: column; gap: 10px; }

/* ─── MÓDULOS ─── */
#modulos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.modulo-btn {
  background: #16213e;
  border: 2px solid #333;
  padding: 12px 8px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
  font-family: inherit;
  color: inherit;
}
.modulo-btn:hover {
  border-color: #ffd700;
  transform: translateY(-2px);
}
.modulo-btn.usado {
  opacity: 0.35;
  cursor: not-allowed;
}
.modulo-btn.usado:hover {
  border-color: #333;
  transform: none;
}
.modulo-btn.cloaca-btn {
  border-color: #ff6b35;
  background: linear-gradient(180deg, #1a0e05, #16213e);
}
.modulo-btn.cloaca-btn:hover { border-color: #ffd700; }
.modulo-btn.theone-btn {
  border-color: #ff8c42;
  background: linear-gradient(180deg, #1f1208, #16213e);
}
.modulo-btn.theone-btn:hover { border-color: #ffd700; }
.modulo-btn.covid-btn {
  border-color: #00d4aa;
  background: linear-gradient(180deg, #052a25, #16213e);
  animation: covid-pulse 1.8s ease-in-out infinite;
}
.modulo-btn.covid-btn:hover { border-color: #00ffcc; }
.modulo-btn.ciis-btn {
  border-color: #4a7fff;
  background: linear-gradient(180deg, #0a1530, #16213e);
}
.modulo-btn.ciis-btn:hover { border-color: #7aa5ff; }
#modulo-modal.ciis-modal {
  border-color: #4a7fff;
  background: linear-gradient(180deg, #0a1530, #16213e);
}
.accion-card.ciis-card { border-color: #4a7fff44; }
.accion-card.ciis-card:hover {
  border-color: #4a7fff;
  background: #0f1f3d;
}
.b-ciis { background: #4a7fff22; color: #7aa5ff; border: 1px solid #4a7fff66; }
.b-riesgo { background: #ff4d4d22; color: #ff6b6b; border: 1px solid #ff4d4d66; font-weight: 900; }
.tag-ciis { color: #7aa5ff; font-weight: bold; }
.tag-kitty { color: #ff66cc; font-weight: bold; }
.tag-pod { color: #ffc89a; font-weight: bold; }
.tag-box { color: #22c55e; font-weight: bold; }
.tag-ratemos { color: #c084fc; font-weight: bold; }
.tag-salapero { color: #f87171; font-weight: bold; }
.tag-cointreras { color: #fb7185; font-weight: bold; }
.tag-ucef { color: #ff3030; font-weight: 900; letter-spacing: 1px; }
@keyframes covid-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(0,212,170,0); }
  50% { box-shadow: 0 0 20px rgba(0,212,170,0.6); }
}
#modulo-modal.covid-modal {
  border-color: #00d4aa;
  background: linear-gradient(180deg, #052a25, #16213e);
}
.accion-card.covid-card { border-color: #00d4aa44; }
.accion-card.covid-card:hover {
  border-color: #00d4aa;
  background: #0a3a32;
}
.b-covid { background: #00d4aa22; color: #00d4aa; border: 1px solid #00d4aa66; }
.tag-covid { color: #00d4aa; font-weight: bold; }
.modulo-icon {
  font-size: 28px;
  margin-bottom: 6px;
  display: block;
}
.modulo-nombre {
  font-size: 12px;
  font-weight: bold;
  color: #e0e0e0;
  letter-spacing: 0.5px;
}
.modulo-desc {
  font-size: 9px;
  color: #888;
  margin-top: 3px;
  line-height: 1.3;
}

/* ─── ESTADO ─── */
#estado-juego {
  background: #0d0d1a;
  border: 1px solid #222;
  padding: 8px 12px;
  text-align: center;
}
/* El título solo aparece cuando dice algo distinto del estado por defecto:
   el panel sigue siendo el canal de avisos (quiebra, remates narrativos, errores),
   pero deja de ocupar sitio con texto de relleno. */
#estado-titulo {
  font-size: 12px;
  color: #ffd700;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
#estado-msg {
  font-size: 13px;
  color: #aaa;
  line-height: 1.6;
}

/* ─── BOTÓN PASAR DE TURNO ─── */
#fin-turno-wrap {
  background: linear-gradient(135deg, #16213e 0%, #0d0d1a 100%);
  border: 2px solid #ffd700;
  padding: 10px;
  margin-top: 4px;
  position: relative;
  overflow: hidden;
}
#fin-turno-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,215,0,0.1), transparent);
  animation: shimmer 3s infinite;
}
@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 200%; }
}
#fin-turno-label {
  font-size: 10px;
  color: #888;
  text-align: center;
  margin-bottom: 6px;
  letter-spacing: 1px;
}
#acc-dots-big {
  font-size: 22px;
  letter-spacing: 8px;
  text-align: center;
}
.dot-on { color: #ffd700; }
.dot-off { color: #444; }
#fin-turno-btn {
  background: #ffeb00;
  border: 3px solid #fff066;
  color: #000;
  padding: 18px 16px;
  font-family: 'Courier New', monospace;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 3px;
  width: 100%;
  margin-top: 8px;
  box-shadow: 0 0 20px rgba(255,235,0,0.7), 0 4px 16px rgba(0,0,0,0.4);
  transition: all 0.15s;
  position: relative;
  z-index: 1;
  animation: pulse-turno 1.8s ease-in-out infinite;
}
@keyframes pulse-turno {
  0%, 100% {
    box-shadow: 0 0 20px rgba(255,235,0,0.7), 0 4px 16px rgba(0,0,0,0.4);
    background: #ffeb00;
  }
  50% {
    box-shadow: 0 0 40px rgba(255,235,0,1), 0 0 60px rgba(255,235,0,0.6), 0 4px 16px rgba(0,0,0,0.4);
    background: #fff44d;
  }
}
#fin-turno-btn:hover {
  background: #fff44d;
  border-color: #ffffff;
  box-shadow: 0 0 50px rgba(255,235,0,1), 0 0 80px rgba(255,235,0,0.5), 0 6px 20px rgba(0,0,0,0.5);
  transform: translateY(-3px) scale(1.02);
  animation: none;
}
#fin-turno-btn:active {
  transform: translateY(-1px) scale(1);
}
#fin-turno-btn::after {
  content: ' ▶';
  display: inline-block;
  transition: transform 0.2s;
  color: #000;
}
#fin-turno-btn:hover::after { transform: translateX(6px); }

/* ─── PANEL DERECHO ─── */
#log-box {
  background: #0d0d1a;
  border: 1px solid #333;
  padding: 10px;
  height: 180px;
  overflow-y: auto;
}
#log-box h3,
.log-entry {
  font-size: 11px;
  line-height: 1.5;
  padding: 3px 0;
  border-bottom: 1px solid #1a1a2e;
  color: #b0b0b0;
}
.log-entry.bueno { color: #4ade80; }
.log-entry.malo { color: #f87171; }
.log-entry.evento { color: #ffd700; }
.log-entry.cloaca { color: #fb923c; }

#movil-box {
  display: flex;
  justify-content: center;
  padding: 0;
}
#movil-marco {
  width: 100%;
  max-width: 280px;
  min-height: 455px;
  flex-shrink: 0;
  background: #111;
  border-radius: 28px;
  padding: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5), inset 0 0 0 2px #2a2a2a;
}
#movil-pantalla {
  background: #0d1420;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 415px;
}
#movil-marco.icarus-vibra { animation:icarusVibra .12s linear 8; }
@keyframes icarusVibra { 0%,100%{ transform:translateX(0) rotate(0); } 25%{ transform:translateX(-4px) rotate(-.6deg); } 75%{ transform:translateX(4px) rotate(.6deg); } }
#movil-marco.movil-notifica { animation:movilNotifica .18s ease-in-out 3; }
@keyframes movilNotifica { 0%,100%{ transform:translateX(0) rotate(0); } 25%{ transform:translateX(-2px) rotate(-.3deg); } 75%{ transform:translateX(2px) rotate(.3deg); } }
body.icarus-en-primer-plano::before { content:""; position:fixed; inset:0; z-index:480; background:rgba(2,6,14,.82); backdrop-filter:blur(4px); }
body.icarus-en-primer-plano #movil-box { position:fixed; z-index:500; inset:0; padding:20px; display:grid; place-items:center; pointer-events:none; }
body.icarus-en-primer-plano #movil-marco { width:min(92vw,430px); max-width:430px; min-height:650px; padding:11px; pointer-events:auto; border-radius:37px; box-shadow:0 30px 90px rgba(0,0,0,.75),0 0 0 1px #5fd6e855; }
body.icarus-en-primer-plano #movil-pantalla { min-height:608px; border-radius:28px; }
body.icarus-en-primer-plano #movil-marca { font-size:10px; padding-top:6px; }
#icarus-panel { position:absolute; inset:0; z-index:20; display:flex; flex-direction:column; background:linear-gradient(155deg,#090d1b,#14102a); color:#eef4ff; }
#icarus-panel[hidden], #icarus-alerta[hidden], #icarus-juego[hidden], #icarus-resultado[hidden], #icarus-pausa-capa[hidden] { display:none !important; }
#icarus-alerta { min-height:100%; display:flex; flex-direction:column; align-items:center; text-align:center; padding:43px 18px 20px; box-sizing:border-box; background:radial-gradient(circle at 50% 27%,#422250 0,#18132a 39%,#090d19 100%); }
.icarus-alerta-senal { font:700 9px 'Courier New',monospace; color:#f8a0a7; letter-spacing:1.2px; animation:icarusPulso 1s infinite; }
@keyframes icarusPulso { 50%{ opacity:.35; } }
.icarus-alerta-avatar { display:grid; place-items:center; width:82px; height:82px; margin:26px 0 12px; border:2px solid #e5484d; border-radius:50%; background:radial-gradient(circle,#ff9ba2 0 8%,#5d1b2b 10% 32%,#190d1b 34%); color:#fff; font-size:34px; box-shadow:0 0 26px #e5484d77; }
#icarus-alerta h2 { margin:0; color:#fff; font-size:25px; letter-spacing:.5px; }
#icarus-alerta p { margin:4px 0; color:#aeb7c9; font-size:11px; }
.icarus-alerta-mensaje { margin:20px 4px auto; padding:10px; border:1px solid #ffffff16; border-radius:9px; color:#d8dded; font-size:11px; line-height:1.45; background:#090c1688; }
.icarus-alerta-botones { display:flex; width:100%; justify-content:space-between; gap:12px; margin-top:24px; }
.icarus-btn { flex:1; min-height:57px; border:0; border-radius:12px; color:#fff; font-weight:800; cursor:pointer; font-size:12px; }
.icarus-btn small { color:inherit; opacity:.75; font-size:9px; font-weight:600; }
.icarus-btn-ignorar { background:#34384b; }
.icarus-btn-defender { background:#196d61; box-shadow:0 0 18px #20c99755; }
#icarus-juego { min-height:100%; box-sizing:border-box; padding:34px 13px 12px; background:#07131d; position:relative; }
#icarus-instrucciones { position:absolute; z-index:7; inset:0; display:flex; flex-direction:column; align-items:center; text-align:center; padding:48px 20px 20px; box-sizing:border-box; background:radial-gradient(circle at 50% 20%,#1c4b5e,#0a1722 56%,#060b13); }
#icarus-instrucciones[hidden] { display:none !important; }
.icarus-instrucciones-icono { display:grid; place-items:center; width:66px; height:66px; margin-bottom:15px; border:1px solid #77e8f1; border-radius:50%; background:#0b2431; font-size:33px; box-shadow:0 0 22px #6ee7fa55; }
.icarus-instrucciones-titulo { color:#8bf0f8; font:700 15px 'Courier New',monospace; letter-spacing:1px; }
#icarus-instrucciones p { margin:16px 0 12px; color:#e0eaf5; font-size:12px; line-height:1.5; }
#icarus-instrucciones ul { width:100%; margin:0 0 16px; padding:10px 13px 10px 30px; box-sizing:border-box; border:1px solid #ffffff18; border-radius:9px; text-align:left; background:#020a1155; color:#bdcddd; font-size:11px; line-height:1.7; }
#icarus-instrucciones li::marker { color:#6ee7f9; }
.icarus-controles { margin:0 0 auto; color:#ffe58a; font:700 9px 'Courier New',monospace; letter-spacing:.5px; }
#icarus-instrucciones button { width:100%; border:0; border-radius:10px; padding:13px; background:#6ee7f9; color:#061524; font-weight:900; letter-spacing:.5px; cursor:pointer; }
.icarus-juego-cabecera { display:flex; justify-content:space-between; align-items:center; color:#7fe6ee; font:700 11px 'Courier New',monospace; letter-spacing:.6px; }
#icarus-tiempo { color:#fff; background:#23344a; padding:4px 7px; border-radius:6px; }
#icarus-juego-instruccion { margin:9px 0 11px; color:#aebed1; font-size:10px; line-height:1.35; }
#icarus-pista { height:148px; position:relative; overflow:hidden; border:1px solid #2d6680; border-radius:10px; background:linear-gradient(#102941,#07131d); cursor:pointer; touch-action:manipulation; }
.icarus-pista-red { position:absolute; inset:0; opacity:.35; background-image:linear-gradient(#6ee7f933 1px,transparent 1px),linear-gradient(90deg,#6ee7f933 1px,transparent 1px); background-size:18px 18px; }
#icarus-pista::after { content:""; position:absolute; height:2px; left:0; right:0; bottom:21px; background:#4bd7df; box-shadow:0 0 7px #4bd7df; }
#icarus-jugador, #icarus-obstaculo, #icarus-dato, #icarus-meta { position:absolute; z-index:2; user-select:none; pointer-events:none; }
#icarus-jugador { left:22px; bottom:19px; width:42px; height:42px; filter:invert(1) drop-shadow(0 0 7px #6ee7fa); image-rendering:pixelated; transition:opacity .32s ease-in; }
#icarus-obstaculo { bottom:19px; left:-40px; right:auto; width:32px; height:32px; filter:invert(1) drop-shadow(0 0 8px #ff6a76) sepia(1) saturate(700%) hue-rotate(-15deg); image-rendering:pixelated; }
#icarus-dato { top:31px; left:-40px; right:auto; color:#ffe58a; font-size:18px; text-shadow:0 0 8px #ffe58a; }
#icarus-meta { bottom:19px; right:-60px; left:auto; width:44px; height:72px; filter:invert(1) drop-shadow(0 0 10px #ffe58a) drop-shadow(0 0 5px #6ee7fa); image-rendering:pixelated; transition:opacity .32s ease-out; }
.icarus-juego-pie { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:10px; color:#aebed1; font:700 10px 'Courier New',monospace; }
.icarus-juego-pie span { white-space:nowrap; }
.icarus-juego-pie b { color:#ffe58a; }
#icarus-pausa { border:1px solid #35546b; border-radius:6px; background:#172a3d; color:#dce7f2; padding:5px 8px; cursor:pointer; font:700 10px 'Courier New',monospace; }
#icarus-jugador.icarus-invulnerable { animation:icarusInvulnerable .16s linear infinite; }
@keyframes icarusInvulnerable { 50%{ opacity:.38; filter:drop-shadow(0 0 11px #fff2a8); } }
#icarus-pausa-capa { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:#060a10df; color:#fff; font:700 17px 'Courier New',monospace; letter-spacing:1px; }
#icarus-pausa-capa button, #icarus-resultado button { border:0; border-radius:8px; background:#6ee7f9; color:#061524; padding:9px 13px; font-weight:800; cursor:pointer; }
#icarus-resultado { min-height:100%; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:28px 20px; background:radial-gradient(circle,#173d49,#0b1724 55%,#080d17); }
#icarus-resultado.perdida { background:radial-gradient(circle,#4b1d2a,#1d111b 55%,#080a12); }
#icarus-resultado .resultado-icono { font-size:44px; margin-bottom:8px; }
#icarus-resultado h2 { margin:0 0 8px; color:#fff; font-size:20px; }
#icarus-resultado p { margin:0 0 18px; color:#d3dceb; font-size:11px; line-height:1.5; }
#icarus-bloqueo { position:absolute; z-index:19; right:8px; bottom:8px; left:8px; padding:9px; border:1px solid #e5484d88; border-radius:8px; background:#250e16ee; color:#ffb3b8; text-align:center; font:700 10px 'Courier New',monospace; }
#icarus-bloqueo small { color:#e9c1c5; font-weight:400; font-size:9px; }
/* El aviso de bloqueo es position:absolute, así que por sí solo TAPA la parte final
   de los mensajes en vez de reservarles hueco. Esta clase (activada por JS mientras
   el aviso está visible) añade ese hueco dentro del propio scroll. */
#movil-vistas.con-aviso-bloqueo #movil-mensajes,
#movil-vistas.con-aviso-bloqueo #movil-registro {
  padding-bottom: 56px;
}
@media(max-width:600px){
  body.icarus-en-primer-plano #movil-box { padding:10px; }
  body.icarus-en-primer-plano #movil-marco { width:min(96vw,390px); min-height:600px; }
  body.icarus-en-primer-plano #movil-pantalla { min-height:560px; }
}
#movil-marca {
  padding: 4px 0 0;
  color: #cfd4df;
  font: 700 8px 'Courier New', monospace;
  letter-spacing: 1.8px;
  text-align: center;
}
#movil-marca span { color: #e63946; }
#movil-notch {
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 90px; height: 18px;
  background: #111;
  border-radius: 0 0 14px 14px;
  z-index: 5;
}
#movil-estado {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 16px 3px;
  font-size: 10px;
  color: #9aa4b8;
  font-weight: 600;
}
#movil-perfil {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid #1e2a44;
  background: #101a30;
}
#movil-perfil-img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #ffd70066;
  background: #0d0d1a;
}
#movil-perfil-nombre {
  font-size: 11px;
  font-weight: 700;
  color: #e8ecf5;
  letter-spacing: .4px;
}
#movil-perfil-cargo {
  margin-top: 1px;
  font-size: 9px;
  color: #9aa4b8;
  letter-spacing: .6px;
}
#movil-perfil-estado {
  margin-left: auto;
  align-self: flex-end;
  color: #2dc653;
  font-size: 8px;
  font-weight: bold;
  letter-spacing: .5px;
}
#movil-tabs {
  display: flex;
  background: #101a30;
  border-bottom: 1px solid #1e2a44;
}
.movil-tab {
  flex: 1;
  padding: 8px 5px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #9aa4b8;
  font: 700 10px 'Courier New', monospace;
  cursor: pointer;
  letter-spacing: .2px;
}
.movil-tab.activa {
  color: #e8ecf5;
  border-bottom-color: #e63946;
  background: #14213a;
}
.movil-tab:hover { color: #ffd700; }
#movil-badge {
  display: inline-block;
  margin-left: 3px;
  background: #e5484d;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 5px;
  min-width: 15px;
  text-align: center;
}
#movil-vistas {
  background: #0d1420;
  height: 300px;
  flex: 0 0 300px;
  overflow: hidden;
}
/* `hidden` debe ganar también frente a la regla de display del panel de mensajes.
   Sin esta regla, Mensajes se quedaba visible por debajo de Registro. */
#movil-mensajes[hidden],
#movil-registro[hidden] {
  display: none !important;
}
#movil-mensajes {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  height: 100%;
  max-height: none;
  overflow-y: auto;
}
.movil-msg {
  display: flex;
  gap: 7px;
  animation: movilMsgIn 0.3s ease;
}
@keyframes movilMsgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.movil-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.movil-avatar img { width: 100%; height: 100%; object-fit: cover; }
.movil-burbuja-wrap { flex: 1; min-width: 0; }
.movil-remitente {
  font-size: 10px;
  font-weight: 700;
  margin-bottom: 2px;
}
.movil-burbuja {
  background: #1a2740;
  border-radius: 4px 12px 12px 12px;
  padding: 8px 10px;
  font-size: 11.5px;
  line-height: 1.45;
  color: #dfe4ee;
}
#movil-registro {
  display: flex;
  flex-direction: column;
  gap: 11px;
  height: 100%;
  max-height: none;
  padding: 10px;
  overflow-y: auto;
  background: #0d1420;
}
.movil-registro-vacio {
  margin: auto 0;
  padding: 12px;
  color: #9aa4b8;
  background: #1a2740;
  border-radius: 4px 12px 12px 12px;
  font-size: 11.5px;
  line-height: 1.45;
  text-align: center;
}
.movil-registro-linea {
  padding: 8px 10px;
  color: #dfe4ee;
  background: #1a2740;
  border-left: 3px solid #718096;
  border-radius: 4px 12px 12px 12px;
  font-size: 11.5px;
  line-height: 1.45;
}
.movil-registro-meta { margin-bottom: 3px; color: #9aa4b8; font-size: 9px; font-weight: 700; letter-spacing: .5px; }
.movil-registro-texto { color: #dfe4ee; }
.movil-registro-linea.registro-bueno { border-left-color: #4ade80; }
.movil-registro-linea.registro-malo { border-left-color: #f87171; }
.movil-registro-linea.registro-cloaca { border-left-color: #fb923c; }

/* ─── LADY DESUMMER ─── */
#desummer-box {
  background: linear-gradient(180deg, #1a0a00, #2a1505);
  border: 2px solid #ff6b35;
  padding: 10px;
}
#desummer-status {
  font-size: 11px;
  color: #ff9966;
  margin-bottom: 8px;
  line-height: 1.4;
  font-style: italic;
}
#desummer-accion {
  background: #ff6b35;
  border: none;
  color: #000;
  padding: 8px 10px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  width: 100%;
  margin-top: 4px;
}
#desummer-accion:hover { background: #ffd700; }
#desummer-accion:disabled {
  background: #333;
  color: #666;
  cursor: not-allowed;
}
#desummer-cooldown {
  font-size: 10px;
  color: #888;
  text-align: center;
  margin-top: 6px;
}

/* ─── MODAL DE MÓDULO ─── */
#modulo-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 90;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#modulo-overlay.visible { display: flex; }
#modulo-modal {
  background: #16213e;
  border: 3px solid #ffd700;
  padding: 24px;
  max-width: 660px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
}
#modulo-modal.cloaca-modal {
  border-color: #ff6b35;
  background: linear-gradient(180deg, #1a0a00, #16213e);
}
#modulo-modal.theone-modal {
  border-color: #ff8c42;
  background: linear-gradient(180deg, #1f1208, #16213e);
}
#modulo-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #333;
}
#modulo-modal-titulo {
  font-size: 18px;
  font-weight: bold;
  color: #ffd700;
  letter-spacing: 1px;
}
#modulo-modal-cerrar {
  background: transparent;
  border: 1px solid #555;
  color: #888;
  padding: 4px 12px;
  cursor: pointer;
  font-family: 'Courier New', monospace;
  font-size: 12px;
}
#modulo-modal-cerrar:hover {
  border-color: #e63946;
  color: #e63946;
}
#modulo-modal-acciones {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ─── CARDS DE ACCIÓN ─── */
.accion-card {
  background: #0d0d1a;
  border: 2px solid #2a2a3e;
  padding: 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.accion-card:hover {
  border-color: #ffd700;
  background: #1a1a30;
  transform: translateX(4px);
}
.accion-card.bloqueada {
  opacity: 0.3;
  pointer-events: none;
  filter: grayscale(0.6);
}
.accion-card.bloqueada .accion-nombre::after {
  content: ' ✓';
  color: #555;
  font-size: 10px;
  margin-left: 6px;
}
.accion-card.cloaca-card { border-color: #ff6b3544; }
.accion-card.cloaca-card:hover {
  border-color: #ff6b35;
  background: #2a1000;
}
.accion-card.theone-card { border-color: #ff8c4244; }
.accion-card.theone-card:hover {
  border-color: #ff8c42;
  background: #1f1208;
}
.accion-titulo-fila {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.accion-nombre {
  font-size: 13px;
  color: #e0e0e0;
  font-weight: bold;
  flex: 1;
  line-height: 1.4;
}
.accion-badges {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.accion-desc {
  font-size: 11px;
  color: #888;
  line-height: 1.5;
  margin-top: 4px;
}

/* ─── BADGES ─── */
.badge {
  font-size: 10px;
  padding: 3px 7px;
  border-radius: 3px;
  font-weight: bold;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.b-positivo { background: #2dc65322; color: #2dc653; border: 1px solid #2dc65366; }
.b-negativo { background: #e6394622; color: #e63946; border: 1px solid #e6394666; }
.b-neutro { background: #a8dadc22; color: #a8dadc; border: 1px solid #a8dadc66; }
.b-escandalo-up { background: #ff4d4d22; color: #ff6b6b; border: 1px solid #ff4d4d66; }
.b-escandalo-down { background: #2dc65322; color: #7bc67e; border: 1px solid #2dc65366; }
.b-cloaca { background: #ff6b3522; color: #ff6b35; border: 1px solid #ff6b3566; }
.b-theone { background: #ff8c4222; color: #ff8c42; border: 1px solid #ff8c4266; }
.b-condicion { background: #333; color: #aaa; border: 1px solid #555; font-style: italic; }

/* ─── MODAL DE EVENTO ─── */
#evento-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#evento-overlay.visible { display: flex; }
#evento-modal {
  background: #16213e;
  border: 3px solid #ffd700;
  padding: 24px;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}
#evento-tipo {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 8px;
}
#evento-titulo {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #ffd700;
  line-height: 1.3;
}
#evento-retrato { margin: 0 0 14px; width: 100%; height: clamp(90px, 16vh, 150px); overflow: hidden;
  border: 1px solid #574820; background: #0d0d1a; }
#evento-retrato[hidden] { display: none; }
#evento-retrato-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
/* v1.1.35: retratos verticales (formato llamada) dentro de la franja del evento */
#evento-retrato-img.retrato-vertical { object-position: center 15%; }
#evento-texto {
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 14px;
  color: #ccc;
  white-space: pre-line;
  background: #0d0d1a;
  padding: 11px 12px;
  border-left: 3px solid #ffd700;
}
.evento-opt-card {
  background: #0d0d1a;
  border: 2px solid #555;
  padding: 12px 14px;
  margin: 8px 0;
  cursor: pointer;
  font-family: 'Courier New', monospace;
  width: 100%;
  text-align: left;
  line-height: 1.5;
  transition: all 0.2s;
}
.evento-opt-card:hover {
  border-color: #ffd700;
  background: #1a1a30;
  transform: translateX(4px);
}
.evento-opt-card.cloaca-opt-card { border-color: #ff6b3566; }
.evento-opt-titulo {
  font-size: 13px;
  color: #e0e0e0;
  font-weight: bold;
  margin-bottom: 6px;
}
.evento-opt-card:hover .evento-opt-titulo { color: #ffd700; }
.evento-opt-badges {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

/* ─── PANTALLAS FINALES ─── */
#gameover, #victoria, #creditos-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.95);
  z-index: 200;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}
#gameover.visible, #victoria.visible, #creditos-overlay.visible {
  display: flex;
}
#gameover-inner, #victoria-inner, #creditos-modal {
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
}
/* Cabecera de imagen de los finales: la propia imagen ya trae su título,
   por eso el <h2> queda oculto por JS cuando la imagen carga bien
   (y reaparece como respaldo si la imagen fallara — ver finImgError). */
.fin-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
  margin: 0 0 18px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.55);
}
#gameover-inner h2 {
  font-size: 32px;
  color: #e63946;
  margin-bottom: 16px;
}
#victoria-inner h2 {
  font-size: 28px;
  color: #ffd700;
  margin-bottom: 16px;
}
#gameover-inner p, #victoria-inner p {
  font-size: 13px;
  color: #aaa;
  margin-bottom: 24px;
  line-height: 1.9;
  white-space: pre-line;
}
.btn-restart {
  border: none;
  color: white;
  padding: 12px 32px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.restart-rojo { background: #e63946; }
.restart-rojo:hover { background: #c1121f; }
.restart-oro { background: #ffd700; color: #000; }
.restart-oro:hover { background: #ffed4a; }

/* ─── CRÉDITOS ─── */
#creditos-modal {
  background: #16213e;
  border: 3px solid #ffd700;
  padding: 28px;
  text-align: left;
}
#creditos-modal h2 {
  color: #ffd700;
  font-size: 22px;
  margin-bottom: 4px;
  text-align: center;
}
#creditos-modal .credits-sub {
  color: #888;
  font-size: 12px;
  text-align: center;
  margin-bottom: 18px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
#creditos-modal h3 {
  color: #ff8c42;
  font-size: 13px;
  margin: 16px 0 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
#creditos-modal p {
  font-size: 12px;
  color: #ccc;
  margin-bottom: 10px;
  line-height: 1.7;
}
#creditos-modal ul {
  list-style: none;
  padding: 0;
}
#creditos-modal ul li {
  font-size: 11px;
  color: #aaa;
  padding: 4px 0;
  border-bottom: 1px dotted #333;
}
.credits-foot {
  margin-top: 18px;
  text-align: center;
  font-size: 10px !important;
  color: #666 !important;
}
#creditos-modal .btn-restart {
  display: block;
  margin: 18px auto 0;
}

/* ─── FOOTER ─── */
#footer {
  margin-top: 16px;
  text-align: center;
  font-size: 11px;
  color: #555;
  padding: 8px;
}
#footer a {
  color: #888;
  text-decoration: none;
  transition: color 0.2s;
}
#footer a:hover { color: #ffd700; }
.sep { margin: 0 8px; color: #333; }
#guardado-estado { min-height: 16px; margin-top: 5px; color: #6ecf8d; font-size: 9px; letter-spacing: .4px; }
.cfg-continuar-btn {
  width: 100%; margin: 0 0 10px; padding: 13px 14px; border: 2px solid #2dc653;
  background: #102a22; color: #a7f3c1; cursor: pointer; font: inherit; font-weight: bold;
  letter-spacing: 1px;
}
.cfg-continuar-btn:hover { background: #164332; color: #fff; }

/* ─── TAGS DE COLOR PARA EVENTOS ─── */
.tag-the-one { color: #ff6b35; }
.tag-rival { color: #22c55e; }
.tag-judicial { color: #e63946; }
.tag-hippie { color: #7bc67e; }
.tag-mocion { color: #ff4d4d; font-weight: bold; }
.tag-nacional { color: #a8dadc; }
.tag-esposa { color: #ff9eb5; }
.tag-amante { color: #ff69b4; font-weight: bold; }
.tag-chaveta { color: #c9a84c; font-weight: bold; }
.tag-pelea { color: #ff1493; font-weight: bold; }
.tag-cloaca { color: #ff6b35; font-weight: bold; }
.tag-familia { color: #ff8c42; font-weight: bold; }

/* ─── RESPONSIVE ─── */
/* ═══════════════════════════════════════
   RESPONSIVE — TABLET (≤760px)
═══════════════════════════════════════ */
@media (max-width: 760px) {
  /* Layout principal: columna única */
  #main { grid-template-columns: 1fr; }
  /* Panel derecho debajo del izquierdo */
  #panel-right { order: 2; }
  /* Módulos: 3 columnas en tablet */
  #modulos { grid-template-columns: repeat(3, 1fr); }
  /* Recursos: 3 columnas en tablet */
  #recursos { grid-template-columns: repeat(3, 1fr); }
  /* Header más compacto */
  #header h1 { font-size: 18px; }
  /* Modales más compactos */
  #modulo-modal, #evento-modal { padding: 18px; }
}

/* ═══════════════════════════════════════
   RESPONSIVE — MÓVIL (≤600px)
═══════════════════════════════════════ */
@media (max-width: 600px) {
  /* Game container */
  #game { padding: 8px; }

  /* Header */
  #header {
    flex-direction: column;
    gap: 6px;
    text-align: center;
    padding: 10px;
  }
  #header h1 { font-size: 16px; }
  #header .header-sub { font-size: 9px; }
  #turno-num { font-size: 16px; }

  /* Recursos: 3+2 en dos filas */
  #recursos {
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
  }
  .recurso-card { padding: 6px 4px; }
  .recurso-label { font-size: 9px; letter-spacing: 0; }
  .recurso-val { font-size: 18px; }
  /* Cloaca ocupa toda la fila inferior */
  .recurso-card.cloaca-card { grid-column: span 3; }
  #cloaca-riesgo-texto { font-size: 9px; }

  /* Escándalo */
  #escandalo-label { font-size: 11px; }
  #escandalo-pct { font-size: 11px; }

  /* Avisos (COVID, Kitty, vida loca) */
  #covid-aviso, #kitty-aviso, #vidaloca-aviso {
    font-size: 10px;
    padding: 6px 10px;
    flex-wrap: wrap;
    gap: 4px;
  }
  .covid-info, .kitty-info, .vidaloca-info { font-size: 9px; }

  /* Módulos: 2 columnas en móvil */
  #modulos {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  .modulo-btn { padding: 10px 6px; }
  .modulo-icon { font-size: 18px; }
  .modulo-nombre { font-size: 11px; }
  .modulo-desc { font-size: 9px; }

  /* Estado del juego */
  #estado-juego { padding: 12px; }
  #estado-titulo { font-size: 12px; }
  #estado-msg { font-size: 11px; }

  /* Fin de turno */
  #fin-turno-label { font-size: 9px; }
  #fin-turno-btn {
    font-size: 13px;
    padding: 13px 10px;
    letter-spacing: 1px;
  }

  /* Diario de operaciones */
  #log-box { max-height: 160px; }
  .log-entry { font-size: 10px; padding: 4px 0; }

  /* Panel derecho: las dos pestañas conservan exactamente la misma pantalla. */
  #movil-vistas { height: 200px; flex-basis: 200px; }
  #movil-mensajes, #movil-registro { max-height: none; }

  /* Modal de módulo */
  #modulo-modal {
    padding: 14px;
    max-height: 85vh;
    overflow-y: auto;
  }
  #modulo-titulo { font-size: 14px; }
  .accion-card { padding: 10px; }
  .accion-nombre { font-size: 12px; }
  .accion-desc { font-size: 10px; }
  .badge { font-size: 9px; padding: 2px 5px; }
  .accion-titulo-fila { flex-direction: column; gap: 6px; }
  .accion-badges { flex-wrap: wrap; }

  /* Modal de evento */
  #evento-modal {
    padding: 14px;
    max-height: 90vh;
  }
  #evento-titulo { font-size: 15px; }
  #evento-texto { font-size: 11px; padding: 10px; }
  .evento-opt-card { padding: 10px 12px; }
  .evento-opt-titulo { font-size: 12px; }

  /* Pantallas finales */
  #gameover-inner h2 { font-size: 24px; }
  #victoria-inner h2 { font-size: 22px; }
  #gameover-inner p, #victoria-inner p { font-size: 12px; }
  .btn-restart { font-size: 13px; padding: 12px 20px; }
  .btn-compartir { font-size: 13px; padding: 10px 16px; }
  .fin-botones { gap: 8px; }

  /* Créditos */
  #creditos-modal { padding: 20px 16px; }
}

/* ═══════════════════════════════════════
   RESPONSIVE — MÓVIL PEQUEÑO (≤380px)
   iPhone SE, Android compactos
═══════════════════════════════════════ */
@media (max-width: 380px) {
  #game { padding: 6px; }
  #header h1 { font-size: 14px; }
  #recursos { grid-template-columns: repeat(2, 1fr); }
  .recurso-card.cloaca-card { grid-column: span 2; }
  .recurso-val { font-size: 16px; }
  #modulos { grid-template-columns: repeat(2, 1fr); gap: 5px; }
  .modulo-icon { font-size: 16px; }
  .modulo-nombre { font-size: 10px; }
  .modulo-desc { display: none; } /* Ocultar descripción en pantallas muy pequeñas */
  #fin-turno-btn { font-size: 12px; padding: 12px 8px; letter-spacing: 0; }
  #evento-titulo { font-size: 13px; }
  #evento-texto { font-size: 10px; line-height: 1.6; }
  .badge { font-size: 9px; padding: 2px 4px; }
}

/* INTRO OVERLAY */
#intro-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.95);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#intro-overlay.oculto { display: none; }
#intro-inner {
  background: linear-gradient(180deg, #16213e 0%, #0d0d1a 100%);
  border: 3px solid #e63946;
  max-width: 560px;
  width: 100%;
  padding: 32px 28px;
  text-align: center;
  margin: auto;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#intro-subtitulo {
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 8px;
}
#intro-titulo {
  font-size: 28px;
  color: #e63946;
  text-transform: uppercase;
  letter-spacing: 4px;
  margin-bottom: 24px;
}
#intro-texto {
  text-align: left;
  font-size: 13px;
  color: #ccc;
  line-height: 1.7;
}
#intro-texto p {
  margin-bottom: 12px;
}
#intro-texto b {
  color: #ffd700;
}
#intro-reglas {
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.intro-regla {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #0d0d1a;
  border: 1px solid #222;
  padding: 8px 12px;
  font-size: 12px;
  color: #aaa;
  line-height: 1.5;
}
.intro-regla b { color: #e0e0e0; }
.intro-regla span:last-child { flex: 1; min-width: 0; }
/* Lista de recursos dentro de la intro: cada línea con aire para leerse bien */
.intro-regla span:last-child br { line-height: 2; }
.intro-icono {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}
.intro-consejo {
  text-align: center;
  font-style: italic;
  color: #888;
  font-size: 12px;
  margin-top: 16px;
}
#intro-btn {
  background: #e63946;
  border: 3px solid #ff6b6b;
  color: #fff;
  padding: 16px 32px;
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-top: 24px;
  cursor: pointer;
  font-family: 'Courier New', monospace;
  transition: all 0.2s;
  animation: intro-pulse 2s ease-in-out infinite;
}
#intro-btn:hover {
  background: #ff4d4d;
  transform: scale(1.03);
}
@keyframes intro-pulse {
  0%, 100% { box-shadow: 0 0 15px rgba(230,57,70,0.5); }
  50% { box-shadow: 0 0 30px rgba(230,57,70,0.8); }
}

.modulo-btn.modulo-bloqueado {
  opacity: 0.3;
  filter: grayscale(0.8);
  pointer-events: none;
  position: relative;
}
.modulo-btn.modulo-bloqueado::after {
  content: '🚫';
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 14px;
}

/* INTRO RESPONSIVE — móviles */
@media (max-width: 600px) {
  #intro-overlay { padding: 8px; }
  #intro-inner {
    padding: 20px 14px;
    border-width: 2px;
    max-height: calc(100vh - 16px);
  }
  #intro-titulo { font-size: 22px; letter-spacing: 2px; margin-bottom: 16px; }
  #intro-subtitulo { font-size: 10px; letter-spacing: 2px; }
  #intro-texto { font-size: 12px; line-height: 1.5; }
  #intro-texto p { margin-bottom: 10px; }
  #intro-reglas { gap: 6px; margin: 12px 0; }
  .intro-regla { font-size: 11px; padding: 8px 10px; gap: 8px; line-height: 1.6; }
  .intro-icono { font-size: 14px; }
  .intro-consejo { font-size: 11px; margin-top: 12px; }
  #intro-btn {
    font-size: 15px;
    padding: 14px 20px;
    letter-spacing: 2px;
    margin-top: 18px;
    width: 100%;
  }
}
/* Móviles muy pequeños (iPhone SE y similares) */
@media (max-width: 380px) {
  #intro-titulo { font-size: 19px; letter-spacing: 1px; }
  #intro-texto { font-size: 11px; }
  .intro-regla { font-size: 10px; padding: 7px 8px; }
  #intro-btn { font-size: 13px; padding: 13px 14px; letter-spacing: 1px; }
}

/* AVISO DE FONDOS INSUFICIENTES */
#aviso-dinero {
  display: none;
  background: linear-gradient(90deg, #3a0d0d 0%, #5a1515 50%, #3a0d0d 100%);
  border: 2px solid #e63946;
  color: #ffb3b3;
  padding: 12px 16px;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  animation: aviso-dinero-in 0.25s ease-out;
}
#aviso-dinero.visible { display: block; }
#aviso-dinero b { color: #ff6b6b; }
@keyframes aviso-dinero-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* MODAL DE DESBLOQUEO DE MÓDULOS */
#desbloqueo-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.9);
  z-index: 9998;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#desbloqueo-overlay.visible { display: flex; }
#desbloqueo-inner {
  background: linear-gradient(180deg, #16213e 0%, #0d0d1a 100%);
  border: 3px solid #ffd700;
  max-width: 460px;
  width: 100%;
  padding: 26px 24px;
  text-align: center;
  margin: auto;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#desbloqueo-titulo {
  font-size: 20px;
  color: #ffd700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 16px;
}
.desbloqueo-intro {
  font-size: 13px;
  color: #ccc;
  margin-bottom: 16px;
  font-style: italic;
}
.desbloqueo-modulo {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #0d0d1a;
  border: 1px solid #333;
  padding: 12px;
  margin-bottom: 10px;
  text-align: left;
}
.desbloqueo-icono {
  font-size: 26px;
  flex-shrink: 0;
}
.desbloqueo-nombre {
  font-size: 14px;
  color: #ffd700;
  font-weight: bold;
  margin-bottom: 4px;
}
.desbloqueo-ops {
  font-size: 10px;
  color: #888;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-left: 6px;
}
.desbloqueo-desc {
  font-size: 12px;
  color: #bbb;
  line-height: 1.5;
}
#desbloqueo-btn {
  background: #ffd700;
  border: none;
  color: #000;
  padding: 13px 30px;
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 12px;
  cursor: pointer;
  font-family: 'Courier New', monospace;
  transition: all 0.2s;
}
#desbloqueo-btn:hover { background: #ffe74d; transform: scale(1.03); }
@media (max-width: 600px) {
  #desbloqueo-inner { padding: 20px 16px; border-width: 2px; max-height: calc(100vh - 16px); }
  #desbloqueo-titulo { font-size: 17px; }
  .desbloqueo-icono { font-size: 22px; }
  #desbloqueo-btn { width: 100%; }
}

/* BOTONES DE FIN (compartir + reiniciar) */
.fin-botones {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
}
.btn-compartir {
  background: #000;
  border: 2px solid #fff;
  color: #fff;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
  transition: all 0.2s;
  width: 100%;
  max-width: 280px;
}
.btn-compartir:hover {
  background: #1d1d1d;
  transform: scale(1.03);
}
.fin-botones .btn-restart {
  width: 100%;
  max-width: 280px;
  margin: 0;
}

/* MEDIDOR DE RIESGO DE CLOACA */
#cloaca-riesgo {
  width: 100%;
  height: 5px;
  background: #1a1a2e;
  border-radius: 3px;
  margin-top: 4px;
  overflow: hidden;
}
#cloaca-riesgo-barra {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  transition: width 0.3s, background 0.3s;
  background: #2dc653;
}
#cloaca-riesgo-texto {
  font-size: 9px;
  text-align: center;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #2dc653;
  font-weight: bold;
}

/* CRÉDITOS: AUTORÍA */
.credits-autoria {
  text-align: center;
  font-size: 14px;
  margin: 12px 0;
  line-height: 1.8;
}
.credits-musica {
  text-align: center;
  font-size: 14px;
  margin: 12px 0;
  line-height: 1.8;
}
.credits-musica b { color: #ffd700; }
.credits-autoria b { color: #ffd700; }
.credits-x {
  display: inline-block;
  margin-top: 6px;
  padding: 8px 18px;
  background: #000;
  border: 1px solid #fff;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 1px;
  transition: all 0.2s;
}
.credits-x:hover {
  background: #1d1d1d;
  transform: scale(1.05);
}

/* PRESENTACIÓN DE LADY DÍAZ */
.lady-presentacion {
  text-align: center;
}
.lady-avatar-grande {
  font-size: 54px;
  margin-bottom: 12px;
  animation: lady-aparece 0.5s ease-out;
}
.presentacion-retrato {
  width: 128px; height: 128px; border-radius: 50%; object-fit: cover;
  display: block; margin: 0 auto 14px; border: 3px solid #ffd700;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  animation: lady-aparece 0.5s ease-out;
}
.presentacion-retrato-full {
  width: 200px; max-width: 70%; height: auto; display: block; margin: 0 auto 14px;
  animation: lady-aparece 0.5s ease-out;
}
.pr-lady { border-color: #ff6b35; }
.pr-kitty { border-color: #ff4d6d; }
@keyframes lady-aparece {
  0% { transform: scale(0.3) rotate(-10deg); opacity: 0; }
  60% { transform: scale(1.15) rotate(5deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.lady-dialogo {
  font-size: 15px;
  color: #ffb98a;
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 16px;
  padding: 0 8px;
}
.lady-dialogo b { color: #ff6b35; }
.lady-nota {
  font-size: 12px;
  color: #aaa;
  line-height: 1.5;
  border-top: 1px solid #333;
  padding-top: 12px;
}

/* PRESENTACIÓN DE KITTY GATAT */
.kitty-presentacion {
  text-align: center;
}
.kitty-avatar-grande {
  font-size: 54px;
  margin-bottom: 12px;
  animation: kitty-aparece 0.5s ease-out;
}
@keyframes kitty-aparece {
  0% { transform: scale(0.3) rotate(10deg); opacity: 0; }
  60% { transform: scale(1.15) rotate(-5deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.kitty-dialogo {
  font-size: 15px;
  color: #ff99dd;
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 16px;
  padding: 0 8px;
}
.kitty-dialogo b { color: #ff66cc; }
.kitty-nota {
  font-size: 12px;
  color: #aaa;
  line-height: 1.5;
  border-top: 1px solid #333;
  padding-top: 12px;
}
.kitty-nota b { color: #ff99dd; }

/* ═══════════════════════════════════════
   MENÚ DE CONFIGURACIÓN
═══════════════════════════════════════ */
#config-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.97);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#config-overlay.oculto { display: none; }

#config-inner {
  background: linear-gradient(180deg, #16213e 0%, #0d0d1a 100%);
  border: 2px solid #e63946;
  max-width: 480px;
  width: 100%;
  padding: 32px 28px;
  text-align: center;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.config-subtitulo {
  font-size: 10px;
  color: #666;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.config-titulo {
  font-size: 26px;
  font-weight: 900;
  color: #ffd700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 6px 0;
}
.config-tagline {
  font-size: 11px;
  color: #555;
  letter-spacing: 1px;
  margin-bottom: 28px;
}

.config-seccion { margin-bottom: 22px; text-align: left; }
.config-seccion-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #666;
  margin-bottom: 10px;
}

/* Duración */
.config-dur-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
/* Evitar que elementos hijos intercepten el click en móvil */
.config-dur-btn *, .config-dif-btn * { pointer-events: none; }
.config-dur-btn {
  background: #111130;
  border: 2px solid #3a3a5a;
  color: #aab0cc;
  padding: 14px 10px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 1px;
  text-align: center;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.config-dur-btn.activo {
  background: #1e2a4a;
  border-color: #ffd700;
  color: #ffd700;
}
.config-dur-btn:hover:not(.activo) { border-color: #5a5a7a; color: #c0c8e0; }
.config-dur-sub {
  font-size: 9px;
  font-weight: 400;
  color: inherit;
  opacity: 0.6;
  letter-spacing: 0;
}

/* ─── WIZARD DE CREACIÓN DE MINISTRO ─── */
.cfg-paso { display: none; animation: cfgFadeIn 0.25s ease; }
.cfg-paso.activo { display: block; }
@keyframes cfgFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.cfg-bienvenida-texto {
  font-size: 15px;
  line-height: 1.7;
  color: #d8d8e8;
  text-align: center;
  margin: 18px 0 26px;
}

.cfg-nombre-input {
  width: 100%;
  background: #111130;
  border: 2px solid #3a3a5a;
  color: #fff;
  padding: 14px 16px;
  font-size: 16px;
  border-radius: 8px;
  font-family: inherit;
  margin-top: 10px;
  text-align: center;
}
.cfg-nombre-input:focus { outline: none; border-color: #d97706; }
.cfg-nota-paso { font-size: 12px; color: #888; text-align: center; margin-top: 8px; }

.cfg-opciones-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.cfg-opcion-btn {
  background: #111130;
  border: 2px solid #3a3a5a;
  color: #aab0cc;
  padding: 12px 14px;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.cfg-opcion-btn:hover { border-color: #5a5a8a; }
.cfg-opcion-btn.activo { border-color: #d97706; background: #1a1530; color: #fff; }
.cfg-opcion-nombre { display: block; font-weight: bold; font-size: 13.5px; margin-bottom: 3px; }
.cfg-opcion-pista { display: block; font-size: 11.5px; color: #888; font-style: italic; }
.cfg-opcion-btn.activo .cfg-opcion-pista { color: #d0a068; }

.cfg-nav { display: flex; gap: 10px; margin-top: 18px; }
.cfg-atras-btn, .cfg-siguiente-btn {
  flex: 1;
  padding: 13px;
  border-radius: 8px;
  font-family: inherit;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  border: none;
}
.cfg-atras-btn { background: #222240; color: #aab0cc; }
.cfg-siguiente-btn { background: linear-gradient(135deg, #d97706, #b45309); color: #fff; }
#cfg-paso-0 .cfg-siguiente-btn { width: 100%; }

/* Dificultad */
.config-dif-lista { display: flex; flex-direction: column; gap: 8px; }
.config-dif-btn {
  background: #111130;
  border: 2px solid #3a3a5a;
  color: #aab0cc;
  padding: 12px 14px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  transition: all 0.15s;
}
.config-dif-btn.activo {
  background: #1e2a4a;
  border-color: #ffd700;
}
.config-dif-btn:hover:not(.activo) { border-color: #5a5a7a; }
.config-dif-left { display: flex; flex-direction: column; gap: 3px; }
.config-dif-nombre {
  font-weight: 700;
  font-size: 12px;
  color: #aab0cc;
}
.config-dif-btn.activo .config-dif-nombre { color: #ffd700; }
.config-dif-desc {
  font-size: 9px;
  color: #d97706;
  font-weight: 400;
  letter-spacing: 0;
}
.config-dif-btn.activo .config-dif-desc { color: #fbbf24; }
.config-dif-tag {
  font-size: 9px;
  color: #6668aa;
  letter-spacing: 1px;
  flex-shrink: 0;
}
.config-dif-btn.activo .config-dif-tag { color: #ffd700; }

/* Resumen */
#config-resumen {
  background: #0a0a15;
  border: 1px solid #222;
  padding: 10px 14px;
  margin-bottom: 20px;
  font-size: 10px;
  color: #666;
  line-height: 1.8;
  text-align: left;
}
#cfg-resumen-titulo { color: #ffd700; }
#config-resumen span:not(#cfg-resumen-titulo) { color: #bbb; }

/* Botón empezar */
#config-btn-empezar {
  width: 100%;
  background: #e63946;
  border: none;
  color: #fff;
  padding: 16px;
  font-family: 'Courier New', monospace;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}
#config-btn-empezar:hover { background: #c0303b; transform: scale(1.02); }

#cfg-modo-experto-btn {
  width: 100%;
  margin: 10px 0 14px;
  padding: 14px 16px;
  background: #1a2340;
  color: #ffd76a;
  border: 2px dashed #ffd700;
  border-radius: 10px;
  font-family: inherit;
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, border-style 0.15s;
}
#cfg-modo-experto-btn:hover { background: #22305a; transform: scale(1.01); }
#cfg-modo-experto-btn.activo {
  background: rgba(255,215,0,0.18);
  color: #fff8c8;
  border-style: solid;
  box-shadow: 0 0 12px rgba(255,215,0,0.3);
}

.config-nota {
  margin-top: 12px;
  font-size: 9px;
  color: #333;
  letter-spacing: 1px;
}

/* Responsive */
@media (max-width: 600px) {
  #config-inner { padding: 24px 16px; border-width: 2px; }
  .config-titulo { font-size: 22px; }
  .config-dur-btn { font-size: 12px; padding: 12px 8px; }
  .config-dif-btn { font-size: 11px; }
  #config-btn-empezar { font-size: 14px; letter-spacing: 2px; }
}
@media (max-width: 380px) {
  .config-titulo { font-size: 19px; }
  .config-dur-btn { font-size: 11px; }
  .config-dif-nombre { font-size: 11px; }
}

/* Aviso de recursos insuficientes dentro del modal de evento */
#aviso-evento {
  display: none;
  background: linear-gradient(90deg, #3a0d0d 0%, #5a1515 50%, #3a0d0d 100%);
  border: 2px solid #e63946;
  color: #ffb3b3;
  padding: 10px 14px;
  margin: 8px 0;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  animation: aviso-dinero-in 0.25s ease-out;
}
#aviso-evento.visible { display: block; }
#aviso-evento b { color: #ff6b6b; }

/* Barra de recursos dentro del modal de evento */
#evento-recursos {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  background: #0a0a15;
  border: 1px solid #2a2a3e;
  padding: 8px 12px;
  margin-bottom: 12px;
  justify-content: center;
}
.ev-recurso {
  font-size: 12px;
  color: #aaa;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 3px;
}
.ev-recurso span { color: #ffd700; }
.ev-escandalo span { color: #e63946; }
/* v1.1.31 · La misma barra de recursos dentro de los módulos */
#modulo-recursos {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  background: #0a0a15; border: 1px solid #2a2a3e; padding: 8px 12px; margin-bottom: 12px;
}
.badge-nota { font-size: 0.85em; font-weight: 600; opacity: 0.75; margin-left: 2px; }
@media (max-width: 600px) {
  #evento-recursos, #modulo-recursos { gap: 6px; padding: 6px 10px; }
  .ev-recurso { font-size: 11px; }
}

/* ═══════════════════════════════════════
   KODIARIO — PORTADA DE PERIÓDICO
═══════════════════════════════════════ */
#kodiario-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.88);
  z-index: 9997;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#kodiario-overlay.visible { display: flex; }

#kodiario-inner {
  background: #f5f0e8;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
  border: 3px solid #c0392b;
  min-height: min(560px, calc(100vh - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-family: Georgia, serif;
}

/* Cabecera papel */
#kodiario-head {
  background: #f5f0e8;
  padding: 10px 16px 6px;
  border-bottom: 4px solid #1a1a2e;
}
#kodiario-meta {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: #888;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
#kodiario-titulo-wrap {
  border-top: 1px solid #1a1a2e;
  border-bottom: 1px solid #1a1a2e;
  padding: 6px 0;
  text-align: center;
}
#kodiario-nombre {
  font-size: 44px;
  font-weight: 900;
  color: #1a1a2e;
  letter-spacing: 4px;
  line-height: 1;
}
#kodiario-lema {
  font-size: 8px;
  color: #c0392b;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top: 3px;
}

/* Franja roja */
#kodiario-franja {
  background: #c0392b;
  padding: 3px 16px;
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: #fff;
  letter-spacing: 1px;
  font-family: 'Courier New', monospace;
}

/* Cuerpo */
#kodiario-body { padding: 14px 16px; background: #f5f0e8; }

#kodiario-exclusiva {
  font-size: 8px;
  color: #c0392b;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 4px;
  font-family: 'Courier New', monospace;
}
#kodiario-titular {
  font-size: 19px;
  font-weight: bold;
  color: #1a1a2e;
  line-height: 1.2;
  margin-bottom: 6px;
  border-bottom: 2px solid #1a1a2e;
  padding-bottom: 8px;
}
#kodiario-subtitular {
  font-size: 11px;
  color: #444;
  font-style: italic;
  line-height: 1.4;
  margin-bottom: 10px;
}

/* Columnas */
#kodiario-columnas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 10px;
}
#kodiario-col1 { border-right: 1px solid #bbb; padding-right: 12px; }
.kodiario-col-label {
  font-size: 8px;
  color: #c0392b;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 3px;
  font-family: 'Courier New', monospace;
}
#kodiario-noticia1, #kodiario-noticia2 {
  font-size: 10px;
  color: #333;
  line-height: 1.5;
}

/* Separador */
#kodiario-separador {
  text-align: center;
  color: #1a1a2e;
  margin: 8px 0;
  border-top: 1px solid #1a1a2e;
  border-bottom: 1px solid #1a1a2e;
  padding: 3px 0;
  font-size: 10px;
}

/* Opinión */
#kodiario-opinion {
  background: #e8e0d0;
  padding: 8px 10px;
  margin-bottom: 12px;
  border-left: 3px solid #c0392b;
}
#kodiario-cita {
  font-size: 10px;
  color: #333;
  font-style: italic;
  line-height: 1.4;
}

/* Botones */
#kodiario-botones {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
#kodiario-btn-mas {
  flex: 1;
  background: #f5f0e8;
  border: 2px solid #1a1a2e;
  color: #1a1a2e;
  padding: 10px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all 0.15s;
}
#kodiario-btn-mas:hover { background: #1a1a2e; color: #f5f0e8; }
#kodiario-btn-saltar {
  flex: 1;
  background: #c0392b;
  border: 2px solid #c0392b;
  color: #fff;
  padding: 10px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all 0.15s;
}
#kodiario-btn-saltar:hover { background: #a93226; }

/* Texto ampliado */
#kodiario-ampliado {
  background: #ece5d5;
  border: 1px solid #bbb;
  padding: 10px;
  font-size: 10px;
  color: #333;
  line-height: 1.6;
  margin-bottom: 8px;
  font-style: italic;
}

/* Pie */
#kodiario-pie {
  background: #1a1a2e;
  padding: 5px 16px;
  display: flex;
  justify-content: space-between;
  font-size: 7px;
  color: #666;
  font-family: 'Courier New', monospace;
}

/* Responsive */
@media (max-width: 600px) {
  #kodiario-nombre { font-size: 32px; letter-spacing: 2px; }
  #kodiario-titular { font-size: 15px; }
  #kodiario-columnas { grid-template-columns: 1fr; }
  #kodiario-col1 { border-right: none; border-bottom: 1px solid #bbb; padding-right: 0; padding-bottom: 8px; }
  #kodiario-btn-mas, #kodiario-btn-saltar { font-size: 10px; padding: 8px; }
}

/* ── AVISO DE FICCIÓN ─────────────────────────────────────── */
#intro-aviso{
  margin-top:18px; padding:12px 14px;
  background:#0d0d1a; border:1px dashed #666; border-left:3px solid #ffd700;
}
#intro-aviso .aviso-titulo{
  font-size:11px; letter-spacing:2px; color:#ffd700; font-weight:bold; margin-bottom:6px;
}
#intro-aviso p{ font-size:11px; line-height:1.6; color:#aaa; margin:0 0 7px; text-align:left; }
#intro-aviso p:last-child{ margin-bottom:0; }
#footer-ficcion{
  width:100%; margin-top:6px; font-size:9px; line-height:1.4; color:#666; text-align:center;
}
@media(max-width:600px){
  #intro-aviso p{ font-size:10px; }
  #footer-ficcion{ font-size:8px; }
}

/* ── INTRO: botón siempre alcanzable y bloque de recursos compacto ───────── */
/* El scroll vive en el texto, no en toda la tarjeta: así el botón no se va al fondo. */
#intro-inner{
  display:flex; flex-direction:column;
  overflow:hidden;               /* el scroll pasa al #intro-texto */
  padding-bottom:0;
}
#intro-texto{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding-right:6px;
}
#intro-btn{
  flex:0 0 auto;
  margin:16px 0 0;
  position:sticky; bottom:0;     /* siempre visible al pie de la tarjeta */
  box-shadow:0 -14px 22px -6px #16213e;
}
/* Rejilla de recursos: 5 líneas apiladas -> 2 columnas compactas */
.intro-recursos{
  display:grid; grid-template-columns:1fr 1fr; gap:4px 10px; margin-top:6px;
}
.intro-recursos .ir{
  display:flex; align-items:baseline; gap:5px;
  font-size:11px; line-height:1.35;
}
.intro-recursos .ir b{ color:#e0e0e0; white-space:nowrap; }
.intro-recursos .ir i{ color:#888; font-style:normal; }
@media(max-width:600px){
  #intro-inner{ padding:20px 16px 0; }
  .intro-recursos{ grid-template-columns:1fr; gap:3px; }
  #intro-btn{ padding:13px 20px; font-size:15px; letter-spacing:2px; }
}

/* ── EVENTOS: que el texto largo no esconda las opciones ────────────────── */
/* Antes scrolleaba el modal entero: con textos de 600-700 chars las opciones
   quedaban bajo la línea de flotación. Ahora el scroll vive en el texto. */
#evento-modal{
  overflow-y:auto;                 /* scroll global del modal cuando el contenido no cabe */
  -webkit-overflow-scrolling:touch;
}
@media(max-width:600px){
  #evento-modal{ padding:16px; max-height:92vh; }
  #evento-texto{ font-size:12.5px; line-height:1.6; padding:11px; margin-bottom:12px; }
}

/* ══ CARTAS ESTILO REIGNS (1/mes) ══════════════════════════════════════════ */
#carta-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.9); z-index:105;
  align-items:center; justify-content:center; padding:16px 12px; }
#carta-overlay.visible{ display:flex; }
#carta-modal{
  width:100%; max-width:420px; height:min(560px, calc(100vh - 32px));
  background:#16213e; border:3px solid #ffd700; padding:0;
  position:relative; overflow:hidden;
  touch-action:none; cursor:grab; will-change:transform;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
#carta-modal.cr-drag{ cursor:grabbing; }
.cr-portrait{ position:absolute; inset:0; z-index:1;
  background:radial-gradient(circle at 50% 38%, #23345c 0%, #0d0d1a 70%);
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
.cr-meeple{ height:min(230px, 40vh); width:auto; filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.cr-retrato{ width:100%; height:100%; object-fit:cover; object-position:center 18%; display:block; background:#0d0d1a; }
.cr-prov{ position:absolute; top:6px; right:6px; font-size:8px; letter-spacing:1px; text-transform:uppercase;
  color:#888; background:rgba(0,0,0,.5); border:1px dashed #555; padding:2px 5px; z-index:4; }
.cr-min{ position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:3;
  font-size:10px; letter-spacing:2px; text-transform:uppercase; font-weight:bold; text-align:center;
  background:rgba(13,13,26,.82); border:1px solid currentColor; border-radius:20px; padding:3px 13px; }
.cr-inferior{ position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:26px 12px 12px; display:flex; flex-direction:column; gap:8px;
  background:linear-gradient(to top, rgba(9,11,22,.97) 52%, rgba(9,11,22,.82) 74%, transparent); }
.cr-nameplate{ display:flex; align-items:center; justify-content:center; gap:7px; }
.cr-nameplate .cr-av{ font-size:18px; }
.cr-nameplate .cr-nm{ font-size:14px; font-weight:bold; }
.cr-dilema{ padding:0 2px; font-size:12.5px; line-height:1.5; color:#eee; text-align:center;
  max-height:96px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.cr-hint{ position:absolute; top:52px; padding:6px 9px; font-size:10px; font-weight:bold;
  letter-spacing:1px; text-transform:uppercase; opacity:0; border:2px solid; background:rgba(13,13,26,.9); z-index:4; }
.cr-hint.cr-izq{ left:12px; color:#ffd700; border-color:#ffd700; transform:rotate(-8deg); }
.cr-hint.cr-der{ right:12px; color:#ffd700; border-color:#ffd700; transform:rotate(8deg); }
.cr-opciones{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cr-opt{ background:rgba(13,13,26,.82); border:2px solid #4a4a66; padding:11px 12px; cursor:pointer;
  font-family:inherit; color:#e0e0e0; text-align:left; transition:all .15s;
  display:flex; flex-direction:column; gap:5px; border-radius:8px; }
.cr-opt:hover{ border-color:#ffd700; background:#1a1a30; }
.cr-oizq:hover{ border-color:#ffd700; }
.cr-oder:hover{ border-color:#ffd700; }
.cr-dir{ font-size:9px; letter-spacing:1px; color:#999; }
.cr-oder .cr-dir{ text-align:right; }
.cr-lbl{ font-size:12px; font-weight:bold; line-height:1.3; }
.cr-badges{ display:flex; flex-wrap:wrap; gap:4px; }
.cr-badge{ font-size:11px; font-weight:bold; padding:2px 7px; border:1px solid; letter-spacing:.5px; white-space:nowrap; }
.cr-badge.cr-nada{ color:#777; border-color:#444; background:transparent; font-weight:normal; }
@media(max-width:600px){
  #carta-modal{ padding:0; }
  .cr-dilema{ font-size:12px; }
}
@media(prefers-reduced-motion:reduce){ #carta-modal{ transition:none!important; } }

/* Línea de efecto mecánico bajo la pista en la creación de ministro */
.cfg-opcion-efecto{
  display:block; font-size:11px; color:#c9a84c; margin-top:5px; letter-spacing:.3px; line-height:1.5;
}
.cfg-opcion-btn.activo .cfg-opcion-efecto{ color:#ffd700; }

/* ── MUNDIAL: banner y botón (clonado de covid-aviso/covid-btn) ──────────── */
#mundial-aviso {
  background: linear-gradient(90deg, #2a1f05 0%, #4a3a0a 50%, #2a1f05 100%);
  border: 1px solid #ffd700;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 12px;
  color: #ffd700;
  text-align: center;
  letter-spacing: 1px;
  animation: mundial-aviso-pulse 2s ease-in-out infinite;
}
@keyframes mundial-aviso-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}
#mundial-aviso .mundial-icon { font-size: 14px; margin-right: 6px; }
#mundial-aviso .mundial-info { font-size: 11px; color: #ffec99; margin-left: 4px; }
#mundial-aviso b { color: #ff9966; }
.modulo-btn.mundial-btn {
  border-color: #ffd700;
  background: linear-gradient(180deg, #2a2005, #16213e);
  animation: mundial-pulse 1.8s ease-in-out infinite;
}
.modulo-btn.mundial-btn:hover { border-color: #ffec99; }
@keyframes mundial-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255,215,0,0); }
  50% { box-shadow: 0 0 12px rgba(255,215,0,0.4); }
}
@media(max-width:600px){
  #mundial-aviso { font-size: 10px; }
  .mundial-info { font-size: 9px; }
}

/* ══ TUTORIAL DE CARTAS (primera vez) ═══════════════════════════════════════ */
#tutorial-cartas-overlay{
  display:none; position:fixed; inset:0; z-index:130;
  background:rgba(0,0,0,0.92);
  align-items:center; justify-content:center; padding:22px;
}
#tutorial-cartas-overlay.visible{ display:flex; }
#tutorial-cartas-inner{
  background:#16213e; border:3px solid #ffd700; border-radius:14px;
  max-width:440px; width:100%; padding:26px 24px; text-align:center;
}
#tutorial-cartas-inner .tut-icono{ font-size:44px; margin-bottom:6px; }
#tutorial-cartas-inner h2{ color:#ffd700; font-size:20px; margin:0 0 14px; }
#tutorial-cartas-inner p{ font-size:13.5px; line-height:1.6; margin:0 0 12px; color:#e8e8e8; }
#tutorial-cartas-inner b{ color:#ffd700; }
#tutorial-cartas-cerrar{
  margin-top:8px; padding:12px 26px; font-size:15px; font-weight:bold;
  background:#ffd700; color:#16213e; border:none; border-radius:8px; cursor:pointer;
}
#tutorial-cartas-cerrar:hover{ background:#ffe34d; }
@media(max-width:600px){
  #tutorial-cartas-inner{ padding:20px 16px; }
  #tutorial-cartas-inner h2{ font-size:18px; }
  #tutorial-cartas-inner p{ font-size:12.5px; }
}

/* ══ RETRATO DEL MINISTRO EN EL CONFIGURADOR ════════════════════════════════ */
#cfg-retrato{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  margin:0 auto 18px; animation:cfgRetratoIn .3s ease;
}
@keyframes cfgRetratoIn{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:none;} }
.cfg-retrato-marco{
  position:relative;
  width:132px; height:132px; border-radius:50%;
  border:3px solid #ffd700; background:#0d0d1a;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow:0 4px 18px rgba(0,0,0,0.5);
}
.cfg-retrato-silueta{ width:78%; height:78%; color:#3a3f55; }
#cfg-retrato-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:opacity .18s ease;
}
.cfg-retrato-wrap{ position:relative; display:inline-block; line-height:0; }
.cfg-emblema{
  position:absolute; bottom:5px; width:48px; height:48px; object-fit:contain;
  display:none; z-index:2; pointer-events:none;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.6));
  animation:cfgRetratoIn .25s ease;
}
#cfg-emblema-origen{ left:5px; }
#cfg-emblema-personalidad{ right:5px; }
@media(max-width:600px){
  .cfg-emblema{ bottom:4px; width:36px; height:36px; }
  #cfg-emblema-origen{ left:4px; }
  #cfg-emblema-personalidad{ right:4px; }
}
@media(max-width:600px){
  .cfg-retrato-marco{ width:104px; height:104px; }
  #cfg-retrato{ margin-bottom:12px; }
  }

/* ══ SCROLLBARS VISIBLES (antes salían negras por defecto sobre fondo oscuro) ══ */
* { scrollbar-width: thin; scrollbar-color: #4a5578 #1a1f36; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #1a1f36; border-radius: 5px; }
::-webkit-scrollbar-thumb { background: #4a5578; border-radius: 5px; border: 2px solid #1a1f36; }
::-webkit-scrollbar-thumb:hover { background: #ffd700; }

/* ══ PANTALLA PREVIA: AVISO DE FICCIÓN Y SÁTIRA ══════════════════════════════ */
#aviso-legal-overlay {
  position: fixed; inset: 0; z-index: 10500;
  background: rgba(0,0,0,0.97);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
#aviso-legal-overlay.oculto { display: none; }
#aviso-legal-inner {
  max-width: 560px; max-height: calc(100vh - 40px); overflow-y: auto;
  background: #141a2e; border: 2px solid #ffd700; border-radius: 14px;
  padding: 28px 26px; box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
#aviso-legal-titulo {
  font-size: 18px; letter-spacing: 1px; color: #ffd700; font-weight: bold;
  text-align: center; margin-bottom: 18px;
}
#aviso-legal-texto p {
  font-size: 14px; line-height: 1.7; color: #cfd3e0; text-align: left; margin: 0 0 12px;
}
#aviso-legal-texto p:last-child { margin-bottom: 0; }
#aviso-legal-btn {
  display: block; margin: 24px auto 0; padding: 13px 30px;
  font-size: 15px; font-weight: bold; background: #ffd700; color: #1a1a2e;
  border: none; border-radius: 8px; cursor: pointer; transition: transform .15s, box-shadow .15s;
}
#aviso-legal-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(255,215,0,0.4); }
@media(max-width:600px){
  #aviso-legal-inner { padding: 22px 18px; }
  #aviso-legal-titulo { font-size: 16px; }
  #aviso-legal-texto p { font-size: 13px; }
}

/* Fallback del retrato de carta: si la imagen no carga, ocupa su lugar el meeple */
.cr-fallback{ position:absolute; inset:0; align-items:center; justify-content:center; }

/* Remate narrativo de la última decisión (antes se descartaba en addLog) */
.resultado-narrativo{ display:block; font-size:12px; line-height:1.5; color:#d8d8e0; }

/* v1.1.33 · Saturación de módulos (vista clásica) */
.aviso-saturacion-modulo { padding: 8px 10px; margin-bottom: 8px; border: 1px solid #b07300; color: #ffcc66; font-size: 12px; }
.aviso-saturacion { color: #ffb347; }