/* --- 🐧 WAVY PENGUIN WONDERLAND THEME - FINAL VERSION 🐧 --- */

:root {
    --primary-penguin: #5bb3d6;
    --accent-yellow: #ffda6a;
    --accent-orange: #fca311;
    --text-dark: #334a60;
    --light-bg: #e6f7ff;
    --white: #ffffff;
    --shadow-light: 0 8px 25px rgba(0, 0, 0, 0.1);
    --shadow-deep: 0 15px 40px rgba(0, 0, 0, 0.15);
}

body {
    font-family: 'Quicksand', sans-serif;
    background-color: var(--light-bg);
    color: var(--text-dark);
    margin: 0;
    line-height: 1.6;
    padding: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    z-index: 0;
    overflow-x: hidden;
}

/* --- Container --- */
.container {
    max-width: 950px;
    width: 95%;
    margin: 40px auto;
    background: var(--white);
    border-radius: 40px;
    box-shadow: var(--shadow-deep);
    overflow: hidden;
    position: relative;
    z-index: 10; /* Content sits above background but below overlays */
}

/* --- Header --- */
header {
    text-align: center;
    padding: 60px 20px 80px;
    background: linear-gradient(145deg, var(--primary-penguin) 0%, #7bc2e2 100%);
    color: var(--white);
    position: relative;
    overflow: hidden;
}

header h1 {
    font-size: 4rem;
    margin: 0;
    font-weight: 700;
    color: var(--accent-yellow);
    text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.15);
    line-height: 1;
    position: relative;
    z-index: 2;
}

header p {
    font-size: 1.3rem;
    opacity: 0.9;
    margin-top: 15px;
    font-weight: 600;
    position: relative;
    z-index: 2;
}

/* Header Wave */
header::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 100%;
    height: 100px;
    background: var(--white);
    border-radius: 50% / 100%;
    transform: translateY(50%);
    z-index: 1;
}

/* --- Navigation --- */
nav {
    background: var(--primary-penguin);
    padding: 20px 10px 30px; /* Reduced horizontal padding */
    display: flex;
    justify-content: center;
    gap: 10px; /* Tighter gap between buttons */
    position: relative;
    z-index: 3;
    margin-top: -60px;
}

nav a {
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem; /* ✅ Smaller font for fitting (was 1.15rem) */
    padding: 10px 20px; /* ✅ Tighter padding (was 14px 35px) */
    border-radius: 50px;
    transition: all 0.3s;
    color: var(--text-dark);
    background-color: var(--white);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    white-space: nowrap; /* Crucial: Prevents link text from wrapping */
    
    /* Center the text and any embedded emojis */
    display: flex;
    align-items: center; 
    justify-content: center;
}

nav a:hover {
    background-color: var(--accent-yellow);
    transform: translateY(-5px);
}

nav a.active {
    background-color: var(--accent-orange);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(252, 163, 17, 0.5);
}

/* --- Main Sections --- */
section {
    padding: 70px 50px;
    border-bottom: 3px solid var(--light-bg);
}

section:last-child {
    border-bottom: none;
}

h2 {
    font-size: 3rem;
    color: var(--primary-penguin);
    text-align: center;
    margin-bottom: 50px;
    font-weight: 700;
}

/* --- Lofi Player --- */
.lofi-player {
    background: linear-gradient(135deg, var(--text-dark) 0%, #4a6c8e 100%);
    padding: 25px;
    border-radius: 25px;
    box-shadow: var(--shadow-deep);
}

.youtube-embed {
    background: #1a2a3a;
    width: 100%;
    height: 500px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* --- Vibe Control Wrapper (NEW ISOLATED STYLES) --- */
.vibe-section-wrapper {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

/* Note: We target ONLY .btn-vibe inside this wrapper */
.vibe-section-wrapper .btn-vibe {
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: var(--white);
    padding: 12px 25px;
    border-radius: 50px;
    cursor: pointer;
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.vibe-section-wrapper .btn-vibe:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-3px);
    color: var(--white);
}

.vibe-section-wrapper .btn-vibe.active {
    background: var(--accent-orange);
    border-color: var(--accent-orange);
    color: var(--white);
    box-shadow: 0 5px 20px rgba(252, 163, 17, 0.4);
    transform: scale(1.05);
}


/* --- Form Styles --- */
#join-form {
    background: #fdfefe;
    border: 2px dashed var(--light-bg);
    padding: 50px;
    border-radius: 30px;
    box-shadow: var(--shadow-light);
}

.form-group {
    margin-bottom: 30px;
}

.form-group label {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-dark);
}

.form-group input, .form-group textarea {
    width: 100%;
    padding: 18px;
    border: 2px solid var(--light-bg);
    border-radius: 15px;
    font-size: 1.1rem;
    font-family: 'Quicksand', sans-serif;
    box-sizing: border-box;
    transition: all 0.3s;
    background-color: #fcfdfe;
}

.form-group input:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--accent-yellow);
    box-shadow: 0 0 0 5px rgba(255, 218, 106, 0.4);
}

/* --- Radio Buttons (Grid) --- */
.radio-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 15px;
    margin-top: 10px;
}

.radio-label {
    background: var(--white);
    border: 2px solid var(--light-bg);
    padding: 15px 10px; /* Slightly smaller padding */
    border-radius: 20px;
    cursor: pointer;
    font-weight: 700;
    color: var(--text-dark);
    transition: all 0.2s;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.radio-label span {
    display: block;
    font-size: 1.1rem;
}

.radio-label:hover {
    border-color: var(--accent-yellow);
    background: #fffbef;
    transform: translateY(-3px);
}

.radio-label input { display: none; }

/* Selected State (Cleaner Look) */
.radio-label:has(input:checked) {
    background-color: var(--accent-orange);
    border-color: var(--accent-orange);
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(252, 163, 17, 0.4);
    /* REMOVED transform: scale(1.05); to stop it from getting too big */
    border-width: 3px; /* Thicker border to show selection */
}

.radio-label:has(input:checked) span { color: #ffffff; }

/* Selected State */
.radio-label:has(input:checked) {
    background-color: var(--accent-orange);
    border-color: var(--accent-orange);
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(252, 163, 17, 0.4);
    transform: scale(1.05);
}

.radio-label:has(input:checked) span { color: #ffffff; }

/* --- Action Buttons (Main) --- */
/* We specify .btn here to avoid conflict with .btn-vibe */
#join-form .btn, #success-message .btn, .btn-load-more { 
    display: inline-block;
    background-color: var(--accent-orange);
    color: var(--white);
    font-size: 1.3rem;
    font-weight: 700;
    padding: 18px 45px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s;
    box-shadow: 0 6px 0px rgba(200, 100, 0, 0.3), var(--shadow-light);
}

#join-form .btn:hover, #success-message .btn:hover {
    background-color: #e09400;
    transform: translateY(-5px);
    box-shadow: 0 10px 0px rgba(200, 100, 0, 0.3), 0 15px 30px rgba(0, 0, 0, 0.15);
}

.btn-center { text-align: center; margin-top: 40px; }

/* --- Success Box --- */
#success-message {
    display: none;
    text-align: center;
    background: #dff9e0;
    border: 2px solid #5cb85c;
    padding: 50px;
    border-radius: 25px;
    margin-top: 40px;
}

#success-message h2 { color: #4CAF50; margin-bottom: 20px; }
#family-number { font-size: 5.5rem; font-weight: 700; color: var(--primary-penguin); margin: 20px 0; text-shadow: 4px 4px 0 var(--light-bg); }

.btn-download {
    background-color: var(--primary-penguin) !important; /* Override default orange */
    box-shadow: 0 6px 0px rgba(60, 140, 180, 0.3) !important;
}

.btn-download:hover {
    background-color: #4a9ecb !important;
}

/* --- Rookery Gallery --- */
.rookery-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 30px;
}

.penguin-member {
    background: var(--white);
    border: 2px solid var(--light-bg);
    border-radius: 25px;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.3s;
    box-shadow: var(--shadow-light);
}

.penguin-member:hover {
    transform: translateY(-10px) rotate(-2deg);
    border-color: var(--accent-yellow);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.penguin-icon {
    font-size: 5rem;
    background: var(--light-bg);
    width: 120px;
    height: 120px;
    line-height: 120px;
    border-radius: 50%;
    margin: 0 auto 20px auto;
}

.penguin-member h4 { font-size: 1.5rem; color: var(--primary-penguin); margin: 10px 0 8px 0; font-weight: 700; }
.penguin-member p { font-size: 1.05rem; color: #8da0b3; margin: 0; }

/* --- Messages --- */
#messages-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.penguin-message {
    background: var(--white);
    padding: 30px 30px 30px 40px;
    border-radius: 30px 30px 30px 5px;
    box-shadow: var(--shadow-light);
    border: 3px solid var(--light-bg);
    position: relative;
    margin: 0;
    transition: all 0.3s;
}

.penguin-message:hover {
    transform: translateY(-8px) rotate(1deg);
    border-color: var(--accent-yellow);
}

.penguin-message::before {
    content: '❝';
    font-size: 6rem;
    color: var(--light-bg);
    opacity: 0.5;
    position: absolute;
    top: -10px;
    left: 10px;
}

.penguin-message p {
    font-size: 1.15rem;
    color: var(--text-dark);
    font-weight: 600;
    position: relative;
    z-index: 1;
    font-style: italic;
}

.penguin-message cite {
    display: block;
    font-weight: 800;
    color: var(--primary-penguin);
    text-align: right;
    text-transform: uppercase;
    font-size: 0.9rem;
    position: relative;
    z-index: 1;
}

.penguin-message cite::before {
    content: '— ';
    color: var(--accent-orange);
}

/* --- 🔢 Live Counter Styles --- */
#live-counter-wrapper {
    background: rgba(255, 255, 255, 0.15);
    display: inline-block;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 700;
    margin-top: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 1.1rem;
    color: var(--white);
    animation: popIn 0.5s ease-out;
}

#total-count { color: var(--accent-yellow); font-size: 1.5rem; font-weight: 900; margin: 0 5px; }

/* --- 🐧 LOAD MORE BUTTON (Ice Blue Outline Design) --- */

.btn-load-more {
    display: inline-block;
    background-color: transparent; /* Transparent background */
    color: var(--primary-penguin); /* Blue Text */
    border: 3px solid var(--primary-penguin); /* Thick Blue Border */
    font-family: 'Quicksand', sans-serif;
    font-size: 1.1rem;
    font-weight: 800; /* Extra bold text */
    padding: 12px 45px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 5px 15px rgba(91, 179, 214, 0.15); /* Soft blue shadow */
    margin-top: 30px;
}

/* Hover Effect: Fills with Blue */
.btn-load-more:hover {
    background-color: var(--primary-penguin); /* Fills with Blue */
    color: var(--white); /* Text turns White */
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(91, 179, 214, 0.4); /* Glows */
}

/* Click Effect */
.btn-load-more:active {
    transform: translateY(1px);
    box-shadow: 0 2px 5px rgba(91, 179, 214, 0.4);
}

/* --- 📱 MOBILE RESPONSIVE FIXES 📱 --- */
@media screen and (max-width: 768px) {
    .container { width: 95%; margin: 20px auto; border-radius: 20px; }
    section { padding: 30px 20px; }
    header { padding: 40px 20px 60px; }
    header h1 { font-size: 2.5rem; }
    
    .radio-group {
        grid-template-columns: 1fr 1fr; /* 2 Columns */
        gap: 10px;
    }
    .radio-label {
        padding: 10px 5px;
        height: 80px; /* Shorter boxes */
    }
    .radio-label span {
        font-size: 0.85rem; /* Smaller text */
    }
    
    nav {
        flex-direction: column;
        gap: 10px;
        
        margin-top: -40px; /* Pull up less on mobile */
    }
    nav a {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        display: block;
        padding: 10px 20px; /* Smaller padding */
        font-size: 1rem;
    }
    
    .btn, .btn-vibe {
        padding: 12px 25px !important; /* Force smaller padding */
        font-size: 1rem !important;    /* Smaller text */
        width: 100%;                   /* Full width looks better on mobile form */
        box-sizing: border-box;        /* Prevents overflowing */
    }

    .form-group textarea { height: 100px; }
    
    #success-message {
        padding: 30px 20px !important;
        border-radius: 20px;
        margin-top: 20px;
    }
    #success-message h2 {
        font-size: 1.6rem !important;
    }
    #family-number {
        font-size: 3rem !important; /* Smaller number so it fits */
        margin: 15px 0;
    }

    /* ✅ NEW: LOADER TEXT FIX */
    #page-loader p.loading-text {
        font-size: 1.1rem !important; /* Smaller size to fit screen */
        padding: 0 40px; /* Add horizontal padding to prevent wrapping on the edges */
        line-height: 1.5; /* Better line spacing */
    }
    /* Specific fix for the Download Button to stop overflow */
    .btn-download {
        width: 100%;
        padding: 12px 10px !important; /* Tight padding */
        font-size: 0.95rem !important; /* Fit the long text */
        white-space: normal; /* Allow text to wrap if needed */
        line-height: 1.4;
        margin-top: 15px;
    }
}


/* --- 🐧 ANIMATIONS --- */
@keyframes popIn { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes waddle { 0% { transform: rotate(-10deg); } 100% { transform: rotate(10deg); } }
@keyframes blink { 0%, 90%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
@keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } }
@keyframes fall { to { transform: translateY(105vh); } }


/* --- ❄️ SNOWFALL EFFECT (Fixed Z-Index) ❄️ --- */
.snowflake {
    position: fixed;
    top: -10px;
    z-index: 9999; /* TOP LAYER */
    color: #fff;
    font-size: 1em;
    font-family: Arial;
    text-shadow: 0 0 1px #000;
    user-select: none;
    pointer-events: none;
    animation: fall linear forwards;
}

/* --- 🐧 FULL PAGE LOADER --- */
#page-loader {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--light-bg);
    z-index: 10000; /* HIGHEST LAYER */
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    transition: opacity 0.5s ease-out;
}
.penguin-loader {
    position: relative; width: 80px; height: 80px;
    background-color: var(--primary-penguin);
    border-radius: 60% 60% 50% 50%;
    margin-bottom: 20px;
    animation: waddle 0.6s infinite alternate ease-in-out;
}
.penguin-loader::after { content: ''; position: absolute; bottom: 5px; left: 15px; width: 50px; height: 45px; background: white; border-radius: 50% 50% 45% 45%; }
.penguin-loader::before { content: ''; position: absolute; top: 28px; left: 32px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 12px solid var(--accent-orange); z-index: 2; }
.eye-left, .eye-right { position: absolute; top: 22px; width: 8px; height: 8px; background: var(--text-dark); border-radius: 50%; z-index: 2; animation: blink 3s infinite; }
.eye-left { left: 22px; } .eye-right { right: 22px; }
.loading-text { font-weight: 700; color: var(--primary-penguin); font-size: 1.2rem; letter-spacing: 2px; animation: pulse 1.5s infinite; }

/* --- 🍅 PENGUIN FOCUS TIMER STYLES --- */

#timer-section {
    text-align: center;
    background: #fdfefe;
}

.timer-container {
    background: var(--white);
    border: 2px solid var(--light-bg);
    border-radius: 30px;
    padding: 40px;
    max-width: 500px;
    margin: 0 auto;
    box-shadow: var(--shadow-light);
    transition: transform 0.3s;
}

.timer-container:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-deep);
}

#timer-status {
    font-size: 1.5rem;
    color: var(--text-dark);
    margin-bottom: 10px;
    font-weight: 700;
}

#timer-display {
    font-size: 5rem;
    font-weight: 900;
    color: var(--primary-penguin);
    font-family: 'Quicksand', sans-serif; /* Monospaced feel */
    margin: 10px 0 30px 0;
    text-shadow: 2px 2px 0 var(--light-bg);
}

/* Buttons */
.timer-controls {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
}

.btn-timer {
    background: var(--accent-orange);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 0 #d68b00;
}

.btn-timer:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #d68b00;
}

.btn-timer-outline {
    background: transparent;
    color: #8da0b3;
    border: 2px solid #8da0b3;
    padding: 12px 30px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-timer-outline:hover {
    border-color: var(--primary-penguin);
    color: var(--primary-penguin);
}

/* Modes (Focus / Break) */
.timer-modes {
    display: flex;
    justify-content: center;
    gap: 20px;
    border-top: 2px dashed var(--light-bg);
    padding-top: 20px;
}

.mode {
    cursor: pointer;
    font-weight: 600;
    color: #aaa;
    transition: 0.3s;
}

.mode:hover { color: var(--primary-penguin); }

.mode.active {
    color: var(--primary-penguin);
    font-weight: 800;
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-decoration-color: var(--accent-yellow);
}

/* --- 📉 BEAUTIFUL PRO FOOTER STYLES 📉 --- */

.site-footer {
    text-align: center;
    margin-top: 80px;
    padding: 60px 20px 40px;
    /* Ice Gradient Background */
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.8));
    border-top: 3px dashed #dcebf5; /* Cute dashed border */
    position: relative;
}

/* Social Buttons Wrapper */
.footer-socials {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

/* Base Button Style (The "Ice" Look) */
.social-btn {
    text-decoration: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 1rem;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    border: 2px solid transparent; /* Placeholder for border */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* Soft shadow */
}

/* --- YouTube Button Styling --- */
.social-btn.youtube {
    color: #ff0000;
    border-color: #ff0000;
}

.social-btn.youtube:hover {
    background-color: #ff0000;
    color: white;
    box-shadow: 0 8px 20px rgba(255, 0, 0, 0.3); /* Red Glow */
    transform: translateY(-5px);
}

/* --- Instagram Button Styling --- */
.social-btn.instagram {
    color: #c13584; /* Insta Pink */
    border-color: #c13584;
}

.social-btn.instagram:hover {
    /* Insta Gradient */
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(193, 53, 132, 0.4); /* Pink Glow */
    transform: translateY(-5px);
}

/* --- Footer Text Styles --- */
.visit-text {
    font-weight: 700;
    color: var(--text-dark);
    font-size: 1.1rem;
    margin-bottom: 15px;
    background: rgba(255, 255, 255, 0.6);
    display: inline-block;
    padding: 8px 20px;
    border-radius: 20px;
}

.footer-bottom p {
    margin: 5px 0;
    color: #8da0b3;
    font-size: 0.9rem;
    font-weight: 600;
}

/* --- ⬆️ FLOATING BACK TO TOP BUTTON --- */
#btn-back-to-top {
    display: none; /* Hidden by default */
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 100;
    border: none;
    outline: none;
    background-color: var(--primary-penguin);
    color: white;
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.5rem;
    box-shadow: 0 5px 15px rgba(91, 179, 214, 0.4);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* Centering the arrow */
    display: flex;
    align-items: center;
    justify-content: center;
}

#btn-back-to-top:hover {
    background-color: var(--accent-orange);
    transform: translateY(-5px) scale(1.1); /* Pop effect */
    box-shadow: 0 8px 20px rgba(252, 163, 17, 0.4);
}

/* --- 🎲 NAME GENERATOR STYLES --- */

.input-wrapper {
    display: flex;
    gap: 10px; /* Space between input and button */
    align-items: stretch; /* Make them same height */
}

/* Make the input take up all available space */
.input-wrapper input {
    flex-grow: 1;
}

/* Style the Dice Button */
/* Style the Dice Button (FIXED ALIGNMENT) */
#btn-generate-name {
    background-color: var(--accent-yellow);
    border: none; /* ✅ FIX 2: Removed border to use input's border space */
    border-radius: 15px;
    font-size: 1.5rem;
    padding: 0 15px; /* ✅ Tighter padding */
    height: 50px; /* ✅ FIX 3: Explicit height to match the input */
    flex-shrink: 0; /* Ensures button doesn't shrink */
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Note: Ensure the `input-wrapper` is set to `align-items: center` to vertically align the items, which is already present in the shared CSS logic. */

#btn-generate-name:hover {
    background-color: var(--accent-orange);
    transform: rotate(15deg) scale(1.1); /* Fun spin effect */
    box-shadow: 0 5px 15px rgba(252, 163, 17, 0.4);
}

#btn-generate-name:active {
    transform: scale(0.9);
}

/* Dark Mode Fix (If you added Dark Mode) */
body.dark-mode #btn-generate-name {
    background-color: #334155;
    border-color: var(--accent-yellow);
}
body.dark-mode #btn-generate-name:hover {
    background-color: var(--accent-yellow);
}

/* --- 🐧 FOUNDERS GRID STYLES --- */
.founders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.founder-card {
    background: #fdfefe;
    border: 2px solid var(--light-bg);
    border-radius: 25px;
    padding: 30px;
    text-align: center;
    transition: transform 0.3s;
}

.founder-card:hover {
    transform: translateY(-10px);
    border-color: var(--accent-yellow);
    box-shadow: var(--shadow-light);
}

.founder-icon {
    font-size: 4rem;
    margin-bottom: 15px;
    background: var(--light-bg);
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
}

.founder-card h3 {
    margin: 10px 0 5px;
    color: var(--primary-penguin);
}

.badge {
    background: var(--accent-orange);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 15px;
}

/* --- 🗺️ ROADMAP STYLES --- */
.roadmap {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

/* The Vertical Line */
.roadmap::before {
    content: '';
    position: absolute;
    left: 24px; /* Adjust based on dot size */
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--light-bg);
    border-radius: 10px;
}

.roadmap-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    position: relative;
}

.dot {
    width: 50px;
    height: 50px;
    background: var(--white);
    border: 3px solid var(--light-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    z-index: 2; /* Sit on top of line */
    flex-shrink: 0;
}

.roadmap-item.completed .dot {
    border-color: #27ae60;
    background: #eafaf1;
}

.roadmap-item .content {
    background: #f8fbfe;
    padding: 20px;
    border-radius: 20px;
    width: 100%;
    border: 1px solid var(--light-bg);
}

.roadmap-item h4 {
    margin: 0 0 5px 0;
    color: var(--text-dark);
}

.roadmap-item p {
    margin: 0;
    font-size: 0.95rem;
    color: #777;
}

/* --- 🎨 FAN ART GALLERY STYLES --- */

.art-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 25px;
    margin-bottom: 60px;
}

/* The Frame */
.art-card {
    background: var(--white);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-light);
    transition: all 0.3s ease;
    border: 3px solid var(--light-bg);
    position: relative;
}

.art-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-deep);
    border-color: var(--accent-yellow);
}

/* The Image */
.art-card img {
    width: 100%;
    height: 250px; /* Fixed height for uniformity */
    object-fit: cover; /* Ensures image fills the box nicely */
    display: block;
    transition: transform 0.5s;
}

.art-card:hover img {
    transform: scale(1.05);
}

/* The Info Bar (Artist Name + Download) */
.art-info {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--white);
    position: relative;
    z-index: 2;
}

.artist-tag {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-dark);
    background: var(--light-bg);
    padding: 5px 10px;
    border-radius: 10px;
}

/* Small Download Button */
.btn-download-small {
    background: var(--accent-orange);
    color: white;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 15px;
    font-weight: 700;
    font-size: 0.8rem;
    transition: 0.2s;
    text-align: center;
}

.btn-download-small:hover {
    background: #e09400;
    transform: scale(1.1);
}

/* --- 📮 SUBMIT ART BOX --- */
.submit-art-box {
    text-align: center;
    background: #fcfdfe;
    border: 2px dashed var(--primary-penguin);
    border-radius: 25px;
    padding: 40px;
    margin-top: 40px;
}

.submit-art-box h3 {
    margin: 0 0 10px 0;
    color: var(--primary-penguin);
    font-size: 1.8rem;
}

.submit-art-box p {
    margin-bottom: 25px;
    color: #777;
}

/* --- 🖼️ LIGHTBOX (POPUP) STYLES --- */
.lightbox {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 10000; /* On top of everything */
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9); /* Black background */
}

.lightbox-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 800px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(255,255,255,0.2);
    animation: zoom 0.3s;
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* Close Button */
.close-lightbox {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.close-lightbox:hover,
.close-lightbox:focus {
    color: var(--accent-orange);
    text-decoration: none;
    cursor: pointer;
}

/* Caption Text */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
    font-family: 'Quicksand', sans-serif;
    font-size: 1.2rem;
}

/* --- 🎨 WALLPAPER GALLERY STYLES --- */

/* 🆕 NEW ISOLATION CLASS: Use this wrapper to contain the grid for consistent padding */
.wallpaper-grid-wrapper {
    padding: 20px; /* Add padding around the grid for visual space */
}

/* Filter Buttons */
.wallpaper-filters {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
}

.filter-btn {
    background: transparent;
    border: 2px solid var(--light-bg);
    padding: 8px 20px;
    border-radius: 20px;
    cursor: pointer;
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    color: #8da0b3;
    transition: 0.3s;
}

.filter-btn:hover, .filter-btn.active {
    background: var(--primary-penguin);
    color: white;
    border-color: var(--primary-penguin);
    transform: translateY(-2px);
}

/* The Grid */
.wallpaper-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

/* The Image Card */
.wallpaper-item {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: var(--shadow-light);
    cursor: pointer;
    transition: 0.3s;
    background: #fff;
    aspect-ratio: 9/16; /* Phone shape by default */
    border: 3px solid var(--white); /* Gives a clean white border/frame effect */
    aspect-ratio: 1 / 1; /* ✅ NEW: Forces all cards to be square */
}

.wallpaper-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

/* Hover Overlay (Fix: Align items to bottom instead of center) */
.wallpaper-item .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(44, 62, 80, 0.85); /* Darker overlay */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* FIX: Pushes content to the bottom */
    align-items: flex-start; /* Aligns text/buttons to the left */
    padding: 20px; /* New Padding */
    opacity: 0; /* Hidden by default */
    transition: 0.3s;
}

.wallpaper-item:hover .overlay {
    opacity: 1; /* Show on hover */
}

.wallpaper-item:hover img {
    transform: scale(1.05); /* Slightly less aggressive zoom */
}

.wallpaper-item h3 {
    color: white;
    margin-top: 0; /* FIX: Remove margin-top */
    margin-bottom: 5px; /* Added slight margin below title */
}

/* Mini Download Button (Same styles, just applied with new context) */
.btn-download-small {
    background: var(--accent-orange);
    color: white;
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 4px 0 #d68b00;
    margin-top: 5px; /* Space between title and button */
}

.btn-download-small:hover {
    transform: translateY(-2px);
    background: #e09400;
}

/* Mobile adjustments */
@media screen and (max-width: 768px) {
    .wallpaper-item.desktop {
        grid-column: span 1;
    }
}

/* --- 🗳️ ELECTION STYLES --- */
.candidate-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 30px;
    padding: 40px 0;
}

.candidate-card {
    background-color: var(--card-bg); 
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Springy transition */
    cursor: pointer;
    /* Holographic Border Effect */
    border: 1px solid var(--primary-ice); 
    box-shadow: 0 0 15px rgba(91, 179, 214, 0.2);
}

/* Hover: Scale and stronger glow */
.candidate-card:hover {
    transform: scale(1.03); 
    box-shadow: 0 0 25px rgba(91, 179, 214, 0.5);
}

.card-rank {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: var(--accent-gold);
    color: var(--deep-blue);
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 900;
    font-size: 0.9rem;
}

.candidate-icon {
    font-size: 5rem;
    margin: 10px 0 15px 0;
    /* Optional: Subtle pulse animation for the icons */
    animation: pulse-icon 2s infinite alternate;
}

.candidate-card h3 {
    font-size: 2.5rem;
    color: var(--accent-gold);
    margin: 0;
}

.candidate-card .role {
    display: block;
    color: var(--primary-ice); 
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 20px;
}

.campaign-pitch {
    font-size: 0.9rem;
    opacity: 0.75;
    min-height: 40px; 
    margin-bottom: 25px;
}

/* --- The Vote Button --- */
.vote-btn-election {
    background: var(--primary-ice); 
    color: var(--deep-blue); 
    border: none;
    padding: 10px 25px;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.vote-btn-election:hover:not(:disabled) {
    background-color: #79c8e8; 
    transform: translateY(-2px);
}

/* Post-Vote State */
.vote-btn-election:disabled {
    background-color: #2ecc71; /* Success Green */
    color: white;
    cursor: not-allowed;
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.5);
    transform: none;
}


/* ================================================= */
/* LIVE RESULTS DISPLAY (NEW STYLE) */
/* ================================================= */

#results-display {
    padding: 30px;
    background-color: var(--card-bg);
    border-radius: 12px;
    border: 1px solid rgba(91, 179, 214, 0.3);
    margin-top: 60px;
}

.result-bar-container {
    margin-bottom: 30px;
}

.bar-label {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--primary-ice);
    font-size: 1.1rem;
}

.progress-bar {
    background-color: rgba(91, 179, 214, 0.1); /* Transparent light background */
    border-radius: 5px;
    height: 30px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.progress-fill {
    height: 100%;
    /* Use a gradient for a cool "power bar" effect */
    background: linear-gradient(90deg, var(--primary-ice), #00d4ff); 
    width: 0%; 
    transition: width 1s cubic-bezier(0.23, 1, 0.32, 1); /* Smooth and fast fill */
    display: flex;
    align-items: center;
    padding-left: 10px;
    font-weight: 700;
    color: var(--deep-blue);
    box-shadow: 0 0 8px rgba(91, 179, 214, 0.5); /* Glowing fill */
}

/* Specific bar colors (Optional, for visual distinction) */
#tenshi-fill { background: linear-gradient(90deg, #e74c3c, #c0392b); }
#dubu-fill { background: linear-gradient(90deg, #3498db, #2980b9); }
#echo-fill { background: linear-gradient(90deg, #2ecc71, #27ae60); }

/* ================================================= */
/* RECENT VOTERS (LOFI ACTIVITY FEED) */
/* ================================================= */

.recent-voters-section {
    margin-top: 60px;
}

.recent-voters-section h2 {
    text-align: center;
    color: var(--lofi-dark);
    margin-bottom: 20px;
    font-size: 1.8rem;
}

#voters-list {
    /* Soft, friendly container */
    background-color: #FFFFFF; 
    
    /* NEW: Clean, thin solid border */
    border: 1px solid rgba(0, 0, 0, 0.15); 
    
    border-radius: 10px;
    padding: 15px 25px;
    max-width: 600px; 
    margin: 0 auto;
    
    /* Reduced shadow */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.voter-entry {
    display: flex;
    justify-content: center; 
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Very light separator */
    font-size: 0.95rem;
    color: var(--lofi-dark);
    font-weight: 500;
}

.voter-entry:last-child {
    border-bottom: none;
}

.voter-name {
    color: var(--lofi-blue); /* Muted Blue for the username */
    font-weight: 700;
    margin-right: 5px;
}

.candidate-voted {
    color: var(--lofi-gold); /* Warm Gold for the candidate */
    font-weight: 700;
    margin-left: 5px;
}

.fallback-text p {
    margin: 0;
    padding: 10px 0;
    opacity: 0.5 !important; 
    font-style: italic;
}

/* --- 🤝 PERSISTENT IDENTITY MODAL STYLES --- */

#welcome-modal {
    display: none; /* JS will show this when needed */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000; /* Sabse upar */
    background: rgba(var(--light-bg), 0.95);
    backdrop-filter: blur(5px);
    padding-top: 5%;
}

.modal-content {
    background: var(--white);
    max-width: 450px;
    margin: 0 auto;
    padding: 40px;
    border-radius: 25px;
    box-shadow: var(--shadow-deep);
    text-align: center;
    border: 3px solid var(--primary-penguin);
    animation: popIn 0.4s ease-out;
}

.modal-content h3 {
    color: var(--accent-orange);
    font-size: 2rem;
    margin-bottom: 20px;
}

/* Reusing existing form styles for modal inputs */
.modal-content input {
    width: 100%;
    padding: 15px; 
    margin-bottom: 10px; /* ✅ FIX 1: Remove bottom margin to prevent spacing issues */
    border: 2px solid var(--light-bg);
    border-radius: 15px; /* More rounded input fields */
    box-sizing: border-box;
    /* Note: We removed width: 100% and will handle width via flex-grow */
}

/* Let's Go Button (Match main form button style) */
#btn-save-identity {
    /* Reusing .btn styles but ensuring full width */
    background-color: var(--accent-orange);
    color: var(--white);
    font-weight: 700;
    padding: 15px 45px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 0px rgba(200, 100, 0, 0.3), var(--shadow-light);
    transition: all 0.2s ease-out;
}

#btn-save-identity:hover {
    background-color: #e09400;
    transform: translateY(-3px);
    box-shadow: 0 10px 0px rgba(200, 100, 0, 0.3), 0 15px 30px rgba(0, 0, 0, 0.15);
}

/* This is a temporary style block - ideally this would go into your style.css */
        #search-controls {
            margin-bottom: 30px; 
            padding: 20px; 
            background-color: #f0f8ff; 
            border-radius: 10px; 
            border: 1px solid #cce7ff;
        }
        #search-controls div {
            display: flex; 
            gap: 15px; 
            flex-wrap: wrap;
        }
        #search-controls input, #search-controls select, #search-controls button {
            padding: 10px; 
            border-radius: 5px; 
            border: 1px solid #ccc; 
        }
        #member-search {
            flex-grow: 1; 
            min-width: 200px;
        }
        #btn-reset-filters {
            background-color: #fca311; 
            color: white; 
            border: none; 
            cursor: pointer;
        }
        .penguin-member {
            /* Ensure member cards still look good in the gallery */
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            text-align: center;
        }

        .election-banner {
    background: var(--accent-orange); /* Vibrant Orange */
    color: var(--text-dark); /* Dark text for contrast */
    text-align: center;
    padding: 10px 0;
    font-weight: 800;
    font-size: 1.1rem;
    position: relative; 
    z-index: 50; /* Sits above the container's z-index (10) */
    
    /* Animation: Makes the banner gently glow/pulse */
    animation: pulseGlow 2s infinite; 
}

.election-banner a {
    color: var(--text-dark); 
    text-decoration: underline;
    font-weight: 900;
    margin-left: 10px;
    transition: 0.3s;
}

.election-banner a:hover {
    color: var(--white); /* White text on hover for contrast */
}

/* Keyframes for the gentle pulse animation */
@keyframes pulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(255, 170, 0, 0.4); }
    70% { box-shadow: 0 0 0 5px rgba(255, 170, 0, 0); } /* Expands shadow */
    100% { box-shadow: 0 0 0 0 rgba(255, 170, 0, 0); }
}

/* Mobile Fix: Ensure it fits the screen width */
@media screen and (max-width: 768px) {
    .election-banner {
        font-size: 0.9rem;
        padding: 8px 10px;
    }
}

/* --- 📊 ANALYTICS DASHBOARD STYLES --- */
.analytics-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.stat-card {
    background: var(--white);
    border: 2px solid var(--light-bg);
    border-radius: 20px;
    padding: 30px;
    box-shadow: var(--shadow-light);
}

.stat-card h3 {
    margin-top: 0;
    color: var(--text-dark);
    font-size: 1.5rem;
}

.stat-number {
    font-size: 3rem;
    font-weight: 900;
    color: var(--primary-penguin);
    margin-top: 10px;
}

/* Ensure the breakdown lists look clean */
#os-breakdown, #browser-breakdown, #resolution-breakdown, #top-countries-breakdown {
    text-align: left;
    margin-top: 15px;
}

.final-results-announcement {
    /* Use a cool-toned background with an accent border */
    background: linear-gradient(180deg, #ecf0f1 0%, #ffffff 100%);
    border: 4px solid #fca311; /* Golden Accent */
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.winner-badge {
    margin-bottom: 20px;
}

.title-victory {
    font-size: 2rem;
    color: #fca311;
    text-transform: uppercase;
    letter-spacing: 5px;
    margin: 5px 0;
}

.emoji-large {
    font-size: 5rem;
    display: block;
    animation: bounce 0.5s infinite alternate; /* Requires a simple CSS keyframe */
}

.winner-name {
    font-size: 4rem;
    color: #3498db; /* Blue for 'ice' and dominance */
    margin: 5px 0 10px 0;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.role-winner {
    font-size: 1.2rem;
    font-weight: 600;
    color: #2ecc71; /* Green for success/freshness */
    margin-bottom: 30px;
}

.percentage-bar-wrapper {
    width: 80%;
    max-width: 400px;
    height: 15px;
    background-color: #ddd;
    border-radius: 10px;
    margin: 10px auto;
    overflow: hidden;
}

.percentage-fill {
    height: 100%;
    background: linear-gradient(90deg, #fca311, #ffda6a);
    border-radius: 10px;
    transition: width 1s ease-out; /* Add animation when results load */
}

.tally-note {
    text-align: center;
    font-style: italic;
    color: #7f8c8d;
    padding: 10px 0;
}

@keyframes bounce {
    from { transform: translateY(0px); }
    to { transform: translateY(-10px); }
}