/**
 * Login / Register: game-launcher layout in the site's dark grey tone
 * Grey panel docked on the left, the admin-set background image shown on the right.
 *
 * Selectors are prefixed with .auth-page so they outrank each page's own <style>
 * without !important. Input borders and icon colors deliberately avoid !important:
 * register.php sets them inline from JS to show valid / invalid states.
 */

.auth-page {
    --auth-panel-w: 400px;
}

/* ========== Left panel ========== */

.auth-page .tf-login-container,
.auth-page .tf-reg-container {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--auth-panel-w);
    max-width: 100%;
    padding: 36px 32px 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    z-index: 5;
    background:
        radial-gradient(ellipse 120% 35% at 0% 0%, rgba(220, 38, 38, 0.12), transparent 70%),
        linear-gradient(180deg, rgba(18, 21, 25, 0.96) 0%, rgba(13, 15, 19, 0.98) 100%);
    /* No backdrop-filter here: it would trap the position: fixed logo inside the panel */
    border-right: 1px solid rgba(220, 38, 38, 0.25);
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.03), 20px 0 60px rgba(0, 0, 0, 0.6);
}

/* Red-to-gold accent bar across the top of the panel */
.auth-page .tf-login-container::before,
.auth-page .tf-reg-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--vg-accent), var(--vg-gold));
}

.auth-page .tf-back-home {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 6px 0;
    font-size: 13px;
    color: var(--vg-muted);
    text-decoration: none;
    transition: color 0.12s ease, gap 0.12s ease;
}

.auth-page .tf-back-home i { font-size: 11px; }
.auth-page .tf-back-home:hover { color: #fff; gap: 10px; }

/* Logo sits on the artwork on the right, top-centre, not in the panel */
.auth-page .tf-logo-container {
    position: fixed;
    top: 28px;
    left: var(--auth-panel-w);
    right: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.auth-page .tf-logo-container a { pointer-events: auto; }

.auth-page .tf-logo-container img {
    height: 110px;
    max-width: 60vw;
    object-fit: contain;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 22px rgba(220, 38, 38, 0.35));
    animation: auth-logo-float 6s ease-in-out infinite;
}

@keyframes auth-logo-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
    .auth-page .tf-logo-container img { animation: none; }
}

/* With the logo gone, centre the form vertically (the footer keeps margin-top: auto) */
.auth-page .tf-form-area { margin-top: auto; }

/* The form sits directly on the panel (no inner card) */
.auth-page .tf-form-area {
    max-width: none;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

.auth-page .tf-welcome,
.auth-page .tf-reg-header {
    margin-bottom: 26px;
    text-align: left;
}

/* Small label above the title */
.auth-page .tf-welcome::before,
.auth-page .tf-reg-header::before {
    display: block;
    margin-bottom: 8px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--vg-accent-hi);
}

.auth-page .tf-welcome::before { content: 'MEMBER LOGIN'; }
.auth-page .tf-reg-header::before { content: 'CREATE ACCOUNT'; }

.auth-page .tf-welcome h2,
.auth-page .tf-reg-header h2 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #fff;
}

.auth-page .tf-welcome p,
.auth-page .tf-reg-header p { margin-top: 6px; font-size: 13.5px; }

.auth-page .tf-welcome h2 span { color: var(--vg-accent); font-weight: 700; }
.auth-page .tf-welcome p,
.auth-page .tf-reg-header p { color: var(--vg-muted); }

/* ========== Inputs ========== */

.auth-page .tf-field-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--vg-muted);
}

.auth-page .tf-input-group { margin-bottom: 16px; }

.auth-page .tf-input-wrap {
    background: var(--vg-bg);
    border: 1px solid var(--vg-border-strong);
    border-radius: var(--vg-radius-sm);
    box-shadow: none;
}

.auth-page .tf-input-wrap:focus-within {
    background: var(--vg-bg);
    border-color: var(--vg-accent-line);
    box-shadow: 0 0 0 3px var(--vg-accent-soft);
}

.auth-page .tf-input-wrap input { color: var(--vg-text); padding-top: 13px; padding-bottom: 13px; }
.auth-page .tf-input-wrap input::placeholder { color: var(--vg-faint); }

/* Chrome autofill paints inputs light blue; keep them dark */
.auth-page .tf-input-wrap input:-webkit-autofill,
.auth-page .tf-input-wrap input:-webkit-autofill:hover,
.auth-page .tf-input-wrap input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--vg-bg) inset;
    -webkit-text-fill-color: var(--vg-text);
    caret-color: var(--vg-text);
    transition: background-color 9999s ease-out;
}

.auth-page .tf-input-wrap .tf-icon { color: var(--vg-faint); }
.auth-page .tf-input-wrap:focus-within .tf-icon { color: var(--vg-muted); }

/* login.php hard-codes the orange icon color inline */
.auth-page .tf-icon[style*="255, 68, 0"] { color: var(--vg-faint) !important; }

.auth-page input[type="checkbox"] { accent-color: var(--vg-accent) !important; }
.auth-page .tf-remember,
.auth-page .tf-forgot { color: var(--vg-muted) !important; }
.auth-page .tf-forgot:hover { color: #fff !important; }

/* ========== Buttons ========== */

.auth-page .tf-login-btn,
.auth-page .tf-btn-next,
.auth-page .tf-register-btn,
.auth-page .tf-alt-btn,
.auth-page .tf-btn-back {
    display: block;
    width: 100%;
    padding: 12px;
    border-radius: var(--vg-radius-sm);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    transform: none;
    filter: none;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

/* Main action: red with a soft top highlight; lifts a little on hover */
.auth-page .tf-login-btn,
.auth-page .tf-btn-next,
.auth-page .tf-register-btn {
    color: var(--vg-on-accent);
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
    border: 1px solid #dc2626;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 16px rgba(220, 38, 38, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.auth-page .tf-login-btn:hover,
.auth-page .tf-btn-next:hover,
.auth-page .tf-register-btn:hover {
    border-color: #ef4444;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 24px rgba(220, 38, 38, 0.38);
    transform: translateY(-1px);
    filter: brightness(1.06);
}

.auth-page .tf-login-btn:active,
.auth-page .tf-btn-next:active,
.auth-page .tf-register-btn:active { transform: translateY(0); }

/* Secondary action: grey */
.auth-page .tf-alt-btn,
.auth-page .tf-btn-back {
    color: var(--vg-text);
    background: var(--vg-surface-2);
    border: 1px solid var(--vg-border-strong);
}

.auth-page .tf-alt-btn:hover,
.auth-page .tf-btn-back:hover {
    color: #fff;
    background: var(--vg-surface-3);
    transform: none;
}

.auth-page .tf-login-btn { margin: 22px 0 0; }
/* "No account yet?" as a divider between the two buttons */
.auth-page .tf-register-link {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 14px !important;
    color: var(--vg-faint) !important;
    font-size: 12.5px !important;
    white-space: nowrap;
}

.auth-page .tf-register-link::before,
.auth-page .tf-register-link::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--vg-border-strong);
}

/* ========== Register steps ========== */

.auth-page .tf-progress-bar { background: var(--vg-surface-3); }
.auth-page .tf-progress-fill { background: var(--vg-accent); box-shadow: none; }
.auth-page .tf-step-text { color: var(--vg-faint); }

.auth-page .tf-terms { color: var(--vg-muted); }
.auth-page .tf-terms a { color: var(--vg-gold); }
.auth-page .tf-terms a:hover { border-bottom-color: var(--vg-gold); }

.auth-page .tf-pass-requirements li { color: var(--vg-faint); }
.auth-page .tf-pass-requirements li.valid,
.auth-page .tf-pass-requirements li.valid i { color: var(--vg-success); }

.auth-page .tf-field-error { color: var(--vg-danger); }

.auth-page .tf-confirm-box {
    background: var(--vg-surface-2);
    border: 1px solid var(--vg-border);
    border-radius: var(--vg-radius);
}

.auth-page .tf-confirm-box i { color: var(--vg-gold); filter: none; }
.auth-page .tf-confirm-box p { color: var(--vg-muted); }
.auth-page .tf-confirm-box .tf-email-display { color: var(--vg-gold); }

/* ========== Links and footer ========== */

.auth-page .tf-login-link { color: var(--vg-muted); margin: 20px 0; }
.auth-page .tf-login-link a,
.auth-page a[style*="#ff4400"] { color: var(--vg-accent-hi) !important; }

.auth-page .tf-footer {
    margin-top: auto;
    padding: 20px 0 0;
    color: var(--vg-faint);
    font-size: 12px;
    border-top: none;
}

.auth-page .tf-footer .tf-copyright { color: var(--vg-faint); }
.auth-page .tf-footer .tf-links a { color: var(--vg-muted); }

/* ========== Right-side showcase: event slider + server status ========== */

.auth-showcase {
    position: fixed;
    top: 32px;
    bottom: 32px;
    left: var(--auth-panel-w);
    right: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 48px;
}

/* Slider width follows the free height so slider + cards always fit the screen */
.auth-showcase-inner {
    width: min(820px, 100%, calc((100vh - 180px) * 16 / 9));
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.auth-showcase .lp-slider {
    width: 100%;
    border-color: var(--vg-border-strong);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
}

.auth-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.auth-stat {
    padding: 12px 16px;
    background: rgba(18, 21, 25, 0.88);
    border: 1px solid var(--vg-border-strong);
    border-radius: var(--vg-radius);
}

.auth-stat-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--vg-muted);
}

.auth-stat-label i { font-size: 11px; color: var(--vg-faint); }

.auth-stat-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.auth-stat-value {
    margin-top: 4px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
}

/* Not enough room beside the panel: keep only the form */
@media (max-width: 900px), (max-height: 520px) {
    .auth-showcase { display: none; }
}

/* With the showcase visible, the right-side logo is not shown */
@media (min-width: 901px) and (min-height: 521px) {
    .auth-page .tf-logo-container { display: none; }
}

/* ========== "Registration closed" notice (inline-styled in register.php) ========== */

.auth-page div[style*="rgba(255,68,0,0.1)"] {
    background: var(--vg-surface) !important;
    border: 1px solid var(--vg-border) !important;
    border-radius: var(--vg-radius) !important;
    backdrop-filter: none !important;
}

.auth-page div[style*="min-height: 100vh"][style*="rgba(0,0,0,0.8)"] { background: transparent !important; }
.auth-page i[style*="#ff4400"] { color: var(--vg-accent) !important; }
.auth-page a[style*="background: #ff4400"] {
    background: var(--vg-accent) !important;
    color: var(--vg-on-accent) !important;
    border-radius: var(--vg-radius-sm) !important;
    box-shadow: none !important;
}

/* ========== Phones: the panel takes the whole screen ========== */

@media (max-width: 640px) {
    .auth-page .tf-login-container,
    .auth-page .tf-reg-container {
        position: relative;
        width: 100%;
        min-height: 100vh;
        padding: 28px 20px 16px;
        border-right: none;
        box-shadow: none;
        background: rgba(18, 21, 25, 0.96);
    }

    /* Phones have no right side: the logo goes back above the form */
    .auth-page .tf-logo-container {
        position: static;
        margin-bottom: 18px;
        pointer-events: auto;
    }

    .auth-page .tf-logo-container img { height: 80px; max-width: 100%; animation: none; }
    .auth-page .tf-welcome,
    .auth-page .tf-reg-header { text-align: center; }
    .auth-page .tf-back-home { margin-bottom: 8px; }
}