@font-face {
        font-family: 'CaboSoft-ThinDemo';
        src: url('/static/fonts/CaboSoft-ThinDemo.otf') format('opentype');
        font-weight: normal;
        font-style: normal;
    }

    :root {
        --primary: #00ffcc;
        --primary-dark: #00cc99;
        --secondary: #0066ff;
        --accent: #ff00ff;
        --warning: #ff8800;
        --error: #ff0066;
        --text: #ffffff;
        --text-dim: #b0b0b0;
        --bg: #000000;
        --bg-overlay: rgba(10, 10, 10, 0.8);
        --glass-bg: rgba(10, 10, 10, 0.3);
        --glass-border: rgba(0, 255, 204, 0.4);
        --glass-hover: rgba(0, 255, 204, 0.15);
        --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        --transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        --shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
        --shadow-hover: 0 0 25px rgba(0, 255, 204, 0.4);
        --glow: 0 0 20px rgba(0, 255, 204, 0.3);
        --glow-strong: 0 0 40px rgba(0, 255, 204, 0.6);
    }

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

    body {
        font-family: 'Rajdhani', sans-serif;
        background: transparent;
        color: var(--text);
        min-height: 100vh;
        position: relative;
        overflow-x: hidden;
        padding-bottom: 120px;
    }

    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: transparent;
        pointer-events: none;
        z-index: 1;
    }

    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 2rem;
        position: relative;
        z-index: 1;
        opacity: 0;
        transform: translateY(100vh);
        transition: opacity 0.8s ease, transform 0.8s ease;
    }

    .container.visible {
        opacity: 1;
        transform: translateY(0);
    }

    .header {
        text-align: center;
        padding: clamp(1rem, 4vh, 2rem) 1rem clamp(1.5rem, 4vh, 3rem);
        position: relative;
        z-index: 1;
    }


    @keyframes titlePulse {

        0%,
        100% {
            text-shadow: var(--glow);
            transform: scale(1);
        }

        50% {
            text-shadow: var(--glow-strong);
            transform: scale(1.02);
        }
    }

    .section {
        --section-accent: var(--primary);
        background: radial-gradient(ellipse at center, rgba(0, 255, 255, 0.08) 0%, transparent 70%);
        backdrop-filter: blur(0.5rem);
        border: 1px solid var(--section-accent);
        border-radius: 1rem;
        padding: 2rem;
        margin-bottom: clamp(1rem, 6vw, 4rem);
        box-shadow: 0 0 30px rgba(0, 255, 255, 0.3), inset 0 0 30px rgba(0, 255, 255, 0.1);
        position: relative;
        z-index: 2;
        transition: var(--transition);
    }

    /* Erste Textbox - Roter Border */
    .welcome-section {
        --section-accent: #ff0000;
        border-color: #ff0000 !important;
        box-shadow: 0 0 30px rgba(255, 0, 0, 0.3), inset 0 0 30px rgba(255, 0, 0, 0.1) !important;
    }


    .welcome-content p {
        text-align: center;
    }

    /* Zweite Textbox - Weißer Border */
    .section:nth-of-type(3) {
        --section-accent: #ffffff;
        border-color: #ffffff !important;
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.2), inset 0 0 15px rgba(255, 255, 255, 0.05) !important;
    }

    .section:nth-of-type(3) .section-title,
    .section:nth-of-type(3) .section-icon {
        color: var(--section-accent) !important;
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 40px rgba(255, 255, 255, 0.6) !important;
    }

    .section:nth-of-type(3) .btn {
        border-color: #ffffff !important;
        color: #ffffff !important;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.5) !important;
        text-decoration: none !important;
        text-align: center !important;
        display: block !important;
        margin: 1rem auto !important;
    }

    .section:nth-of-type(3) .btn:hover {
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.15)) !important;
        box-shadow: 0 8px 25px rgba(255, 255, 255, 0.4), 0 0 30px rgba(255, 255, 255, 0.2) !important;
    }


    /* Gästeliste - Weißer Border */
    .guest-list {
        --section-accent: #ffffff;
        border-color: #ffffff !important;
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.2), inset 0 0 15px rgba(255, 255, 255, 0.05) !important;
    }

    .guest-list .section-title,
    .guest-list .section-icon {
        color: var(--section-accent) !important;
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 40px rgba(255, 255, 255, 0.6) !important;
    }

    .guest-list .btn {
        border-color: #ffffff !important;
        color: #ffffff !important;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.5) !important;
        text-decoration: none !important;
        text-align: center !important;
        display: block !important;
        margin: 1rem auto !important;
    }

    .guest-list .btn:hover {
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.15)) !important;
        box-shadow: 0 8px 25px rgba(255, 255, 255, 0.4), 0 0 30px rgba(255, 255, 255, 0.2) !important;
    }


    /* Helferteam Anmeldung - Orangener Border */
    .section:nth-of-type(4) {
        --section-accent: #ff8800;
        border-color: #ff8800 !important;
        box-shadow: 0 0 30px rgba(255, 136, 0, 0.3), inset 0 0 30px rgba(255, 136, 0, 0.1) !important;
    }

    .section:nth-of-type(4) .section-title,
    .section:nth-of-type(4) .section-icon {
        color: var(--section-accent) !important;
        text-shadow: 0 0 20px rgba(255, 136, 0, 0.8), 0 0 40px rgba(255, 136, 0, 0.6) !important;
    }

    .section:nth-of-type(4) .btn {
        border-color: #ff8800 !important;
        color: #ff8800 !important;
        text-shadow: 0 0 10px rgba(255, 136, 0, 0.5) !important;
        text-decoration: none !important;
        text-align: center !important;
        display: block !important;
        margin: 1rem auto !important;
    }

    .section:nth-of-type(4) .btn:hover {
        background: linear-gradient(145deg, rgba(255, 136, 0, 0.2), rgba(255, 136, 0, 0.15)) !important;
        box-shadow: 0 8px 25px rgba(255, 136, 0, 0.4), 0 0 30px rgba(255, 136, 0, 0.2) !important;
    }


    /* DJ Sets - Lila/Purple Border */
    .section:nth-of-type(5) {
        --section-accent: #800080;
        border-color: #800080 !important;
        box-shadow: 0 0 30px rgba(128, 0, 128, 0.3), inset 0 0 30px rgba(128, 0, 128, 0.1) !important;
    }

    .section:nth-of-type(5) .section-title,
    .section:nth-of-type(5) .section-icon {
        color: var(--section-accent) !important;
        text-shadow: 0 0 20px rgba(128, 0, 128, 0.8), 0 0 40px rgba(128, 0, 128, 0.6) !important;
    }

    .section:nth-of-type(5) .btn {
        border-color: #800080 !important;
        color: #800080 !important;
        text-shadow: 0 0 10px rgba(128, 0, 128, 0.5) !important;
        text-decoration: none !important;
        text-align: center !important;
        display: block !important;
        margin: 1rem auto !important;
    }

    .section:nth-of-type(5) .btn:hover {
        background: linear-gradient(145deg, rgba(128, 0, 128, 0.2), rgba(128, 0, 128, 0.15)) !important;
        box-shadow: 0 8px 25px rgba(128, 0, 128, 0.4), 0 0 30px rgba(128, 0, 128, 0.2) !important;
    }

    .welcome-title {
        margin-top: 0.5rem;
        margin-bottom: 1.5rem;
        font-size: clamp(1.8em, 4vw, 2.5em);
        text-align: center;
        justify-content: center;
    }

    /* Willkommen - Flackernde Neonröhre */
    .flicker-w {
        animation: neonFlicker 4s infinite;
    }

    .flicker-m {
        animation: neonFlicker 3.5s infinite 0.8s;
    }

    @keyframes neonFlicker {

        0%,
        19.999%,
        22%,
        62.999%,
        64%,
        64.999%,
        70%,
        100% {
            opacity: 1;
            text-shadow: inherit;
        }

        20%,
        21.999%,
        63%,
        63.999%,
        65%,
        69.999% {
            opacity: 0.3;
            text-shadow: none;
        }
    }

    /* Informationen zur Party - Pulsierender Farbwechsel */
    .info-party-title {
        animation: colorPulse 4s ease-in-out infinite !important;
    }

    @keyframes colorPulse {

        0%,
        100% {
            color: #ffff00 !important;
            text-shadow: 0 0 20px rgba(255, 255, 0, 0.8), 0 0 40px rgba(255, 255, 0, 0.6) !important;
        }

        50% {
            color: #ff8800 !important;
            text-shadow: 0 0 30px rgba(255, 136, 0, 0.9), 0 0 50px rgba(255, 136, 0, 0.7), 0 0 60px rgba(255, 136, 0, 0.5) !important;
        }
    }

    /* Gaesteliste - Glitch Effekt */
    .guest-list-title {
        animation: glitch 8s infinite;
    }

    @keyframes glitch {

        0%,
        90%,
        100% {
            transform: translate(0);
        }

        91% {
            transform: translate(-2px, 1px);
        }

        92% {
            transform: translate(2px, -1px);
        }

        93% {
            transform: translate(0);
        }
    }

    /* Helferteam - Leuchtender Puls */
    .wave-letter {
        display: inline-block;
        animation: letterGlow 3s ease-in-out infinite;
    }

    .wave-letter:nth-child(1) {
        animation-delay: 0s;
    }

    .wave-letter:nth-child(2) {
        animation-delay: 0.15s;
    }

    .wave-letter:nth-child(3) {
        animation-delay: 0.3s;
    }

    .wave-letter:nth-child(4) {
        animation-delay: 0.45s;
    }

    .wave-letter:nth-child(5) {
        animation-delay: 0.6s;
    }

    .wave-letter:nth-child(6) {
        animation-delay: 0.75s;
    }

    .wave-letter:nth-child(7) {
        animation-delay: 0.9s;
    }

    .wave-letter:nth-child(8) {
        animation-delay: 1.05s;
    }

    .wave-letter:nth-child(9) {
        animation-delay: 1.2s;
    }

    .wave-letter:nth-child(10) {
        animation-delay: 1.35s;
    }

    @keyframes letterGlow {

        0%,
        100% {
            text-shadow: inherit;
            transform: scale(1);
        }

        50% {
            text-shadow: 0 0 30px rgba(0, 255, 204, 1), 0 0 50px rgba(0, 255, 204, 0.8), 0 0 70px rgba(0, 255, 204, 0.6);
            transform: scale(1.15);
        }
    }

    /* DJ Sets - Rotierendes Icon */
    .rotate-icon {
        display: inline-block;
        animation: rotate360 3s linear infinite;
        font-size: 1.2em;
        color: #ff00ff;
        opacity: 0.5;
        filter: drop-shadow(0 0 8px rgba(255, 0, 255, 0.5));
    }

    .rotate-icon::before {
        content: '💿';
    }

    @keyframes rotate360 {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    /* Blauschbook - Farbwechsel Regenbogen */
    .blauschbook-title {
        animation: rainbow 8s linear infinite;
    }

    @keyframes rainbow {
        0% {
            color: #ff00ff;
            text-shadow: 0 0 20px rgba(255, 0, 255, 0.8);
        }

        16.6% {
            color: #8800ff;
            text-shadow: 0 0 20px rgba(136, 0, 255, 0.8);
        }

        33.3% {
            color: #0088ff;
            text-shadow: 0 0 20px rgba(0, 136, 255, 0.8);
        }

        50% {
            color: #00ffff;
            text-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
        }

        66.6% {
            color: #00ff88;
            text-shadow: 0 0 20px rgba(0, 255, 136, 0.8);
        }

        83.3% {
            color: #ff0088;
            text-shadow: 0 0 20px rgba(255, 0, 136, 0.8);
        }

        100% {
            color: #ff00ff;
            text-shadow: 0 0 20px rgba(255, 0, 255, 0.8);
        }
    }

    /* Flauschomat - Slot Machine Shake */
    .slot-machine-title {
        animation: slotShake 5s ease-in-out infinite;
    }

    @keyframes slotShake {

        0%,
        90%,
        100% {
            transform: translateX(0);
        }

        91%,
        93%,
        95%,
        97% {
            transform: translateX(-3px);
        }

        92%,
        94%,
        96%,
        98% {
            transform: translateX(3px);
        }
    }

    .section-icon {
        font-size: 2rem;
        color: var(--section-accent);
        filter: drop-shadow(0 0 10px rgba(0, 255, 204, 0.5));
        flex-shrink: 0;
    }

    /* Informationen zur Party - Gelber Border */
    .section:nth-of-type(2) {
        border-color: #ffffff !important;
        box-shadow: 0 0 30px rgba(255, 255, 255, 0.3), inset 0 0 30px rgba(255, 255, 255, 0.1) !important;
    }

    .section:nth-of-type(2) .section-title,
    .section:nth-of-type(2) .section-icon {
        color: #ffff00 !important;
        text-shadow: 0 0 20px rgba(255, 255, 0, 0.8), 0 0 40px rgba(255, 255, 0, 0.6) !important;
    }

    .section:nth-of-type(2) .info-item {
        border-color: #ffffff !important;
        box-shadow: 0 0 30px rgba(255, 255, 255, 0.3), inset 0 0 30px rgba(255, 255, 255, 0.1) !important;
    }

    .section:nth-of-type(2) .info-item strong {
        color: #ffff00 !important;
        text-shadow: 0 0 10px rgba(255, 255, 0, 0.5) !important;
    }

    .info-list {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        list-style: none;
        padding: 0;
        margin-bottom: 2rem;
    }

    .info-item {
        display: block;
        background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.8) 0%, transparent 70%);
        padding: 1rem;
        border-radius: 12px;
        border: 1px solid #ffffff;
        transition: var(--transition);
        backdrop-filter: blur(0.5rem);
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.3), inset 0 0 30px rgba(0, 0, 0, 0.1);
    }


    .info-item strong {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.8rem;
        margin-bottom: 0.5rem;
        color: var(--primary);
        font-weight: 600;
        text-shadow: 0 0 10px rgba(0, 255, 204, 0.5);
        font-size: 1.2em;
        text-align: center;
    }

    .info-item-icon {
        font-size: 1.5rem;
        color: var(--primary);
        filter: drop-shadow(0 0 10px rgba(0, 255, 204, 0.5));
        flex-shrink: 0;
    }

    .info-item p {
        font-family: 'Rajdhani', sans-serif;
        font-size: 1em;
        color: var(--text);
        margin: 0;
        line-height: 1.6;
        text-align: center;
    }

    .highlight-box {
        background: radial-gradient(ellipse at center, rgba(0, 255, 255, 0.1) 0%, transparent 70%);
        border-radius: 12px;
        padding: 0.8rem 1rem;
        margin-top: 1rem;
        border: 1px solid #ff0000;
        animation: portalPulse 3s ease-in-out infinite;
    }

    .highlight-box p {
        margin: 0;
        text-align: center;
        font-weight: 700;
        letter-spacing: 0.5px;
    }

    .input-group {
        margin-bottom: 1.5rem;
        position: relative;
    }

    label {
        display: block;
        margin-bottom: 0.625rem;
        font-family: 'Rajdhani', sans-serif;
        font-size: 1.1rem;
        font-weight: 400;
        color: #ffffff;
        text-shadow: none;
        letter-spacing: 0.0625rem;
    }

    input,
    select,
    textarea {
        font-family: 'Rajdhani', sans-serif;
        width: 100%;
        padding: 0.7rem;
        background: rgba(0, 20, 40, 0.8);
        border: 1px solid #333333;
        border-radius: 10px;
        font-size: 0.9rem;
        color: var(--primary);
        transition: var(--transition);
    }

    input:focus,
    select:focus,
    textarea:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow:
            0 0 12px rgba(0, 255, 204, 0.5),
            inset 0 0 12px rgba(0, 255, 204, 0.1);
        background: rgba(0, 30, 50, 0.9);
    }

    input::placeholder,
    textarea::placeholder {
        color: rgba(0, 255, 204, 0.4);
    }

    .btn {
        display: block;
        margin: 1rem auto;
        font-family: 'Orbitron', sans-serif;
        background: linear-gradient(145deg, rgba(10, 10, 10, 0.8), rgba(20, 20, 20, 0.6));
        backdrop-filter: blur(15px);
        border: 2px solid rgba(0, 255, 204, 0.4);
        color: var(--primary);
        padding: 0.8rem 1.5rem;
        border-radius: 2rem;
        cursor: pointer;
        font-size: 0.9rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: var(--transition);
        position: relative;
        overflow: visible;
        width: fit-content;
        max-width: 25rem;
        z-index: 10;
        box-shadow:
            0 4px 15px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .btn:hover {
        background: linear-gradient(145deg, rgba(0, 255, 204, 0.2), rgba(0, 204, 153, 0.15));
        border-color: var(--primary);
        color: var(--primary);

        box-shadow:
            0 8px 25px rgba(0, 255, 204, 0.4),
            0 0 30px rgba(0, 255, 204, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(20px);
    }

    .btn:active {
        transform: translateY(0) scale(1);
        box-shadow:
            0 4px 15px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .btn:active {
        transform: translateY(0) scale(1);
    }

    .btn-secondary {
        background: linear-gradient(145deg, rgba(255, 136, 0, 0.2), rgba(255, 0, 102, 0.2));
        border-color: var(--warning);
        color: var(--warning);
    }

    .btn-secondary:hover {
        background: linear-gradient(145deg, rgba(255, 136, 0, 0.3), rgba(255, 0, 102, 0.3));
        border-color: var(--warning);
        box-shadow:
            0 8px 25px rgba(255, 136, 0, 0.4),
            0 0 30px rgba(255, 0, 102, 0.2);
    }

    .success-message {
        display: none;
        text-align: center;
        font-family: 'Rajdhani', sans-serif;
        font-size: 1.2em;
        line-height: 1.6;
        margin: 1.25rem 0;
    }

    .error-message {
        display: none;
        color: var(--error);
        margin-top: 1rem;
        font-family: 'Rajdhani', sans-serif;
    }

    .telegram-message {
        display: block;
        font-family: 'Orbitron', sans-serif;
        font-size: 1.3em;
        font-weight: bold;
        color: var(--warning);
        text-shadow:
            0 0 10px rgba(255, 136, 0, 0.8),
            0 0 20px rgba(255, 136, 0, 0.6);
        margin-bottom: 1rem;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 2px;
        animation: wobble 3s ease-in-out infinite;
    }

    @keyframes wobble {

        0%,
        100% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.05);
        }
    }

    /* === NEW FLAUSCHOMAT STYLES === */
    .flauschomat-section {
        background: transparent;
        padding: 2.5rem;
        border-radius: 30px;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 6px solid transparent;
        border-image: linear-gradient(90deg,
                rgba(0, 243, 255, 0.3),
                rgba(0, 243, 255, 0.8),
                rgba(255, 0, 255, 0.6),
                rgba(0, 243, 255, 0.8),
                rgba(0, 243, 255, 0.3)) 1;
        animation: glitterBorder 3s ease-in-out infinite;
        margin-bottom: 1.875rem;
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.4),
            0 0 28px rgba(0, 243, 255, 0.25);
        position: relative;
        overflow: hidden;
    }

    @keyframes glitterBorder {

        0%,
        100% {
            border-image-source: linear-gradient(90deg,
                    rgba(0, 243, 255, 0.15),
                    rgba(0, 243, 255, 0.5),
                    rgba(255, 0, 255, 0.3),
                    rgba(0, 243, 255, 0.5),
                    rgba(0, 243, 255, 0.15));
        }

        50% {
            border-image-source: linear-gradient(90deg,
                    rgba(0, 243, 255, 0.5),
                    rgba(255, 0, 255, 0.15),
                    rgba(0, 243, 255, 0.5),
                    rgba(255, 0, 255, 0.15),
                    rgba(0, 243, 255, 0.5));
        }
    }

    .flauschomat-section::before,
    .flauschomat-section::after {
        content: none;
    }

    .flauschomat-section>* {
        position: relative;
        z-index: 1;
    }

    /* Flauschomat Title Animation */
    .flauschomat-title {
        background: linear-gradient(90deg, #00f3ff 0%, #b026ff 25%, #ff0055 50%, #b026ff 75%, #00f3ff 100%);
        background-size: 200% 100%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: shimmer 3s ease-in-out infinite;
        text-transform: uppercase;
        font-weight: 900;
        letter-spacing: 3px;
        font-size: 2.5rem;
    }

    @keyframes shimmer {
        0% {
            background-position: 200% 0;
        }

        50% {
            background-position: -200% 0;
        }

        100% {
            background-position: 200% 0;
        }
    }

    .flauschomat-display {
        background: transparent;
        border: 2px solid transparent;
        border-image: linear-gradient(90deg,
                rgba(0, 243, 255, 0.15),
                rgba(255, 0, 255, 0.15)) 1;
        border-radius: 8px;
        padding: 1rem;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        box-shadow: 0 0 10px rgba(0, 243, 255, 0.1);
        position: relative;
        overflow: hidden;
        margin-bottom: 1.5rem;
        animation: glitterDisplay 3s ease-in-out infinite;
    }

    @keyframes glitterDisplay {

        0%,
        100% {
            border-image-source: linear-gradient(90deg,
                    rgba(0, 243, 255, 0.15),
                    rgba(255, 0, 255, 0.15));
        }

        50% {
            border-image-source: linear-gradient(90deg,
                    rgba(255, 0, 255, 0.15),
                    rgba(0, 243, 255, 0.15));
        }
    }

    .flauschomat-display::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
            linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
        background-size: 100% 2px, 3px 100%;
        pointer-events: none;
        z-index: 2;
    }

    .flauschomat-text {
        font-family: 'Orbitron', monospace;
        color: #ff0055;
        font-size: 0.9rem;
        line-height: 1.4;
        text-shadow: 0 0 5px #ff0055;
        z-index: 1;
    }

    .flauschomat-text.glitch-active {
        animation: glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
        color: red !important;
    }

    @keyframes glitch {
        0% {
            transform: translate(0);
        }

        20% {
            transform: translate(-2px, 2px);
        }

        40% {
            transform: translate(-2px, -2px);
        }

        60% {
            transform: translate(2px, 2px);
        }

        80% {
            transform: translate(2px, -2px);
        }

        100% {
            transform: translate(0);
        }
    }

    .flauschomat-container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        position: relative;
        margin-bottom: 1.5rem;
    }

    .flauschomat-reels-container {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        background: transparent;
        padding: 15px;
        border-radius: 10px;
        border: 2px solid transparent;
        border-image: linear-gradient(90deg,
                rgba(176, 38, 255, 0.15),
                rgba(0, 243, 255, 0.15)) 1;
        box-shadow: 0 0 15px rgba(176, 38, 255, 0.1);
        position: relative;
        flex: 1;
        animation: glitterReels 3s ease-in-out infinite;
    }

    @keyframes glitterReels {

        0%,
        100% {
            border-image-source: linear-gradient(90deg,
                    rgba(176, 38, 255, 0.15),
                    rgba(0, 243, 255, 0.15));
        }

        50% {
            border-image-source: linear-gradient(90deg,
                    rgba(0, 243, 255, 0.15),
                    rgba(176, 38, 255, 0.15));
        }
    }

    .flauschomat-win-line {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 4px;
        background: rgba(255, 0, 0, 0.7);
        transform: translateY(-50%) scaleX(0);
        z-index: 10;
        box-shadow: 0 0 10px red;
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        pointer-events: none;
    }

    .flauschomat-reel {
        width: 32%;
        height: 120px;
        background: transparent;
        border-radius: 5px;
        border: 1px solid transparent;
        border-image: linear-gradient(180deg,
                rgba(0, 243, 255, 0.15),
                rgba(176, 38, 255, 0.15)) 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3.5rem;
        position: relative;
        overflow: hidden;
        box-shadow: 0 0 10px rgba(0, 243, 255, 0.1);
        animation: glitterReel 3s ease-in-out infinite;
    }

    @keyframes glitterReel {

        0%,
        100% {
            border-image-source: linear-gradient(180deg,
                    rgba(0, 243, 255, 0.15),
                    rgba(176, 38, 255, 0.15));
        }

        50% {
            border-image-source: linear-gradient(180deg,
                    rgba(176, 38, 255, 0.15),
                    rgba(0, 243, 255, 0.15));
        }
    }

    .flauschomat-reel::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.8) 100%);
        z-index: 2;
    }

    .flauschomat-symbol {
        filter: drop-shadow(0 0 5px currentColor);
        transition: transform 0.1s;
    }

    .flauschomat-symbol.spinning {
        filter: blur(5px) drop-shadow(0 0 10px currentColor);
        animation: bounce 0.1s infinite;
    }

    @keyframes bounce {
        0% {
            transform: translateY(-2px);
        }

        50% {
            transform: translateY(2px);
        }

        100% {
            transform: translateY(-2px);
        }
    }

    .flauschomat-symbol.fire {
        color: #ff4500;
        text-shadow: 0 0 15px #ff4500;
    }

    .flauschomat-symbol.earth {
        color: #32cd32;
        text-shadow: 0 0 15px #32cd32;
    }

    .flauschomat-symbol.air {
        color: #00f3ff;
        text-shadow: 0 0 15px #00f3ff;
    }

    .flauschomat-symbol.water {
        color: #1e90ff;
        text-shadow: 0 0 15px #1e90ff;
    }

    .flauschomat-symbol.cosmic {
        color: #b026ff;
        text-shadow: 0 0 15px #b026ff;
    }

    .flauschomat-dashboard {
        display: flex;
        justify-content: space-between;
        background: transparent;
        padding: 10px;
        border-radius: 8px;
        border: 2px solid transparent;
        border-image: linear-gradient(90deg,
                rgba(255, 215, 0, 0.15),
                rgba(0, 243, 255, 0.15)) 1;
        margin-bottom: 1.5rem;
        animation: glitterDash 3s ease-in-out infinite;
    }

    @keyframes glitterDash {

        0%,
        100% {
            border-image-source: linear-gradient(90deg,
                    rgba(255, 215, 0, 0.15),
                    rgba(0, 243, 255, 0.15));
        }

        50% {
            border-image-source: linear-gradient(90deg,
                    rgba(0, 243, 255, 0.15),
                    rgba(255, 215, 0, 0.15));
        }
    }

    .flauschomat-stat-box {
        text-align: center;
        flex: 1;
    }

    .flauschomat-stat-label {
        font-size: 0.7rem;
        color: #aaa;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .flauschomat-stat-value {
        font-family: 'Orbitron', sans-serif;
        font-size: 1.2rem;
        color: #ffd700;
    }

    .flauschomat-controls {
        display: flex;
        justify-content: center;
    }

    /* Hebel Styles */
    .flauschomat-lever-wrapper {
        position: relative;
        width: 60px;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .flauschomat-lever {
        position: relative;
        width: 50px;
        height: 180px;
        cursor: pointer;
    }

    .lever-base {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 45px;
        height: 50px;
        background: linear-gradient(135deg, #c0c0c0 0%, #808080 50%, #606060 100%);
        border: 2px solid #404040;
        border-radius: 6px;
        box-shadow:
            inset -2px -2px 5px rgba(0, 0, 0, 0.5),
            inset 2px 2px 5px rgba(255, 255, 255, 0.3),
            0 5px 15px rgba(0, 0, 0, 0.4);
    }

    .lever-handle {
        position: absolute;
        bottom: 45px;
        left: 50%;
        transform: translateX(-50%) rotate(0deg);
        width: 10px;
        height: 110px;
        background: linear-gradient(90deg, #d0d0d0 0%, #808080 50%, #606060 100%);
        border: 1px solid #404040;
        border-radius: 5px;
        transform-origin: bottom center;
        transition: transform 0.15s ease-out;
        box-shadow:
            inset -1px 0 2px rgba(255, 255, 255, 0.2),
            inset 1px 0 2px rgba(0, 0, 0, 0.3),
            0 2px 5px rgba(0, 0, 0, 0.3);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .lever-handle.pulled {
        transform: translateX(-50%) rotate(90deg) !important;
        transition: transform 0.1s ease-out;
    }

    .lever-ball {
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
        width: 35px;
        height: 35px;
        background: radial-gradient(circle at 30% 30%, #ff4444 0%, #cc0000 50%, #880000 100%);
        border: 2px solid #660000;
        border-radius: 50%;
        box-shadow:
            0 0 15px rgba(255, 0, 0, 0.4),
            0 5px 15px rgba(0, 0, 0, 0.5),
            inset -2px -2px 5px rgba(0, 0, 0, 0.4),
            inset 2px 2px 5px rgba(255, 100, 100, 0.3);
        cursor: grab;
        z-index: 10;
    }

    .lever-ball:hover {
        box-shadow:
            0 0 25px rgba(255, 0, 0, 0.6),
            0 5px 15px rgba(0, 0, 0, 0.5),
            inset -2px -2px 5px rgba(0, 0, 0, 0.4),
            inset 2px 2px 5px rgba(255, 100, 100, 0.3);
    }

    .lever-ball:active {
        cursor: grabbing;
    }

    .flauschomat-spin-btn {
        background: linear-gradient(135deg, #2b0038, #5a006e);
        border: 2px solid #b026ff;
        color: white;
        font-family: 'Orbitron', sans-serif;
        font-size: 1.5rem;
        font-weight: bold;
        padding: 15px 50px;
        border-radius: 50px;
        cursor: pointer;
        box-shadow: 0 0 20px rgba(176, 38, 255, 0.4), inset 0 0 10px rgba(176, 38, 255, 0.4);
        transition: all 0.2s ease;
        position: relative;
        overflow: hidden;
        text-transform: uppercase;
        letter-spacing: 2px;
    }

    .flauschomat-spin-btn:hover:not(:disabled) {
        transform: scale(1.05);
        box-shadow: 0 0 40px rgba(176, 38, 255, 0.7), inset 0 0 20px rgba(176, 38, 255, 0.6);
        background: linear-gradient(135deg, #3d004e, #760091);
    }

    .flauschomat-spin-btn:active:not(:disabled) {
        transform: scale(0.95);
    }

    .flauschomat-spin-btn:disabled {
        filter: grayscale(100%);
        opacity: 0.5;
        cursor: not-allowed;
    }

    .flauschomat-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10000;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
    }

    .flauschomat-modal.active {
        opacity: 1;
        pointer-events: all;
    }

    .flauschomat-modal-content {
        background: linear-gradient(135deg, #1a0b2e, #000);
        border: 2px solid #ffd700;
        padding: 2rem;
        border-radius: 15px;
        text-align: center;
        box-shadow: 0 0 50px #ffd700;
        transform: scale(0.8);
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .flauschomat-modal.active .flauschomat-modal-content {
        transform: scale(1);
    }

    .flauschomat-modal h2 {
        font-family: 'Cinzel', serif;
        color: #ffd700;
        font-size: 2rem;
        margin: 0 0 1rem 0;
    }

    .flauschomat-modal p {
        font-family: 'Rajdhani', sans-serif;
        font-size: 1.2rem;
        margin-bottom: 2rem;
    }

    .flauschomat-close-btn {
        background: transparent;
        border: 1px solid white;
        color: white;
        padding: 10px 20px;
        cursor: pointer;
        font-family: 'Orbitron', sans-serif;
        transition: 0.3s;
    }

    .flauschomat-close-btn:hover {
        background: white;
        color: black;
    }

    .flash {
        animation: screenFlash 1s ease-out;
    }

    @keyframes screenFlash {
        0% {
            background-color: white;
        }

        100% {
            background-color: transparent;
        }
    }

    /* === END NEW FLAUSCHOMAT STYLES === */

    .admin-login-panel {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background: radial-gradient(ellipse at center, rgba(0, 255, 255, 0.08) 0%, transparent 70%);
        padding: 1rem;
        border-radius: 1rem;
        border: 2px solid var(--warning);
        display: none;
        z-index: 1000;
        backdrop-filter: blur(0.5rem);
        box-shadow: 0 0 30px rgba(0, 255, 255, 0.3), inset 0 0 30px rgba(0, 255, 255, 0.1);
        animation: portalPulse 3s ease-in-out infinite;
    }

    .admin-login-panel.active {
        display: block;
    }

    .admin-login-panel h3 {
        color: var(--warning);
        margin-bottom: 0.5rem;
        font-family: 'Orbitron', sans-serif;
        text-transform: uppercase;
        letter-spacing: 2px;
    }

    .admin-login-panel input {
        width: 100%;
        padding: 0.5rem;
        margin-bottom: 0.5rem;
        background: rgba(0, 0, 0, 0.5);
        border: 1px solid var(--warning);
        color: var(--text);
        border-radius: 0.5rem;
        font-family: 'Rajdhani', sans-serif;
    }

    .admin-btn {
        width: 100%;
        padding: 0.5rem 1rem;
        background: rgba(255, 136, 0, 0.2);
        border: 1px solid var(--warning);
        color: var(--warning);
        border-radius: 0.5rem;
        cursor: pointer;
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: var(--transition);
        font-family: 'Orbitron', sans-serif;
    }

    .admin-btn:hover {
        background: rgba(255, 136, 0, 0.4);
        box-shadow: 0 0 15px rgba(255, 136, 0, 0.3);
    }

    .guest-list-admin-btn {
        display: none;
        margin: 1rem auto;
        font-family: 'Orbitron', sans-serif;
        background: linear-gradient(135deg, rgba(255, 136, 0, 0.2), rgba(255, 0, 102, 0.2));
        border: 2px solid var(--warning);
        color: var(--warning);
        text-shadow: 0 0 10px rgba(255, 136, 0, 0.5);
        padding: 0.9375rem 2rem;
        border-radius: 2rem;
        cursor: pointer;
        font-size: 1.2rem;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 0.125rem;
        transition: var(--transition);
        box-shadow: 0 0 20px rgba(255, 136, 0, 0.3);
    }

    .guest-list-admin-btn.visible {
        display: block;
    }

    .guest-list-admin-btn:hover {
        background: linear-gradient(135deg, rgba(255, 136, 0, 0.3), rgba(255, 0, 102, 0.3));
        transform: translateY(-0.15rem) scale(1.02);
        box-shadow: 0 0 30px rgba(255, 136, 0, 0.5);
    }

    .guest-list-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.9);
        z-index: 10000;
        overflow-y: auto;
        backdrop-filter: blur(10px);
    }

    .guest-list-modal.active {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .guest-list-content {
        width: 90%;
        max-width: 800px;
        max-height: 80vh;
        background: radial-gradient(ellipse at center, rgba(0, 255, 255, 0.08) 0%, transparent 70%);
        border: 2px solid var(--warning);
        border-radius: 20px;
        padding: 2rem;
        overflow-y: auto;
        position: relative;
        backdrop-filter: blur(0.5rem);
        box-shadow: 0 0 30px rgba(0, 255, 255, 0.3), inset 0 0 30px rgba(0, 255, 255, 0.1);
        animation: portalPulse 3s ease-in-out infinite;
    }

    .guest-list-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid rgba(255, 136, 0, 0.3);
    }

    .guest-list-header h2 {
        font-family: 'Orbitron', sans-serif;
        color: var(--warning);
        text-shadow: 0 0 20px rgba(255, 136, 0, 0.8);
        text-transform: uppercase;
        letter-spacing: 3px;
        margin: 0;
    }

    .close-modal-btn {
        background: rgba(255, 0, 102, 0.2);
        border: 2px solid var(--error);
        color: var(--error);
        padding: 0.5rem 1rem;
        border-radius: 1rem;
        cursor: pointer;
        font-family: 'Orbitron', sans-serif;
        text-transform: uppercase;
        transition: var(--transition);
    }

    .close-modal-btn:hover {
        background: rgba(255, 0, 102, 0.4);
        box-shadow: 0 0 15px rgba(255, 0, 102, 0.3);
    }

    .guest-list-stats {
        background: radial-gradient(ellipse at center, rgba(0, 255, 255, 0.08) 0%, transparent 70%);
        padding: 1rem;
        border-radius: 1rem;
        margin-bottom: 1.5rem;
        border: 1px solid var(--warning);
        backdrop-filter: blur(0.5rem);
        box-shadow: 0 0 30px rgba(0, 255, 255, 0.3), inset 0 0 30px rgba(0, 255, 255, 0.1);
        animation: portalPulse 3s ease-in-out infinite;
    }

    .guest-list-stats p {
        margin: 0.5rem 0;
        font-family: 'Rajdhani', sans-serif;
        color: var(--primary);
        font-size: 1.1rem;
    }

    .guest-list-stats strong {
        color: var(--warning);
        font-size: 1.3rem;
    }

    .guest-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        margin-top: 1rem;
    }

    .guest-table th {
        background: radial-gradient(ellipse at center, rgba(0, 255, 255, 0.08) 0%, transparent 70%);
        color: var(--warning);
        padding: 1rem;
        text-align: left;
        font-family: 'Orbitron', sans-serif;
        text-transform: uppercase;
        letter-spacing: 2px;
        border-bottom: 2px solid var(--warning);
        backdrop-filter: blur(0.5rem);
        box-shadow: 0 0 30px rgba(0, 255, 255, 0.3), inset 0 0 30px rgba(0, 255, 255, 0.1);
        animation: portalPulse 3s ease-in-out infinite;
    }

    .guest-table td {
        padding: 0.8rem 1rem;
        border-bottom: 1px solid rgba(255, 136, 0, 0.1);
        font-family: 'Rajdhani', sans-serif;
        color: var(--text);
    }

    .guest-table tbody tr:hover {
        background: radial-gradient(ellipse at center, rgba(0, 255, 255, 0.08) 0%, transparent 70%);
        backdrop-filter: blur(0.5rem);
        box-shadow: 0 0 30px rgba(0, 255, 255, 0.3), inset 0 0 30px rgba(0, 255, 255, 0.1);
        animation: portalPulse 3s ease-in-out infinite;
    }

    .guest-table .guest-number {
        color: var(--warning);
        font-weight: bold;
        width: 60px;
    }

    .guest-table .guest-name {
        color: var(--primary);
        font-size: 1.1rem;
    }

    .guest-table .guest-time {
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.9rem;
        text-align: right;
    }

    .download-guests-btn {
        margin-top: 1.5rem;
        padding: 0.8rem 2rem;
        background: linear-gradient(135deg, rgba(0, 255, 136, 0.2), rgba(0, 255, 204, 0.2));
        border: 2px solid #00ff88;
        color: #00ff88;
        border-radius: 1rem;
        cursor: pointer;
        font-family: 'Orbitron', sans-serif;
        text-transform: uppercase;
        letter-spacing: 2px;
        transition: var(--transition);
        width: 100%;
    }

    .download-guests-btn:hover {
        background: linear-gradient(135deg, rgba(0, 255, 136, 0.3), rgba(0, 255, 204, 0.3));
        box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
    }

    .admin-logout-btn {
        display: block;
        margin: 3rem auto 2rem;
        font-family: 'Orbitron', sans-serif;
        background: linear-gradient(135deg, rgba(255, 0, 102, 0.2), rgba(255, 136, 0, 0.2));
        border: 2px solid var(--error);
        color: var(--error);
        text-shadow: 0 0 10px rgba(255, 0, 102, 0.5);
        padding: 0.9375rem 2rem;
        border-radius: 2rem;
        cursor: pointer;
        font-size: 1.2rem;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 0.125rem;
        transition: var(--transition);
        box-shadow: 0 0 20px rgba(255, 0, 102, 0.3);
        width: auto;
        min-width: 300px;
    }

    .admin-logout-btn:hover {
        background: linear-gradient(135deg, rgba(255, 0, 102, 0.3), rgba(255, 136, 0, 0.3));
        transform: translateY(-0.15rem) scale(1.02);
        box-shadow: 0 0 30px rgba(255, 0, 102, 0.5);
        border-color: #ff3366;
    }

    .delete-own-btn {
        background: rgba(255, 136, 0, 0.2);
        border: 1px solid var(--warning);
        color: var(--warning);
        padding: 0.2rem 0.5rem;
        border-radius: 0.5rem;
        cursor: pointer;
        font-size: 0.7rem;
        margin-left: 0.5rem;
        transition: var(--transition);
        font-family: 'Orbitron', sans-serif;
    }

    .delete-own-btn:hover {
        background: rgba(255, 136, 0, 0.4);
        box-shadow: 0 0 10px rgba(255, 136, 0, 0.3);
        transform: translateY(-1px);
    }

    .psychedelic-bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        pointer-events: none;
        background: var(--bg);
    }

    @media (max-width: 768px) {
        .container {
            padding: 0 1rem;
        }

        .section {
            padding: 1.5rem;
            margin-bottom: 2.5rem;
        }

        .section-title {
            font-size: 1.5em;
            gap: 0.5rem;
        }

        .section-icon {
            font-size: 1.8rem;
        }

        .info-item-icon {
            font-size: 1.3rem;
        }

        .btn {
            padding: 0.75rem 1rem;
            font-size: 0.85rem;
            max-width: 100%;
        }

        .admin-logout-btn {
            min-width: 250px;
            font-size: 1rem;
            padding: 0.75rem 1.5rem;
        }

        .flauschomat-machine {
            max-width: 300px;
        }

        .reel {
            width: 60px;
            height: 60px;
            font-size: 2rem;
        }

        .flauschomat-lever {
            right: -40px;
            height: 120px;
        }

        .lever-handle {
            height: 80px;
        }

        .lever-ball {
            width: 30px;
            height: 30px;
        }
    }

    @media (max-width: 480px) {
        .header h1 {
            font-size: 2rem;
        }

        .section-title {
            font-size: 1.3em;
            letter-spacing: 1px;
            gap: 0.3rem;
        }

        .section-icon {
            font-size: 1.5rem;
        }

        .btn {
            padding: 0.625rem 0.75rem;
            font-size: 0.8rem;
            letter-spacing: 0.5px;
        }

        .info-item strong {
            font-size: 1.1em;
        }

        .slot-reels {
            height: 100px;
        }

        .reel {
            width: 50px;
            height: 50px;
            font-size: 1.8rem;
        }
    }

    .psychedelic-bg canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* Startup Overlay Styles */
    .sound-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000000;
        z-index: 10000;
        overflow: hidden;
        opacity: 1;
        pointer-events: auto;
        transition: opacity 0.8s ease-out;
    }

    .sound-overlay.fade-out {
        opacity: 0;
        pointer-events: none;
    }

    .sound-overlay.hidden {
        display: none !important;
        pointer-events: none !important;
    }

    .sound-overlay-content-wrapper {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 80%;
        width: auto;
        text-align: center;
        padding: 2rem 3rem;
        background: transparent;
        border: none;
        border-radius: 2rem;
        z-index: 10000;
        opacity: 1;
        filter: blur(20px);
        transition: filter 3s ease-out;
        pointer-events: auto;
        will-change: transform, filter;
    }

    .sound-overlay-content-wrapper.zoom-in {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    .sound-overlay-content-wrapper.sharp {
        filter: blur(0px);
    }

    .sound-overlay-content-wrapper.exit-up {
        animation: exitUp 1.5s ease-out forwards;
    }

    .sound-overlay-content-wrapper.exit-down {
        animation: exitDown 1.5s ease-out forwards;
    }

    .sound-overlay-content-wrapper.hidden {
        z-index: -1000 !important;
        pointer-events: none !important;
    }

    @keyframes exitUp {
        0% {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
        }

        100% {
            transform: translate(-50%, -150%) scale(0.8);
            opacity: 0;
        }
    }

    @keyframes exitDown {
        0% {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
        }

        100% {
            transform: translate(-50%, 150%) scale(0.8);
            opacity: 0;
        }
    }

    .portal-input {
        display: block;
        opacity: 0;
        transition: opacity 2s ease-out;
        caret-color: transparent;
        cursor: text;
    }

    .portal-input.visible {
        opacity: 1;
    }

    .enter-text,
    .password-error {
        display: none;
    }

    .enter-text {
        position: relative;
        font-family: 'Orbitron', sans-serif;
        font-size: 0.9rem;
        letter-spacing: 2px;
        color: var(--primary);
        text-shadow: 0 0 10px rgba(0, 255, 204, 0.5);
        margin-top: 1rem;
        cursor: pointer;
        transition: var(--transition);
        opacity: 0;
        pointer-events: none;
        text-align: center;
        text-transform: uppercase;
        font-weight: bold;
        padding: 0.5rem 1rem;
        transition: opacity 1s ease-out;
    }

    .enter-text.visible {
        opacity: 1;
        pointer-events: auto;
        animation: enterGlow 2s ease-in-out infinite;
    }

    .input-hint {
        position: absolute;
        bottom: -4rem;
        left: 50%;
        transform: translateX(-50%);
        font-family: 'Rajdhani', sans-serif;
        font-size: 1.2rem;
        color: rgba(255, 255, 255, 0.95);
        text-align: center;
        opacity: 0;
        transition: all 1s ease-out;
        pointer-events: auto;
        cursor: text;
        white-space: nowrap;
        letter-spacing: 1px;
        animation: hintBlink 3s ease-in-out infinite, zoomInHint 3s ease-out forwards;
        transform: translateX(-50%) scale(0.1);
    }

    .input-hint.visible {
        opacity: 1;
    }

    @keyframes zoomInHint {
        0% {
            transform: translateX(-50%) scale(0.1);
            opacity: 0;
        }

        100% {
            transform: translateX(-50%) scale(1);
            opacity: 1;
        }
    }

    .input-hint.focused {
        color: rgba(255, 255, 255, 1);
    }

    .input-hint.exit-up {
        opacity: 0;
        transform: translateX(-50%) translateY(-100px);
        filter: blur(10px);
    }

    @keyframes hintBlink {

        0%,
        100% {
            opacity: 0.7;
        }

        50% {
            opacity: 0.2;
        }
    }

    .enter-text:hover {
        text-shadow: 0 0 20px rgba(0, 255, 204, 0.8);
    }

    @keyframes enterGlow {

        0%,
        100% {
            text-shadow: 0 0 10px rgba(0, 255, 204, 0.5);
        }

        50% {
            text-shadow: 0 0 20px rgba(0, 255, 204, 0.8), 0 0 30px rgba(0, 255, 204, 0.6);
        }
    }

    .input-wrapper {
        position: relative;
        width: 100%;
        height: 2rem;
        margin-bottom: 2rem;
    }

    .portal-input {
        width: 100%;
        height: 100%;
        padding: 0;
        background: transparent;
        border: 1px solid rgba(0, 255, 204, 0.4);
        border-radius: 0;
        color: rgba(0, 255, 204);
        font-family: 'Rajdhani', sans-serif;
        font-size: 1rem;
        text-align: center;
        letter-spacing: 1px;
        transition: var(--transition);
        opacity: 0;
        caret-color: transparent;
        cursor: text;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        box-shadow: none !important;
    }

    .portal-input:focus {
        outline: none;
        background: transparent;
        opacity: 1;
    }

    .portal-input::placeholder {
        color: rgba(0, 255, 204, 0.4);
        letter-spacing: 1px;
        font-size: 0.9rem;
    }

    .blinking-dot {
        display: inline-block;
        width: 4px;
        height: 4px;
        background-color: rgba(0, 255, 204, 0.7);
        border-radius: 50%;
        animation: blink 1.5s infinite;
        margin-left: 3px;
        vertical-align: baseline;
        filter: blur(20px);
        transition: filter 1s ease-out;
        opacity: 1;
    }

    .sound-overlay-content-wrapper.sharp .blinking-dot {
        filter: blur(0px);
    }

    @keyframes blink {

        0%,
        70% {
            opacity: 1;
        }

        71%,
        100% {
            opacity: 0;
        }
    }

    .flashlight {
        position: relative;
        overflow: hidden;
    }

    .flashlight::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
        animation: flashlight 0.5s ease-out;
    }

    @keyframes flashlight {
        0% {
            left: -100%;
        }

        100% {
            left: 100%;
        }
    }

    .container.blurred {
        filter: blur(1px);
        opacity: 0.3;
        pointer-events: none;
    }

    .container.hidden {
        display: none;
    }

    .password-error {
        display: none;
        color: #ff5555;
        margin-top: 0.5rem;
        font-family: 'Rajdhani', sans-serif;
        font-size: 1em;
    }

    @keyframes messageSlide {
        from {
            transform: translateY(-2rem);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes shake {
        0% {
            transform: translateX(0);
        }

        25% {
            transform: translateX(-5px);
        }

        50% {
            transform: translateX(5px);
        }

        75% {
            transform: translateX(-5px);
        }

        100% {
            transform: translateX(0);
        }
    }

    .sound-overlay-content h2 {
        font-family: 'CaboSoft-ThinDemo', 'Orbitron', sans-serif;
        font-size: clamp(1.2rem, 6vw, 5rem);
        color: #ffffff;
        text-shadow: none;
        margin-bottom: 2rem;
        letter-spacing: clamp(1px, 0.5vw, 3px);
        text-transform: uppercase;
        font-weight: normal;
        transition: all 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        line-height: 1.2;
        animation: wabern 4s ease-in-out 5s infinite;
    }

    .zoom-title {
        animation: zoomInTitle 3.0s ease-out forwards, wabern 4s ease-in-out 0s infinite !important;
        transform: scale(0.1);
        opacity: 0;
    }

    .zoom-hint {
        animation: zoomInHint 1s ease-out 8s forwards, hintBlink 3s ease-in-out 9s infinite !important;
        transform: translateX(-50%) scale(0.1);
        opacity: 0;
    }

    @keyframes wabern {

        0%,
        100% {
            text-shadow:
                0 0 40px rgba(0, 255, 204, 0.95),
                0 0 80px rgba(0, 255, 204, 0.8),
                0 0 120px rgba(0, 255, 204, 0.6),
                0 0 160px rgba(0, 255, 204, 0.4);
        }

        50% {
            text-shadow:
                0 0 100px rgba(0, 255, 204, 1.0),
                0 0 200px rgba(0, 255, 204, 0.98),
                0 0 300px rgba(0, 255, 204, 0.95),
                0 0 400px rgba(0, 255, 204, 0.9);
        }
    }

    @keyframes zoomInTitle {
        0% {
            transform: scale(0.1);
            opacity: 0;
        }

        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    .sound-overlay-content h2.bright {
        color: var(--primary);
        text-shadow:
            0 0 20px rgba(0, 255, 204, 0.8),
            0 0 40px rgba(0, 255, 204, 0.6),
            0 0 60px rgba(0, 255, 204, 0.4);
        animation: titleGlow 3s ease-in-out infinite;
    }

    @keyframes titleGlow {

        0%,
        100% {
            text-shadow:
                0 0 20px rgba(0, 255, 204, 0.8),
                0 0 40px rgba(0, 255, 204, 0.6),
                0 0 60px rgba(0, 255, 204, 0.4);
        }

        50% {
            text-shadow:
                0 0 30px rgba(0, 255, 204, 1),
                0 0 50px rgba(0, 255, 204, 0.8),
                0 0 70px rgba(0, 255, 204, 0.6);
        }
    }

    @keyframes zoomInTitle {
        0% {
            transform: scale(0.1);
            opacity: 0;
        }

        100% {
            transform: scale(1);
            opacity: 1;
        }
    }