/* Puzzles page: splash image with clickable nameplates. */

/* On the puzzles page, let the body span the viewport so the splash can be
   centered freely. Base styles normally cap the body at 960px. */
body.puzzles-splash {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    min-height: 100vh;
}

body.puzzles-splash .content {
    padding: 0;
    box-sizing: border-box;
}

body.puzzles-splash .top-more-actions {
    margin: 0;
}

/* Outer clips horizontally overflowing content and centers the splash.
   The splash always fills at least the full viewport width; on narrow
   viewports the wrap renders at a larger size than the viewport so the
   central title stays visible (sides cropped). */
.splash-outer {
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.splash-wrap {
    /* Fill the full viewport width (no side bars). On narrow viewports
       (below ~918px) the wrap is wider than the viewport so the center —
       which contains the title — stays visible. 1.578 = 1448 / 918, where
       918px is the natural-image width we need symmetrically visible to
       always include the title. */
    width: max(100vw, min(1448px, calc(100vw * 1.578)));
    flex-shrink: 0;
    position: relative;
    aspect-ratio: 1448 / 1086;
    line-height: 0;
}

.splash-bg {
    width: 100%;
    height: 100%;
    display: block;
    user-select: none;
    pointer-events: none;
}

.nameplate {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transform-origin: center center;
    transition: transform 0.18s ease;
    line-height: 1;
    padding: 0;
    box-sizing: border-box;
}

.nameplate-text {
    display: block;
    text-align: center;
    font-family: 'Cinzel', 'Cormorant Garamond', serif;
    font-weight: 900;
    letter-spacing: 0.02em;
    color: #3a2510;
    text-shadow: 0 1px 0 rgba(255, 235, 195, 0.35);
    white-space: nowrap;
    /* font-size is set dynamically by puzzles-page.js so the name fills
       its nameplate box without truncation. */
}

/* Transparent clickable overlay for the temple door below each nameplate. */
.door-hitbox {
    position: absolute;
    display: block;
    background: transparent;
    z-index: 1;
}

/* Hovering either the nameplate or its paired door grows the nameplate. */
.ls-level:hover .nameplate:not(.ls-locked) {
    transform: scale(1.08);
    z-index: 2;
}

/* Solved: subtle tint + check glyph. */
.ls-level.ls-solved .nameplate-text {
    color: #2a4a2a;
}

.ls-level.ls-solved .nameplate-text::after {
    content: ' ✓';
    color: #2a7d2a;
}

/* Locked meta: no hover grow, no pointer, dimmed interaction. */
.ls-level.ls-locked .nameplate,
.ls-level.ls-locked .door-hitbox {
    cursor: default;
}

.ls-level.ls-locked .nameplate-text {
    color: #3a2510;
}