/* =========================================
   1. FONTS & VARIABLES
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@700&family=Indie+Flower&display=swap');

:root {
    --grinch-lime: #8bc34a;     /* Helles Giftgrün */
    --grinch-dark: #33691e;     /* Dunkles Moosgrün */
    --grinch-bg: #1e2c1b;       /* Dunkler Hintergrund */
    --santa-red: #b71c1c;       /* Blutrot */
    --dirty-paper: #f4f1ea;     /* Altes Papier */
    --ink: #2c5035;
}

/* =========================================
   2. BASIS LAYOUT & HAUPTBOX
   ========================================= */
body { 
    font-family: 'Indie Flower', cursive, sans-serif; 
    background: var(--grinch-bg); 
    background-image: radial-gradient(#2c3e50 1px, transparent 1px);
    background-size: 20px 20px;
    color: var(--ink); 
    text-align: center; 
    padding: 20px; 
    margin: 0;
}

/* Die Hauptbox */
.box { 
    max-width: 800px; 
    margin: 20px auto; 
    background: var(--dirty-paper); 
    padding: 60px 30px 30px 30px; 
    color: #333;
    
    /* DER NEUE STANDARD-RAHMEN */
    border: 3px solid #333;
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    box-shadow: 10px 10px 0px rgba(0,0,0,0.5);
}

/* =========================================
   3. TYPOGRAFIE
   ========================================= */
h1, h2, h3, h4 {
    font-family: 'Mountains of Christmas', cursive; 
    font-weight: 700;
    color: var(--grinch-dark);
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Haupttitel "Roulette des Grauens" */
.grinch-title {
    font-family: 'Mountains of Christmas', cursive;
    font-size: 3.2em; 
    color: var(--santa-red);
    text-shadow: 3px 3px 0px #000, -1px -1px 0 var(--grinch-lime);
    margin-top: -10px;
    margin-bottom: 20px;
    line-height: 1.1;
}

/* Große Namen Anzeige */
.big-name { 
    font-family: 'Mountains of Christmas', cursive;
    font-size: 3.5em; 
    font-weight: bold; 
    color: var(--santa-red); 
    margin: 10px 0; 
    transform: rotate(-3deg);
    text-shadow: 2px 2px 0px #000;
}

/* =========================================
   4. UI ELEMENTE & BUTTONS
   ========================================= */
input[type="text"], input[type="password"], textarea { 
    padding: 10px; 
    border: 2px dashed var(--grinch-dark); 
    background: #fff;
    font-family: 'Indie Flower', cursive;
    font-size: 1.1em;
    border-radius: 5px;
}

textarea { 
    width: 90%; 
    height: 90px; 
    box-sizing: border-box; 
    resize: vertical;
}

table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 20px 0; font-size: 1.1em; }
th { background-color: var(--grinch-dark); color: var(--grinch-lime); border: 2px solid #333; padding: 10px; font-family: 'Mountains of Christmas', cursive; }
td { border: 1px solid #333; padding: 10px; background: white; }

.status-badge { display: inline-block; padding: 5px 10px; border-radius: 15px; font-size: 0.9em; font-weight: bold; border: 1px solid #333;}
.st-setup { background: #fff176; color: #333; }
.st-drawn { background: var(--grinch-lime); color: #000; }
.hidden { display: none; }

/* Buttons */
button { 
    font-family: 'Mountains of Christmas', cursive;
    font-weight: bold;
    font-size: 1.2em;
    padding: 10px 20px; 
    color: white; 
    border: 2px solid #333; 
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    cursor: pointer; 
    transition: transform 0.1s;
    text-transform: uppercase;
    box-shadow: 3px 3px 0px #333;
}

button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0px #333; }
button:hover { transform: scale(1.05) rotate(1deg); }

.btn-green { background: var(--grinch-lime); color: #000; }
.btn-orange { background: #ff9800; color: #000; } 
.btn-red { background: var(--santa-red); }
.btn-blue { background: var(--grinch-dark) }
.btn-small { padding: 5px 10px; font-size: 0.9em; }

/* Der Flucht-Button */
.btn-escape {
    display: inline-block;
    margin-top: 30px;
    padding: 8px 20px;
    background: transparent;
    color: #555;
    border: 2px dashed #777;
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    font-family: 'Mountains of Christmas', cursive;
    font-size: 1.2em;
    text-decoration: none; 
    font-weight: bold;
    transform: rotate(2deg); 
    transition: all 0.2s ease-in-out;
}

.btn-escape:hover {
    background: #333;
    color: var(--grinch-lime); 
    border-color: #333;
    border-style: solid;
    transform: scale(1.1) rotate(-3deg);
    box-shadow: 3px 3px 0px rgba(0,0,0,0.3);
    cursor: url('grinch_left_mini.png') 0 0, pointer; 
}

/* =========================================
   5. SPEZIAL-BOXEN & LAYOUTS
   ========================================= */

/* Liste der Gier (User) */
.wish-box { 
    background: #fffde7; 
    border: 3px solid #333; /* Einheitlicher Rahmen */
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    box-shadow: 7px 7px 0 rgba(0,0,0,0.2);
    padding: 15px; 
    margin-top: 30px;
    transform: rotate(-1deg);
}

/* Bettelbrief (Target) */
.target-wish-box { 
    background: #dcedc8; 
    border: 3px solid #333; /* Einheitlicher Rahmen */
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    box-shadow: 7px 7px 0 rgba(0,0,0,0.2);
    padding: 15px; 
    margin-top: 15px; 
    transform: rotate(1deg);
}

/* Countdown Box */
.countdown-box {
    margin-top: 40px;
    padding: 10px 20px 35px 20px;
    background: rgba(0, 0, 0, 0.05);
    border: 3px solid var(--santa-red); /* Roter Warn-Rahmen */
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    box-shadow: 7px 7px 0 rgba(0,0,0,0.4);
}
.countdown-box h4 { color: var(--santa-red); margin-bottom: 10px; font-size: 1.5em; }
#timer { display: flex; justify-content: center; gap: 15px; }
.time-unit { 
    background: var(--grinch-bg); color: var(--grinch-lime); padding: 10px; 
    border-radius: 5px; min-width: 60px; border: 1px solid #333; box-shadow: 3px 3px 0px #000; 
}
.time-unit span { display: block; font-family: 'Mountains of Christmas', cursive; font-size: 2em; font-weight: bold; line-height: 1; }
.time-unit .label { font-size: 0.8em; font-family: 'Indie Flower', cursive; color: #fff; margin-top: 5px; }

/* Grid Layout für Bettelbrief (2 Spalten) */
.wish-box-grid {
    display: grid;
    grid-template-columns: 180px 1fr; 
    gap: 20px;
    align-items: center;
    padding-right: 15px;
}
.wish-box-icon { text-align: center; }
.wish-box-icon img {
    width: auto; height: auto; max-height: 170px; max-width: 100%; 
    filter: drop-shadow(3px 3px 2px rgba(0,0,0,0.3)); transform: rotate(-10deg);
}
.wish-box-content h4 { justify-content: flex-start !important; text-align: left !important; }
.wish-box-content div[style*="text-align: center;"] { text-align: left !important; }

/* Mobile Responsive Adjustments */
@media (max-width: 700px) {
    .wish-box-grid { grid-template-columns: 1fr; text-align: center; padding-right: 0; }
    .wish-box-icon img { max-height: 120px; margin-bottom: 10px; }
    .wish-box-content h4 { justify-content: center !important; text-align: center !important; }
    .wish-box-content div, .wish-box-content div[style*="text-align: left;"] { text-align: center !important; }
    #timer { gap: 5px; }
    .time-unit { min-width: 50px; padding: 5px; }
    .time-unit span { font-size: 1.5em; }
}

/* =========================================
   6. DAS GLÜCKSRAD
   ========================================= */
.wheel-container { 
    position: relative; width: 300px; height: 300px; margin: 30px auto; overflow: hidden; border-radius: 50%; 
    border: 8px solid var(--grinch-dark); 
    box-shadow: 0 0 0 4px var(--grinch-lime), 0 10px 20px rgba(0,0,0,0.5); 
}
.wheel { width: 100%; height: 100%; border-radius: 50%; position: relative; transition: transform 4s cubic-bezier(0.1, 0.7, 0.1, 1); background: #333; }
.wheel-segment { 
    position: absolute; top: 50%; left: 50%; width: 50%; height: 2px; transform-origin: 0% 50%; 
    text-align: right; color: #333; font-weight: bold; font-size: 16px; padding-right: 15px; 
    box-sizing: border-box; font-family: 'Mountains of Christmas', cursive;
}
.wheel-text { 
    filter: blur(5px); transition: filter 0.5s; 
    color: #fff; text-shadow: 1px 1px 2px #000; 
    white-space: nowrap; font-family: 'Indie Flower', cursive; font-size: 1.2em;
}
.pointer { 
    position: absolute; top: -15px; left: 50%; transform: translateX(-50%); width: 0; height: 0; 
    border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 40px solid var(--santa-red); 
    z-index: 10; filter: drop-shadow(0 4px 0px #000); 
}

/* Ergebnis Animation */
.result-box { display: none; margin-top: 20px; animation: popIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
@keyframes popIn { 0% { transform: scale(0); } 80% { transform: scale(1.1); } 100% { transform: scale(1); } }


/* --- COUNTDOWN GRID LAYOUT --- */
.countdown-grid {
    display: grid;
    grid-template-columns: 200px 1fr; /* 150px für Grinch, 1fr für den Inhalt */
    gap: 20px;
    align-items: center; /* Vertikal zentriert */
    padding-left: 10px; /* Etwas Platz für den Grinch */
}

.countdown-icon {
    text-align: center;
}

.countdown-icon img {
    height: auto;
    max-height: 200px; /* Größe des Grinch-Emojis */
    max-width: 100%;
    filter: drop-shadow(3px 3px 2px rgba(0,0,0,0.4));
    transform: rotate(3deg); /* Ein bisschen Grinch-Schiefheit */
}

.countdown-content h4 {
    text-align: left; /* Überschrift linksbündig in der rechten Spalte */
    margin-bottom: 10px; /* Etwas weniger Abstand zur Uhr */
}

/* Den Timer im Grid nach links ausrichten */
.countdown-content #timer {
    justify-content: flex-start; /* Uhren nach links schieben */
}

/* --- MOBILE OPTIMIERUNG FÜR COUNTDOWN --- */
@media (max-width: 700px) {
    .countdown-grid {
        grid-template-columns: 1fr; /* Auf Mobil nur eine Spalte */
        text-align: center; /* Alles zentrieren */
        padding-left: 0;
    }

    .countdown-icon {
        margin-bottom: 0px; /* Abstand zwischen Grinch und Text */
    }
    .countdown-icon img {
        max-height: 200px; /* Auf Mobil kleiner */
    }

    .countdown-content h4 {
        text-align: center; /* Überschrift mittig auf Mobil */
    }
    .countdown-content #timer {
        justify-content: center; /* Uhren mittig auf Mobil */
    }
}

/* Das Grinch-Logo oben auf der Box */
.grinch-logo-top {
    width: 150px;
    margin-top: -90px; /* Zieht das Bild aus der Box nach oben */
    margin-bottom: 10px;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.5));
    transform: rotate(-5deg);
}

.theme-logo {
    /* 1. Das Bild definieren */
    background-image: url('grinch_logo_oBG.png');
    
    /* 2. Damit es sich benimmt wie ein echtes Bild */
    background-size: contain; /* Passt das Bild in die Box ein */
    background-repeat: no-repeat;
    background-position: center bottom;
    
    /* 3. Größe festlegen (WICHTIG bei Hintergrundbildern!) */
    width: 150px;
    height: 150px; /* Du musst hier eine Höhe angeben, sonst ist es 0px hoch */
    
    /* 4. Deine Positionierung */
    display: block; /* Damit margin funktioniert */
    margin: 0 auto; /* Zentriert den Div horizontal */
    margin-top: -90px; /* Zieht es nach oben raus */
    margin-bottom: 10px;
    
    /* 5. Die Effekte */
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.5));
    transform: rotate(-5deg);
}