/* Full-viewport temple-gate overlay shown on /puzzles.
   Two copies of the same splash image, one clipped to each half, so the
   halves can slide apart like doors when the gate opens. */

.temple-gate {
    position: fixed;
    inset: 0;
    z-index: 90;
    overflow: hidden;
    isolation: isolate;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Solid backdrop during the countdown so the reveal animation can only
   happen when the hunt is actually open. When open, the gate is
   transparent so the puzzle tiles show through as the doors slide apart. */
.temple-gate:not([data-open]) {
    background: #0a0805;
}

/* Native image is 1536x1024 (3:2). We want to guarantee the central ~65%
   (pireboy + eulergirl) stays visible at every viewport. Logic:
   - Wide viewports (aspect >= 0.975): image covers the viewport; sides are
     cropped via overflow:hidden on the parent.
   - Narrow viewports (aspect < 0.975, e.g. phone portrait): image shrinks
     so exactly ~65% of its width spans the viewport width; top/bottom
     letterbox on the dark backdrop. This ensures both characters stay on
     screen no matter the aspect ratio.
   Breakdown of the expression:
     V_w/1.5  : height needed to cover wide viewports (aspect > 1.5).
     100vh    : height when image fully covers vertically.
     V_w*1.0256 : height below the 65%-visible threshold (1/(1.5*0.65)). */
.temple-gate-images {
    position: relative;
    height: max(min(100vh, calc(100vw * 1.0256)), calc(100vw / 1.5));
    aspect-ratio: 3 / 2;
    flex-shrink: 0;
}

.temple-gate-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform, clip-path;
}

.temple-gate-img-left  { clip-path: inset(0 50% 0 0); }
.temple-gate-img-right { clip-path: inset(0 0 0 50%); }

.temple-gate-ui {
    position: absolute;
    left: 50%;
    top: 64%;
    transform: translate(-50%, 0);
    text-align: center;
    z-index: 2;
    padding: 0 1rem;
    width: min(92vw, 560px);
}

/* Frosted backdrop behind the countdown so the text reads cleanly over
   the busy temple-gate splash. Only shown in closed state; the open
   state's team-name input + button already have their own paneling. */
.temple-gate:not([data-open]) .temple-gate-ui {
    width: min(80vw, 380px);
    padding: 0.9rem 1.2rem 1rem;
    border-radius: 14px;
    background: rgba(10, 8, 5, 0.25);
    backdrop-filter: blur(6px) saturate(1.05);
    -webkit-backdrop-filter: blur(6px) saturate(1.05);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 8px 28px rgba(0, 0, 0, 0.45);
}

.temple-gate-countdown-label {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #fbe7b8;
    font-size: clamp(0.95rem, 1.7vw, 1.3rem);
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
    margin: 0 0 0.4rem;
}

.temple-gate-countdown {
    font-family: 'Cinzel', serif;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    font-size: clamp(2.4rem, 6vw, 5rem);
    color: #ffcd6e;
    text-shadow:
        0 0 14px rgba(255, 156, 40, 0.55),
        0 4px 16px rgba(0, 0, 0, 0.8);
    letter-spacing: 0.04em;
    line-height: 1;
    margin: 0;
}

.temple-gate-team-label {
    display: block;
    font-family: 'Cinzel', serif;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffd98a;
    font-size: clamp(1rem, 1.7vw, 1.25rem);
    text-shadow:
        0 0 8px rgba(0, 0, 0, 0.9),
        0 2px 4px rgba(0, 0, 0, 1),
        0 0 18px rgba(255, 156, 40, 0.4);
    margin: 0 0 0.55rem;
}

.temple-gate-team {
    display: block;
    width: 100%;
    margin: 0 auto 1.1rem;
    padding: 0.7em 1.2em;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: clamp(0.95rem, 1.6vw, 1.15rem);
    letter-spacing: 0.04em;
    color: #2c1808;
    background: linear-gradient(180deg, #fff2cf 0%, #f2d79a 100%);
    border: 3px solid #8a4a1a;
    border-radius: 999px;
    box-shadow:
        inset 0 2px 4px rgba(90, 47, 13, 0.3),
        inset 0 -1px 0 rgba(255, 255, 255, 0.5),
        0 3px 14px rgba(0, 0, 0, 0.55),
        0 0 18px rgba(255, 170, 60, 0.15);
    outline: none;
    text-align: center;
    box-sizing: border-box;
}

.temple-gate-team::placeholder {
    color: rgba(90, 47, 13, 0.55);
    font-style: italic;
    letter-spacing: 0.02em;
}

.temple-gate-team:focus {
    border-color: #ffcd6e;
    box-shadow:
        inset 0 2px 4px rgba(90, 47, 13, 0.3),
        inset 0 -1px 0 rgba(255, 255, 255, 0.5),
        0 0 0 3px rgba(255, 205, 110, 0.55),
        0 3px 14px rgba(0, 0, 0, 0.55),
        0 0 24px rgba(255, 170, 60, 0.35);
}

.temple-gate-enter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cinzel', serif;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: clamp(1rem, 1.8vw, 1.5rem);
    line-height: 1;
    white-space: nowrap;
    /* Top padding > bottom padding to compensate for the 4px bottom inset
       shadow, which otherwise makes the text look too high. */
    padding: 0.85em 1.7em 0.6em;
    color: #2c1808;
    background: linear-gradient(180deg, #ffe394 0%, #e5a24a 60%, #a76324 100%);
    border: 3px solid #5a2f0d;
    border-radius: 10px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -4px 0 rgba(0, 0, 0, 0.3),
        0 4px 18px rgba(0, 0, 0, 0.65),
        0 0 30px rgba(255, 170, 60, 0.4);
    cursor: pointer;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.temple-gate-enter:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -4px 0 rgba(0, 0, 0, 0.3),
        0 8px 24px rgba(0, 0, 0, 0.65),
        0 0 40px rgba(255, 170, 60, 0.6);
}

.temple-gate-enter:active {
    transform: translateY(1px);
}

.temple-gate-enter:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    filter: grayscale(0.35);
    transform: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -4px 0 rgba(0, 0, 0, 0.3),
        0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Brief screen shake just before the doors part. */
.temple-gate.shaking {
    animation: temple-shake 0.55s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes temple-shake {
    10%, 90% { transform: translate3d(-2px, 1px, 0); }
    20%, 80% { transform: translate3d(4px, -2px, 0); }
    30%, 50%, 70% { transform: translate3d(-9px, 3px, 0); }
    40%, 60% { transform: translate3d(9px, -3px, 0); }
}

/* Doors slide apart, revealing the puzzles page underneath. */
.temple-gate.opening .temple-gate-img-left {
    transform: translateX(-100%);
    transition: transform 1.1s cubic-bezier(.77, 0, .175, 1);
}

.temple-gate.opening .temple-gate-img-right {
    transform: translateX(100%);
    transition: transform 1.1s cubic-bezier(.77, 0, .175, 1);
}

.temple-gate.opening .temple-gate-ui {
    opacity: 0;
    transition: opacity 0.35s ease;
}

.temple-gate.gone {
    display: none;
}