html,
body {

width: 100%;
height: 100%;

margin: 0;
padding: 0;

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

background: #000;

font-family: Arial, Helvetica, sans-serif;

}

/* =========================
STAGE
========================= */

.scene {

position: relative;

width: min(450px, 95vw);

aspect-ratio: 9 / 16;

max-height: 88vh;

background: #000;

border: 6px solid #000;

border-radius: 8px;

overflow: hidden;

box-shadow:
    0 50px 90px rgba(0,0,0,.95),
    0 0 120px rgba(0,0,0,.65);

}

/* =========================
WORLD
========================= */

.world {

position: absolute;

inset: 0;

}

/* =========================
LAYERS
========================= */

.layer {

position: absolute;

inset: 0;

background-size: contain;

background-position: center top;

background-repeat: no-repeat;

transform: translateY(0);

transition:
    transform 6s cubic-bezier(.22,1,.36,1);

will-change: transform;

}

/* =========================
NAVIGATION
========================= */

.sigils {

position: absolute;

left: 50%;

bottom: 20px;

transform: translateX(-50%);

display: grid;

grid-template-columns: repeat(6, auto);

grid-template-rows: repeat(2, auto);

gap: 12px 18px;

z-index: 1000;

user-select: none;

align-items: center;

justify-items: center;

}

.sigils div {

color: #715f4c;

font-size: 24px;

opacity: .45;

cursor: pointer;

line-height: 1;

transition:
    color .25s ease,
    transform .25s ease;

}

.sigils div:hover {

color: #d4936b;

opacity: .9;

transform: scale(1.2);

}

.sigils div.active {

color: #be996f;

opacity: 1;

}

/* =========================
MOBILE
========================= */

@media (max-width: 768px) {

.scene {

    width: 94vw;

    max-height: 85vh;

}


.sigils {

    gap: 12px 16px;

    bottom: 16px;

}


.sigils div {

    font-size: 18px;

}

}

/* =========================
LIFT ALL
========================= */

.sigils .lift-all {

grid-column: 1 / -1;

justify-self: center;

font-size: 32px;

margin-top: 4px;

}

.lower-all,
.lift-all {

cursor: pointer;

}