/* Variables para colores repetitivos de la interfaz de Minecraft */
:root {
    --mc-gui: #c6c6c6; /* Gris clásico de los menús */
    --mc-border-dark: #555555; /* Sombra del bloque */
    --mc-border-light: #ffffff; /* Brillo del bloque */
}

/* tipografia */   

body, button, input, a, h2, p, span {
    font-family: 'Press Start 2P', cursive; /* Fuente pixelada tipo Minecraft */
}


body {
    /* position: fixed; */
    margin: 0;
    width: 100%;
    height: 100dvh; /* Altura dinámica real en móviles (ignora la barra de URL) */
    overflow: hidden;
    touch-action: none; /* Evita el zoom y scroll en móviles */
    /* Fondo inicial de día */
    background: url('aseet/fondo-dia.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed; /* Mantiene el fondo fijo al hacer scroll */
    font-family: 'Minecraftia', sans-serif;
    overflow: hidden; /* Evita que el usuario scrollee */
    transition: background 0.95s ease-in-out; /* Transición suave al cambiar a noche */
}

body.noche {
    background: url('aseet/fondo-noche.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

button, input, a, .slot, #palanca-img{
    touch-action: manipulation; /* Mejora la respuesta táctil en móviles */
}

#main-content, #login-overlay {
    height: 100vh; /* Fallback para navegadores viejos */
    height: 100dvh; /* Altura dinámica real en móviles (ignora la barra de URL) */
}

#main-content {
    width: 100vw;               /* Usamos viewport width para ocupar TODO el ancho */
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;        /* Centra horizontalmente */
    justify-content: flex-start;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;         /* Para que los elementos internos se ubiquen mejor */
    padding: 0;                 /* Eliminamos cualquier padding que achique el logo */
    margin: 0;
}

/* IMPORTANTE: Agregá esto para que el header no limite al logo */
header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;             /* ESTO: Evita que el resto del contenido "apriete" al logo */
    padding-top: 25px;
}

.logo {
    width: 80%;      /* Ahora que el main es 100vw, el 85% es real */
    max-width: 250px;
    height: auto;
    display: block;
    transform: scale(1.2);      /* Lo agrandamos para compensar el "aire" de la imagen */
    margin-bottom: 15px;
}

/* .hotbar {
    margin-top: auto; 
    margin-bottom: 10px;
    width: 90%;
} */



.achievement {
    background-color: #212121; /* Fondo oscuro tipo menú MC */
    border: 3px solid #000;
    padding: 10px ;
    box-shadow: inset -3px -3px 0 #555, 
                inset 3px 3px 0 #999;
    text-align: center;
    width: fit-content;      /* Se ajusta al tamaño del texto */
}

.achievement p {
    color: #e1e1e1;              /* Gris claro/blanco para el título */
    font-size: 0.8rem;
    margin-top: 6px;
    text-shadow: 2px 2px #000;   /* Sombra de texto pixelada */
}

.achievement span {
    color: #ffff55;              /* El clásico amarillo de los subtítulos de MC */
    font-size: 0.6rem;
    font-weight: bold;
    text-shadow: 2px 2px #000;
}

/* Efecto de desenfoque que aplicamos al contenido principal */
.pixel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;

    background-size: 4px 4px; /* Tamaño de cada píxel */
    background-image:
        linear-gradient(to right, rgba(0, 0, 0, 0.5) 1%, transparent 1%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 1%, transparent 1%);
        backdrop-filter: contrast(0.8) brightness(50%); /* Ajusta el contraste y brillo para un efecto más marcado */
        transition: opacity 0.85s ease-in-out; /* Transición suave al mostrar/ocultar la textura */
}

.bloqueado {
    pointer-events: none; /* Evita que el usuario interactúe con el contenido */
    filter: blur(2px);
}    

/* Contenedor oscuro que tapa la invitación al inicio */
#login-overlay {
    position: fixed;
    inset: 0; /* Cubre toda la pantalla */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100; /* Asegura que esté por encima de todo */
    background: rgba(0, 0, 0, 0.75); /* Fondo negro semitransparente */
}

/* Caja de login con estilo de bloque de Minecraft */
.login-box {
    background: var(--mc-gui);
    border: 4px solid #000;
    padding: 20px;
    /* Efecto 3D de píxel con sombras internas */
    box-shadow: inset -4px -4px 0 var(--mc-border-dark), 
                inset 4px 4px 0 var(--mc-border-light);
    text-align: center;
}

.login-box h2{
    font-size: 0.6rem;
    white-space: nowrap;
}

.login-box button{
    padding: 9px;
    font-size: 0.7rem;
    color: crimson;
}

/* Estilo para los inputs de texto */
input {
    background: #000;
    color: #39ed39; /* Verde tipo terminal/creeper */
    border: 2px solid var(--mc-border-dark);
    padding: 10px;
    margin: 15px 0;
    width: 80%;
}

/* confirmacion */
/* Contenedor para centrar el botón en la hotbar o abajo */
.contenedor-confirmacion {
    margin-top: 15px;
    position: absolute;
    bottom: 32px;
    text-align: center;
    margin-bottom: 8px;
    width: 85%;
    
}

/* El botón con estética de botón de menú de Minecraft */
.boton-mc {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    gap: 10px;
    background-color: #3c8527; /* Verde pasto de Minecraft */
    color: white;
    text-decoration: none;
    padding: 15px 18px;
    font-size: 0.6rem;
    border: 4px solid #000;
    /* Efecto 3D de píxel: borde claro arriba/izq, oscuro abajo/der */
    box-shadow: inset -4px -4px 0px #1d4d13, 
                inset 4px 4px 0px #5ecb3e;
    cursor: pointer;
    transition: transform 0.1s;
}

/* Efecto al pasar el mouse o tocar (Hover) */
.boton-mc:hover {
    background-color: #4aad31;
    transform: scale(1.05); /* Se agranda un poquito */
}

/* Efecto de "presionado" */
.boton-mc:active {
    transform: scale(0.95); /* Se hunde al tocarlo */
    box-shadow: inset 4px 4px 0px #1d4d13; /* Invertimos la sombra */
}

.icono-pixel {
    width: 35px;
    height: 35px;
    image-rendering: pixelated; /* Mantiene los píxeles del logo definidos */
}

/* escena del skin */
.escena {
    display: block;
    width: 100%;
    height: 350px;
    position: relative;
}

.bloque-vuelo {
    position: absolute;
    right: 10px;
    top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 150px;
}

#img-globo {
    width: 185px;
    position: absolute;
    top: 2px;
    right: 18px;
    animation: flotar 6s ease-in-out infinite;
    z-index: 2;
    
}



#personaje {
    position: absolute;
    top: 105px;
    width: 190px;
    margin-bottom: 120px; /* Lo "pegamos" un poco al globo */
    animation: balanceo 4s ease-in-out infinite;
    z-index: 3;
}

/* Contenedor de la palanca */
#palanca-container {
    position: absolute;
    left: 20px;
    bottom: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#palanca-img {
    width: 85px;
    cursor: pointer;
    transition: transform 0.2s steps(4); /* Movimiento tipo Minecraft (pixelado) */
}

#palanca-container p {
    font-family: 'Minecraft', sans-serif; /* Si tienes la fuente cargada */
    font-size: 12px;
    color: #fff;
    text-shadow: 2px 2px #000;
    margin-top: 5px;
}
@keyframes flotar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

@keyframes balanceo {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}

/* hotbar */
.hotbar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro general */
    padding: 4px;
    border: 3px solid #1e1e1e;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

.slot {
    width: 50px;
    height: 50px;
    background: #8B8B8B;
    border: 4px solid;
    border-color: #dbdbdb #555 #555 #dbdbdb; /* Efecto 3D de Minecraft */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.1s;
}

.slot:hover {
    background: #aaaaaa;
    outline: 2px solid white; /* El recuadro de selección */
}

.slot img {
    width: 40px;
    height: 40px;
    image-rendering: pixelated; /* Mantiene los píxeles nítidos */
    pointer-events: none; /* Evita que la imagen interfiera con el click */
}

/* modal reloj */
.modal-mc {
    display: none; /* Oculto al empezar */
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000; /* Por encima de la hotbar */
    justify-content: center;
    align-items: center;
}

.contenedor-info {
    background: #C6C6C6;
    border: 4px solid #000;
    box-shadow: inset -4px -4px #555, inset 4px 4px #FFF;
    padding: 20px;
    width: 80%;
    max-width: 300px;
    height: auto !important;
    min-height: 200px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 10px;
    color: #000;
}

.btn-mc {
    margin-top: 15px;
    background: #8B8B8B;
    border: 2px solid #000;
    box-shadow: inset -2px -2px #555, inset 2px 2px #FFF;
    color: white;
    padding: 10px 20px;
    font-family: 'Minecraft', sans-serif;
    cursor: pointer;
    width: 100%;
}

.btn-mc:active {
    box-shadow: inset 2px 2px #555, inset -2px -2px #FFF;
    transform: translateY(2px);
}

.estudio-firma {
    position: fixed;
    bottom: 5px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #212121;
    opacity: 0.6;
    width: 100%;
}

.estudio-firma p {
    font-family: 'poopins', sans-serif;
    font-size: 0.6rem;
    color: #fff;
    text-shadow: 1px 1px #000;
}

.estudio-firma a {
    margin-left: 5px;
    font-family: 'poopins', sans-serif;
    font-size: 0.6rem;
    color: #ffffff;
    text-shadow: 1px 1px #000;
    text-decoration: none;
    text-transform: uppercase;
    background-color: #3c8527;
    padding: 5px 10px;
    outline: 1px solid #fff;
}

/* ---- RSVP Modal ---- */
.rsvp-field {
  margin-bottom: 12px;
  width: 100%;
  height: 90%;
}

.rsvp-label {
  font-size: 9px;
  color: #aaa;
  margin-bottom: 6px;
  letter-spacing: 1px;
}

.rsvp-input {
  width: 100%;
  box-sizing: border-box;
  background: #1a1a1a;
  border: 2px solid #555;
  color: #fff;
  padding: 10px 12px;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  border-radius: 4px;
  outline: none;
}

.rsvp-input:focus {
  border-color: #5D9E3A;
}

.rsvp-toggle {
  display: flex;
  gap: 8px;
}

.rsvp-opt {
  flex: 1;
  padding: 10px 6px;
  border: 2px solid #555;
  border-radius: 4px;
  background: #1a1a1a;
  color: #888;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
  user-select: none;
}

.rsvp-opt:hover {
  border-color: #888;
}

.rsvp-opt.sel-si {
  border-color: #5D9E3A;
  background: #5D9E3A22;
  color: #5D9E3A;
}

.rsvp-opt.sel-no {
  border-color: #E24B4A;
  background: #E24B4A22;
  color: #E24B4A;
}

/* El overlay del modal ocupa toda la pantalla */
#modal-rsvp {
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

/* El contenedor interno tiene altura máxima y scroll propio */
#modal-rsvp .contenedor-info {
  max-height: 90vh;        /* Nunca ocupa más del 90% de la pantalla */
  overflow-y: auto;        /* Si el contenido no entra, hace scroll interno */
  width: 100%;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
  margin-bottom: 20px; /* Espacio para el botón de cerrar */
}