/* --- VARIABLES & FONTS --- */
:root {
    --bg-color: #f3eee8;
    --text-charcoal: #000000;
    --paper-drop-shadow: drop-shadow(0 0.5rem 0.75rem rgba(0,0,0,0.25));
    --paper-hover-drop-shadow: drop-shadow(0 0.938rem 1.25rem rgba(0,0,0,0.35));
}

@font-face {
    font-family: 'CS Quiver Demo';
    src: url('fonts/CsQuiverRegularDemo-ov0o0.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ArialCustom';
    src: url('fonts/ARIAL.TTF') format('truetype');
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color: var(--bg-color);
    font-family: 'Arial', sans-serif;
    color: var(--text-charcoal);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* --- MAIN LAYOUT STRUCTURE --- */
.main-layout {
    display: flex;
    flex-direction: column; /* Mobile first: Column */
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    padding: 2rem;
    padding-bottom: 6rem; /* Space for footer/back button */
}

/* --- TEXT AREA --- */
.text-area {
    text-align: center;
    margin-bottom: 2rem;
    z-index: 10;
}

h2 {
    font-family: 'CS Quiver Demo', sans-serif;
    font-size: 1.563rem;
    letter-spacing: 0.063rem;
    color: #1b35b8;
    font-weight: lighter;
    
}
.top{
    position:absolute;
    left:50%;
    top: 1rem;
    transform: translateX(-50%);

}

h1 {
    font-family: 'CS Quiver Demo', sans-serif;
    font-size: 4rem; /* Big title */
    letter-spacing: 0.1rem;
    line-height: 1;
    font-weight: normal;
}

.text-area p {
    font-size: 1rem;
    opacity: 0.6;
    margin-top: 0.5rem;
}

/* --- ART COMPOSITION (THE SQUARE) --- */
.art-container {
    width: 100%;
    max-width: 650px; /* Maximum size of the drawing */
    display: flex;
    justify-content: center;
}

.art-composition {
    position: relative;
    width: 100%;
    /* This creates a responsive square canvas */
    aspect-ratio: 1 / 1; 
}

/* The Main Character Image */
.character-layer {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) rotate(5deg);
    height: 70%; /* Size relative to the square container */
    width: auto;
    z-index: 1;
    pointer-events: none; /* Let clicks pass through if needed */
}

.character-layer img {
    height: 100%;
    width: auto;
    display: block;
}

/* The Floating Items (Generic Styles) */
.floating-item {
    position: absolute;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 5;
    filter: var(--paper-drop-shadow);
}

.floating-item img {
    width: 100%;
    height: auto;
    display: block;
}

.floating-item:hover {
    z-index: 20;
    transform: scale(1.1) rotate(0deg) !important;
    filter: var(--paper-hover-drop-shadow);
}

/* --- COORDINATES (Percentages relative to the Square) --- */
/* Top Left (Blue) */
.pos-1 {
    width: 15%;
    top: 25%;
    left: 10%;
    transform: rotate(-10deg);
}

/* Top Right (Eye) */
.pos-2 {
    width: 20%;
    top: 10%;
    left: 34%;
    transform: rotate(10deg);
}

/* Bottom Right (Red) */
.pos-3 {
    width: 12%;
    top: 12%;
    right: 24%;
    transform: rotate(-8deg);
}

/* Middle Right/Top (Yellow) */
.pos-4 {
    width: 15%;
    top: 30%;
    right: 12%;
    transform: rotate(-20deg);
}

/* --- DESKTOP VIEW (Landscape) --- */
@media (min-width: 1024px) {
    .main-layout {
        flex-direction: row; /* Switch to Row */
        justify-content: center;
        align-items: center;
        gap: 5%; /* Space between text and art */
        height: 100vh;
        overflow: hidden;
        padding: 0;
    }

    .text-area {
        text-align: left;
        margin-bottom: 0;
        width: 30%; /* Text takes 30% width */
    }

    h1 {
        font-size: 12rem; /* Huge title on desktop */
    }

    .art-container {
        width: 45%; /* Art takes 45% width */
        max-width: 800px; 
    }
}

/* --- MODAL STYLES --- */
#popup-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(2px);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.popup-content {
    background: white; /* Default, overridden by JS */
    padding: 2.5rem;
    width: 90%;
    max-width: 800px;
    max-height: 85vh;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    overflow-y: auto;
    
    /* Custom Scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #f3eee8 rgba(0,0,0,0.1);
}

/* Text Colors inside Popup */
.text-content {
    flex: 1;
    color: #f3eee8; /* Default text color for dark backgrounds */
    font-size: 1rem;
    line-height: 1.6;
    text-align: justify;
}

h3 {
    font-family: 'CS Quiver Demo', sans-serif;
    font-size: 2.5rem;
    color: #f3eee8; /* Default Header color */
    margin-bottom: 1rem;
    font-weight: normal;
}

/* SPECIAL CASE: When background is Yellow (#f1d135), text should be dark */
/* Since we set background inline via JS, we can't easily target it with CSS parent selectors. 
   Instead, we rely on the specific ID wrapper to change text colors if needed, 
   or just accept white text. If you want black text on the yellow card: */

#kontakt-na-mna .text-content,
#kontakt-na-mna h3 {
   /* Optional: Uncomment below if yellow background is too bright for white text */
   /* color: #000000; */
}


.popup-content::-webkit-scrollbar { width: 8px; }
.popup-content::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); }
.popup-content::-webkit-scrollbar-thumb { background: #f3eee8; border-radius: 4px; }

.close-btn {
    position: absolute;
    top: 10px; right: 20px;
    font-size: 2rem;
    cursor: pointer;
    color: #f3eee8;
    z-index: 10;
}

.hidden { display: none !important; }

/* Modal Inner Layout */
.side-by-side-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .side-by-side-container {
        flex-direction: row;
        align-items: flex-start;
    }
    .side-by-side-container .popup-img {
        width: 40%;
    }
}

.popup-img {
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
}

/* Star List */
.star-list { list-style: none; }
.star-list li::before {
    content: "★";
    color: #f3eee8;
    margin-right: 10px;
}
.star-list li { margin-bottom: 10px; }
.pdf-link { color: #f3eee8; font-weight: bold; }

/* --- FOOTER & BACK BTN --- */
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 10px;
    text-align: center;
    font-size: 0.8rem;
    color: #888;
    pointer-events: none; 
}

.back-btn-retro {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 100;
    background-color: #000;
    color: #fff;
    text-decoration: none;
    font-family: 'Arial', sans-serif; 
    font-size: 1.2rem;
    padding: 10px 20px;
    transition: transform 0.1s;
}
.back-btn-retro:hover { transform: translateY(-2px); }
.back-btn-retro:active { transform: translateY(2px); }