/* Modern Linktree-Style CSS for CSSPMS.GRAMMAR */

/* CSS Variables */
:root {
    --primary-color: hsl(35, 96%, 61%);
    --secondary-color: #f59e0b;
    --success-color: #10b981;
    --whatsapp-color: #25D366;
    --facebook-color: #1877F2;
    --instagram-color: #E4405F;
    --broadcast-color: #8B5CF6;
    
    --white: #ffffff;
    --black: #000000;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    
    --font-primary: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-secondary: "Playfair Display", serif;
    
    --border-radius: 16px;
    --border-radius-sm: 12px;
    --border-radius-lg: 24px;
    
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);
    
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-primary);
    line-height: 1.6;
    color: var(--gray-900);
    /* min-height + scroll-if-needed, not a hard-clipped height:100vh +
       overflow:hidden - a fixed-height clip silently hides whatever
       doesn't fit (a short phone, a larger system font, landscape mode)
       with no way for the visitor to reach it. dvh accounts for the
       address bar shrinking the viewport; vh is the fallback for the
       handful of browsers that don't support it yet. */
    min-height: 100vh;
    min-height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Light Mode Styles */
body.light-mode {
    color: var(--gray-900);
}

body.light-mode .profile-info {
    color: var(--gray-900);
}

body.light-mode .profile-tagline {
    color: var(--primary-color);
}

body.light-mode .profile-description {
    color: var(--gray-700);
}

body.light-mode .quote-card {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

body.light-mode .quote-card p {
    color: var(--gray-900);
}

body.light-mode .footer-text {
    color: var(--gray-700);
}

/* Blurred Background */
.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Fallback gradient */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    filter: blur(0px);
    transform: scale(1);
    opacity: 1;
    transition: opacity 1s ease-in-out;
}

.background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.4) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.5) 100%
    );
    backdrop-filter: blur(0px);
}

/* Light Mode Background */
body.light-mode .background-overlay {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.88) 0%,
        rgba(243, 244, 246, 0.83) 50%,
        rgba(255, 255, 255, 0.88) 100%
    );
}

body.light-mode .background-image {
    opacity: 0.4 !important;
}

/* Main Container - Fully Responsive */
.linktree-container {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    max-width: 100vw;
    margin: 0 auto;
    padding: clamp(8px, 2vw, 16px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    animation: fadeInUp 0.6s ease-out;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

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

/* Profile Section */
.profile-section {
    text-align: center;
    margin-bottom: clamp(8px, 2vw, 16px);
    animation: slideDown 0.8s ease-out;
    flex-shrink: 0;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.profile-image {
    width: clamp(70px, 12vw, 90px);
    height: clamp(70px, 12vw, 90px);
    margin: 0 auto clamp(8px, 2vw, 12px);
    border-radius: 50%;
    overflow: hidden;
    border: clamp(2px, 0.5vw, 3px) solid var(--white);
    box-shadow: var(--shadow-xl);
    background: var(--white);
    transition: var(--transition);
}

.profile-image:hover {
    transform: scale(1.05) rotate(5deg);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-info {
    color: var(--white);
}

.profile-name {
    font-family: var(--font-secondary);
    font-size: clamp(18px, 4vw, 24px);
    font-weight: 700;
    margin-bottom: clamp(3px, 1vw, 6px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(3px, 1vw, 6px);
    flex-wrap: wrap;
}

.verified-badge {
    width: clamp(16px, 3vw, 22px);
    height: clamp(16px, 3vw, 22px);
    display: inline-block;
    vertical-align: middle;
    filter: drop-shadow(0 2px 6px rgba(29, 155, 240, 0.5));
    animation: pulse 2s infinite;
    flex-shrink: 0;
    margin-left: clamp(2px, 0.5vw, 4px);
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.85;
        transform: scale(1.08);
    }
}

.profile-tagline {
    font-size: 16px;
    font-weight: 500;
    color: var(--secondary-color);
    margin-bottom: 2px;
}

.profile-description {
    font-size: 13px;
    color: var(--gray-300);
    font-weight: 400;
}

/* Quote Carousel */
.quote-carousel {
    width: 100%;
    max-width: 600px;
    margin-bottom: 12px;
    padding: 0 8px;
    flex-shrink: 0;
}

.quote-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: clamp(10px, 2vw, 14px);
    padding: clamp(10px, 2vw, 14px) clamp(14px, 2.5vw, 18px);
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    width: 100%;
    box-sizing: border-box;
    /* Smaller, more subtle */
    min-height: clamp(60px, 12vw, 90px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.quote-card i {
    font-size: clamp(12px, 2.5vw, 16px);
    color: var(--secondary-color);
    margin-bottom: clamp(4px, 1vw, 8px);
    opacity: 0.8;
}

.quote-card p {
    font-size: clamp(11px, 2.2vw, 14px);
    line-height: 1.5;
    color: var(--white);
    font-style: italic;
    margin: 0;
}

.swiper-pagination {
    position: relative;
    margin-top: clamp(4px, 1vw, 8px);
}

.swiper-pagination-bullet {
    background: var(--white);
    opacity: 0.5;
}

.swiper-pagination-bullet-active {
    background: var(--secondary-color);
    opacity: 1;
}

/* Links Container */
.links-container {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 2vw, 14px);
    margin-bottom: clamp(10px, 2.5vw, 16px);
    flex-shrink: 0;
}

.link-item {
    display: flex;
    align-items: center;
    justify-content: center; /* Center content like reference */
    /* Dynamic padding with minimum touch target of 44px height */
    padding: clamp(14px, 3vw, 18px) clamp(16px, 3.5vw, 24px);
    min-height: 48px; /* Slightly larger for better presence */
    background: rgba(255, 255, 255, 0.95);
    border-radius: clamp(12px, 2.5vw, 16px);
    text-decoration: none;
    color: #000000;
    font-weight: 600;
    /* Fluid font size that remains legible */
    font-size: clamp(14px, 3vw, 17px);
    line-height: 1.3;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.link-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transition: left 0.5s;
}

.link-item:hover::before {
    left: 100%;
}

.link-item:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    background: rgba(255, 255, 255, 1);
}

.link-item:active {
    transform: translateY(-2px) scale(0.98);
    animation: pulse-button 0.3s ease;
}

/* Touch device optimizations - Better mobile interaction */
@media (hover: none) and (pointer: coarse) {
    .link-item {
        /* Slightly larger touch targets on mobile */
        min-height: 48px;
        padding: clamp(14px, 3vw, 18px) clamp(16px, 3.5vw, 22px);
    }
    
    .link-item:hover {
        transform: none;
    }
    
    .link-item:active {
        transform: scale(0.97);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        background: rgba(255, 255, 255, 0.85);
    }
}

@keyframes pulse-button {
    0%, 100% {
        box-shadow: var(--shadow-md);
    }
    50% {
        box-shadow: 0 0 20px rgba(37, 99, 235, 0.4);
    }
}

/* Fun icon animations on hover */
.link-item:hover i:first-child {
    animation: icon-bounce 0.6s ease infinite;
}

@keyframes icon-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

.link-item i:first-child {
    font-size: clamp(16px, 3vw, 20px);
    color: var(--primary-color);
    margin-right: clamp(12px, 2vw, 16px);
}

.link-item span {
    flex: 1;
    text-align: left;
}

.link-item i:last-child {
    font-size: clamp(12px, 2.5vw, 16px);
    color: var(--gray-700);
    transition: var(--transition);
}

.link-item:hover i:last-child {
    transform: translateX(4px);
    color: var(--primary-color);
}

/* Mystery Physics Icon - COLORFUL RED GLOWING */
.physics-icon.mystery {
    background: linear-gradient(135deg, #ff4757 0%, #ff3838 50%, #ff6b6b 100%);
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 
        0 4px 15px rgba(255, 71, 87, 0.4),
        0 0 20px rgba(255, 71, 87, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: mysteryGlow 2s ease-in-out infinite alternate;
}

.physics-icon.mystery:hover {
    box-shadow: 
        0 6px 20px rgba(255, 71, 87, 0.6),
        0 0 30px rgba(255, 71, 87, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

@keyframes mysteryGlow {
    0% {
        box-shadow: 
            0 4px 15px rgba(255, 71, 87, 0.4),
            0 0 20px rgba(255, 71, 87, 0.6),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    100% {
        box-shadow: 
            0 4px 15px rgba(255, 71, 87, 0.6),
            0 0 25px rgba(255, 71, 87, 0.8),
            0 0 35px rgba(255, 71, 87, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
}

/* Mystery Modal */
.mystery-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.mystery-modal.active {
    opacity: 1;
    visibility: visible;
}

.mystery-modal-content {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 249, 255, 0.95) 100%);
    border-radius: 20px;
    padding: 0;
    max-width: 450px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(102, 126, 234, 0.3);
    transform: scale(0.7) translateY(50px);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.mystery-modal.active .mystery-modal-content {
    transform: scale(1) translateY(0);
}

.mystery-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px 25px;
    border-radius: 18px 18px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mystery-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.mystery-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    transition: all 0.3s ease;
}

.mystery-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.mystery-body {
    padding: 25px;
}

.mystery-subtitle {
    text-align: center;
    color: var(--gray-700);
    font-size: 14px;
    margin: 0 0 20px 0;
    font-style: italic;
}

.mystery-instructions {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.mystery-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 15px;
    background: rgba(102, 126, 234, 0.08);
    border-radius: 12px;
    border-left: 4px solid #667eea;
    transition: all 0.3s ease;
}

.mystery-item:hover {
    background: rgba(102, 126, 234, 0.12);
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
}

.mystery-icon {
    font-size: 20px;
    min-width: 24px;
    text-align: center;
}

.mystery-text strong {
    display: block;
    color: var(--gray-900);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.mystery-text small {
    display: block;
    color: var(--gray-600);
    font-size: 12px;
    line-height: 1.4;
}

.mystery-footer {
    margin-top: 20px;
    padding: 15px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.mystery-tip {
    margin: 0;
    color: var(--gray-700);
    font-size: 13px;
    text-align: center;
    font-weight: 500;
}

/* Physics Playground Icons - COLORFUL STYLE */
.physics-icon {
    position: absolute;
    width: clamp(48px, 9vw, 58px);
    height: clamp(48px, 9vw, 58px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--white);
    font-size: clamp(22px, 4vw, 28px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    touch-action: none;
    pointer-events: all;
    transition: none;
    z-index: 10;
}

.physics-icon:active {
    cursor: grabbing;
    }

.physics-icon:hover {
    filter: brightness(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    transform: scale(1.05);
}

/* Physics Icon Colors - COLORFUL STYLE (Restored) */
.physics-icon.whatsapp {
    background: var(--whatsapp-color);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.physics-icon.facebook {
    background: var(--facebook-color);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.physics-icon.instagram {
    background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.physics-icon.broadcast {
    background: var(--broadcast-color);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.physics-icon.whatsapp:hover,
.physics-icon.facebook:hover,
.physics-icon.instagram:hover,
.physics-icon.broadcast:hover {
    filter: brightness(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.physics-icon i {
    position: relative;
    z-index: 1;
    pointer-events: none;
}

/* Full-Screen Physics Playground Container */
.physics-playground {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    pointer-events: none;
    z-index: 100;
    overflow: hidden;
}

/* Theme Toggle Button */
.theme-toggle {
    position: fixed;
    top: clamp(16px, 3vw, 20px);
    right: clamp(16px, 3vw, 20px);
    width: clamp(48px, 8vw, 56px);
    height: clamp(48px, 8vw, 56px);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: clamp(1px, 0.3vw, 2px) solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    transition: var(--transition);
    box-shadow: var(--shadow-md);
}

.theme-toggle:hover {
    transform: scale(1.1) rotate(10deg);
    background: rgba(255, 255, 255, 0.25);
    box-shadow: var(--shadow-lg);
}

.theme-toggle i {
    font-size: clamp(20px, 3.5vw, 24px);
    color: var(--white);
    transition: var(--transition);
}

body.light-mode .theme-toggle {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.2);
}

body.light-mode .theme-toggle i {
    color: var(--gray-900);
}

.theme-toggle .theme-icon {
    display: block;
}

.theme-toggle .theme-icon.hidden {
    display: none;
}

/* Footer Text - Fully Responsive */
.footer-text {
    text-align: center;
    color: var(--gray-300);
    font-size: clamp(10px, 2vw, 12px);
    flex-shrink: 0;
    margin-top: clamp(4px, 1vw, 8px);
    padding-bottom: clamp(4px, 1vw, 8px);
}

/* Section Modals */
.section-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.section-modal.active {
    display: flex;
    opacity: 1;
    animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-content {
    background: var(--white);
    border-radius: clamp(12px, 2.5vw, 20px);
    padding: clamp(24px, 4vw, 32px) clamp(18px, 3vw, 24px) clamp(18px, 3vw, 24px);
    /* Responsive max-width that adapts to screen size */
    max-width: min(92vw, 500px);
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: var(--shadow-xl);
    animation: modalSlideUp 0.4s ease;
    box-sizing: border-box;
}

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

.modal-content h2 {
    font-family: var(--font-secondary);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--gray-900);
    text-align: center;
}

.modal-subtitle {
    text-align: center;
    color: var(--gray-700);
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.4;
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gray-100);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--gray-700);
    transition: var(--transition);
}

.close-modal:hover {
    background: var(--gray-300);
    color: var(--gray-900);
    transform: rotate(90deg);
}

/* Modal Grid - Responsive Card Layout */
.modal-grid {
    display: grid;
    /* Responsive grid: 2 columns on desktop, 1 column on mobile */
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
    gap: clamp(10px, 2vw, 16px);
    margin-top: clamp(12px, 2vw, 16px);
}

/* Stack grid on narrow screens */
@media (max-width: 480px) {
    .modal-grid {
        grid-template-columns: 1fr;
        gap: clamp(8px, 2vw, 12px);
    }
}

/* 2-column layout on wider screens */
@media (min-width: 481px) {
    .modal-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.modal-card {
    text-align: center;
    padding: clamp(14px, 2.5vw, 18px) clamp(10px, 2vw, 14px);
    background: var(--gray-100);
    border-radius: clamp(8px, 1.5vw, 12px);
    text-decoration: none;
    color: var(--gray-900);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    /* Ensure minimum touch target */
    min-height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(6px, 1.5vw, 10px);
    box-sizing: border-box;
}

.modal-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
    background: var(--white);
}

/* Touch optimization for modal cards */
@media (hover: none) and (pointer: coarse) {
    .modal-card:hover {
        transform: none;
    }
    
    .modal-card:active {
        transform: scale(0.97);
        background: var(--gray-200);
    }
}

.modal-card-icon {
    width: clamp(40px, 8vw, 52px);
    height: clamp(40px, 8vw, 52px);
    margin: 0 auto clamp(8px, 1.5vw, 12px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, 3.5vw, 24px);
    color: var(--white);
    flex-shrink: 0;
}

.modal-card-icon.whatsapp-bg {
    background: var(--whatsapp-color);
}

.modal-card-icon.facebook-bg {
    background: var(--facebook-color);
}

.modal-card-icon.instagram-bg {
    background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF);
}

.modal-card-icon.broadcast-bg {
    background: var(--broadcast-color);
}

.modal-card h3 {
    font-size: clamp(13px, 2.5vw, 16px);
    font-weight: 600;
    margin-bottom: clamp(3px, 0.8vw, 6px);
    color: var(--gray-900);
    line-height: 1.2;
}

.modal-card p {
    font-size: clamp(11px, 2.2vw, 14px);
    color: var(--gray-700);
    line-height: 1.4;
}

/* Groups List */
.groups-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.group-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--gray-100);
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    color: var(--gray-900);
    transition: var(--transition);
    border: 2px solid transparent;
}

.group-item:hover {
    transform: translateX(8px);
    background: var(--white);
    border-color: var(--whatsapp-color);
    box-shadow: var(--shadow-md);
}

.group-item i {
    font-size: 24px;
    color: var(--whatsapp-color);
    min-width: 24px;
}

.group-item h4 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 2px;
    color: var(--gray-900);
}

.group-item p {
    font-size: 13px;
    color: var(--gray-700);
    margin: 0;
    line-height: 1.2;
}

.groups-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: rgba(245, 158, 11, 0.1);
    border-radius: var(--border-radius-sm);
    margin-top: 16px;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.groups-notice i {
    font-size: 18px;
    color: var(--secondary-color);
    flex-shrink: 0;
}

.groups-notice p {
    font-size: 13px;
    color: var(--gray-800);
    margin: 0;
    line-height: 1.4;
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 16px;
}

.feature-item {
    text-align: center;
    padding: 16px 12px;
    background: var(--gray-100);
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.feature-item:hover {
    transform: translateY(-4px);
    background: var(--white);
    box-shadow: var(--shadow-md);
}

.feature-item i {
    font-size: 28px;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.feature-item h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--gray-900);
}

.feature-item p {
    font-size: 12px;
    color: var(--gray-700);
    margin: 0;
    line-height: 1.3;
}

/* Resources List */
.resources-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.resource-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--gray-100);
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.resource-item:hover {
    background: var(--white);
    box-shadow: var(--shadow-md);
    transform: translateX(8px);
}

.resource-item i {
    font-size: 26px;
    color: var(--success-color);
    min-width: 26px;
}

.resource-item h4 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 2px;
    color: var(--gray-900);
}

.resource-item p {
    font-size: 13px;
    color: var(--gray-700);
    margin: 0;
    line-height: 1.3;
}

/* ========================================
   RESPONSIVE BEHAVIOR
   Most sizing is fluid via clamp() in the base
   rules above, on purpose - that's what actually
   makes this page respond smoothly to arbitrary
   viewport sizes instead of jumping between a
   handful of fixed looks. The queries below only
   handle what clamp() can't: grid column counts,
   and the physics-icon size, which must stay in
   sync with script.js's own breakpoints since the
   script uses that exact number (not a measured
   DOM size) for wall/floor boundaries and icon-to-
   icon collision radii. Each query is a single,
   non-overlapping range - a screen matches exactly
   one of them. Keep it that way: this file
   previously defined several of these same
   breakpoints more than once, so whichever
   duplicate happened to come last in the file
   silently won the cascade over the "more specific"
   one above it, and a chunk of the rules here had
   lost their @media wrapper entirely and applied to
   every screen size, including desktop.
   ======================================== */

.physics-icon {
    width: 55px;
    height: 55px;
    font-size: 24px;
}

@media (max-width: 768px) {
    .physics-icon {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    /* Clearance above the icon dock so it never overlaps the last link
       item or the footer text once the container's own clamp()-based
       padding gets small. */
    .footer-text {
        padding-bottom: 108px;
    }
}

@media (max-width: 480px) {
    .physics-icon {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }

    .footer-text {
        padding-bottom: 92px;
    }
}

@media (max-width: 430px) {
    .physics-icon {
        width: 40px;
        height: 40px;
        font-size: 17px;
    }

    .footer-text {
        padding-bottom: 90px;
    }
}

@media (max-width: 390px) {
    .physics-icon {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    .footer-text {
        padding-bottom: 83px;
    }
}

/* Short viewports (landscape phones, split-screen browsers) - the fluid
   sizing above scales off width, so a wide-but-short viewport still needs
   its own compact pass or the quote carousel and physics dock push the
   links below the fold. */
@media (max-height: 480px) {
    .profile-image {
        width: 56px;
        height: 56px;
    }

    .profile-section {
        margin-bottom: 6px;
    }

    .quote-carousel {
        display: none;
    }

    .footer-text {
        padding-bottom: 8px;
    }

    /* The floating icon dock is fixed to the viewport, not to the (possibly
       scrolled) page content, so on a viewport this short it would sit on
       top of whichever link happens to be at the bottom of the screen and
       block taps on it. The same 4 links are already reachable through the
       "Join Our Community" modal, so drop the decorative overlay here
       rather than let it cover real content. */
    .physics-playground {
        display: none;
    }
}

/* Desktop: cap the container width so the layout doesn't stretch
   edge-to-edge on wide screens. */
@media (min-width: 769px) {
    .linktree-container {
        max-width: 480px;
    }
}

/* Scrollbar Styling */
.modal-content::-webkit-scrollbar {
    width: 8px;
}

.modal-content::-webkit-scrollbar-track {
    background: var(--gray-100);
    border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: var(--gray-700);
}

/* Loading Animation */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.loading {
    animation: shimmer 2s infinite;
    background: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
    background-size: 1000px 100%;
}

/* Accessibility */
.link-item:focus,
.social-icon:focus,
.close-modal:focus {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

/* Print Styles */
@media print {
    .background-container,
    .social-icons,
    .footer-text {
        display: none;
    }
    
    body {
        background: white;
    }

    .linktree-container {
        color: black;
    }
}