@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&family=VT323&display=swap');

/* ── Scope: join/auth page only ──────────────────────────────────────────── */

body.auth.join {
    --bg:         #0e160a;
    --bg-card:    #16220e;
    --bg-inset:   #0a1008;
    --border:     #3d5c28;
    --border-dim: #253818;
    --gold:       #d4c040;
    --text:       #d8d4b0;
    --text-dim:   #7a9868;

    background-color: var(--bg) !important;
    background-image: radial-gradient(circle, #182614 1px, transparent 1px) !important;
    background-size: 8px 8px !important;
    font-family: 'VT323', monospace !important;
    color: var(--text) !important;
}

/* ── Collapse grid to single column, center the login card ───────────────── */
body.auth.join #join-game {
    grid-template-columns: 1fr !important;
    max-width: 420px !important;
}

/* Hide session details and world description */
body.auth.join #join-game-details,
body.auth.join #join-game-world {
    display: none !important;
}

/* Title */
body.auth.join #main-header h1 {
    font-family: 'Silkscreen', monospace !important;
    color: var(--gold) !important;
    text-shadow: 2px 2px 0 #000, 0 0 12px #3d5c28 !important;
    letter-spacing: 0.04em;
}

/* Login card */
body.auth.join .application.framed {
    background: var(--bg-card) !important;
    border: 2px solid var(--border) !important;
    box-shadow: 4px 4px 0 #000 !important;
    border-radius: 0 !important;
}

body.auth.join .application.framed h2 {
    display: none !important;
}

/* Inputs */
body.auth.join input[type="text"],
body.auth.join input[type="password"],
body.auth.join select {
    background: var(--bg-inset) !important;
    border: 2px solid var(--border) !important;
    border-radius: 0 !important;
    color: var(--text) !important;
    font-family: 'VT323', monospace !important;
    font-size: 1.2rem !important;
    box-shadow: inset 1px 1px 0 #000 !important;
    outline: none;
}

body.auth.join input:focus,
body.auth.join select:focus {
    border-color: var(--gold) !important;
    box-shadow: inset 1px 1px 0 #000, 0 0 0 1px var(--gold) !important;
}

body.auth.join label,
body.auth.join .form-group label {
    font-family: 'Silkscreen', monospace !important;
    font-size: 0.65rem !important;
    color: var(--text-dim) !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Buttons */
body.auth.join button,
body.auth.join [type="submit"] {
    background: var(--bg-card) !important;
    border: 2px solid var(--border) !important;
    border-radius: 0 !important;
    color: var(--gold) !important;
    font-family: 'Silkscreen', monospace !important;
    font-size: 0.7rem !important;
    text-shadow: 1px 1px 0 #000 !important;
    box-shadow: 3px 3px 0 #000 !important;
    cursor: pointer;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: none !important;
}

body.auth.join button:hover,
body.auth.join [type="submit"]:hover {
    background: #1e3014 !important;
    box-shadow: 1px 1px 0 #000 !important;
    transform: translate(2px, 2px) !important;
    color: var(--gold) !important;
}

/* ── Return to Setup — slim button directly below the login card ─────────── */
body.auth.join #join-game-setup {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-top: -0.5rem !important;
}

body.auth.join #join-game-setup h2 {
    display: none !important;
}

body.auth.join #join-game-setup .hint {
    display: none !important;
}

body.auth.join #join-game-setup .form-group {
    margin: 0 0 0.25rem 0 !important;
    gap: 0.3rem !important;
}

body.auth.join #join-game-setup input[type="password"] {
    background: transparent !important;
    border: 1px solid var(--border-dim) !important;
    box-shadow: none !important;
    font-size: 1rem !important;
    color: var(--text-dim) !important;
    padding: 0.1rem 0.4rem !important;
    height: 1.8rem !important;
}

body.auth.join #join-game-setup input[type="password"]:focus {
    border-color: var(--border) !important;
    box-shadow: none !important;
}

body.auth.join #join-game-setup label {
    color: #1e3014 !important;
}

body.auth.join #join-game-setup .form-footer {
    padding-top: 0 !important;
    border-top: none !important;
    margin: 0 !important;
}

body.auth.join #join-game-setup button {
    background: transparent !important;
    border: 1px solid var(--border-dim) !important;
    box-shadow: none !important;
    color: var(--text-dim) !important;
    font-size: 0.58rem !important;
    width: 100% !important;
    padding: 0.25rem 0 !important;
}

body.auth.join #join-game-setup button:hover {
    border-color: var(--border) !important;
    color: var(--gold) !important;
    background: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Version watermark */
body.auth.join #watermark #software-version {
    font-family: 'Silkscreen', monospace !important;
    color: var(--text-dim) !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.08em;
    text-shadow: 1px 1px 0 #000 !important;
    filter: none !important;
}

/* Select dropdown options */
body.auth.join select option {
    background: var(--bg-inset);
    color: var(--text);
}

/* Hide Foundry logo */
body.auth.join #main-header {
    background: none !important;
}