/* ── Soglia dell'eclissi — schermata di accesso ─────────────────────────────
   Ricostruzione fedele del design handoff CLAUDE/design_handoff_login_eclissi
   (pannello 760×600, pixel-art, Press Start 2P + VT323 self-hosted). */

@font-face {
    font-family: 'Press Start 2P';
    font-style: normal; font-weight: 400; font-display: swap;
    src: url('../fonts/press-start-2p-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC;
}
@font-face {
    font-family: 'Press Start 2P';
    font-style: normal; font-weight: 400; font-display: swap;
    src: url('../fonts/press-start-2p-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0;
}
@font-face {
    font-family: 'VT323';
    font-style: normal; font-weight: 400; font-display: swap;
    src: url('../fonts/vt323-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC;
}
@font-face {
    font-family: 'VT323';
    font-style: normal; font-weight: 400; font-display: swap;
    src: url('../fonts/vt323-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0;
}

#lue-login-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #060410;
    display: flex;
    align-items: center;
    justify-content: center;
    image-rendering: pixelated;
    opacity: 1;
    transition: opacity .45s steps(6);
}
#lue-login-overlay.lue-login-out { opacity: 0; pointer-events: none; }

.lue-login-panel {
    width: 760px;
    height: 600px;
    display: flex;
    flex-direction: column;
    background: #080612;
    border: 2px solid #C09820;
    border-radius: 0;
    box-shadow: inset 2px 2px 0 rgba(255,255,255,.06),
                inset -2px -2px 0 rgba(0,0,0,.7),
                6px 6px 0 #000;
}

/* Barra di stato */
.lue-login-topbar {
    height: 52px;
    flex-shrink: 0;
    background: #12101e;
    border-bottom: 2px solid #C09820;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-family: 'VT323', monospace;
    font-size: 16px;
    color: #48b840;
}
.lue-login-topbar.ko { color: #f04828; }

/* Logo */
.lue-login-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 30px 30px 20px;
}
.lue-login-wordmark {
    font-family: 'Press Start 2P', monospace;
    font-size: 22px;
    color: #e8c838;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.35;
    text-shadow: 2px 2px 0 #806800, 4px 4px 0 #503818, 6px 6px 0 #000;
}
.lue-login-sub {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: #908880;
    letter-spacing: .34em;
    margin-top: 12px;
    text-transform: uppercase;
}

/* Divisore */
.lue-login-divider {
    height: 2px;
    flex-shrink: 0;
    background: linear-gradient(90deg, transparent, #C09820, transparent);
    margin: 0 30px 18px;
}

/* Area narrativa + form */
.lue-login-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 6px 30px 26px;
    font-family: 'VT323', monospace;
    font-size: 19px;
    color: #c8c0b0;
    overflow: hidden;
}
.lue-login-location {
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    color: #50a8d8;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.lue-login-muted { color: #809090; }

.lue-login-form {
    margin-top: 26px;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.lue-login-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.lue-login-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    color: #e8c838;
    text-transform: uppercase;
    width: 190px;
    flex-shrink: 0;
}
.lue-login-field {
    flex: 1;
    background: #0a0916;
    border: 1px solid #2a2440;
    border-radius: 0;
    box-shadow: inset 2px 2px 0 rgba(0,0,0,.8), inset -1px -1px 0 rgba(255,255,255,.05);
    font-family: 'VT323', monospace;
    font-size: 22px;
    color: #d8d0c0;
    caret-color: #e8c838;
    padding: 8px 12px;
    outline: none;
}
.lue-login-field:focus { border-color: #c09820; }
.lue-login-field::placeholder { color: #504858; }

.lue-login-linkrow { margin-top: 22px; color: #809090; }
.lue-login-link {
    color: #e8c838;
    text-decoration: none;
    cursor: pointer;
}
.lue-login-link:hover { color: #ffe060; }
.lue-login-blink { color: #e8c838; animation: lueLoginBlink 700ms steps(1) infinite; }
@keyframes lueLoginBlink { 50% { opacity: 0; } }

/* Il popup di distribuzione punti (openBudgetPanel) deve stare SOPRA la
   Forgia: nasce con z-index 9999, l'overlay di login sta a 99999 */
#budget-panel-overlay { z-index: 100001 !important; }

/* Modalità Forgia: il pannello cresce per dare aria a mestieri e statistiche */
.lue-login-panel.lue-forgia-mode {
    width: 860px;
    height: min(88vh, 820px);
    transition: width .25s steps(4), height .25s steps(4);
}
/* logo compattato: lo spazio serve al flusso della creazione */
.lue-forgia-mode .lue-login-logo { padding: 12px 30px 8px; gap: 14px; }
.lue-forgia-mode .lue-login-logo svg { width: 54px; height: 43px; }
.lue-forgia-mode .lue-login-wordmark { font-size: 14px; text-shadow: 2px 2px 0 #806800, 3px 3px 0 #000; }
.lue-forgia-mode .lue-login-sub { font-size: 7px; margin-top: 6px; }

/* Modalità Forgia: mini-terminale della creazione guidata */
.lue-forgia-flow {
    margin-top: 14px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: #0a0916;
    border: 1px solid #2a2440;
    box-shadow: inset 2px 2px 0 rgba(0,0,0,.8), inset -1px -1px 0 rgba(255,255,255,.05);
    padding: 10px 12px;
    font-family: 'VT323', monospace;
    font-size: 19px;
    line-height: 1.35;
    color: #c8c0b0;
}
.lue-forgia-flow::-webkit-scrollbar { width: 8px; }
.lue-forgia-flow::-webkit-scrollbar-thumb { background: #2a2440; }
.lue-forgia-riga { margin-bottom: 6px; }
.lue-forgia-riga .yellow { color: #e8c838; }
.lue-forgia-riga p { margin: 0 0 4px; }

.lue-login-error {
    display: none;
    margin-top: 16px;
    font-family: 'VT323', monospace;
    font-size: 19px;
    color: #f04828;
}

/* Barra pulsanti */
.lue-login-buttons {
    display: flex;
    flex-shrink: 0;
    border-top: 2px solid #C09820;
}
.lue-login-btn {
    flex: 1;
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    text-transform: uppercase;
    padding: 16px;
    border: none;
    border-radius: 0;
    cursor: pointer;
    letter-spacing: .04em;
}
.lue-login-btn.primary   { background: #1a1828; color: #e8c838; }
.lue-login-btn.secondary { background: #0a0916; color: #908880; border-left: 1px solid #C09820; }
.lue-login-btn:hover     { background: #C09820; color: #0e0b1a; }

/* Schermi piccoli: il pannello scala senza rifluire (estetica fissa) */
@media (max-width: 820px), (max-height: 640px) {
    .lue-login-panel { transform: scale(.82); transform-origin: center; }
}
@media (max-width: 660px), (max-height: 520px) {
    .lue-login-panel { transform: scale(.62); }
}