:root {
    --bg-green: #1B4332;
    --pink: #FF85B3;
    --white: #FFFFFF;
    --font-chunky: 'Titan One', 'Arial Black', sans-serif;
    --font-hand: 'Caveat', 'Comic Sans MS', cursive;
}

* {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

body, html {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
    background-color: var(--bg-green);
    color: var(--white);
    user-select: none;
    -webkit-user-select: none;
    font-family: var(--font-hand);
}

/* ========================================== */
/*            BASIS: MOBILE                   */
/* ========================================== */

.festival-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.poster-header {
    text-align: center;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title-hanna {
    font-family: var(--font-chunky);
    font-size: clamp(4.5rem, 20vw, 7.5rem);
    color: var(--pink);
    margin: 0;
    line-height: 0.85;
    letter-spacing: -1px;
}

.date-badge {
    font-family: var(--font-hand);
    font-size: clamp(2rem, 7vw, 7rem);
    color: var(--white);
    background: rgba(27, 67, 50, 0.8);
    padding: 4px 16px;
    border-radius: 20px;
    border: 2px solid var(--pink);
    margin: 4px 0;
}

.title-wird {
    font-family: var(--font-chunky);
    font-size: clamp(4.5rem, 16vw, 7.5rem);
    color: var(--pink);
    margin: 0;
    line-height: 0.9;
}

.party-hard-tag {
    font-family: var(--font-hand);
    font-size: clamp(1.5rem, 6vw, 2.2rem);
    color: var(--white);
    margin: 4px 0;
}

/* ========================================== */
/*          EMOJI-NAVIGATION                  */
/* ========================================== */
.emoji-nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Container blockt keine Klicks */
    z-index: 5;
}

.emoji-btn {
    position: absolute;
    /* Emoji-Font-Stack für bessere Kompatibilität (Android Disco-Kugel Fix) */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
    font-size: clamp(2.5rem, 10vw, 4.5rem);
    cursor: pointer;
    pointer-events: auto;
    text-decoration: none;
    background: none;       /* Kein Hintergrund */
    border: none;            /* Kein Rand */
    outline: none;           /* Kein Focus-Rand */
    padding: 0;              /* Kein Padding */
    margin: 0;
    line-height: 1;
    display: inline-block;
    transition: transform 0.2s ease;
    filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.3));
    animation: float 4s ease-in-out infinite;
    -webkit-appearance: none; /* Safari-Button-Reset */
    appearance: none;
}

/* Styling für die große 24 */
.big-24-container {
    z-index: 10;
    margin: 10px 0;
}

.big-24 {
    font-family: var(--font-chunky);
    font-size: clamp(11rem, 50vw, 22rem);
    color: var(--pink);
    text-shadow: 4px 4px 0px var(--white);
    cursor: pointer;
    line-height: 1;
    transition: transform 0.1s;
}

.big-24:active { transform: scale(0.9); }

.emoji-btn::-moz-focus-inner {
    border: 0;
}

.emoji-btn:active {
    transform: scale(1.3);
}

/* Disco-Kugel SVG Styling */
.disco-img {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
}

/* Jeder Button kriegt eine eigene Animation */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

/* ========================================== */
/*          BOARD BUTTON (fest unten)         */
/* ========================================== */
.board-link {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-chunky);
    background: var(--pink);
    color: var(--bg-green);
    border: 3px solid var(--white);
    padding: 10px 20px;
    text-decoration: none;
    font-size: clamp(0.8rem, 2.5vh, 1.1rem);
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 4px 4px 0px var(--white);
    transition: all 0.1s;
    z-index: 20;
}

.board-link:active {
    transform: translateX(-50%) translate(4px, 4px);
    box-shadow: 0px 0px 0px var(--white);
}

/* Desktop-Hover */
@media (min-width: 768px) and (pointer: fine) and (hover: hover) {
    .board-link:hover {
        transform: translateX(-50%) translate(-2px, -2px);
        box-shadow: 6px 6px 0px var(--white);
    }
    
    .board-link:active {
        transform: translateX(-50%) translate(4px, 4px);
        box-shadow: 0px 0px 0px var(--white);
    }
}
/* ========================================== */
/*          PARTY-MODUS                       */
/* ========================================== */
.party-mode {
    animation: flashBg 0.4s infinite;
}

.party-mode .emoji-btn {
    animation-duration: 0.5s !important;
}

@keyframes flashBg {
    0% { background-color: #1B4332; }
    33% { background-color: #ff00ff; }
    66% { background-color: #00ffff; }
    100% { background-color: #ffff00; }
}

@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    75% { transform: rotate(-5deg); }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    30% { transform: translateY(-15px); }
    50% { transform: translateY(0); }
    70% { transform: translateY(-7px); }
    85% { transform: translateY(0); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* ========================================== */
/*        DESKTOP (≥ 768px + Maus)            */
/* ========================================== */
@media (min-width: 768px) and (pointer: fine) and (hover: hover) {
    
    .title-hanna {
        font-size: clamp(10rem, 24vw, 18rem);
    }
    
    .title-wird {
        font-size: clamp(8rem, 18vw, 14rem);
    }
    
    .party-hard-tag {
        font-size: clamp(2rem, 6vw, 3rem);
    }
    
    .date-badge {
        font-size: clamp(1.2rem, 3vw, 1.8rem);
    }
    
    .emoji-btn {
        font-size: clamp(2.5rem, 6vw, 5rem);
    }
    
    .emoji-btn:hover {
        transform: scale(1.2);
        filter: drop-shadow(5px 5px 8px rgba(0,0,0,0.5)) brightness(1.2);
    }
    
    .board-link {
        font-size: clamp(1rem, 2vw, 1.3rem);
        padding: 15px 30px;
    }
    
    .board-link:hover {
        transform: translateX(-50%) translate(-3px, -3px);
        box-shadow: 7px 7px 0px var(--white);
    }
}