/* Fonts moved to HTML head for better loading performance */

#void-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #000000 0%, #0a0000 50%, #000000 100%);
    z-index: 20000;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: opacity 0.5s ease;
}
#void-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}
#dialogue-container {
    font-family: 'Determination', 'VT323', monospace;
    color: #fff;
    font-size: 2.8rem;
    width: 80%;
    max-width: 800px;
}
#dialogue-container p {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: dialogue-fade-in 1s forwards, dialogue-sway 12s ease-in-out infinite, dialogue-shimmer 3s infinite;
    backdrop-filter: blur(2px);
    padding: 20px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.02);
}
#dialogue-container p.fading-out {
    animation: dialogue-fade-out 1s forwards;
    opacity: 1;
    pointer-events: none;
}
@keyframes dialogue-fade-in {
    to { opacity: 1; }
}
@keyframes dialogue-fade-out {
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
}
@keyframes dialogue-sway {
    0%, 100% {
        transform: translate(-50%, -50%) rotate(-1deg);
    }
    50% {
        transform: translate(-49.5%, -49%) rotate(1deg);
    }
}
@keyframes dialogue-shimmer {
    0%, 100% {
        text-shadow: 0 0 12px #fff, 0 0 20px #fff, 0 0 30px rgba(255, 255, 255, 0.5);
    }
    50% {
        text-shadow: 1px 1px 15px #fff, -1px -1px 15px #fff, 0 0 40px #fff;
    }
}
.determination {
    color: #ff0000;
    font-weight: bold;
    text-shadow:
        1px 1px 0 #000,
        -1px 1px 0 #000,
        1px -1px 0 #000,
        -1px -1px 0 #000,
        1px 0px 0 #000,
        0px 1px 0 #000,
        -1px 0px 0 #000,
        0px -1px 0 #000,
        0 0 8px #ff0000,
        0 0 15px #ff0000;
}
.determination-heart {
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
    margin-left: 0.5ch;
    filter: drop-shadow(0 0 8px #ff0000) drop-shadow(0 0 15px #ff0000);
}
.void-choices {
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    display: flex;
    gap: 3rem;
    justify-content: center;
    animation: fadeIn 1s forwards;
    opacity: 0;
}
#void-overlay button {
    font-family: 'Determination', 'VT323', monospace;
    font-size: 2.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 3px solid #fff;
    color: #fff;
    padding: 0.8rem 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}
#void-overlay button:hover {
    background: linear-gradient(135deg, #fff, #e0e0e0);
    color: #000;
    box-shadow: 0 0 25px #fff, 0 8px 30px rgba(0, 0, 0, 0.4);
    transform: translateY(-3px) scale(1.05);
}
.void-back-button, .void-access-button {
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    animation: fadeIn 1s forwards;
    opacity: 0;
}
#void-overlay .void-back-button:hover, 
#void-overlay .void-access-button:hover {
    background: linear-gradient(135deg, #fff, #e0e0e0);
    color: #000;
    box-shadow: 0 0 25px #fff, 0 8px 30px rgba(0, 0, 0, 0.4);
    transform: translateX(-50%) translateY(-3px) scale(1.05);
}
#slash-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: 30000;
    pointer-events: none;
}
#slash-video.hidden {
    display: none;
}
#enter-screen.evil-xan-theme {
    background: radial-gradient(ellipse at center, rgba(100,0,0,0.9) 0%, rgba(0,0,0,1) 100%),
                linear-gradient(-45deg, #1a0000, #0a0000, #2a0000, #0f0000);
    background-size: 100% 100%, 400% 400%;
    animation: gradientShift 15s ease infinite;
    overflow: hidden;
}
#enter-screen.evil-xan-theme.blood-active::before {
    content: 'ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403 ACCESS DENIED 403';
    font-family: 'Courier New', monospace;
    font-size: 1.2rem;
    line-height: 1.5;
    color: rgba(255, 0, 0, 0.4);
    text-shadow: 0 0 5px rgba(255,0,0,0.5);
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    animation: digital-drip 15s linear infinite;
    word-break: break-all;
    text-transform: uppercase;
}
@keyframes digital-drip {
    to {
        transform: translateY(100%);
    }
}
#enter-screen.evil-xan-theme .enter-text, #enter-screen.evil-xan-theme #tip-text {
    color: #ff4444;
    text-shadow: 0 0 15px #ff0000, 0 0 25px #ff0000, 0 0 35px #ff0000;
    opacity: 1;
}
.xan-warning {
    color: #ff4444 !important;
    animation: spooky-glow 2s infinite ease-in-out !important;
}
@keyframes spooky-glow {
    0%, 100% {
        text-shadow: 0 0 15px #ff0000, 0 0 25px #ff0000, 0 0 35px #ff0000;
        opacity: 0.7;
    }
    50% {
        text-shadow: 0 0 25px #ff0000, 0 0 40px #ff0000, 0 0 55px #ff0000;
        opacity: 1;
    }
}
#gaster-text {
    font-family: 'Wingdings', 'Standard Symbols L', 'Webdings', 'Apple Symbols', sans-serif;
    font-size: 2.2rem;
    letter-spacing: 15px;
    color: white;
    margin-top: 15px;
    opacity: 0.8;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.3), 0 0 25px rgba(255, 255, 255, 0.1);
    min-height: 40px;
}
#ripple-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 101;
    opacity: 0;
    overflow: hidden;
}
#ripple-overlay.active {
    animation: fadeIn 0.1s forwards;
}
#ripple-overlay .shard {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #000;
    opacity: 0;
    border-radius: 50%;
    transform-origin: 50% 50%;
    box-shadow: 0 0 15px 5px #000, 0 0 25px 15px #111;
    animation: shatter 1s ease-out forwards;
}
@keyframes shatter {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: var(--transform-end) scale(150);
        opacity: 0;
    }
}
.dvd-logo {
    position: absolute;
    width: 120px;
    height: auto;
    z-index: 102;
    pointer-events: none;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}
#death-screen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}
#death-screen-overlay img {
    width: 80%;
    max-width: 600px;
    height: auto;
    opacity: 0;
    animation: death-fade-in 1s 0.5s forwards;
}
@keyframes death-fade-in {
    to { opacity: 1; }
}
#enter-screen.star-glitcher-theme .enter-text {
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    letter-spacing: 3px;
    color: #fff;
    text-transform: uppercase;
    background: linear-gradient(90deg, #ff0000, #00ff00, #0000ff, #ffff00);
    background-size: 400% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: rainbow-text 2s linear infinite;
}

@keyframes rainbow-text {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.za-warudo {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Press Start 2P', cursive;
    font-size: 3rem;
    color: #FFD700;
    text-shadow:
        3px 3px 0 #000,
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        0 0 15px #FFD700,
        0 0 30px #FFD700;
    z-index: 999999;
    pointer-events: none;
    opacity: 0;
    animation: za-warudo-appear 3s ease-in-out;
}

@keyframes za-warudo-appear {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }
    80% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
}

/* Time Stop Ripple Effect */
.time-stop-ripple {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999998;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.1);
}

.ripple-wave {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    border: 3px solid #FFD700;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: time-stop-ripple 2.5s ease-out forwards;
    box-shadow: 0 0 20px #FFD700, inset 0 0 20px #FFD700;
}

.ripple-wave::before,
.ripple-wave::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border: 3px solid #FFD700;
    border-radius: 50%;
    animation: time-stop-ripple 2.5s ease-out forwards;
    box-shadow: 0 0 20px #FFD700, inset 0 0 20px #FFD700;
}

.ripple-wave::before {
    animation-delay: 0.3s;
    opacity: 0.7;
}

.ripple-wave::after {
    animation-delay: 0.6s;
    opacity: 0.4;
}

@keyframes time-stop-ripple {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(50);
        opacity: 0;
    }
}

/* Evil Xan Ripple Effect */
.evil-xan-ripple {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999997;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
}

.evil-ripple-wave {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    border: 4px solid #8B0000;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: evil-xan-ripple 2.8s ease-out forwards;
    box-shadow: 0 0 30px #8B0000, inset 0 0 30px #8B0000;
}

.evil-ripple-wave::before,
.evil-ripple-wave::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 4px solid #DC143C;
    border-radius: 50%;
    animation: evil-xan-ripple 2.8s ease-out forwards;
    box-shadow: 0 0 25px #DC143C, inset 0 0 25px #DC143C;
}

.evil-ripple-wave::before {
    animation-delay: 0.4s;
    opacity: 0.8;
    border-color: #B22222;
    box-shadow: 0 0 20px #B22222, inset 0 0 20px #B22222;
}

.evil-ripple-wave::after {
    animation-delay: 0.8s;
    opacity: 0.6;
    border-color: #CD5C5C;
    box-shadow: 0 0 15px #CD5C5C, inset 0 0 15px #CD5C5C;
}

@keyframes evil-xan-ripple {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    30% {
        opacity: 0.9;
    }
    70% {
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(60);
        opacity: 0;
    }
}
.behind-you-text {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-family: 'VT323', monospace;
    font-size: 1.5rem;
    color: #ff4444;
    text-shadow:
        0 0 10px #ff0000,
        0 0 20px #ff0000,
        0 0 30px #ff0000;
    z-index: 999999;
    opacity: 0;
    animation: creepy-fade 4s ease-in-out;
}

@keyframes creepy-fade {
    0% { opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

.obfuscated-tip {
    font-family: 'Courier New', monospace;
    color: #666;
    position: relative;
    overflow: hidden;
}
.obfuscated-tip::before {
    content: '██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-';
}
#tip-text.clickable-link, #tip-text .clickable-link {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    text-shadow: 0 0 8px #fff, 0 0 15px #fff;
    transition: all 0.3s ease;
}
#tip-text.clickable-link:hover, #tip-text .clickable-link:hover {
    color: #c586ff;
    text-shadow: 0 0 12px #c586ff, 0 0 20px #c586ff;
}
.miami-text {
    font-family: 'Press Start 2P', cursive; 
    color: #FF00FF; 
    text-shadow: 0 0 8px #00FFFF, 0 0 15px #00FFFF, 0 0 25px #FF00FF, 2px 2px 0px #000;
}
#tip-text.kira-tip {
    font-family: 'Passion One', sans-serif;
    font-weight: 700;
    color: #e5a9ff;
    text-shadow: 0 0 8px #d67bff, 0 0 15px #a329d6, 0 0 20px #a329d6;
    font-size: 1.1rem;
    line-height: 1.6;
    letter-spacing: 0.05em;
}
#kira-bomb, #killer-queen-img {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
    transition: opacity 0.5s ease, transform 0.5s ease;
    width: 200px;
    height: 200px;
}
#kira-bomb.visible, #killer-queen-img.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
#kira-bomb.exploding {
    animation: bomb-explode 0.5s forwards;
}
#killer-queen-img.fading {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.2);
}
@keyframes bomb-explode {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(5); opacity: 0; }
}
#devil-hour-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}
#devil-hour-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}