/* Grumpys.nz — The Girls, Stage 1 */

.scene-girls {
    padding: 0;
    background: #19140f;
    overflow: hidden;
    }

/* Remove the normal fixed scene background/content */
.scene-girls:before,
.scene-girls .scene-copy,
.scene-girls .cloud,
.scene-girls .computer,
.scene-girls .blue-bunny,
.scene-girls .about-monitor {
    display: none;
    }

/*.girls-stage {
    display: none;
    position: relative;

    width: 100%;
    height: auto;

    z-index: 8;
    overflow: hidden;
    background: #19140f;
    } */

.girls-stage {
    display: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 8;
    overflow: hidden;
}

.scene-girls .girls-stage {
    display: block;
    }

/*.girls-stage-image {
    display: block;

    position: relative;
    width: 100%;
    height: auto;

    user-select: none;
    -webkit-user-drag: none;
    } */

.girls-stage-image {
    display: block;
    position: relative;
    width: 100%;
    height: auto;

    user-select: none;
    -webkit-user-drag: none;
    }

.girl-hotspot {
    position: absolute;
    z-index: 3;
    border: 0;
    border-radius: 22px;
    padding: 0;
    background: transparent;
    cursor: pointer;
    }

.girl-hotspot:hover {
    background: rgba(255,255,255,.06);
    }

.girl-hotspot:focus-visible {
    outline: 4px solid #69b8ef;
    outline-offset: 4px;
    background: rgba(105,184,239,.12);
    }


/* ---------------------------------------------------------
   GIRL INFORMATION CARD
   --------------------------------------------------------- */

.girl-card {
    position: absolute;
    z-index: 20;

    left: 50%;
    bottom: 4%;

    width: min(600px, 86%);

    transform: translateX(-50%);

    overflow: hidden;

    color: #251d17;
    background: #ead7b3;

    border: 3px solid #5a4029;
    border-radius: 20px;

    box-shadow:
        0 14px 34px #0009,
        inset 0 0 0 2px #fff5;

    font-family: var(--hand);
}


.girl-card[hidden] {
    display: none;
}


/* ---------------- HEADER ---------------- */

.girl-card-header {
    position: relative;

    min-height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 7px 54px 7px 18px;

    color: #f4e7ca;
    background: #4a3020;

    border-bottom: 2px solid #2f1d13;
}


.girl-card-title {
    font-size: clamp(1.45rem, 2.6vw, 2.15rem);
    line-height: 1.05;

    text-align: center;
}


.girl-card-close {
    position: absolute;

    top: 50%;
    right: 10px;

    width: 36px;
    height: 36px;

    transform: translateY(-50%);

    padding: 0;

    border: 0;
    border-radius: 50%;

    color: #f4e7ca;
    background: transparent;

    font: 700 1.55rem/1 var(--body);

    cursor: pointer;
}


.girl-card-close:hover {
    background: rgba(255,255,255,.12);
}


/* ---------------- BODY ---------------- */

.girl-card-body {
    display: grid;

    grid-template-columns:
        clamp(90px, 18vw, 135px)
        1fr;

    gap: clamp(14px, 2.5vw, 24px);

    align-items: center;

    padding:
        clamp(14px, 2.4vw, 22px)
        clamp(16px, 3vw, 28px);

    background: #ead7b3;
}


.girl-card-photo {
    display: block;

    width: 100%;
    aspect-ratio: 1 / 1;

    object-fit: cover;

    border-radius: 50%;

    border: 3px solid #5a4029;

    box-shadow:
        inset 0 0 0 2px #fff7,
        0 3px 8px #0004;
}


.girl-card-description {
    min-width: 0;
}


.girl-card-line {
    margin: 0 0 .65em;

    color: #241c17;

    font-size:
        clamp(.92rem, 1.45vw, 1.15rem);

    line-height: 1.32;
}


.girl-card-line:last-child {
    margin-bottom: 0;
}


/* ---------------- FOOTER ---------------- */

.girl-card-footer {
    padding:
        12px
        clamp(18px, 3vw, 30px)
        16px;

    color: #a12f28;

    border-top: 2px solid #806747;

    text-align: center;

    font-size:
        clamp(1rem, 1.65vw, 1.3rem);

    line-height: 1.3;

    font-style: italic;

    background: #ead7b3;
}


/* ---------------------------------------------------------
   PHONE
   --------------------------------------------------------- */

@media (max-width: 600px) {

    .girl-card {
        top: 3%;
        bottom: auto;

        width: 92%;
        max-height: 94%;

        display: flex;
        flex-direction: column;

        overflow: hidden;
        }

    .girl-card-header {
        flex: 0 0 auto;

        min-height: 44px;
        }

    .girl-card-title {
        font-size: 1.35rem;
        }

    .girl-card-body {
        flex: 1 1 auto;

        min-height: 0;

        overflow-y: auto;
        -webkit-overflow-scrolling: touch;

        grid-template-columns: 82px 1fr;

        gap: 12px;

        padding: 12px 14px;
        }

    .girl-card-line {
        font-size: .86rem;
        line-height: 1.25;
        }

    .girl-card-footer {
        flex: 0 0 auto;

        padding: 9px 14px 12px;

        font-size: .92rem;
        }

    .girl-card-close {
        width: 32px;
        height: 32px;

        font-size: 1.3rem;
        }
    }

.girl-card-description {
    min-height: 0;
    }

/* Girls scene follows the natural 3:2 artwork */
.world-window:has(.scene-girls) {
    height: auto;
    min-height: 0;
    }

.scene.scene-girls {
    position: relative;
    inset: auto;
    padding: 0;
    }

.scene-girls .girls-stage {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    }

/* ---------------------------------------------------------
   DAD'S GHOST
   --------------------------------------------------------- */

.dad-ghost {
    position: absolute;
    z-index: 2;

    left: 46.5%;
    top: 12.5%;
    width: 23.4%;

    height: auto;

    opacity: 0;

    pointer-events: none;

/*    transform: translate(570px, 145px);*/

    transition: opacity 2s ease-in-out;
    }

.dad-ghost.visible {
    opacity: .30;
    }