/* /mspol/css/survival.css */

/* ancho: móvil ok, PC hasta 1024 */
.mspol-survival {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 12px;

  /* cambios: altura mínima */
  min-height: 100vh;
}
@media (max-width: 520px){
  .mspol-survival { padding: 0; }
}

/* card: ahora ocupa al menos 100vh y deja hueco para barra fija */
.mspol-survival-card{
  background:#fff;border:1px solid #e7e7ef;border-radius:18px;
  box-shadow:0 10px 30px rgba(20,20,40,.08);
  overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:#101018;

  /* cambios */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 76px; /* reserva para footer fijo */
}

/* el stage debe poder crecer y empujar el footer (aunque sea fixed, ayuda al layout) */
#mspol-survival-stage{
  flex: 1 1 auto;
}

.ms-header{padding:16px 16px 10px;background:#fff}
.ms-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ms-title{font-weight:800;font-size:18px;letter-spacing:.2px; text-align:center; flex: 1;}
.ms-skull{font-weight:900}
.ms-spacer{width:34px;height:34px}

.ms-rankbtn{
  width:34px;height:34px;
  border-radius:999px;
  border:0;
  background:#2C77B8!important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-weight: normal!important;
}

.ms-rankbtn .ms-rank-ico{
  color:#fff;
  font-size:16px;
  line-height:1;
}

.ms-stats{display:flex;align-items:flex-end;justify-content:space-between;margin-top:10px}
.ms-stat{display:flex;gap:8px;align-items:flex-end}
.ms-label{font-size:12px;color:#6b6b7a}
.ms-value{font-size:14px}
.ms-hearts{font-size:16px;letter-spacing:1px;color:#e11d48}

.ms-bars{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.ms-bar-row{display:grid;grid-template-columns:86px 1fr 46px;gap:10px;align-items:center}
.ms-bar-label{font-size:12px;color:#6b6b7a}
.ms-bar{height:10px;border-radius:999px;background:#ececf4;overflow:hidden}
.ms-bar-fill{height:100%;border-radius:999px}
.ms-bar-fill-diff{background:#f59e0b}
.ms-bar-fill-prog{background:#60a5fa}
.ms-bar-pct{font-size:12px;color:#6b6b7a;text-align:right}

.ms-body{padding:14px 16px 16px}
.ms-question-title{font-size:16px;font-weight:800;margin-bottom:30px;line-height: 1.6em;}

.ms-answers{display:flex;flex-direction:column;gap:10px}

/* respuestas como botones */
.ms-answer-card{
  display:flex;align-items:center;gap:12px;
  padding:15px 20px;
  border:1px solid #e7e7ef;border-radius:14px;
  background:#fbfbfe;
  cursor:pointer;
  position:relative;
  width:100%;
  text-align:left;
  height:auto!important;
}
.ms-answer-card:hover{border-color:#d6d6ea;background:#f8f8fd}
.ms-answer-card.is-picked{outline:2px solid rgba(44,119,184,.35)}
.ms-letter{
  width:22px;height:22px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#f0f0f8;color:#3b3b50;font-weight:800;font-size:12px;
}
.ms-answer-text{font-size:14px;color:#1b1b2a;line-height:1.5em;}

.ms-answer-locked{cursor:default}
.ms-mark{
  margin-left:auto;font-weight:900;
  width:26px;height:26px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;background:#f0f0f8;color:#111827;
}
.ms-answer-picked-correct{border-color:#22c55e;background:#f0fdf4}
.ms-answer-picked-correct .ms-mark{background:#dcfce7;color:#166534}
.ms-answers-readonly .ms-answer-picked-correct:hover{border-color:#22c55e;background:#f0fdf4}
.ms-answer-picked-wrong{border-color:#ef4444;background:#fef2f2}
.ms-answers-readonly .ms-answer-picked-wrong{border-color:#ef4444;background:#fef2f2}
.ms-answer-picked-wrong .ms-mark{background:#fee2e2;color:#991b1b}
.ms-answer-true{border-color:#22c55e;background:#f0fdf4;opacity:.95}
.ms-answer-true .ms-mark{background:#dcfce7;color:#166534}

.ms-feedback{margin-top:14px}
.ms-feedback-title{font-size:12px;font-weight:900;letter-spacing:.8px;color:#6b6b7a;margin:20px 0;}
.ms-feedback-body{
  margin-top:6px;padding:12px;background:#f7f7fc;
  border:1px solid #e7e7ef;border-radius:14px;
  font-size:14px;color:#1b1b2a;
}

/* cambios: footer fijo abajo del viewport, pero centrado a 1024 */
#mspol-survival-footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 12px; /* igual que wrapper */

  /* para que el contenedor no bloquee clics fuera */
  pointer-events: none;
}

@media (max-width: 520px){
  #mspol-survival-footer{ padding: 0; }
}

.ms-footer{
  padding:12px 16px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#fff;

  /* cambios: look de barra fija */
  border-top: 1px solid #e7e7ef;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 30px rgba(20,20,40,.08);

  /* reactivar clics */
  pointer-events: auto;
}

@media (max-width: 520px){
  .ms-footer{ border-radius: 0; }
}

.ms-nav{
  border:0;
  border-radius:14px;
  padding:10px 14px;
  font-weight:800;
  cursor:pointer;
}
.ms-nav[disabled]{opacity:.5;cursor:not-allowed}

/* < y > */
.ms-nav-left,.ms-nav-right{
  width:54px;font-size:20px;line-height:1;
  background:#2C77B8;color:#fff;
}
/* Finalizar */
.ms-nav-center{
  flex:1;
  background:#002460;color:#fff;
  text-align:center;
}

.ms-end {
	text-align: center;
	padding: 18px 0 42px;
	width:100%;
  max-width: 400px;
	margin: 10px auto 30px;
	background: #ddd;
	border-radius: 32px;
}
.ms-end-actions{margin-top:14px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* Calavera pantalla final */
.ms-end-skull{
  display: block;
  text-align: center;
  font-size: 50px;     /* más grande */
  line-height: 1;
  margin: 0 0 10px 0;
}

.ms-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 14px;border-radius:12px;font-weight:800;
  border:0;cursor:pointer;text-decoration:none;
  font-size:14px!important;
}
.ms-btn-primary{background:#2C77B8;color:#fff}
.ms-btn-secondary{background:#002460;color:#fff}

/* tabs en modal rankings */
.mspol-rank-tabs-head{display:flex;gap:8px;margin-bottom:12px}
.mspol-rank-tab{
  flex:1;
  border:1px solid #e7e7ef;
  background:#fbfbfe;
  border-radius:12px;
  padding:10px 12px;
  font-weight:800;
  cursor:pointer;

  color:#002460;              /* texto visible en inactiva */
}

.mspol-rank-tab.is-active{
  background:#002460;
  color:#fff;
  border-color:#002460;
}
.mspol-rank-panel{display:none}
.mspol-rank-panel.is-active{display:block}

/* cambios: ocultar la barra de navegación al finalizar partida
   (requiere que el wrapper tenga data-screen="end") */
.mspol-survival[data-screen="end"] #mspol-survival-footer{
  display: none !important;
}
.mspol-survival[data-screen="end"] .mspol-survival-card{
  padding-bottom: 0 !important;
}

/* BOTONES FIN PARTIDA: hover transparente, borde y texto en el azul del botón */
.ms-end-actions .ms-btn{
  border: 2px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* estado normal (ya lo tenías, lo reafirmo) */
.ms-end-actions .ms-btn-primary{
  background:#2C77B8;
  color:#fff;
  border-color:#2C77B8;
}
.ms-end-actions .ms-btn-secondary{
  background:#002460;
  color:#fff;
  border-color:#002460;
}

/* hover/focus: transparente + borde/texto del mismo color */
.ms-end-actions .ms-btn-primary:hover,
.ms-end-actions .ms-btn-primary:focus{
  background:transparent;
  color:#2C77B8;
  border-color:#2C77B8;
}

.ms-end-actions .ms-btn-secondary:hover,
.ms-end-actions .ms-btn-secondary:focus{
  background:transparent;
  color:#002460;
  border-color:#002460;
}

/* opcional: quitar subrayado en el <a> y mantenerlo en hover */
.ms-end-actions a.ms-btn,
.ms-end-actions a.ms-btn:hover{
  text-decoration: none;
}

/* ESTILOS QUE HAY QUE MODIFICAR SEGUN EL ITEM DE WP */
body.page-id-30161 .page-header{z-index:0;}
body.page-id-30161 .modal{padding-left: 0;}

body.page-id-30161 .ranking-box h3 {
	font-size: 18px;
	line-height: 1.6em;
	margin: 20px auto;
}

/* Item menú con calavera */
.side-navigation .primary-nav ul li ul li.menu-item-30211::before{
  content: "☠" !important;
  font-family: inherit !important;  /* no icon-font */
  font-weight: 400 !important;
  font-style: normal !important;
  
  width: 40px !important;
  height: 40px !important;
  line-height: 40px !important;
  text-align: center;

  font-size: 22px !important;
}

@media (min-width: 576px) {
    body.page-id-30161 .modal-dialog {
        max-width: 60% !important;
        margin: 20px auto !important;
    }
    .mspol-survival-card{padding-bottom: 2px;}
}