/* Esta vez sí usé variables para los colores, aprendí a la mala hahahhaha. */
:root {
    /* Sprites o imagenes*/
    --logoMichIsland: url('../gifs_uwu/Michelle_Souls_Island-uwu.gif');
    --AlisonSpriteUwU: url('../gifs_uwu/alisonUwU.gif');
    --AliScythe: url('../gifs_uwu/AliScythe.gif');
    --lesbiTransFlag: url('../gifs_uwu/alisonFlagPx.gif');
    --soundOn: url('../controls_uwu/soundsOn.gif');
    --soundOff: url('../controls_uwu/soundsOff.gif');
    --musicOn: url('../controls_uwu/musicPlay.gif');
    --ArrowIcon: url('../controls_uwu/flechitaIUxd.png');
    --musicOff: url('../controls_uwu/musicPause.png');
    --skullIcon: url('../controls_uwu/skull_Icon.png');
    --loadBackg: url('../imagenes uwu/tileMich1.png');
    --minIcon: url('../controls_uwu/minimize.svg');
    --maxIcon: url('../controls_uwu/maximize.svg');
    --closeIcon: url('../controls_uwu/close.svg');
    /* Colores */
    --mainColor: #fb0092;
    --hoverColor: #ff006f;
    --pressAnyColor: #ffbad2;
    --pressAnyCOlor2: var(--hoverColor);
    --madeByColor: #805593;
    --backgColor: #210a1f;
    --dialogueColor: linear-gradient(to bottom, #000000 0%, #4a0404 100%);
    --textcolorP: #ffffff;
    --windowColor: #181718;
    --titleBarBackgColor: linear-gradient(to bottom right, #ff006f 0%, #6c6266 100%); /* backgColor de la barra de titulo de la ventana */
}

::selection {
    background-color: var(--hoverColor);
    color: #fff;
}

body {
    text-align: center;
    background-image: url('../imagenes uwu/forestBackg.png');
    background-repeat: repeat-x;
    background-size: 1920px;
    background-color: #120a16;
    animation: left_scrollUwU 15s linear infinite;
    font-family: "Tiny5", sans-serif;
    font-weight: 400;
    font-style: normal;
    cursor: url('../controls_uwu/alisonCursor.png'), auto;
}

/*Animación para que se desplace a la izquierda el background uwu. */
@keyframes left_scrollUwU {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -1920px 0;
    }
}

a:hover,
button:hover,
.startScreen,
.sfxHover:hover,
#dialogueBox:hover {
    cursor: url('../controls_uwu/alisonCursorHover.png'), auto !important;
}

/* No entiendo por qué no se le aplican los estilos... asi que tuve que poner esto xd */
button {
    font-family: "Tiny5", sans-serif;
}

.version-tag {
    position: fixed;
    top: 15px;
    right: 20px;
    color: var(--hoverColor);
    font-family: "Pixelify Sans", sans-serif;
    font-size: 18px;
    opacity: 0.7;
    text-shadow: 2px 2px #000;
    z-index: 2;
}

@keyframes flicker {
    0% {
        opacity: 0.27861;
    }

    5% {
        opacity: 0.34769;
    }

    10% {
        opacity: 0.23604;
    }

    15% {
        opacity: 0.90626;
    }

    20% {
        opacity: 0.18128;
    }

    25% {
        opacity: 0.83891;
    }

    30% {
        opacity: 0.65583;
    }

    35% {
        opacity: 0.67807;
    }

    40% {
        opacity: 0.26559;
    }

    45% {
        opacity: 0.84693;
    }

    50% {
        opacity: 0.96019;
    }

    55% {
        opacity: 0.08594;
    }

    60% {
        opacity: 0.20313;
    }

    65% {
        opacity: 0.71988;
    }

    70% {
        opacity: 0.53455;
    }

    75% {
        opacity: 0.37288;
    }

    80% {
        opacity: 0.71428;
    }

    85% {
        opacity: 0.70419;
    }

    90% {
        opacity: 0.7003;
    }

    95% {
        opacity: 0.36108;
    }

    100% {
        opacity: 0.24387;
    }
}

.crtOverlay::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 4;
    background-size: 100% 3px, 4px 100%;
    pointer-events: none;
}

.crtOverlay::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(18, 16, 16, 0.1);
    opacity: 0;
    z-index: 4;
    pointer-events: none;
    animation: flicker 0.15s infinite;
}

.startScreen {
    background-image: url('../imagenes uwu/forestBackg.png');
    background-repeat: repeat-x;
    background-size: 1920px;
    background-color: #120a16;
    animation: left_scrollUwU 15s linear infinite;
    width: 100%;
    height: 100%;
    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    flex-direction: column;
    justify-content: center;
    /* Para centrar verticalmente */
    align-items: center;
    cursor: pointer;
    z-index: 3;
}

/*Animación para que se desplace a la izquierda el background uwu. */
@keyframes left_scrollUwU {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -1920px 0;
    }
}

#logoMich {
    background-image: var(--logoMichIsland);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 900px;
    height: 200px;
    filter: drop-shadow(0 0 15px var(--hoverColor));
    animation: logoMichFrame 2.5s ease-in-out infinite;
}

@keyframes logoMichFrame {
    50% {
        opacity: 0.6;
        transform: scale(1.05);
    }
}

#pressAny {
    color: var(--pressAnyColor);
    font-size: 40px;
    animation: pressKey 1s step-end infinite;
    text-shadow: var(--pressAnyCOlor2) 4px 0;
}

@keyframes pressKey {
    50% {
        opacity: 0;
    }
}

#madeBy {
    color: var(--madeByColor);
    margin-top: 120px;
    font-size: 20px;
}

/* Estilos generales de la scrollbar */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
    background-color: #0d0d0d;
}

/* El "Carril" (Track) o caminito? No sé cual seria la mejor manera de nombrarle hahaha*/
::-webkit-scrollbar-track {
    background-color: #1a0f1d;
    /* Un tono oscuro que combine con tu fondo */
    border: 1px solid #000;
}

/* La "Barrita" (Thumb) */
::-webkit-scrollbar-thumb {
    background-color: var(--hoverColor);
    border-radius: 0px;

    /* Efecto 3D de botón presionado/relieve */
    border-left: 2px solid #ff6ebc;
    border-top: 2px solid #ff6ebc;
    border-right: 2px solid #5c0029;
    border-bottom: 2px solid #5c0029;

    box-shadow: inset 1px 1px 0 0 #ff83f9,
        inset -1px -1px 0 0 #b70b58;
}

/* Efectos de Hover y Active */
::-webkit-scrollbar-thumb:hover {
    background-color: #f85594;
}

::-webkit-scrollbar-thumb:active {
    background-color: #ff3e95;
    border-left: 2px solid #5c0029;
    border-top: 2px solid #5c0029;
    border-right: 2px solid #ff6ebc;
    border-bottom: 2px solid #ff6ebc;
}

/* Los Botoncitos de las esquinas (flechitas) */
::-webkit-scrollbar-button {
    display: block;
    height: 12px;
    width: 12px;
    background-color: var(--hoverColor);
    border-left: 2px solid #ff6ebc;
    border-top: 2px solid #ff6ebc;
    border-right: 2px solid #5c0029;
    border-bottom: 2px solid #5c0029;
}

#main_container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0% auto;
}

#AlisonCharacter {
    margin: 0% auto;
    width: 900px;
    margin-top: 40px;
    display: grid;
    grid-template-areas:
        "alison dialog"
        "alison yay";
    grid-template-columns: 1fr 2fr;
}

#alisonSprite {
    grid-area: alison;
}

#alisonSprite img {
    width: 210px;
    content: var(--AlisonSpriteUwU);
}

#shadowUwU {
    width: 160px;
    height: 20px;
    background: rgba(0, 0, 0, 0.705);
    border-radius: 50%;
    margin: -10px auto 0;
    /* Lo sube un poquito para que toque los pies xd */
}

/*--- ESTILO PARA EL CUADRO DE DIALOGO  ---      */

#dialogueBox {
    cursor: pointer;
    position: relative;
    padding-bottom: 25px;
    /* Espacio extra para que el texto no tape la flecha */
    grid-area: dialog;
    width: 400px;
    height: 150px;
    color: var(--textcolorP);
    border: 5px double;
    border-color: var(--textcolorP);
    border-radius: 4px;
    background: var(--dialogueColor);
    padding: 8px;
}

#dialogueBox h1 {
    text-align: left;
    font-size: 25px;
    color: #ff006f;
    margin: 0;
    margin-bottom: 5px;
}

#dialogueBox p {
    font-size: 22px;
    text-shadow: 2px 2px #390b3f;
    text-align: left;
    margin: 0;
}
/* La flechita que apunta a mi, con before uwu. */
#dialogueBox::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background-color: #ffffff;
    border-left: 1px solid transparent;
    border-bottom: 1px solid transparent;
    position: absolute;
    left: -15px;
    top: 25px;
    transform: rotate(45deg);
    z-index: -1;
}

/* Creamos la flechita de después con ::after */
#dialogueBox::after {
    content: "";
    position: absolute;
    bottom: 10px;
    right: 15px;
    width: 20px;
    height: 20px;
    background-image: var(--ArrowIcon);
    background-size: contain;
    background-repeat: no-repeat;
    animation: arrowAnimation 0.15s infinite alternate;
}

/* Ocultamos la flechita por default y solo se muestra cuando ya acabó la escritura. */
#dialogueBox.finished::after {
    display: block;
}

#dialogueBox::after {
    display: none;
    /* Se oculta mientras escribe */
}

/* animación para la flechita del cuadro de dialogo uwu. */
@keyframes arrowAnimation {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0.9;
        transform: translateY(5px);
        /* Se mueve hacia abajo */
    }
}

/* Contenedor para los botones de New Game y Load Game */
#yayyy {
    grid-area: yay;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 100px;
    margin-top: -90px;
}

.optionsUwU {
    position: relative;
    font-size: 36px;
    width: 180px;
    border: 5px double;
    margin: 10px 0;
    padding: 5px;
    border-radius: 3px;
    border-color: #ffffff;
    background: var(--dialogueColor);
    color: rgb(255, 255, 255);
    transition: all 0.2s ease-in-out;
}

.optionsUwU:hover {
    color: var(--hoverColor);
    transform: scale(1.08);
    border-color: var(--hoverColor);
    box-shadow: 0 0 15px var(--hoverColor);

}

/* El icono que aparece a la derecha */
.optionsUwU::after {
    content: ""; /* Dejamos el content vacío */
    background-image: var(--skullIcon);
    background-size: contain;
    background-repeat: no-repeat;
    width: 40px;
    height: 40px;
    position: absolute;
    right: -50px;
    opacity: 0; /* Ocultamos la imagen para que solo se vea al hacer hover */
    transition: all 0.3s ease-in-out;
}

/* Cuando haces hover, el icono aparece y se mueve */
.optionsUwU:hover::after {
    opacity: 1;
    right: -60px;
    /* Se desplaza un poco más al aparecer */
    animation: iconFloat 0.15s infinite alternate; 
}

@keyframes iconFloat {
    from {
        transform: translateY(0);
        }
    to {
        transform: translateY(5px); 
    }
}
#soundsAndMusic {
    display: flex;
    height: auto;
}

#soundsAndMusic div {
    color: var(--hoverColor);
    margin: 0 8 px;
    padding: 0;
    font-size: 28px;
    font-family: "Pixelify Sans", sans-serif;
}

#soundsAndMusic {
    margin: 0;
    padding: 0;
    line-height: 1;
}

#soundSwitch {
    background-image: var(--soundOn);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100px;
    height: 80px;
}

#musicSwitch {
    background-image: var(--musicOn);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 120px;
    height: 80px;
}

.audioSwitches {
    cursor: pointer;
    filter: none;    
    transition: transform 0.3s ease-in-out;
    border: none;
    outline: none;
}

.audioSwitches:hover {
    transform: scale(1.2);
    filter: drop-shadow(0 0 10px var(--hoverColor));
}

/* Clases para usar como toggle para los audios */
.sfxOff {
    background-image: var(--soundOff) !important;
    filter: none !important;
}

.musicOff {
    background-image: var(--musicOff) !important;
    filter: grayscale(100%) opacity(0.5) !important;
}

/* ---------- Style para las muñequitas -----------  */
#AliScytheuwu {
    content: var(--AliScythe);
    right: -10px;
    top: 210px;
    position: absolute;
    width: 240px;
    animation: dollfloat 3s ease-in-out infinite;
}

#lesbitransDiv {
    position: absolute;
    right: 45px;
    top: 640px;
    animation: dollfloat 3s ease-in-out infinite;
    cursor: pointer;
}

#lesbitrans {
    content: var(--lesbiTransFlag);
    width: 120px;
    transition: all 0.3s ease-in-out;
}

#lesbitrans:hover {
    transform: scale(1.15);
}

#ladyBow {
    width: 140px;
    top: 250px;
    right: -100px;
    position: absolute;
    animation: dollfloat 2.4s ease-in-out infinite;
}

#metaKnight {
    position: absolute;
    width: 180px;
    top: 240px;
    left: -80px;
    animation: dollfloat 0.9s ease-in-out infinite;
}

#pinkyGhost {
    position: absolute;
    width: 90px;
    top: 400px;
    left: 100px;
    animation: pacmanGhostUwU 4s linear infinite;
}

@keyframes pacmanGhostUwU {
    0% {
        /* Empieza en el origen pero rotado para mirar a la derecha */
        transform: translateX(0) rotateY(180deg);
    }

    49% {
        /* Llega al destino mirando a la derecha */
        transform: translateX(300px) rotateY(180deg);
    }

    50% {
        /* Gira instantáneamente a su posición original (izquierda) */
        transform: translateX(300px) rotateY(0deg);
    }

    99% {
        /* Regresa al origen mirando a la izquierda */
        transform: translateX(0) rotateY(0deg);
    }

    100% {
        /* Gira de nuevo para reiniciar el ciclo */
        transform: translateX(0) rotateY(180deg);
    }
}

@keyframes dollfloat {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0px)
    }

}

.window {
    color: #ffffff;
    position: fixed; 
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #120a16c5;
    display: flex;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease-in-out;
}

.windowContainerUwU {
    position: relative;
    border: 5px outset;
    border-color: #ffe7fd;
    margin: auto;
    width: 600px;
    height: 380px;
    background: var(--windowColor);
}

/* La animación se aplica al contenedor interno cuando se muestra */
.windowShow .windowContainerUwU {
    animation: openAnimationYAYYYYY 0.4s ease-in-out;
}

@keyframes openAnimationYAYYYYY {
    0% {
        opacity: 0;
        transform: translate(-100%, 100%) scale(0.2);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
}

#WindowTitleBar {
    font-size: 15px;
    height: 35px;
    color: #fff;
    background: var(--titleBarBackgColor);
    padding-left: 8px;
    padding-right: 8px;
    align-items: center;
    text-align: left;
    display: flex;
}

/* Contenedor de los botoncitos de arriba de la ventana */
.windowControls {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

/* Style de los botoncitos de arriba de la ventana */
.titleControl {
    width: 22px;
    height: 20px;
    margin-left: auto;
    border: 2px outset rgb(255, 255, 255);
    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: all 0.2 ease-in-out;
}


/* Cuando se presionan los botones uwu */
.titleControl:active {
    border: 2px inset #ffe7fd;
    scale: 1.12;
}

#minBtn {
    background-image: var(--minIcon);
    
}

#maxBtn {
    background-image: var(--maxIcon);
}

#minBtn:hover, #maxBtn:hover {
    background-color: #e0e0e0;
    border-color: #9d9d9d;
}

#xTitleBtn {
    background-image: var(--closeIcon);
}

#xTitleBtn:hover {
    background-color: #ff006f;
    border-color: #4a0404;
}

/* Icono de la Ventana */
#skullWindowIconXD {
    content: var(--skullIcon);
    width: 22px;
    float: left;
    height: auto;
    padding-right: 10px;
}

#h1Window {
    animation: yayy 2s ease-in-out infinite alternate;
}

@keyframes yayy {
    0% {
        transform: scale(1);
        color: #ffffff;
        text-shadow: 0 0 0px transparent;
    }
    50% {
        color: var(--mainColor);
        /* Un rosa intermedio */
        text-shadow: 2px 2px 0px #000;
    }
    100% {
        transform: scale(1.1);
        color: var(--hoverColor);
        /* El rosa brillante */
        text-shadow: 0 0 10px var(--hoverColor), 0 0 20px var(--mainColor);
    }
}

#danger {
    width: 40px;
    position: absolute;
    left: 12px;
    top: 54px;
}

/* Style del texto que describe brevemente mi sitio uwu. */
#aboutMySiteText {
    position: relative; /* Para asegurarme que los elementos absolutos queden aqui dentro uwu */
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 10px;
    width: 460px;
    margin: auto;
    padding: 10px;
    color: rgb(255, 255, 255);
    background-color: rgba(0, 0, 0, 0.2);
    border: 2px inset #ffe7fd;
}

/* Style de los separadores de sangre uwu */
.bloodDivider {
    position: absolute;
    width: 70%;
    height: 20px;
    transform: translateX(-50%);
    /* Lo centra perfectamente */
}

/* Contenedor de los botones de la Ventana */
#WindowButtonsContainer {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.windowButton {
    appearance: none;
    outline: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
    font-size: 25px;
    background: var(--windowColor);
    width: 150px;
    height: 60px;
    border: 4px outset;
    color: #ffffff;
    border-color: #ffffff;
    transition: all 0.4s ease-in-out;
}

.windowButton:hover {
    background-color: rgb(255, 255, 255);
    border-color:var(--hoverColor);
    color:#ff006f;
}

.windowShow {
    opacity: 1;
    pointer-events: unset;
}

@keyframes diagonal-scroll {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: -100% 100%;
    }
}

.loadingScreen {
    background-image: var(--loadBackg);
    background-size: 180px;
    background-repeat: repeat;
    background-color: #1a0518;
    animation: diagonal-scroll 30s linear infinite;
    /* Para el keyframe del desplazamiento diagonal uwu*/

    display: none;
    /* Cambia el flex por none */
    opacity: 0;
    transition: opacity 0.5s ease;

    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    flex-direction: column;
    justify-content: center;
    /* Para centrar verticalmente */
    align-items: center;
    cursor: wait;
    z-index: 99;
}

.loadingScreen.active {
    display: flex;
    opacity: 1;
}

.loadingScreen h2 {
    font-size: 40px;
    color: var(--hoverColor);
    text-shadow: 0 0 8px var(--hoverColor);
}

.loadingScreen p {
    font-size: 22px;
    color: rgba(255, 255, 255, 0.61);
}

#fluttershyLoad {
    width: 220px;
}

#pinkiePieLoad {
    width: 210px;
}

.ponyLoad {
    margin-bottom: 15px;
    filter: drop-shadow(0 0 16px var(--hoverColor));
}

/* Contenedor para el titulo y cuadradito spin uwu */
#loadingTitle {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

/* Para el cuadradito que da vueltas uwu */
.loader {
    border: 16px double var(--hoverColor);
    width: 12px;
    height: 12px;
    animation: spin 2s linear infinite;
}

.progressContainer {
    width: 500px;
    height: 20px;
    border: 5px double #ffffff;
    background: #1a0518;
    padding: 2px;
}

.progressBar {
    width: 0%;
    height: 100%;
    background-color: var(--hoverColor);
    box-shadow: 0 0 10px var(--hoverColor);
    transition: width 0.2s ease;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@media only screen and (max-width: 1099px) {

    .loadingScreen h2 {
        font-size: 60px;
    }

    .loadingScreen p {
        font-size: 30px;
    }

    #fluttershyLoad {
        width: 400px;
    }

    #pinkiePieLoad {
        width: 380px;
    }

    .progressContainer {
        width: 85%;
        height: 50px;
    }

    /* Para el cuadradito que da vueltas uwu */
    .loader {
        width: 22px;
        height: 22px;
        animation: spin 2s linear infinite;
    }
}