/* ================================================================
   KINGSPAWN — Auth Overlay Styles
   Hängt von Cinzel + Rajdhani (bereits in index.html geladen) ab.
   Ergänzt public/style.css, überschreibt nichts.
   ================================================================ */

/* ── OVERLAY ──────────────────────────────────────────────────── */
#auth-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999; /* Über allem anderen */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #080808;
    padding: 1.5rem;
    overflow-y: auto;
    transition: opacity 0.4s ease;
}

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

#auth-overlay.auth-fade-out {
    opacity: 0;
    pointer-events: none;
}

/* ── SCHACHBRETT-HINTERGRUND ─────────────────────────────────── */
.auth-board-bg {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    opacity: 0.04;
    pointer-events: none;
}

.auth-board-bg .sq-light { background: #c8a45a; }
.auth-board-bg .sq-dark  { background: #1a1410; }

/* Radial-Vignette über dem Schachbrett */
.auth-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 75% 75% at 50% 50%,
        transparent 20%, #080808 100%);
    pointer-events: none;
}

/* Roter Glüh-Spot */
.auth-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle,
        rgba(180, 30, 30, 0.14) 0%, transparent 70%);
    pointer-events: none;
    animation: authGlowPulse 4s ease-in-out infinite;
}

@keyframes authGlowPulse {
    0%, 100% { opacity: 0.8; }
    50%       { opacity: 1; }
}

/* ── HAUPT-CONTAINER ─────────────────────────────────────────── */
.auth-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 0;
    animation: authSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes authSlideUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── BRANDING ────────────────────────────────────────────────── */
.auth-brand {
    text-align: center;
    padding-bottom: 2rem;
    animation: authSlideUp 0.4s 0.05s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.auth-brand-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 0.75rem;
    filter: drop-shadow(0 0 12px rgba(212, 167, 55, 0.5));
}

.auth-brand-title {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 0.22em;
    color: #d4a737;
    text-shadow: 0 0 20px rgba(212, 167, 55, 0.3);
    margin: 0;
    line-height: 1;
}

.auth-brand-sub {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.5em;
    color: #4a4038;
    text-transform: uppercase;
    margin-top: 0.5rem;
}

/* ── CARD ────────────────────────────────────────────────────── */
.auth-card {
    background: linear-gradient(160deg, #151210 0%, #0d0b09 100%);
    border: 1px solid #221e18;
    box-shadow:
        0 0 0 1px rgba(212, 167, 55, 0.06),
        0 32px 80px rgba(0, 0, 0, 0.85),
        inset 0 1px 0 rgba(212, 167, 55, 0.05);
    padding: 0 0 1.8rem;
    position: relative;
    overflow: hidden;
}

/* Gold-Linie oben */
.auth-card::before {
    content: '';
    position: absolute;
    top: 0; left: 8%; right: 8%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent, rgba(212, 167, 55, 0.5), transparent);
}

/* ── TABS ────────────────────────────────────────────────────── */
.auth-tabs {
    display: flex;
    border-bottom: 1px solid #221e18;
    margin-bottom: 1.8rem;
}

.auth-tab {
    flex: 1;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: #4a4038;
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    padding: 1rem 0.5rem;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.auth-tab.active {
    color: #d4a737;
    border-bottom-color: #d4a737;
}

.auth-tab:hover:not(.active) {
    color: #8a7a60;
}

/* ── PANELS ──────────────────────────────────────────────────── */
.auth-panel {
    padding: 0 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.auth-panel.hidden {
    display: none;
}

/* ── FELDER ──────────────────────────────────────────────────── */
.auth-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.auth-label {
    font-family: 'Cinzel', serif;
    font-size: 0.58rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: #4a4038;
}

.auth-input {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid #221e18;
    color: #dee3e6;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.6rem 0.85rem;
    outline: none;
    width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s;
    caret-color: #d4a737;
    letter-spacing: 0.02em;
}

.auth-input:focus {
    border-color: rgba(212, 167, 55, 0.35);
    box-shadow:
        0 0 0 2px rgba(212, 167, 55, 0.07),
        inset 0 0 12px rgba(212, 167, 55, 0.025);
}

.auth-input::placeholder {
    color: #2e2820;
    opacity: 1;
}

/* ── PASSWORT-STÄRKE ─────────────────────────────────────────── */
.auth-strength {
    margin-top: -0.3rem;
}

.auth-strength-bar {
    height: 2px;
    background: #1a1612;
    border-radius: 1px;
    overflow: hidden;
}

.auth-strength-fill {
    height: 100%;
    width: 0;
    background: #3a3028;
    border-radius: 1px;
    transition: width 0.3s ease, background 0.3s ease;
}

.auth-strength-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: #3a3028;
    margin-top: 0.25rem;
    min-height: 1em;
    transition: color 0.3s;
}

/* ── VERGESSEN-LINK ──────────────────────────────────────────── */
.auth-forgot {
    text-align: right;
    margin-top: -0.5rem;
}

.auth-forgot a {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: #4a4038;
    text-decoration: none;
    transition: color 0.2s;
}

.auth-forgot a:hover {
    color: #d4a737;
}

/* ── STATUS-MELDUNG ──────────────────────────────────────────── */
.auth-status {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    min-height: 1.2em;
    text-align: center;
    color: transparent;
    transition: color 0.2s;
}

.auth-status.error { color: #cc4444; }
.auth-status.ok    { color: #5aaa60; }

/* ── BUTTONS ─────────────────────────────────────────────────── */
.auth-btn-primary {
    width: 100%;
    background: linear-gradient(170deg, #8b1a1a 0%, #5a0f0f 100%);
    border: 1px solid rgba(180, 40, 40, 0.45);
    color: #f0d0c0;
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    padding: 0.85rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: filter 0.2s, transform 0.1s;
}

.auth-btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        170deg,
        rgba(255, 255, 255, 0.07) 0%,
        transparent 55%
    );
}

.auth-btn-primary:hover:not(:disabled) {
    filter: brightness(1.25);
}

.auth-btn-primary:active:not(:disabled) {
    transform: scale(0.98);
}

.auth-btn-primary:disabled {
    opacity: 0.4;
    cursor: default;
}

/* ── SPINNER ─────────────────────────────────────────────────── */
.auth-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(240, 208, 192, 0.25);
    border-top-color: #f0d0c0;
    border-radius: 50%;
    animation: authSpin 0.65s linear infinite;
    vertical-align: middle;
    margin-left: 0.45rem;
}

@keyframes authSpin {
    to { transform: rotate(360deg); }
}

/* ── TRENNLINIE ──────────────────────────────────────────────── */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #2e2820;
    font-family: 'Cinzel', serif;
    font-size: 0.55rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin: 0.2rem 0;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #1c1814;
}

/* ── GAST-BUTTON ─────────────────────────────────────────────── */
.auth-guest-section {
    padding: 1.4rem 1.8rem 0;
}

.auth-guest-btn {
    width: 100%;
    background: transparent;
    border: 1px solid #1c1814;
    color: #4a4038;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.75rem;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

.auth-guest-btn:hover:not(:disabled) {
    border-color: rgba(212, 167, 55, 0.25);
    color: #8a7a60;
}

.auth-guest-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

/* ── KEIN-RATING HINWEIS ─────────────────────────────────────── */
.auth-guest-hint {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    color: #2e2820;
    text-align: center;
    margin-top: 0.5rem;
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-height: 640px) {
    .auth-brand {
        padding-bottom: 1rem;
    }

    .auth-brand-icon {
        width: 36px;
        height: 36px;
        margin-bottom: 0.4rem;
    }

    .auth-brand-title {
        font-size: 1.5rem;
    }
}
/* ── WILLKOMMEN-ZURÜCK PANEL ─────────────────────────────────── */
.auth-panel-welcomeback {
    padding: 2rem 1.8rem 1.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    text-align: center;
    animation: authSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.wb-greeting {
    font-family: 'Cinzel', serif;
    font-size: 0.6rem;
    letter-spacing: 0.45em;
    color: #4a4038;
    text-transform: uppercase;
}

.wb-name {
    font-family: 'Cinzel', serif;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #d4a737;
    text-shadow: 0 0 24px rgba(212, 167, 55, 0.35);
    text-transform: uppercase;
    line-height: 1.2;
}

/* ── BUTTONS ─────────────────────────────────────────────────── */
.wb-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    margin-top: 0.4rem;
}

.wb-btn {
    width: 100%;
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    padding: 0.85rem;
    cursor: pointer;
    border: none;
    position: relative;
    overflow: hidden;
    transition: filter 0.2s, transform 0.1s;
}

.wb-btn:active { transform: scale(0.98); }

/* WEITER — primär, rot */
.wb-btn-primary {
    background: linear-gradient(170deg, #8b1a1a 0%, #550e0e 100%);
    border: 1px solid rgba(160, 36, 28, 0.5);
    color: #f0d0c0;
}

.wb-btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(170deg, rgba(255,255,255,0.07) 0%, transparent 55%);
    pointer-events: none;
}

.wb-btn-primary:hover { filter: brightness(1.2); }

/* ABMELDEN — sekundär, dezent */
.wb-btn-secondary {
    background: transparent;
    border: 1px solid #221e18;
    color: #4a4038;
    transition: border-color 0.2s, color 0.2s;
}

.wb-btn-secondary:hover {
    border-color: rgba(212, 167, 55, 0.25);
    color: #8a7a60;
}