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

/* Standardized Button Styles */
.btn-primary, .btn-secondary, .start-button, .stop-button, .modal-btn {
    font-family: 'Poppins', sans-serif;
    font-weight: 500; /* Medium */
    font-size: 1.2rem;
    text-transform: none;
    letter-spacing: 0;
}

body, html {
    height: 100vh; /* Only one full-height section */
    width: 100vw;
    overflow-x: hidden;
    font-family: 'Arial', sans-serif;
    scroll-behavior: smooth;
}

/* Initially prevent scrolling */
body.no-scroll {
    overflow: hidden;
    height: 100vh;
}

/* Allow scrolling after START is clicked */
body.allow-scroll {
    overflow-y: auto;
    height: 100vh;
}

/* Homepage Styles */
.homepage {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-image: url('image/backgroundtext.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Logo Refresh Button Styles */
.logo-refresh-button {
    position: absolute;
    top: 30px;
    left: 50px; /* Moved 20px to the right (from 30px to 50px) */
    z-index: 1000;
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    padding: 10px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.logo-refresh-button:hover {
    transform: scale(1.1) rotate(180deg);
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.logo-refresh-button:active {
    transform: scale(0.95) rotate(180deg);
}

.logo-image {
    width: 40px;
    height: 40px;
    display: block;
    transition: all 0.3s ease;
}

.logo-refresh-button:hover .logo-image {
    filter: brightness(1.2);
}

.homepage-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    padding-bottom: 80px;
}

.colourbar-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.5); /* Enlarged from 1.3 to 1.5 */
    width: calc(100% - 40px); /* Small margin on both sides */
    max-width: 1200px; /* Reasonable max width */
    z-index: -1; /* Place behind the background text */
    display: flex;
    justify-content: center;
    align-items: center;
}

.colourbar-image {
    width: 100%;
    height: auto;
    opacity: 0;
    animation: fadeInOutCycle 8s ease-in-out infinite; /* 3s fade in + 2s pause + 3s fade out = 8s total */
    display: block;
    margin: 0 auto;
}

@keyframes fadeInOutCycle {
    0% {
        opacity: 0; /* Start invisible */
    }
    37.5% {
        opacity: 1; /* Fade in complete (3s / 8s = 37.5%) */
    }
    62.5% {
        opacity: 1; /* Hold visible for 2s (2s / 8s = 25%, so 37.5% + 25% = 62.5%) */
    }
    100% {
        opacity: 0; /* Fade out complete (3s fade out, back to 0) */
    }
}

.paintings-container {
    position: absolute;
    top: calc(50% + 50px); /* Moved 50px down from center */
    right: 260px; /* Moved 30px to the left (from 230px to 260px) */
    transform: translateY(-50%) scale(1.7825); /* Enlarged by 15% from 1.55 */
    z-index: 1; /* Above the background but below controls */
    max-width: 300px; /* Reasonable max width */
    width: 25%; /* Responsive width */
}

.paintings-image {
    width: 100%;
    height: auto;
    opacity: 1; /* Always visible */
    transition: opacity 0.3s ease;
}

/* Hover effect to change paintings.png to paintingsguide.png */
.paintings-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('image/paintingsguide.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 2;
}

.paintings-container:hover::after {
    opacity: 1;
}

.paintings-container:hover .paintings-image {
    opacity: 0;
}

.background-image-container {
    display: none; /* Hide the image container since we're using background-image */
}

.background-image {
    display: none; /* Hide the img element */
}

.homepage-controls {
    position: relative;
    display: flex;
    justify-content: center;
}

.start-button {
    position: relative;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.15);
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-radius: 50px;
    padding: 15px 30px;
    color: black;
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.3);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    
    /* Chrome-specific button fixes */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
    isolation: isolate;
}

.start-button:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.25);
    border-color: rgba(0, 0, 0, 0.5);
    transform: translateY(-3px);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.start-button:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.start-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Mobile Responsiveness for Homepage */
@media (max-width: 768px) {
    .logo-refresh-button {
        top: 20px;
        left: 40px; /* Moved 20px to the right (from 20px to 40px) */
        padding: 8px;
    }
    
    .logo-image {
        width: 35px;
        height: 35px;
    }
    
    .homepage-content {
        padding-bottom: 40px;
    }
    
    .start-button {
        padding: 12px 24px;
        font-size: 16px;
    }
    
    .colourbar-container {
        width: calc(100% - 20px); /* Smaller margins on mobile */
        max-width: none;
    }
    
    .paintings-container {
        top: calc(50% + 50px); /* Moved 50px down from center on mobile */
        right: 245px; /* Moved 30px to the left (from 215px to 245px) */
        max-width: 250px; /* Smaller max width */
        width: 28%; /* Adjusted width for mobile */
        transform: translateY(-50%) scale(1.7825); /* Maintain enlarged scale */
    }
}

@media (max-width: 480px) {
    .logo-refresh-button {
        top: 10px;
        left: 30px; /* Moved 20px to the right (from 10px to 30px) */
        padding: 10px;
    }
    
    .logo-image {
        width: 35px;
        height: 35px;
    }
    
    .colourbar-container {
        width: calc(100% - 10px); /* Even smaller margins on very small screens */
    }
    
    .paintings-container {
        top: calc(50% + 50px); /* Moved 50px down from center on very small screens */
        right: 235px; /* Moved 30px to the left (from 205px to 235px) */
        max-width: 200px; /* Smaller max width */
        width: 30%; /* Slightly larger percentage for better visibility */
        transform: translateY(-50%) scale(1.7825); /* Maintain enlarged scale */
    }
}

.gradient-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    /* Background will be set dynamically by JavaScript */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
    /* Smooth transitions between GIF backgrounds */
    transition: background-image 0.5s ease-in-out;
}

/* Remove floating particles effect completely */

.stop-button {
    position: relative;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.15);
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-radius: 50px;
    padding: 15px 30px;
    color: black;
    cursor: pointer;
    /* Enable smooth transitions for hover effects */
    transition: all 0.3s ease;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.3);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.stop-button:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.25);
    border-color: rgba(0, 0, 0, 0.5);
    transform: translateY(-3px);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.stop-button:active:not(:disabled) {
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(0, 0, 0, 0.6);
    transform: translateY(0);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.stop-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal.visible {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 40px;
    max-width: 500px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.modal.visible .modal-content {
    transform: scale(1);
}

.modal h3 {
    color: #333;
    margin-bottom: 20px;
    font-size: 24px;
}

.modal p {
    color: #666;
    margin-bottom: 30px;
    word-break: break-all;
    background: #f5f5f5;
    padding: 15px;
    border-radius: 10px;
    font-family: monospace;
}

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

.modal-btn {
    background: #007bff;
    color: white;
    border: none;
    border-radius: 25px;
    padding: 12px 24px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal-btn:hover:not(:disabled) {
    background: #0056b3;
    transform: translateY(-3px);
}

.modal-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.modal-btn.secondary {
    background: #6c757d;
}

.modal-btn.secondary:hover:not(:disabled) {
    background: #545b62;
}

/* Loading Styles */
.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    color: white;
}

.loading.visible {
    display: flex;
}

.magic-cube-animation {
    width: 360px;
    height: 360px;
    background-image: url('image/magiccube.gif');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 30px;
}

.loading-analysis-text {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    color: white;
    text-align: center;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    letter-spacing: 0.5px;
}

/* Keyboard Loading Styles */
.keyboard-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.605);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    color: white;
}

.keyboard-loading.visible {
    display: flex;
}

.keyboard-animation {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.keyboard-gif {
    width: auto;
    height: auto;
    max-width: 400px;
    max-height: 300px;
    display: block;
}

.keyboard-loading-text {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    color: white;
    text-align: center;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    letter-spacing: 0.5px;
}

/* Hide the old spinner */
.spinner {
    display: none;
}

/* Utility Classes */
.hidden {
    display: none !important;
}

/* Animation Control */
.gradient-container.paused {
    animation-play-state: paused;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .stop-button {
        padding: 12px 24px;
        font-size: 16px;
    }
    
    .modal-content {
        padding: 30px 20px;
        width: 95%;
    }
    
    .modal-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .modal-btn {
        width: 200px;
    }
    
    .magic-cube-animation {
        width: 270px;
        height: 270px;
    }
    
    .loading-analysis-text {
        font-size: 0.85rem;
    }
    
    .keyboard-gif {
        max-width: 320px;
        max-height: 240px;
    }
    
    .keyboard-loading-text {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .magic-cube-animation {
        width: 210px;
        height: 210px;
    }
    
    .loading-analysis-text {
        font-size: 0.8rem;
        padding: 0 20px;
    }
    
    .keyboard-gif {
        max-width: 280px;
        max-height: 210px;
    }
    
    .keyboard-loading-text {
        font-size: 0.8rem;
        padding: 0 20px;
    }
}

/* Force hide any potential overlay rectangles */
.modal.hidden,
.loading.hidden {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
    backdrop-filter: none !important;
}



/* Ensure modal and loading never show accidentally */
.modal:not(.visible),
.loading:not(.visible) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
}

/* Chrome-specific rendering optimizations */
@supports (-webkit-appearance: none) {
    /* Prevent Chrome stacking context bugs */
    .modal, .loading {
        contain: layout style paint;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}



/* Capture Prompt Styles */
.capture-prompt {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    color: black;
    font-size: 1.1rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 400; /* Regular */
    text-align: center;
    max-width: 600px;
    padding: 0 20px;
    opacity: 0;
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.2),
        0 8px 16px rgba(0, 0, 0, 0.1),
        0 0 20px rgba(255, 255, 255, 0.8);
    line-height: 1.5;
}

.capture-prompt.visible {
    opacity: 1;
}

.capture-prompt.hidden {
    opacity: 0;
}

.capture-prompt.animating {
    animation: capturePromptCycle 12.5s infinite;
}

@keyframes capturePromptCycle {
    0% { opacity: 0; }
    24% { opacity: 0.7; }       /* 3s fade in to 70% opacity out of 12.5s total */
    52% { opacity: 0.7; }       /* 3.5s pause at 70% opacity (3s + 3.5s = 6.5s out of 12.5s) */
    76% { opacity: 0; }         /* 3s fade out (6.5s + 3s = 9.5s out of 12.5s) */
    100% { opacity: 0; }        /* 3s hidden (9.5s + 3s = 12.5s total) */
}

.prompt-step {
    font-family: 'Poppins', sans-serif;
    font-weight: 700; /* Bold */
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.prompt-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 1.1rem;
}

/* Responsive styles for capture prompt */
@media (max-width: 768px) {
    .capture-prompt {
        top: 60px;
        font-size: 1.1rem;
        font-family: 'Poppins', sans-serif;
        font-weight: 400; /* Regular */
        max-width: 500px;
        padding: 0 15px;
        text-shadow: 
            0 2px 3px rgba(0, 0, 0, 0.3),
            0 3px 6px rgba(0, 0, 0, 0.2),
            0 6px 12px rgba(0, 0, 0, 0.1),
            0 0 15px rgba(255, 255, 255, 0.7);
    }
}

@media (max-width: 480px) {
    .capture-prompt {
        top: 50px;
        font-size: 1.1rem;
        font-family: 'Poppins', sans-serif;
        font-weight: 400; /* Regular */
        max-width: 350px;
        padding: 0 10px;
        line-height: 1.4;
        text-shadow: 
            0 1px 2px rgba(0, 0, 0, 0.3),
            0 2px 4px rgba(0, 0, 0, 0.2),
            0 4px 8px rgba(0, 0, 0, 0.1),
            0 0 10px rgba(255, 255, 255, 0.6);
    }
}

/* Controls styling */
.controls {
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
    display: flex;
    gap: 20px;
    align-items: center;
    
    /* Ensure no inherited animations */
    animation: none !important;
    transition: none !important;
    will-change: auto;
}

/* Capture button initially hidden until prompt appears, but allow JavaScript override */
.controls #stop-btn:not([data-recapture]):not([style*="opacity: 1"]) {
    opacity: 0;
    visibility: hidden;
}

/* Ensure re-capture buttons are always visible */
.controls #stop-btn[data-recapture] {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Gallery Page Styles */
#gallery-page {
    display: none;
    min-height: 100vh;
    background: 
        radial-gradient(circle at 20% 20%, rgba(30, 30, 30, 0.8) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(15, 15, 25, 0.9) 0%, transparent 50%),
        radial-gradient(circle at 40% 60%, rgba(20, 25, 35, 0.7) 0%, transparent 40%),
        linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #000000 100%);
    padding: 40px 20px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    z-index: 2000;
    /* Enhanced scrolling for better drag experience */
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.6) rgba(255, 255, 255, 0.1);
}

/* Custom scrollbar for webkit browsers */
#gallery-page::-webkit-scrollbar {
    width: 8px;
}

#gallery-page::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

#gallery-page::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    transition: background 0.3s ease;
}

#gallery-page::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.8);
}

.gallery-container {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.gallery-title {
    color: #ffffff;
    font-size: 2.5rem !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 200 !important; /* ExtraLight */
    margin-bottom: 15px;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    letter-spacing: 0;
}

.gallery-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 200; /* ExtraLight */
    font-style: normal;
    margin-bottom: 50px;
}

/* Colour Dashboard Styles */
.colour-dashboard {
    background: 
        radial-gradient(circle at center, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 70%),
        rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    backdrop-filter: blur(20px);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 60px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    /* Ensure chart hover expansion is not clipped */
    overflow: visible;
    position: relative;
    /* Add extra space for hover expansion */
    margin-top: 20px;
    /* Subtle animation for elegance */
    transition: box-shadow 0.3s ease, background 0.3s ease;
}

/* Enhanced hover effect for the dashboard - REMOVED */

.dashboard-title {
    color: rgba(255, 255, 255, 0.9);
    font-size: 2.5rem;
    font-weight: 300;
    margin-bottom: 25px;
    letter-spacing: 1px;
}

.chart-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    position: relative;
    width: 350px;
    height: 350px;
    margin: 0 auto 15px auto;
    /* No external padding needed - Chart.js handles internal spacing */
    padding: 0;
    /* Ensure no clipping occurs */
    overflow: visible;
    /* Reduced diffusion container effects */
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.08));
}

    .pie-chart {
        width: 100% !important;
        height: 100% !important;
        max-width: 350px !important;
        max-height: 350px !important;
        border-radius: 50%;
        position: relative;
        /* Ensure no overflow clipping */
        overflow: visible;
        /* Reduced diffusion glow effects */
        box-shadow: 
            0 0 15px rgba(255, 255, 255, 0.12),
            0 0 25px rgba(255, 255, 255, 0.06),
            0 8px 25px rgba(0, 0, 0, 0.25),
            inset 0 0 0 1px rgba(255, 255, 255, 0.08);
        /* Add subtle border for definition */
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    /* Color Bar Styles */
    .color-bar {
        width: 100% !important;
        height: 60px !important;
        max-width: 350px !important;
        border-radius: 30px;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: stretch;
        box-shadow: 
            0 0 15px rgba(255, 255, 255, 0.12),
            0 0 25px rgba(255, 255, 255, 0.06),
            0 8px 25px rgba(0, 0, 0, 0.25),
            inset 0 0 0 1px rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.05);
        background: transparent;
    }

    /* Color bars within palette analysis container match image width */
    .palette-analysis-container .color-bar,
    .palette-analysis-container .raw-color-bar,
    .palette-analysis-container #color-palette-bar,
    .palette-analysis-container #raw-color-palette-bar {
        width: 100% !important;
        height: 60px !important;
        max-width: 800px !important;
        margin: 0 auto !important;
        display: flex !important;
    }

    .color-segment {
        height: 100%;
        transition: all 0.3s ease;
        position: relative;
        cursor: pointer;
    }

    .color-segment:first-child {
        border-top-left-radius: 30px;
        border-bottom-left-radius: 30px;
    }

    .color-segment:last-child {
        border-top-right-radius: 30px;
        border-bottom-right-radius: 30px;
        border-right: none !important;
    }

    .color-segment:hover {
        transform: scaleY(1.1) !important;
        filter: brightness(1.2) !important;
        z-index: 10 !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    }

    /* Color Sections Styles - Updated for vertical layout */
    .raw-colors-section,
    .mapped-colors-section {
        width: 100%;
        margin-bottom: 40px;
    }

    .raw-colors-section {
        margin-bottom: 40px;
    }

    .raw-colors-title,
    .mapped-colors-title {
        color: rgba(255, 255, 255, 0.9);
        font-size: 1.5rem;
        font-family: 'Poppins', sans-serif;
        font-weight: 300; /* Light */
        text-align: center;
        margin-bottom: 20px;
        letter-spacing: 0.5px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .raw-color-bar {
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .raw-color-segment {
        border-right: 1px solid rgba(255, 255, 255, 0.2);
    }

    .raw-color-segment:last-child {
        border-right: none !important;
    }

/* Ensure the canvas element itself allows expansion */
.chart-container canvas {
    overflow: visible !important;
    /* Allow the chart to expand beyond its base size */
    transform-origin: center center;
    /* Ensure chart is above other elements during hover */
    position: relative;
    z-index: 10;
    /* Remove any clipping boundaries */
    clip-path: none;
    /* Ensure no borders constrain the chart */
    border: none;
    outline: none;
    /* Ensure canvas takes full container size */
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    /* Reduced diffusion canvas effects */
    border-radius: 50%;
    filter: 
        drop-shadow(0 0 12px rgba(255, 255, 255, 0.15))
        drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3))
        brightness(1.03)
        contrast(1.08);
    /* Smooth transitions for hover effects */
    transition: filter 0.1s ease, transform 0.1s ease;
}

/* Enhanced hover effects for the canvas */
.chart-container:hover canvas {
    filter: 
        drop-shadow(0 0 18px rgba(255, 255, 255, 0.22))
        drop-shadow(0 6px 15px rgba(0, 0, 0, 0.4))
        brightness(1.06)
        contrast(1.12);
    transform: scale(1.02);
}

.colour-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 15px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%),
        rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.2),
        0 0 20px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    /* Transition removed to prevent hover feedback */
    backdrop-filter: blur(10px);
}

/* Enhanced hover effect for legend items - REMOVED */

.legend-colour {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 
        0 0 10px rgba(255, 255, 255, 0.2),
        0 2px 6px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    /* Transition removed to prevent hover feedback */
    position: relative;
}

/* Enhanced hover effect for legend colors - REMOVED */

.legend-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 400; /* Regular */
    text-transform: capitalize;
}

.mapping-explanation-section {
    margin-top: 20px;
}

.mapping-question-text {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 500; /* Medium */
    color: rgba(255, 255, 255, 0.8);
    text-align: left;
    line-height: 1.4;
    margin-bottom: 8px;
}

.mapping-answer-text {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 300; /* Light */
    color: rgba(255, 255, 255, 0.8);
    text-align: left;
    line-height: 1.5;
}

.emotion-prediction-section {
    margin-top: 30px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

.emotion-question-text {
    font-family: 'Poppins', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
}

.emotion-answer-text {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: #555;
    line-height: 1.6;
}

/* Emotion Selection Styles */
.emotion-selection-title-section {
    text-align: center;
    margin-bottom: 40px;
    color: white;
}

.emotion-step-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    margin-bottom: 10px;
}

.emotion-main-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    color: white;
    line-height: 1.4;
}

/* New emotion prediction container with same style as palette analysis */
.emotion-prediction-container {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 40px;
    margin-bottom: 40px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.emotion-cards-container {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.emotion-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    border: 2px solid transparent;
    padding: 20px;
    width: 280px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    backdrop-filter: blur(10px);
}

.emotion-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.15);
}

.emotion-card.emotion-card-selected {
    border: 2px solid white;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.2);
}

/* Legacy support for old emotion containers */
.emotion-banners-container {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.emotion-container {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    border: 2px solid transparent;
    padding: 20px;
    width: 280px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    backdrop-filter: blur(10px);
}

.emotion-container:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.15);
}

.emotion-container.emotion-selected {
    border: 2px solid white;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.2);
}

/* New emotion card elements */
.emotion-card-name {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 15px;
    text-transform: capitalize;
}

.emotion-card-image-container {
    width: 100%;
    height: 200px;
    margin-bottom: 15px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.emotion-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.emotion-card-placeholder {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    color: #ccc;
    text-transform: capitalize;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    border: 2px dashed rgba(255, 255, 255, 0.3);
}

.emotion-card-probability {
    font-family: 'Poppins', sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
    color: white;
    margin-bottom: 5px;
}

.emotion-card-description {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: white;
    text-align: center;
}

/* Legacy emotion elements */
.emotion-image-container {
    width: 100%;
    height: 200px;
    margin-bottom: 20px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.emotion-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.emotion-placeholder {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    color: #ccc;
    text-transform: capitalize;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    border: 2px dashed rgba(255, 255, 255, 0.3);
}

.emotion-cancel-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: #ff4444;
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

.emotion-cancel-btn:hover {
    background: #cc0000;
    transform: scale(1.1);
}

.emotion-name {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 5px;
    text-transform: capitalize;
}

.emotion-probability {
    font-family: 'Poppins', sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
    color: white;
    margin-bottom: 5px;
}

.emotion-description {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: white;
    text-align: center;
}

.emotion-continue-btn {
    display: block;
    margin: 20px auto;
    padding: 15px 40px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 25px;
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.emotion-continue-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.emotion-continue-btn:disabled {
    background: #666;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.6;
}

.more-feelings-btn {
    display: block;
    margin: 20px auto;
    padding: 15px 30px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 25px;
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.more-feelings-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.more-feelings-btn:disabled,
.more-feelings-btn.disabled {
    background: #666;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.6;
}

/* Legacy reset button styles */
.reset-mood-btn {
    display: block;
    margin: 20px auto;
    padding: 15px 30px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
    color: white;
    border: none;
    border-radius: 25px;
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

.reset-mood-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
}

.reset-mood-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Mobile Responsiveness for Emotion Selection */
@media (max-width: 768px) {
    .emotion-prediction-container {
        padding: 30px 20px;
        margin-bottom: 30px;
    }
    
    .emotion-cards-container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    
    .emotion-card {
        width: 100%;
        max-width: 300px;
    }
    
    .emotion-card-name {
        font-size: 1.3rem;
        margin-bottom: 10px;
    }
    
    .emotion-card-image-container {
        height: 150px;
        margin-bottom: 10px;
    }
    
    .emotion-card-probability {
        font-size: 1.6rem;
    }
    
    .emotion-card-description {
        font-size: 1rem;
    }
    
    .emotion-step-title {
        font-size: 1.1rem;
    }
    
    .emotion-main-title {
        font-size: 1.1rem;
        padding: 0 10px;
    }
    
    .more-feelings-btn {
        font-size: 1rem;
        padding: 12px 25px;
    }
    
    /* Legacy mobile styles */
    .emotion-banners-container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    
    .emotion-container {
        width: 100%;
        max-width: 300px;
    }
    
    .emotion-image-container {
        height: 150px;
    }
    
    .emotion-name {
        font-size: 1.3rem;
    }
    
    .emotion-probability {
        font-size: 1.6rem;
    }
    
    .emotion-description {
        font-size: 1rem;
    }
    
    .emotion-continue-btn {
        font-size: 1.1rem;
        padding: 12px 30px;
    }
    
    .reset-mood-btn {
        font-size: 1rem;
        padding: 12px 25px;
    }
}

@media (max-width: 480px) {
    .emotion-prediction-container {
        padding: 25px 15px;
        margin-bottom: 25px;
    }
    
    .emotion-card {
        width: 100%;
        max-width: 280px;
        padding: 15px;
    }
    
    .emotion-card-name {
        font-size: 1.2rem;
        margin-bottom: 8px;
    }
    
    .emotion-card-image-container {
        height: 120px;
        margin-bottom: 8px;
    }
    
    .emotion-card-probability {
        font-size: 1.5rem;
    }
    
    .emotion-card-description {
        font-size: 0.95rem;
    }
    
    .emotion-step-title {
        font-size: 1rem;
    }
    
    .emotion-main-title {
        font-size: 1rem;
        padding: 0 15px;
    }
    
    .more-feelings-btn {
        font-size: 0.95rem;
        padding: 10px 20px;
    }
    
    /* Legacy mobile styles */
    .emotion-container {
        width: 100%;
        max-width: 280px;
        padding: 15px;
    }
    
    .emotion-image-container {
        height: 120px;
    }
    
    .emotion-name {
        font-size: 1.2rem;
    }
    
    .emotion-probability {
        font-size: 1.5rem;
    }
    
    .emotion-description {
        font-size: 0.95rem;
    }
    
    .emotion-continue-btn {
        font-size: 1rem;
        padding: 10px 25px;
    }
}

.gallery-grid {
    display: flex;
    flex-direction: row;
    gap: 15px; /* Reduced from 30px to half the spacing */
    margin-bottom: 50px;
    padding-left: 30px;
    padding-right: 30px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    /* Custom scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.4) rgba(255, 255, 255, 0.1);
    /* Add padding to accommodate hover scaling */
    padding-top: 40px;
    padding-bottom: 60px;
}

/* Custom scrollbar for webkit browsers */
.gallery-grid::-webkit-scrollbar {
    height: 8px;
}

.gallery-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.gallery-grid::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 4px;
    transition: background 0.3s ease;
    /* Create a shorter thumb using background gradient */
    background: linear-gradient(to right, 
        transparent 33%, 
        rgba(255, 255, 255, 0.4) 33%, 
        rgba(255, 255, 255, 0.4) 67%, 
        transparent 67%);
}

.gallery-grid::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to right, 
        transparent 33%, 
        rgba(255, 255, 255, 0.6) 33%, 
        rgba(255, 255, 255, 0.6) 67%, 
        transparent 67%);
}

/* Scroll indicator shadows */
.gallery-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent);
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-container::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 100%;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.3), transparent);
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-container:hover::before,
.gallery-container:hover::after {
    opacity: 1;
}

.gallery-item {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    /* Fixed width for horizontal layout */
    min-width: 320px;
    max-width: 320px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.gallery-item:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.6);
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.4);
    z-index: 10;
    /* Enhanced glow effect */
    filter: brightness(1.1) saturate(1.2);
}

.thumbnail-container {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
    pointer-events: auto; /* Ensure events can pass through */
}

.thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    filter: brightness(0.9) contrast(1.1);
    /* Allow drag events to bubble up */
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    /* Prevent default image drag behavior */
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
}

.gallery-item:hover .thumbnail-image {
    transform: scale(1.08);
    filter: brightness(1.1) contrast(1.3) saturate(1.1);
}

.gallery-item.dragging .thumbnail-image {
    filter: brightness(1.1) contrast(1.3) saturate(1.2);
}

.thumbnail-overlay {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 400; /* Regular */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    pointer-events: none; /* This should not capture events */
    z-index: 15;
}

.view-full-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 10;
    backdrop-filter: blur(5px);
}

.gallery-item:hover .view-full-overlay {
    opacity: 1;
}

.view-full-text {
    color: white;
    font-size: 0.8rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 400; /* Regular */
    text-align: center;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
    transition: opacity 0.3s ease;
}

/* New detailed hover content */
.view-full-content {
    color: white;
    font-family: 'Poppins', sans-serif;
    text-align: center;
    padding: 0 15px;
    opacity: 0;
    transition: opacity 0.3s ease;
    line-height: 1.4;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
}

.gallery-item:hover .view-full-content {
    opacity: 1;
}

.gallery-item:hover .default-text {
    opacity: 0;
}

.painting-title {
    font-size: 0.8rem;
    font-weight: 500; /* Medium */
    margin-bottom: 4px;
    color: white;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
}

.painting-artist-year {
    font-size: 0.8rem;
    font-weight: 500; /* Medium */
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
}

.painting-action {
    font-size: 0.8rem;
    font-weight: 300; /* Light */
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
}

.btn-primary {
    background: linear-gradient(135deg, #1a1a1a 0%, #333333 50%, #1a1a1a 100%);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.2);
    padding: 18px 35px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
    background: linear-gradient(135deg, #333333 0%, #555555 50%, #333333 100%);
    border-color: rgba(255, 255, 255, 0.4);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.btn-primary:active:not(:disabled) {
    transform: translateY(-1px);
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Responsive Design for Gallery */
@media (max-width: 768px) {
    .palette-content-layout {
        gap: 30px;
        margin: 30px 0;
        max-width: 100%;
        padding: 0 15px;
    }
    
    .captured-image-section {
        width: 100%;
        max-width: 100%;
    }
    
    .captured-image-title {
        font-size: 1.5rem;
        font-weight: 300; /* Light */
        margin-bottom: 15px;
    }
    
    .raw-colors-title,
    .mapped-colors-title {
        font-size: 1.5rem;
        font-weight: 300; /* Light */
        margin-bottom: 15px;
    }
    
    .captured-image-container {
        padding: 15px;
        border-radius: 15px;
    }
    
    .captured-palette-image {
        border-radius: 12px;
    }
    
    .gallery-title {
        font-size: 2rem !important;
        font-family: 'Poppins', sans-serif !important;
        font-weight: 200 !important; /* ExtraLight */
    }
    
    .colour-dashboard {
        padding: 20px;
        margin-bottom: 30px;
    }
    
    .dashboard-title {
        font-size: 1.2rem;
    }
    
        .chart-container {
        width: 250px;
        height: 250px;
        padding: 0;
        /* Reduce effects intensity on mobile */
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.06));
    }

    .pie-chart {
        width: 100% !important;
        height: 100% !important;
        max-width: 250px !important;
        max-height: 250px !important;
        /* Simplified shadows for mobile performance */
        box-shadow: 
            0 0 10px rgba(255, 255, 255, 0.1),
            0 4px 15px rgba(0, 0, 0, 0.2),
            inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    }

    .color-bar {
        width: 100% !important;
        height: 50px !important;
        max-width: 250px !important;
        border-radius: 25px;
        /* Simplified shadows for mobile performance */
        box-shadow: 
            0 0 10px rgba(255, 255, 255, 0.1),
            0 4px 15px rgba(0, 0, 0, 0.2),
            inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    }

    /* Palette analysis color bars maintain full width on tablet */
    .palette-analysis-container .color-bar,
    .palette-analysis-container .raw-color-bar,
    .palette-analysis-container #color-palette-bar,
    .palette-analysis-container #raw-color-palette-bar {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        height: 50px !important;
    }
    
    .palette-analysis-container .chart-container {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .color-segment:first-child {
        border-top-left-radius: 25px;
        border-bottom-left-radius: 25px;
    }

    .color-segment:last-child {
        border-top-right-radius: 25px;
        border-bottom-right-radius: 25px;
    }

    .raw-colors-title,
    .mapped-colors-title {
        font-size: 1.1rem;
        margin-bottom: 15px;
    }
    
    .colour-legend {
        gap: 15px;
    }
    
    .legend-item {
        padding: 6px 
    }
    
    .gallery-grid {
        gap: 10px; /* Reduced from 20px to maintain half spacing on tablet */
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 30px;
        padding-bottom: 50px;
    }
    
    .gallery-item {
        min-width: 280px;
        max-width: 280px;
    }
    
    .gallery-item:hover {
        transform: translateY(-3px) scale(1.05);
    }
    
    .thumbnail-container {
        height: 220px;
    }
    
    /* Responsive painting info styles for tablet */
    .painting-title {
        font-size: 0.75rem;
        margin-bottom: 3px;
    }
    
    .painting-artist-year {
        font-size: 0.75rem;
        margin-bottom: 6px;
    }
    
    .painting-action {
        font-size: 0.75rem;
    }
    
    .gallery-controls {
        flex-direction: column;
        align-items: center;
    }
    
    .btn-primary {
        width: 100%;
        max-width: 300px;
        padding: 15px 25px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .palette-content-layout {
        gap: 20px;
        margin: 20px 0;
        max-width: 100%;
        padding: 0 10px;
    }
    
    .captured-image-section {
        width: 100%;
        max-width: 100%;
    }
    
    .captured-image-title {
        font-size: 1.5rem;
        font-weight: 300; /* Light */
        margin-bottom: 12px;
    }
    
    .raw-colors-title,
    .mapped-colors-title {
        font-size: 1.5rem;
        font-weight: 300; /* Light */
        margin-bottom: 12px;
    }
    
    .captured-image-container {
        padding: 12px;
        border-radius: 12px;
    }
    
    .captured-palette-image {
        border-radius: 10px;
    }
    
    #gallery-page {
        padding: 20px 10px;
    }
    
    .gallery-grid {
        gap: 8px; /* Reduced from 15px to maintain half spacing on mobile */
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 25px;
        padding-bottom: 40px;
    }
    
    .gallery-item {
        min-width: 240px;
        max-width: 240px;
    }
    
    .gallery-item:hover {
        transform: translateY(-3px) scale(1.05);
    }
    
    .thumbnail-container {
        height: 180px;
    }
    
    /* Responsive painting info styles for mobile */
    .painting-title {
        font-size: 0.7rem;
        margin-bottom: 2px;
        line-height: 1.2;
    }
    
    .painting-artist-year {
        font-size: 0.7rem;
        margin-bottom: 4px;
        line-height: 1.2;
    }
    
    .painting-action {
        font-size: 0.7rem;
        line-height: 1.2;
    }
    
    .view-full-content {
        padding: 0 10px;
        width: 95%;
    }
    
    .gallery-title {
        font-size: 2rem !important;
        font-family: 'Poppins', sans-serif !important;
        font-weight: 200 !important; /* ExtraLight */
    }
    
    .gallery-subtitle {
        font-size: 1rem;
        font-family: 'Poppins', sans-serif;
        font-weight: 200; /* ExtraLight */
        font-style: normal;
    }
    
    .colour-dashboard {
        padding: 15px;
    }
    
        .chart-container {
        width: 200px;
        height: 200px;
        padding: 0;
        /* Minimal effects for smallest screens */
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.05));
    }

    .pie-chart {
        width: 100% !important;
        height: 100% !important;
        max-width: 200px !important;
        max-height: 200px !important;
        /* Minimal shadows for performance */
        box-shadow: 
            0 0 8px rgba(255, 255, 255, 0.08),
            0 2px 10px rgba(0, 0, 0, 0.15);
    }

    .color-bar {
        width: 100% !important;
        height: 40px !important;
        max-width: 200px !important;
        border-radius: 20px;
        /* Minimal shadows for performance */
        box-shadow: 
            0 0 8px rgba(255, 255, 255, 0.08),
            0 2px 10px rgba(0, 0, 0, 0.15);
    }

    /* Palette analysis color bars maintain full width on mobile */
    .palette-analysis-container .color-bar,
    .palette-analysis-container .raw-color-bar,
    .palette-analysis-container #color-palette-bar,
    .palette-analysis-container #raw-color-palette-bar {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        height: 40px !important;
    }
    
    .palette-analysis-container .chart-container {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .color-segment:first-child {
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
    }

    .color-segment:last-child {
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
    }

    .raw-colors-title,
    .mapped-colors-title {
        font-size: 1rem;
        margin-bottom: 12px;
    }
    
    .colour-legend {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    
    .legend-item {
        width: 100%;
        max-width: 200px;
        justify-content: center;
    }
}

/* Selection Area Styles */
.selection-area {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px;
    margin: 50px 0 30px 0; /* More space above, less below */
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    text-align: center;
    /* Ensure it's easily accessible */
    position: relative;
    z-index: 1;
}

.selection-title {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 400; /* Regular for the main text */
    margin-bottom: 15px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.selection-title strong {
    font-family: 'Poppins', sans-serif;
    font-weight: 700; /* Bold for "Step 2:" */
    font-size: 1.1rem;
}

.selection-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 200; /* ExtraLight */
    font-style: normal;
    margin-bottom: 30px;
}

.drop-zone-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.drop-zone {
    width: 200px;
    height: 200px;
    border: 3px dashed rgba(255, 255, 255, 0.3);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    /* Ensure drop zones are easily targetable */
    z-index: 5;
}

.drop-zone:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-3px);
}

.drop-zone.drag-over {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.08);
    box-shadow: 0 0 35px rgba(255, 255, 255, 0.4);
    /* Make drop zones more prominent during drag */
    z-index: 15;
    border-style: solid;
}

.drop-zone.filled {
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

.drop-zone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 20px;
}

.drop-zone-icon {
    font-size: 2rem;
    margin-bottom: 10px;
    opacity: 0.7;
}

.drop-zone-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 100; /* Thin */
    font-style: normal;
    text-align: center;
    line-height: 1.4;
}

/* Selected Painting Styles */
.selected-painting {
    width: 100%;
    height: 100%;
    position: relative;
}

.selected-painting-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.selected-painting-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.selected-painting:hover .selected-painting-image {
    transform: scale(1.05);
}

.selected-painting-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.7) 100%);
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 10px;
}

.selected-painting-number {
    background: rgba(255, 255, 255, 0.9);
    color: black;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
}

.remove-painting-btn {
    background: rgba(255, 0, 0, 0.8);
    color: white;
    border: 2px solid white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.remove-painting-btn:hover {
    background: rgba(255, 0, 0, 1);
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(255, 68, 68, 0.5);
}

.btn-secondary {
    background: linear-gradient(135deg, #666666 0%, #888888 50%, #666666 100%);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.2);
    padding: 15px 30px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
}

.btn-secondary:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    background: linear-gradient(135deg, #888888 0%, #aaaaaa 50%, #888888 100%);
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Character Selection Area */
.character-area {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px;
    margin: 50px 0 30px 0; /* Match selection area margins */
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    text-align: center;
    /* Ensure it's easily accessible */
    position: relative;
    z-index: 1;
}

.character-title {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 400; /* Regular for the main text */
    margin-bottom: 15px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.character-title strong {
    font-family: 'Poppins', sans-serif;
    font-weight: 700; /* Bold for "Step 3:" */
    font-size: 1.1rem;
}

.character-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 200; /* ExtraLight */
    font-style: normal;
    margin-bottom: 30px;
}

.character-grid {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 20px;
}

.character-card {
    border: none;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    max-width: 200px;
    min-height: 150px;
    max-height: 250px;
}

.character-card:hover,
.character-card.character-hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
    z-index: 20;
}

.character-card.character-selected {
    border: 3px solid rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 
        0 0 30px rgba(255, 255, 255, 0.4),
        0 0 60px rgba(255, 255, 255, 0.2),
        0 15px 35px rgba(0, 0, 0, 0.3);
    transform: translateY(-3px);
}

.character-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: all 0.3s ease;
    display: block;
}

.character-card:hover .character-image,
.character-card.character-hover .character-image {
    transform: scale(1.02);
    filter: brightness(1.1);
}

/* New circular cancel button styles */
.character-cancel-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: #ff4444;
    border: 2px solid white;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.character-cancel-btn:hover {
    background: #ff0000;
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(255, 68, 68, 0.5);
}

.character-cancel-btn::before,
.character-cancel-btn::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 2px;
    background: white;
    border-radius: 1px;
}

.character-cancel-btn::before {
    transform: rotate(45deg);
}

.character-cancel-btn::after {
    transform: rotate(-45deg);
}

/* Draggable Item Styles */
.gallery-item.draggable {
    position: relative;
    cursor: grab;
    /* Ensure draggable items stay on top during scroll */
    z-index: 10;
    /* Make sure the entire item is draggable */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    /* Ensure the container allows drag events */
    pointer-events: auto;
}

.gallery-item.draggable:active {
    cursor: grabbing;
}

.gallery-item.mouse-down {
    transform: translateY(-2px) scale(0.98);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
    cursor: grabbing;
}

.gallery-item.recently-dragged {
    pointer-events: none;
    opacity: 0.8;
}

.gallery-item.dragging {
    opacity: 0.6;
    transform: rotate(3deg) scale(0.98);
    z-index: 1000;
    /* Keep dragged item visible during scroll */
    position: relative;
    cursor: grabbing !important;
    /* Add a subtle glow effect */
    box-shadow: 0 15px 35px rgba(255, 255, 255, 0.4);
}

.drag-handle {
    display: none !important; /* Completely hide drag handles */
}

.drag-icon {
    display: none !important; /* Completely hide drag icons */
}

/* Selection Message */
.selection-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 15px 25px;
    border-radius: 25px;
    font-weight: 500;
    z-index: 3000;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    display: none;
    animation: messageSlideIn 0.3s ease;
}

.selection-message.info {
    background: rgba(255, 255, 255, 0.9);
    color: black;
    border: 1px solid rgba(255, 255, 255, 1);
}

.selection-message.success {
    background: rgba(76, 175, 80, 0.9);
    color: white;
    border: 1px solid rgba(76, 175, 80, 1);
}

.selection-message.warning {
    background: rgba(255, 255, 255, 0.95);
    color: black;
    border: 1px solid rgba(255, 255, 255, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -60%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* Auto-scroll indicators with enhanced visibility */
body.auto-scrolling::before {
    content: '↑ Auto Scrolling Up ↑';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.3), transparent);
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    text-shadow: 0 2px 6px rgba(255, 255, 255, 0.7);
    pointer-events: none;
    z-index: 999;
    opacity: 0;
    transition: opacity 0.2s ease;
    backdrop-filter: blur(5px);
    border-bottom: 2px solid rgba(255, 255, 255, 0.6);
}

body.auto-scrolling.scroll-up::before {
    opacity: 1;
}

body.auto-scrolling::after {
    content: '↓ Auto Scrolling Down ↓';
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.3), transparent);
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    text-shadow: 0 2px 6px rgba(255, 255, 255, 0.7);
    pointer-events: none;
    z-index: 999;
    opacity: 0;
    transition: opacity 0.2s ease;
    backdrop-filter: blur(5px);
    border-top: 2px solid rgba(255, 255, 255, 0.6);
}

body.auto-scrolling.scroll-down::after {
    opacity: 1;
}

/* Processing Screen Styles */
.processing-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #000000 0%, #1a1a2e 50%, #16213e 100%);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 3500;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.processing-screen.visible {
    opacity: 1;
    visibility: visible;
}

.processing-content {
    text-align: center;
    max-width: 500px;
    width: 90%;
    padding: 40px;
}

.processing-animation {
    margin-bottom: 40px;
    position: relative;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.neural-network {
    position: relative;
    width: 200px;
    height: 100px;
}

.node {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(45deg, #ffffff, #f0f0f0);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
    animation: pulse 2s ease-in-out infinite;
}

.node-1 { top: 10px; left: 20px; animation-delay: 0s; }
.node-2 { top: 40px; left: 0px; animation-delay: 0.2s; }
.node-3 { top: 70px; left: 20px; animation-delay: 0.4s; }
.node-4 { top: 20px; right: 20px; animation-delay: 0.6s; }
.node-5 { top: 50px; right: 0px; animation-delay: 0.8s; }

.connection {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.8), rgba(240, 240, 240, 0.8));
    border-radius: 1px;
    animation: dataFlow 1.5s ease-in-out infinite;
}

.conn-1 { 
    top: 20px; 
    left: 40px; 
    width: 140px; 
    transform: rotate(15deg);
    animation-delay: 0.1s;
}

.conn-2 { 
    top: 50px; 
    left: 20px; 
    width: 160px; 
    transform: rotate(-10deg);
    animation-delay: 0.3s;
}

.conn-3 { 
    top: 80px; 
    left: 40px; 
    width: 140px; 
    transform: rotate(-20deg);
    animation-delay: 0.5s;
}

.conn-4 { 
    top: 35px; 
    left: 40px; 
    width: 120px; 
    transform: rotate(25deg);
    animation-delay: 0.7s;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
    }
    50% {
        transform: scale(1.2);
        box-shadow: 0 0 30px rgba(255, 255, 255, 0.9);
    }
}

@keyframes dataFlow {
    0% {
        opacity: 0.3;
        transform: scaleX(0.5);
    }
    50% {
        opacity: 1;
        transform: scaleX(1);
    }
    100% {
        opacity: 0.3;
        transform: scaleX(0.5);
    }
}

.processing-title {
    color: white;
    font-size: 2rem;
    font-weight: 300;
    margin-bottom: 30px;
    letter-spacing: 1px;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.3);
}

.processing-steps {
    margin-bottom: 30px;
}

.processing-step {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 12px 20px;
    margin-bottom: 10px;
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    opacity: 0.5;
}

.processing-step.active {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    opacity: 1;
    transform: translateX(10px);
    box-shadow: 0 5px 20px rgba(255, 255, 255, 0.2);
}

.processing-step.completed {
    background: rgba(76, 175, 80, 0.15);
    border-color: rgba(76, 175, 80, 0.4);
    opacity: 0.8;
}

.step-icon {
    font-size: 1.5rem;
    margin-right: 15px;
    width: 30px;
    text-align: center;
}

.step-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 0.5px;
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 20px;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ffffff, #f0f0f0);
    border-radius: 3px;
    transition: width 0.6s ease;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

/* Mobile Responsiveness for Processing Screen */
@media (max-width: 768px) {
    .processing-content {
        padding: 30px 20px;
    }
    
    .processing-title {
        font-size: 1.6rem;
        margin-bottom: 25px;
    }
    
    .neural-network {
        width: 150px;
        height: 80px;
    }
    
    .node {
        width: 16px;
        height: 16px;
    }
    
    .processing-step {
        padding: 10px 15px;
        margin-bottom: 8px;
    }
    
    .step-icon {
        font-size: 1.2rem;
        margin-right: 12px;
        width: 25px;
    }
    
    .step-text {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .processing-animation {
        height: 100px;
        margin-bottom: 30px;
    }
    
    .processing-title {
        font-size: 1.4rem;
    }
    
    .neural-network {
        width: 120px;
        height: 60px;
    }
    
    .node {
        width: 14px;
        height: 14px;
    }
    
    .processing-step {
        flex-direction: column;
        text-align: center;
        padding: 8px 12px;
    }
    
    .step-icon {
        margin-right: 0;
        margin-bottom: 5px;
    }
}

/* Floating Color Palette Modal Styles */
.color-palette-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3); /* Semi-transparent overlay */
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2500;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.color-palette-modal.visible {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.color-palette-modal-content {
    background: rgba(255, 255, 255, 0.3); /* 70% transparency */
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    padding: 40px;
    max-width: 500px;
    width: 90%;
    text-align: center;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
}

.color-palette-modal.visible .color-palette-modal-content {
    transform: scale(1) translateY(0);
}

.color-palette-title {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.8rem;
    font-weight: 300;
    margin-bottom: 30px;
    letter-spacing: 1px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.color-palette-modal .chart-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
    position: relative;
    /* Add generous padding to accommodate hover expansion */
    padding: 30px;
    width: 280px;
    height: 280px;
    margin-left: auto;
    margin-right: auto;
    /* Ensure no clipping occurs */
    overflow: visible;
}

.color-palette-modal .chart-container canvas {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
    /* Allow expansion beyond bounds */
    overflow: visible !important;
    transform-origin: center center;
    /* Ensure chart is above other elements during hover */
    position: relative;
    z-index: 10;
    /* Remove any clipping boundaries */
    clip-path: none;
    /* Ensure no borders constrain the chart */
    border: none;
    outline: none;
}

.color-palette-modal .color-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 30px;
}

.color-palette-modal .legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    /* Hover effects removed for modal legend items */
    transition: none;
}

.color-palette-modal .legend-colour {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.color-palette-modal .legend-text {
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.9rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 400; /* Regular */
    text-transform: capitalize;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.color-palette-actions {
    margin-top: 20px;
}

.color-palette-actions .btn-primary {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 15px 35px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.color-palette-actions .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 100%);
    border-color: rgba(255, 255, 255, 0.5);
}

    .color-palette-actions .btn-primary:active {
        transform: translateY(-1px);
    }

/* Color Palette Page Controls */
.color-palette-controls {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 25px;
}

/* Main content layout for palette page - Updated to vertical layout */
.palette-content-layout {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin: 40px 0;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Captured image section */
.captured-image-section {
    width: 100%;
    max-width: 100%;
}

.captured-image-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 300; /* Light */
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
    text-align: center;
}

.captured-image-container {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.captured-palette-image {
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.captured-palette-image:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.5);
}

/* Color dashboard - right side */
.colour-dashboard {
    flex: 1;
    min-width: 0;
}

/* Palette Analysis Container - matches Step 2 and Step 3 containers */
.palette-analysis-container {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px;
    margin: 50px 0 30px 0;
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    text-align: center;
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Palette content sections within the container */
.palette-analysis-container .captured-image-section {
    margin-bottom: 30px;
}

.palette-analysis-container .captured-image-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 300; /* Light */
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 15px;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Updated captured palette image to match color bar sizing */
.palette-analysis-container .captured-palette-image {
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 30px;
    max-width: 800px;
}

.palette-analysis-container .captured-palette-image:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.5);
}

.palette-analysis-container .raw-colors-section {
    margin-bottom: 30px;
}

.palette-analysis-container .raw-colors-title {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.5rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 300; /* Light */
    text-align: center;
    margin-bottom: 15px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.palette-analysis-container .mapped-colors-section {
    margin-bottom: 0;
}

.palette-analysis-container .mapped-colors-title {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.5rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 300; /* Light */
    text-align: center;
    margin-bottom: 15px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Chart containers within palette analysis */
.palette-analysis-container .chart-container {
    margin-bottom: 15px;
    width: 100% !important;
    max-width: 800px !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    padding: 0 !important;
    overflow: visible !important;
}

.palette-analysis-container .colour-legend {
    margin-top: 15px;
    margin-bottom: 30px;
}

/* Mobile Responsiveness for Floating Modal */
@media (max-width: 768px) {
    .color-palette-modal-content {
        padding: 30px 20px;
        width: 95%;
        max-width: none;
    }
    
    .color-palette-title {
        font-size: 1.5rem;
        margin-bottom: 25px;
    }
    
    .color-palette-modal .chart-container canvas {
        width: 150px;
        height: 150px;
    }
    
    .color-palette-modal .color-legend {
        gap: 10px;
        margin-bottom: 25px;
    }
    
    .color-palette-modal .legend-item {
        padding: 6px 10px;
    }
    
    .color-palette-modal .legend-text {
        font-size: 0.9rem;
        font-family: 'Poppins', sans-serif;
        font-weight: 400; /* Regular */
    }
    
    .color-palette-actions .btn-primary {
        width: 100%;
        max-width: 250px;
        padding: 12px 25px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .color-palette-modal-content {
        padding: 25px 15px;
    }
    
    .color-palette-title {
        font-size: 1.3rem;
    }
    
    .color-palette-modal .chart-container {
        width: 160px;
        height: 160px;
        padding: 20px;
    }
    
    .color-palette-modal .chart-container canvas {
        width: 120px;
        height: 120px;
    }
    
    .color-palette-modal .color-legend {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    
    .color-palette-modal .legend-item {
        width: 100%;
        max-width: 200px;
        justify-content: center;
    }
}

/* Gallery Navigation Buttons */
.gallery-nav-buttons {
    position: absolute;
    top: 50%;
    margin-top: -25px;
    z-index: 20;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.6);
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.gallery-nav-buttons:hover {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(255, 255, 255, 0.8);
    transform: scale(1.05);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
}

.gallery-nav-buttons:active {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 1);
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.gallery-nav-left {
    left: 20px;
}

.gallery-nav-right {
    right: 20px;
}

/* Responsive adjustments for navigation buttons */
@media (max-width: 768px) {
    .gallery-nav-buttons {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
        margin-top: -20px;
    }
    
    .gallery-nav-left {
        left: 10px;
    }
    
    .gallery-nav-right {
        right: 10px;
    }
}

/* Mobile Responsiveness for Selection Area */
@media (max-width: 768px) {
    .palette-analysis-container {
        padding: 30px 20px;
        margin: 30px 0 20px 0;
        max-width: 100%;
    }
    
    /* Removed captured-image-container styles - no longer needed */
    
    .palette-analysis-container .raw-colors-section,
    .palette-analysis-container .mapped-colors-section {
        margin-bottom: 25px;
    }
    
    .palette-analysis-container .captured-image-title,
    .palette-analysis-container .raw-colors-title,
    .palette-analysis-container .mapped-colors-title {
        font-size: 1.5rem;
        font-weight: 300; /* Light */
        margin-bottom: 12px;
    }
    
    .selection-area {
        padding: 25px;
        margin-bottom: 30px;
    }
    
    .selection-title {
        font-size: 1.1rem;
        font-family: 'Poppins', sans-serif;
        font-weight: 400; /* Regular */
    }
    
    .selection-subtitle {
        font-size: 1rem;
        font-family: 'Poppins', sans-serif;
        font-weight: 200; /* ExtraLight */
        font-style: normal;
    }
    
    .drop-zone-container {
        gap: 20px;
    }
    
    .drop-zone {
        width: 150px;
        height: 150px;
    }
    
    .drop-zone-icon {
        font-size: 1.5rem;
    }
    
    .drop-zone-text {
        font-size: 0.8rem;
        font-family: 'Poppins', sans-serif;
        font-weight: 100; /* Thin */
        font-style: normal;
    }
    
    .btn-secondary, .btn-primary {
        width: 100%;
        max-width: 250px;
    }
    
    .character-area {
        padding: 25px;
        margin: 30px 0;
    }
    
    .character-title {
        font-size: 1.1rem;
        font-family: 'Poppins', sans-serif;
        font-weight: 400; /* Regular */
        margin-bottom: 15px;
    }
    
    .character-subtitle {
        font-size: 1rem;
        font-family: 'Poppins', sans-serif;
        font-weight: 200; /* ExtraLight */
        font-style: normal;
    }
    
    .character-grid {
        gap: 10px;
        margin-bottom: 20px;
        padding: 10px 15px;
        max-width: 100%;
    }
    
    .character-card {
        min-height: 120px;
        max-height: 180px;
        max-width: 150px;
    }
    
    .character-card:hover,
    .character-card.character-hover {
        transform: translateY(-3px) scale(1.05);
    }
    
    .drag-handle {
        display: none; /* Hide drag handles on mobile for cleaner look */
    }
    
    .character-cancel-btn {
        width: 24px;
        height: 24px;
        top: 6px;
        right: 6px;
    }
    
    .character-cancel-btn::before,
    .character-cancel-btn::after {
        width: 10px;
        height: 1.5px;
    }
    
    .story-btn {
        font-size: 1.2rem;
        font-family: 'Poppins', sans-serif;
        font-weight: 500; /* Medium */
        padding: 15px 30px;
        min-width: 200px;
    }

    .name-input-area {
        padding: 22px 18px;
        margin: 25px 0;
    }

    .name-input-title {
        font-size: 1.1rem;
        font-family: 'Poppins', sans-serif;
        font-weight: 400; /* Regular */
    }

    .name-input-subtitle {
        font-size: 1rem;
        font-family: 'Poppins', sans-serif;
        font-weight: 200; /* ExtraLight */
        margin-bottom: 22px;
    }

    .name-input-field {
        font-size: 16px;
        padding: 13px 18px;
    }
}

@media (max-width: 480px) {
    .palette-analysis-container {
        padding: 25px 15px;
        margin: 20px 0 15px 0;
        max-width: 100%;
    }
    
    /* Removed captured-image-container styles - no longer needed */
    
    .palette-analysis-container .raw-colors-section,
    .palette-analysis-container .mapped-colors-section {
        margin-bottom: 20px;
    }
    
    .palette-analysis-container .captured-image-title,
    .palette-analysis-container .raw-colors-title,
    .palette-analysis-container .mapped-colors-title {
        font-size: 1.5rem;
        font-weight: 300; /* Light */
        margin-bottom: 10px;
    }
    
    .selection-area {
        padding: 20px;
    }
    
    .selection-title {
        font-size: 1.1rem;
        font-family: 'Poppins', sans-serif;
        font-weight: 400; /* Regular */
    }
    
    .drop-zone-container {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .character-area {
        padding: 20px;
        margin: 20px 0;
    }
    
    .character-title {
        font-size: 1.1rem;
        font-family: 'Poppins', sans-serif;
        font-weight: 400; /* Regular */
        margin-bottom: 15px;
    }
    
    .character-subtitle {
        font-size: 1rem;
        font-family: 'Poppins', sans-serif;
        font-weight: 200; /* ExtraLight */
        font-style: normal;
    }
    
    .character-grid {
        gap: 8px;
        margin-bottom: 20px;
        padding: 10px 10px;
        max-width: 100%;
    }
    
    .character-card {
        min-height: 100px;
        max-height: 150px;
        max-width: 120px;
    }
    
    .character-card:hover,
    .character-card.character-hover {
        transform: translateY(-3px) scale(1.01);
    }
    
    .drop-zone {
        width: 120px;
        height: 120px;
    }
    
    .drop-zone-icon {
        font-size: 1.2rem;
        margin-bottom: 5px;
    }
    
    .drop-zone-text {
        font-size: 0.8rem;
        font-family: 'Poppins', sans-serif;
        font-weight: 100; /* Thin */
        font-style: normal;
    }
    
    .selection-message {
        width: 90%;
        max-width: 300px;
        text-align: center;
    }

    .name-input-area {
        padding: 20px 15px;
        margin: 20px 0;
    }

    .name-input-title {
        font-size: 1.1rem;
        font-family: 'Poppins', sans-serif;
        font-weight: 400; /* Regular */
        line-height: 1.4;
    }

    .name-input-subtitle {
        font-size: 1rem;
        font-family: 'Poppins', sans-serif;
        font-weight: 200; /* ExtraLight */
        margin-bottom: 20px;
    }

    .name-input-container {
        max-width: 100%;
        padding: 0 10px;
    }

    .name-input-field {
        font-size: 16px;
        padding: 12px 15px;
    }


}

/* Step completion validation styles */
.character-card.disabled {
    opacity: 0.5 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
}

.character-title.step-disabled {
    opacity: 0.6;
    color: #888;
}

.story-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: #555 !important;
}

/* Validation message styles */
.validation-message {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 87, 87, 0.95);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 14px;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.validation-message.visible {
    opacity: 1;
}

.validation-message.hidden {
    opacity: 0;
}

/* Name Input Area Styles */
.name-input-area {
    padding: 25px;
    margin: 30px 0;
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%),
        rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 60px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    text-align: center;
}

.name-input-title {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.1rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 400; /* Regular */
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    line-height: 1.3;
}

.name-input-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 200; /* ExtraLight */
    margin-bottom: 25px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.name-input-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 400px;
    margin: 0 auto;
}

.name-input-field {
    width: 100%;
    padding: 15px 20px;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    outline: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    text-align: center;
}

.name-input-field::placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

.name-input-field:focus {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 
        0 0 0 3px rgba(255, 255, 255, 0.1),
        0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}



/* Story Interface Styles */
.story-interface {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 20%, rgba(30, 30, 30, 0.8) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(15, 15, 25, 0.9) 0%, transparent 50%),
        radial-gradient(circle at 40% 60%, rgba(20, 25, 35, 0.7) 0%, transparent 40%),
        linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #000000 100%);
    overflow-y: auto;
    z-index: 2000;
    font-family: 'Poppins', sans-serif;
}

.story-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 40px 20px;
}

.story-header {
    text-align: center;
    margin-bottom: 60px;
    padding: 20px 0;
}

.story-main-title {
    font-size: 2.5rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 200; /* ExtraLight */
    color: #ffffff;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: -0.02em;
}

.story-painting-section {
    margin-bottom: 60px;
    text-align: center;
}

.story-painting-image {
    width: 100%;
    max-width: 840px; /* Match the width of Step 2/3 areas content */
    height: auto;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.story-painting-image:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5);
}

.story-painting-title {
    font-size: 1.2rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 700; /* Bold */
    color: #ffffff;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.story-painting-details {
    font-size: 0.9rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 300; /* Light */
    font-style: italic;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 30px 0;
}

.story-text-paragraph {
    max-width: 840px;
    margin: 0 auto;
    text-align: left;
}

.story-text-paragraph p {
    font-size: 0.9rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 300; /* Light */
    line-height: 1.8;
    color: #ffffff;
    margin-bottom: 20px;
    text-indent: 2em;
}

.story-text-paragraph p:last-child {
    margin-bottom: 0;
}

.story-remaining-text {
    max-width: 840px;
    margin: 0 auto 60px auto;
    text-align: left;
}

.story-remaining-text p {
    font-size: 0.9rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 300; /* Light */
    line-height: 1.8;
    color: #ffffff;
    margin-bottom: 20px;
    text-indent: 2em;
}

.story-remaining-text p:last-child {
    margin-bottom: 0;
}

.story-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 60px;
    padding: 40px 0;
}

.story-action-btn {
    padding: 15px 35px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    text-transform: none;
    letter-spacing: 0px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 1.2rem;
    border: none;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

/* Share button styled like Continue button */
.story-actions .btn-share {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.story-actions .btn-share:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 100%);
    border-color: rgba(255, 255, 255, 0.5);
}

.story-actions .btn-share:active {
    transform: translateY(-1px);
}

.story-actions .btn-primary {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    color: white;
    border: 2px solid #4CAF50;
}

.story-actions .btn-primary:hover {
    background: linear-gradient(135deg, #45a049 0%, #3d8b40 100%);
    border-color: #45a049;
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(76, 175, 80, 0.3);
}

.story-actions .btn-secondary {
    background: linear-gradient(135deg, #666 0%, #555 100%);
    color: white;
    border: 2px solid #666;
}

.story-actions .btn-secondary:hover {
    background: linear-gradient(135deg, #555 0%, #444 100%);
    border-color: #555;
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(102, 102, 102, 0.3);
}

/* Share Popup Styles */
.share-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.share-popup.visible {
    opacity: 1;
    visibility: visible;
}

.share-popup-content {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    padding: 40px;
    text-align: center;
    backdrop-filter: blur(20px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
    max-width: 400px;
    width: 90%;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
}

.share-popup.visible .share-popup-content {
    transform: scale(1) translateY(0);
}

.share-popup-title {
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    margin-bottom: 30px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.share-options {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
}

.share-option {
    cursor: pointer;
    transition: transform 0.3s ease;
    opacity: 0.8;
}

.share-option:hover {
    transform: scale(1.1);
    opacity: 1;
}

.share-option img {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.share-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.2s ease;
    z-index: 10;
    padding: 0;
    user-select: none;
}

.share-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
    border-color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 768px) {
    .story-container {
        padding: 30px 15px;
    }
    
    .story-main-title {
        font-size: 1.8rem;
    }
    
    .story-header {
        margin-bottom: 50px;
    }
    
    .story-painting-section {
        margin-bottom: 40px;
    }
    
    .story-painting-image {
        max-width: 100%;
    }
    
    .story-painting-title {
        font-size: 0.85rem;
    }
    
    .story-painting-details {
        font-size: 0.85rem;
    }
    
    .story-text-paragraph p,
    .story-remaining-text p {
        font-size: 0.85rem;
        line-height: 1.6;
    }
    
    .story-actions {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        margin-top: 40px;
    }
    
    .story-action-btn {
        width: 100%;
        max-width: 250px;
        padding: 12px 25px;
        font-size: 0.9rem;
    }
    
    .share-popup-content {
        padding: 30px 20px;
    }
    
    .share-options {
        gap: 20px;
    }
    
    .share-option img {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    .story-main-title {
        font-size: 1.6rem;
    }
    
    .story-painting-section {
        margin-bottom: 30px;
    }
    
    .story-painting-title {
        font-size: 0.8rem;
    }
    
    .story-painting-details {
        font-size: 0.8rem;
    }
    
    .story-text-paragraph p,
    .story-remaining-text p {
        font-size: 0.8rem;
        line-height: 1.5;
    }
    
    .story-actions {
        margin-top: 30px;
        gap: 12px;
    }
    
    .story-action-btn {
        padding: 10px 20px;
        font-size: 0.85rem;
    }
    
    .share-popup-content {
        padding: 25px 15px;
    }
    
    .share-options {
        gap: 15px;
    }
}

/* Story Loading Popup Styles */
.story-loading-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
    backdrop-filter: blur(5px);
}

.story-loading-popup.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.story-loading-content {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    padding: 0;
    text-align: center;
    backdrop-filter: blur(20px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    pointer-events: none;
}

.story-loading-popup.visible .story-loading-content {
    transform: scale(1) translateY(0);
}

.story-loading-gif {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 25px;
    pointer-events: none;
}

.story-loading-text {
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.5px;
    text-align: center;
    pointer-events: none;
    user-select: none;
}

/* Prevent page scrolling when popup is visible */
body.story-loading {
    overflow: hidden;
    pointer-events: none;
}

body.story-loading .story-loading-popup {
    pointer-events: all;
}

body.story-loading .story-loading-popup * {
    pointer-events: none;
}

@media (max-width: 768px) {
    .story-loading-content {
        max-width: 450px;
        width: 95%;
        max-height: 70vh;
        border-radius: 20px;
    }
    
    .story-loading-gif {
        border-radius: 20px;
    }
    
    .story-loading-text {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .story-loading-content {
        max-width: 380px;
        width: 95%;
        max-height: 60vh;
        border-radius: 15px;
    }
    
    .story-loading-gif {
        border-radius: 15px;
    }
    
    .story-loading-text {
        font-size: 0.8rem;
    }
}

/* Animated GIF Element Styles */
.animated-gif-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;
}

.animated-gif-element.visible {
    display: block;
    opacity: 1;
}

.animated-gif-element.hidden {
    opacity: 0;
}

.stop-button {
    position: relative;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.15);
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-radius: 50px;
    padding: 15px 30px;
    color: black;
    cursor: pointer;
    /* Enable smooth transitions for hover effects */
    transition: all 0.3s ease;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.3);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.stop-button:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.25);
    border-color: rgba(0, 0, 0, 0.5);
    transform: translateY(-3px);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.stop-button:active:not(:disabled) {
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(0, 0, 0, 0.6);
    transform: translateY(0);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.stop-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Inline cursor icon styling */
.inline-cursor-icon {
    width: 1.2rem;
    height: 1.2rem;
    vertical-align: middle;
    margin: 0 4px;
    opacity: 0.8;
    filter: brightness(1.2) contrast(1.1);
    transition: all 0.3s ease;
}

.inline-cursor-icon:hover {
    opacity: 1;
    filter: brightness(1.4) contrast(1.2);
    transform: scale(1.1);
}

/* Mobile responsiveness for inline cursor icon */
@media (max-width: 768px) {
    .inline-cursor-icon {
        width: 1rem;
        height: 1rem;
        margin: 0 3px;
    }
}

@media (max-width: 480px) {
    .inline-cursor-icon {
        width: 0.9rem;
        height: 0.9rem;
        margin: 0 2px;
    }
}

/* Hover interaction for "basic colours" text only */
.basic-colours-hover {
    position: relative;
    cursor: pointer;
    transition: color 0.3s ease;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.3);
}

.basic-colours-hover:hover {
    color: rgba(255, 255, 255, 1);
    text-decoration-color: rgba(255, 255, 255, 0.8);
}

.basic-colours-hover::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 380px;
    height: 253px;
    background-image: url('image/basiccolours.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    margin-top: 10px;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.1);
}

.basic-colours-hover:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(5px);
}

/* Mobile responsiveness for the hover image */
@media (max-width: 768px) {
    .basic-colours-hover::after {
        width: 316px;
        height: 210px;
        margin-top: 8px;
    }
}

@media (max-width: 480px) {
    .basic-colours-hover::after {
        width: 253px;
        height: 168px;
        margin-top: 5px;
    }
}