/* =========================
   Theme variable
   ========================= */
:root {
    --theme-color: #0056b3;
    --topbar-height: 56px; /* height of top navbar */
    --sidebar-width: 260px;
}

/* =========================
   Body
   ========================= */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #f8f9fa;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* needed for slide-out sidebar */
}

/* =========================
   Top Navbar (simple)
   ========================= */

.navbar {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    min-height: var(--topbar-height);
    background-color: #007bff;
    color: #ffffff;
}

/* Brand on the left */
.navbar-brand {
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    line-height: 1.5rem;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
}

/* Ensure hamburger button looks good */
#sidebarToggle {
    margin-left: 0.25rem;
}

/* =========================
   Left Sidebar + Content shift (FIXED)
   ========================= */

/* Left sidebar menu */
.sidebar {
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    width: var(--sidebar-width);
    /* ✅ IMPORTANT FIXES */
    height: calc(100vh - var(--topbar-height)); /* use viewport height */
    overflow-y: auto; /* sidebar scrolls internally */
    overflow-x: hidden;
    background: #212529; /* matches bg-dark */
    transform: translateX(calc(-1 * var(--sidebar-width)));
    transition: transform 0.25s ease-in-out;
    z-index: 1030; /* above content, below navbar */
}

    /* Sidebar open state */
    .sidebar.open {
        transform: translateX(0);
    }

    /* Sidebar links */
    .sidebar .nav-link {
        padding: 0.65rem 1rem;
        color: #ffffff;
        text-decoration: none;
        transition: background-color 0.2s ease, color 0.2s ease;
        border-radius: 0.5rem;
        margin: 0.1rem 0.5rem;
    }

        .sidebar .nav-link:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: #ffffff;
        }

        /* Active link in sidebar */
        .sidebar .nav-link.active {
            background-color: rgba(255, 255, 255, 0.2);
            font-weight: 600;
        }

    /* Optional: Make "Menu" header stay visible while scrolling */
    .sidebar > .px-3.py-3 {
        position: sticky;
        top: 0;
        background: #212529;
        z-index: 1;
    }

/* Content wrapper */
.content-wrapper {
    margin-top: var(--topbar-height);
    transition: margin-left 0.25s ease-in-out;
}

    /* When sidebar is open on desktop, push content right */
    .content-wrapper.shifted {
        margin-left: var(--sidebar-width);
    }

/* =========================
   Mobile behavior (overlay)
   ========================= */
@media (max-width: 767.98px) {
    :root {
        --sidebar-width: 220px;
    }

    .sidebar {
        width: var(--sidebar-width);
        transform: translateX(calc(-1 * var(--sidebar-width)));
    }

        .sidebar.open {
            transform: translateX(0);
        }

    /* on mobile: sidebar overlays, content never shifts */
    .content-wrapper,
    .content-wrapper.shifted {
        margin-left: 0;
    }
}

/* =========================
   Footer (unchanged)
   ========================= */
.footer {
    background-color: #343a40;
    color: #ffffff;
    text-align: center;
    padding: 1rem;
}

    .footer a {
        color: #ffffff;
        text-decoration: none;
    }

        .footer a:hover {
            color: #cccccc;
            text-decoration: underline;
        }

/* =========================
   Calculator (unchanged)
   ========================= */
.calculator button {
    margin-bottom: 10px;
    font-size: 1.2rem;
    border-radius: 0;
}

    .calculator button:hover {
        background-color: #007bff;
        color: white;
    }

/* =========================
   Container width (unchanged)
   ========================= */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.game-shell {
    max-width: 1100px;
    margin: 0 auto;
}

.game-canvas-wrap {
    display: grid;
    place-items: center;
}

canvas.responsive-canvas {
    width: min(100%, 900px);
    height: auto;
    display: block;
}