/* ============================================================
   REVAMED MANSION — ACT II V17 RESONANCE CHAMBER
============================================================ */

.act2-resonance-chamber {
    --resonance-brass: #b99055;
    --resonance-cyan: #7dd3fc;
    --resonance-ink: #070b10;
    position: relative !important;
    min-height: clamp(560px, 74vh, 860px);
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 50% 38%, rgba(74, 140, 168, 0.16), transparent 26%),
        linear-gradient(180deg, #10151a 0%, #070a0d 52%, #020304 100%);
    perspective: 1100px;
    color: #e7edf1;
}

.act2-resonance-chamber::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(90deg, transparent 0 68px, rgba(255,255,255,0.018) 69px 70px);
    mix-blend-mode: screen;
    z-index: 9;
}

.resonance-depth {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.resonance-back {
    inset: 8% 10% 24%;
    border: 2px solid rgba(185, 144, 85, 0.25);
    border-radius: 46% 46% 12% 12%;
    transform: translateZ(-140px) scale(0.9);
    background:
        linear-gradient(90deg, rgba(185,144,85,0.12), transparent 24% 76%, rgba(185,144,85,0.12)),
        radial-gradient(ellipse at center, rgba(125,211,252,0.12), rgba(0,0,0,0.7) 62%);
    box-shadow: inset 0 0 80px rgba(0,0,0,0.9);
}

.resonance-mid {
    top: 37%;
    bottom: -18%;
    background:
        linear-gradient(108deg, transparent 0 13%, rgba(185,144,85,0.14) 13.4% 14%, transparent 14.5% 85%, rgba(185,144,85,0.14) 85.5% 86%, transparent 86.5%),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 42px);
    transform: rotateX(64deg) translateZ(-40px);
    transform-origin: center top;
}

.resonance-machinery {
    position: absolute;
    inset: 12% 7% 28%;
    z-index: 1;
    pointer-events: none;
}

.resonance-machinery span {
    position: absolute;
    width: clamp(86px, 11vw, 150px);
    aspect-ratio: 1;
    border: 7px double rgba(185,144,85,0.33);
    border-radius: 50%;
    box-shadow: inset 0 0 0 14px rgba(8,12,15,0.7), 0 0 32px rgba(0,0,0,0.8);
}

.resonance-machinery span:nth-child(1) { left: 2%; top: 8%; }
.resonance-machinery span:nth-child(2) { right: 2%; top: 8%; }
.resonance-machinery span:nth-child(3) { left: 9%; bottom: 2%; transform: scale(0.72); }
.resonance-machinery span:nth-child(4) { right: 9%; bottom: 2%; transform: scale(0.72); }

.resonance-copy {
    position: relative;
    z-index: 4;
    max-width: 760px;
    padding: clamp(24px, 4vw, 46px);
}

.resonance-copy h3 {
    margin: 6px 0 12px;
    font-size: clamp(28px, 5vw, 54px);
    letter-spacing: -0.03em;
}

.resonance-copy p:last-child {
    max-width: 64ch;
    color: #bac7cf;
    line-height: 1.6;
}

.resonance-console {
    position: relative;
    z-index: 5;
    width: min(760px, calc(100% - 32px));
    margin: 0 auto;
    padding: clamp(18px, 3vw, 30px);
    border: 1px solid rgba(185,144,85,0.34);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(17,24,28,0.94), rgba(5,8,10,0.96));
    box-shadow: 0 26px 70px rgba(0,0,0,0.46), inset 0 1px rgba(255,255,255,0.04);
    backdrop-filter: blur(14px);
}

.resonance-clue {
    margin: 0 0 18px;
    text-align: center;
    color: #d6bd92;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.resonator-bank {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(10px, 2vw, 20px);
    align-items: end;
    margin-bottom: 18px;
}

.resonator-column {
    min-width: 0;
    min-height: 190px;
    display: grid;
    align-content: end;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(125,211,252,0.16);
    border-radius: 15px;
    background: rgba(0,0,0,0.34);
    text-align: center;
}

.resonator-coil {
    width: 46px;
    height: calc(28px + (var(--resonance-level) * 22px));
    margin: auto;
    border: 4px solid rgba(185,144,85,0.7);
    border-top: 0;
    border-radius: 0 0 24px 24px;
    background: repeating-linear-gradient(0deg, rgba(125,211,252,0.08) 0 6px, rgba(185,144,85,0.16) 6px 10px);
    box-shadow: 0 0 calc(var(--resonance-level) * 5px) rgba(125,211,252,0.35);
    transition: height 180ms ease, box-shadow 180ms ease;
}

.resonator-column output {
    color: #dff4ff;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.resonator-column button,
.resonance-enter-button,
.resonance-return,
.resonance-null-key,
#resonance-submit,
#resonance-complete-close {
    min-height: 52px;
    touch-action: manipulation;
}

.resonator-column button {
    border: 1px solid rgba(185,144,85,0.45);
    border-radius: 10px;
    background: #151c21;
    color: #f3e5cd;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

.resonator-column button:focus-visible,
.resonance-null-key:focus-visible,
.resonance-enter-button:focus-visible {
    outline: 3px solid #f2c879;
    outline-offset: 3px;
}

.resonance-status {
    min-height: 3em;
    color: #aebbc3;
    line-height: 1.5;
}

.resonance-shutters {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 17%;
    width: min(330px, 64vw);
    height: 126px;
    transform: translateX(-50%);
    overflow: hidden;
    border: 1px solid rgba(185,144,85,0.26);
    background: radial-gradient(circle, rgba(125,211,252,0.15), rgba(0,0,0,0.62) 65%);
}

.resonance-shutters span {
    position: absolute;
    top: 0;
    width: 51%;
    height: 100%;
    background: repeating-linear-gradient(90deg, #13191d 0 12px, #2a3033 12px 17px);
    transition: transform 650ms cubic-bezier(.2,.8,.2,1);
}

.resonance-shutters span:first-child { left: 0; }
.resonance-shutters span:last-child { right: 0; }
.resonance-shutters.is-open span:first-child { transform: translateX(-96%); }
.resonance-shutters.is-open span:last-child { transform: translateX(96%); }

.resonance-null-key {
    position: absolute;
    z-index: 7;
    left: 50%;
    bottom: 20%;
    transform: translateX(-50%);
    border: 1px solid rgba(125,211,252,0.52);
    border-radius: 999px;
    padding: 12px 18px;
    background: rgba(5,14,18,0.92);
    color: #dff7ff;
    box-shadow: 0 0 30px rgba(125,211,252,0.2);
    cursor: pointer;
}

.resonance-null-key span {
    margin-right: 8px;
    color: #94e4ff;
}

.resonance-return,
.resonance-enter-button {
    position: relative;
    z-index: 8;
    margin: 18px;
}

.resonance-enter-button {
    position: absolute;
    right: 16px;
    bottom: 16px;
}

.resonance-complete-card {
    position: absolute;
    z-index: 30;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: min(620px, calc(100% - 32px));
    padding: clamp(24px, 5vw, 42px);
    border: 1px solid rgba(185,144,85,0.5);
    border-radius: 20px;
    background: rgba(4,8,11,0.97);
    box-shadow: 0 30px 120px rgba(0,0,0,0.78);
}

.resonance-complete-card h3 {
    font-size: clamp(24px, 4vw, 38px);
    margin: 8px 0 14px;
}

.act2-resonance-chamber.is-calibrated .resonance-back {
    box-shadow: inset 0 0 80px rgba(0,0,0,0.85), 0 0 45px rgba(125,211,252,0.13);
}

@media (max-width: 720px) {
    .act2-resonance-chamber {
        min-height: 760px;
    }

    .resonator-bank {
        gap: 8px;
    }

    .resonator-column {
        min-height: 164px;
        padding: 10px 7px;
    }

    .resonator-coil {
        width: 36px;
    }

    .resonance-copy {
        padding-bottom: 18px;
    }

    .resonance-shutters {
        bottom: 12%;
    }

    .resonance-null-key {
        bottom: 14.5%;
        width: max-content;
        max-width: calc(100% - 32px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .resonator-coil,
    .resonance-shutters span {
        transition: none !important;
    }

    .act2-resonance-chamber *,
    .act2-resonance-chamber *::before,
    .act2-resonance-chamber *::after {
        animation: none !important;
    }
}