:root {
    --bg: #f1f1f1;
    --bg-deep: #f1f1f1;
    --text: #121212;
    --accent: #121212;
    --accent-soft: rgba(245, 245, 245, 0.16);
    --secondary: #1500ff;
    --font-mono: 'IBM Plex Mono', monospace;
    --ease-premium: cubic-bezier(0.77, 0, 0.175, 1);
}

/* 1. Global Reset & Interactivity Fix */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: none; /* Custom cursor is handled via JS */
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-mono);
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: background-color 0.8s var(--ease-premium);
}

/* Ensure links and buttons are actually clickable through the custom cursor */
a, button {
    cursor: pointer;
    pointer-events: all; 
    text-decoration: none;
    position: relative;
    z-index: 101;
}

body.limit-reached {
    background-color: var(--bg-deep);
}

/* --- Technical Crosshair System --- */
#cursor-v, #cursor-h, #cursor-dot {
    position: fixed;
    top: 0; 
    left: 0;
    background: var(--secondary);
    pointer-events: none; 
    z-index: 12000;
    opacity: 0; 
    transition: opacity 0.8s var(--ease-premium);
}

#cursor-v { width: 1px; height: 100vh; }
#cursor-h { width: 100vw; height: 1px; }

#cursor-dot {
    width: 10px;
    height: 10px;
    margin-top: -5px; 
    margin-left: -5px;
    transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.8s ease;
}

/* Visibility Trigger (Added via JS after loader) */
.cursor-active #cursor-v,
.cursor-active #cursor-h { 
    opacity: 1; 
}

.cursor-active #cursor-dot { 
    opacity: 1; 
}

/* 4. Header Section */
header {
    padding: 40px 60px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    z-index: 600;
}

.logo {
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 400;
    line-height: 1.6;
}

.archive-info {
    font-size: 0.8rem;
    color: var(--text);
    text-align: right;
    line-height: 1.6;
}

.archive-info a {
    color: var(--secondary);
    border-bottom: 1px solid var(--accent-soft);
    transition: border-color 0.3s ease;
}

.archive-info a:hover {
    border-bottom-color: var(--secondary);
}

/* 5. Main Quote Area (Stabilized for Scramble) */
main {
    flex: 1;
    display: flex;
    align-items: center; /* Centers the whole wrapper in the viewport */
    padding: 0 10%;
    z-index: 10;
    position: relative;
}

.quote-wrapper {
    max-width: 900px;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

.quote-content {
    display: flex;
    flex-direction: column;
    /* RESERVED SPACE: Fixed height to prevent any shifting of footer/progress */
    min-height: 450px; 
    /* Important: align to flex-start so the first line of text is a 'static anchor' */
    justify-content: flex-start; 
    padding-top: 20px;
}

#quote-text {
    font-family: var(--font-mono);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    line-height: 1.4; /* Slightly more height for mono readability */
    margin-bottom: 40px;
    /* This height handles up to ~6 lines without moving the author */
    min-height: 8.4em; 
    white-space: pre-line;
    /* Prevents the text from 'shaking' horizontally during scramble */
    overflow-wrap: break-word;
}

#quote-author {
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text);
    display: flex;
    align-items: center;
    /* Optional: Ensure author name fades in after the scramble */
    transition: opacity 0.5s ease;
}

#quote-author::before {
    content: "";
    width: 30px;
    height: 1px;
    background: var(--text);
    margin-right: 15px;
}

/* 6. Daily Progress Bar */
.progress-bar {
    width: 100%;
    height: 2px;
    background: var(--accent-soft);
    margin-bottom: 50px;
    position: relative;
    overflow: hidden;
}

.progress-fill {
    width: 0%;
    height: 100%;
    background: var(--accent);
    transition: width 0.8s var(--ease-premium);
}

/* 7. Footer Section */
footer {
    padding: 40px 60px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    z-index: 100;
    position: relative;
}

.nav-btn {
    background: none;
    border: none;
    color: var(--secondary);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    transition: border-color 0.4s var(--ease-premium);
}

.nav-btn:hover {
    border-bottom-color: var(--accent);

}

.page-counter {
    font-family: var(--font-mono);
    font-size: 1.8rem;
    color: var(--text);
}

/* 8. Limit Overlay (Locked State) */
.limit-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 500;
    background: var(--bg-deep);
}

body.limit-reached .limit-overlay {
    display: flex;
}

.limit-overlay-inner {
    text-align: center;
    animation: fadeInBlur 1.2s var(--ease-premium);
}

.limit-overlay-title {
    font-family: var(--font-mono);
    font-size: 2rem;
    margin-bottom: 20px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

@keyframes fadeInBlur {
    from { opacity: 0; filter: blur(10px); transform: translateY(10px); }
    to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

/* Hide main UI when limit is reached */
body.limit-reached main, 
body.limit-reached footer {
    visibility: hidden;
}

/* Preloader Styles */
#loader {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: clip-path 1.2s var(--ease-premium);
    clip-path: inset(0 0 0 0);
}

#loader.loaded {
    clip-path: inset(0 0 100% 0); /* Cool "shutter" reveal */
}

.loader-content {
    text-align: center;
}

.loader-title {
    font-family: var(--font-mono);
    font-size: 2rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #f1f1f1;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(20px);
    animation: loaderTextIn 0.8s forwards 0.3s;
}

.loader-bar {
    width: 0;
    height: 1px;
    background: #f1f1f1;
    margin: 0 auto;
    animation: loaderBarIn 1.5s forwards 0.5s;
}

@keyframes loaderTextIn {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes loaderBarIn {
    to { width: 250px; }
}

/* --- 9. Tablet & Mobile Combined (Layout & Spacing) --- */
@media (max-width: 1024px) {
    * { 
        cursor: auto !important; 
    }
    
    #cursor-v, #cursor-h, #cursor-dot { 
        display: none !important; 
        pointer-events: none !important;
    }

    body {
        height: 100svh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    header { 
        padding: 30px 30px; /* Increased top padding to feel less "packed" */
        display: flex !important;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        flex-shrink: 0;
    }

    .logo, .archive-info { font-size: 0.75rem; }
    footer { font-size: 0.75rem; }

    /* 1. Ensure the container never overflows the screen */
    main {
        flex: 1;
        display: flex;
        align-items: center; 
        justify-content: center;
        width: 100%;
        padding: 0 20px;
        overflow: hidden; /* Safety lock */
    }

    /* 2. Optical Balance */
    .quote-wrapper {
        width: 100%;
        max-width: 500px; /* Keeps lines readable on tablets */
        display: flex;
        flex-direction: column;
        /* Moves the block slightly up from the mathematical center */
        margin-bottom: 5vh; 
    }

    /* 3. The "Airy" Bar */
    .progress-container {
        /* This margin scales with the screen height */
        margin-bottom: clamp(30px, 8vh, 60px); 
    }

    /* 4. The Lock-in Font Size */
    #quote-text {
        /* Scales perfectly between 1.1rem and 1.4rem */
        font-size: clamp(1.1rem, 4.5vw, 1.4rem); 
        line-height: 1.5;
        min-height: auto; /* Removed fixed height to prevent clipping on small phones */
    }

    /* Ensure the content is visible when we remove the limit-reached class */
#next-btn {
    display: block; /* Ensure it stays visible during review */
    transition: opacity 0.3s ease;
}

/* Optional: change the button text during review so they know it's a replay */
body.is-reviewing .nav-btn#next-btn {
    color: var(--secondary);
}

/* --- 10. Mobile Specific (Small Phones) --- */
@media (max-width: 768px) {
    main { padding: 0 25px; }
    
    #quote-text { 
        font-size: 1.25rem; 
        line-height: 1.5;
        min-height: 10em; 
    }

    .quote-content {
        min-height: auto; /* Let centering handle the verticality */
    }

    footer { 
        padding: 30px 25px;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        flex-shrink: 0;
    }
    .limit-overlay-title {
        font-size: 1.5rem;
         padding: 0 25px; 
    }
}

/* --- 11. Tablet Specific (iPad/Large Tablets) --- */
@media (min-width: 769px) and (max-width: 1024px) {
    main { padding: 0 12%; }

    #quote-text { 
        font-size: 2.2rem; 
        line-height: 1.4;
        min-height: 7em; 
    }

    footer { 
        padding: 50px 40px;
        flex-direction: row;
        justify-content: space-between;
        flex-shrink: 0;
    }
}}