/* style.css */

/* --- Base & Font --- */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f1f5f9; /* bg-slate-100 */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* --- Header --- */
header {
    height: 4rem; /* h-16 */
    /* Tailwind handles bg, shadow, sticky, z-index */
}

/* --- Sidebar Base --- */
#sidebar {
    height: calc(100vh - 4rem); /* Full height below header */
    top: 4rem; /* Position below header */
    width: 4rem; /* Collapsed width on desktop */
    transition: width 0.3s ease-in-out, transform 0.3s ease-in-out; /* Transition width (desktop) and transform (mobile) */
    overflow-x: hidden; /* Hide horizontal overflow */
    overflow-y: auto; /* Allow vertical scrolling *within* sidebar */
    position: fixed; /* Fixed position */
    left: 0;
    background-color: #fff; /* bg-white */
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); /* shadow-md */
    z-index: 40; /* Ensure sidebar is above content but below modals */
    /* Scrollbar styling applied via ::-webkit-scrollbar */
}

/* Sidebar on Mobile: Off-screen by default, slide in */
@media (max-width: 767px) { /* Below md breakpoint */
    #sidebar {
        height: 100vh; /* Full viewport height */
        top: 0; /* Align to top */
        width: 16rem; /* Full width when open */
        transform: translateX(-100%); /* Hidden off-screen */
        /* transition already set */
    }
    #sidebar.open {
        transform: translateX(0); /* Slide in */
    }
    /* Show mobile-only close button when open */
    #sidebar.open #close-sidebar-btn {
        display: block; /* Tailwind handles md:hidden */
    }
    /* Hide close button when sidebar is closed (redundant due to md:hidden but safe) */
     #close-sidebar-btn:not(#sidebar.open *) {
         display: none;
     }
     /* Ensure burger button is visible (Tailwind handles md:hidden) */
     #burger-menu-btn {
         display: block;
     }
}

/* Sidebar on Desktop: Fixed width, always visible, hover expand */
@media (min-width: 768px) { /* md breakpoint */
    #sidebar {
        /* Already has correct height, top, collapsed width */
        transform: translateX(0); /* Ensure it's visible */
    }
    #sidebar:hover {
        width: 16rem; /* Expand width on hover */
    }
    /* Hide mobile-only buttons (Tailwind handles this) */
    /* #burger-menu-btn, #close-sidebar-btn { display: none; } */
}

/* --- Sidebar Content & Links --- */
/* Category list container */
#category-list {
    /* Tailwind handles space-y, mt */
    padding-bottom: 4rem; /* Add padding at the bottom for scroll clearance */
}

/* Individual Category Link */
#sidebar .category-link {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align items to the start */
    height: 3rem; /* Fixed height for links */
    width: 100%; /* Full width within sidebar */
    padding: 0 1rem; /* Padding left/right */
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Hide text overflow when collapsed */
    text-decoration: none; /* Remove underline */
    color: #475569; /* Default text color (slate-600) */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    /* Tailwind handles block, rounded-md, hover:bg, hover:text */
}

/* Sidebar Icons */
#sidebar .category-link i {
    flex-shrink: 0; /* Prevent icon from shrinking */
    width: 2rem; /* Fixed width for icon container */
    text-align: center; /* Center icon */
    font-size: 1.125rem; /* Icon size */
    color: #64748b; /* Default icon color (slate-500) */
    margin-right: 0.75rem; /* Space between icon and text */
    transition: color 0.2s ease-in-out; /* Smooth color transition */
}

/* Sidebar Link Text (Hidden by default, shown on expand/hover) */
#sidebar .category-link .link-text {
    opacity: 0; /* Hidden when sidebar is collapsed */
    transition: opacity 0.2s ease-in-out 0.1s; /* Fade in slightly delayed */
    font-weight: 500; /* medium */
}

/* Expanded Sidebar Text Visibility */
@media (min-width: 768px) { /* Desktop */
    #sidebar:hover .category-link .link-text {
        opacity: 1; /* Show text on hover */
    }
}
@media (max-width: 767px) { /* Mobile */
    #sidebar.open .category-link .link-text {
        opacity: 1; /* Show text when sidebar is open */
    }
}

/* Active Category Link Styling */
#sidebar .category-link.active {
    background-color: #e0f2fe; /* light blue (sky-100) */
    color: #0369a1; /* medium blue (sky-700) */
    font-weight: 600; /* semibold */
}
#sidebar .category-link.active i {
    color: #2563eb; /* darker blue (blue-600) */
}

/* --- Page Content & Footer Margins --- */
/* Adjust margin-left based on sidebar state (Desktop) */
#page-content {
    transition: margin-left 0.3s ease-in-out;
    margin-left: 4rem; /* Default margin for collapsed sidebar */
    width: calc(100% - 4rem); /* Adjust width */
    flex-grow: 1; /* Ensure it takes remaining space */
}
footer {
    transition: margin-left 0.3s ease-in-out;
    margin-left: 4rem; /* Default margin for collapsed sidebar */
    width: calc(100% - 4rem); /* Adjust width */
}

@media (min-width: 768px) {
    #sidebar:hover ~ #page-content {
        margin-left: 16rem; /* Margin when sidebar is expanded */
        width: calc(100% - 16rem);
    }
    /* Use :has for footer if supported, otherwise JS might be needed for perfect sync */
    body:has(#sidebar:hover) footer {
        margin-left: 16rem; /* Margin when sidebar is expanded */
        width: calc(100% - 16rem);
    }
    /* Fallback if :has is not supported (might have slight lag) */
    @supports not selector(:has(a)) {
        #sidebar:hover ~ footer { /* Less reliable than :has */
           margin-left: 16rem;
           width: calc(100% - 16rem);
        }
    }
}

/* Reset margins for mobile */
@media (max-width: 767px) {
    #page-content {
        margin-left: 0;
        width: 100%;
    }
    footer {
        margin-left: 0;
        width: 100%;
    }
    /* Optional: Blur content when mobile sidebar is open */
    body.sidebar-open #page-content {
        /* filter: blur(2px); */ /* Uncomment to enable blur */
        /* pointer-events: none; */ /* Prevent interaction with content */
    }
    /* Style for overlay when sidebar is open on mobile (from HTML inline style) */
    body.sidebar-open::before {
        content: "";
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 35; /* Below sidebar (z-40) but above content */
        display: none; /* Hidden by default */
    }
    @media (max-width: 767px) {
        body.sidebar-open::before {
            display: block; /* Show overlay only on mobile when sidebar is open */
        }
    }
}


/* --- Scrollbar Styling --- */
/* Works in WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px; /* For horizontal scrollbars if any */
}
::-webkit-scrollbar-track {
    background: #f1f5f9; /* Light gray track (slate-100) */
    border-radius: 4px;
}
::-webkit-scrollbar-thumb {
    background: #94a3b8; /* Medium gray thumb (slate-400) */
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #64748b; /* Darker gray thumb on hover (slate-500) */
}
/* Firefox scrollbar styling (limited) */
/* You might need !important sometimes */
* {
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #f1f5f9; /* thumb track */
}


/* --- Game Card Styling --- */
.game-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    /* Tailwind handles bg, rounded, shadow, overflow, flex */
}
.game-card:hover {
    transform: translateY(-4px); /* Slight lift effect */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
}
/* Ensure link takes full card space if needed */
#game-grid .game-card a.play-game-link {
    display: block; /* Make link block-level */
}

/* --- Game Grid --- */
/* Tailwind's grid classes are primarily used */
/* Example fallback or base if needed */
/* #game-grid { */
    /* display: grid; */
    /* grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); */ /* Responsive grid */
    /* gap: 1.5rem; */ /* gap-6 */
/* } */


/* --- Game Embed & Preview --- */
#game-embed-container {
    width: 100%;
    max-width: 1200px; /* Limit max width */
    margin: 0 auto; /* Center */
}
#game-preview, #iframe-wrapper {
    width: 100%; /* Take full width of container */
}
#game-preview-thumbnail {
    filter: blur(8px); /* Blur effect for background */
    opacity: 0.6; /* Make it semi-transparent */
    pointer-events: none; /* Prevent interaction */
}
.text-shadow {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Simple text shadow */
}
/* Aspect Ratio Helper (for preview and iframe) */
.aspect-video {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}
.aspect-video > * { /* Apply to direct children (image container, iframe wrapper) */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* Iframe specific styles */
#iframe-wrapper iframe {
    border: none; /* Remove default iframe border */
    width: 100%;
    height: 100%;
    display: block; /* Ensure it behaves like a block element */
}


/* --- Loader --- */
.loader {
    border: 4px solid #f3f4f6; /* Light grey border (gray-100) */
    border-top: 4px solid #3b82f6; /* Blue top border (blue-500) */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 40px auto; /* Center loader */
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- Modal Styles (Copied from HTML inline for reference/override) --- */
/* Ensure these don't conflict if you keep inline styles */
.modal-backdrop {
    position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.6);
    display: flex; align-items: center; justify-content: center;
    z-index: 60; /* High z-index */
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.modal-backdrop.visible {
    opacity: 1; visibility: visible;
    transition: opacity 0.3s ease;
}
.modal-content {
    background-color: white; padding: 2rem; border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    max-width: 90%; width: 400px; /* Responsive width */
    position: relative;
    transform: translateY(-20px) scale(0.95);
    transition: transform 0.3s ease;
}
.modal-backdrop.visible .modal-content {
    transform: translateY(0) scale(1);
}
.modal-close-btn {
    position: absolute; top: 0.75rem; right: 0.75rem;
    background: none; border: none; font-size: 1.5rem; color: #9ca3af; /* gray-400 */
    cursor: pointer; padding: 0.25rem; line-height: 1;
    transition: color 0.2s ease;
}
.modal-close-btn:hover {
    color: #374151; /* gray-700 */
}
/* Authentication Message Styles */
.auth-message {
    padding: 0.75rem 1rem; border-radius: 0.375rem; font-weight: 500;
    margin-top: 1rem; word-break: break-word; font-size: 0.875rem;
    border: 1px solid transparent;
}
.auth-message-success {
    background-color: #dcfce7; border-color: #86efac; color: #166534; /* green */
}
.auth-message-error {
    background-color: #fee2e2; border-color: #fca5a5; color: #991b1b; /* red */
}

/* --- Policy Container (If used on separate pages) --- */
.policy-container {
    max-width: 48rem; /* max-w-3xl */
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    padding: 2rem; /* p-8 */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); /* shadow-md */
    border: 1px solid #e5e7eb; /* border-slate-200 */
}
.policy-container h2 {
    font-size: 1.875rem; line-height: 2.25rem; /* text-3xl */
    font-weight: 700; /* bold */
    text-align: center;
    color: #1e293b; /* slate-800 */
    margin-bottom: 1.5rem; /* mb-6 */
}
.policy-container h3 {
    font-size: 1.25rem; line-height: 1.75rem; /* text-xl */
    font-weight: 600; /* semibold */
    margin-top: 1.5rem; /* mt-6 */
    margin-bottom: 0.5rem; /* mb-2 */
    color: #334155; /* slate-700 */
}
.policy-container h4 {
    font-size: 1.125rem; line-height: 1.75rem; /* text-lg */
    font-weight: 600; /* semibold */
    margin-top: 1rem; /* mt-4 */
    margin-bottom: 0.25rem; /* mb-1 */
    color: #475569; /* slate-600 */
}
.policy-container p {
    margin-bottom: 0.75rem; /* mb-3 */
    color: #475569; /* slate-600 */
    line-height: 1.625; /* leading-relaxed */
}
.policy-container ul {
    list-style-type: disc;
    list-style-position: inside;
    margin-bottom: 0.75rem; /* mb-3 */
    color: #475569; /* slate-600 */
    padding-left: 1rem; /* pl-4 */
}
.policy-container a {
    color: #2563eb; /* blue-600 */
    text-decoration: underline;
}
.policy-container a:hover {
    color: #1d4ed8; /* blue-700 */
}

/* --- Responsive Adjustments (Misc) --- */
@media (max-width: 640px) { /* sm breakpoint */
    /* Adjust padding/fonts for smaller screens if needed */
    main.container {
        padding-left: 1rem; /* px-4 */
        padding-right: 1rem;
        padding-top: 1.5rem; /* py-6 */
        padding-bottom: 1.5rem;
    }
    #main-heading {
        font-size: 1.875rem; /* text-3xl */
        margin-bottom: 1.5rem; /* mb-6 */
    }
    /* Adjust auth links container */
    #auth-links {
        gap: 0.5rem; /* space-x-2 */
    }
    #login-btn, #signup-btn, #logout-btn {
        font-size: 0.75rem; /* text-xs */
        padding: 0.5rem 0.75rem; /* py-2 px-3 */
    }
    #user-greeting {
        font-size: 0.75rem; /* text-xs */
        margin-right: 0.25rem; /* mr-1 */
    }
     /* Modal content padding */
    .modal-content {
        padding: 1.5rem; /* p-6 */
    }
    .modal-content h2 {
        font-size: 1.5rem; /* text-2xl */
        margin-bottom: 1rem; /* mb-4 */
    }
    /* Pagination buttons */
    #pagination {
        flex-direction: column; /* Stack vertically */
        gap: 0.75rem; /* space-y-3 */
    }
    #prev-button, #next-button {
        width: 100%; /* Make buttons full width */
        justify-content: center; /* Center text/icon */
        font-size: 0.875rem; /* text-sm */
    }
}