/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

/* --- START: CSS Variables --- */
:root {
    --bg-color: #e8f0fe; /* Light blue background */
    --container-bg: #ffffff; /* White container (used if elements are added back) */
    --text-color: #202124; /* Dark grey text */
    --secondary-text-color: #5f6368; /* Medium grey text */
    --link-color: #1a73e8; /* Google blue link */
    --link-hover-color: #174ea6; /* Darker blue link hover */
    --border-color: #dadce0; /* Light grey border */
    --input-border-color: #dadce0; /* Input border */
    --code-bg: #f1f3f4; /* Code block background */
    --blockquote-bg: #f8f9fa; /* Blockquote background */
    --blockquote-border: #dadce0; /* Blockquote border */
    --blockquote-text: #5f6368; /* Blockquote text */
    --table-border: #dadce0; /* Table border */
    --table-header-bg: #e8eaed; /* Table header background */
    --toggle-slider-bg: #ccc; /* Theme toggle slider (off state) */
    --sidebar-bg: #ffffff; /* Sidebar background */
    --sidebar-border: #dadce0; /* Sidebar border */
    --tab-hover-bg: #f1f3f4; /* Tab hover background */
    --sidebar-width: 260px; /* Sidebar width variable */
    --transition-speed: 0.3s; /* Transition speed variable */
    --logo-top-padding: 60px; /* Space above the main content area WHEN GAME ACTIVE */
    --small-logo-top-offset: 15px; /* Top offset for the small logo */
    --small-logo-font-size: 1.8em; /* Font size for the small logo */
  }

/* Define color variables for dark mode */
[data-theme="dark"] {
    --bg-color: #202124; /* Dark grey background */
    --container-bg: #292a2d; /* Slightly lighter dark container */
    --text-color: #e8eaed; /* Light grey text */
    --secondary-text-color: #9aa0a6; /* Medium grey text */
    --link-color: #8ab4f8; /* Light blue link */
    --link-hover-color: #aecbfa; /* Lighter blue link hover */
    --border-color: #3c4043; /* Darker grey border */
    --input-border-color: #5f6368; /* Medium grey input border */
    --code-bg: #292a2d; /* Dark code block background */
    --blockquote-bg: #303134; /* Dark blockquote background */
    --blockquote-border: #5f6368; /* Dark blockquote border */
    --blockquote-text: #bdc1c6; /* Light grey blockquote text */
    --table-border: #5f6368; /* Dark table border */
    --table-header-bg: #3c4043; /* Dark table header background */
    --toggle-slider-bg: #8ab4f8; /* Light blue theme toggle slider (on state) */
    --sidebar-bg: #292a2d; /* Sidebar background - dark */
    --sidebar-border: #3c4043; /* Sidebar border - dark */
    --tab-hover-bg: #3c4043; /* Tab hover background - dark */
  }
/* --- END: CSS Variables --- */


/* --- Base Body Styles --- */
body {
    font-family: 'poppins', sans-serif;
    margin: 0;
    background-color: var(--bg-color); /* Use variable */
    color: var(--text-color); /* Use variable */
    height: 100vh; /* Fix body height to viewport height */
    overflow: hidden; /* Prevent body scroll */
    box-sizing: border-box;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
    position: relative;
    display: flex; /* Use flex for sidebar + main content layout */
}

/* --- START: Sidebar Toggle Button (Fixed Position - Adjusted Top) --- */
.sidebar-toggle-button {
    display: flex;          /* Use flex for centering icon */
    position: fixed;        /* Position relative to viewport */
    top: 5px;               /* MODIFIED: Adjusted top position for alignment */
    left: 8px;              /* Position from left */
    z-index: 101;           /* Above the sidebar */
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
    border-radius: 50%;     /* Circular shape */
    width: 40px;            /* Fixed size */
    height: 40px;           /* Fixed size */
    padding: 0;             /* Remove padding */
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); /* Subtle shadow */
    color: var(--text-color); /* Use theme text color */
    justify-content: center; /* Center icon horizontally */
    align-items: center;     /* Center icon vertically */
    border: none;            /* Remove border */
    text-align: center;      /* Ensure text/icon is centered */
    font-size: 1.1em;        /* Reduced icon size */
    cursor: pointer;         /* Indicate interactivity */
    transition: color var(--transition-speed) ease, background-color var(--transition-speed) ease, top 0.2s ease; /* Smooth transitions, added top */
}
[data-theme="dark"] .sidebar-toggle-button { background-color: rgba(40, 40, 40, 0.8); }
.sidebar-toggle-button:hover { background-color: rgba(230, 230, 230, 0.9); }
[data-theme="dark"] .sidebar-toggle-button:hover { background-color: rgba(60, 60, 60, 0.9); }
/* --- END: Sidebar Toggle Button --- */


/* --- START: Sidebar Styles --- */
.sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background-color: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100vh;
    position: fixed; /* Keep sidebar fixed */
    top: 0;
    left: 0;
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateX(0);
    transition: transform var(--transition-speed) ease, width var(--transition-speed) ease, background-color var(--transition-speed) ease, border-color var(--transition-speed) ease;
    z-index: 90; /* Lower than toggle button */
}
@media (min-width: 768px) { body:not(.sidebar-open) .sidebar { transform: translateX(-100%); } }
@media (max-width: 767px) {
  body:not(.sidebar-open) .sidebar { transform: translateX(-100%); }
  body.sidebar-open .sidebar { transform: translateX(0); width: 80%; max-width: 300px; box-shadow: 2px 0 5px rgba(0,0,0,0.2); border-right: none; z-index: 100; }
}

/* --- Sidebar Header (Keep alignment settings) --- */
.sidebar-header {
    display: flex;          /* Keep flex for vertical alignment */
    align-items: center;    /* Keep vertical alignment */
    /* justify-content: center; <-- REMOVED horizontal centering */
    padding: 0 10px;        /* Basic horizontal padding */
    padding-left: 60px;     /* Keep Left padding to avoid fixed button */
    height: 50px;           /* Original height */
    border-bottom: 1px solid var(--sidebar-border);
    flex-shrink: 0;
    box-sizing: border-box;
    text-align: left;       /* Ensure text aligns left */
}

/* --- Sidebar Title Styling (Keep settings) --- */
.sidebar-header .sidebar-title {
    font-weight: 600;
    color: var(--secondary-text-color);
    font-size: 0.9em;       /* Match 'Grade:' label size */
    white-space: nowrap;
    opacity: 1;
    transition: opacity calc(var(--transition-speed) / 2) ease;
    margin-left: 0;         /* Ensure no extra margin */
    line-height: 50px;      /* Keep line-height for vertical centering */
}
body:not(.sidebar-open) .sidebar-header .sidebar-title { opacity: 0; pointer-events: none; }

/* --- Hide the (non-existent) toggle button placeholder inside the header --- */
.sidebar .sidebar-header .sidebar-toggle-button { display: none !important; }

/* --- Sidebar Content --- */
.sidebar-content { flex-grow: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; padding: 10px 20px; opacity: 1; transition: opacity calc(var(--transition-speed) / 2) ease; }
body:not(.sidebar-open) .sidebar-content { opacity: 0; pointer-events: none; }
.sidebar .tabs { display: flex; flex-direction: column; align-items: stretch; }
.sidebar .tab-button { padding: 10px 20px; border: none; background-color: transparent; cursor: pointer; font-family: 'poppins', sans-serif; font-size: 0.90em; color: var(--secondary-text-color); border-left: 3px solid transparent; margin-bottom: 2px; text-align: left; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; text-decoration: none; }
.sidebar .tab-button:hover { color: var(--link-color); background-color: var(--tab-hover-bg); }

/* --- Sidebar Bottom --- */
.sidebar-bottom { margin-top: auto; flex-shrink: 0; border-top: 1px solid var(--sidebar-border); padding: 10px 20px; transition: border-color var(--transition-speed) ease, opacity var(--transition-speed) ease; white-space: nowrap; opacity: 1; transition: opacity calc(var(--transition-speed) / 2) ease; }
body:not(.sidebar-open) .sidebar-bottom { opacity: 0; pointer-events: none; }
.sidebar-bottom .theme-switch-wrapper { display: flex; align-items: center; justify-content: center; padding: 10px 0 5px 0; white-space: nowrap; }
.sidebar-bottom .theme-switch-wrapper em { margin-left: 10px; font-size: 0.9rem; color: var(--secondary-text-color); opacity: 1; transition: opacity var(--transition-speed) ease; }
/* --- END: Sidebar Styles --- */


/* --- START: Main Content Area Styles --- */
.main-content {
    flex-grow: 1;
    /* Default state: Centered Logo */
    padding: 20px; /* Padding for centered logo */
    margin-left: var(--sidebar-width);
    box-sizing: border-box;
    display: flex; /* Use flexbox for centering */
    flex-direction: column;
    align-items: center; /* Center children horizontally */
    justify-content: center; /* Center children vertically */
    min-height: 100vh;
    position: relative; /* Needed for absolute logo positioning */
    transition: margin-left var(--transition-speed) ease, filter var(--transition-speed) ease, padding var(--transition-speed) ease;
    overflow: hidden;
}

/* State when game is active */
.main-content.game-active {
    display: block; /* Revert to block display */
    padding: var(--logo-top-padding) 20px 20px 20px; /* Add top padding for small logo */
    /* Remove flex centering */
    align-items: initial;
    justify-content: initial;
}


/* --- MODIFIED: Remove margin when sidebar is CLOSED on DESKTOP --- */
@media (min-width: 768px) {
  body:not(.sidebar-open) .main-content {
    margin-left: 0;
  }
}

/* --- Keep Mobile margin and overlay logic --- */
@media (max-width: 767px) {
    .main-content {
        margin-left: 0;
        padding: 15px; /* Default mobile padding */
        width: 100%;
        height: 100vh;
        min-height: 100vh;
        overflow: hidden;
    }
    .main-content.game-active {
        padding: calc(var(--logo-top-padding) - 10px) 15px 15px 15px; /* Adjust mobile padding when game active */
    }

    /* --- START: MODIFIED Mobile Overlay Logic --- */
    /* Apply overlay and block pointer events when sidebar is open AND game is NOT active */
    body.sidebar-open .main-content:not(.game-active) {
       filter: brightness(0.7);
       pointer-events: none; /* Block interaction with content behind sidebar */
       margin-left: 0 !important; /* Explicitly prevent content shift */
    }
    /* Apply overlay BUT allow pointer events when sidebar is open AND game IS active */
     body.sidebar-open .main-content.game-active {
        filter: brightness(0.7); /* Keep the overlay effect */
        pointer-events: auto; /* Allow interaction with the iframe */
        margin-left: 0 !important; /* Keep preventing content shift */
     }
     /* --- END: MODIFIED Mobile Overlay Logic --- */
}

/* Logo Text Styling */
#main-logo-text {
    /* Default State: Large & Centered */
    max-width: 90%; /* Prevent logo from touching edges */
    /* Adjusted font-size clamp: Reduced the vw factor */
    font-size: clamp(1.8rem, 5vw, 6rem); /* Min, Preferred (Viewport based, less aggressive), Max */
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
    text-align: center;
    line-height: 1.1;
    overflow: hidden; /* Keep hidden */
    text-overflow: ellipsis; /* Keep ellipsis */
    flex-shrink: 0; /* Prevent shrinking in flex container */
    transition: all var(--transition-speed) ease; /* Smooth transition */
    position: static;
    transform: none;
}

/* Small Logo State (when game is active) */
.main-content.game-active #main-logo-text {
    position: absolute; /* Position relative to main-content */
    top: var(--small-logo-top-offset);
    left: 50%;
    transform: translateX(-50%);
    width: auto; /* Reset width */
    max-width: calc(100% - 40px); /* Prevent small logo hitting edges */
    font-size: var(--small-logo-font-size); /* Use variable for small size */
    /* Inherits font-weight, color, text-align */
    z-index: 5; /* Ensure logo is above iframe */
    /* Ensure nowrap and ellipsis for small state too */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Iframe Styling (only applies when inside .game-active) */
.main-content.game-active iframe {
    width: 100%; /* Fill the horizontal space */
    /* Calculate height to fill remaining space below top padding */
    height: calc(100% - 20px); /* Fill height of padded area */
    border: none;
    display: block; /* Remove extra space */
    box-sizing: border-box;
}

/* --- END: Main Content Area Styles --- */


/* --- Tab Group and Submenu Styles (Keep for Sidebar) --- */
.sidebar .tab-group { margin-bottom: 2px; }
.sidebar .tab-group-button { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.sidebar .arrow-icon { font-size: 0.7em; transition: transform var(--transition-speed) ease; margin-left: 8px; }
.sidebar .tab-group.active .arrow-icon { transform: rotate(180deg); }
.sidebar .submenu { display: none; padding-left: 15px; overflow: hidden; max-height: 0; transition: max-height 0.3s ease-out, padding-top 0.3s ease-out, padding-bottom 0.3s ease-out; padding-top: 0; padding-bottom: 0; }
.sidebar .tab-group.active .submenu { display: block; max-height: 500px; padding-top: 5px; padding-bottom: 5px; transition: max-height 0.3s ease-in, padding-top 0.3s ease-in, padding-bottom 0.3s ease-in; }
.sidebar .submenu-button { padding-left: 30px; border-left: 3px solid transparent; font-size: 0.85em; }
.sidebar .submenu-button.active { color: var(--link-color); border-left-color: var(--link-color); background-color: var(--tab-hover-bg); font-weight: bold; }
.sidebar .tab-group.child-active > .tab-group-button { font-weight: bold; color: var(--link-color); border-left-color: var(--link-color); background-color: var(--tab-hover-bg); }
.sidebar > .sidebar-content > .tabs > .tab-button.active:not(.tab-group-button) { color: var(--link-color); border-left-color: var(--link-color); background-color: var(--tab-hover-bg); font-weight: bold; }

/* --- Theme Switch Styles (Slider) --- */
.theme-switch { display: inline-block; height: 24px; position: relative; width: 46px; }
.theme-switch input { display: none; }
.slider { background-color: #ccc; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: .4s; }
.slider:before { background-color: #fff; bottom: 3px; content: ""; height: 18px; left: 3px; position: absolute; transition: .4s; width: 18px; }
input:checked + .slider { background-color: var(--toggle-slider-bg); }
input:checked + .slider:before { transform: translateX(22px); }
.slider.round { border-radius: 24px; }
.slider.round:before { border-radius: 50%; }

/* --- Loading Indicator Styles (Keep if needed) --- */
.loading-indicator { display: flex; justify-content: center; align-items: center; padding: 15px 0; }
.spinner { border: 4px solid rgba(0, 0, 0, 0.1); border-left-color: var(--link-color, #007bff); border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
[data-theme="dark"] .spinner { border-left-color: var(--link-color); }


/* --- BMC Button Styles --- */
.sidebar-bottom .bmc-button-container { display: flex; justify-content: center; align-items: center; margin-top: 10px; padding: 5px 0; width: 100%; transition: opacity var(--transition-speed) ease; }
.bmc-button-container > div, .bmc-button-container > a { display: inline-block !important; width: auto !important; padding: 1px 4px !important; line-height: 1.2 !important; box-sizing: border-box !important; }
.bmc-button-container .bmc-button__text, .bmc-button-container a > span, .bmc-button-container div > span { font-size: 13px !important; line-height: inherit !important; padding: 0 !important; vertical-align: middle; }
.bmc-button-container .bmc-icon, .bmc-button-container img { height: 1.1em !important; width: auto !important; vertical-align: middle; margin-right: 4px !important; }


/* --- START: MODIFIED Disclaimer Notice Styles --- */
.disclaimer-notice {
    /* Default state (centered below logo) */
    font-size: 0.7rem;
    color: var(--secondary-text-color);
    text-align: center;
    padding: 5px 10px;
    line-height: 1.3;
    flex-shrink: 0; /* Prevent shrinking in flex container */
    transition: color var(--transition-speed) ease, background-color var(--transition-speed) ease,
                position var(--transition-speed) ease, bottom var(--transition-speed) ease,
                left var(--transition-speed) ease, width var(--transition-speed) ease;
    box-sizing: border-box;
    margin-top: 15px; /* Space below the logo */
    width: 90%; /* Limit width slightly */
    max-width: 600px; /* Max width for readability */
    position: static; /* Default positioning */
    bottom: auto;
    left: auto;
    background-color: transparent; /* Transparent background initially */
}

/* Game Active State (Fixed at bottom) */
.main-content.game-active .disclaimer-notice {
    position: fixed;
    bottom: 0;
    left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    background-color: var(--bg-color); /* Add background when fixed */
    margin-top: 0; /* Remove top margin when fixed */
    max-width: none; /* Allow full width when fixed */
    z-index: 10;
}

/* Adjust fixed disclaimer when sidebar is closed */
body:not(.sidebar-open) .main-content.game-active .disclaimer-notice {
    left: 0;
    width: 100%;
}

/* Mobile Styles */
@media (max-width: 767px) {
    /* Default mobile state (centered) */
    .disclaimer-notice {
        font-size: 0.65rem;
        padding: 5px;
        width: 95%; /* Slightly wider on mobile */
    }

    /* Game active mobile state (fixed at bottom) */
    .main-content.game-active .disclaimer-notice {
        left: 0;
        width: 100%;
        font-size: 0.65rem; /* Keep smaller font size */
        padding: 5px; /* Keep smaller padding */
    }

    /* Ensure disclaimer is visible even when sidebar is open on mobile (game active) */
    body.sidebar-open .main-content.game-active .disclaimer-notice {
        left: 0;
        width: 100%;
    }
}
/* --- END: MODIFIED Disclaimer Notice Styles --- */


/* --- START: Responsive Design Media Queries --- */

/* Medium Screens (Tablets, smaller laptops) */
@media (max-width: 992px) {
    .main-content.game-active {
        padding: var(--logo-top-padding) 15px 15px 15px; /* Adjust padding */
    }
    .main-content.game-active #main-logo-text {
        font-size: 1.6em; /* Adjust small logo font size */
        top: 12px; /* Adjust small logo top position */
    }
    /* Adjust large logo font size */
     #main-logo-text {
        font-size: clamp(1.8rem, 6vw, 5rem); /* Reduced vw factor further */
    }
}


/* Small Screens (Mobile Phones) */
@media (max-width: 767px) {
    /* body overflow managed above */
    /* Mobile Sidebar handled above */
    /* Mobile Main Content handled above */

    /* Mobile Large Logo */
    #main-logo-text {
        font-size: clamp(1.5rem, 7vw, 3.5rem); /* Further adjust clamp for mobile */
        width: auto; /* Let text wrap if needed */
        max-width: 95%; /* Allow slightly wider on mobile */
        white-space: normal; /* Allow wrapping on mobile */
        line-height: 1.2;
    }
     /* Mobile Small Logo */
    .main-content.game-active #main-logo-text {
        font-size: 1.4em; /* Adjust small logo font size for mobile */
        top: 10px; /* Adjust small logo top position for mobile */
        white-space: nowrap; /* Keep small logo on one line */
    }

    /* Mobile Sidebar Header (MODIFIED - Keep Padding & Alignment) */
    .sidebar .sidebar-header {
        padding: 0 10px 0 60px; /* Keep left padding for button space */
        height: 50px;           /* Keep original height */
        /* justify-content: center; <-- REMOVED */
        text-align: left;       /* Ensure left alignment */
    }
    /* Mobile Sidebar Title - Apply line-height */
    .sidebar-header .sidebar-title {
        line-height: 50px; /* Keep line-height */
        font-size: 0.9em;  /* Ensure mobile font size matches */
    }


    /* Mobile Sidebar Bottom */
     .sidebar-bottom .theme-switch-wrapper em,
     .sidebar-bottom .bmc-button-container { font-size: 0.8em; }
     .sidebar-bottom { padding: 5px 10px; }

}

/* --- END: Responsive Design Media Queries --- */