/* Apply the fun font to titles and specific elements */
.font-cartoon {
    font-family: 'ZCOOL KuaiLe', cursive;
}

body {
    scroll-behavior: smooth;
    overflow-x: hidden; /* Prevent horizontal scrollbars often caused by animations */
}

/* Initial states for animated elements */
.anim-section-title,
.anim-core-info,
.anim-technical-note,
.comic-panel, /* comic-panel already set to opacity-0 in script, but good for consistency */
.anim-dialogue-text {
    opacity: 0;
}

/* Comic panel styling */
.comic-section {
    background-color: #ffffff;
    border-radius: 16px; /* Increased rounding */
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* Softer, more spread shadow */
    padding: 20px; /* Reduced padding for a tighter comic feel */
    margin-bottom: 2rem; /* Space between sections */
    border: 3px solid #38bdf8; /* Bright blue border */
    overflow: hidden; /* Ensure child elements don't break border radius */
}

.comic-panel {
    background-color: #f0f9ff; /* Lighter blue for panel background */
    border: 2px solid #7dd3fc; /* Slightly lighter blue border for panels */
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 1.5rem; /* Space between panels within a section */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
}

.comic-panel:last-child {
    margin-bottom: 0;
}

.comic-panel img {
    border-radius: 8px;
    border: 2px solid #e0f2fe; /* very light border for image */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Dialogue box styling */
.dialogue-container {
    background-color: #ffffff;
    border: 2px dashed #38bdf8; /* Dashed border for dialogue */
    border-radius: 10px;
    padding: 12px;
    margin-top: 1rem;
    margin-bottom: 0.75rem;
    position: relative;
}

.dialogue-container::before { /* Simple tail attempt */
    content: '';
    position: absolute;
    top: -10px; /* Position above the box */
    left: 20px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #38bdf8; /* Color matches border */
}


.dialogue-text {
    font-weight: bold;
    color: #0c4a6e; /* Darker sky blue */
}

.description-text {
    color: #374151; /* Tailwind gray-700 */
    line-height: 1.7;
}

/* Section Title Styling */
.section-main-title {
    color: #0369a1; /* Tailwind sky-700 */
    border-bottom: 3px solid #7dd3fc; /* Lighter blue underline */
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
}

.section-core-info {
    background-color: #e0f2fe; /* Light sky background for core info */
    padding: 0.75rem 1rem;
    border-radius: 8px;
    color: #075985; /* Darker sky */
    margin-bottom: 1.5rem; /* Space before panels */
    border-left: 5px solid #38bdf8;
}

/* Technical Note Styling */
.technical-note {
    background-color: #e6f7ff; /* Slightly different light blue */
    border-left: 4px solid #0ea5e9; /* Tailwind sky-500 */
    padding: 12px 16px;
    margin: 1.25rem 0; /* Consistent margin */
    border-radius: 6px;
    font-size: 0.9em;
    color: #0c4a6e; /* Darker sky blue, consistent with dialogue text */
    line-height: 1.6;
}

.technical-note-title {
    font-weight: bold;
    color: #0ea5e9; /* Tailwind sky-500 */
    display: block;
    margin-bottom: 6px;
    font-family: 'ZCOOL KuaiLe', cursive; /* Use cartoon font for this title too */
}


h1, h2, h3 {
    font-family: 'ZCOOL KuaiLe', cursive;
}

p { /* Ensures base paragraph font is Noto Sans SC */
    font-family: 'Noto Sans SC', sans-serif;
}

/* Responsive adjustments */
@media (max-width: 768px) { /* Tablet and below */
    .comic-section {
        padding: 15px;
    }
    .comic-panel {
        padding: 12px;
    }
    .dialogue-container {
        padding: 10px;
    }
    .technical-note {
        padding: 10px 14px;
        font-size: 0.875em;
    }
}

@media (max-width: 640px) { /* Mobile */
    .container {
        padding: 1rem; /* Adjusted main container padding for smaller screens */
    }
    header h1#page-title {
        font-size: 2.25rem; /* Adjusted h1 size */
    }
    header p#page-subtitle {
        font-size: 1rem; /* Adjusted subtitle size */
    }
    .comic-section {
        padding: 12px;
        border-width: 2px;
    }
    .comic-panel {
        padding: 10px;
        border-width: 1px;
    }
    .comic-panel img {
        max-width: 100%; /* Ensure image fits panel padding */
    }
    .dialogue-container {
        padding: 8px;
        border-width: 1px;
    }
    .dialogue-container::before {
        left: 15px;
        top: -8px; /* Adjust tail size/position */
        border-left-width: 8px;
        border-right-width: 8px;
        border-bottom-width: 8px;
    }
    .section-main-title {
        font-size: 1.75rem; /* Slightly smaller for mobile */
        padding-bottom: 0.4rem;
        margin-bottom: 0.6rem;
        border-bottom-width: 2px;
    }
    .section-core-info {
        padding: 0.6rem 0.8rem;
        font-size: 0.9rem;
        border-left-width: 4px;
    }
    .description-text {
        font-size: 0.875rem; /* Smaller description text for mobile */
        line-height: 1.6;
    }
    .technical-note {
        font-size: 0.825em;
        padding: 8px 10px;
        border-left-width: 3px;
    }
    .technical-note-title {
        font-size: 1.1em; /* Relative to parent */
    }
}