/* ============================================
   CROWDTALE: ANNAVERSE - UI FIXES & IMPROVEMENTS
   Comprehensive fixes for UI issues
   ============================================ */

/* ============================================
   1. CONSISTENCY FIXES
   ============================================ */

/* Consistent border radius across all elements */
.panel-section,
.bundle-card,
.achievement-card,
.storefront-item,
.volume-btn-inline,
.settings-dropdown,
.btn-header {
    border-radius: 6px; /* Standardized border radius */
}

/* Consistent gap spacing */
.panel-section,
.chat-view,
.user-account-view,
.settings-view {
    gap: 12px; /* Standardized gap */
}

/* ============================================
   2. TEXT CONTRAST & READABILITY
   ============================================ */

/* Ensure all text is readable */
.message,
.message-content,
.message-text {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* Subtle shadow for readability */
}

/* Better contrast for labels */
.settings-label,
.audio-label,
.player-info-label,
.achievements-label {
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
}

/* ============================================
   3. BUTTON & INTERACTIVE ELEMENT IMPROVEMENTS
   ============================================ */

/* Consistent button padding */
.btn-header {
    padding: 10px 20px;
    min-height: 44px; /* Touch-friendly */
    font-size: 0.9rem;
    font-weight: 600;
}

/* Better button hover states */
.btn-header:hover {
    transform: translateY(-1px);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.3),
        0 0 15px rgba(0, 212, 255, 0.4);
}

.btn-header:active {
    transform: translateY(0);
}

/* ============================================
   4. SCROLLBAR CONSISTENCY
   ============================================ */

/* Consistent scrollbar styling across all scrollable areas */
.chat-messages::-webkit-scrollbar,
.user-account-view::-webkit-scrollbar,
.settings-view::-webkit-scrollbar,
.storefront-items-view::-webkit-scrollbar,
.store-bundles-view-left::-webkit-scrollbar,
.left-panel::-webkit-scrollbar {
    width: 8px;
}

.chat-messages::-webkit-scrollbar-track,
.user-account-view::-webkit-scrollbar-track,
.settings-view::-webkit-scrollbar-track,
.storefront-items-view::-webkit-scrollbar-track,
.store-bundles-view-left::-webkit-scrollbar-track,
.left-panel::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.chat-messages::-webkit-scrollbar-thumb,
.user-account-view::-webkit-scrollbar-thumb,
.settings-view::-webkit-scrollbar-thumb,
.storefront-items-view::-webkit-scrollbar-thumb,
.store-bundles-view-left::-webkit-scrollbar-thumb,
.left-panel::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, 
        rgba(0, 212, 255, 0.6) 0%, 
        rgba(0, 212, 255, 0.4) 100%);
    border-radius: 4px;
    transition: background 0.3s ease;
}

.chat-messages::-webkit-scrollbar-thumb:hover,
.user-account-view::-webkit-scrollbar-thumb:hover,
.settings-view::-webkit-scrollbar-thumb:hover,
.storefront-items-view::-webkit-scrollbar-thumb:hover,
.store-bundles-view-left::-webkit-scrollbar-thumb:hover,
.left-panel::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, 
        rgba(0, 212, 255, 0.8) 0%, 
        rgba(0, 212, 255, 0.6) 100%);
}

/* ============================================
   5. FOCUS STATES FOR ACCESSIBILITY
   ============================================ */

/* Better focus indicators */
.panel-icon:focus,
.volume-btn-inline:focus,
.btn-header:focus,
.settings-dropdown:focus,
.chat-input:focus {
    outline: 2px solid rgba(0, 212, 255, 0.8);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Remove default focus outline and use custom */
*:focus {
    outline: none;
}

/* ============================================
   6. SPACING CONSISTENCY
   ============================================ */

/* Consistent padding */
.panel-section {
    padding: 12px;
}

.chat-view,
.user-account-view,
.settings-view,
.storefront-items-view {
    padding: 12px;
}

/* Consistent margins */
.message {
    margin-bottom: 0; /* Use gap instead */
}

.bundle-card,
.achievement-card,
.storefront-item {
    margin-bottom: 0; /* Use gap instead */
}

/* ============================================
   7. BORDER CONSISTENCY
   ============================================ */

/* All main views should have consistent borders */
.chat-view,
.user-account-view,
.settings-view,
.storefront-items-view,
.store-bundles-view-left {
    border: 2px solid rgba(0, 212, 255, 0.3);
    border-radius: 6px;
}

/* ============================================
   8. ANIMATION PERFORMANCE
   ============================================ */

/* Use transform and opacity for better performance */
.panel-icon,
.volume-btn-inline,
.btn-header,
.bundle-card,
.achievement-card {
    will-change: transform;
    transform: translateZ(0); /* Hardware acceleration */
}

/* Reduce animations on mobile for better performance */
@media (max-width: 768px) {
    * {
        animation-duration: 0.2s !important;
        transition-duration: 0.2s !important;
    }
    
    /* Disable heavy animations on mobile */
    .title-section::before,
    .title-section::after {
        animation: none !important;
    }
}

/* ============================================
   9. TOUCH TARGET SIZES
   ============================================ */

/* Ensure all interactive elements are touch-friendly */
.panel-icon,
.volume-btn-inline,
.btn-header,
.settings-dropdown {
    min-height: 44px;
    min-width: 44px;
}

@media (max-width: 768px) {
    .panel-icon {
        min-width: 48px;
        min-height: 48px;
    }
    
    .volume-btn-inline {
        min-width: 48px;
        min-height: 48px;
    }
}

/* ============================================
   10. TEXT TRUNCATION PREVENTION
   ============================================ */

/* Prevent text from being cut off */
.bundle-title,
.bundle-description,
.storefront-item-name,
.storefront-item-description,
.achievement-card *,
.player-info-label,
.stat-label,
.stat-value {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* ============================================
   11. IMAGE & ICON CONSISTENCY
   ============================================ */

/* Consistent icon sizing */
.panel-icon {
    font-size: 1.2rem;
}

.volume-icon-inline {
    font-size: 1.5rem;
}

.input-icon {
    font-size: 1rem;
}

/* Image aspect ratio */
.bundle-image-placeholder img,
.storefront-item-image img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* ============================================
   12. LOADING STATES
   ============================================ */

/* Better loading indicators */
.rewards-loading,
.store-loading {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
}

/* ============================================
   13. ERROR STATES
   ============================================ */

/* Error message styling */
.error-message,
.rewards-message {
    padding: 15px;
    background: rgba(255, 0, 0, 0.1);
    border: 1px solid rgba(255, 0, 0, 0.3);
    border-radius: 6px;
    color: #ff6666;
    text-align: center;
}

/* ============================================
   14. SUCCESS STATES
   ============================================ */

.success-message {
    padding: 15px;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: 6px;
    color: #00ff88;
    text-align: center;
}

/* ============================================
   15. Z-INDEX MANAGEMENT
   ============================================ */

/* Proper z-index layering */
.panel-icons-section {
    z-index: 10;
}

.modal {
    z-index: 10000;
}

.notification {
    z-index: 10001;
}

/* ============================================
   16. RESPONSIVE TEXT SIZES
   ============================================ */

@media (max-width: 480px) {
    .header-title {
        font-size: 1.3rem;
    }
    
    .bundle-title {
        font-size: 1rem;
    }
    
    .storefront-item-name {
        font-size: 1rem;
    }
    
    .message {
        font-size: 0.9rem;
    }
}

/* ============================================
   17. INPUT FIELD IMPROVEMENTS
   ============================================ */

.chat-input {
    font-size: 1rem;
    line-height: 1.5;
    padding: 10px 12px;
}

.chat-input:focus {
    border-color: rgba(0, 212, 255, 0.6);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

/* ============================================
   18. CARD HOVER STATES
   ============================================ */

/* Consistent hover effects */
.bundle-card:hover,
.achievement-card:hover,
.storefront-item:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* ============================================
   19. DISABLED STATES
   ============================================ */

/* Better disabled state styling */
button:disabled,
.btn-header:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================
   20. SELECTION STATES
   ============================================ */

/* Better text selection */
::selection {
    background: rgba(0, 212, 255, 0.3);
    color: #ffffff;
}

::-moz-selection {
    background: rgba(0, 212, 255, 0.3);
    color: #ffffff;
}

/* ============================================
   21. PRINT STYLES (if needed)
   ============================================ */

@media print {
    .panel-icons-section,
    .chat-input-section,
    .volume-controls-inline {
        display: none;
    }
}

/* ============================================
   22. HIGH CONTRAST MODE SUPPORT
   ============================================ */

@media (prefers-contrast: high) {
    .chat-view,
    .user-account-view,
    .settings-view {
        border-width: 3px;
    }
    
    .message {
        border-width: 2px;
    }
}

/* ============================================
   23. REDUCED MOTION SUPPORT
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   24. FIX OVERLAPPING ELEMENTS
   ============================================ */

/* Ensure no elements overlap */
.panel-section {
    position: relative;
    z-index: 1;
}

.panel-section::before,
.panel-section::after {
    z-index: 0;
}

/* ============================================
   25. IMPROVE VISUAL HIERARCHY
   ============================================ */

/* Better visual separation */
.settings-section {
    margin-bottom: 15px;
}

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

/* ============================================
   26. FIX SCROLLING ISSUES
   ============================================ */

/* Ensure smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Prevent scroll chaining on mobile */
@media (max-width: 768px) {
    .left-panel {
        overscroll-behavior: contain;
    }
}

/* ============================================
   27. IMPROVE NOTIFICATION POSITIONING
   ============================================ */

#notification-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
    max-width: 400px;
    pointer-events: none;
}

#notification-container .notification {
    pointer-events: auto;
    margin-bottom: 10px;
}

/* ============================================
   28. FIX MODAL BACKDROP
   ============================================ */

.modal-backdrop {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

/* ============================================
   29. IMPROVE FORM ELEMENTS
   ============================================ */

.form-control,
.settings-dropdown {
    transition: all 0.3s ease;
}

.form-control:invalid {
    border-color: rgba(255, 0, 0, 0.5);
}

.form-control:valid {
    border-color: rgba(0, 255, 136, 0.5);
}

/* ============================================
   30. CONSISTENT SHADOWS
   ============================================ */

/* Standardized shadow depths */
.shadow-sm {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.shadow-md {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.shadow-lg {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

/* ============================================
   31. TEXT OVERFLOW FIXES
   ============================================ */

/* Prevent text from overflowing containers */
.storefront-item-name,
.storefront-item-description,
.bundle-title,
.bundle-description,
.achievement-card *,
.message,
.message-content {
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
}

/* ============================================
   32. IMPROVE CONTRAST RATIOS
   ============================================ */

/* Better text contrast for accessibility */
.stat-label,
.audio-label,
.settings-label {
    color: rgba(255, 255, 255, 0.9) !important;
}

.stat-value,
.slider-value {
    color: #00d4ff !important;
    font-weight: 600;
}

/* ============================================
   33. FIX SPACING INCONSISTENCIES
   ============================================ */

/* Consistent gap values */
.volume-controls-inline {
    gap: 10px;
}

.panel-icons-left,
.panel-icons-right {
    gap: 12px;
}

.audio-controls {
    gap: 12px;
}

/* ============================================
   34. IMPROVE CARD LAYOUTS
   ============================================ */

/* Better card spacing */
.bundle-card {
    margin-bottom: 0;
}

.achievement-card {
    margin-bottom: 0;
}

.storefront-item {
    margin-bottom: 0;
}

/* ============================================
   35. FIX BORDER INCONSISTENCIES
   ============================================ */

/* All main containers should have consistent borders */
.chat-view,
.user-account-view,
.settings-view,
.storefront-items-view,
.store-bundles-view-left,
.game-content-wrapper {
    border: 2px solid rgba(0, 212, 255, 0.3);
    border-radius: 6px;
}

/* ============================================
   36. IMPROVE ICON ALIGNMENT
   ============================================ */

/* Better icon centering */
.panel-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.volume-icon-inline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ============================================
   37. FIX MODAL STYLING
   ============================================ */

.modal-content {
    border-radius: 8px;
    overflow: hidden;
}

.modal-header {
    border-bottom: 1px solid rgba(0, 212, 255, 0.2);
    padding: 15px 20px;
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    border-top: 1px solid rgba(0, 212, 255, 0.2);
    padding: 15px 20px;
}

/* ============================================
   38. IMPROVE SLIDER APPEARANCE
   ============================================ */

.audio-slider {
    cursor: grab;
}

.audio-slider:active {
    cursor: grabbing;
}

/* ============================================
   39. FIX Z-INDEX LAYERING
   ============================================ */

/* Proper stacking order */
.left-panel,
.right-panel {
    position: relative;
    z-index: 1;
}

.panel-icons-section {
    position: relative;
    z-index: 10;
}

.modal {
    z-index: 10000;
}

.modal-backdrop {
    z-index: 9999;
}

#notification-container {
    z-index: 10001;
}

/* ============================================
   40. IMPROVE RESPONSIVE BEHAVIOR
   ============================================ */

/* Better mobile spacing */
@media (max-width: 768px) {
    /* Swap panel order on mobile: game panel (right-panel) on top, chat panel (left-panel) on bottom */
    .left-panel {
        order: 2 !important; /* Chat panel goes to bottom */
        height: 35% !important; /* Reduced height for left panel */
        min-height: 35% !important;
        border-top: 2px solid rgba(0, 212, 255, 0.6) !important; /* Border on top instead of bottom */
        border-bottom: none !important;
    }
    
    .right-panel {
        order: 1 !important; /* Game panel goes to top */
        height: 65% !important; /* Increased height for right panel */
        min-height: 65% !important;
    }
    
    .panel-section {
        padding: 10px;
    }
    
    .chat-view,
    .user-account-view,
    .settings-view {
        padding: 10px;
        gap: 10px;
    }
    
    .storefront-items-view {
        padding: 12px;
        gap: 12px;
    }
}

/* ============================================
   41. FIX VISUAL GLITCHES
   ============================================ */

/* Prevent layout shifts */
.bundle-image-placeholder,
.storefront-item-image {
    aspect-ratio: 1 / 1;
}

/* Prevent text selection on buttons */
.btn-header,
.panel-icon,
.volume-btn-inline {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* ============================================
   42. IMPROVE LOADING STATES
   ============================================ */

.rewards-loading,
.store-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
}

/* ============================================
   43. FIX OVERFLOW ISSUES
   ============================================ */

/* Ensure no horizontal overflow */
* {
    max-width: 100%;
}

img {
    max-width: 100%;
    height: auto;
}

/* ============================================
   44. IMPROVE BUTTON STATES
   ============================================ */

/* Better active states */
.btn-header:active,
.panel-icon:active,
.volume-btn-inline:active {
    transform: scale(0.98);
}

/* ============================================
   45. FIX SCROLLING BEHAVIOR
   ============================================ */

/* Smooth scrolling for all scrollable areas */
.chat-messages,
.user-account-view,
.settings-view,
.storefront-items-view,
.store-bundles-view-left,
.left-panel {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* ============================================
   46. IMPROVE VISUAL FEEDBACK
   ============================================ */

/* Better hover feedback */
.bundle-card:hover,
.achievement-card:hover,
.storefront-item:hover {
    cursor: pointer;
}

/* ============================================
   47. FIX COLOR CONSISTENCY
   ============================================ */

/* Consistent accent color usage */
.stat-value,
.slider-value,
.gem-prefix,
.text-accent {
    color: #00d4ff;
}

/* ============================================
   48. IMPROVE FORM VALIDATION VISUALS
   ============================================ */

.form-control:focus:invalid {
    border-color: rgba(255, 102, 102, 0.6);
    box-shadow: 0 0 10px rgba(255, 102, 102, 0.3);
}

.form-control:focus:valid {
    border-color: rgba(0, 255, 136, 0.6);
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

/* ============================================
   49. FIX MOBILE SPECIFIC ISSUES
   ============================================ */

@media (max-width: 480px) {
    /* Reduce padding on very small screens */
    .panel-section {
        padding: 8px;
    }
    
    .chat-view,
    .user-account-view,
    .settings-view {
        padding: 8px;
    }
    
    /* Better touch targets */
    .btn-header {
        min-height: 48px;
        padding: 12px 16px;
    }
    
    /* Smaller gaps on mobile */
    .volume-controls-inline {
        gap: 8px;
    }
    
    .panel-icons-left,
    .panel-icons-right {
        gap: 8px;
    }
}

/* ============================================
   50. FINAL POLISH
   ============================================ */

/* Ensure all interactive elements have proper cursor */
button,
.panel-icon,
.volume-btn-inline,
.bundle-card,
.achievement-card,
.storefront-item,
.settings-dropdown {
    cursor: pointer;
}

/* Better transition timing */
* {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Prevent unwanted text selection */
.panel-icon,
.volume-btn-inline {
    -webkit-tap-highlight-color: rgba(0, 212, 255, 0.3);
}