/*
==============================================================
REVAMED MANSION — BUILDER'S MARK V1
Subtle brass developer signature beneath the Foyer table drawer.
==============================================================
*/

.scene-foyer > .builder-mark {
    position: absolute;
    left: 68%;
    top: 67%;
    z-index: 60;

    transform: translate(-50%, -50%);

    width: 44px;
    height: 44px;

    padding: 0;
    border: 0;
    background: transparent;

    display: grid;
    place-items: center;

    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.scene-foyer > .builder-mark[hidden] {
    display: none !important;
}

.scene-foyer > .builder-mark > span {
    width: 21px;
    height: 15px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(213, 166, 74, .68);
    border-radius: 3px;

    color: rgba(235, 196, 110, .82);
    background:
        linear-gradient(
            180deg,
            rgba(87, 59, 24, .9),
            rgba(29, 20, 13, .96)
        );

    box-shadow:
        inset 0 0 0 1px rgba(255, 226, 158, .08),
        0 2px 8px rgba(0, 0, 0, .62);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;

    opacity: .62;
    transition:
        opacity 150ms ease,
        transform 150ms ease,
        box-shadow 150ms ease;
}

.scene-foyer > .builder-mark:hover > span,
.scene-foyer > .builder-mark:focus-visible > span {
    opacity: 1;
    transform: translateY(-1px);
    box-shadow:
        inset 0 0 0 1px rgba(255, 226, 158, .12),
        0 0 12px rgba(213, 166, 74, .28),
        0 3px 10px rgba(0, 0, 0, .72);
}

.scene-foyer > .builder-mark:focus-visible {
    outline: 2px solid #e7bd63;
    outline-offset: 2px;
    border-radius: 6px;
}

.builder-mark-dialog {
    position: fixed;
    inset: 0;
    z-index: 10000;

    padding:
        max(18px, env(safe-area-inset-top))
        max(18px, env(safe-area-inset-right))
        max(18px, env(safe-area-inset-bottom))
        max(18px, env(safe-area-inset-left));

    display: grid;
    place-items: center;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(40, 30, 20, .44),
            rgba(2, 2, 4, .9) 68%
        );

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.builder-mark-dialog[hidden] {
    display: none !important;
}

.builder-mark-card {
    width: min(560px, 100%);
    max-height: min(720px, 92svh);
    overflow: auto;

    padding: clamp(22px, 5vw, 38px);

    border:
        1px solid
        rgba(213, 166, 74, .6);

    border-radius: 14px;

    color: #e7ded1;

    background:
        linear-gradient(
            180deg,
            rgba(20, 17, 18, .98),
            rgba(8, 8, 11, .99)
        );

    box-shadow:
        0 30px 90px rgba(0, 0, 0, .72),
        inset 0 0 0 1px rgba(255, 231, 183, .03);

    font-family:
        Georgia,
        "Times New Roman",
        serif;
}

.builder-mark-kicker {
    margin: 0 0 14px;

    color: #d5a64a;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Consolas,
        monospace;

    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.builder-mark-card h3 {
    margin: 0 0 20px;

    color: #f0e7d8;

    font-size:
        clamp(
            1.35rem,
            5vw,
            2rem
        );

    line-height: 1.18;
}

.builder-mark-card p {
    margin: 0 0 15px;
    line-height: 1.62;
}

.builder-mark-childhood {
    padding: 13px 15px;

    border-left:
        2px solid
        rgba(213, 166, 74, .72);

    color: #d9c9ae;

    background:
        rgba(213, 166, 74, .055);
}

.builder-mark-signature {
    margin-top: 22px !important;

    color: #e3b95f;

    font-size: 1.28rem;
    font-style: italic;
}

.builder-mark-close {
    width: 100%;
    min-height: 48px;

    margin-top: 8px;

    border:
        1px solid
        rgba(213, 166, 74, .62);

    border-radius: 8px;

    color: #f1e6d4;
    background:
        linear-gradient(
            180deg,
            rgba(107, 75, 29, .48),
            rgba(52, 36, 19, .68)
        );

    font: inherit;
    font-weight: 700;

    cursor: pointer;
    touch-action: manipulation;
}

.builder-mark-close:focus-visible {
    outline: 2px solid #e7bd63;
    outline-offset: 3px;
}

body.builder-mark-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .scene-foyer > .builder-mark > span {
        transition: none;
    }
}