/**
 * Essential Text and Brightness Fixes
 * Restores crucial readability improvements without breaking Matrix glow effects
 */

/* === CRITICAL BRIGHTNESS/OPACITY CLASSES === */

/* Text opacity variations for improved readability */
.text-green-400\/90 {
    color: rgba(0, 255, 65, 0.9) !important;
}

.text-green-400\/80 {
    color: rgba(0, 255, 65, 0.8) !important;
}

.text-green-400\/70 {
    color: rgba(0, 255, 65, 0.7) !important;
}

.text-green-400\/60 {
    color: rgba(0, 255, 65, 0.6) !important;
}

.text-green-400\/50 {
    color: rgba(0, 255, 65, 0.5) !important;
}

/* === MISSING MATRIX COMPONENT CLASSES === */

/* Stats card icon styling */
.card-stats-matrix-icon {
    color: var(--matrix-green) !important;
    margin-bottom: 1rem !important;
    font-size: 2rem !important;
    display: block !important;
    text-align: center !important;
}

/* Text readability improvements - fix individual_gamers and similar brightness issues */
.text-readable {
    color: rgba(0, 255, 65, 0.85) !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
}

/* Specific fixes for landing page text elements */
p.text-green-400\/80,
.text-green-400\/80 {
    color: rgba(0, 255, 65, 0.8) !important;
    line-height: 1.6 !important;
}

p.text-green-400\/70,
.text-green-400\/70 {
    color: rgba(0, 255, 65, 0.7) !important;
    line-height: 1.6 !important;
}

/* === ESSENTIAL COMPONENT CLASSES === */

/* Button and interface component fixes */
.close-btn {
    background: transparent !important;
    border: 1px solid rgba(0, 255, 65, 0.5) !important;
    color: var(--matrix-green) !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 4px !important;
    font-family: var(--matrix-font-mono) !important;
    font-size: 0.75rem !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.close-btn:hover {
    border-color: var(--matrix-green) !important;
    background: rgba(0, 255, 65, 0.1) !important;
}

/* Theme system button classes */
.theme-btn,
.theme-action-btn,
.switch-btn,
.preview-btn,
.unlock-btn {
    background: transparent !important;
    border: 2px solid rgba(0, 255, 65, 0.5) !important;
    color: var(--matrix-green) !important;
    padding: 0.5rem 1rem !important;
    border-radius: 4px !important;
    font-family: var(--matrix-font-mono) !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.theme-btn:hover,
.theme-action-btn:hover,
.switch-btn:hover,
.preview-btn:hover,
.unlock-btn:hover {
    border-color: var(--matrix-green) !important;
    background: rgba(0, 255, 65, 0.1) !important;
    box-shadow: 0 0 10px rgba(0, 255, 65, 0.3) !important;
}

.locked-btn,
.preview-close-btn,
.unlock-close-btn {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Theme card styling */
.theme-card {
    background: rgba(0, 0, 0, 0.8) !important;
    border: 2px solid rgba(0, 255, 65, 0.3) !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    transition: all 0.3s ease !important;
}

.theme-card:hover {
    border-color: var(--matrix-green) !important;
    box-shadow: 0 0 15px rgba(0, 255, 65, 0.2) !important;
}

/* Export and queue components */
.export-queue-btn {
    background: linear-gradient(135deg, var(--matrix-green), var(--matrix-green-dark)) !important;
    color: var(--matrix-black) !important;
    border: none !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 6px !important;
    font-family: var(--matrix-font-mono) !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.export-queue-btn:hover {
    box-shadow: 0 0 20px rgba(0, 255, 65, 0.4) !important;
    transform: translateY(-2px) !important;
}

.option-card {
    background: rgba(0, 0, 0, 0.7) !important;
    border: 2px solid rgba(0, 255, 65, 0.3) !important;
    border-radius: 8px !important;
    padding: 1.5rem !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.option-card:hover,
.option-card.selected {
    border-color: var(--matrix-green) !important;
    background: rgba(0, 0, 0, 0.9) !important;
    box-shadow: 0 0 20px rgba(0, 255, 65, 0.3) !important;
}

/* === GRADIENT CLASSES FOR BACKGROUNDS === */

.from-black\/60 {
    --tw-gradient-from: rgba(0, 0, 0, 0.6) !important;
    --tw-gradient-to: rgba(0, 0, 0, 0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-black\/90 {
    --tw-gradient-from: rgba(0, 0, 0, 0.9) !important;
    --tw-gradient-to: rgba(0, 0, 0, 0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-green-400\/30 {
    --tw-gradient-from: rgba(0, 255, 65, 0.3) !important;
    --tw-gradient-to: rgba(0, 255, 65, 0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-green-400\/50 {
    --tw-gradient-from: rgba(0, 255, 65, 0.5) !important;
    --tw-gradient-to: rgba(0, 255, 65, 0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-black\/95 {
    --tw-gradient-to: rgba(0, 0, 0, 0.95) !important;
}

.to-green-400\/30 {
    --tw-gradient-to: rgba(0, 255, 65, 0.3) !important;
}

.via-green-400\/60 {
    --tw-gradient-to: rgba(0, 255, 65, 0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), rgba(0, 255, 65, 0.6), var(--tw-gradient-to) !important;
}

/* === PLACEHOLDER OPACITY CLASSES === */

.placeholder-green-400\/50::placeholder {
    color: rgba(0, 255, 65, 0.5) !important;
}

.placeholder-green-400\/60::placeholder {
    color: rgba(0, 255, 65, 0.6) !important;
}

/* === ASPECT RATIO UTILITY CLASSES === */

.aspect-w-3 {
    position: relative !important;
    padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%) !important;
    --tw-aspect-w: 3;
}

.aspect-h-4 {
    --tw-aspect-h: 4;
}

.aspect-w-3 > * {
    position: absolute !important;
    height: 100% !important;
    width: 100% !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
}

/* === HOME PAGE SPECIFIC CLASSES === */

.achievement-section,
.features-showcase,
.testimonials-section,
.problem-solution-section {
    background: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(0, 255, 65, 0.2) !important;
    border-radius: 12px !important;
    padding: 3rem 2rem !important;
    margin: 2rem 0 !important;
}

.final-cta-section {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 255, 65, 0.1)) !important;
    border: 2px solid rgba(0, 255, 65, 0.3) !important;
    border-radius: 12px !important;
    padding: 4rem 2rem !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
}

.final-cta-button {
    background: linear-gradient(135deg, var(--matrix-green), var(--matrix-green-dark)) !important;
    color: var(--matrix-black) !important;
    border: none !important;
    padding: 1rem 2rem !important;
    font-size: 1.125rem !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-family: var(--matrix-font-mono) !important;
}

.final-cta-button:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 25px rgba(0, 255, 65, 0.4) !important;
}

/* === MOBILE RESPONSIVENESS === */

@media (max-width: 768px) {
    .achievement-section,
    .features-showcase,
    .testimonials-section,
    .problem-solution-section {
        padding: 1.5rem 1rem !important;
        margin: 1rem 0 !important;
    }
    
    .final-cta-section {
        padding: 2rem 1rem !important;
    }
    
    .card-stats-matrix-icon {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .theme-btn,
    .theme-action-btn,
    .switch-btn,
    .preview-btn,
    .unlock-btn {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.75rem !important;
    }
}

/* === TEXT BRIGHTNESS OVERRIDE FOR SPECIFIC CONTENT === */

/* Fix overly bright text in specific contexts */
.hero-section p,
.feature-description,
.testimonial-text {
    color: rgba(0, 255, 65, 0.8) !important;
}

.secondary-text,
.muted-text,
.help-text {
    color: rgba(0, 255, 65, 0.7) !important;
}

.subtle-text,
.metadata-text {
    color: rgba(0, 255, 65, 0.6) !important;
}

/* Improve readability in different sections */
section p:not(.text-matrix-glow):not(.heading-matrix) {
    color: rgba(0, 255, 65, 0.85) !important;
    line-height: 1.6 !important;
}

/* === CARD BRIGHTNESS FIXES === */

/* Fix overly bright card-matrix-glow effect */
.card-matrix-glow {
    box-shadow: 
        0 0 10px rgba(0, 255, 65, 0.15) !important,
        var(--matrix-shadow-subtle) !important;
}

.card-matrix-glow::before {
    background: linear-gradient(45deg, 
        rgba(0, 255, 65, 0.3), 
        transparent, 
        rgba(0, 255, 65, 0.3)
    ) !important;
}

.card-matrix-glow:hover {
    box-shadow: 
        0 0 15px rgba(0, 255, 65, 0.2) !important,
        var(--matrix-shadow-subtle) !important;
}

/* === MOBILE RESPONSIVENESS IMPROVEMENTS === */

@media (max-width: 768px) {
    /* Landing page mobile fixes */
    .hero-section {
        min-height: auto !important;
        padding: 2rem 1rem !important;
    }
    
    .hero-section .grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .hero-section h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    
    .hero-section p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }
    
    /* Fix mobile text wrapping for heading-matrix h2 elements */
    .heading-matrix.text-4xl,
    h2.heading-matrix.text-4xl {
        font-size: clamp(1.5rem, 5vw, 2.25rem) !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
        hyphens: auto !important;
        overflow-wrap: break-word !important;
    }
    
    /* Specific fix for cards containing heading-matrix */
    .card-matrix .heading-matrix.text-4xl,
    .card-matrix-glow .heading-matrix.text-4xl,
    .terminal-window .heading-matrix.text-4xl {
        font-size: clamp(1.25rem, 4.5vw, 2rem) !important;
        margin-bottom: 1rem !important;
        padding: 0 0.5rem !important;
        white-space: normal !important;
        word-break: break-all !important;
        overflow-wrap: anywhere !important;
    }
    
    /* Fix for long platform initialization text - much smaller font */
    .terminal-body p.text-sm.text-green-400\\/70,
    p.font-mono.uppercase.tracking-wide {
        font-size: clamp(0.35rem, 1.5vw, 0.875rem) !important;
        letter-spacing: clamp(-0.05em, 0.2vw, 0.05em) !important;
        line-height: 1.2 !important;
        padding: 0 0.125rem !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: visible !important;
        max-width: 100% !important;
        transform: scale(0.8) !important;
        transform-origin: center !important;
    }
    
    /* Specific fix for terminal body content on mobile */
    .terminal-body {
        padding: 1rem 0.5rem !important;
        text-align: center !important;
    }
    
    /* Special handling for text with underscores or long words */
    .heading-matrix.text-4xl:contains("_"),
    .heading-matrix.text-4xl {
        word-spacing: 0.1em !important;
    }
    
    /* Force break for very long concatenated words */
    .card-matrix .heading-matrix.text-4xl,
    .card-matrix-glow .heading-matrix.text-4xl,
    .terminal-window .heading-matrix.text-4xl {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Compact button groups on mobile */
    .btn-group {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    /* Terminal window mobile optimization */
    .terminal-window {
        margin: 1rem 0 !important;
    }
    
    .terminal-body {
        padding: 1rem !important;
    }
    
    /* Card grids mobile optimization */
    .grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Stats cards mobile */
    .card-stats-matrix {
        padding: 1rem !important;
    }
    
    .card-stats-matrix-value {
        font-size: 1.5rem !important;
    }
    
    /* Section padding mobile */
    .py-20 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
}

/* === FORM STYLING IMPROVEMENTS === */

/* Contact form and general form improvements */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    color: var(--matrix-green) !important;
    font-family: var(--matrix-font-mono) !important;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100% !important;
    background: rgba(0, 0, 0, 0.8) !important;
    border: 2px solid rgba(0, 255, 65, 0.3) !important;
    border-radius: 4px !important;
    padding: 0.75rem 1rem !important;
    color: var(--matrix-green) !important;
    font-family: var(--matrix-font-mono) !important;
    font-size: 0.9rem !important;
    transition: all 0.3s ease !important;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none !important;
    border-color: var(--matrix-green) !important;
    box-shadow: 0 0 8px rgba(0, 255, 65, 0.3) !important;
    background: rgba(0, 0, 0, 0.9) !important;
}

/* Checkbox styling fixes */
.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
}

.checkbox-item {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(0, 255, 65, 0.2);
    border-radius: 4px;
    transition: all 0.3s ease;
}

.checkbox-item:hover {
    border-color: rgba(0, 255, 65, 0.5);
    background: rgba(0, 0, 0, 0.8);
}

.checkbox-item label {
    margin: 0 !important;
    font-size: 0.8rem !important;
    text-transform: none !important;
    cursor: pointer;
}

/* === LAYOUT IMPROVEMENTS === */

/* Fix 2-column grids alignment */
@media (min-width: 1024px) {
    .grid-cols-1.lg\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
        max-width: 75%;
        margin: 0 auto;
    }
    
    .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
        max-width: 100%;
        margin: 0;
    }
}

/* Section spacing improvements */
section:has(.card-stats-matrix) {
    padding-bottom: 4rem !important;
}

section:has(.card-stats-matrix) + section {
    padding-top: 4rem !important;
}

/* === ACCESSIBILITY IMPROVEMENTS === */

/* Focus states for accessibility */
.btn-matrix-primary:focus,
.btn-matrix-secondary:focus {
    outline: 2px solid var(--matrix-green) !important;
    outline-offset: 2px !important;
}

/* Respect user's motion preferences - but preserve Matrix core animations */
@media (prefers-reduced-motion: reduce) {
    /* Disable most animations but preserve core Matrix effects */
    .animate-matrix-fade-in,
    .animate-matrix-fade-in-up,
    .animate-matrix-fade-in-down,
    .animate-matrix-fade-in-left,
    .animate-matrix-fade-in-right {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
    
    /* Keep Matrix pulse and glow for visual identity */
    .animate-matrix-pulse,
    .animate-matrix-glow {
        animation-duration: 1s !important;
        animation-iteration-count: infinite !important;
    }
    
    /* Reduce transition durations */
    * {
        transition-duration: 0.1s !important;
        scroll-behavior: auto !important;
    }
}

/* === TERMINAL STYLING CONSISTENCY === */

/* Ensure consistent terminal header styling */
.terminal-header {
    background: rgba(0, 255, 65, 0.1) !important;
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid rgba(0, 255, 65, 0.3) !important;
    font-family: var(--matrix-font-mono) !important;
    font-size: 0.875rem !important;
    color: var(--matrix-green) !important;
    text-align: center !important;
    position: relative !important;
}

/* Remove all terminal dots completely */
.terminal-header::before {
    display: none !important;
    content: none !important;
}

.terminal-body {
    padding: 2rem !important;
}

/* Terminal window improvements */
.terminal-window {
    background: rgba(0, 0, 0, 0.9) !important;
    border: 2px solid var(--matrix-green) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 255, 65, 0.2) !important;
    margin-bottom: 2rem !important;
}

/* === IMPROVED BUTTON STYLES === */

/* Button group layout */
.btn-group {
    display: flex !important;
    gap: 1rem !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

/* === HIGH CONTRAST SUPPORT === */

@media (prefers-contrast: high) {
    .btn-matrix-primary {
        background-color: var(--matrix-green) !important;
        color: var(--matrix-black) !important;
        border: 2px solid var(--matrix-black) !important;
    }
    
    .btn-matrix-secondary {
        border-width: 3px !important;
        color: var(--matrix-green) !important;
    }
    
    .terminal-window,
    .card-matrix,
    .form-section {
        border-width: 3px !important;
    }
}

/* === EXTRA SMALL MOBILE DEVICES === */

@media (max-width: 480px) {
    /* Even more aggressive text wrapping for very small screens */
    .heading-matrix.text-4xl,
    h2.heading-matrix.text-4xl {
        font-size: clamp(1rem, 4vw, 1.5rem) !important;
        line-height: 1.2 !important;
        letter-spacing: 0.02em !important;
    }
    
    /* Cards on extra small screens */
    .card-matrix .heading-matrix.text-4xl,
    .card-matrix-glow .heading-matrix.text-4xl,
    .terminal-window .heading-matrix.text-4xl {
        font-size: clamp(0.9rem, 3.5vw, 1.25rem) !important;
        margin-bottom: 0.75rem !important;
        padding: 0 0.25rem !important;
        text-align: center !important;
    }
    
    /* Terminal headers on extra small screens */
    .terminal-header {
        padding: 0.5rem !important;
        font-size: 0.75rem !important;
    }
    
    .terminal-body {
        padding: 0.75rem 0.5rem !important;
    }
    
    /* Ultra-small screen fix - extremely small font with scaling */
    .terminal-body p.text-sm.text-green-400\\/70,
    p.font-mono.uppercase.tracking-wide {
        font-size: clamp(0.25rem, 1.2vw, 0.5rem) !important;
        letter-spacing: clamp(-0.08em, 0.1vw, 0.01em) !important;
        line-height: 1.1 !important;
        padding: 0 0.125rem !important;
        white-space: nowrap !important;
        overflow: visible !important;
        transform: scale(0.65) !important;
        transform-origin: center !important;
    }
}

/* === NAVIGATION LINK FIXES === */

/* Ensure navigation links don't inherit terminal pseudo-elements */
.nav-matrix-unified a,
.nav-link-unified,
header a,
nav a,
.navigation a {
    position: relative !important;
}

.nav-matrix-unified a::before,
.nav-matrix-unified a::after,
.nav-link-unified::before,
.nav-link-unified::after,
header a::before,
header a::after,
nav a::before,
nav a::after,
.navigation a::before,
.navigation a::after {
    display: none !important;
    content: none !important;
}

/* Clean navigation link styling */
.nav-matrix-unified .nav-link-unified,
header .nav-link-unified {
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* === AUTH/REGISTER TEMPLATE SPECIFIC FIXES === */

/* Fix oversized form fields in auth/register terminal windows */
.auth-register-container .terminal-body {
    padding: 1.5rem 1rem !important;
}

.auth-register-container .terminal-window .terminal-body {
    padding: 1rem 0.75rem !important;
}

/* Form field sizing fixes for auth/register - much smaller */
.auth-register-container input[type="text"],
.auth-register-container input[type="email"],
.auth-register-container input[type="password"],
.auth-register-container select,
.auth-register-container textarea {
    padding: 0.375rem 0.5rem !important;
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
    height: auto !important;
    min-height: 2rem !important;
    max-height: 2.5rem !important;
}

/* Auth/register card text treatment - similar to root_landing */
.auth-register-container .heading-matrix.text-3xl,
.auth-register-container .heading-matrix.text-4xl {
    font-size: clamp(1.25rem, 4vw, 1.875rem) !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

/* Fix for INITIALIZE_NEW_USER text - responsive sizing with proper wrapping */
.auth-register-container .terminal-body h2.heading-matrix,
.auth-register-container h2.heading-matrix {
    font-size: clamp(0.9rem, 3.2vw, 2.25rem) !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    line-height: 1.3 !important;
    max-width: 100% !important;
}

/* Remove dots from auth/register terminal headers */
.auth-register-container .terminal-header::before,
.auth-register-container .terminal-header::after {
    display: none !important;
    content: none !important;
}

/* Fix auth/register terminal header text wrapping */
.auth-register-container .terminal-header span {
    font-size: clamp(0.7rem, 2.8vw, 0.875rem) !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.2 !important;
}

/* Auth terminal body padding adjustment */
.auth-register-container .terminal-body.text-center.py-8 {
    padding: 1.5rem 0.75rem !important;
}

/* Mobile fixes for auth/register */
@media (max-width: 768px) {
    .auth-register-container .terminal-body {
        padding: 1rem 0.5rem !important;
    }
    
    .auth-register-container .terminal-body.p-3 {
        padding: 0.75rem !important;
    }
    
    .auth-register-container .heading-matrix.text-3xl {
        font-size: clamp(1rem, 3.5vw, 1.5rem) !important;
        margin-bottom: 0.75rem !important;
    }
    
    .auth-register-container input[type="text"],
    .auth-register-container input[type="email"],
    .auth-register-container input[type="password"],
    .auth-register-container select,
    .auth-register-container textarea {
        padding: 0.25rem 0.375rem !important;
        font-size: 0.75rem !important;
        min-height: 1.75rem !important;
        max-height: 2rem !important;
    }
    
    /* Fix INITIALIZE_NEW_USER text on mobile */
    .auth-register-container .terminal-body h2.heading-matrix,
    .auth-register-container h2.heading-matrix {
        font-size: clamp(0.7rem, 2.2vw, 1.5rem) !important;
        word-break: break-all !important;
        overflow-wrap: anywhere !important;
    }
    
    /* Fix auth/register terminal header on mobile */
    .auth-register-container .terminal-header span {
        font-size: clamp(0.6rem, 2vw, 0.75rem) !important;
        word-break: break-all !important;
        overflow-wrap: anywhere !important;
    }
}

/* Extra small screens for auth/register */
@media (max-width: 480px) {
    .auth-register-container .terminal-body {
        padding: 0.75rem 0.25rem !important;
    }
    
    .auth-register-container .heading-matrix.text-3xl {
        font-size: clamp(0.875rem, 3vw, 1.25rem) !important;
        word-break: break-all !important;
        overflow-wrap: anywhere !important;
    }
    
    .auth-register-container input[type="text"],
    .auth-register-container input[type="email"],
    .auth-register-container input[type="password"],
    .auth-register-container select,
    .auth-register-container textarea {
        padding: 0.25rem 0.375rem !important;
        font-size: 0.75rem !important;
    }
}

/* === IPHONE SPECIFIC FIXES === */

/* iPhone Pro and similar narrow screens */
@media (max-width: 375px) {
    .terminal-body p.text-sm.text-green-400\\/70,
    p.font-mono.uppercase.tracking-wide {
        font-size: 0.25rem !important;
        letter-spacing: -0.1em !important;
        transform: scale(0.5) !important;
        transform-origin: center !important;
        white-space: nowrap !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* === MATRIX ANIMATION PRESERVATION === */

/* Ensure Matrix pulse animation works for hexagonal elements */
.animate-matrix-pulse {
    animation: matrix-pulse 2.5s ease-in-out infinite !important;
}

/* Ensure Matrix glow animation is preserved */
.animate-matrix-glow {
    animation: matrix-glow 2s ease-in-out infinite alternate !important;
}

/* Fix for hexagonal Matrix elements in the hero section */
div[style*="animation-delay"] .animate-matrix-pulse {
    animation-play-state: running !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure background matrix animation is visible but subtle */
.matrix-bg-animation {
    opacity: 0.1 !important;
    z-index: -1 !important;
}

/* === TERMINAL-MOCK CONSISTENCY === */

/* Fix terminal-mock styling to match terminal-header */
.terminal-mock {
    background: rgba(0, 0, 0, 0.95) !important;
    border: 2px solid var(--matrix-green) !important;
    border-radius: 8px !important;
    padding: 0 !important;
    font-family: var(--matrix-font-mono) !important;
    color: var(--matrix-green) !important;
    box-shadow: 0 0 20px rgba(0, 255, 65, 0.3) !important;
    overflow: hidden !important;
}

/* Terminal-mock header styling */
.terminal-mock .terminal-header {
    background: rgba(0, 255, 65, 0.1) !important;
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid rgba(0, 255, 65, 0.3) !important;
    font-family: var(--matrix-font-mono) !important;
    font-size: 0.875rem !important;
    color: var(--matrix-green) !important;
    text-align: center !important;
    position: relative !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* Terminal-mock dots styling */
.terminal-mock .terminal-dots,
.terminal-mock .terminal-buttons {
    display: flex !important;
    gap: 0.25rem !important;
    align-items: center !important;
}

/* Remove all terminal-mock dots completely */
.terminal-mock .terminal-dots::before,
.terminal-mock .terminal-buttons::before,
.terminal-mock .terminal-header::before {
    display: none !important;
    content: none !important;
}

/* Terminal-mock body content */
.terminal-mock .terminal-content,
.terminal-mock > div:not(.terminal-header) {
    padding: 1rem !important;
}

/* Command styling within terminal-mock */
.terminal-mock .command {
    display: block !important;
    margin: 0.5rem 0 !important;
    font-size: 0.9rem !important;
    color: var(--matrix-green) !important;
    font-family: var(--matrix-font-mono) !important;
}