/* Prop takeovers (scripts/takeover/): content comes in once open (is-open); the dimming lifts
   as it leaves (is-leaving). Flat without WebGL (is-flat). */
.takeover {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    overflow: hidden;
}

.takeover::backdrop {
    background: rgba(4, 14, 28, 0.62);
    backdrop-filter: blur(2px);
    animation: popup-backdrop-in 0.3s ease;
    transition: opacity 0.35s ease;
}

.takeover.is-leaving::backdrop {
    opacity: 0;
}

.takeover-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.takeover-title {
    position: absolute;
    top: max(16px, 4vh);
    left: 50%;
    margin: 0;
    font-size: clamp(26px, 3.6vw, 52px);
    translate: -50% 0;
}

.takeover-close {
    top: max(16px, 3vh);
    right: max(16px, 3vw);
}

/* Placed over the open prop by its script. */
.takeover-content {
    position: absolute;
    box-sizing: border-box;
}

.takeover-title,
.takeover-close,
.takeover-content {
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.18s ease,
        visibility 0.18s;
}

.takeover.is-open .takeover-title,
.takeover.is-open .takeover-close,
.takeover.is-open .takeover-content {
    opacity: 1;
    visibility: visible;
}

.takeover-title {
    transition-delay: 0.03s;
}

.takeover.is-flat .takeover-content {
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}

/* Cosmetics: tiles laid on the locker's front, and the description beside it. */
.cosmetics-shelf {
    display: flex;
    flex-direction: column;
    padding: 6px;
    overflow: auto;
    color: #fff;
}

.cosmetics-grid {
    display: grid;
    flex: 1;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    grid-auto-rows: minmax(46px, 1fr);
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cosmetics-grid li {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 8px;
    border: 2px solid rgba(220, 240, 255, 0.6);
    border-radius: 12px;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 45%),
        rgba(60, 140, 200, 0.35);
    box-shadow: inset 0 -5px 12px rgba(0, 10, 25, 0.35);
    backdrop-filter: blur(3px);
    font: clamp(12px, 1.1vw, 16px) / 1.2 "Titan One", sans-serif;
    text-align: center;
    paint-order: stroke fill;
    -webkit-text-stroke: 0.15em #16263d;
}

.takeover.is-open .cosmetics-grid li {
    animation: cosmetic-pop 0.34s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}

.takeover.is-open .cosmetics-grid li:nth-child(2) { animation-delay: 0.025s; }
.takeover.is-open .cosmetics-grid li:nth-child(3) { animation-delay: 0.05s; }
.takeover.is-open .cosmetics-grid li:nth-child(4) { animation-delay: 0.075s; }
.takeover.is-open .cosmetics-grid li:nth-child(5) { animation-delay: 0.1s; }
.takeover.is-open .cosmetics-grid li:nth-child(6) { animation-delay: 0.125s; }
.takeover.is-open .cosmetics-grid li:nth-child(7) { animation-delay: 0.15s; }
.takeover.is-open .cosmetics-grid li:nth-child(8) { animation-delay: 0.175s; }

.cosmetics-about {
    color: #fff;
    font: clamp(15px, 1.3vw, 19px) / 1.5 sans-serif;
    text-shadow: 0 1px 3px rgba(0, 10, 25, 0.85);
}

.cosmetics-about h3 {
    margin: 0 0 0.4em;
    font-size: clamp(26px, 2.8vw, 40px);
}

.cosmetics-about p {
    margin: 0 0 0.8em;
}

.takeover.is-open .cosmetics-about {
    animation: cosmetics-about-in 0.34s cubic-bezier(0.3, 1.4, 0.5, 1) 0.08s both;
}

@keyframes cosmetics-about-in {
    from {
        opacity: 0;
        transform: translateX(24px);
    }
}

.takeover.is-flat .cosmetics-about {
    top: 14%;
    width: min(560px, calc(100% - 32px));
    translate: -50% 0;
}

.takeover.is-flat .cosmetics-shelf {
    top: auto;
    bottom: 4%;
    width: min(560px, calc(100% - 32px));
    max-height: 50%;
    padding: 16px;
    border: 4px solid #16263d;
    border-radius: 18px;
    background: #2c5f6e;
    translate: -50% 0;
}

@keyframes cosmetic-pop {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.85);
    }
}

@media (prefers-reduced-motion: reduce) {
    .takeover.is-open .cosmetics-grid li,
    .takeover.is-open .cosmetics-about {
        animation: none;
    }
}