body,
html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    overflow: hidden;
    font-family: 'Courier New', Courier, monospace;
    cursor: default;
    user-select: none;
    touch-action: none;
}

#container {
    position: relative;
    width: 100%;
    height: 100%;
}

#hidden-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://www.hdwallpapers.in/download/itachi_uchiha_in_dark_background_hd_naruto-1920x1080.jpg');
    background-size: cover;
    background-position: center;

    /* The Magic: Masking */
    /* We make the image visible only where the mask is opaque (black) */
    /* transparent = hidden, black = visible */

    -webkit-mask-image: radial-gradient(circle var(--r, 200px) at var(--x, -1000px) var(--y, -1000px), black 0%, transparent 100%);
    mask-image: radial-gradient(circle var(--r, 200px) at var(--x, -1000px) var(--y, -1000px), black 0%, transparent 100%);

    opacity: 0;
    /* Initially hidden until clicked */
    transition: opacity 1s ease-in-out;
}

#prompt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #333;
    font-size: 1.5rem;
    pointer-events: none;
    /* Let clicks pass through */
    transition: opacity 0.5s ease;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.7;
    }

    100% {
        opacity: 0.3;
    }
}

/* When the torch is on, hide the prompt and show the hidden content layer */
body.torch-active #hidden-content {
    opacity: 1;
    cursor: none;
    /* Hide default cursor when exploring */
}

body.torch-active #prompt {
    opacity: 0;
}

/* Optional: Add a subtle flicker to the mask in JS or animation if possible, 
   but varying gradient size in CSS keyframes is tricky with dynamic coordinates. 
   We'll stick to static light for now or do it in JS. */