@import url('https://fonts.cdnfonts.com/css/minster');

/* start light mode styling */
:root {
    /* Texto claro para fondo oscuro */
    --text: #e0e0e0; 
    
    /* Un borde color violeta oscuro/desaturado */
    --border: #5a3d5c; 
    
    /* Color de acento (para titulos o links) */
    --accent: #9370db; 
    
    /* Fondos */
    --bg: rgba(0, 0, 0, 0.6); /* Fondo semitransparente para las cajitas */
    --gradientTop: #1a0b1e;   /* Violeta muy oscuro casi negro */
    --gradientBottom: #000000;
}
	header {
		background: url('https://i.pinimg.com/1200x/96/bc/21/96bc2135f2fafdff9105a1ce4a2b7e32.jpg');
	}
/* end light mode styling */




* { 
	box-sizing: border-box;
}
body {
	padding: 10px;
	font-family: 'MS PGothic', sans-serif;
	color: var(--text);

	/* page background pattern */
	background-image:  url(https://files.catbox.moe/43yx5u.jpg);
	width: 100%;
	
}

/* EL MARCO DE ENCAJE (El contenedor de afuera) */
.game-wrapper {
    /* 1. Centrado */
    margin: 0px auto; /* auto a los lados lo centra */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 2. Tamaño: Se ajusta al contenido (al juego) */
    width: fit-content; 
    
    /* 3. El Borde */
    border: 45px solid transparent;
    /* IMPORTANTE: Quité la palabra 'fill' para que el centro sea transparente */
    border-image: url("https://dl.dropbox.com/scl/fi/6wo0voidugxmgg0a81v20/lace-border-png-37013.png?rlkey=3hn4k762e8y0v6d2v6mwrtcbr&st=5o8bpex4") 60 round;
    
    /* 4. Fondo transparente (para que se vea el fondo de tu web a través del encaje) */
    background-color: transparent;
    
    /* Opcional: Sombra externa para que resalte sobre el fondo */
    filter: drop-shadow(0 0 15px rgba(0,0,0,0.8));
}

/* EL JUEGO (El iframe de adentro) */
.game-content {
    /* Tamaño nativo de PSP (o el que usaste en tus dibujos) */
    width: 480px;
    height: 270px;
    
    border: none; /* Sin borde extra */
    display: block;
    background-color: #000; /* Fondo negro solo DENTRO del juego */
}


.container {
    max-width: 55rem;
    margin: 20px auto 12px auto;
    
    /* 1. Eliminamos el borde de encaje */
    border: none; 

    /* 2. El Degradado Negro */
    /* Va de negro casi total arriba (0.9) a un negro más transparente abajo (0.6) */
    /* EL DEGRADADO MÁGICO */
    background: linear-gradient(
        to bottom, 
        rgba(0, 0, 0, 0) 0%,      /* Empieza invisible arriba */
        rgba(0, 0, 0, 0.7) 15%,  /* Se oscurece rápido */
        rgba(0, 0, 0, 0.7) 85%,  /* Se mantiene oscuro todo el medio */
        rgba(0, 0, 0, 0) 100%     /* Se desvanece al final */
    );
    

    display: flex;
    flex-wrap: wrap;
    padding: 20px; /* Aumenté el padding para que el contenido no toque los bordes */
    gap: 5px;
}

/* these control the column widths */
.small { flex: 1 1 9%; }
.large { flex: 1 1 82%; }
.full { flex: 1 1 100%; }
.half { flex: 1 1 49%; }


header {
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 120px; /* change banner height here*/
	border: 2px ridge var(--border);
	border-radius: 5px;
	position: relative;
}
header span {
	font-size: 6rem;
	position: absolute;
	bottom: -30px;
	right: 10px;
	margin: 10px;
	text-shadow: 1px 1px var(--text),
		-1px 1px var(--text),
		1px -1px var(--accent),
		-1px -1px var(--accent);
	color: var(--gradientTop);
	font-family: 'Minster No 1', sans-serif;
}


nav {
	border: 2px ridge var(--border);
	border-radius: 5px;
	padding: 5px;
	background: linear-gradient(var(--gradientTop),var(--gradientBottom));
}
nav div {
	text-align: center;
	font-size: 1.25rem;
	margin: 5px 5px 10px 5px;
}
nav a {
	display: block;
	margin: 5px;
	background: linear-gradient(to right,var(--bg),var(--gradientBottom));
	border-radius: 5px;
	padding: 2px 7px;
	text-decoration: none;
}
nav a:link, nav a:visited { 
	color: var(--text);
}
nav a:hover, nav a:focus {
	background: linear-gradient(to right,var(--bg), var(--gradientBottom), var(--gradientTop));
}

/* optional button styling like in the preview */
div.small > img {
	display: block;
	margin: 5px auto;
	border: none;
}


section {
	border: 2px ridge var(--border);
	border-radius: 5px;
	background: transparent;
	padding: 5px;
}


footer {
	text-align: center;
	margin-bottom: 5vw;
	font-size: 0.8rem;
}
footer a { 
	text-decoration: none;
}


h1, h2, h3, h4, h5, h6, p  { 
	margin: 5px;
	line-height: 1.2;
}
h1 { 
	font-size: 1.4rem;
	letter-spacing: 2px;
	font-weight: normal;
	text-align: center;
	border-bottom: 2px ridge var(--border);
	padding-bottom: 5px;
}
h2 { 
	font-size: 1.25rem;
	font-weight: normal;
	text-align: center;
}
h3 { 
	font-size: 1.1rem;
}
h4 { 
	font-size: 1rem;
	color: var(--accent);
	padding-left: 12px;
}

/* prevents overflow on smaller screens */
img { max-width: 100%; }
pre { overflow-x: auto; }


a:hover, a:focus {
	font-style: italic;
}
a:visited {
	color: var(--accent);
}



.roseLineTop {
    width: 100%;
    height: 150px;
    background-image: url(https://imgur.com/gLKefwR.png);
    background-position: center top;
    background-repeat: repeat-x; /* Usamos repeat-x para que solo se repita horizontalmente */
    
    /* POSICIONAMIENTO */
    position: absolute; 
    top: 0px;  /* CAMBIADO: De 853px a 0px para que esté arriba del todo */
    left: 0px; /* Asegura que empiece desde el borde izquierdo */
    
    min-width: 1050px;
    z-index: 50; /* Para asegurar que quede por encima del fondo pero debajo de menús desplegables si los hubiera */
}

.roseLineBottom {
    width: 100%;
    height: 70px;
    background-image: url("https://files.catbox.moe/kd7drx.png");
    background-position: center top; /* Mantenemos esto alineado al top de la imagen original */
    background-repeat: repeat-x;
    
    
    /* POSICIONAMIENTO */
    position: fixed; /* CAMBIO RECOMENDADO: Usa 'fixed' para que se pegue a la pantalla y no se mueva */
    bottom: 0px; 
    left: 0px;
    
    min-width: 1050px;
    z-index: 50;
    
    /* IMPORTANTE: Esto permite que puedas hacer clic en los links 
       que queden debajo de las rosas transparentes */
    pointer-events: none; 
}


/* ================================================= */
/* SCROLLBAR TRANSPARENTE / INVISIBLE (PERO FUNCIONAL) */
/* ================================================= */

/* 1. Para Chrome, Safari, Edge y Opera */
::-webkit-scrollbar {
    display: none; /* Simplemente la oculta visualmente */
}

/* 2. Para Firefox */
html, body {
    scrollbar-width: none; /* Propiedad específica de Firefox para ocultarla */
}

/* 3. Para Internet Explorer y versiones viejas de Edge */
body {
    -ms-overflow-style: none;  
}

.top-nav-menu {
    display: flex;
    justify-content: center; /* Centra los botones horizontalmente */
    align-items: center;
    gap: 15px; /* Espacio entre cada botón */
    
    /* Posicionamiento */
    width: 100%;
    margin-top: 120px; /* Deja espacio para no chocar con las rosas del techo (49px) */
    margin-bottom: 0px; /* Espacio antes de que empiece la caja negra degradada */
    position: relative;
    z-index: 60; /* Para que queden por encima de todo */
}

/* Estilo de las imágenes de los botones */
.gothic-btn img {
    display: block;
    /* Opcional: Si son muy grandes, descomenta la linea de abajo para achicarlos */
    /* max-height: 50px; */ 
    
    /* Filtro para que se vean un poco oscuros por defecto (opcional) */
    filter: brightness(0.9);
}

/* Efecto al pasar el mouse (Hover) */
.gothic-btn img:hover {
    filter: brightness(0.5); /* Brillan */
    cursor: pointer;
}

/* --- EASTER EGGS CSS --- */

/* 1. Efecto Overlay Rojo (Sangre/Latido) */
#red-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 20%, rgba(138, 3, 3, 0.8) 90%);
    pointer-events: none; /* Permite hacer clic a través de él */
    opacity: 0;
    z-index: 9999;
    transition: opacity 0.2s;
    mix-blend-mode: normal;
}

/* --- NUEVO EFECTO HEARTBEAT (Realista) --- */

/* --- EFECTO HEARTBEAT FINAL (Zoom + Gris + Rojo) --- */

/* 1. Ritmo de la Capa Roja (Sangre) */
@keyframes heartbeat-red {
    0%   { opacity: 0; }
    15%  { opacity: 0.4; } /* Primer golpe (Lub) */
    30%  { opacity: 0.1; }
    45%  { opacity: 0.8; } /* Segundo golpe fuerte (Dub) */
    60%  { opacity: 0; }
    100% { opacity: 0; }
}

/* 2. Ritmo del Cuerpo (Zoom + Blanco y Negro) */
@keyframes heartbeat-body-fx {
    0%   { transform: scale(1); filter: grayscale(0%); }
    
    /* Primer latido suave */
    15%  { transform: scale(1.01); filter: grayscale(80%); } 
    
    30%  { transform: scale(1); filter: grayscale(20%); }
    
    /* Segundo latido fuerte (PUM!) */
    45%  { transform: scale(1.04); filter: grayscale(100%); } 
    
    60%  { transform: scale(1); filter: grayscale(0%); }
    100% { transform: scale(1); filter: grayscale(0%); }
}

/* Clase para la capa roja */
.heartbeating-overlay {
    animation: heartbeat-red 1.3s ease-out infinite; 
    /* Cambié a 1.3s para que sea un poco más rápido y angustiante */
}

/* Clase para toda la página */
.heartbeating-body {
    animation: heartbeat-body-fx 1.3s ease-out infinite;
    transform-origin: center;
    will-change: transform, filter; /* Optimiza el rendimiento */
}

/* --- EFECTO 2: MENTAL BREAK (Desmayo Fluido) --- */

@keyframes dizzy-spell {
    /* 0% - Todo normal */
    0% { 
        transform: scale(1) rotate(0deg); 
        filter: invert(0) hue-rotate(0deg) blur(0px);
    }
    
    /* 20% - El "golpe" inicial (Zoom y desenfoque) */
    20% { 
        transform: scale(1.02) rotate(1deg); 
        filter: invert(0.3) hue-rotate(0deg) blur(2px);
    }

    /* 50% - El Clímax de la locura (Colores invertidos y rotación) */
    50% { 
        transform: scale(1.05) rotate(-2deg); 
        filter: invert(1) hue-rotate(180deg) blur(4px);
    }

    /* 80% - Empezando a recuperar la visión (Todavía un poco mareado) */
    80% { 
        transform: scale(1.01) rotate(1deg); 
        filter: invert(0.2) hue-rotate(45deg) blur(1px);
    }

    /* 100% - Vuelta a la normalidad total */
    100% { 
        transform: scale(1) rotate(0deg); 
        filter: invert(0) hue-rotate(0deg) blur(0px);
    }
}

/* Esta es la clase que aplicaremos con JS */
.mental-break-active {
    /* Duración de 4 segundos para que sea lento y agónico */
    animation: dizzy-spell 4s ease-in-out forwards;
    
    /* Bloqueamos clicks mientras está mareada */
    pointer-events: none; 
    
    /* Afecta a todo el documento */
    width: 100%;
    height: 100%;
    overflow: hidden; /* Evita barras de scroll si el zoom se pasa */
}

/* --- EFECTO 3: ALUCINACIÓN FANTASMAL (Ghost Text) --- */

#hallucination-container {
    position: fixed;
    top: 50%;
    left: 50%;
    /* Centramos el punto de origen */
    transform: translate(-50%, -50%);
    width: 100%;
    pointer-events: none; /* Click a través del texto */
    z-index: 10000;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* El texto en sí */
.ghost-text {
    font-family: 'Cinzel', serif; /* Tu fuente gótica */
    font-size: 3.5rem; /* ¡Grande! */
    font-weight: bold;
    font-style: italic;
    color: rgba(255, 255, 255, 0.95); /* Blanco casi puro */
    
    /* El brillo fantasmal (Blanco + un toque de violeta) */
    text-shadow: 
        0 0 10px rgba(255, 255, 255, 0.8),
        0 0 20px rgba(255, 255, 255, 0.5),
        0 0 40px rgba(147, 112, 219, 0.4); /* Un halo violeta muy sutil */
        
    opacity: 0; /* Empieza invisible */
    animation: ghost-float 5s ease-in-out forwards;
    
    /* Para que no rompa la pantalla en móviles */
    max-width: 90%;
    line-height: 1.2;
}

/* La animación de aparición y desaparición */
@keyframes ghost-float {
    0% { 
        opacity: 0; 
        transform: scale(0.8) translateY(20px) blur(10px); 
    }
    20% { 
        opacity: 1; 
        transform: scale(1) translateY(0) blur(0px); 
    }
    50% {
        opacity: 1;
        /* Flota un poquito */
        transform: scale(1.05) translateY(-10px) blur(0px); 
        text-shadow: 0 0 50px rgba(255, 255, 255, 1); /* Brillo intenso */
    }
    80% {
        opacity: 0.8;
        transform: scale(1.1) translateY(-20px) blur(2px);
    }
    100% { 
        opacity: 0; 
        transform: scale(1.2) translateY(-40px) blur(20px); 
    }
}

/* BARRA DE SISTEMA CORREGIDA */
.game-ui-bar {
    /* Ancho: que coincida con el iframe (480px) para que quede alineada con la pantalla, 
       no con el borde de encaje exterior */
    width: 100%;
    max-width: 480px; 
    
    /* Centrado perfecto */
    margin: 5px auto 15px auto; /* 5px arriba (separación del encaje), 15px abajo */
    
    display: flex;
    justify-content: space-between; /* Distribuye los botones */
    
    /* Estilo visual */
    background-color: rgba(0, 0, 0, 0.6); /* Fondo semi-transparente para legibilidad */
    border: 1px solid #5a3d5c; /* Borde violeta fino */
    border-radius: 5px;
    padding: 8px 15px;
    
    /* Aseguramos que se vea encima de todo */
    position: relative;
    z-index: 10;
}

/* Ajuste de los botones para que se lean mejor */
.ui-btn {
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    color: #bfa8cc; /* Violeta claro (mucho más legible que gris) */
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
}

.ui-btn:hover {
    color: #fff;
    text-shadow: 0 0 8px #9370db;
}

/* STATUS SECTION */
.kaguya-status-container {
    width: 100%;
    max-width: 480px; /* Mismo ancho que el juego */
    margin: 0 auto;   /* Centrado */
    
    display: flex;
    align-items: center;
    gap: 15px;
    
    /* Un fondo sutil para separarlo del resto */
    background: linear-gradient(90deg, transparent, rgba(90, 61, 92, 0.3), transparent);
    padding: 10px;
    border-top: 1px solid rgba(90, 61, 92, 0.5);
    border-bottom: 1px solid rgba(90, 61, 92, 0.5);
}

.status-icon {
    font-size: 1.5rem;
    filter: drop-shadow(0 0 5px #ff0000);
    animation: pulse-icon 2s infinite;
}

.status-content {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.status-title {
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    color: #9370db; /* Violeta acento */
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.status-quote {
    font-family: 'MS PGothic', sans-serif; /* Fuente clásica pixelada o serif */
    font-style: italic;
    font-size: 0.85rem;
    color: #e0e0e0;
    margin: 0;
    line-height: 1.2;
    text-shadow: 1px 1px 0 #000;
}

/* Animación pequeña para el icono */
@keyframes pulse-icon {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 0.8; }
}