/* screens.css — full-screen layout regions */

/* ── Shared content wrapper ────────────────────────── */
.content {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* ── Start / lobby screen ──────────────────────────── */
.start-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 40px;
}
.logo {
    font-size: 3rem;
    margin-bottom: 10px;
    letter-spacing: 5px;
    animation: logo-glow 2s ease-in-out infinite alternate;
}
.subtitle {
    font-size: 1.5rem;
    color: var(--green-dim);
    margin-bottom: 40px;
}
.start-form {
    width: 100%;
    max-width: 400px;
}

/* ── Game screen ───────────────────────────────────── */
#game-screen {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--green-dim);
    margin-bottom: 15px;
    flex-shrink: 0;
}
.game-title { font-size: 1.5rem; text-shadow: 0 0 10px var(--green-glow); letter-spacing: 3px; }
.status               { font-size: 1rem; color: var(--green-dim); }
.status.connected     { color: var(--green); }
.status.error         { color: var(--red); }

.game-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    position: relative;
}

/* ── Output log ────────────────────────────────────── */
.output {
    flex: 1 1 0;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-right: 10px;
    padding-left: 5px;
    margin-bottom: 15px;
    min-height: 0;
    max-height: 100%;
    position: relative;
}
.message {
    margin-bottom: 20px;
    line-height: 1.6;
    font-size: 1.25rem;
    animation: fade-up 0.3s ease-out;
}
.message.system  { color: var(--amber); font-style: italic; }
.message.error   { color: var(--red); }
.message.command { color: #888; }
.narrative       { white-space: pre-wrap; }

/* ── Processing overlay ────────────────────────────── */
.processing-overlay {
    position: absolute; inset: 0;
    background: rgba(5, 8, 8, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.processing-overlay.active { opacity: 1; visibility: visible; }
.processing-text {
    margin-top: 20px;
    font-size: 1.5rem;
    color: var(--green);
    text-shadow: 0 0 10px var(--green-glow);
    letter-spacing: 3px;
    animation: pulse 1.5s ease-in-out infinite;
}
.processing-subtext { margin-top: 10px; font-size: 1rem; color: var(--green-dim); }

/* ── Connection-error overlay ──────────────────────── */
.error-overlay {
    position: absolute; inset: 0;
    background: rgba(5, 8, 8, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 40px;
    text-align: center;
}
.error-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    animation: glitch-icon 2s infinite;
}
.error-title {
    font-size: 2rem;
    color: var(--red);
    text-shadow: 0 0 10px rgba(255,51,51,0.5);
    margin-bottom: 15px;
    letter-spacing: 3px;
}
.error-message {
    font-size: 1.2rem;
    color: var(--amber);
    margin-bottom: 30px;
    max-width: 500px;
    line-height: 1.6;
}
.error-details {
    font-size: 1rem;
    color: var(--green-dim);
    margin-bottom: 30px;
    font-family: var(--font-mono);
    background: rgba(0,255,65,0.05);
    padding: 15px 20px;
    border: 1px solid var(--green-dim);
    max-width: 500px;
}