body {
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
}

.scene-frame {
    width: 70vw;
}

.scene-label {
    margin-bottom: 0.4rem;
    color: #fff4d6;
    font-family: Georgia, serif;
    font-size: clamp(0.9rem, 1.6vw, 1.2rem);
    letter-spacing: 0.08em;
}

.scene {
    position: relative;
    width: 100%;
    aspect-ratio: 2048 / 1190;
    overflow: hidden;
    border: 1px solid rgba(255, 244, 214, 0.75);
    box-sizing: border-box;
}

.scene > img {
    display: block;
    width: 100%;
    transform: scale(1.1);
    transform-origin: center;
}

.overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: scale(1.1);
    transform-origin: center;
}

.overlay a:focus:not(:focus-visible) {
    outline: none;
}

.scene-tooltip {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    padding: 0.35rem 0.6rem;
    border: 1px solid rgba(255, 244, 214, 0.75);
    border-radius: 999px;
    background: rgba(18, 10, 8, 0.82);
    color: #fff4d6;
    font-family: Georgia, serif;
    font-size: clamp(0.8rem, 1.4vw, 1.05rem);
    font-style: italic;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(255, 218, 147, 0.65);
    box-shadow: 0 0 18px rgba(255, 218, 147, 0.25);
    white-space: nowrap;
    transform: translate(1rem, 1rem);
    transition: opacity 0.12s ease;
}

.scene-tooltip.is-visible {
    opacity: 1;
}

.skull-layer,
.sunflower-layer,
.compass-layer,
.orange-layer,
.pinkstripe-layer,
.bouquet-layer {
    pointer-events: none;
    transition: filter 0.3s ease;
}

.skull-path,
.sunflower-path,
.compass-path,
.orange-path,
.pinkstripe-path,
.bouquet-path {
    fill: transparent;
    cursor: pointer;
}

.overlay.skull-active .skull-layer {
    filter: drop-shadow(0 0 32px rgba(211, 211, 204, 0.246));
}

.overlay.sunflower-active .sunflower-layer {
    filter: drop-shadow(0 0 32px rgba(202, 170, 83, 0.277));
}

.overlay.compass-active .compass-layer {
    filter: drop-shadow(0 0 32px rgba(211, 211, 204, 0.246));
}

.overlay.orange-active .orange-layer {
    filter: drop-shadow(0 0 32px rgba(255, 140, 0, 0.4));
}

.overlay.pinkstripe-active .pinkstripe-layer {
    filter: drop-shadow(0 0 32px rgba(255, 150, 180, 0.4));
}

.overlay.bouquet-active .bouquet-layer {
    filter: drop-shadow(0 0 32px rgba(180, 100, 129, 0.4));
}