/* style.css (FINAL VERSION with all scenes correctly scoped) */

/* --- Main App Shell Styles --- */
:root { --bg: #0d1117; --ink: #e6ebf2; --ink-dim: #AFB6C3; --accent: #10b981; --accent-2: #34d399; --success: #22c55e; --danger: #ef4444; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background-color: var(--bg); color: var(--ink); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }
#app-container { display: flex; width: 100%; height: 100%; }
#sidebar { width: 230px; height: 100%; background-color: rgba(255, 255, 255, 0.06); padding: 20px 10px; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; transition: margin-left 0.3s ease; z-index: 100; }
#sidebar .nav-btn { width: 100%; padding: 15px; font-size: 18px; color: white; background-image: linear-gradient(to right, #334155, #475569); border: none; border-radius: 14px; cursor: pointer; text-align: left; }
#sidebar .nav-btn.active { background-image: linear-gradient(to right, var(--accent), var(--accent-2)); font-weight: bold; }
#main-content { flex-grow: 1; height: 100%; position: relative; }
.scene { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: none; flex-direction: column; justify-content: flex-start; align-items: center; padding: 20px; box-sizing: border-box; gap: 20px; overflow-y: auto; }
.scene.active { display: flex; }
#sidebar-logo { width: 80px; height: auto; margin: 0 auto 20px auto; display: block; cursor: pointer; }

/* --- Burger Menu / Mobile Responsive Styles --- */
#burger-btn { 
    display: none; /* Hidden by default on desktop */
}

@media (max-width: 850px) { 
    #sidebar { 
        position: fixed; 
        z-index: 1000; 
        margin-left: -230px; /* Start off-screen */
    } 
    #sidebar.open { 
        margin-left: 0; /* Slide in */
    } 
    #burger-btn { 
        display: block; /* Show the button on mobile */
        position: fixed; 
        top: 15px; 
        left: 15px; 
        z-index: 1001; 
        width: 48px; 
        height: 48px; 
        background-color: rgba(255, 255, 255, 0.1); 
        border: none; 
        border-radius: 12px; 
        color: white; 
        font-size: 24px;
        cursor: pointer;
    } 
    #overlay { 
        display: none; /* Hidden by default */
        position: fixed; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100%; 
        background: rgba(0,0,0,0.5); 
        z-index: 999; 
    } 
    #overlay.active { 
        display: block; /* Show the overlay when menu is open */
    } 
}

/* --- WORD LAB SCENE (STABLE & CORRECTED) --- */

/* This is the general container for each view */
#wordlab-scene .wl-view { 
    width: 100%; 
    max-width: 1200px; 
    height: 100%; 
    display: none; 
    flex-direction: column; 
    align-items: center; 
    justify-content: flex-start; 
    box-sizing: border-box; 
    gap: 15px;
}
#wordlab-scene .wl-view.active { display: flex; }

/* --- 1. The UNIFIED Shared Header (Right-Aligned Button) --- */
#wordlab-scene .wl-header {
    display: flex;
    align-items: center;
    justify-content: center; /* KEY: This truly centers the title */
    position: relative;        /* KEY: This acts as an anchor for the button */
    width: 100%;
    max-width: 700px;
    order: -1;
    min-height: 50px;
}

#wordlab-scene .wl-header h3 {
    font-size: 24px;
    font-weight: 500;
    margin: 0;
    /* With the parent set to justify-content: center, this is now perfectly centered */
}

/* The old ::after spacer rule can be completely REMOVED. It's no longer needed. */


/* --- The UNIFIED Back Button Style (Right-Aligned) --- */
/* This style now works perfectly on both desktop and mobile */
#wordlab-scene #wl-back-btn {
    /* KEY CHANGE: Use absolute positioning to place the button */
    position: absolute;
    right: 0; /* Position on the far right of the header */
    top: 50%; /* Center vertically */
    transform: translateY(-50%);

    /* The minimal style you liked remains the same */
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 12px;
    color: white;
    cursor: pointer;
    font-size: 32px;
    font-weight: 300;
    line-height: 1;
    transition: background-color 0.2s;
    
    /* Fixed dimensions */
    width: 48px;
    height: 48px;
    padding: 0;
}

#wordlab-scene #wl-back-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}


/* --- 2. Stufen (Level) Selection View --- */
#wordlab-scene #wl-stufen-container { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
    gap: 20px; 
    width: 100%; 
    max-width: 700px; 
}
#wordlab-scene .stufe-btn { padding: 20px; background-color: rgba(255, 255, 255, 0.06); border: none; border-radius: 16px; color: var(--ink); text-align: left; cursor: pointer; transition: background-color 0.2s, transform 0.2s; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
#wordlab-scene .stufe-btn:hover { background-color: rgba(255, 255, 255, 0.1); transform: translateY(-3px); }
#wordlab-scene .stufe-title { font-size: 20px; font-weight: 500; }
#wordlab-scene .stufe-count { font-size: 14px; color: var(--ink-dim); margin-top: 4px; }


/* --- 3. Word Cards View --- */
#wordlab-scene #wl-cards-container { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); 
    gap: 20px; 
    width: 100%; 
}
#wordlab-scene .word-card { background-color: rgba(255, 255, 255, 0.06); border-radius: 18px; padding: 10px; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 15px rgba(0,0,0,0.2); text-align: center; }
#wordlab-scene .word-card:hover { transform: translateY(-5px) scale(1.03); box-shadow: 0 8px 25px rgba(0,0,0,0.3); }
#wordlab-scene .word-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; }
#wordlab-scene .word-card-text { margin-top: 10px; font-size: 20px; }


/* --- 4. Detail View --- */
#wordlab-scene #wl-detail-view { justify-content: flex-start; }
#wordlab-scene #wl-card { width: 100%; max-width: 420px; aspect-ratio: 4 / 3; background-color: rgba(255,255,255,0.06); border-radius: 20px; display: flex; justify-content: center; align-items: center; padding: 15px; box-sizing: border-box; box-shadow: 0 8px 30px rgba(0,0,0,0.3); }
#wordlab-scene #wl-image { max-width: 100%; max-height: 100%; object-fit: cover; border-radius: 12px; }
#wordlab-scene #wl-syllable-display { min-height: 50px; font-size: 38px; font-weight: 500; display: flex; }
#wordlab-scene #wl-syllable-display span:nth-child(odd) { color: var(--ink); }
#wordlab-scene #wl-syllable-display span:nth-child(even) { color: var(--accent-2); }
#wordlab-scene #wl-slots-container, #wordlab-scene #wl-bank-container { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
#wordlab-scene .slot { width: 120px; height: 56px; border: 2px dashed var(--ink-dim); border-radius: 14px; display: flex; justify-content: center; align-items: center; font-size: 30px; transition: all 0.2s ease; }
#wordlab-scene .slot.next { border-style: solid; border-color: var(--accent); box-shadow: 0 0 15px rgba(16, 185, 129, 0.7); }
#wordlab-scene .syllable-btn { width: 120px; height: 56px; background-image: linear-gradient(to right, #334155, #475569); border:none; border-radius:14px; color:white; font-size:30px; cursor:pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.3); transition: transform 0.1s; }
#wordlab-scene .syllable-btn:hover { transform: translateY(-3px); }
#wordlab-scene .syllable-btn:disabled { opacity: 0.3; cursor: not-allowed; background-image: none; background-color: #222; }
#wordlab-scene #wl-controls { width: 100%; max-width: 420px; display: flex; justify-content: space-between; gap: 10px; }
#wordlab-scene #wl-controls button {
    font-size: 18px;
    padding: 12px 25px;
    border: none;
    border-radius: 14px;
    color: white;
    cursor: pointer;
    flex-grow: 1;
    /* The background-image is now handled by the specific rules below */
}

/* --- KEY: Add this rule for the orange "Hören" button --- */
#wordlab-scene #wl-speak-btn {
    background-image: linear-gradient(to right, #f97316, #fb923c); /* Orange gradient */
}

/* --- KEY: Add this rule for the green "Weiter" button --- */
#wordlab-scene #wl-next-btn {
    background-image: linear-gradient(to right, var(--accent), var(--accent-2)); /* Accent gradient */
}


/* --- 5. MOBILE OVERRIDES for Word Lab (SIMPLIFIED) --- */
@media (max-width: 850px) {
    /*
     KEY CHANGE: All the specific overrides for .wl-header, .cards-header,
     .detail-header, and #wl-back-btn have been completely REMOVED.
     The new unified style above works perfectly on mobile by default.
    */

    /* General layout adjustments for mobile (These remain unchanged) */
    #wordlab-scene #wl-cards-container { 
        grid-template-columns: repeat(3, 1fr); 
        gap: 12px; 
    }
    #wordlab-scene .word-card-text { font-size: 16px; }
    #wordlab-scene #wl-detail-view #wl-card { max-width: 320px; max-height: 35vh; }
    #wordlab-scene #wl-detail-view #wl-syllable-display { font-size: 30px; }
    #wordlab-scene #wl-detail-view .slot, 
    #wordlab-scene #wl-detail-view .syllable-btn { width: 90px; height: 48px; font-size: 24px; }
    #wordlab-scene #wl-detail-view #wl-controls { margin-top: auto; padding-top: 10px; }
}


/* --- QUIZ SCENE (RE-STYLED FOR VERTICAL FLEXIBILITY) --- */

/* 1. Main Scene Layout */
#quiz-scene {
    height: 100%; /* KEY CHANGE: Make the scene fill its container's height */
    justify-content: flex-start;
    gap: 15px; /* Reduced the main gap slightly */
    padding-bottom: 20px; /* Ensure footer has space from the bottom edge */
}

/* 2. Unified Header (No changes here, it's already good) */
#quiz-scene .quiz-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
    max-width: 700px;
}
#quiz-scene h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    text-align: center;
}
#quiz-scene .quiz-stufen-select {
    -webkit-appearance: none;
    appearance: none;
    background-color: rgba(255, 255, 255, 0.06);
    border: none;
    border-radius: 14px;
    color: var(--ink);
    font-family: inherit;
    font-size: 16px;
    cursor: pointer;
    padding: 12px 40px 12px 20px;
    width: 100%;
    max-width: 280px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: background-color 0.2s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23e6ebf2'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 20px;
}
#quiz-scene .quiz-stufen-select:hover {
    background-color: rgba(255, 255, 255, 0.1);
}


/* 4. Main Quiz Content Area */
#quiz-scene .quiz-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    max-width: 800px;
    flex-grow: 1;      /* KEY CHANGE: Allows this container to fill available vertical space */
    min-height: 0;       /* KEY CHANGE: A flexbox trick to allow content to shrink properly */
}

#quiz-scene .quiz-question {
    font-size: clamp(48px, 12vw, 100px); /* Make font size responsive */
    font-weight: bold;
    /* Remove min-height to allow it to be more flexible */
}

#quiz-scene .quiz-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr; /* KEY CHANGE: Make two equal-height rows */
    gap: 20px;
    width: 100%;
    flex-grow: 1; /* KEY CHANGE: Allow the grid itself to grow */
    min-height: 0; /* KEY CHANGE: Allow the grid to shrink */
}

/* Card styles are mostly fine, just minor tweaks */
#quiz-scene .quiz-option-btn {
    background-color: rgba(255, 255, 255, 0.06);
    border: 3px solid transparent;
    border-radius: 18px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    /* KEY CHANGE: Ensure the button itself has a height to contain the image */
    height: 100%;
    min-height: 0;
}
#quiz-scene .quiz-option-btn:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
}

#quiz-scene .quiz-option-btn img {
    width: 100%;
    height: 100%; /* KEY CHANGE: Make the image fill the button's height */
    object-fit: contain; /* KEY CHANGE: Fit the whole image without cropping */
    border-radius: 12px;
    /* Aspect-ratio is no longer needed as the grid and height properties handle it */
}

#quiz-scene .quiz-option-btn.correct {
    border-color: var(--success);
    transform: scale(1.05);
}
#quiz-scene .quiz-option-btn.incorrect {
    border-color: var(--danger);
}

/* 5. Footer and Controls */
/* The footer now has a fixed position at the bottom of the content flow */
#quiz-scene .quiz-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 700px; /* Match progress bar width */
    flex-shrink: 0; /* Prevent the footer from shrinking */
}

#quiz-scene .quiz-correct-counter {
    font-size: 16px;
    color: var(--ink-dim);
}

#quiz-scene .quiz-footer button {
    font-size: 18px;
    padding: 12px 25px;
    border: none;
    border-radius: 14px;
    background-image: linear-gradient(to right, var(--accent), var(--accent-2));
    color: white;
    cursor: pointer;
}

/* Progress bar is fine, we just add flex-shrink to prevent it from shrinking */
#quiz-scene .quiz-progress-bar { 
    width: 90%; 
    max-width: 700px; 
    height: 18px; 
    background-color: rgba(255, 255, 255, 0.08); 
    border-radius: 12px; 
    position:relative;
    flex-shrink: 0; /* KEY CHANGE */
}
#quiz-scene .quiz-progress-bar .fill { height: 100%; background-color: var(--accent-2); border-radius: 12px; transition: width 0.3s ease-out; }
#quiz-scene .quiz-progress-bar .emoji { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 28px; transition: left 0.3s ease-out; }
#quiz-scene .quiz-progress-bar .mouse { left: 0; }
#quiz-scene .quiz-progress-bar .cheese { right: -5px; transform: translateY(-50%); }

/* --- SOUNDBOARD SCENE (CALCULATOR LAYOUT) --- */
#soundboard-scene { 
    justify-content: flex-start; 
}

#soundboard-scene h3 { 
    margin-bottom: 20px; 
    text-align: center; 
    /* KEY CHANGE: Use order to place the title first */
    order: 1;
}

#soundboard-scene .soundboard-container { 
    width: 100%; 
    max-width: 900px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 25px; 
}

/* --- 1. The "Display" (Formula Container) --- */
#soundboard-scene .sb-formula-container { 
    /* KEY CHANGE: Use order to place this second, like a calculator screen */
    order: 2;

    /* KEY CHANGE: Style it to look like a single display panel */
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 18px;
    padding: 15px 25px;
    width: 100%;
    min-height: 56px;
    box-sizing: border-box;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);

    display: flex; 
    align-items: center; 
    justify-content: center; /* Center the slots inside */
    gap: 15px; 
}

#soundboard-scene .sb-formula-slot { 
    /* KEY CHANGE: Remove the individual borders to create a unified display */
    border: 1px solid #f97316;
    border-radius: 5px; 
    width: 100%; 
    height: 56px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 32px; /* Make the font slightly larger */
    font-weight: bold;
    color: var(--accent-2); /* Give it a nice "digital" color */
}

#soundboard-scene .sb-formula-plus { 
    font-size: 24px; 
    color: var(--ink-dim); 
}


/* --- 2. The "Keypad" (Keys Container) --- */
#soundboard-scene .sb-keys-container { 
    /* KEY CHANGE: Use order to place this third */
    order: 3;
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); 
    gap: 16px; 
    width: 100%; 
}

#soundboard-scene .soundboard-key { 
    aspect-ratio: 1.25 / 1;
    border: none; 
    border-radius: 18px; 
    font-size: 28px; 
    font-weight: 500; 
    color: var(--ink); 
    cursor: pointer; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); 
    transition: transform 0.1s, box-shadow 0.2s; 
}
#soundboard-scene .soundboard-key:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 8px 20px rgba(0,0,0,0.3); 
}
#soundboard-scene .soundboard-key.vowel { background-image: linear-gradient(to right, #e5edf6, #f5f9ff); color: #0b1320; }
#soundboard-scene .soundboard-key.consonant { background-image: linear-gradient(to right, #334155, #475569); color: var(--ink); }


/* --- 3. The Controls --- */
/* Style for the 'abc' button */
#soundboard-scene #sb-case-btn {
    background-image: linear-gradient(to right, var(--accent), var(--accent-2));
    color: white;
    font-size: 18px; /* Use a slightly smaller font for control buttons */
}

/* Style for the 'Hören' button */
#soundboard-scene #sb-speak-btn {
    background-image: linear-gradient(to right, #f97316, #fb923c);
    color: white;
    font-size: 18px;
    
    /* Keep the button spanning two columns */
    grid-column: span 2;
    
    /* KEY FIX: Override the aspect-ratio to make the button normal height (2x1) */
    aspect-ratio: auto;
}

#soundboard-scene #sb-speak-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none; /* Prevents the button from being clicked */
}



/* --- 4. Mobile Optimizations (No changes needed, the reordering works perfectly) --- */
@media (max-width: 850px) {
    /* Make the entire scene container fill the device's height */
    #soundboard-scene {
        height: 100dvh; 
        padding: 15px;
        box-sizing: border-box;
    }

    #soundboard-scene .soundboard-container {
        height: 100%;
        gap: 15px;
        /* KEY CHANGE: Instead of stretching content, arrange it with space between */
        justify-content: space-between; 
    }

    /* --- KEY FIX for the Keypad --- */
    #soundboard-scene .sb-keys-container {
        /* REMOVED flex-grow and min-height, we no longer want it to stretch */
        
        /* Force a 5-column grid */
        grid-template-columns: repeat(5, 1fr);
        /* REMOVED grid-auto-rows, the key's aspect ratio will define the row height */
        
        gap: 10px;
    }

    /* --- KEY FIX for the Keys --- */
    #soundboard-scene .soundboard-key {
        /* This is the most important change: */
        /* Restore the aspect ratio to make the keys perfectly square */
        aspect-ratio: 1 / 1;
        
        /* Use a responsive font size */
        font-size: clamp(16px, 5vw, 24px);
        border-radius: 12px;
    }

    /* --- KEY FIX for the Wide Button --- */
    /* We MUST override the square aspect ratio for the button that spans two columns */
    #soundboard-scene #sb-speak-btn {
        aspect-ratio: auto;
    }
}

/* --- STORY SCENE (CORRECTED & CONSTRAINED LAYOUT) --- */
#story-scene .ss-view {
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

#story-scene .ss-view.active {
    display: flex;
}

#story-scene h3 {
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 10px;
    flex-shrink: 0;
}

#story-scene #ss-overview-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    width: 100%;
    max-width: 1100px;
}

#story-scene .story-card {
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    padding: 10px;
    cursor: pointer;
    transition: transform 0.2s;
}

#story-scene .story-card:hover {
    transform: scale(1.03);
}

#story-scene .story-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
}

#story-scene .story-card-title {
    margin-top: 10px;
    margin-left: 5px;
    font-size: 20px;
}

#story-scene #ss-reader-view.active {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    gap: 16px;
}


/* KEY CHANGE: Allow the gallery to take up a large, flexible portion of the space */
#story-scene .sr-gallery {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    max-width: 950px;
    
    flex-grow: 1; /* This is the most important property! */
    min-height: 0; /* A flexbox trick to allow proper shrinking */
}

/* KEY CHANGE: Remove max-height and let the flex parent control the size */
#story-scene #sr-card {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%; /* Make the card fill its flex parent (.sr-gallery) */
    max-width: 700px;
    /* REMOVED: max-height: 45vh; */
    /* REMOVED: aspect-ratio: 16 / 10; */
    
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 15px;
    box-sizing: border-box;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

#story-scene #sr-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
}

#story-scene .sr-nav-btn {
    flex-shrink: 0;
    font-size: 32px;
    font-weight: 300;
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    transition: background 0.2s, transform 0.2s;
}

#story-scene .sr-nav-btn:hover {
    background: rgba(51, 65, 85, 0.9);
    transform: scale(1.1);
}

/* KEY CHANGE: Make the controls and text containers non-flexible */
#story-scene #sr-controls {
    flex-shrink: 0; /* Prevent from shrinking */
}

#story-scene #sr-speak-btn {
    font-size: 18px;
    padding: 12px 25px;
    border: none;
    border-radius: 14px;
    background-image: linear-gradient(to right, #f97316, #fb923c);
    color: white;
    cursor: pointer;
}

#story-scene #sr-text-container {
    font-size: clamp(20px, 3vw, 28px); /* Make font size responsive */
    line-height: 1.7;
    max-width: 900px;
    width: 100%;
    text-align: center;
    flex-shrink: 0; /* Prevent from shrinking */
    
    /* Add overflow behavior for very long texts on small screens */
    overflow-y: auto;
    max-height: 30%; /* Ensure it doesn't take up too much space */
}

#story-scene #sr-text-container .story-line {
    margin-bottom: 8px;
}

#story-scene #sr-text-container .punctuation {
    color: var(--ink-dim);
}

#story-scene #sr-text-container .word {
    cursor: pointer;
    padding: 2px 0;
}

#story-scene #sr-text-container .rainbow-word {
    font-weight: bold;
    background: linear-gradient(to right, #ff6b6b, #ffb86b, #ffd56b, #6bff95, #6bb8ff, #b06bff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* --- Universal Confetti Styles --- */
#confetti-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; }
.confetti { position: absolute; width: 8px; height: 8px; background-color: var(--success); border-radius: 4px; animation: fall 1.5s ease-in forwards; }
@keyframes fall { from { transform: translateY(0) rotate(0deg); opacity: 1; } to { transform: translateY(100vh) rotate(720deg); opacity: 0; } }

/* --- HOME SCENE --- */
#home-scene {
    justify-content: center; /* Center content vertically */
    text-align: center;
}

/* --- 1. Desktop Content Styles --- */
#home-desktop-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#home-desktop-content h1 {
    font-size: 48px;
    margin: 0;
}

#home-desktop-content p {
    font-size: 20px;
    color: var(--ink-dim);
    margin: 0 0 20px 0;
}

#animated-title {
    display: flex;
    font-size: 64px;
    font-weight: bold;
    cursor: default;
}

#animated-title span {
    transition: transform 0.2s ease-in-out, color 0.2s;
    padding: 0 2px;
}

#animated-title span:hover {
    transform: translateY(-10px);
    color: var(--accent-2);
}

#animated-title .space {
    width: 20px; /* Adds space between words */
}


/* --- 2. Mobile Navigation Styles --- */
#home-mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 320px;

}

/* Use the existing .nav-btn style for consistency */
#home-mobile-nav .nav-btn {
    width: 100%;
    padding: 18px;
    font-size: 20px;
    color: white;
    background-image: linear-gradient(to right, #334155, #475569);
    border: none;
    border-radius: 16px;
    cursor: pointer;
    text-align: center; /* Center the text inside mobile buttons */
}


/* --- 3. The Responsive Magic (Media Query) --- */

/* On mobile screens (<= 850px)... */
@media (max-width: 850px) {
    #home-desktop-content {
        display: none; /* Hide the animated text */
    }
    #home-mobile-nav {
        display: flex; /* Show the navigation buttons */
    }
}

/* On desktop screens (> 850px)... */
@media (min-width: 851px) {
    #home-desktop-content {
        display: flex; /* Show the animated text */
    }
    #home-mobile-nav {
        display: none; /* Hide the navigation buttons */
    }
}