/* =====================================================================
   SCRIPTORIUM — ILLUMINATED RESPONSIVE POLISH v1
   ---------------------------------------------------------------------
   Focused stabilization before continuing the visual roadmap.

   Fixes:
   1) smart responsive alignment of the six ROOT navigation tabs;
   2) removes the unwanted gradient surface behind room subtabs;
   3) prevents the room resource tracker from overlapping the room title;
   4) keeps header utility icons geometrically stable.

   Presentation only. No IDs, handlers, routing or gameplay are changed.
   Load this stylesheet AFTER:
     illuminated.css
     illuminated-foundation.css
     illuminated-room-hero.css
   ===================================================================== */


/* =====================================================================
   0. HEADER UTILITY ICON GEOMETRY
   ===================================================================== */

body.design-iluminovana #tutorial-help-btn.help-question-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    flex: 0 0 30px !important;
    flex-shrink: 0 !important;
    aspect-ratio: 1 / 1 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    border-radius: 50% !important;
    line-height: 1 !important;
}

body.design-iluminovana .logo-container > svg {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    flex: 0 0 28px !important;
}

body.design-iluminovana #sound-toggle-btn,
body.design-iluminovana #settings-btn {
    flex-shrink: 0 !important;
}


/* =====================================================================
   1. ROOT MAIN NAV — SMART PORTRAIT BOTTOM DOCK
   ---------------------------------------------------------------------
   Key behavior:
   - if all 6 items fit, they are centered automatically;
   - their width/spacing grows fluidly with the viewport;
   - if they no longer fit, auto margins collapse and horizontal scrolling
     becomes available without changing markup or a breakpoint.
   ===================================================================== */

@media (max-width: 900px) and (orientation: portrait) {

    body.design-iluminovana {
        --illum-mobile-nav-h: 76px;
        --illum-mobile-nav-gap: clamp(2px, 1vw, 8px);
        --illum-mobile-nav-item-w: clamp(54px, 15vw, 76px);
        --illum-mobile-nav-art: clamp(31px, 8vw, 44px);
    }

    body.design-iluminovana .main-nav {
        position: fixed !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        transform: none !important;

        width: 100% !important;
        max-width: none !important;
        height: calc(
            var(--illum-mobile-nav-h)
            + env(safe-area-inset-bottom)
        ) !important;

        box-sizing: border-box !important;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: stretch !important;

        gap: var(--illum-mobile-nav-gap) !important;

        padding:
            5px
            clamp(4px, 1.4vw, 10px)
            max(5px, env(safe-area-inset-bottom))
            clamp(4px, 1.4vw, 10px) !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scroll-padding-inline: 10px;
        scrollbar-width: none;

        border: 0 !important;
        border-top: 1px solid var(--illum-nav-edge) !important;

        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.025) 0%,
                rgba(0,0,0,.11) 22%,
                rgba(0,0,0,.30) 100%
            ),
            linear-gradient(
                180deg,
                var(--illum-nav-leather-2),
                var(--illum-nav-leather)
            ) !important;

        box-shadow:
            inset 0 1px 0 rgba(239,210,143,.07),
            inset 0 0 24px rgba(0,0,0,.30),
            0 -5px 15px rgba(18,10,6,.25) !important;

        z-index: 650 !important;
    }

    body.design-iluminovana .main-nav::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    body.design-iluminovana .main-nav::before,
    body.design-iluminovana .main-nav::after {
        content: none !important;
        display: none !important;
    }

    body.design-iluminovana .main-nav .nav-btn {
        flex: 0 0 var(--illum-mobile-nav-item-w) !important;

        width: var(--illum-mobile-nav-item-w) !important;
        min-width: var(--illum-mobile-nav-item-w) !important;
        max-width: var(--illum-mobile-nav-item-w) !important;

        height: 65px !important;
        min-height: 65px !important;

        margin: 0 !important;
        padding: 3px 2px 2px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;

        box-sizing: border-box !important;

        border: 1px solid rgba(167,123,57,.20) !important;
        border-radius: 3px !important;

        scroll-snap-align: center;
        transform: none !important;
    }

    /*
       The important part:
       while free space exists, the first and last auto margins absorb it,
       centering the complete six-item set.
       When content overflows, auto margins naturally become zero and the
       same element becomes a normal horizontal scroller.
    */
    body.design-iluminovana .main-nav .nav-btn:first-child {
        margin-inline-start: auto !important;
    }

    body.design-iluminovana .main-nav .nav-btn:last-child {
        margin-inline-end: auto !important;
    }

    body.design-iluminovana .main-nav .nav-art {
        width: var(--illum-mobile-nav-art) !important;
        height: var(--illum-mobile-nav-art) !important;
        min-width: var(--illum-mobile-nav-art) !important;
        min-height: var(--illum-mobile-nav-art) !important;
        flex: 0 0 var(--illum-mobile-nav-art) !important;
        margin: 0 !important;
        border-radius: 2px !important;
    }

    body.design-iluminovana .main-nav .nav-label {
        width: 100% !important;
        margin: 0 !important;

        font-size: clamp(.48rem, 1.75vw, .62rem) !important;
        line-height: .98 !important;
        letter-spacing: .005em !important;

        text-align: center !important;
        white-space: normal !important;
        overflow: hidden !important;

        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;

        max-height: 2em !important;
    }

    body.design-iluminovana .main-nav .nav-label br {
        display: block !important;
    }

    body.design-iluminovana .main-nav .nav-btn.active {
        box-shadow:
            inset 0 2px 0 #d0aa58,
            inset 0 0 11px rgba(198,151,67,.10),
            0 0 7px rgba(208,170,88,.13) !important;
    }

    body.design-iluminovana main#main-content {
        padding-left: 8px !important;
        padding-right: 8px !important;
        padding-bottom: calc(
            var(--illum-mobile-nav-h)
            + 16px
            + env(safe-area-inset-bottom)
        ) !important;
    }

    body.design-iluminovana #notification-area {
        left: 0 !important;
        width: 100% !important;
    }

    body.design-iluminovana #canonical-badge,
    body.design-iluminovana .ns-panel-tab,
    body.design-iluminovana .tutorial-guide-bar {
        bottom: calc(
            var(--illum-mobile-nav-h)
            + 10px
            + env(safe-area-inset-bottom)
        ) !important;
    }
}


/* Very small portrait screens: same component, scroll starts naturally. */
@media (max-width: 340px) and (orientation: portrait) {
    body.design-iluminovana {
        --illum-mobile-nav-item-w: 54px;
        --illum-mobile-nav-gap: 2px;
        --illum-mobile-nav-art: 30px;
    }
}


/* =====================================================================
   2. LANDSCAPE / WIDE VIEW
   Keep the illuminated rail on the LEFT.
   ===================================================================== */

@media (orientation: landscape), (min-width: 901px) {

    body.design-iluminovana .main-nav .nav-btn:first-child,
    body.design-iluminovana .main-nav .nav-btn:last-child {
        margin-inline-start: 0 !important;
        margin-inline-end: 0 !important;
    }
}


/* =====================================================================
   3. ROOM SUBTAB BAR
   Remove the broad gradient/filter surface behind subtab buttons.
   Buttons keep their own parchment surfaces and remain readable.
   ===================================================================== */

body.design-iluminovana .illum-room-tabs {
    background: transparent !important;
    background-image: none !important;

    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Old prototype layers can otherwise recreate the wash on Scriptorium. */
body.design-iluminovana #screen-lore .illum-room-tabs {
    background: transparent !important;
    background-image: none !important;
}


/* =====================================================================
   4. ROOM RESOURCE TRACKER
   ---------------------------------------------------------------------
   Wide desktop:
     title left + tracker right in two independent columns.

   Narrow desktop / tablet / phone:
     tracker becomes a dedicated parchment shelf at the TOP of the room
     hero; room title gets reserved space below it.  It may scroll
     horizontally, but it never covers the title.
   ===================================================================== */


/* ---------------- WIDE DESKTOP ---------------- */

@media (min-width: 1200px) {

    body.design-iluminovana
    .illum-room--hero-ready
    > .illum-room-header {

        display: grid !important;
        grid-template-columns:
            minmax(0, 1fr)
            minmax(280px, 44%) !important;

        grid-template-rows: 1fr !important;
        column-gap: 20px !important;

        align-items: end !important;
    }

    body.design-iluminovana
    .illum-room--hero-ready
    > .illum-room-header
    h2 {

        grid-column: 1 !important;
        grid-row: 1 !important;

        min-width: 0 !important;
        max-width: 100% !important;

        align-self: end !important;
    }

    body.design-iluminovana
    .illum-room--hero-ready
    > .illum-room-header
    .resource-tracker-bar {

        position: static !important;

        grid-column: 2 !important;
        grid-row: 1 !important;

        align-self: start !important;
        justify-self: stretch !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;

        scrollbar-width: thin;
    }
}


/* ---------------- TABLET / NARROW DESKTOP / PHONE ---------------- */

@media (max-width: 1199px) {

    body.design-iluminovana
    .illum-room--hero-ready
    > .illum-room-header {

        display: block !important;
        position: relative !important;

        /*
           Reserve the upper strip for resources.
           The title starts below it and therefore cannot be covered.
        */
        padding-top: 54px !important;
    }

    body.design-iluminovana
    .illum-room--hero-ready
    > .illum-room-header
    h2 {

        position: relative !important;
        z-index: 3 !important;

        max-width: 100% !important;
    }

    body.design-iluminovana
    .illum-room--hero-ready
    > .illum-room-header
    .resource-tracker-bar {

        position: absolute !important;

        top: 8px !important;
        left: 8px !important;
        right: 8px !important;

        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;

        height: 38px !important;
        min-height: 38px !important;

        margin: 0 !important;
        padding: 3px 8px !important;

        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;

        scrollbar-width: none;

        color: var(--text-primary) !important;

        background:
            linear-gradient(
                180deg,
                color-mix(in srgb, var(--bg-parchment) 94%, white 6%),
                var(--bg-parchment)
            ) !important;

        border: 1px solid rgba(181, 140, 70, .72) !important;
        border-radius: 17px !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.30),
            0 2px 7px rgba(31,18,10,.18) !important;

        z-index: 5 !important;
    }

    body.design-iluminovana
    .illum-room--hero-ready
    > .illum-room-header
    .resource-tracker-bar::-webkit-scrollbar {

        display: none !important;
        height: 0 !important;
    }
}


/* Phone: slightly tighter shelf and clearer spacing. */
@media (max-width: 600px) {

    body.design-iluminovana
    .illum-room--hero-ready
    > .illum-room-header {

        padding-top: 49px !important;
    }

    body.design-iluminovana
    .illum-room--hero-ready
    > .illum-room-header
    .resource-tracker-bar {

        top: 6px !important;
        left: 6px !important;
        right: 6px !important;

        height: 35px !important;
        min-height: 35px !important;

        padding: 2px 7px !important;

        font-size: .72rem !important;
    }
}


/* =====================================================================
   5. ACCESSIBILITY
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
    body.design-iluminovana .main-nav,
    body.design-iluminovana .main-nav .nav-btn,
    body.design-iluminovana .main-nav .nav-art {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}


/* =====================================================================
   6. RESOURCE TRACKER — COLLAPSED STATE SYNC
   ---------------------------------------------------------------------
   The game's existing tracker already adds/removes `.is-collapsed`.
   Earlier responsive rules reserved a full shelf even while collapsed.
   This block makes the layout follow that real state:

   expanded  -> full-width resource shelf above the room title
   collapsed -> only the compact tracker toggle remains; reserved shelf
                space disappears immediately

   CSS-only: no JavaScript/state changes.
   ===================================================================== */

@media (max-width: 1199px) {

    /* Smoothly reclaim the space when the tracker is collapsed. */
    body.design-iluminovana
    .illum-room--hero-ready
    > .illum-room-header {
        transition:
            padding-top .18s ease,
            padding-right .18s ease;
    }

    /*
       Compact the actual tracker box.
       The child .res-tracker-toggle-btn remains visible, but the large
       parchment shelf/background disappears.
    */
    body.design-iluminovana
    .illum-room--hero-ready
    > .illum-room-header
    .resource-tracker-bar.is-collapsed {

        top: 8px !important;
        right: 8px !important;
        left: auto !important;

        width: max-content !important;
        min-width: 0 !important;
        max-width: calc(100% - 16px) !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        overflow: visible !important;

        background: transparent !important;
        background-image: none !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;
    }

    /*
       Crucial part: when the tracker is collapsed, remove the 54px
       vertical reservation that the expanded shelf needs.
       Keep a small right-side reserve for the compact toggle only.
    */
    body.design-iluminovana
    .illum-room--hero-ready
    > .illum-room-header:has(> .resource-tracker-bar.is-collapsed) {

        padding-top: 12px !important;
        padding-right: clamp(112px, 24vw, 168px) !important;
    }

    /*
       If a screen has no resources at all, reclaim the same space.
       :empty already hides the tracker in the base UI; this keeps the
       hero geometry in sync with that state too.
    */
    body.design-iluminovana
    .illum-room--hero-ready
    > .illum-room-header:has(> .resource-tracker-bar:empty) {

        padding-top: 12px !important;
        padding-right: 10px !important;
    }
}


/* Phone: tighter compact-toggle reserve. */
@media (max-width: 600px) {

    body.design-iluminovana
    .illum-room--hero-ready
    > .illum-room-header
    .resource-tracker-bar.is-collapsed {

        top: 6px !important;
        right: 6px !important;
        max-width: calc(100% - 12px) !important;
    }

    body.design-iluminovana
    .illum-room--hero-ready
    > .illum-room-header:has(> .resource-tracker-bar.is-collapsed) {

        padding-top: 10px !important;
        padding-right: clamp(104px, 30vw, 132px) !important;
    }

    body.design-iluminovana
    .illum-room--hero-ready
    > .illum-room-header:has(> .resource-tracker-bar:empty) {

        padding-top: 10px !important;
        padding-right: 8px !important;
    }
}


/* Wide desktop: keep the collapsed tracker compact inside grid column. */
@media (min-width: 1200px) {

    body.design-iluminovana
    .illum-room--hero-ready
    > .illum-room-header
    .resource-tracker-bar.is-collapsed {

        width: max-content !important;
        min-width: 0 !important;
        max-width: 100% !important;

        justify-self: end !important;

        padding: 0 !important;

        overflow: visible !important;

        background: transparent !important;
        background-image: none !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;
    }
}