/* CSS Variables */
:root {
    --card-background: #ffffff;
    --border-color: #e5e5e5;
    --accent-color: #ff6b6b;
    --text-muted: #666;
    --primary-color: #333;
    --background-color: #f0f0f0;
}

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

body {
    font-family: 'Inter', sans-serif;
    background: #e0e0e0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    gap: 20px;
}

.window, .dashboard {
    background: #f0f0f0;
    border-radius: 6px;
    width: 100%;
    max-width: 400px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.dashboard {
    max-width: 900px;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #e6e6e6;
    padding: 15px 20px;
    border-bottom: 1px solid #d1d1d1;
    position: relative;
    overflow: visible;
}

.title-buttons {
    display: flex;
    gap: 10px;
}

.title-bar span {
    font-size: 13px;
    color: #333;
    font-weight: 500;
}

/* Buttons in title bar */
.title-bar .button {
    background: #d9d9d9;
    color: #333;
    border: 1px solid #ccc;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: auto;
    font-size: 0.9rem;
}

.title-bar .button:hover {
    background: #c9c9c9;
    border-color: #aaa;
    transform: translateY(-1px);
}

/* Back button specific styling */
.back-button {
    background: #ff6b6b;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: auto;
    font-size: 0.9rem;
}

.back-button:hover {
    background: #e55353;
    transform: translateY(-1px);
}

.window-content {
    padding: 24px;
    text-align: center;
}

.window-content2 {
    padding: 24px;
    text-align: center;
    height:570px;
}
.dashboard-content {
    padding: 24px;
    overflow-y: auto;
    flex-grow: 1;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: white;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #e5e5e5;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.stat-card h3 {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

.stat-card p {
    margin: 0;
    font-size: 24px;
    color: #333;
    font-weight: 600;
}

.chart-section {
    margin-top: 30px;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.chart-settings {
    position: relative;
}

.settings-button {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: #666;
}

.settings-button:hover {
    background: #f5f5f5;
    border-color: #ccc;
    color: #333;
}

.settings-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    min-width: 280px;
    display: none;
}

.settings-dropdown.show {
    display: block;
}

/* Review Section Styles */
.review-section {
    background: white;
    border-radius: 12px 12px 0 0;
    padding: 25px;
    border-top: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

/* Review section styles */

.review-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.user-info-container {
    display: flex;
    gap: 15px;
    margin-bottom: 5px;
}

.username-container, .country-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.username-container label, .country-container label {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 500;
}

#reviewUsername {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

#reviewUsername:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.2);
}

.country-selection {
    display: flex;
    align-items: center;
    gap: 8px;
}

#selectedCountryFlag {
    width: 24px;
    height: 18px;
    border-radius: 2px;
    overflow: hidden;
    display: inline-block;
    background-color: #f0f0f0;
}

#reviewCountry {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

#reviewCountry:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.2);
}

.button.small {
    padding: 6px 10px;
    font-size: 12px;
}

/* Reviews container styles */
.reviews-container {
    margin-top: 55px;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
}

.reviews-heading {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 25px;
    color: var(--primary-color);
}

.review-item {
    background: #f9f9f9;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    width: 835px;
    margin-left: -25px;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease;
}

.review-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.review-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.review-username {
    font-weight: 600;
    font-size: 14px;
    color: var(--primary-color);
}

.review-country {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

.review-text {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 10px;
    color: var(--primary-color);
}

.review-rating {
    display: flex;
    gap: 3px;
    margin-bottom: 8px;
}

.review-rating .star {
    font-size: 16px;
}

.review-date {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}

.reviews-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
    color: var(--text-muted);
}

.reviews-loading .spinner {
    margin-bottom: 10px;
}

#reviewText {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    resize: vertical;
    font-size: 14px;
}

#reviewText:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.2);
}

.rating-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rating-container span {
    font-size: 14px;
    color: var(--text-muted);
}

.star-rating {
    display: flex;
    gap: 5px;
}

.star {
    font-size: 24px;
    color: #ddd;
    cursor: pointer;
    transition: color 0.2s ease;
}

.star:hover,
.star.active {
    color: #ffcc00;
}

#submitReview {
    align-self: flex-start;
    margin-top: 10px;
}

.settings-section {
    margin-bottom: 16px;
}

.settings-section:last-child {
    margin-bottom: 0;
}

.settings-section h4 {
    margin: 0 0 8px 0;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.activity-filters,
.time-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.activity-filter,
.time-filter {
    padding: 6px 12px;
    border: 1px solid #e0e0e0;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    transition: all 0.2s ease;
    color: #666;
}

.activity-filter:hover,
.time-filter:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

.activity-filter.active,
.time-filter.active {
    background: #333;
    color: white;
    border-color: #333;
}

.chart-container {
    background: white;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #e5e5e5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    position: relative;
    margin-bottom: 20px;
    height: 430px;
}

.chart-container21 {
    background: white;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #e5e5e5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    position: relative;
    margin-bottom: 20px;
    height: 530px;
}

/* Activity Heatmap specific styling */
.chart-container:has(#activityHeatmap) {
    padding: 18px 26px;
    min-height: auto;
}


.chart-container:has(#activityHeatmap) .heatmap-container {
    width: 110%;
    width: 500px;
    height: 250px;
    margin-left: 0%;
}

/* Word Cloud styling */
.word-cloud-container {
    width: 100%;
    margin-left: 0%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fafafa;
    border-radius: 8px;
    border: 1px solid #e5e5e5;
}

/* Leaderboard-specific donation container */
.leaderboard-donation {
    margin: 0 0 20px 0;
    background: #333333;
}

/* Modern Leaderboard Styling */
.leaderboard-container {
    display: none;
    padding: 20px;
    height: 100%;
    background: #f8f9fa;
    overflow-y: auto;
    cursor: pointer; /* Enable coffee cursor for leaderboard too */
}

/* Coffee cursor trail for leaderboard */
.leaderboard-container::before {
    content: '';
    position: fixed;
    width: 20px;
    height: 20px;
    background: #8B4513;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    pointer-events: none;
    z-index: 9999;
    transition: all 0.1s ease;
    box-shadow: 
        2px 2px 4px rgba(139, 69, 19, 0.3),
        inset -2px -2px 3px rgba(0, 0, 0, 0.2);
}

.leaderboard-container::after {
    content: '';
    position: fixed;
    width: 6px;
    height: 8px;
    background: #654321;
    border-radius: 0 50% 50% 0;
    transform: rotate(-45deg) translate(8px, -8px);
    pointer-events: none;
    z-index: 10000;
    transition: all 0.1s ease;
}

.leaderboard-content {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    max-width: 800px;
    margin: 0 auto;
}

.leaderboard-header {
    background: #333;
    color: white;
    padding: 24px;
    text-align: center;
}

.leaderboard-header h2 {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.5px;
}

.leaderboard-subtitle {
    margin: 0;
    font-size: 14px;
    opacity: 0.8;
    font-weight: 400;
}

.leaderboard-controls {
    padding: 16px 24px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

.view-toggle, .country-filter {
    display: flex;
    align-items: center;
    gap: 8px;
}

.view-toggle label, .country-filter label {
    font-weight: 500;
    color: #333;
    font-size: 14px;
}

.view-select, .country-select {
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.view-select:focus, .country-select:focus {
    outline: none;
    border-color: #333;
}

.leaderboard-list {
    padding: 0;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid #f1f3f4;
    transition: background-color 0.2s ease;
}

.leaderboard-item:hover {
    background: #f8f9fa;
}

.leaderboard-item:last-child {
    border-bottom: none;
}

.rank-section {
    min-width: 50px;
    text-align: center;
}

.rank {
    font-size: 16px;
    font-weight: 600;
    color: #666;
    display: inline-block;
    min-width: 40px;
}

.rank.top-rank {
    color: #333;
    font-weight: 700;
}

.user-section {
    display: flex;
    align-items: center;
    flex: 1;
    margin-left: 16px;
}

.user-avatar {
    position: relative;
    margin-right: 12px;
}

.profile-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e9ecef;
}

.profile-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #e9ecef;
}

.avatar-icon::before {
    content: "👤";
    font-size: 16px;
    color: #666;
}

.country-flag {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #e9ecef;
}

.country-flag .fi {
    font-size: 20px;
}

.user-details {
    flex: 1;
}

.username-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.username {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.user-count {
    font-size: 12px;
    color: #666;
    background: #f1f3f4;
    padding: 2px 6px;
    border-radius: 3px;
}

.flag-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 14px;
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid #ddd;
    background: #f8f9fa;
}

.flag-container .fi {
    font-size: 12px;
    line-height: 1;
}

.flag-container.no-flag {
    background: #e9ecef;
    border: 1px solid #ddd;
}

.stats-section {
    text-align: right;
    min-width: 80px;
}

.video-count {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.count {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    line-height: 1.2;
}

.label {
    font-size: 11px;
    color: #666;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Empty and Error States */
.empty-state, .error-state {
    text-align: center;
    padding: 40px 24px;
    color: #666;
}

.empty-state p, .error-state p {
    margin: 8px 0;
    font-size: 16px;
}

.empty-hint, .error-hint {
    font-size: 14px !important;
    color: #999 !important;
}

/* Country Item Specific Styles */
.country-item .user-avatar {
    margin-right: 12px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .leaderboard-container {
        padding: 10px;
    }
    
    .leaderboard-header {
        padding: 20px;
    }
    
    .leaderboard-controls {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
    }
    
    .leaderboard-item {
        padding: 12px 16px;
    }
    
    .user-section {
        margin-left: 12px;
    }
    
    .profile-img, .profile-placeholder, .country-flag {
        width: 36px;
        height: 36px;
    }
    
    .username {
        font-size: 15px;
    }
    
    .count {
        font-size: 15px;
    }
}

.word-cloud-container svg {
    max-width: 100%;
    max-height: 100%;
}

/* GitHub-style contributions heatmap styles - Light Theme */
.github-heatmap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    background: var(--card-background);
    border-radius: 8px;
    margin: 20px 0;
    border: 1px solid var(--border-color);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    max-width: 100%;
    overflow: hidden;
}

@media (max-width: 768px) {
    .github-heatmap {
        padding: 8px;
        margin: 10px 0;
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .github-heatmap {
        padding: 6px;
        margin: 8px 0;
        gap: 4px;
    }
}

.heatmap-container {
    display: flex;
    gap: 3px;
    overflow-x: auto;
    padding: 10px;
    width: 750px;
}

.day-labels {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-right: 8px;
}

.day-label {
    height: 11px;
    width: 25px;
    font-size: 9px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
}

.heatmap-weeks {
    display: flex;
    gap: 3px;
}

.heatmap-week {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.github-cell {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.1s ease;
}

.github-cell:hover {
    outline: 1px solid rgba(255, 255, 255, 0.3);
    outline-offset: 1px;
}

/* Responsive heatmap cells */
@media (max-width: 768px) {
    .heatmap-container {
        transform: scale(0.8);
        transform-origin: left top;
    }
}

@media (max-width: 480px) {
    .heatmap-container {
        transform: scale(0.6);
        transform-origin: left top;
    }
}

@media (max-width: 360px) {
    .heatmap-container {
        transform: scale(0.5);
        transform-origin: left top;
    }
}

.heatmap-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 12px;
}

.legend-colors {
    display: flex;
    gap: 3px;
}

.legend-cell {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.legend-item {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    border: 1px solid var(--border-color);
}

.legend-item.level-0 { background: #f0f0f0; }
.legend-item.level-1 { background: rgba(255, 107, 107, 0.2); }
.legend-item.level-1 { background: rgba(255, 107, 107, 0.1); }
.legend-item.level-2 { background: rgba(255, 107, 107, 0.2); }
.legend-item.level-3 { background: rgba(255, 107, 107, 0.3); }
.legend-item.level-4 { background: rgba(255, 107, 107, 0.4); }
.legend-item.level-5 { background: rgba(255, 107, 107, 0.5); }
.legend-item.level-6 { background: rgba(255, 107, 107, 0.6); }
.legend-item.level-7 { background: rgba(255, 107, 107, 0.7); }
.legend-item.level-8 { background: rgba(255, 107, 107, 0.8); }
.legend-item.level-9 { background: rgba(255, 107, 107, 0.9); }
.legend-item.level-10 { background: #ff6b6b; }

.heatmap-error {
    color: #ff6b6b;
    text-align: center;
    padding: 20px;
    font-size: 14px;
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .heatmap-container {
        padding: 5px;
    }
    
    .github-cell {
        width: 9px;
        height: 9px;
    }
    
    .day-label {
        width: 20px;
        font-size: 8px;
    }
}

.leaderboard-actions {
    margin-top: 20px;
    text-align: center;
    padding: 20px;
    border-top: 1px solid #333;
}

.clean-duplicates-btn {
    background: #ff6b6b;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
}

.clean-duplicates-btn:hover {
    background: #ff5252;
}

.chart-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin: 5px 0 0 0;
    font-style: italic;
}

.chart-container canvas {
    width: 100% !important;
    height: 320px !important;
}

.chart-container2 {
    width: 100% !important;
    height:320px !important;
        margin-bottom: -100px;
}


.chart-container h3 {
    font-size: 14px;
    color: #666;
    margin-bottom: 16px;
    font-weight: 500;
    }

.chart-wrapper {
    position: relative;
    height: 400px;
    width: 100%;
}

.subtitle {
    font-size: 14px;
    color: #666;
    margin-bottom: 24px;
    font-weight: 400;
}

.button-group {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.button {
    font-family: 'Inter', sans-serif;
    padding: 8px 24px;
    border-radius: 4px;
    border: none;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.button.primary {
    background: linear-gradient(180deg, #494949, #1a1a1a);
    color: white;
}

.button.primary:hover {
    background: linear-gradient(180deg,rgb(85, 85, 85), #383838);
}

.button.secondary {
    background: #d9d9d9;
    color: #333;
}

.button.secondary:hover {
    background: #c9c9c9;
}

.hidden {
    display: none;
}

.loading-section {
    margin-top: 20px;
    text-align: center;
}

.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #333;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#fileName {
    font-size: 12px;
    color: #666;
    margin-bottom: 15px;
}

.loading-messages {
    margin-top: 15px;
}

.loading-message {
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
    font-weight: 500;
}

.loading-fact {
    font-size: 12px;
    color: #666;
    font-style: italic;
    min-height: 20px;
    transition: opacity 0.3s ease;
}

.loading-fact.fade {
    opacity: 0;
}

.charts-section {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.chart-header h2 {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #333333;
    letter-spacing: -0.5px;
}

.map-container {
    width: 100%;
    height: 320px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
}
.wordCloud {
    width: 10px;
    background-color: red;
}
.ragdoll-canvas {
    width: 100%;
    height: 320px;
    border-radius: 8px;
    border: 1px solid #e5e5e5;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    cursor: grab;
}

.ragdoll-canvas:active {
    cursor: grabbing;
}

.ragdoll-section {
    display: flex !important;
    align-items: center;
    gap: 30px;
    margin: 30px 0;
    padding: 25px;
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e5e5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    visibility: visible !important;
    opacity: 1 !important;
    flex-direction: row-reverse; /* Swap order on desktop: text right, ragdoll left */
}

.ragdoll-canvas-top {
    width: 400px;
    height: 300px;
    border-radius: 12px;
    border: 2px solid #e5e5e5;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    cursor: grab;
    flex-shrink: 0;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.ragdoll-canvas-top:active {
    cursor: grabbing;
}

.ragdoll-info {
    flex: 1;
}

.ragdoll-info h3 {
    margin: 0 0 10px 0;
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #333333;
}

.ragdoll-info p {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #666;
}

@media (max-width: 768px) {
    .ragdoll-section {
        flex-direction: column !important; /* Override desktop flex-direction for mobile */
    text-align: center;
        margin: 20px 0 !important;
        padding: 20px !important;
        display: flex !important;
        gap: 20px;
    }
    
    .ragdoll-canvas-top {
        width: 300px !important;
        height: 200px !important;
        margin: 0 auto !important;
        display: block !important;
        min-width: 300px !important;
    }
    
    .ragdoll-info h3 {
        font-size: 20px;
        margin-bottom: 8px;
    }
    
    .ragdoll-info p {
        font-size: 14px;
        text-align: justify;
    }
}

@media (max-width: 480px) {
    .ragdoll-section {
        margin: 15px 0 !important;
        padding: 15px !important;
        display: flex !important;
        gap: 15px;
        flex-direction: column !important; /* Ensure column layout on smallest screens */
    }
    
    .ragdoll-canvas-top {
        width: 280px !important;
        height: 180px !important;
        min-width: 280px !important;
        display: block !important;
    }
    
    .ragdoll-info h3 {
        font-size: 18px;
    }
    
    .ragdoll-info p {
        font-size: 13px;
        text-align: justify;
    }
}

@media (min-width: 768px) {
    .charts-section {
        grid-template-columns: 1fr 1fr;
    }
}

/* Favorite Videos Section */
.favorite-videos-container {
    padding: 20px;
    width: 100%;
    max-width: 1400px; /* Make it much wider */
    margin: 0 auto;
}

.favorite-videos-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Smaller cards */
    gap: 20px;
    margin-bottom: 30px;
    width: 100%;
}

/* Comments Styling */
.comments-content {
    padding: 20px;
    height: 100%;
    overflow-y: auto;
}

.comments-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px;
}

.comment-item {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease;
}

.comment-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.comment-text {
    font-size: 16px;
    margin-bottom: 10px;
    line-height: 1.5;
}

.comment-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #666;
}

.comment-date {
    font-style: italic;
}

.comment-link {
    color: #ff6b6b;
    text-decoration: none;
}

.comment-link:hover {
    text-decoration: underline;
}

.comment-link.search-link {
    background-color: #ff6b6b;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 12px;
}

.comment-link.disabled {
    color: #999;
    cursor: not-allowed;
    text-decoration: none;
}

.comment-link.search-link:hover {
    background-color: #ff5252;
}

.favorite-video-card {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    min-height: 350px; /* Smaller height */
    display: flex;
    flex-direction: column;
}

.favorite-video-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border-color: var(--accent-color);
}

.favorite-video-card .video-date {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.favorite-video-card .video-embed {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 250px; /* Much smaller */
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
}

.favorite-video-card .video-embed iframe {
    width: 100%;
    height: 250px; /* Smaller height */
    border: none;
    border-radius: 8px;
    transform: scale(0.8); /* Scale down the embed */
    transform-origin: center;
}

.favorite-video-card .video-embed blockquote {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.favorite-video-card .video-link {
    display: inline-block;
    background: var(--accent-color);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease;
    text-align: center;
    margin-top: auto;
    font-size: 0.85rem;
}

.favorite-video-card .video-link:hover {
    background: #e55353;
    text-decoration: none;
}

.load-more-button {
    display: block;
    margin: 30px auto;
    padding: 15px 30px;
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 16px;
}

.load-more-button:hover {
    background: #e55353;
    transform: translateY(-1px);
}

.video-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 250px;
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.9rem;
    text-align: center;
}

/* Back button in title bar */
.back-button {
    background: var(--accent-color);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: auto;
    font-size: 0.9rem;
}

.back-button:hover {
    background: #e55353;
    transform: translateY(-1px);
}

/* Oldest Videos Window */
.oldest-videos-content {
    padding: 20px;
    width: 100%;
    height: calc(100vh - 80px); /* Full height minus title bar */
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden; /* Hide horizontal scrollbar */
    background: var(--background-color);
}

/* Pagination Controls */
.pagination-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 30px 0;
    padding: 20px;
}

.pagination-button {
    background: var(--accent-color);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
}

.pagination-button:hover:not(:disabled) {
    background: #e55353;
    transform: translateY(-1px);
}

.pagination-button:disabled {
    background: #ccc;
    color: #999;
    cursor: not-allowed;
    transform: none;
}

.page-info {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 14px;
    min-width: 120px;
    text-align: center;
}

/* Mobile responsiveness for pagination */
@media (max-width: 768px) {
    .pagination-controls {
        gap: 15px;
        margin: 20px 0;
        padding: 15px;
    }
    
    .pagination-button {
        padding: 10px 18px;
        font-size: 13px;
    }
    
    .page-info {
        font-size: 13px;
        min-width: 100px;
    }
}

@media (max-width: 480px) {
    .pagination-controls {
        gap: 10px;
        margin: 15px 0;
        padding: 10px;
        flex-wrap: wrap;
    }
    
    .pagination-button {
        padding: 8px 16px;
        font-size: 12px;
        flex: 1;
        min-width: 80px;
    }
    
    .page-info {
        font-size: 12px;
        min-width: auto;
        flex-basis: 100%;
        order: -1;
        margin-bottom: 10px;
    }
}

/* Add to Leaderboard Button */
#addToLeaderboardBtn {
    padding: 6px 12px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

#addToLeaderboardBtn:hover {
    background-color: #444;
}

/* Tutorial Window Styles - matching existing window design */
#helpWindow {
    /* Same width as main window */
}

/* Hide help window when highlights are shown */
.highlights-overlay:not(.hidden) ~ #helpWindow,
.highlights-window:not(.hidden) ~ #helpWindow {
    display: none;
}

/* Hide help window when dashboard is active */
body.dashboard-active #helpWindow {
    display: none !important;
}

/* Alternative approach - add a class to hide help window */
#helpWindow.hide-during-highlights {
    display: none;
}

/* Hide help window when any data view is active */
#uploadWindow.hidden ~ #helpWindow {
    display: none;
}

/* F.A.Q Window Styles - matching tutorial window design */
#faqWindow {
    /* Same styling as helpWindow */
}

/* Hide F.A.Q window when dashboard is active */
body.dashboard-active #faqWindow {
    display: none !important;
}

/* Hide F.A.Q window when highlights are shown */
.highlights-overlay:not(.hidden) ~ #faqWindow,
.highlights-window:not(.hidden) ~ #faqWindow {
    display: none;
}

/* Hide F.A.Q window when any data view is active */
#uploadWindow.hidden ~ #faqWindow {
    display: none;
}

/* F.A.Q Content Styles */
.faq-section {
    padding: 10px 20px;
    max-height: 560px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Increase F.A.Q window height */
#faqWindow .window-content2 {
    height: 600px;
    padding: 24px;
    text-align: center;
}

.faq-item {
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid #e5e5e5;
    transition: background-color 0.2s ease;
}

.faq-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.faq-question {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin: 0 0 10px 0;
    text-align: left;
    font-family: 'Inter', sans-serif;
}

.faq-answer {
    font-size: 14px;
    color: #666;
    margin: 0;
    line-height: 1.5;
    text-align: justify;
    font-family: 'Inter', sans-serif;
}

/* Custom scrollbar for F.A.Q section */
.faq-section::-webkit-scrollbar {
    width: 8px;
}

.faq-section::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.faq-section::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.faq-section::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* F.A.Q Toggle Button */
#faqToggleBtn {
    background: #d9d9d9;
    color: #333;
    border: 1px solid #ccc;
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    min-width: 40px;
}

#faqToggleBtn:hover {
    background: #c9c9c9;
    border-color: #aaa;
    transform: translateY(-1px);
}

/* Collapsed state */
#faqWindow.collapsed #faqContent {
    display: none;
}

#faqWindow.collapsed #faqToggleBtn {
    transform: rotate(0deg);
}

#faqWindow:not(.collapsed) #faqToggleBtn {
    transform: rotate(180deg);
}

/* Mobile responsiveness for F.A.Q */
@media (max-width: 968px) {
    .faq-section {
        max-height: 400px;
        padding: 10px 15px;
    }
    
    #faqWindow .window-content2 {
        height: 500px;
    }
    
    .faq-item {
        padding: 12px;
        margin-bottom: 15px;
    }
    
    .faq-question {
        font-size: 15px;
    }
    
    .faq-answer {
        font-size: 13px;
    }
}

@media (max-width: 960px) {
    .faq-section {
        max-height: 350px;
        padding: 10px;
    }
    
    #faqWindow .window-content2 {
        height: 450px;
    }
    
    .faq-item {
        padding: 10px;
        margin-bottom: 12px;
    }
    
    .faq-question {
        font-size: 14px;
    }
    
    .faq-answer {
        font-size: 12px;
    }
}



.tutorial-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.tutorial-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    min-width: 140px;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.tutorial-icon {
    font-size: 16px;
    line-height: 1;
}

.tutorial-text {
    font-size: 14px;
}

/* Mobile responsiveness for tutorial window */
@media (max-width: 768px) {
    body {
        gap: 15px;
        padding: 15px;
    }
    
    .tutorial-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .tutorial-btn {
        width: 100%;
        max-width: 200px;
    }
}

@media (max-width: 480px) {
    .tutorial-btn {
        padding: 10px 16px;
        min-width: 120px;
    }
    
    .tutorial-icon {
        font-size: 14px;
    }
    
    .tutorial-text {
        font-size: 13px;
    }
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background-color: white;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.modal-header {
    padding: 16px 20px;
    background-color: var(--primary-color);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.close-modal {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    padding: 16px 20px;
    background-color: #f8f9fa;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    border-top: 1px solid #e9ecef;
}

/* User Preview in Modal */
.user-preview {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e9ecef;
}

.preview-avatar {
    margin-right: 16px;
}

.preview-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e9ecef;
}

.preview-placeholder {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.preview-details {
    flex: 1;
}

.preview-username {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.preview-stats {
    font-size: 14px;
    color: #666;
}

/* Country Selection in Modal */
.country-selection-container {
    margin-bottom: 16px;
}

.country-selection-container label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
}

.country-dropdown {
    display: flex;
    align-items: center;
    gap: 8px;
}

#selectedFlagIcon {
    width: 24px;
    height: 16px;
    border-radius: 2px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
}

/* Updated CSS for TikTok-themed Release 2.0 button with blue colors */
.uiverse {
   --duration: 7s;
   --easing: linear;
   --c-color-1: rgba(0, 123, 255, 0.7); /* Blue */
   --c-color-2: #000000; /* TikTok Black */
   --c-color-3: #007bff; /* Bright Blue */
   --c-color-4: rgba(135, 206, 250, 0.8); /* Light Blue */
   --c-shadow: rgba(0, 123, 255, 0.3);
   --c-shadow-inset-top: rgba(0, 123, 255, 0.6);
   --c-shadow-inset-bottom: rgba(255, 255, 255, 0.4);
   --c-radial-inner: #007bff;
   --c-radial-outer: #0056b3;
   --c-color: #fff;
   -webkit-tap-highlight-color: transparent;
   -webkit-appearance: none;
   outline: none;
   position: absolute;
   right: 10px;
   width: 120px;
   top: 50%;
   transform: translateY(-50%);
   cursor: pointer;
   border: none;
   display: table;
   border-radius: 16px;
   padding: 0;
   margin: 0;
   text-align: center;
   font-weight: 600;
   font-size: 11px;
   letter-spacing: 0.02em;
   line-height: 1.3;
   color: var(--c-color);
   background: linear-gradient(
     135deg,
     var(--c-radial-inner) 0%,
     var(--c-radial-outer) 100%
   );
   box-shadow: 0 0 8px var(--c-shadow);
   z-index: 10;
}

.uiverse:before {
   content: "";
   pointer-events: none;
   position: absolute;
   z-index: 3;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   border-radius: 16px;
   box-shadow:
     inset 0 2px 8px var(--c-shadow-inset-top),
     inset 0 -2px 3px var(--c-shadow-inset-bottom);
}

.uiverse .wrapper {
   -webkit-mask-image: -webkit-radial-gradient(white, black);
   overflow: hidden;
   border-radius: 16px;
   min-width: 80px;
   padding: 6px 0;
}

.uiverse .wrapper span {
   display: inline-block;
   position: relative;
   z-index: 1;
   color: white;
}

/* Tooltip on hover - positioned below the button */
.uiverse::after {
   content: attr(data-tooltip);
   position: absolute;
   top: 100%;
   left: 50%;
   transform: translateX(-50%);
   background: linear-gradient(#4e4e4e, #333333);
   color: white;
   padding: 8px 12px;
   border-radius: 6px;
   font-size: 12px;
   font-weight: 200;
   font-family:'Inter', sans-serif;
   white-space: nowrap;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s ease, visibility 0.3s ease;
   z-index: 9999;
   margin-top: 5px;
   margin-left: -100px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.uiverse:hover::after {
   opacity: 1;
   visibility: visible;
}

/* Remove hover scaling */

.uiverse:hover {
   --duration: 1400ms;
}

.uiverse .wrapper .circle {
   position: absolute;
   left: 0;
   top: 0;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   filter: blur(var(--blur, 5px));
   background: var(--background, transparent);
   transform: translate(var(--x, 0), var(--y, 0)) translateZ(0);
   animation: var(--animation, none) var(--duration) var(--easing) infinite;
}

.uiverse .wrapper .circle.circle-1,
.uiverse .wrapper .circle.circle-9,
.uiverse .wrapper .circle.circle-10 {
   --background: var(--c-color-4);
}

.uiverse .wrapper .circle.circle-3,
.uiverse .wrapper .circle.circle-4 {
   --background: var(--c-color-2);
   --blur: 8px;
}

.uiverse .wrapper .circle.circle-5,
.uiverse .wrapper .circle.circle-6 {
   --background: var(--c-color-3);
   --blur: 10px;
}

.uiverse .wrapper .circle.circle-2,
.uiverse .wrapper .circle.circle-7,
.uiverse .wrapper .circle.circle-8,
.uiverse .wrapper .circle.circle-11,
.uiverse .wrapper .circle.circle-12 {
   --background: var(--c-color-1);
   --blur: 6px;
}

.uiverse .wrapper .circle.circle-1 {
   --x: 0;
   --y: -20px;
   --animation: circle-1;
}

.uiverse .wrapper .circle.circle-2 {
   --x: 50px;
   --y: 4px;
   --animation: circle-2;
}

.uiverse .wrapper .circle.circle-3 {
   --x: -6px;
   --y: -6px;
   --animation: circle-3;
}

.uiverse .wrapper .circle.circle-4 {
   --x: 45px;
   --y: -6px;
   --animation: circle-4;
}

.uiverse .wrapper .circle.circle-5 {
   --x: 6px;
   --y: -2px;
   --animation: circle-5;
}

.uiverse .wrapper .circle.circle-6 {
   --x: 30px;
   --y: 8px;
   --animation: circle-6;
}

.uiverse .wrapper .circle.circle-7 {
   --x: 4px;
   --y: 14px;
   --animation: circle-7;
}

.uiverse .wrapper .circle.circle-8 {
   --x: 15px;
   --y: -2px;
   --animation: circle-8;
}

.uiverse .wrapper .circle.circle-9 {
   --x: 10px;
   --y: -6px;
   --animation: circle-9;
}

.uiverse .wrapper .circle.circle-10 {
   --x: 35px;
   --y: 8px;
   --animation: circle-10;
}

.uiverse .wrapper .circle.circle-11 {
   --x: 2px;
   --y: 2px;
   --animation: circle-11;
}

.uiverse .wrapper .circle.circle-12 {
   --blur: 8px;
   --x: 28px;
   --y: 2px;
   --animation: circle-12;
}

@keyframes circle-1 {
   33% {
     transform: translate(0px, 8px) translateZ(0);
   }

   66% {
     transform: translate(6px, 32px) translateZ(0);
   }
}

@keyframes circle-2 {
   33% {
     transform: translate(45px, -4px) translateZ(0);
   }

   66% {
     transform: translate(38px, -24px) translateZ(0);
   }
}

@keyframes circle-3 {
   33% {
     transform: translate(10px, 6px) translateZ(0);
   }

   66% {
     transform: translate(6px, 2px) translateZ(0);
   }
}

@keyframes circle-4 {
   33% {
     transform: translate(40px, -6px) translateZ(0);
   }

   66% {
     transform: translate(60px, -4px) translateZ(0);
   }
}

@keyframes circle-5 {
   33% {
     transform: translate(45px, 14px) translateZ(0);
   }

   66% {
     transform: translate(20px, -16px) translateZ(0);
   }
}

@keyframes circle-6 {
   33% {
     transform: translate(15px, -8px) translateZ(0);
   }

   66% {
     transform: translate(40px, -28px) translateZ(0);
   }
}

@keyframes circle-7 {
   33% {
     transform: translate(4px, 14px) translateZ(0);
   }

   66% {
     transform: translate(10px, -30px) translateZ(0);
   }
}

@keyframes circle-8 {
   33% {
     transform: translate(16px, -2px) translateZ(0);
   }

   66% {
     transform: translate(30px, -10px) translateZ(0);
   }
}

@keyframes circle-9 {
   33% {
     transform: translate(10px, -6px) translateZ(0);
   }

   66% {
     transform: translate(45px, -4px) translateZ(0);
   }
}

@keyframes circle-10 {
   33% {
     transform: translate(36px, 10px) translateZ(0);
   }

   66% {
     transform: translate(55px, 14px) translateZ(0);
   }
}

@keyframes circle-11 {
   33% {
     transform: translate(2px, 2px) translateZ(0);
   }

   66% {
     transform: translate(36px, 10px) translateZ(0);
   }
}

@keyframes circle-12 {
   33% {
     transform: translate(30px, 0px) translateZ(0);
   }

   66% {
     transform: translate(32px, -16px) translateZ(0);
   }
}

.made-by-credit {
    margin-top: 15px;
    text-align: center;
    font-size: 12px;
    opacity: 0.7;
}

.made-by-link {
    color: #666;
    text-decoration: none;
    position: absolute;
    margin-left: -54px;
    margin-top: 10px;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.made-by-link:hover {
    color: #1e5e72;
    opacity: 1;
    text-decoration: underline;
}

/* Help Window Styles */
.help-window {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    border: 2px solid #333;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    margin: 20px auto;
    max-width: 600px;
    width: 90%;
    position: relative;
    overflow: hidden;
}

.help-content {
    padding: 30px;
    text-align: center;
}

.help-title {
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 10px 0;
    font-family: 'Inter', sans-serif;
}

.help-subtitle {
    color: #aaa;
    font-size: 16px;
    margin: 0 0 30px 0;
    font-family: 'Inter', sans-serif;
}

.help-tutorial-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.tutorial-button {
    background: linear-gradient(135deg, #ff0050 0%, #ff4081 100%);
    border: none;
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 200px;
    color: white;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 4px 15px rgba(255, 0, 80, 0.3);
}

.tutorial-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 0, 80, 0.4);
    background: linear-gradient(135deg, #ff1a5c 0%, #ff5a8a 100%);
}

.tutorial-button:active {
    transform: translateY(0);
}

.button-icon {
    font-size: 32px;
    line-height: 1;
}

.button-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.button-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
}

.button-desc {
    font-size: 14px;
    opacity: 0.9;
    font-weight: 400;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .help-window {
        margin: 15px;
        width: calc(100% - 30px);
    }
    
    .help-content {
        padding: 20px;
    }
    
    .help-title {
        font-size: 20px;
    }
    
    .help-subtitle {
        font-size: 14px;
    }
    
    .tutorial-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .tutorial-button {
        width: 100%;
        max-width: 280px;
    }
}

@media (max-width: 480px) {
    .tutorial-button {
        min-width: unset;
        padding: 15px;
    }
    
    .button-icon {
        font-size: 28px;
    }
    
    .button-title {
        font-size: 16px;
    }
    
    .button-desc {
        font-size: 13px;
    }
}

/* Anonymous option styling */
.anonymous-option {
    margin: 20px 0;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.checkbox-container {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: #fff;
}

.checkbox-container input[type="checkbox"] {
    margin-right: 10px;
    width: 18px;
    height: 18px;
    accent-color: #ff0050;
}

.checkbox-container:hover {
    color: #ff0050;
}

/* Music Player Styles */
.music-player {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    backdrop-filter: blur(10px);
    z-index: 1000;
    max-width: 320px;
}

.music-player.hidden {
    display: none;
}

/* Minimized music player state */
.music-player.minimized {
    max-width: 60px;
    padding: 12px;
    gap: 0;
}

.music-player.minimized .cd-player {
    display: none;
}

.music-player.minimized .music-info {
    display: none;
}

.music-player.minimized .playlist-selector {
    display: none;
}

.music-player.minimized .music-controls {
    justify-content: center;
    gap: 0;
}

.music-player.minimized .music-controls > *:not(.expand-btn) {
    display: none;
}

/* Expand button (back button) styles */
.music-btn.expand-btn {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #ffffff;
    width: 40px;
    height: 40px;
}

.music-btn.expand-btn:hover {
    background: #2563eb;
    border-color: #2563eb;
}

.expand-btn {
    display: none;
}

.music-player.minimized .expand-btn {
    display: flex;
}

/* CD Player Styles */
.cd-player {
    display: flex;
    align-items: center;
    gap: 20px;
}

.cd-container {
    position: relative;
    width: 80px;
    height: 80px;
}

.cd-disc {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    position: relative;
    background: linear-gradient(135deg, #f3f4f6, #d1d5db);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 2px 4px rgba(255, 255, 255, 0.8);
    transition: transform 0.3s ease;
}

.cd-disc.spinning {
    animation: spin 3s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.album-cover {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: 10px;
    object-fit: cover;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.cd-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: #374151;
    border-radius: 50%;
    border: 2px solid #9ca3af;
}

/* Playlist Selector */
.playlist-selector {
    position: relative;
}

.playlist-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.playlist-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
    transform: translateY(-1px);
}

.playlist-dropdown {
    position: absolute;
    bottom: 45px;
    left: 0;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    min-width: 280px;
    z-index: 1000;
    overflow: hidden;
}

.playlist-dropdown.hidden {
    display: none;
}

.playlist-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #f3f4f6;
}

.playlist-item:last-child {
    border-bottom: none;
}

.playlist-item:hover {
    background: #f9fafb;
}

.playlist-item.active {
    background: #eff6ff;
    border-left: 3px solid #3b82f6;
}

.playlist-cover {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid #e5e7eb;
}

.playlist-title {
    color: #374151;
    font-weight: 500;
    font-size: 14px;
    flex: 1;
}

.playlist-item.active .playlist-title {
    color: #1d4ed8;
    font-weight: 600;
}

.music-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.song-title {
    color: #111827;
    font-weight: 600;
    font-size: 16px;
}

.song-time {
    color: #6b7280;
    font-size: 12px;
    font-family: 'JetBrains Mono', monospace;
}

.music-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

.music-btn {
    background: #f9fafb;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #374151;
}

.music-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
    transform: translateY(-1px);
}

.music-btn.play-btn {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #ffffff;
    width: 48px;
    height: 48px;
}

.music-btn.play-btn:hover {
    background: #2563eb;
    border-color: #2563eb;
}

.music-btn.close-btn {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

.music-btn.close-btn:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}

.volume-slider {
    width: 80px;
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    appearance: none;
}

.volume-slider::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    background: #3b82f6;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.volume-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #3b82f6;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Icon visibility states */
.play-icon.hidden,
.pause-icon.hidden,
.volume-mute.hidden {
    display: none;
}

/* Highlights Full Page Overlay */
.highlights-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9);
}

.highlights-overlay.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.highlights-window.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}



.highlights-overlay .highlight-card {
    position: relative;
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    border-radius: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
    color: white;
    text-align: center;
    cursor: pointer;
}

/* Update the click indicator */
.highlights-overlay .highlight-card::after {
    content: "Click to reveal description, click again to continue";
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9rem;
    opacity: 0.7;
    animation: fadeInOut 2s ease-in-out infinite;
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

.highlights-overlay .highlight-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    --c: #09f;
    background-color: #000;
    background-image: radial-gradient(4px 100px at 0px 235px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 235px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 117.5px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 252px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 252px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 126px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 150px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 150px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 75px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 253px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 253px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 126.5px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 204px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 204px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 102px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 134px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 134px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 67px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 179px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 179px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 89.5px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 299px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 299px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 149.5px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 215px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 215px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 107.5px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 281px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 281px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 140.5px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 158px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 158px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 79px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 210px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 210px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 105px, var(--c) 100%, #0000 150%);
    background-size:
        300px 235px, 300px 235px, 300px 235px,
        300px 252px, 300px 252px, 300px 252px,
        300px 150px, 300px 150px, 300px 150px,
        300px 253px, 300px 253px, 300px 253px,
        300px 204px, 300px 204px, 300px 204px,
        300px 134px, 300px 134px, 300px 134px,
        300px 179px, 300px 179px, 300px 179px,
        300px 299px, 300px 299px, 300px 299px,
        300px 215px, 300px 215px, 300px 215px,
        300px 281px, 300px 281px, 300px 281px,
        300px 158px, 300px 158px, 300px 158px,
        300px 210px, 300px 210px, 300px 210px;
    animation: rainAnimation 150s linear infinite;
}

.highlights-overlay .highlight-background::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    backdrop-filter: blur(1em) brightness(6);
    background-image: radial-gradient(
        circle at 50% 50%,
        #0000 0,
        #0000 2px,
        hsl(0 0 4%) 2px
    );
    background-size: 8px 8px;
}

.highlights-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.highlight-card {
    position: relative;
    width: 100%;
    height: 400px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px;
    color: white;
    text-align: center;
}

.highlight-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    --c: #09f;
    background-color: #000;
    background-image: radial-gradient(4px 100px at 0px 235px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 235px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 117.5px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 252px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 252px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 126px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 150px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 150px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 75px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 253px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 253px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 126.5px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 204px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 204px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 102px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 134px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 134px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 67px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 179px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 179px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 89.5px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 299px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 299px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 149.5px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 215px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 215px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 107.5px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 281px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 281px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 140.5px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 158px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 158px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 79px, var(--c) 100%, #0000 150%),
        radial-gradient(4px 100px at 0px 210px, var(--c), #0000),
        radial-gradient(4px 100px at 300px 210px, var(--c), #0000),
        radial-gradient(1.5px 1.5px at 150px 105px, var(--c) 100%, #0000 150%);
    background-size:
        300px 235px,
        300px 235px,
        300px 235px,
        300px 252px,
        300px 252px,
        300px 252px,
        300px 150px,
        300px 150px,
        300px 150px,
        300px 253px,
        300px 253px,
        300px 253px,
        300px 204px,
        300px 204px,
        300px 204px,
        300px 134px,
        300px 134px,
        300px 134px,
        300px 179px,
        300px 179px,
        300px 179px,
        300px 299px,
        300px 299px,
        300px 299px,
        300px 215px,
        300px 215px,
        300px 215px,
        300px 281px,
        300px 281px,
        300px 281px,
        300px 158px,
        300px 158px,
        300px 158px,
        300px 210px,
        300px 210px,
        300px 210px;
    animation: rainAnimation 150s linear infinite;
}

.highlight-background::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    backdrop-filter: blur(1em) brightness(6);
    background-image: radial-gradient(
        circle at 50% 50%,
        #0000 0,
        #0000 2px,
        hsl(0 0 4%) 2px
    );
    background-size: 8px 8px;
}

.pattern-overlay {
    display: none;
}

@keyframes rainAnimation {
    0% {
        background-position:
            0px 220px,
            3px 220px,
            151.5px 337.5px,
            25px 24px,
            28px 24px,
            176.5px 150px,
            50px 16px,
            53px 16px,
            201.5px 91px,
            75px 224px,
            78px 224px,
            226.5px 350.5px,
            100px 19px,
            103px 19px,
            251.5px 121px,
            125px 120px,
            128px 120px,
            276.5px 187px,
            150px 31px,
            153px 31px,
            301.5px 120.5px,
            175px 235px,
            178px 235px,
            326.5px 384.5px,
            200px 121px,
            203px 121px,
            351.5px 228.5px,
            225px 224px,
            228px 224px,
            376.5px 364.5px,
            250px 26px,
            253px 26px,
            401.5px 105px,
            275px 75px,
            278px 75px,
            426.5px 180px;
    }

    to {
        background-position:
            0px 6800px,
            3px 6800px,
            151.5px 6917.5px,
            25px 13632px,
            28px 13632px,
            176.5px 13758px,
            50px 5416px,
            53px 5416px,
            201.5px 5491px,
            75px 17175px,
            78px 17175px,
            226.5px 17301.5px,
            100px 5119px,
            103px 5119px,
            251.5px 5221px,
            125px 8428px,
            128px 8428px,
            276.5px 8495px,
            150px 9876px,
            153px 9876px,
            301.5px 9965.5px,
            175px 13391px,
            178px 13391px,
            326.5px 13540.5px,
            200px 14741px,
            203px 14741px,
            351.5px 14848.5px,
            225px 18770px,
            228px 18770px,
            376.5px 18910.5px,
            250px 5082px,
            253px 5082px,
            401.5px 5161px,
            275px 6375px,
            278px 6375px,
            426.5px 6480px;
    }
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes patternMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(60px, 60px); }
}

.highlight-content {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.highlight-content h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    animation: fadeInUp 0.8s ease;
}

.highlight-number {
    font-size: 4rem;
    font-weight: bold;
    margin: 20px 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    animation: countUp 1.5s ease, fadeInUp 0.8s ease;
}

.highlight-content p {
    font-size: 1.1rem;
    opacity: 0.9;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    /* Remove the automatic animation */
    /* animation: fadeInUp 0.8s ease 0.3s both; */
}

/* Add a new class for when description should be animated */
.highlight-content p.animate {
    animation: fadeInUp 0.8s ease;
}

.highlight-navigation {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.highlight-btn {
    background: rgba(255,255,255,0.2);
    color: white;
    border: 2px solid rgba(255,255,255,0.3);
    padding: 12px 24px;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.highlight-btn:hover {
    background: rgba(255,255,255,0.3);
    border-color: rgba(255,255,255,0.5);
    transform: translateY(-2px);
}

.highlight-progress {
    color: rgba(255,255,255,0.8);
    font-weight: 500;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes countUp {
    from {
        transform: scale(0.5);
    }
    to {
        transform: scale(1);
    }
}

/* Responsive design for highlights */
@media (max-width: 768px) {
    .highlights-window {
        max-width: 100%;
        height: 100vh;
    }
    
    .highlight-card {
        height: 350px;
        padding: 20px;
    }
    
    .highlight-content h2 {
        font-size: 1.5rem;
    }
    
    .highlight-number {
        font-size: 3rem;
    }
}

/* Donation Container */
.donation-container {
    background: #333333;
    border-radius: 8px;
    margin: 20px;
    padding: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
    cursor: grab;
}

.donation-container::before {
    content: '';
    position: fixed;
    width: 20px;
    height: 20px;
    background: #8B4513;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    pointer-events: none;
    z-index: 9999;
    transition: all 0.1s ease;
    box-shadow: 
        2px 2px 4px rgba(139, 69, 19, 0.3),
        inset -2px -2px 3px rgba(0, 0, 0, 0.2);
}

.donation-container::after {
    content: '';
    position: fixed;
    width: 6px;
    height: 8px;
    background: #654321;
    border-radius: 0 50% 50% 0;
    transform: rotate(-45deg) translate(8px, -8px);
    pointer-events: none;
    z-index: 10000;
    transition: all 0.1s ease;
}

/* Brown Trail Effect */
@keyframes trailFade {
    0% {
        opacity: 0.8;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.3);
    }
}

.coffee-trail {
    position: fixed;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #bd7e51 0%, #c48b52 50%, transparent 100%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    animation: trailFade 0.8s ease-out forwards;
}

.donation-content {
    padding: 25px;
    text-align: center;
}

/* Title with Coffee Container */
.title-with-coffee {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}

.donation-content h3 {
    color: white;
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0;
}

/* Coffee Animation */
.coffee-animation {
    display: flex;
    justify-content: center;
    margin-bottom: -10px;
}

.coffee-cup {
    position: relative;
    width: 25px;
    height: 25px;
    background: #8B4513;
    border-radius: 0 0 15px 15px;
    border: 2px solid #654321;
    animation: coffeeFloat 3s ease-in-out infinite;
}

.coffee-cup::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -2px;
    right: -2px;
    height: 8px;
    background: #3e2723;
    border-radius: 15px 15px 0 0;
}

.coffee-cup::after {
    content: '';
    position: absolute;
    top: 5px;
    right: -8px;
    width: 6px;
    height: 12px;
    border: 2px solid #654321;
    border-left: none;
    border-radius: 0 8px 8px 0;
}

.coffee-steam {
    position: absolute;
    width: 2px;
    height: 10px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 1px;
    top: -10px;
    animation: steam 2s ease-in-out infinite;
}

.coffee-steam:nth-child(1) {
    left: 8px;
    animation-delay: 0s;
}

.coffee-steam:nth-child(2) {
    left: 14px;
    animation-delay: 0.5s;
}

.coffee-steam:nth-child(3) {
    left: 20px;
    animation-delay: 1s;
}

@keyframes coffeeFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-3px);
    }
}

@keyframes steam {
    0% {
        opacity: 0;
        transform: translateY(0) scale(1);
    }
    50% {
        opacity: 1;
        transform: translateY(-10px) scale(1.1);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px) scale(0.8);
    }
}

.donation-description {
    color: #e0e0e0;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
    font-style: italic;
    min-height: 24px;
}

.donation-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.main-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.donation-btn {
    background: linear-gradient(135deg, #2c2c2c, #1a1a1a);
    color: white;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 1px solid #555;
    min-width: 140px;
    display: inline-block;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
}

.donation-btn:hover {
    background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    border-color: #666;
}

.donation-btn.monthly {
    border-left: 4px solid #6bff7f;
}

.donation-btn.onetime {
    border-left: 4px solid #4ecdc4;
}

.donation-btn.share {
    border-left: 4px solid #ffd93d;
    width: 100%;
    max-width: 300px;
}

@media (max-width: 600px) {
    .main-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .donation-btn {
        width: 100%;
        max-width: 200px;
    }
    
    .donation-btn.share {
        max-width: 250px;
    }
}

/* Donation Button */
.button.donation {
    background: linear-gradient(135deg, #2c2c2c, #4a4a4a);
    color: white;
    border: 1px solid #555;
}

.button.donation:hover {
    background: linear-gradient(135deg, #1a1a1a, #3a3a3a);
    border-color: #666;
    transform: translateY(-1px);
}

/* Donation Modal */
.donation-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
}

.donation-modal.hidden {
    display: none;
}

.donation-modal-content {
    background: linear-gradient(135deg, #2c2c2c, #1a1a1a);
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.donation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 25px;
    border-bottom: 1px solid #444;
    background: #333;
}

.donation-header h2 {
    color: white;
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0;
}

.close-button {
    background: none;
    border: none;
    color: #ccc;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.close-button:hover {
    background: #555;
    color: white;
}

.donation-body {
    padding: 25px;
}

.donation-message {
    color: #e0e0e0;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 25px;
    text-align: center;
    font-style: italic;
}

.donation-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.donation-link {
    text-decoration: none;
    display: block;
    transition: all 0.3s ease;
}

.donation-option {
    background: linear-gradient(135deg, #4a4a4a, #3a3a3a);
    border: 1px solid #555;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.donation-link:hover .donation-option {
    background: linear-gradient(135deg, #5a5a5a, #4a4a4a);
    border-color: #666;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.donation-option h3 {
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.donation-option p {
    color: #ccc;
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.4;
}

.donation-link.monthly .donation-option {
    border-left: 4px solid #6bff72;
}

.donation-link.onetime .donation-option {
    border-left: 4px solid #4ecdc4;
}

@media (max-width: 600px) {
    .donation-modal-content {
        width: 95%;
        margin: 20px;
    }
    
    .donation-header {
        padding: 15px 20px;
    }
    
    .donation-body {
        padding: 20px;
    }
    
    .donation-message {
        font-size: 1rem;
    }
}

/* Enhanced flag display */
.flag-container {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
}

.flag-container .fi {
    font-size: 1.2em;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.flag-container.no-flag {
    opacity: 0.5;
}

/* Reviews Section */
.reviews-section {
    margin-top: 20px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
    border-radius: 8px;
    padding: 10px;
}

.reviews-section:hover {
    transform: scale(1.00);
    opacity: 0.9;
}

.reviews-section:active {
    transform: scale(1.00);
}

.reviews-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.reviews-header {
    display: flex;
    align-items: center;
    justify-content: center;
}

.stars {
    display: flex;
    align-items: center;
    gap: 4px;
}

.star {
    color: #ffd700;
    font-size: 16px;
    line-height: 1;
}

.rating-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    padding: 0 4px;
    min-width: 24px;
    text-align: center;
}

.review-profiles {
    display: flex;
    justify-content: center;
    gap: -8px;
    margin-left: -4px;
}

.review-profile {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--bg-color);
    object-fit: cover;
    margin-left: -8px;
    transition: transform 0.2s ease;
    border: 1px #333333 solid;
}

.review-profile:first-child {
    margin-left: 0;
}

.review-profile:hover {
    transform: scale(1.1);
    z-index: 1;
    position: relative;
}

.laurel-image {
    width: 190px;
    height: auto;
    margin-top: -67px;
    margin-left: -98px;
    opacity: 0.8;
    z-index:1;
    position: absolute;
}

.laurel-image:hover {
    opacity: 1;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .review-profile {
        width: 28px;
        height: 28px;
    }
    
    .star {
        font-size: 14px;
    }
    
    .rating-text {
        font-size: 12px;
    }
    

}

.tutorial-gif {
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
    border-radius: 4px;
    border: 2px solid #cecece;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Review Section Mobile Responsiveness */
@media (max-width: 768px) {
    .review-section {
        padding: 15px;
        margin: 0 10px;
        border-radius: 12px 12px 0 0;
    }
    
    .review-form {
        gap: 12px;
    }
    
    .user-info-container {
        flex-direction: column;
        gap: 12px;
    }
    
    .username-container, .country-container {
        width: 100%;
    }
    
    .country-selection {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    #reviewCountry {
        min-width: 0;
        flex: 1;
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    #reviewUsername {
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    #reviewText {
        font-size: 16px; /* Prevent zoom on iOS */
        min-height: 100px;
    }
    
    .review-item {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 12px;
        box-sizing: border-box;
    }
    
    .review-header {
        flex-wrap: wrap;
        gap: 6px;
    }
    
    .review-username {
        font-size: 13px;
    }
    
    .review-country {
        font-size: 11px;
    }
    
    .review-text {
        font-size: 13px;
        line-height: 1.4;
    }
    
    .review-rating .star {
        font-size: 14px;
    }
    
    .review-date {
        font-size: 11px;
    }
    
    .reviews-heading {
        font-size: 16px;
        margin-bottom: 15px;
    }
}

@media (max-width: 480px) {
    .review-section {
        padding: 12px;
        margin: 0 5px;
    }
    
    .user-info-container {
        gap: 10px;
    }
    
    .country-selection {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    #selectedCountryFlag {
        align-self: flex-start;
        margin-bottom: 4px;
    }
    
    #reviewCountry {
        width: 100%;
    }
    
    .review-item {
        padding: 10px;
        margin-bottom: 10px;
    }
    
    .review-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .review-username {
        font-size: 12px;
    }
    
    .review-country {
        font-size: 10px;
    }
    
    .review-text {
        font-size: 12px;
        margin-bottom: 8px;
    }
    
    .review-rating .star {
        font-size: 13px;
    }
    
    .review-date {
        font-size: 10px;
    }
    
    .reviews-heading {
        font-size: 15px;
        margin-bottom: 12px;
    }
    
    #reviewText {
        min-height: 80px;
        padding: 10px;
    }
}

/* Add to Leaderboard Button */
#addToLeaderboardBtn {
    padding: 6px 12px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

#addToLeaderboardBtn:hover {
    background-color: #444;
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background-color: white;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.modal-header {
    padding: 16px 20px;
    background-color: var(--primary-color);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.close-modal {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    padding: 16px 20px;
    background-color: #f8f9fa;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    border-top: 1px solid #e9ecef;
}

/* User Preview in Modal */
.user-preview {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e9ecef;
}

.preview-avatar {
    margin-right: 16px;
}

.preview-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e9ecef;
}

.preview-placeholder {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.preview-details {
    flex: 1;
}

.preview-username {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.preview-stats {
    font-size: 14px;
    color: #666;
}

/* Country Selection in Modal */
.country-selection-container {
    margin-bottom: 16px;
}

.country-selection-container label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
}

.country-dropdown {
    display: flex;
    align-items: center;
    gap: 8px;
}

#selectedFlagIcon {
    width: 24px;
    height: 16px;
    border-radius: 2px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
}