@font-face {
    font-family: 'Pixelity';
    src: url('https://kelly.cafe/wp-content/themes/astra/assets/fonts/Pixelity.woff2') format('woff2'),
         url('https://kelly.cafe/wp-content/themes/astra/assets/fonts/Pixelity.woff') format('woff'),
         url('https://kelly.cafe/wp-content/themes/astra/assets/fonts/Pixelity.ttf') format('truetype'),
         url('https://kelly.cafe/wp-content/themes/astra/assets/fonts/Pixelity.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}


/* Estilos generales para el contenedor del juego */
#game-container {
    position: relative;
    width: 100svw;
    height: 100svh;
    image-rendering: pixelated;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

/* Estilos para el personaje (puedes usar una imagen) */
#character {
    position: absolute;
    width: 40px;
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    image-rendering: pixelated;
}

/* Contenedor para los botones de UI persistentes */
#persistent-ui-controls {
    position: absolute; /* O fixed si quieres que se quede fijo con el scroll */
    top: -3px;
    right: 10px;
    z-index: 100; /* Asegurar que esté encima de todo */
    display: flex;
    gap: 5px; /* Espacio entre botones */
}

/* Estilo general para botones de UI */
.ui-button {
    background: url('https://kelly.cafe/wp-content/plugins/kelly-town/assets/button-bg.webp') no-repeat center;
    background-size: cover;
    color: white;
    border: none;
    width: 46px;
    height: 56px;
    display: inline-flex; /* Centrar icono */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 5px;
    transition: transform 0.2s ease;
    font-size: 20px; /* Tamaño del icono */
}

.ui-button:hover {
    transform: translateY(3px);
    background-color: transparent;
}

/* Estilo específico para botón mute cuando está activo */
.mute-button.muted {
    background-color: rgba(255, 82, 82, 0.7); /* Rojo para indicar mute */
    border-color: rgba(255, 82, 82, 1);
}

/* Panel de Volumen */
.volume-panel {
    position: absolute;
    top: 50px; /* Debajo de los botones */
    right: 0; /* Alineado a la derecha con los botones */
    background-color: rgba(0, 0, 0, 0.7);
    padding: 10px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    z-index: 99;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.volume-panel.hidden {
    opacity: 0;
    visibility: hidden;
}
#volume-slider {
    width: 120px;
    cursor: pointer;
}

#volume-slider::-webkit-slider-thumb {
    appearance: none; /* Necesario para aplicar estilos propios */
    width: 16px;      /* Ancho del círculo */
    height: 16px;     /* Alto del círculo */
    background: #ccc; /* Color del círculo */
    border-radius: 50%; /* Hacerlo redondo */
    cursor: pointer;
    border: none;     /* Quitar borde si lo hubiera */
    margin-top: -5px; /* Ajuste vertical si es necesario para centrar en la barra de 6px */
}


/* Panel de Notas */
.notes-panel {
    position: absolute;
    background-image:url('https://kelly.cafe/wp-content/plugins/kelly-town/assets/notes_bg.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    color: #1837ac;
    top: 80px;
    opacity: 1;
    right: 0; /* Misma alineación que los botones */
    width: 400px; /* Ancho del panel */
    height: 240px; /* Altura máxima */
    z-index: 98; /* Debajo de los botones pero encima del juego */
    overflow: hidden; /* Necesario para la animación de altura/transformación */
    transition: transform 0.4s ease-out, opacity 0.4s ease-out; /* Animación de deslizamiento */
    transform-origin: right center;
    display: flex;
    flex-direction: column; /* Organizar elementos verticalmente */
}

.notes-panel.notes-hidden {
    transform: translateX(100%);
    opacity: 0;

}

.notes-panel h4 {
    font-family: "Pixelity";
    color: #1837ac;
    margin: 0;
    padding: 10px 15px;
    font-size: 24px;
    text-align: center;
}

#notes-list {
    font-family: "Pixelity";
    font-size: 20px;
    list-style: none;
    padding: 10px 15px;
    margin: 0;
    overflow-y: auto; /* Scroll si hay muchas notas */
    flex-grow: 1; /* Ocupa el espacio disponible */
}

#notes-list li {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}
#notes-list li:last-child {
    border-bottom: none;
}

.trash_icon{
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease-in-out;
}
.trash_icon:hover{
    transform: scale(1.2);
}

#notes-list input[type="checkbox"] {
    margin-right: 10px;
    flex-shrink: 0; /* Evitar que el checkbox se encoja */
    cursor: pointer;
}

#notes-list .note-text {
    flex-grow: 1; /* Ocupa el espacio */
    margin-right: 10px;
    word-break: break-word; /* Para textos largos */
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

#notes-list .delete-note {
    background: none;
    border: none;
    color: #ff4d4d;
    cursor: pointer;
    font-size: 18px;
    padding: 0 5px;
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}
#notes-list .delete-note:hover {
    opacity: 1;
}

/* Estilo para notas completadas */
#notes-list li.completed .note-text {
    text-decoration: line-through;
    color: #999;
}


.add-note-area {
    display: flex;
    padding: 10px 15px;
    width: 85%;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

#new-note-input {
    background-color: #fffbec;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 13px;
}

.new-note-button{
    width: 30px;
    height: auto;
}


#spotify-browser h5 {
    margin: 0 0 5px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #ddd;
    text-align: center;
    font-size: 14px;
}
#spotify-playlist-list {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto; /* Scroll vertical para la lista */
    transition: transform 0.3s ease-in-out; /* Animación */
    background-color: #fff;
    list-style: none;
    padding: 10px 15px;
    margin: 0;
    box-sizing: border-box;
}
#spotify-playlist-list li {
    padding: 7px 5px;
    cursor: pointer;
    border-bottom: 1px dotted #eee;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex; /* Para alinear nombre y artista si es necesario */
    justify-content: space-between; /* Ejemplo */
    align-items: center;
}
.spotify-list li:last-child { border-bottom: none; }
.spotify-list li:hover { background-color: #f0f0f0; }
.spotify-list li .track-artists { font-size: 0.9em; color: #777; margin-left: 10px; } /* Estilo para artistas */
.spotify-list li.loading,
.spotify-list li.no-results { font-style: italic; color: #888; cursor: default; }
.spotify-list li.no-results:hover { background-color: transparent; }

.playlist_div{
    display: flex;
    width: 100%;
    height: 100px;
    color: black;
    border-bottom: 1px black solid;
    padding: 10px;
}

#spotify-browser{
    display: none;
    position: absolute;
    overflow: hidden;
    top: 50px;
    left: 10px;
    width: 250px;
    height: 400px;
    background: rgb(255, 251, 235);
    z-index: 97;
    border-radius: 20px;
    color:black;
}

.spotify-browser-header {
    display: flex;
    align-items: center;
    padding: 10px 10px 5px 10px;
    border-bottom: 1px solid #ccc;
    background-color: #f0f0f0;
    flex-shrink: 0;
}

#spotify-back-button {
    background: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
    padding: 0 10px 0 0;
    margin-right: 5px;
    color: #555;
    font-weight: bold;
}
#spotify-back-button:hover { color: #000; }

#spotify-browser-title {
    margin: 0;
    font-size: 14px;
    text-align: center;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spotify-browser-content {
    position: relative; /* Contiene las listas */
    flex-grow: 1;       /* Ocupa el resto del espacio */
    overflow: hidden;   /* Oculta el deslizamiento */
    height: 100%;
}

/* Posiciones iniciales y estados de deslizamiento */
#spotify-playlist-list {
    transform: translateX(0);
    z-index: 1; /* Por defecto visible */
}

#spotify-track-list {
    transform: translateX(100%); /* Empieza fuera a la derecha */
    z-index: 2; /* Se deslizará por encima */
}

/* Cuando se ven las canciones */
#spotify-browser.tracks-visible #spotify-playlist-list {
    transform: translateX(-100%); /* Mover playlists a la izquierda */
}

#spotify-browser.tracks-visible #spotify-track-list {
    transform: translateX(0); /* Mover canciones a la vista */
}

#spotify-player-controls{
    display: none;
    position: absolute; /* O 'fixed' si quieres que esté fija en la ventana */
    bottom: 50px;
    left: 20px;
    width: 250px;
    height: 150px;
    background-color: rgba(40, 40, 40, 0.95); /* Fondo oscuro semi-transparente */
    border-radius: 20px;
    color: #fff;
    display: flex; /* Usar flexbox para alinear elementos */
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
    padding: 8px 15px;
    box-sizing: border-box;
    z-index: 101; /* Encima de otros elementos UI si es necesario */
    opacity: 0; /* Empezar oculto para fade-in */
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#spotify-player-controls.visible {
    opacity: 1;
    visibility: visible;
}

.player-album-title{
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
}


#player-album-art {
    width: 50px;  /* Tamaño de la carátula */
    height: 50px;
    margin-right: 15px;
    object-fit: cover; /* Escalar imagen bien */
    flex-shrink: 0; /* Evitar que se encoja */
}

.player-track-info {
    flex-grow: 1; /* Ocupa el espacio central */
    text-align: left;
    overflow: hidden; /* Evitar desbordamiento de texto */
    margin-right: 15px;
}

#player-track-title {
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Añadir ... si el título es muy largo */
}

#player-artist-name {
    font-size: 12px;
    color: #bbb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-buttons {
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0; /* Evitar que se encojan */
}

.player-button {
    background: none;
    border: none;
    color: #fff;
    font-size: 28px; /* Tamaño de iconos de control */
    cursor: pointer;
    padding: 5px 10px;
    margin: 0 5px;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.player-button:hover {
    opacity: 1;
}

.player-button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Estilo específico para el botón Play/Pause del reproductor */
.player-button.play-pause .dashicons-controls-play::before {
     content: "\f125"; /* Código Dashicon Play */
}
.player-button.play-pause .dashicons-controls-pause::before {
     content: "\f128"; /* Código Dashicon Pause */
}

.player-volume-control {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* Evitar que se encoja */
}

.player-volume-control .volume-icon {
    font-size: 20px;
    margin-right: 8px;
    opacity: 0.7;
}

#player-volume-slider {
    width: 80px; /* Ancho del slider, ajústalo */
    height: 5px; /* Altura de la barra */
    cursor: pointer;
    appearance: none; /* Quitar estilos por defecto */
    background: #555; /* Color de la barra */
    border-radius: 3px;
    outline: none;
}

/* Estilo del "pulgar" (el círculo que se arrastra) - Webkit (Chrome, Safari, Edge) */
#player-volume-slider::-webkit-slider-thumb {
    appearance: none;
    width: 14px;
    height: 14px;
    background: #ddd;
    border-radius: 50%;
    cursor: pointer;
}
#player-volume-slider:hover::-webkit-slider-thumb {
     background: #fff;
}


/* Estilo del "pulgar" - Firefox */
#player-volume-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #ddd;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}
#player-volume-slider:hover::-moz-range-thumb {
     background: #fff;
}