@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');



:root {

    --primary-bg: #f0f9ff; /* Light sky blue background base */

    --secondary-bg: #ffffff; /* White for containers */

    --accent-color-1: #00e5ff; /* Electric Cyan */

    --accent-color-2: #ffea00; /* Bright Yellow */

    --accent-color-3: #ff4081; /* Vibrant Pink/Magenta */

    --text-color-dark: #1a237e; /* Deep Indigo */

    --text-color-medium: #546e7a; /* Blue Grey */

    --text-color-light: #ffffff;

    --success-color: #00c853; /* Bright Green */

    --error-color: #d50000; /* Strong Red */

    --warning-color: #ffab00; /* Amber */

    --border-color: #90a4ae; 



    --font-primary: 'Poppins', sans-serif;

    --font-spark: 'Permanent Marker', cursive; /* Added energetic font */

}



/* Basic Reset & Body Styling */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    /* padding-bottom: 120px; <-- Removed */

    /* Apply Poppins, keep fallback */

    font-family: var(--font-primary); 

    min-height: 100vh;

    /* More dynamic gradient */

    background: linear-gradient(135deg, var(--primary-bg) 0%, var(--accent-color-1) 100%); 

    color: var(--text-color-medium); 

    display: flex; /* Make body a flex container */

    flex-direction: column; /* Stack children vertically */

}



/* Ad Space Styling */

.ad-space {

    width: 25%;

    min-height: 100vh;

    /* Subtle pattern or transparent */

    background-color: rgba(255, 255, 255, 0.1); 

    backdrop-filter: blur(3px);

    border-left: 1px solid rgba(255,255,255,0.2);

    border-right: 1px solid rgba(255,255,255,0.2);

}



/* Game Container Styling */

.game-container {

    width: 55%; /* Slightly wider */

    min-height: 95vh; /* Slightly less than full height */

    display: flex;

    flex-direction: column;

    align-items: center;

    padding: 30px 40px;  /* More padding */

    background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(240, 248, 255, 0.9)); /* White to AliceBlue */

    box-shadow: 0 8px 25px rgba(0, 105, 135, 0.25); /* Stronger shadow */

    border-radius: 20px; 

    margin: 2.5vh 0; /* Center vertically approx */

    border: 1px solid rgba(255, 255, 255, 0.5);

}



header h1 {

    font-weight: 700;

    color: var(--text-color-dark); 

    margin-bottom: 25px; /* Reduced margin */

    /* Responsive font size: min 2.5em, preferred 3.5em, max 4.5em based on viewport width */

    font-size: clamp(2.5em, 5vw, 3.5em); 

    text-align: center;

    text-shadow: 1px 1px 1px rgba(26, 35, 126, 0.1);

    min-height: 1.4em; /* Prevent overall height change */

    line-height: 1.2; /* Add explicit line-height to stabilize baseline */

}



/* Style the span specifically if needed (can be done in JS animation too) */

#spark-word {

    /* Inherit color from h1 by default */

    /* color: var(--accent-color-3); <-- Removed */

}



/* Screen Management */

.screen {

    width: 100%;

    text-align: center;

    display: none; /* Hide screens by default */

    flex-direction: column;

    align-items: center;

}



.screen.active {

    display: flex; /* Show the active screen */

}



/* Start Screen Specifics */

#start-screen h2 {

    margin-bottom: 25px;

    font-size: 2.2em;

    font-weight: 600; /* Semi-bold Poppins */

    color: var(--text-color-dark); 

}



/* Button Base Style */

.button-base { /* Create a base class for buttons */

    padding: 15px 30px;

    font-size: 1.2em;

    font-family: var(--font-primary);

    font-weight: 600;

    color: var(--text-color-dark); /* Dark text on light buttons */

    background: linear-gradient(145deg, var(--secondary-bg), #e6f7ff); /* White/light blue gradient */

    border: 1px solid rgba(0, 229, 255, 0.5); /* Cyan border */

    border-radius: 50px; /* Pill shape */

    cursor: pointer;

    transition: all 0.2s ease;

    box-shadow: 0 4px 8px rgba(26, 35, 126, 0.1), /* Indigo shadow */

                inset -2px -2px 4px rgba(255,255,255,0.6), /* Inner highlight */

                inset 2px 2px 4px rgba(0,0,0,0.05); /* Inner shadow */

    text-align: center;

}

.button-base:hover {

    transform: translateY(-3px) scale(1.02);

    box-shadow: 0 6px 12px rgba(26, 35, 126, 0.15),

                inset -2px -2px 4px rgba(255,255,255,0.6),

                inset 2px 2px 4px rgba(0,0,0,0.05);

    border-color: var(--accent-color-1);

}

.button-base:active {

    transform: translateY(0) scale(0.98);

    box-shadow: inset 2px 2px 5px rgba(26, 35, 126, 0.15), /* Stronger inset */

                inset -2px -2px 4px rgba(255,255,255,0.6);

}



#start-button {

    /* Apply base and specific color */

    composes: button-base; 

    /* Make it stand out more */

    background: linear-gradient(145deg, var(--accent-color-2), #ffc107); /* Yellow/Amber */

    color: var(--text-color-dark);

    border-color: rgba(255, 234, 0, 0.6);

    padding: 18px 40px; /* Larger padding */

    font-size: 1.4em;

}

#start-button:hover { 

    border-color: var(--accent-color-2);

}



#play-again-button {

    /* Apply base and specific color */

    composes: button-base;

     /* Use pink/magenta */

    background: linear-gradient(145deg, var(--accent-color-3), #f06292);

    color: var(--text-color-light); /* Light text on dark button */

    border-color: rgba(255, 64, 129, 0.6);

}

#play-again-button:hover { 

     border-color: var(--accent-color-3);

}





/* Game Screen Specifics */

#game-header {

    display: flex;

    justify-content: space-between;

    width: 100%;

    max-width: 600px;

    margin-bottom: 25px; /* Less margin */

    font-size: 1.2em;

    font-weight: 600; 

    padding: 12px 15px; /* Adjust padding */

    background: rgba(255,255,255,0.7); /* Semi-transparent white */

    border-radius: 15px;

    border: 1px solid var(--accent-color-1);

    box-shadow: 0 2px 8px rgba(0, 105, 135, 0.1); 

    color: var(--text-color-dark);

}

#timer { color: var(--error-color); } 

#score { color: var(--accent-color-3); } /* Pink score */





#puzzle-instruction {

    margin: 15px 0 25px 0; /* Adjust margins */

    font-size: 1.4em; /* Larger instructions */

    min-height: 55px; 

    font-weight: 600; 

    color: var(--text-color-dark);

    padding: 10px;

    width: 100%; /* Ensure full width for centering */

}

/* Style the colored text within instructions */

#puzzle-instruction span { 

    padding: 2px 5px;

    border-radius: 4px;

    background-color: rgba(0,0,0,0.05); /* Subtle background */

    border: 1px dashed currentColor; /* Dashed border in the instruction color */

}





#puzzle-area {

    width: 100%;

    max-width: 600px;

    min-height: 280px; /* Reduced min-height significantly */

    /* Consider adding max-height: 60vh; if needed */

    margin-bottom: 20px; /* Reduced margin */

    border: none; /* Remove border */

    box-shadow: inset 0 0 15px rgba(26, 35, 126, 0.1); /* Softer inner shadow */

    background: radial-gradient(circle, #ffffff 70%, #e3f2fd 100%); /* Subtle radial */

    border-radius: 15px;

    padding: 25px; /* Slightly reduced padding */

    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px; /* Reduced gap */

}



#feedback-area { 

    margin-top: 15px;

    min-height: 35px;

    font-size: 1.3em;

    font-weight: 700; /* Bolder feedback */

}

.feedback-area {

    transition: color 0.3s ease;

}

.feedback-correct { color: var(--success-color); } 

.feedback-incorrect { color: var(--error-color); } 

.feedback-timeout { color: var(--warning-color); } 





/* Puzzle Element Styling */

.puzzle-item {

    width: 65px;

    height: 65px;

    padding: 15px;

    border: none; /* Remove border */

    border-radius: 12px; 

    /* Neon / electric feel */

    background-color: var(--secondary-bg);

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 1.6em; /* Larger font */

    font-weight: 700; 

    color: var(--text-color-dark); 

    box-shadow: 0 2px 4px rgba(26, 35, 126, 0.1), /* Base shadow */

               0 0 0 2px rgba(255,255,255,0.8), /* White inner edge */

               0 0 0 4px var(--accent-color-1); /* Outer glow */

    transition: all 0.15s ease-out;

    overflow: hidden;

    text-align: center;

    cursor: pointer;

}

.puzzle-item:hover {

     transform: scale(1.05); /* Lift slightly */

     box-shadow: 0 4px 8px rgba(26, 35, 126, 0.15),

                0 0 0 2px rgba(255,255,255,0.9),

                0 0 0 5px var(--accent-color-2); /* Yellow glow on hover */

}

.puzzle-item:active {

    transform: scale(0.96); /* Push down */

    box-shadow: inset 0 0 5px rgba(26, 35, 126, 0.2), /* Inset shadow */

                0 0 0 2px rgba(255,255,255,0.8),

                0 0 0 4px var(--accent-color-3); /* Pink glow when active */

}



/* Memory Game Specific Styles */

.memory-item-display {

    cursor: default;

    background: #e3f2fd; /* Match puzzle area edge */

    box-shadow: inset 0 0 4px rgba(0,0,0,0.1);

    color: var(--text-color-medium);

    border: 1px solid #bbdefb; /* Light blue border */

    /* Remove outer glow for display items */

}

.memory-item-display:hover { 

    transform: none; 

    box-shadow: inset 0 0 4px rgba(0,0,0,0.1);

}



/* Style for clicked/disabled items (added in JS) */

.memory-item-interactive[style*="background-color: rgb(221, 221, 221)"],

.number-order-item[style*="background-color: rgb(221, 221, 221)"] {

    cursor: not-allowed;

    background: #cfd8dc !important;

    color: var(--text-color-medium);

    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.2);

    transform: scale(0.95);

    border: 1px solid var(--border-color);

    /* Remove outer glow */

}



/* Quick Addition Puzzle Specific Styles */

.quick-addition-numbers {

    width: 100%;

    text-align: center;

    margin-bottom: 20px;

    font-size: 2em; /* Even larger numbers */

    line-height: 1.6;

}

.quick-addition-number {

    display: inline-block;

    padding: 0 6px;

    font-weight: 700;

}

.quick-addition-options {

    width: 100%;

    display: flex;

    justify-content: center; /* Center buttons */

    flex-wrap: wrap;

    gap: 15px; /* More gap */

    margin-top: 20px;

}

/* Quick Addition Buttons inherit .puzzle-item now */

.quick-addition-option {

    /* Remove previous overrides */

    margin: 0;

    padding: 15px !important; /* Keep padding override if needed for alignment */

    box-sizing: border-box !important; /* Keep box sizing */

    /* Let it inherit most styles from .puzzle-item */

}

/* Remove explicit hover/active for these unless needed */

.quick-addition-option:hover { }

.quick-addition-option:active { }

.quick-addition-option[disabled] { 

    background: #bdbdbd; /* Grey */

    color: #757575;

    cursor: not-allowed;

    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.2);

    transform: none;

    opacity: 0.6;

    /* Remove outer glow */

     box-shadow: inset 1px 1px 3px rgba(0,0,0,0.2);

}

.quick-addition-option[style*="border: 2px solid"] { /* Highlight clicked */

    box-shadow: 0 0 10px rgba(26, 35, 126, 0.4); /* Darker shadow */

}





/* Instruction Span Styling (color is set inline) */

/* ... (Style updated above) ... */



/* Shape & Color Puzzle Styles */

.shape-item {

    width: 50px; 

    height: 50px;

    border: none;

    color: transparent;

    font-size: 0;

    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15); 

    transition: transform 0.2s ease, opacity 0.2s ease, outline 0.1s ease-out;

    cursor: pointer;

    margin: 10px; /* Increase margin slightly */

    display: inline-block; 

    vertical-align: middle; 

}

.shape-item:hover {

    transform: scale(1.1);

    opacity: 0.9;

}

/* Specific Shapes */

.shape-circle { border-radius: 50%; }

.shape-square { border-radius: 0; }

.shape-triangle {

    width: 0 !important; 

    height: 0 !important;

    background-color: transparent !important;

    border-left: 30px solid transparent;

    border-right: 30px solid transparent;

    border-bottom-width: 50px;

    border-bottom-style: solid;

    border-bottom-color: #ccc;

    box-shadow: none;

    border-radius: 0;

    padding: 0 !important;

}

/* Add outline for clicked item (set in JS) */

.shape-item[style*="outline: 3px solid black"] { }





/* Reaction Time Puzzle Styles */

/* Replace the old rule with the new one for the active state */
.puzzle-area-reaction-active {
    position: relative; /* Needed for absolute positioning of the bar */
    overflow: hidden; /* Prevent bar spilling out */
    background-color: #e8f5e9; /* Very light green background */
    cursor: pointer; /* Ensure cursor pointer for active state */
}

/* Add the new rule for the timer bar itself */
#reaction-timer-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #4CAF50; /* Vibrant green color */
    transform-origin: bottom; /* Change to scale from the bottom */
    transform: scaleY(1); /* Explicitly start at full height */
    z-index: 1; /* Ensure it's behind potential content */
}

/* Add the new rule to ensure content is above the bar */
.puzzle-area-reaction-active > * {
    position: relative; /* Allow z-index stacking */
    z-index: 2;
}



/* Recent Scores Styling */

#recent-scores-container {

    margin-top: 40px;

    width: 90%; /* Wider */

    max-width: 500px;

    border-top: 1px solid var(--accent-color-1);

    padding-top: 20px;

}

#recent-scores-container h3 {

    margin-bottom: 15px; /* More space */

    color: var(--text-color-dark);

    font-size: 1.5em; /* Larger */

    font-weight: 600; 

}

#recent-scores-list {

    list-style: none;

    padding: 0;

    margin: 0;

    text-align: left;

}

#recent-scores-list li {

    background-color: #e3f2fd; /* Theme background */

    border: 1px solid #bbdefb; 

    border-radius: 6px; /* Slightly more rounded */

    padding: 10px 15px; /* More padding */

    margin-bottom: 8px;

    font-size: 1em;

    display: flex;

    justify-content: space-around; /* Space items out more */

    flex-wrap: wrap;

    box-shadow: 0 1px 3px rgba(0,0,0,0.05);

}

#recent-scores-list li span {

    margin: 2px 8px; /* More horizontal spacing */

}

#recent-scores-list li strong { 

    color: var(--accent-color-3); /* Highlight score */

    font-weight: 700;

}

.score-date { font-size: 0.9em; color: var(--text-color-medium); }





/* Final Score Screen Styles */

#final-score-screen h2 { color: var(--accent-color-3); font-weight: 700; }

.final-score { color: var(--text-color-dark); } 

.final-time { color: var(--text-color-medium); }



/* Explicitly target Quick Addition button states for clarity */

/* Removing these as .puzzle-item handles hover/active now */

/* .quick-addition-option:hover { } */

/* .quick-addition-option:active { } */



/* Footer Styling - Simplified */

footer {

    /* position: static; (default) */

    width: 100%;

    background-color: rgba(26, 35, 126, 0.8);

    color: var(--text-color-light);

    padding: 15px 20px;

    text-align: center;

    font-size: 0.8em;

    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);

    backdrop-filter: blur(4px);

    margin-top: 40px; /* Keep space above footer */

}



footer h4 { margin-bottom: 5px; font-weight: 600; font-size: 0.9em; }

footer p { margin: 3px 0; line-height: 1.4; }

footer a { color: var(--accent-color-1); text-decoration: none; }

footer a:hover { text-decoration: underline; }



/* Apply flex layout to the wrapper, not the body */

.main-content-wrapper {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    width: 100%;

    flex-grow: 1; /* Allow wrapper to grow and fill space */

}



/* --- About Drawer Styles --- */



#about-tab {

    position: fixed;

    left: 0;

    top: 50%;

    transform: translateY(-50%) rotate(-90deg);

    transform-origin: left top;

    background-color: var(--text-color-dark);

    color: var(--text-color-light);

    padding: 8px 15px;

    border-radius: 0 0 5px 5px;

    cursor: pointer;

    z-index: 101; /* Above footer */

    font-size: 0.9em;

    font-weight: 600;

    box-shadow: 2px 0px 5px rgba(0,0,0,0.2);

    /* Include transform in the transition */

    transition: background-color 0.2s ease, transform 0.4s ease-in-out; 

}



/* New rule to move the tab when the drawer is open */

#about-tab.open {

    transform: translateX(280px) translateY(-50%) rotate(-90deg); 

}



#about-tab:hover {

    background-color: var(--accent-color-3); /* Pink on hover */

}



#about-drawer {

    position: fixed;

    left: 0;

    top: 0;

    width: 280px; /* Adjust width as needed */

    height: 100%;

    background-color: #ffffff; /* White background */

    box-shadow: 3px 0px 10px rgba(0,0,0,0.2);

    transform: translateX(-100%); /* Initially off-screen */

    transition: transform 0.4s ease-in-out;

    z-index: 100; /* Below tab but above content */

    padding: 20px;

    padding-top: 50px; /* Space for close button */

    color: var(--text-color-medium);

    overflow-y: auto; /* Allow scrolling if content is tall */

}



#about-drawer.open {

    transform: translateX(0); /* Slide in */

}



#about-drawer h3 {

    color: var(--text-color-dark);

    margin-bottom: 15px;

    font-size: 1.4em;

}



#about-drawer p, #about-drawer ul {

    margin-bottom: 12px;

    line-height: 1.5;

    font-size: 0.95em;

}



#about-drawer ul {

    list-style: none; /* Remove default bullets */

    padding-left: 0;

}



#about-drawer ul li {

    padding-left: 20px;

    position: relative;

}

/* Custom bullet point */

#about-drawer ul li::before {

    content: '✔'; /* Checkmark or other symbol */

    color: var(--success-color);

    position: absolute;

    left: 0;

    top: 0;

}



#about-drawer .close-drawer {

    position: absolute;

    top: 10px;

    right: 15px;

    background: none;

    border: none;

    font-size: 2em;

    color: var(--text-color-medium);

    cursor: pointer;

    line-height: 1;

    padding: 0;

}

#about-drawer .close-drawer:hover {

    color: var(--error-color);

}



/* --- Reaction Time Puzzle Specific Styles --- */
.puzzle-area-reaction-active {
    position: relative; /* Needed for absolute positioning of the bar */
    overflow: hidden; /* Prevent bar spilling out */
    background-color: #e8f5e9; /* Very light green background */
    cursor: pointer; /* Ensure cursor pointer for active state */
}

#reaction-timer-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #4CAF50; /* Vibrant green color */
    transform-origin: bottom; /* Change to scale from the bottom */
    transform: scaleY(1); /* Explicitly start at full height */
    z-index: 1; /* Ensure it's behind potential content */
}

/* Ensure any direct text content within the puzzle area is visible */
.puzzle-area-reaction-active > * {
    position: relative; /* Allow z-index stacking */
    z-index: 2;
}



/* Final Score Screen */
#final-score-screen {

}

/* --- Media Queries for Responsiveness --- */

@media (max-height: 700px) {
    /* Reduce vertical spacing and sizes for shorter screens - MORE AGGRESSIVE */

    header h1 {
        font-size: clamp(1.8em, 3.5vw, 2.5em); /* Even smaller title */
        margin-bottom: 10px; /* Less margin below title */
    }
    
    #start-screen h2 {
        font-size: 1.8em; /* Smaller start screen heading */
        margin-bottom: 15px;
    }

    .game-container {
        padding: 15px 25px; /* Reduce container padding more */
    }

    #game-header {
        padding: 6px 10px; /* Smaller header padding */
        font-size: 1em;
        margin-bottom: 10px;
    }

    #puzzle-instruction {
        font-size: 1.1em; /* Smaller instructions */
        min-height: 30px;
        margin: 8px 0 12px 0;
    }

    #puzzle-area {
        min-height: 160px; /* Even smaller puzzle min-height */
        padding: 10px;
        gap: 6px;
        margin-bottom: 10px;
    }

    .puzzle-item {
        width: 50px; /* Smaller puzzle items */
        height: 50px;
        font-size: 1.3em;
        border-radius: 8px;
    }
    
    /* Specific adjustment for triangle base size */
    .shape-triangle {
         border-left-width: 22px;
         border-right-width: 22px;
         border-bottom-width: 35px; /* Adjust triangle height */
         margin: 4px;
    }
    /* Specific adjustment for non-triangle shapes */
    .shape-item:not(.shape-triangle) {
         width: 40px;
         height: 40px;
         margin: 4px;
    }


    #feedback-area {
        font-size: 1em;
        min-height: 20px;
        margin-top: 8px;
    }

    #start-button {
         padding: 10px 20px;
         font-size: 1.1em;
    }
    
    #recent-scores-container {
         margin-top: 15px; /* Less space above scores */
    }
    #recent-scores-container h3 {
        font-size: 1.2em;
        margin-bottom: 8px;
    }
    #recent-scores-list li {
        padding: 6px 8px; /* Tighter score list */
        font-size: 0.85em;
        margin-bottom: 5px;
    }

    footer {
        padding: 8px 10px; /* Smaller footer */
        font-size: 0.7em;
        margin-top: 15px; /* Less space above footer */
    }
} 

/* --- Media Query for Mobile/Tablet Widths --- */

@media (max-width: 768px) {
    body {
        /* Allow default scrolling on mobile */
        /* min-height might not be needed if content dictates height */
    }

    .main-content-wrapper {
        flex-direction: column; /* Stack main content vertically */
        align-items: center; /* Center container */
    }

    .ad-space {
        display: none; /* Hide ad spaces on narrow screens */
    }

    .game-container {
        width: 95%; /* Use most of the screen width */
        min-height: auto; /* Let content determine height */
        margin: 5% 0; /* Adjust vertical margin */
        padding: 20px 15px; /* Adjust padding for narrower width */
        box-shadow: 0 4px 15px rgba(0, 105, 135, 0.2); /* Softer shadow */
    }

    header h1 {
        /* Use the smaller end of the clamp or a fixed smaller size */
        font-size: 2.0em; /* Further reduce size */
        margin-bottom: 15px; /* Reduced margin */
        line-height: 1.2; /* Add line-height to prevent bounce */
    }

    #start-screen h2 {
        font-size: 1.5em; /* Further reduce size */
        margin-bottom: 20px;
    }

    #start-button {
        font-size: 1.1em; /* Slightly smaller font */
        padding: 12px 25px; /* Adjust padding */
        width: 80%; /* Make button wider */
        max-width: 300px; /* But not excessively wide */
    }
    
    /* Adjust recent scores display for mobile */
    #recent-scores-container {
         width: 100%;
         margin-top: 25px;
    }
    #recent-scores-list li {
        /* Stack items vertically on mobile */
        flex-direction: column; 
        align-items: center; /* Center items */
        padding: 10px; /* Adjust padding */
        text-align: center;
        gap: 5px; /* Add gap between stacked items */
        font-size: 0.9em; /* Adjust font size */
    }
    .score-date {
        width: auto; /* Remove width: 100% */
        text-align: center; /* Center date text */
        margin-top: 0; /* Remove top margin */
        font-size: 0.9em; /* Match list item font */
    }

    /* Adjustments from max-height query might also be needed here */
    /* Example: Further reduce puzzle area size if needed */
    #puzzle-area {
        min-height: 200px; /* Example */
        gap: 8px;
    }
    .puzzle-item {
        width: 55px;
        height: 55px; /* Ensure decent tap target */
        font-size: 1.4em;
    }
     /* Ensure shape items are tappable */
    .shape-item:not(.shape-triangle) {
         width: 45px; 
         height: 45px;
    }
    .shape-triangle {
         border-left-width: 25px;
         border-right-width: 25px;
         border-bottom-width: 40px;
    }
    
    /* Adjust About tab/drawer if needed */
    #about-tab {
         /* Maybe adjust position slightly or size */
         padding: 6px 12px;
         font-size: 0.8em;
    }
    #about-tab.open {
        transform: translateX(260px) translateY(-50%) rotate(-90deg); /* Adjust if drawer width changes */
    }
    #about-drawer {
        width: 260px; /* Slightly narrower drawer? */
    }

    footer {
        /* Ensure footer text is readable */
        font-size: 0.75em;
        padding: 10px;
    }
}