/* ===== RESPONSIVE / MOBILE =====
   Strategy:
   - #right-sidebar stays FIXED to the right edge of the viewport as a
     vertical column of icon buttons at every breakpoint (no more
     collapsing into a horizontal bottom bar).
   - Each .panel (Quest, Storage, Actions) becomes a right-anchored
     slide-out drawer that fills the full viewport height and scrolls
     internally, so its content always fits regardless of screen size.
   - At ≤480px the drawer expands to full width (a true fullscreen
     panel), matching the existing fullscreen dialogue treatment.
*/

/* ---------------------------------------------------------------
   ≤ 1024px — reveal the on-screen movement controller for touch
   --------------------------------------------------------------- */
@media (max-width: 1024px) {
    #mobile-ctrl.visible {
        display: block;
    }
}

/* ---------------------------------------------------------------
   ≤ 768px — dock the menu to the right edge, vertical column
   --------------------------------------------------------------- */
@media (max-width: 768px) {
    #right-sidebar {
        position: fixed;
        top: 0;
        right: 0;
        bottom: auto;
        left: auto;
        width: auto;
        height: 100vh;
        height: 100dvh;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        padding: 14px 8px;
        padding-top: max(14px, env(safe-area-inset-top));
        padding-right: max(8px, env(safe-area-inset-right));
        background: transparent;
        border: none;
        pointer-events: none;
        z-index: 950;
    }

    #sidebar-top,
    #sidebar-bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin: 0;
    }

    #sidebar-bottom {
        margin-top: auto;
    }

    .sidebar-row {
        display: flex;
        pointer-events: auto;
    }

    #btn-quest-toggle,
    #btn-inv-toggle,
    #btn-actions-toggle,
    #btn-sound-toggle,
    #btn-cycle-toggle {
        width: clamp(40px, 9vmin, 50px);
        height: clamp(40px, 9vmin, 50px);
        margin: 0;
        position: relative;
        z-index: 960;
    }

    /* Left sidebar (if present) collapses to a top horizontal bar so it
       never competes with the right-hand menu for space */
    #left-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        padding: 8px 10px;
        background: var(--panel-bg);
        z-index: 500;
        border-bottom: 1px solid var(--accent-primary);
    }
}

/* ---------------------------------------------------------------
   ≤ 768px — panels become right-anchored slide-out drawers, pulled
   out of the document flow so a "closed" panel can never widen
   #right-sidebar / .sidebar-row and push the menu buttons inward
   --------------------------------------------------------------- */
@media (max-width: 768px) {
    .panel {
        position: fixed;
        top: 0;
        right: 0;
        bottom: auto;
        left: auto;
        box-sizing: border-box;
        width: min(82vw, 340px);
        max-width: 340px;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
        border: none;
        border-left: 3px solid var(--accent-primary);
        transform: translateX(100%);
        transform-origin: center;
        opacity: 1;
        overflow-y: auto;
        padding: 20px 16px;
        padding-top: max(20px, env(safe-area-inset-top));
        padding-right: max(16px, env(safe-area-inset-right));
        z-index: 900;
        box-shadow: -8px 0 24px rgba(0, 0, 0, 0.5);
    }

    .panel.open {
        transform: translateX(0);
        opacity: 1;
    }

    /* Cancel the desktop anchor-relative positioning so every panel
       behaves the same way as a full-height right-edge drawer */
    #panel-inv,
    #panel-quest,
    #panel-actions {
        position: fixed;
        top: 0;
        right: 0;
        bottom: auto;
        left: auto;
        margin: 0 auto;
    }

    #panel-quest {
        border-left: 3px solid var(--accent-primary);
        border-right: none;
    }

    #panel-inv,
    #panel-actions {
        border-left: 3px solid var(--accent-secondary);
        border-right: none;
    }

    /* Scrollbar styling for the drawers */
    .panel::-webkit-scrollbar {
        width: 6px;
    }

    .panel::-webkit-scrollbar-track {
        background: transparent;
    }

    .panel::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.15);
        border-radius: 3px;
    }

    /* Generic full-width overlays */
    .overlay {
        width: 100vw;
        padding: 20px;
    }

    /* Move the movement controller to the opposite side so it never
       overlaps the right-hand menu / open drawers.
       (html-prefixed to outrank index.html's inline #mobile-ctrl rule,
       which is declared later in the document) */
    html #mobile-ctrl {
        left: 20px;
        right: auto;
        bottom: 30px;
    }

    /* Keep the simple NPC speech bubble inside narrow viewports */
    .npc-bubble {
        width: min(220px, 80vw);
    }
}

/* ---------------------------------------------------------------
   ≤ 480px — drawers go fullscreen, menu shrinks slightly
   --------------------------------------------------------------- */
@media (max-width: 480px) {
    .panel {
        width: 100vw;
        max-width: 100vw;
        max-width: none;
        border-left: none;
    }

    #panel-quest,
    #panel-inv,
    #panel-actions {
        border-left: none;
    }

    #right-sidebar {
        padding: 10px 6px;
        padding-top: max(10px, env(safe-area-inset-top));
        gap: 8px;
    }

    #btn-quest-toggle,
    #btn-inv-toggle,
    #btn-actions-toggle,
    #btn-sound-toggle,
    #btn-cycle-toggle {
        width: 42px;
        height: 42px;
        position: relative;
        z-index: 960;
    }

    /* Start/Win screen text scales down on very small screens */
    #start-screen h1,
    #win-screen h1 {
        font-size: 2.2em;
        letter-spacing: 4px;
    }

    #start-screen p,
    #win-screen p {
        font-size: 0.95em;
    }

    /* Shrink the minimap so it doesn't crowd the corner */
    .minimap-panel {
        width: 80px;
        height: 80px;
        top: 16px;
        left: 16px;
    }

    /* Movement controller, sized down to match
       (html-prefixed for the same reason as the ≤640px rule above) */
    html #mobile-ctrl {
        left: 16px;
        bottom: 90px;
        width: 140px;
        height: 140px;
    }
}