@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&family=Cinzel:wght@400;700&family=Crimson+Pro:ital,wght@0,400;1,400&display=swap');

/* Camelot Rising color palette */
:root {
    --night-slate:    #1E1B2E;
    --royal-purple:   #4A1C6E;
    --deep-crimson:   #7C1C2E;
    --burnished-gold: #B8860B;
    --pale-gold:      #E8C96A;
    --silver-mist:    #C0C8D8;
    --parchment:      #F5ECD7;
    --castle-stone:   #8B8B7A;
}

/* Base */
body {
    background-color: var(--night-slate);
    color: var(--parchment);
    font-family: 'Crimson Pro', serif;
    margin: 0;
    padding: 0;
}

/* Site wordmark */
h1 {
    font-family: 'Cinzel Decorative', serif;
    color: var(--pale-gold);
    text-align: center;
    font-size: 2.5rem;
    letter-spacing: 0.15em;
    margin: 2.5rem 0 1rem;
}

/* Navigation menu — vertical centered layout */
nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

/* Menu links styled as primary buttons */
nav a {
    display: block;
    background-color: var(--royal-purple);
    color: var(--pale-gold);
    border: 2px solid var(--burnished-gold);
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-decoration: none;
    padding: 0.75rem 2.5rem;
    border-radius: 3px;
    margin: 0;
    transition: border-color 0.15s, color 0.15s;
}

nav a:hover {
    border-color: var(--pale-gold);
    color: var(--pale-gold);
}

/* ─── Forms (login + signup) ─────────────────────────────────────────────── */

form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 360px;
    margin: 2rem auto 0;
    gap: 0.5rem;
}

label {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--pale-gold);
    margin-top: 0.75rem;
}

input {
    background-color: var(--night-slate);
    color: var(--parchment);
    border: 2px solid var(--burnished-gold);
    border-radius: 3px;
    font-family: 'Crimson Pro', serif;
    font-size: 1rem;
    padding: 0.6rem 0.75rem;
    outline: none;
    transition: border-color 0.15s;
}

input:focus {
    border-color: var(--pale-gold);
}

button[type=submit] {
    background-color: var(--royal-purple);
    color: var(--pale-gold);
    border: 2px solid var(--burnished-gold);
    border-radius: 3px;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 0.75rem;
    margin-top: 1.25rem;
    cursor: pointer;
    transition: border-color 0.15s;
}

button[type=submit]:hover {
    border-color: var(--pale-gold);
}

/* ─── Games list (dynamically built by games.js) ─────────────────────────── */

ul#games-list {
    list-style: none;
    padding: 0;
    margin: 2rem auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.load-game-btn {
    background-color: var(--royal-purple);
    color: var(--pale-gold);
    border: 2px solid var(--burnished-gold);
    border-radius: 3px;
    font-family: 'Cinzel', serif;
    padding: 0.75rem 3rem;
    cursor: pointer;
    transition: border-color 0.15s;
    min-width: 260px;
}

.load-game-btn:hover {
    border-color: var(--pale-gold);
}

.load-game-btn h2 {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--pale-gold);
    margin: 0;
    padding: 0;
}