.tangerine-regular {
  font-family: "Lexend", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.tangerine-bold {
  font-family: "Lexend", sans-serif;
  font-weight: 700;
  font-style: normal;
}

body,html{
    min-height:100vh;
    width:100%;
    background-color: #eef6fc; /* tono celeste similar a info-light */
    color:#000;
    font-family:"Lexend", sans-serif;
}

h1, h2, h3 {
    font-weight: 700;
}

p {
    font-weight: 300;
}
.desktop-only{display:none;}
.mobile-only{display:block;}
#turnTimer{font-size:1.5rem;margin-bottom:0.5rem;}

.main-container{ /* Establece el formato para el contenedor principal */
    min-height: 100vh; /* Mantiene el contenedor ocupando toda la pantalla */
    width: 100%; /* Establece el ancho al 100% del tamaño de la ventana del navegador */
    display: flex; /* Utiliza el modelo de caja flexible (Flexbox) */
    justify-content: center; /* Centra el contenido horizontalmente dentro del contenedor */
    align-items: center; /* Centra el contenido verticalmente dentro del contenedor */
}

.main-container > .login, /* Establece el formato para los elementos con clase "login" dentro de ".main-container" */
.main-container > .hero-body{ /* Establece el formato para los elementos con clase "hero-body" dentro de ".main-container" */
    height: auto; /* Establece la altura automáticamente */
    width: 100%; /* Establece el ancho al 100% */
    max-width: 400px; /* Establece el ancho máximo en 400 píxeles */
    min-width: 300px; /* Establece el ancho mínimo en 300 píxeles */
}

.form-inline{ /* Establece el formato para elementos con clase "form-inline" */
    display: inline-flex; /* Utiliza el modelo de caja flexible (Flexbox) en línea */
}

.button.is-dark{
    background-color: #363636;
    color: #fff;
}

.juego-mode,
body.juego-bg {
    min-height: 100vh;
    background: url('../img/magia/inicio.png') no-repeat top center fixed;
    background-size: cover;
}
.avatar-opt{cursor:pointer;image-rendering:pixelated;width:100%;height:auto;}
.avatar-select{display:flex;justify-content:space-between;align-items:center;}
.avatar-opt.is-selected{outline:2px solid #48c78e;}
#avatar{image-rendering:pixelated;}

/* Caja para los atributos del juego */
.attrs-box{
    background: rgba(255,221,87,0.8);
    padding: 1rem;
    border-radius: 6px;
    color:#000;
}
.attr-item{
    display:flex;
    align-items:center;
    margin-bottom:0.5rem;
}
.attr-item .progress{
    flex-grow:1;
    margin-left:0.5rem;
}
.attr-value{
    width:2rem;
    text-align:right;
    margin-left:0.5rem;
    font-weight:bold;
}

/* Datos del combatiente */
.fighter-box{background:rgba(0,0,0,0.5);padding:1rem;border-radius:6px;color:#fff;}

/* Estilos específicos para la vista de juego */
.juego-mode .button{
    background-color:#363636;
    color:#fff;
}
.juego-mode .button.is-warning{
    background-color:#ffdd57;
    color:#000;
}

/* Combate: fondo cuadrado centrado y ajustado */
body.combate-bg {
    min-height: 100vh;
    background: #000 url('../img/magia/combate16-9.png') no-repeat center center fixed;
    background-size: cover;
    color:#fff;
}

/* Juego: fondo cuadrado centrado y ajustado */
body.juego-bg {
    min-height: 100vh;
    background: #fff url('../img/magia/inicio.png') no-repeat top center fixed;
    background-size: cover;
}

/* Mensajes centrados en combate */
.center-message {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
}
.center-message .message-box {
    background: rgba(0,0,0,0.7);
    padding: 1.5rem 2rem;
    border-radius: 8px;
    color: #fff;
}
.victory-box figure{margin-bottom:1rem;}
.victory-box .title{color:#ffdd57;}

.modal-victoria {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.mensaje-victoria {
  background-color: #222;
  color: white;
  font-size: 2rem;
  padding: 2rem 3rem;
  border-radius: 12px;
  text-align: center;
  max-width: 80%;
}

@media (max-width: 768px) {
    .juego-mode,
    body.juego-bg {
        background-size: auto 100%;
        background-position: top center;
    }
    body.combate-bg {
        background-size: cover;
        background-position: center;
    }
}

@media (min-width: 1024px) {
  .desktop-only{display:block;}
  .mobile-only{display:none !important;}
}

.combate-triptych{
    display:flex;
    flex-direction:row;
    gap:1rem;
    align-items:flex-start;
    justify-content:space-around;
}
@media (max-width: 768px){
    .combate-triptych{flex-direction:column;align-items:center;}
}

.coin-counter{position:fixed;right:1rem;display:flex;align-items:center;z-index:1000;top:1rem;}

.icon-wrapper{
    background:#000;
    padding:2px;
    border-radius:4px;
    cursor:pointer;
    display:inline-flex;
}
.icon-wrapper img{
    width:32px;
    height:32px;
    image-rendering:pixelated;
}

/* Recompensa box layout */
.recompensa-box{
    display:flex;
    align-items:flex-start;
    gap:1rem;
}
.recompensa-box figure{
    margin:0;
    flex:0 0 auto;
    width:100px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.recompensa-box figure img{
    width:100%;
    height:auto;
}
.recompensa-content{
    flex:1;
    display:flex;
    flex-direction:column;
}