/* ------------------------------------------- */

/* === THEME VARIABLES & GLOBAL STYLES === */

/* ------------------------------------------- */

:root {

--color-text-light: #ffffff;

--color-bg-dark: #000000;

}



body {

background-color: var(--color-bg-dark); /* Black background */

margin: 0;

padding: 0;

color: var(--color-text-light);

font-family: sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

.zine-wrapper {

position: relative;

width: 650px;

height: 800px;

margin: 10 auto;

}

.abs-element {

position: absolute;

}



/* --- Utility Classes --- */

.nikoleta-font { font-family: 'nikoleta', sans-serif; }

.moon-font { font-family: 'moon', sans-serif; }

.small-text { font-size: 0.9em; }



/* ------------------------------------------- */

/* === HAUNT OVERLAY LOGIC (FIXED) === */

/* ------------------------------------------- */



/* Hides the haunt section by default and positions it as a full-screen overlay */

#haunt-area {

position: fixed; /* Ensures it covers the whole screen */

top: 0;

 left: 10px;

width: 100%;

height: 100%;

background-color: rgba(0, 0, 0, 0.95); /* Dark background for the horror screen */

z-index: 999;

display: none; /* 1. HIDE THE HAUNT PART BY DEFAULT */

opacity: 0;

transition: opacity 1s;

}



/* Shows the haunt section when it is the target (when the link is clicked) */

#haunt-area:target {

display: block;

opacity: 1;

font-family: 'moon', monospace;

font-size: 7px;

}

#haunt-area-content {

/* POSITIONING: Mirrors where #party-info is located on the main page */

position: absolute;

 top: 85px;
left: 15px;

/* WIDTH & SCROLL FIX */

width: 700px;

max-height: 600px;

overflow-y: auto; /* <--- CRITICAL: Enables the scrollbar for the text */



/* AESTHETICS: Dark, broken console style */

color: var(--color-accent-white);

font-family: 'moon', monospace;

padding: 1px;

text-align: center;

max-width:700px;

margin: 0px auto;


background-image: url('https://images.pexels.com/photos/30798595/pexels-photo-30798595.jpeg?cs=srgb&dl=pexels-farlight-30798595.jpg');

background-size: cover;

font-size: 8px;

line-height: 2;

}



/* ------------------------------------------- */

/* === SHARED & PARTY MODE STYLES === */

/* ------------------------------------------- */



/* Scrollbox Base */

.scrollbox {

overflow-y: auto;

padding: 0px;

box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);

}

#party-info {

/* Party Scrollbox */

background-image: url('https://images.pexels.com/photos/30798595/pexels-photo-30798595.jpeg?cs=srgb&dl=pexels-farlight-30798595.jpg');

background-size: cover;

color: #fff;

font-family: 'moon', sans-serif;

font-size: 10px;

line-height: 2;

max-height: 300px;

max-width: 620px;

position: absolute;

padding: 0px;

overflow-y: auto;

}

.scrollbox::-webkit-scrollbar { width: 6px; }

.scrollbox::-webkit-scrollbar-thumb {



background-color:;

border-radius: 3px;

}

.scrollbox::-webkit-scrollbar-track { background-color:; }





/* Polaroids */

.polaroid {

background: #fff; padding: 5px 5px 20px 5px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);

width: 130px; position: absolute; border: 1px solid #ccc; z-index: 2;

transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, z-index 0s 0s, filter 0.5s;

cursor: pointer;

}

.polaroid:hover {

transform: scale(1.2) rotate(0deg) !important;

box-shadow: 0 15px 30px rgba(255, 255, 255, 0.5);

z-index: 100;

}

.polaroid img { width: 100%; display: block; }