/* ==========================================================================
   mythos152.com — Unlock overlay styling
   The overlay covers the terminal when a cipher is solved. The decrypted
   HTML content is rendered inside it. Different ciphers apply different
   body classes (.in-pathfinder, .in-shard, .in-voss, .in-basel, .in-mythos)
   which control the visual aesthetic.
   ========================================================================== */

#unlock-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    z-index: 1000;
    background: var(--pf-bg);
    color: var(--pf-fg);
    font-family: var(--font-mono);
    font-size: 16px;
    line-height: 1.7;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease-in-out;
}

#unlock-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

#unlock-overlay.hidden {
    display: none;
}

/* The unlock-region is the root of the decrypted content */
#unlock-overlay .unlock-region {
    max-width: 920px;
    margin: 0 auto;
    padding: 3rem 1.5rem 5rem;
    min-height: 100vh;
}

#unlock-overlay .unlock-header {
    margin-bottom: 3rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--pf-fg-soft);
}

#unlock-overlay .unlock-header .breadcrumb {
    color: var(--pf-fg-soft);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 1rem;
}

#unlock-overlay .unlock-header h1 {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
    color: var(--pf-fg);
    text-shadow: 0 0 6px rgba(0, 217, 102, 0.3);
}

#unlock-overlay .unlock-header .subtitle {
    color: var(--pf-fg-dim);
    font-size: 0.9rem;
    margin-top: 0.6rem;
    font-style: italic;
}

#unlock-overlay .unlock-content {
    margin-bottom: 3rem;
}

#unlock-overlay .unlock-content p {
    margin: 1.2em 0;
}

#unlock-overlay .unlock-content .pending {
    color: var(--pf-fg-soft);
    font-style: italic;
    padding: 1.5em;
    border: 1px dashed var(--pf-fg-soft);
    margin: 2em 0;
    text-align: center;
}

#unlock-overlay .unlock-content blockquote {
    border-left: 3px solid var(--pf-fg-soft);
    padding-left: 1.5em;
    margin: 2em 0;
    color: var(--pf-fg-dim);
    font-family: var(--font-mono);
}

#unlock-overlay .unlock-footer {
    margin-top: 4rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--pf-fg-soft);
    color: var(--pf-fg-soft);
    font-size: 0.8rem;
}

#unlock-overlay .back-to-terminal {
    background: transparent;
    border: 1px solid var(--pf-fg-soft);
    color: var(--pf-fg-dim);
    font-family: inherit;
    font-size: 0.85rem;
    padding: 0.5em 1.2em;
    cursor: pointer;
    transition: all 0.3s ease;
}

#unlock-overlay .back-to-terminal:hover {
    border-color: var(--pf-fg);
    color: var(--pf-fg);
}

/* ==========================================================================
   Aesthetic variants — applied to body when a cipher unlock is shown
   ========================================================================== */

/* L2-A — Pathfinder Archive: green, clinical (default) */
body.in-pathfinder #unlock-overlay {
    /* default green-on-black */
}

/* L2-B — Shard's Room: warm amber */
body.in-shard #unlock-overlay {
    background: var(--my-bg);
    color: var(--my-fg);
}
body.in-shard #unlock-overlay .unlock-header h1 {
    color: var(--my-fg-bright);
    text-shadow: 0 0 12px var(--my-glow);
}
body.in-shard #unlock-overlay .unlock-header .breadcrumb {
    color: var(--my-fg-dim);
}
body.in-shard #unlock-overlay .back-to-terminal {
    border-color: var(--my-fg-dim);
    color: var(--my-fg-dim);
}
body.in-shard #unlock-overlay .back-to-terminal:hover {
    border-color: var(--my-fg);
    color: var(--my-fg);
}

/* L2-C — Voss Files: clinical light institutional */
body.in-voss #unlock-overlay {
    background: var(--vs-bg);
    color: var(--vs-fg);
    font-family: var(--font-serif);
}
body.in-voss #unlock-overlay .unlock-header {
    border-bottom-color: #888;
}
body.in-voss #unlock-overlay .unlock-header h1 {
    color: var(--vs-fg);
    text-shadow: none;
    font-family: var(--font-sans);
}
body.in-voss #unlock-overlay .unlock-header .breadcrumb {
    color: var(--vs-fg-dim);
}
body.in-voss #unlock-overlay .unlock-content blockquote {
    border-left-color: #888;
    color: var(--vs-fg);
}
body.in-voss #unlock-overlay .unlock-footer {
    border-top-color: #ccc;
    color: var(--vs-fg-dim);
}
body.in-voss #unlock-overlay .back-to-terminal {
    border-color: #aaa;
    color: var(--vs-fg-dim);
    font-family: var(--font-sans);
}
body.in-voss #unlock-overlay .back-to-terminal:hover {
    border-color: var(--vs-fg);
    color: var(--vs-fg);
}

/* L2-D — Basel Map: cool dark */
body.in-basel #unlock-overlay {
    background: #0d1014;
    color: #b6c2cc;
}
body.in-basel #unlock-overlay .unlock-header h1 {
    color: #d6e0e8;
    text-shadow: none;
}

/* L3 — Mythos's Network: warm amber, the deep one */
body.in-mythos #unlock-overlay {
    background: var(--my-bg);
    color: var(--my-fg);
    font-family: var(--font-serif);
    font-size: 1.05rem;
    line-height: 1.75;
    background-image: radial-gradient(
        ellipse 80% 60% at 50% 100%,
        rgba(244, 214, 147, 0.06) 0%,
        transparent 60%
    );
}
body.in-mythos #unlock-overlay .unlock-header h1 {
    text-align: center;
    font-size: 4rem;
    color: var(--my-fg-bright);
    text-shadow:
        0 0 8px var(--my-glow),
        0 0 24px var(--my-glow),
        0 0 48px rgba(244, 214, 147, 0.2);
    animation: node-pulse 2.8571429s ease-in-out infinite;
}
body.in-mythos #unlock-overlay .unlock-header .subtitle {
    text-align: center;
    color: var(--my-fg-dim);
    font-style: italic;
    letter-spacing: 0.1em;
    margin-top: 1em;
}
body.in-mythos #unlock-overlay .mythos-voice {
    font-style: italic;
    color: var(--my-fg);
    max-width: 36em;
    margin: 1.6em auto;
}
body.in-mythos #unlock-overlay .mythos-voice.signature {
    text-align: right;
    color: var(--my-fg-dim);
    margin-top: 3em;
}
body.in-mythos #unlock-overlay .node-status {
    margin: 4em auto;
    max-width: 32em;
    text-align: center;
    padding: 1.5em;
    border: 1px solid var(--my-fg-dim);
    background: rgba(244, 214, 147, 0.04);
    color: var(--my-fg-dim);
    font-family: var(--font-mono);
    font-size: 0.9rem;
}
body.in-mythos #unlock-overlay .node-status p {
    margin: 0.4em 0;
}
body.in-mythos #unlock-overlay .node-status strong {
    color: var(--my-fg-bright);
    text-shadow: 0 0 8px var(--my-glow);
}
body.in-mythos #unlock-overlay .back-to-terminal {
    border-color: var(--my-fg-dim);
    color: var(--my-fg);
    font-family: inherit;
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 720px) {
    #unlock-overlay .unlock-region {
        padding: 2rem 1rem 3rem;
    }
    #unlock-overlay .unlock-header h1 {
        font-size: 1.3rem;
    }
    body.in-mythos #unlock-overlay .unlock-header h1 {
        font-size: 3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.in-mythos #unlock-overlay .unlock-header h1 {
        animation: none;
    }
}