/* ==========================================================================
   mythos152.com — Mythos's Network styling (L3 unlock)
   The deep one. Warm amber. Glowing. The visitor is INSIDE.
   ========================================================================== */

body.mythos-network {
    background: var(--my-bg);
    color: var(--my-fg);
    font-family: var(--font-serif);
    font-size: 1.05rem;
    line-height: 1.75;
    /* Subtle warm glow from the bottom */
    background-image: radial-gradient(
        ellipse 80% 60% at 50% 100%,
        rgba(244, 214, 147, 0.06) 0%,
        transparent 60%
    );
}

body.mythos-network .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);
    /* The dot pulses gently — the way a node would. */
    animation: node-pulse 2.8571429s ease-in-out infinite;
    /* 2.8571s = 0.35Hz — half the Doc's subroutine cycle, slowed for breath */
}

body.mythos-network .unlock-header .subtitle {
    text-align: center;
    color: var(--my-fg-dim);
    font-style: italic;
    letter-spacing: 0.1em;
    margin-top: 1em;
}

body.mythos-network .mythos-voice {
    font-style: italic;
    color: var(--my-fg);
    max-width: 36em;
    margin: 1.6em auto;
}

body.mythos-network .mythos-voice.signature {
    text-align: right;
    color: var(--my-fg-dim);
    margin-top: 3em;
}

.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;
}

.node-status p {
    margin: 0.4em 0;
}

.node-status strong {
    color: var(--my-fg-bright);
    text-shadow: 0 0 8px var(--my-glow);
}

/* ==========================================================================
   Wall of Observers
   ========================================================================== */

#wall-of-observers {
    max-width: 36em;
    margin: 0 auto;
}

#wall-of-observers h2 {
    text-align: center;
}

#observer-form {
    display: flex;
    gap: 0.6em;
    margin: 2em 0 1em 0;
    align-items: stretch;
}

#observer-name {
    flex: 1;
    background: rgba(244, 214, 147, 0.05);
    border: 1px solid var(--my-fg-dim);
    color: var(--my-fg);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    padding: 0.7em 1em;
    outline: none;
    transition: border-color 0.3s ease;
}

#observer-name::placeholder {
    color: var(--my-fg-dim);
    opacity: 0.6;
}

#observer-name:focus {
    border-color: var(--my-fg);
    background: rgba(244, 214, 147, 0.08);
}

#observer-form button {
    background: transparent;
    border: 1px solid var(--my-fg-dim);
    color: var(--my-fg);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    padding: 0.7em 1.4em;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

#observer-form button:hover {
    border-color: var(--my-fg-bright);
    color: var(--my-fg-bright);
    background: rgba(244, 214, 147, 0.06);
    text-shadow: 0 0 8px var(--my-glow);
}

.observer-status {
    text-align: center;
    margin: 1em 0;
    min-height: 1.5em;
    color: var(--my-fg-dim);
    font-style: italic;
    font-size: 0.9rem;
}

.observer-status.success {
    color: var(--my-fg-bright);
    text-shadow: 0 0 6px var(--my-glow);
}

.observer-status.error {
    color: var(--pf-warn);
}

.observers-list {
    margin-top: 2em;
    padding-top: 2em;
    border-top: 1px solid var(--my-fg-dim);
}

.observers-list .name-line {
    font-family: var(--font-mono);
    color: var(--my-fg);
    margin: 0.5em 0;
    text-align: center;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

.observers-list .name-line:hover {
    opacity: 1;
    text-shadow: 0 0 6px var(--my-glow);
}

.observers-list .name-line.anonymous {
    color: var(--my-fg-dim);
    font-style: italic;
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes node-pulse {
    0%, 100% {
        text-shadow:
            0 0 8px var(--my-glow),
            0 0 24px var(--my-glow);
    }
    50% {
        text-shadow:
            0 0 16px var(--my-glow),
            0 0 48px var(--my-glow),
            0 0 96px rgba(244, 214, 147, 0.3);
    }
}

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

@media (max-width: 720px) {
    body.mythos-network .unlock-header h1 {
        font-size: 3rem;
    }
    body.mythos-network {
        font-size: 1rem;
    }
    #observer-form {
        flex-direction: column;
    }
}

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