/* 100 Mexicanos Dijeron - CSS
    Version: 1.0.8
    Fecha: 2025-08-11 */

:root{
  --bg:#0a0e1a;
  --panel:#0f1326;
  --text:#fff;
  --muted:#96a0b5;
  --line:#f2c94c;
  --card:#1a1f3b;
  --ok:#06d6a0;
  --bad:#ef476f;
  --accent:#ffd166; /* << importante para botones visibles */
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial}
.container{max-width:1280px;margin:0 auto;padding:16px}

/* Paneles */
.card{background:var(--panel);border-radius:18px;padding:14px 16px;box-shadow:0 8px 28px rgba(0,0,0,.3);margin:10px 0}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.col{min-width:0}

/* Botones */
.button{
  background:var(--accent);
  color:#111;
  border:none;
  padding:12px 16px;
  border-radius:12px;
  cursor:pointer;
  font-weight:800;
  box-shadow:0 4px 16px rgba(0,0,0,.25);
}
.button:hover{filter:brightness(.95)}
.button:active{transform:translateY(1px)}
.button.secondary{background:#2d2e5e;color:#fff}
.button.danger{background:var(--bad);color:#fff}
.button:disabled{opacity:.5;cursor:not-allowed}

/* HUD y pills */
.hud{display:flex;justify-content:space-between;gap:10px;margin-top:10px;color:var(--muted)}
.pill{display:inline-block;padding:6px 10px;border-radius:999px;background:#2d2e5e;color:#fff;font-size:13px}
.pill.muted{opacity:.75}
.is-turn{background:var(--accent)!important;color:#111!important;box-shadow:0 0 0 3px rgba(255,209,102,.35) inset, 0 6px 18px rgba(0,0,0,.35)}

/* PANTALLA */
.scoreboard{display:grid;grid-template-columns:260px 1fr 260px;gap:16px;align-items:stretch}
.teamBox{background:#141833;border-radius:22px;box-shadow:0 8px 32px rgba(0,0,0,.35);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:18px 14px;min-height:540px;position:relative}
.teamName{font-weight:900;font-size:30px;letter-spacing:1px;text-align:center;line-height:1.15;min-height:70px;display:flex;align-items:center;justify-content:center}
.teamScore{font-size:112px;font-weight:900;line-height:1;margin-top:8px}
.teamColor{position:absolute;inset:0;border-radius:22px;box-shadow: inset 0 0 0 6px rgba(255,255,255,.08)}
.strikeRow{display:flex;gap:12px;margin-top:8px}
.xbox{width:42px;height:42px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:900;
        background:#333333; /* Gris oscuro para el estado inactivo */
        color:#0f1326; /* Letra gris claro */
        border:2px solid rgba(255,255,255,.12)}
.xbox.on{background:var(--bad)}

.centerArea{display:flex;flex-direction:column;gap:16px}
.pot{background:#141833;border-radius:20px;padding:14px 20px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:42px;min-height:60px}
.question{background:#12162f;border:4px solid var(--line);border-radius:26px;padding:22px 24px;font-weight:900;font-size:46px;text-align:center;line-height:1.2;min-height:130px}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.answer{background:#11152a;border-radius:16px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;border:2px solid rgba(255,255,255,.08);min-height:90px}
.answer.open{background:#162a1f;border-color:rgba(6,214,160,.7)}
.answerText{font-size:28px;font-weight:800}
.answerPts{font-size:30px;font-weight:900}

@media (max-width: 980px){
  .row{grid-template-columns:1fr}
  .scoreboard{grid-template-columns:1fr}
  .answers{grid-template-columns:1fr}
  .teamScore{font-size:84px}
  .question{font-size:36px}
}
/* Boost puntos de cada respuesta (intenta cubrir tus selectores) */
.answer .pts,
.respuesta .pts,
.resp .pts,
.item-respuesta .pts,
.puntos {
  font-size: clamp(28px, 2.8vw, 24px);
  font-weight: 100;
  letter-spacing: .3px;
}

/* --- ESTILOS AÑADIDOS PARA LA INTRO --- */
#intro-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0a0e1a; /* Usa el color de fondo principal */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease-in-out;
}

#intro-screen img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    /* LÍNEA NUEVA PARA LA ANIMACIÓN */
    animation: heartbeat 2.5s ease-in-out infinite;
}

/* --- DEFINICIÓN DE LA ANIMACIÓN 'HEARTBEAT' (NUEVO) --- */
@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

/* --- CORRECCIONES FINALES PARA MARCADOR SUPERIOR --- */
/* 1. Le decimos al contenedor del marcador que centre su contenido. */
/* Usamos .pot que ya existe o .top-score si es el contenedor correcto */
.pot, .top-score {
    text-align: center;
}

/* 2. Le damos estilo al marcador para que no ocupe todo el ancho. */
/* Asumiendo que el marcador tiene el id="roundTotal" */
#roundTotal {
    display: inline-block; /* Evita que ocupe todo el ancho */
    min-width: 120px;      /* Le da un ancho mínimo para 3 cifras */
    padding: 10px 16px;    /* Espacio interno */
    /* El resto de estilos como color, fondo, etc., los hereda de .pot */
}