/* Reset & Base Styles */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg-color: #0f1115; /* Deep, rich dark background */
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --accent-color: #3b82f6; /* Subtle blue accent for loading/links */
    --header-bg: rgba(15, 17, 21, 0.75); /* Semi-transparent for glassmorphism */
    --header-border: rgba(255, 255, 255, 0.08);
}

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: 'Times New Roman', Times, serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Hide horizontal scrollbar if it ever occurs, though max-width should prevent it */
    overflow-x: hidden;

    /* Hide the vertical scrollbar but keep scrolling functionality */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
    display: none;
}

/* Glassmorphism Header */
.top-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--header-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--header-border);
    z-index: 100;
    padding: 1rem 0;
    transition: transform 0.3s ease;
    transform: translateY(-100%); /* Hidden by default */
}

.top-nav.visible {
    transform: translateY(0); /* Shown when toggled */
}

/* Optional: hide header on scroll down, show on scroll up (can be done in JS, but static positioning is also fine. Let's keep it sticky and always visible for simplicity, or just static if we don't want it covering the comic.)
   Actually, for a webcomic, you often want the header to be unobtrusive.
   Let's keep it sticky but minimal. */

.nav-content {
    max-width: 400px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comic-logo {
    height: 100px; /* Increased height to make the logo larger */
    width: auto;
    object-fit: contain;
    margin: 0;
    /* Adjust this value to shift left (negative) or right (positive) */
    transform: translateX(-10px); 
}

.chapter-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0;
}

/* Progress Bar */
.progress-bar-container {
    width: 100%;
    height: 4px;
    background-color: transparent;
    position: absolute;
    bottom: 0;
    left: 0;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background-color: var(--accent-color);
    transition: width 0.1s ease-out;
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 120px;
    right: 2rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--accent-color);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 90;
    transform: translateY(150px);
    opacity: 0;
    transition: all 0.3s ease;
}

.back-to-top.visible {
    transform: translateY(0);
    opacity: 1;
}

.back-to-top:hover {
    background-color: #2563eb;
    transform: translateY(-3px);
}

/* Bottom Nav Background */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px; /* High enough to cover the expanded Safari bar */
    background-color: var(--header-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--header-border);
    z-index: 85;
    transition: transform 0.3s ease;
    transform: translateY(100%);
}

.bottom-nav.visible {
    transform: translateY(0);
}

/* Comic Container */
.comic-container {
    max-width: 400px; /* Constrained width to maintain phone ratio on desktop */
    margin: 0 auto;
    padding-top: 0; /* Remove padding so comic hits the top of screen */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Ensure no spaces between flex items just in case */
    gap: 0;
}

/* 
   CRITICAL: The Panel Styles 
   Zero margin, zero padding, stacked perfectly. 
*/
.comic-panel {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block; /* Removes inline bottom spacing typical of images */
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    /* Smooth fade in handled by JS */
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.comic-panel.loaded {
    opacity: 1;
}

/* Loading State */
.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border-top-color: var(--accent-color);
    animation: spin 1s ease-in-out infinite;
    margin-bottom: 1rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Footer */
.site-footer {
    text-align: center;
    padding: 2rem 1rem 6rem 1rem; /* Acts as a solid bar at the bottom */
    background-color: var(--header-bg); /* Match the top nav bar */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text-secondary);
    font-size: 0.875rem;
    border-top: 1px solid var(--header-border);
    width: 100%;
}

/* Responsive adjustments */
@media (max-width: 400px) {
    .comic-container {
        width: 100%;
    }
}

/* Hide scrollbar for Chrome, Safari and Opera */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
html,
body {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}