body {
        background-color: #ffffff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        font-family: 'Segoe UI', sans-serif;
        overflow: hidden;
        position: relative;
    }

    header { 
        margin-bottom: 30px; 
        text-align: center; 
        position: relative;
        z-index: 10; /* Höher als der Rasen */
    }

    h1 { 
        font-family: 'Press Start 2P', 'Courier New', monospace; 
        font-size: 46px; 
        margin: 10px 0; 
        display: flex; /* Wichtig für die Ausrichtung der Glieder */
        justify-content: center;
        gap: 4px;
        text-transform: none; 
        padding-top: 5px;
        position: relative;
        overflow: visible;
    }

    .snake-joint {
        display: inline-block;
        position: relative;
        color: #4caf50;
        
        /* CRT-Effekt pro Buchstabe */
        background: linear-gradient(
            rgba(18, 16, 16, 0) 50%, 
            rgba(0, 0, 0, 0.25) 50%
        ), #4caf50;
        background-size: 100% 4px;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

        /* Die Animation liegt jetzt pitzelig genau auf jedem Buchstaben einzeln */
        animation: snakeSlither 3s infinite ease-in-out;
    }

    @keyframes snakeSlither {
        0%, 100% { 
            transform: translateY(0) rotate(-2deg); 
            filter: drop-shadow(0 0 5px #81c784);
        }
        50% { 
            transform: translateY(-10px) rotate(2deg); 
            filter: drop-shadow(0 0 15px #4caf50);
        }
    }
   
    .score-container { display: flex; gap: 30px; margin-top: 10px; justify-content: center; }
    .stat-box {
        font-family: 'Orbitron', sans-serif;
        font-size: 20px;
        color: #2e7d32;
        background: #f1f8e9;
        padding: 5px 15px;
        border-radius: 10px;
        border: 2px solid #2e7d32;
        min-width: 120px;
    }

    #game-container {
        position: relative;
        padding: 20px;
        background: #4caf50;
        background-image: 
            radial-gradient(circle at 10% 10%, #66bb6a 1px, transparent 1px),
            radial-gradient(circle at 90% 85%, #81c784 1px, transparent 1px),
            linear-gradient(45deg, #43a047 25%, transparent 25%),
            linear-gradient(-45deg, #43a047 25%, transparent 25%);
        background-size: 10px 10px, 15px 15px, 5px 5px, 5px 5px;
        border-radius: 15px;
        box-shadow: inset 0 0 50px rgba(0,0,0,0.2), 0 10px 30px rgba(0,0,0,0.3);
        display: inline-block;
        z-index: 20; /* Höher als der Rasen am Rand */
    }

    #game-container::before {
        content: '';
        position: absolute;
        top: -5px; left: -5px; right: -5px; bottom: -5px;
        border: 10px solid transparent;
        border-image: radial-gradient(#2e7d32 20%, transparent 80%) 20% stretch;
        pointer-events: none;
        border-radius: 20px;
    }

    #snakeCanvas {
        display: block;
        background-color: #e8f5e9;
        border: 5px solid #2e7d32;
        position: relative;
        z-index: 1;
    }

    .overlay {
        display: none; /* Wird per JS auf 'flex' gesetzt */
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 320px;
        border-radius: 30px;
        padding: 30px;
        text-align: center;
        box-shadow: 0 15px 35px rgba(0,0,0,0.5);
        z-index: 10000; 
    }

    #death-overlay { background-color: #ff5252; border: 8px solid #b71c1c; }
    #pause-overlay { background-color: #4caf50; border: 8px solid #1b5e20; }
    #level-overlay { background-color: #4caf50; border: 8px solid #1b5e20; }

    .overlay h2 { font-family: 'Fredoka One', cursive; color: white; font-size: 32px; margin: 0 0 15px 0; }
    .overlay p { color: white; font-family: 'Orbitron', sans-serif; font-size: 18px; margin: 10px 0; }
    .overlay button {
        background-color: white; color: #1b5e20; border: none; padding: 12px 25px;
        font-family: 'Orbitron', sans-serif; font-weight: bold; border-radius: 15px; cursor: pointer;
    }

    /* WEISSE Sterne (im Rahmen) */
    #star-container {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        pointer-events: none;
        z-index: 0;
    }
    .star-white {
        position: absolute;
        background-color: white;
        border-radius: 50%;
        opacity: 0;
        box-shadow: 0 0 5px white;
        animation: fadeStar 5s infinite ease-in-out;
    }

    /* GRÜNE Sterne (Hintergrund) */
    #background-stars {
        position: fixed;
        top: 0; left: 0; width: 100vw; height: 100vh;
        pointer-events: none;
        z-index: -1;
    }
    .star-green {
        position: absolute;
        background-color: #81c784;
        border-radius: 50%;
        opacity: 0;
        box-shadow: 0 0 8px #4caf50;
        animation: fadeStar 6s infinite ease-in-out;
    }

    @keyframes fadeStar {
        0%, 100% { opacity: 0; transform: scale(0.5); }
        50% { opacity: 0.8; transform: scale(1.2); }
    }

    /* Comic-Rasen am unteren Bildschirmrand */
    #grass-floor {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100vw;
        height: 120px; /* Leicht erhöht für bessere Sichtbarkeit */
        background-image: url('gras.gif');
        background-repeat: repeat-x;
        background-size: auto 100%;
        z-index: 5; /* Hinter dem Spielfeld (#game-container hat 20) */
        pointer-events: none;
    }

    /* Der wackelnde Grabstein */
    #death-overlay { 
        background-color: #1a1a1a; /* Schwarz statt Rot */
        border: 8px solid #444; 
        color: white;
        transition: all 0.5s ease;
        animation: wobble 2s infinite ease-in-out; /* Das Wackeln */
    }

    /* Die Wackel-Animation */
    @keyframes wobble {
        0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
        25% { transform: translate(-50%, -52%) rotate(-5deg); }
        50% { transform: translate(-50%, -50%) rotate(5deg); }
        75% { transform: translate(-50%, -52%) rotate(-3deg); }
    }

    /* Ein kleines Kreuz oder RIP Design */
    .tombstone-design {
        font-size: 50px;
        margin-bottom: 10px;
        display: block;
    }

 /* Der Start-Bildschirm */
    #start-overlay {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: rgba(27, 94, 32, 0.95); /* Dunkelgrün, leicht transparent */
        border: 10px solid #2e7d32;
        z-index: 200; /* Ganz oben */
    }

    #start-overlay h2 {
        font-family: 'Orbitron', sans-serif;
        color: #81c784;
        font-size: 40px;
        text-shadow: 0 0 10px #4caf50;
        margin-bottom: 20px;
    }

    /* Das Eingabefeld */
    #player-name {
        background: #f1f8e9;
        border: 4px solid #2e7d32;
        padding: 15px;
        font-family: 'Orbitron', sans-serif;
        font-size: 24px;
        color: #1b5e20;
        border-radius: 15px;
        text-align: center;
        outline: none;
        box-shadow: 0 0 15px rgba(76, 175, 80, 0.5);
        transition: all 0.3s ease;
        margin-bottom: 25px;
    }

    #player-name:focus {
        border-color: #81c784;
        box-shadow: 0 0 25px #81c784;
        transform: scale(1.05);
    }

    .start-btn {
        background-color: #ffffff;
        color: #1b5e20;
        border: none;
        padding: 15px 40px;
        font-family: 'Orbitron', sans-serif;
        font-size: 20px;
        font-weight: bold;
        border-radius: 50px;
        cursor: pointer;
        box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        transition: background 0.3s;
    }

    .start-btn:hover {
        background-color: #81c784;
        color: white;
    }   

    #main-layout {
        display: flex;
        gap: 20px;
        align-items: flex-start;
        z-index: 10;
    }

    #side-panel {
        width: 200px;
        font-family: 'Orbitron', sans-serif;
        display: flex;
        flex-direction: column;
        gap: 8px; /* Reduzierter Abstand zwischen den Boxen */
    }

    .side-box {
        background: #f1f8e9;
        border: 3px solid #2e7d32;
        border-radius: 15px;
        padding: 8px; /* Strikt reduziert von 15px auf 8px */
        text-align: center;
        transition: all 0.3s ease;
        margin-bottom: 0; /* Abstand wird jetzt über gap gesteuert */
        display: block;
    }

    .player-entry {
        display: flex;
        justify-content: space-between;
        padding: 5px 0;
        color: #1b5e20;
        font-size: 14px;
        border-bottom: 1px solid rgba(46, 125, 50, 0.2);
    }

    .active-player {
        background: rgba(129, 199, 132, 0.3);
        font-weight: bold;
    }

    .new-player-btn {
        background-color: #2e7d32;
        color: white;
        border: none;
        padding: 10px;
        font-family: 'Orbitron', sans-serif;
        border-radius: 10px;
        cursor: pointer;
        width: 100%;
        margin-top: 10px;
        font-size: 12px;
    }
    .new-player-btn:hover { background-color: #1b5e20; }

    /* Der noch größere, freischwebende Grabstein */
    #floating-tombstone {
        position: absolute;
        font-size: 150px; /* Von 100px auf 150px erhöht – jetzt ist er pitzelig groß! */
        top: -80px;       /* Weiter nach oben geschoben, da er größer ist */
        z-index: 5001;
        filter: drop-shadow(0 0 20px rgba(0,0,0,0.9));
        animation: swingTombstone 3s infinite ease-in-out;
        pointer-events: none;
    }

    /* Der kleinere, kompakte Rahmen */
    #death-overlay .overlay-card {
        width: 280px;      /* Festgelegte, schmalere Breite */
        padding: 20px;     /* Weniger Innenabstand für Kompaktheit */
        padding-top: 80px; /* Platz oben für den massiven Stein */
        background: #1a1a1a;
        border: 6px solid #444; /* Etwas feinerer Rahmen für die kleine Box */
        border-radius: 20px;
        overflow: visible;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Pendel-Animation bleibt pitzelig genau gleich */
    @keyframes swingTombstone {
        0%   { transform: translateX(-50%) translateY(0) rotate(-10deg); }
        50%  { transform: translateX(-50%) translateY(-25px) rotate(10deg); }
        100% { transform: translateX(-50%) translateY(0) rotate(-10deg); }
    }

    /* Ergänzung für den Neon-Scanner-Effekt auf den Buchstaben */
    .snake-joint::after {
        content: attr(data-char);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-text-fill-color: #81c784;
        -webkit-background-clip: text;
        opacity: 0;
        filter: blur(2px) drop-shadow(0 0 10px #4caf50);
        animation: neonScan 4s infinite linear;
        animation-delay: var(--scan-delay); /* Wird vom JS gesteuert */
    }

    @keyframes neonScan {
        0%, 100% { opacity: 0; transform: scale(1); }
        10%, 40% { opacity: 0; }
        25% { opacity: 1; transform: scale(1.1); }
        60%, 90% { opacity: 0; }
        75% { opacity: 1; transform: scale(1.1); }
    }

    /* Wenn die Schlange vergiftet ist */
    .snake-poisoned {
        filter: sepia(1) saturate(5) hue-rotate(50deg); /* Macht sie pitzelig speibgelb */
        animation: shake 0.2s infinite; /* Leichtes Zittern vor Übelkeit */
    }

    @keyframes shake {
        0% { transform: translate(1px, 1px); }
        50% { transform: translate(-1px, -1px); }
        100% { transform: translate(1px, -1px); }
    }  

    /* Animation für das Zittern des Spielfelds bei Vergiftung */
    .poison-shake {
        animation: shakeEffect 0.2s infinite ease-in-out;
    }

    @keyframes shakeEffect {
        0% { transform: translate(1px, 1px); }
        25% { transform: translate(-1px, -2px); }
        50% { transform: translate(-2px, 0px); }
        75% { transform: translate(2px, 2px); }
        100% { transform: translate(1px, -1px); }
    }

    /* Die Warnung für Niclas' Gift-Frucht */
    .poison-warning {
        color: #DFFF00;
        font-weight: bold;
        text-shadow: 0 0 10px #afb42b;
        animation: flash 0.5s infinite;
    }

    @keyframes flash {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }

    #poison-overlay {
        box-shadow: 0 0 50px #DFFF00;
        animation: poisonGlow 1s infinite alternate ease-in-out;
    }

    @keyframes poisonGlow {
        from { box-shadow: 0 0 20px #DFFF00; transform: translate(-50%, -50%) scale(1); }
        to { box-shadow: 0 0 60px #afb42b; transform: translate(-50%, -50%) scale(1.05); }
    }

    /* Pitzelig genauer Verwirrungs-Effekt */
    .verwirrt {
        filter: blur(8px);
        transition: filter 0.5s ease-in-out;
    }

    /* Optional: Ein kleiner Puls-Effekt für den Belohnungs-Timer */
    #slowdown-box h3 {
        animation: pulse-green 2s infinite;
    }

    @keyframes pulse-green {
        0% { opacity: 1; }
        50% { opacity: 0.6; }
        100% { opacity: 1; }
    }

    #timer-container.warning {
        background: #ffebee;
        animation: pulse-red 1s infinite;
    }

    @keyframes pulse-red {
        0% { border-color: #f44336; box-shadow: 0 0 5px #f44336; }
        50% { border-color: #b71c1c; box-shadow: 0 0 15px #ff5252; }
        100% { border-color: #f44336; box-shadow: 0 0 5px #f44336; }
    }

    /* Die Münzen, die direkt im Spielfeld aufsteigen */
    .ingame-coin {
        position: absolute;
        font-size: 24px;
        z-index: 100;
        pointer-events: none;
        filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
        animation: coin-fly-up 2s ease-out forwards;
    }

    @keyframes coin-fly-up {
        0% { 
            transform: translateY(0) scale(0.5); 
            opacity: 0; 
        }
        20% { 
            opacity: 1; 
            transform: translateY(-30px) scale(1.3); 
        }
        100% { 
            transform: translateY(-100px) scale(1); 
            opacity: 0; 
        }
    }

    /* Container bleibt für die Logik bestehen, falls benötigt */
    #coin-overlay-sidebar {
        position: absolute;
        pointer-events: none;
        width: 100%;
        text-align: center;
    }

    /* Das Leuchten der Schlange im Magnet-Modus */
    .magnet-active {
        filter: drop-shadow(0 0 8px #00d2ff);
    }

    /* Die Magnet-Frucht (Magnet-Emoji) */
    .magnet-fruit {
        filter: drop-shadow(0 0 5px #00d2ff);
        animation: pulse 1s infinite alternate;
    }

    @keyframes magnet-glow {
        0% { stop-color: #00d2ff; stop-opacity: 0.6; }
        50% { stop-color: #ffffff; stop-opacity: 0.9; }
        100% { stop-color: #00d2ff; stop-opacity: 0.6; }
    }

    /* Impressum Link - Die finale, pitzelig genaue Version */
    #impressum-link {
        position: fixed;
        bottom: 20px;       /* Höher gesetzt, um über dem Gras zu schweben */
        right: 25px;        /* Mehr Abstand zum Eck */
        font-family: 'Orbitron', sans-serif;
        font-size: 16px;    /* Deutlich größere Schrift */
        color: #ffffff;     /* Reines Weiß */
        font-weight: 900;   /* Extra fett */
        cursor: pointer;
        text-transform: uppercase;
        letter-spacing: 2px;
        z-index: 1000;
        /* Starker, dunklerer Glow-Kern für maximale Lesbarkeit auf Gras */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 
                     0 0 10px #00e5ff, 
                     0 0 20px #00e5ff; 
        transition: all 0.3s ease;
    }

    #impressum-link:hover {
        color: #00e5ff;     /* Farbe wechselt beim Hover zu Cyan */
        text-shadow: 0 0 20px #ffffff, 0 0 30px #00e5ff;
        transform: scale(1.1);
    }

    /* Das Impressum-Overlay */
    #impressum-overlay .overlay-content {
        background: #f1f8e9;
        border: 5px solid #2e7d32;
        padding: 30px;
        max-width: 400px;
        text-align: center;         /* Pitzelig genau zentriert */
        color: #1b5e20;             /* Pitzelig genaues Dunkelgrün für die Lesbarkeit */
    }

    #impressum-overlay h2 {
        color: #2e7d32;             /* Überschrift in kräftigem Grün */
        font-family: 'Orbitron', sans-serif;
        margin-top: 0;
    }

    #impressum-overlay p {
        color: #1b5e20;             /* Fließtext in dunklem Grün */
        font-weight: bold;
        line-height: 1.6;
    }

    #snake-mascot {
        position: fixed;
        top: 25px;
        left: 25px;
        width: 130px;                /* Pitzelig genaue Größe */
        height: auto;
        z-index: 1000;               /* Immer im Vordergrund */
        border: 3px solid #2e7d32;   /* Passender grüner Rahmen */
        border-radius: 15px;
        box-shadow: 0 0 20px rgba(0, 229, 255, 0.6), 0 10px 30px rgba(0,0,0,0.5);
        animation: mascotFloat 4s infinite ease-in-out;
        pointer-events: none;        /* Klicks gehen durch das Bild hindurch */
    }

    @keyframes mascotFloat {
        0%, 100% { transform: translateY(0) rotate(-3deg); }
        50% { transform: translateY(-15px) rotate(3deg); }
    }

    /* Verstecken auf kleinen Handys, damit nichts überlappt */
    @media (max-width: 900px) {
        #snake-mascot { display: none; }
    }