* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Poppins', sans-serif; }
body { background-color: #121212; color: #ffffff; height: 100vh; overflow: hidden; display: flex; flex-direction: column; }

header { display: flex; justify-content: space-between; align-items: center; padding: 0 20px; background-color: #1e1e1e; height: 65px; z-index: 10; position: relative; }
.site-title { font-size: 1.1rem; display: flex; align-items: center; gap: 6px; margin-top: 40px; } 

.stat-box { font-size: 1.2rem; font-weight: 800; background: #2a2a2a; padding: 6px 14px; border-radius: 5px; color: #4caf50; border: 1px solid #333; }
.yt-sub-btn { background-color: #FF0000; color: white !important; padding: 5px 12px; border-radius: 4px; text-decoration: none; font-weight: bold; font-size: 0.85rem; }

.social-header-grid { display: none; }

main { flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; text-align: center; overflow: hidden; }
.hidden { display: none !important; }

/* NEU: Attraktiver Start-Button */
.start-btn {
    background: linear-gradient(45deg, #4caf50, #81c784);
    color: white;
    border: none;
    padding: 18px 45px;
    font-size: 1.6rem;
    font-weight: 800;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(76, 175, 80, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    animation: pulse 2s infinite;
    margin-top: 20px;
}
.start-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(76, 175, 80, 0.6);
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(76, 175, 80, 0); }
    100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}

.wordcloud-wrapper { position: relative; }
.combo-badge { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); background: #ff9800; padding: 5px 15px; border-radius: 20px; font-weight: 800; z-index: 20; }
.wc-fire-mode { box-shadow: 0 0 30px #ff9800 !important; border: 4px solid #ff9800 !important; }
.wc-god-mode { box-shadow: 0 0 40px #00e5ff !important; border: 4px solid #00e5ff !important; animation: godPulse 1s infinite alternate; }
@keyframes godPulse { from { transform: scale(1); } to { transform: scale(1.05); } }

.wordcloud-wrapper img { max-height: 40vh; border-radius: 10px; border: 4px solid transparent; }

.options-container { display: flex; justify-content: center; gap: 30px; margin: 20px 0; }
.option-card { display: flex; flex-direction: column; align-items: center; }
.option-img { height: 18vh; width: 18vh; border-radius: 50%; object-fit: cover; cursor: pointer; border: 4px solid transparent; }
.option-img.correct { border-color: #4caf50; }
.option-img.wrong { border-color: #f44336; opacity: 0.5; }
.channel-name { display: block; margin-top: 8px; font-size: 0.95rem; font-weight: 600; color: #ccc; }

#game-over { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 10px; 
    padding: 20px; 
    width: 100%; 
    max-width: 500px; 
    overflow-y: auto; 
    max-height: 100%; 
    -webkit-overflow-scrolling: touch;
}
.rank-title { color: #ff9800; font-size: 1.6rem; margin: 10px 0; }
.restart-btn { background-color: #4caf50; color: white; border: none; padding: 12px 35px; font-size: 1.1rem; border-radius: 10px; cursor: pointer; font-weight: 800; margin-top: 10px; }

.making-of-section { padding: 10px; background: #1e1e1e; border-radius: 12px; width: 100%; border: 1px solid #333; margin-top: 15px; }
.end-video-link { display: flex; align-items: center; gap: 12px; text-decoration: none; color: white; }
#end-thumbnail { width: 100px; border-radius: 6px; }

#video-popup { 
    position: fixed; top: 0; left: 0; width: 100%; height: 60px; 
    background-color: #1a1a1a; border-bottom: 2px solid #ff0000; 
    display: flex; align-items: center; padding: 0 15px; z-index: 10000; 
    transition: transform 0.5s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
.popup-hidden { transform: translateY(-100%); }
.popup-content { width: 100%; display: flex; align-items: center; gap: 15px; }
.popup-label { color: #ff0000; font-weight: 800; font-size: 0.7rem; white-space: nowrap; }
#popup-link { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-grow: 1; overflow: hidden; }
#popup-thumbnail { height: 40px; border-radius: 4px; }
#popup-title { color: white; font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.popup-close { cursor: pointer; font-size: 1.5rem; color: #888; padding-left: 10px; }

.legal-trigger { position: fixed; bottom: 10px; right: 10px; font-size: 0.7rem; color: #555; cursor: pointer; z-index: 100; }

#impressum-modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.85);
    display: flex; justify-content: center; align-items: center;
    z-index: 20000;
}
.modal-hidden { display: none !important; }
.modal-content { background-color: #1e1e1e; padding: 25px; border-radius: 12px; max-width: 320px; width: 90%; position: relative; text-align: left; }

@media (max-width: 600px) {
    header { height: 45px; padding: 0 10px; }
    .site-title { font-size: 0.9rem; margin-top: 15px; } 
    .stat-box { font-size: 0.95rem; padding: 4px 8px; }
    
    .dev-info { 
        position: absolute; top: 2px; left: 10px; font-size: 0.55rem;
        display: flex; align-items: center; gap: 5px; opacity: 0.8;
    }
    .dev-info .yt-sub-btn { font-size: 0.55rem; padding: 2px 5px; }

    .social-header-grid { 
        display: flex !important; position: absolute; top: 5px; right: 10px; gap: 5px; z-index: 100;
    }
    .social-box-small {
        width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
        border-radius: 6px; text-decoration: none; font-size: 0.8rem; border: 1px solid #333;
        color: white !important; 
    }
    .social-box-small.insta { background: linear-gradient(45deg, #f09433, #bc1888); color: white !important; }
    .social-box-small.tiktok { background: #000; border-color: #ff0050; color: white !important; }
    .social-box-small.youtube { background: #ff0000; color: white !important; }

    .header-center.round-display { display: none !important; }
    
    /* Mobil Button Größe anpassen */
    .start-btn { font-size: 1.3rem; padding: 15px 35px; }

    .wordcloud-wrapper img { max-height: 25vh; }
    .option-img { height: 12vh; width: 12vh; }
    .options-container { gap: 10px; }
    .channel-name { font-size: 0.75rem; }
    
    .name-input-container { flex-direction: column; }
    .save-name-btn { padding: 10px; }
}

/* --- Highscore Styles --- */
.highscore-section { background: #1e1e1e; padding: 15px; border-radius: 12px; border: 1px solid #333; width: 100%; margin-top: 10px; text-align: left; }
.highscore-section h3 { color: #ff9800; margin-bottom: 10px; text-align: center; font-size: 1.1rem; }
.name-input-container { display: flex; gap: 10px; margin-bottom: 15px; }
.name-input-container input { flex-grow: 1; padding: 10px; border-radius: 6px; border: 1px solid #444; background: #2a2a2a; color: white; }
.save-name-btn { background-color: #ff9800; color: white; border: none; border-radius: 6px; padding: 0 15px; cursor: pointer; font-weight: bold; }
.highscore-list { list-style: none; padding: 0; }
.highscore-list li { display: flex; justify-content: space-between; padding: 8px 10px; background: #2a2a2a; margin-bottom: 5px; border-radius: 6px; font-size: 0.85rem; }
.highscore-list li.highlight-player { background: #4caf50; font-weight: bold; }
.highscore-list .rank { color: #aaa; width: 25px; }