html:has(.trg-stage-shell),
body:has(.trg-stage-shell) {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    overflow: auto !important;
    background: #030201 !important;
}

body.trg-stage-immersive-active #wpadminbar,
body.trg-stage-immersive-active header,
body.trg-stage-immersive-active .site-header,
body.trg-stage-immersive-active .main-header-bar,
body.trg-stage-immersive-active .ast-primary-header-bar,
body.trg-stage-immersive-active .elementor-location-header,
body.trg-stage-immersive-active nav.navigation,
body.trg-stage-immersive-active .entry-title,
body.trg-stage-immersive-active h1.entry-title,
body.trg-stage-immersive-active .page-title,
body.trg-stage-immersive-active .ast-container > .entry-header,
body.trg-stage-immersive-active footer,
body.trg-stage-immersive-active .site-footer,
body.trg-stage-immersive-active .elementor-location-footer {
    display: none !important;
}

body.trg-stage-immersive-active.admin-bar .trg-stage-shell {
    top: 0 !important;
}

.trg-stage-shell {
    --trg-corridor-w: clamp(118px, 18.8vh, 190px);
    position: fixed;
    inset: 0;
    z-index: 2147482000;
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: var(--trg-corridor-w) minmax(0, 1fr);
    overflow: hidden;
    background: #030201;
    color: #f7ead0;
    font-family: Georgia, 'Times New Roman', serif;
}

.trg-library-corridor {
    position: relative;
    width: var(--trg-corridor-w);
    height: 100vh;
    overflow: hidden;
    background: #070503;
    box-shadow: 8px 0 24px rgba(0,0,0,.78);
    z-index: 2;
}

.trg-library-corridor__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: center center;
    user-select: none;
    -webkit-user-drag: none;
    image-rendering: auto;
}

.trg-stage-room {
    /*
     * GOLD v2.5 — Main lobby image fit correction.
     * The room artwork is a 3:2 image. Using object-fit: cover made it a
     * little too tall in common browser windows and clipped the lower Suite
     * panel. The image and its click map now share the same contained frame.
     */
    --trg-room-art-width: min(100%, 150vh);
    position: relative;
    min-width: 0;
    height: 100vh;
    overflow: hidden;
    background: #030201;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.trg-stage-room__image {
    display: block;
    width: var(--trg-room-art-width);
    height: auto;
    max-height: 100vh;
    object-fit: contain;
    object-position: top center;
    user-select: none;
    -webkit-user-drag: none;
}

.trg-corridor-map,
.trg-room-map {
    position: absolute;
    inset: 0;
    z-index: 10;
}

.trg-room-map {
    left: 50%;
    right: auto;
    bottom: auto;
    width: var(--trg-room-art-width);
    aspect-ratio: 3 / 2;
    max-height: 100vh;
    transform: translateX(-50%);
}

.trg-map-link,
.trg-room-link {
    position: absolute;
    display: block;
    border: 0 !important;
    padding: 0;
    margin: 0;
    background: transparent !important;
    appearance: none;
    -webkit-appearance: none;
    color: transparent;
    font: inherit;
    text-decoration: none !important;
    cursor: pointer;
    outline-offset: -2px;
    box-sizing: border-box;
    line-height: 1;
    min-height: 0 !important;
    min-width: 0 !important;
    box-shadow: none !important;
}



.trg-corridor-map button.trg-map-link {
    background-color: transparent !important;
    background-image: none !important;
    color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto;
    height: auto;
    text-transform: none !important;
}

.trg-corridor-map button.trg-map-link::before,
.trg-corridor-map button.trg-map-link::after {
    display: none !important;
    content: none !important;
}

.trg-map-link span,
.trg-room-link span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.trg-map-link:hover,
.trg-map-link:focus-visible,
.trg-room-link:hover,
.trg-room-link:focus-visible {
    outline: 1.5px solid rgba(224, 174, 63, .88);
    box-shadow: 0 0 14px rgba(224,174,63,.30), inset 0 0 10px rgba(224,174,63,.12) !important;
    border-radius: 10px;
    background: rgba(8, 5, 2, .08) !important;
}

/* -------------------------------------------------------------------------
   SYMPHONY CORRIDOR HOTSPOTS — GOLD v2.4 EDITABLE PIXEL STARTS

   These are intentionally easy to tune by hand inside the plugin.

   Change ONLY the six --trg-*-top values to move a hotspot up/down.
   Increase the number to move the hotspot DOWN.
   Decrease the number to move the hotspot UP.

   The vertical hotspot height has been reduced by 25% from the earlier
   78px target to 58px so each clickable zone is less likely to overlap
   the room above or below. Horizontal placement is left unchanged.

   Starting reference: full browser-rendered page screenshot, 1656 x 912.
   Sidebar rendered width: approx. 168px.
   ------------------------------------------------------------------------- */
.trg-corridor-map {
    --trg-hotspot-left: 13.095%;  /* 22px of 168px */
    --trg-hotspot-width: 74.405%; /* 125px of 168px */
    --trg-hotspot-height: 58px;   /* 25% shorter than 78px */

    --trg-lobby-top: 214px;
    --trg-concierge-top: 307px;
    --trg-gallery-top: 400px;
    --trg-catalog-top: 494px;
    --trg-lyric-top: 589px;
    --trg-guide-top: 675px;  /* Guide hotspot restored: button sizing override fixed below */
}

.trg-map-link--lobby,
.trg-map-link--concierge,
.trg-map-link--gallery,
.trg-map-link--catalog,
.trg-map-link--lyric,
.trg-map-link--guide,
.trg-corridor-map button.trg-map-link--guide {
    left: var(--trg-hotspot-left) !important;
    width: var(--trg-hotspot-width) !important;
    height: var(--trg-hotspot-height) !important;
}

.trg-map-link--lobby     { top: var(--trg-lobby-top); }
.trg-map-link--concierge { top: var(--trg-concierge-top); }
.trg-map-link--gallery   { top: var(--trg-gallery-top); }
.trg-map-link--catalog   { top: var(--trg-catalog-top); }
.trg-map-link--lyric     { top: var(--trg-lyric-top); }
.trg-map-link--guide,
.trg-corridor-map button.trg-map-link--guide { top: var(--trg-guide-top) !important; }

/*
   GOLD v2.5 — Top Entrance Hotspots
   These three zones now cover the full upper choice areas, not only the
   visible button strips. Each hotspot includes the round icon, heading text,
   descriptive card, list content, and the button at the bottom.

   Coordinates are editable percentages against the 1536 x 1024 lobby art.
   Increase top to move a zone down; decrease top to move it up.
   Increase height to make a zone taller; decrease height to make it shorter.
*/
.trg-room-link--concierge { left: 10.6%; top: 20.0%; width: 27.0%; height: 44.0%; }
.trg-room-link--gallery   { left: 43.2%; top: 20.0%; width: 25.0%; height: 44.0%; }
.trg-room-link--catalog   { left: 70.4%; top: 20.0%; width: 27.6%; height: 44.0%; }

/*
   GOLD v2.5 — Bottom Suite Panel Hotspots
   These three zones are editable percentages against the 1536 x 1024 lobby art.
   Increase top to move a zone down; decrease top to move it up.
*/
.trg-room-link--authors { left: 1.8%;  top: 80.0%; width: 28.5%; height: 14.2%; }
.trg-room-link--suite   { left: 30.3%; top: 80.0%; width: 38.7%; height: 14.2%; }
.trg-room-link--readers { left: 69.0%; top: 80.0%; width: 29.2%; height: 14.2%; }

.trg-stage-guide-panel {
    position: absolute;
    z-index: 30;
    left: calc(var(--trg-corridor-w) + 24px);
    top: clamp(18px, 3vh, 42px);
    width: min(380px, calc(100vw - var(--trg-corridor-w) - 48px));
    padding: 24px 24px 22px;
    border-radius: 20px;
    background: rgba(19, 14, 9, .94);
    border: 1px solid rgba(213, 163, 64, .62);
    box-shadow: 0 28px 80px rgba(0,0,0,.54);
    backdrop-filter: blur(8px);
    color: #f6ead0;
}

.trg-stage-guide-panel__close {
    position: absolute;
    top: 8px;
    right: 13px;
    border: 0;
    background: transparent;
    color: #f6ead0;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

.trg-stage-guide-panel__eyebrow {
    margin: 0 0 8px;
    color: #d7a840;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 12px;
}

.trg-stage-guide-panel h2 {
    margin: 0 0 10px;
    color: #fff7e6;
    font-size: 28px;
    font-weight: 500;
}

.trg-stage-guide-panel p {
    margin: 0 0 18px;
    line-height: 1.52;
    color: rgba(246,234,208,.84);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
}

.trg-stage-guide-panel__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.trg-stage-guide-panel__actions a {
    color: #f6ead0 !important;
    text-decoration: none !important;
    border: 1px solid rgba(213, 163, 64, .46);
    border-radius: 999px;
    padding: 8px 13px;
    font-size: 14px;
}

@media (max-width: 900px) {
    .trg-stage-shell { --trg-corridor-w: clamp(110px, 17.2vh, 168px); }
}

@media (max-width: 640px) {
    .trg-stage-shell { --trg-corridor-w: clamp(100px, 25vw, 128px); }
    .trg-stage-room__image { object-position: center center; }
}