/* ---- GLOBAL STYLES & VARIABLES ---- */
:root {
    --background-color: #0d0d0f;
    --text-color: #f0f0f0;
    --primary-purple: #8A2BE2;
    --font-main: 'Poppins', sans-serif;
    --font-emphasis: 'Playfair Display', serif;
    --secondary-cyan: #00FFFF;
    --gold-color: #FFD700;
}
html { overflow-x: hidden; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-main); background-color: var(--background-color); color: var(--text-color); overflow-x: hidden; }
.blob-wrapper { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; }
.blob { position: absolute; background: linear-gradient(45deg, var(--primary-purple), var(--secondary-cyan)); border-radius: 50%; filter: blur(120px); opacity: 0.1; }
.blob1 { width: 500px; height: 500px; top: 10%; left: -250px; }
.blob2 { width: 400px; height: 400px; top: 60%; right: -250px; }
.hero-container { position: relative; height: 100vh; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); z-index: 2; }
.hero-background { height: 100%; width: 100%; background-size: cover; background-position: center; background-image: url('bg-hero.jpg'); position: relative; display: flex; justify-content: center; align-items: center; }
.parallax-logo { width: 150px; }
.hero-content { position: absolute; bottom: 0; left: 0; width: 100%; height: 60%; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 5% 15vh; text-align: center; background: linear-gradient(-5deg, var(--background-color) 25%, rgba(13, 13, 15, 0.7) 60%, transparent 80%); transform: translateY(2px); }
.main-headline { font-size: 3rem; max-width: 700px; margin: 0 auto; }
.main-content { position: relative; z-index: 1; margin-top: -10vh; background-color: var(--background-color); }
.world-wrapper { position: relative; background-size: cover; background-position: center; background-attachment: fixed; clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%); }
.bg-world1 { background-image: url('bg-world1.jpg'); }
section { padding: 150px 8%; width: 100%; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; justify-content: center; align-items: center; }
.counter-section { text-align: center; display: flex; flex-direction: column; align-items: center; }
.counter-section .container { flex-direction: column; }
.section-left { justify-content: space-between; }
.section-right { justify-content: space-between; flex-direction: row-reverse; }
.community-section .container { flex-direction: column; max-width: 800px; }
.world-wrapper section { background: transparent; min-height: 80vh; padding: 100px 8%; }
.anim-on-scroll { opacity: 0; }
.emphasis-font { font-family: var(--font-emphasis); font-style: italic; font-weight: 400; font-size: 1.2em; color: var(--secondary-cyan); }
@keyframes gradient-flow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.animated-gradient-text { background: linear-gradient(90deg, var(--primary-purple), var(--secondary-cyan), var(--primary-purple)); background-size: 200% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; animation: gradient-flow 5s ease-in-out infinite; font-size: 2.5rem; margin-bottom: 1rem; }
.counter-wrapper { display: flex; justify-content: center; gap: 15px; margin-bottom: 20px; }
.digit-box { background-color: white; color: var(--background-color); padding: 15px 20px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
.digit-box span { font-size: 4rem; font-weight: 700; }
.counter-text { font-size: 1.2rem; font-weight: 600; margin-top: 20px; }
.subtitle { font-size: 1.1rem; opacity: 0.8; }
.email-form { margin-top: 30px; display: flex; justify-content: center; gap: 10px; width: 100%; max-width: 500px; }
.comment-form { display: flex; flex-direction: column; gap: 15px; margin-top: 30px; width: 100%; }
input, textarea { font-family: var(--font-main); width: 100%; padding: 15px; border: 2px solid #333; border-radius: 8px; background-color: #2a2a2a; color: var(--text-color); font-size: 1rem; }
textarea { resize: none; min-height: 120px; }
button { font-family: var(--font-main); font-weight: 600; font-size: 1rem; padding: 15px 30px; border-radius: 8px; border: 2px solid var(--primary-purple); background-color: transparent; color: var(--primary-purple); cursor: pointer; transition: all 0.3s ease; }
button:hover { background-color: var(--primary-purple); color: white; box-shadow: 0 0 20px var(--primary-purple); transform: translateY(-3px); }
.text-content { width: 50%; text-align: left; }
.section-right .text-content { text-align: right; }
.joke-container { width: 45%; height: 350px; position: relative; display: flex; justify-content: center; align-items: center; }
.joke-text { position: relative; font-size: 1.4rem; font-style: italic; opacity: 0.8; max-width: 300px; text-align: center; transform: rotate(-4deg); }
.emoji { position: absolute; font-size: 1rem; user-select: none; }
.emoji1 { font-size: 2.2rem; top: 10%; left: 15%; transform: rotate(15deg); }
.emoji2 { font-size: 1.7rem; top: 20%; right: 10%; transform: rotate(-10deg); }
.emoji3 { font-size: 2.7rem; bottom: 15%; left: 20%; transform: rotate(-20deg); }
.emoji4 { font-size: 2rem; bottom: 25%; right: 18%; transform: rotate(5deg); }
.emoji5 { font-size: 2.4rem; top: 5%; left: 25%; transform: rotate(-15deg); }
.emoji6 { font-size: 2rem; top: 20%; right: 5%; transform: rotate(10deg); }
.emoji7 { font-size: 1.7rem; bottom: 10%; left: 15%; transform: rotate(25deg); }
.emoji8 { font-size: 3rem; bottom: 20%; right: 25%; transform: rotate(-5deg); }
.dual-window-section { padding-top: 50px; padding-bottom: 150px; }
.community-content-wrapper { max-width: 1600px; margin: 0 auto; display: flex; justify-content: center; gap: 40px; align-items: flex-start; }
.window-container { flex: 1; max-width: 750px; }
.window-title { text-align: center; margin-bottom: 25px; font-size: 1.8rem; font-family: var(--font-emphasis); color: var(--secondary-cyan); font-weight: 400; }
.comments-window, .donors-window { width: 100%; height: 70vh; background-image: url('bg-world2.jpg'); background-size: cover; background-position: center; background-attachment: fixed; border-radius: 20px; border: 2px solid rgba(255, 255, 255, 0.1); padding: 20px; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 20px; }
.comments-window::-webkit-scrollbar, .donors-window::-webkit-scrollbar { width: 8px; }
.comments-window::-webkit-scrollbar-track, .donors-window::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); border-radius: 4px; }
.comments-window::-webkit-scrollbar-thumb, .donors-window::-webkit-scrollbar-thumb { background: var(--primary-purple); border-radius: 4px; }
.comments-window::-webkit-scrollbar-thumb:hover, .donors-window::-webkit-scrollbar-thumb:hover { background: var(--secondary-cyan); }
.comment-item, .donor-item { background: rgba(13, 13, 15, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 20px; border-radius: 15px; display: flex; justify-content: space-between; align-items: center; gap: 15px; border: 2px solid transparent; transition: transform 0.3s ease-in-out, border-color 0.3s ease-in-out; flex-shrink: 0; }
.comment-item:hover { transform: scale(1.03); border-color: rgba(255, 255, 255, 0.8); }
.donor-item:hover { transform: scale(1.03); border-color: var(--gold-color); }

.comment-content, .donor-content {
    min-width: 0;
}

/* MODIFICATION: Added word-wrap to the h3 tag for usernames */
.comment-content h3, .donor-content h3 { 
    color: var(--secondary-cyan); 
    margin-bottom: 8px; 
    font-size: 1.1rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.comment-content p, .donor-content p { 
    font-size: 0.95rem; 
    line-height: 1.6; 
    opacity: 0.9; 
    word-wrap: break-word; 
    overflow-wrap: break-word; 
}
.donation-amount { font-size: 1.5rem; font-weight: 700; color: var(--gold-color); text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); margin-left: 20px; }
.comment-actions { display: flex; flex-direction: column; align-items: center; gap: 5px; user-select: none; }
.like-count { font-weight: 600; color: var(--text-color); }
.star-container { position: relative; }
.star-button { width: 35px; height: 35px; cursor: pointer; transition: transform 0.2s ease-out; }
.star-button:hover { transform: scale(1.15); }

@keyframes star-pop {
    0% { transform: scale(1) rotate(0deg); }
    30% { transform: scale(0.85) rotate(-15deg); }
    60% { transform: scale(1.5) rotate(15deg); }
    80% { transform: scale(0.9) rotate(-15deg); }
    100% { transform: scale(1) rotate(0deg); }
}
.star-button.popping { animation: star-pop 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

footer { padding: 40px 20px; text-align: center; opacity: 0.6; }
@media (max-width: 992px) { .community-content-wrapper { flex-direction: column; align-items: center; gap: 60px; } .window-container { width: 100%; max-width: 700px; } section { padding-left: 5%; padding-right: 5%; } }
@media (max-width: 600px) { .main-headline { font-size: 2.2rem; } .animated-gradient-text { font-size: 2rem; } .section-left, .section-right { flex-direction: column; gap: 40px; } .text-content, .joke-container { width: 100%; text-align: center !important; } .digit-box span { font-size: 3rem; } .counter-wrapper { gap: 10px; } .comments-window, .donors-window { height: 60vh; } .window-title { font-size: 1.5rem; } .blob1 { left: -350px; width: 400px; height: 400px; } .blob2 { right: -300px; width: 300px; height: 300px; } .world-wrapper .info-section { padding-top: 150px; } }

.input-with-counter {
    display: flex;
    flex-direction: column;
}
.char-counter {
    font-size: 0.8rem;
    color: #888;
    text-align: right;
    margin-top: 4px;
}
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(13, 13, 15, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 1000; display: none; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease-in-out; }
.modal-content { background: var(--background-color); border: 2px solid var(--primary-purple); border-radius: 20px; padding: 40px; width: 90%; max-width: 500px; position: relative; box-shadow: 0 0 40px rgba(138, 43, 226, 0.5); transform: scale(0.9); transition: transform 0.3s ease-in-out; }
.close-button { position: absolute; top: 15px; right: 20px; font-size: 2rem; color: var(--text-color); cursor: pointer; transition: transform 0.2s, color 0.2s; }
.close-button:hover { color: var(--primary-purple); transform: rotate(90deg); }
.modal-title { text-align: center; margin-bottom: 10px; font-size: 1.8rem; }
.modal-subtitle { text-align: center; opacity: 0.8; margin-bottom: 30px; }
.modal-form { display: flex; flex-direction: column; gap: 15px; }
.modal-button { margin-top: 10px; font-size: 1.1rem; padding: 18px; border-color: var(--gold-color); color: var(--gold-color); }
.modal-button:hover { background-color: var(--gold-color); color: var(--background-color); box-shadow: 0 0 20px var(--gold-color); }