/* ==============================================================
   REVAMED MANSION — BASELINE 006
   MANSION BACKBONE STYLES
   ============================================================== */

/* ==============================================================
   MAIN HALL SCENE
   ============================================================== */

.scene-main-hall {
    background: radial-gradient(circle at 50% 30%, #1a162b 0%, #090710 85%);
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.main-hall-wall {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, transparent 60%, rgba(0, 0, 0, 0.8) 100%),
        repeating-linear-gradient(90deg, transparent 0, transparent 80px, rgba(255, 215, 0, 0.03) 80px, rgba(255, 215, 0, 0.03) 82px);
}

.main-hall-arch {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 70%;
    border: 3px solid rgba(212, 175, 55, 0.25);
    border-bottom: none;
    border-radius: 300px 300px 0 0;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.8);
    background: rgba(12, 10, 20, 0.6);
}

/* Grand Staircase in Main Hall */
.main-hall-staircase {
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    width: 48%;
    height: 55%;
    background: linear-gradient(180deg, #2a243a 0%, #151221 100%);
    clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%);
    border-top: 4px solid #d4af37;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.9);
}

.stair-step-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(212, 175, 55, 0.2);
}

.stair-gate {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 40%;
    background: repeating-linear-gradient(90deg, #5a4b2a 0px, #5a4b2a 6px, transparent 6px, transparent 24px);
    border-top: 3px solid #8a733e;
    transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
}

.stair-gate.unlocked {
    transform: translateX(-50%) translateY(100%);
    opacity: 0;
}

/* Brass Crest Mechanism */
.brass-crest-alcove {
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #0f0c18;
    border: 4px solid #d4af37;
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.3), inset 0 0 15px rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
}

.brass-crest-emblem {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px dashed rgba(212, 175, 55, 0.5);
    background: radial-gradient(circle, #2e2612 0%, #120e06 100%);
    transition: all 0.5s ease;
}

.brass-crest-emblem.active {
    border: 3px solid #ffd700;
    background: radial-gradient(circle, #ffe066 0%, #b38f00 100%);
    box-shadow: 0 0 30px #ffd700, inset 0 0 10px #ffffff;
}

/* Hotspots */
.main-hall-foyer-hotspot {
    position: absolute;
    left: 4%;
    bottom: 12%;
    width: 12%;
    height: 60%;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 50;
}

.brass-crest-hotspot {
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 60;
}

.main-hall-stair-hotspot {
    position: absolute;
    bottom: 12%;
    left: 30%;
    width: 40%;
    height: 40%;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 55;
}

/* Player Position in Main Hall */
.player-main-hall {
    position: absolute;
    bottom: 12%;
    left: 20%;
    transition: left 0.4s ease;
}

/* ==============================================================
   UPSTAIRS LANDING SCENE
   ============================================================== */

.scene-upstairs-landing {
    background: radial-gradient(circle at 50% 20%, #221c36 0%, #0b0914 90%);
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.landing-wall {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, transparent 70%, rgba(0, 0, 0, 0.9) 100%);
}

.landing-balustrade {
    position: absolute;
    bottom: 12%;
    left: 0;
    width: 100%;
    height: 18%;
    background: repeating-linear-gradient(90deg, #1d182b 0px, #1d182b 16px, #362d4e 16px, #362d4e 20px);
    border-top: 5px solid #d4af37;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.8);
}

/* Wings (Sealed) */
.wing-arch {
    position: absolute;
    top: 20%;
    width: 26%;
    height: 55%;
    border: 3px solid rgba(212, 175, 55, 0.4);
    border-bottom: none;
    border-radius: 120px 120px 0 0;
    background: #08060d;
    overflow: hidden;
}

.wing-arch.west-wing {
    left: 8%;
}

.wing-arch.east-wing {
    right: 8%;
}

.wing-boards {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg, #2b1f14 0px, #2b1f14 20px, #1a120b 20px, #1a120b 40px);
    opacity: 0.85;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wing-seal-text {
    font-family: monospace;
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: #d4af37;
    background: rgba(0, 0, 0, 0.85);
    padding: 6px 12px;
    border: 1px solid #d4af37;
    text-transform: uppercase;
}

/* Hotspots in Landing */
.landing-stair-hotspot {
    position: absolute;
    bottom: 12%;
    left: 40%;
    width: 20%;
    height: 25%;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 55;
}

.west-wing-hotspot {
    position: absolute;
    top: 20%;
    left: 8%;
    width: 26%;
    height: 55%;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 50;
}

.east-wing-hotspot {
    position: absolute;
    top: 20%;
    right: 8%;
    width: 26%;
    height: 55%;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 50;
}

/* Completion Badges */
.backbone-complete-badge {
    position: absolute;
    top: 18px;
    right: 20px;
    background: rgba(15, 12, 24, 0.9);
    border: 1px solid #ffd700;
    color: #ffd700;
    font-family: monospace;
    font-size: 0.75rem;
    padding: 6px 14px;
    border-radius: 4px;
    letter-spacing: 1px;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.2);
    z-index: 90;
}

/* Foyer entry hotspot to Main Hall */
.foyer-main-hall-hotspot {
    position: absolute;
    top: 18%;
    left: 36%;
    width: 28%;
    height: 48%;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 45;
}