:root {
    --ink: #183522;
    --ink-soft: #637568;
    --leaf: #2f7c4c;
    --leaf-dark: #174c31;
    --lime: #dff4a8;
    --paper: rgba(255, 255, 250, .96);
    --line: rgba(42, 94, 57, .14);
    --danger: #a64535;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
    margin: 0;
    color: var(--ink);
    font-family: "Be Vietnam Pro", system-ui, sans-serif;
    background: #d8edba;
}
button, input { font: inherit; }
a { color: inherit; }

.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: clamp(18px, 4vw, 54px);
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(14, 58, 34, .24), rgba(14, 58, 34, .06)),
        url("game/assets/farm-valley.png") center / cover no-repeat fixed;
}
.auth-page::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(17, 63, 35, .26), transparent 48%);
}
.auth-shell {
    width: min(1040px, 100%);
    min-height: 610px;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 32px;
    background: rgba(244, 250, 235, .62);
    box-shadow: 0 34px 90px rgba(23, 67, 38, .28);
    backdrop-filter: blur(10px);
}
.auth-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(30px, 5vw, 58px);
    color: white;
    background:
        linear-gradient(145deg, rgba(18, 70, 40, .91), rgba(48, 116, 62, .66)),
        radial-gradient(circle at 70% 15%, rgba(222, 246, 140, .28), transparent 36%);
}
.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: max-content;
    text-decoration: none;
    font-family: "Baloo 2", sans-serif;
    font-size: 1.1rem;
}
.auth-brand span {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--leaf-dark);
    background: #eff7d7;
    font-size: .78rem;
    font-weight: 800;
    transform: rotate(-3deg);
}
.auth-hero-copy { max-width: 520px; margin: auto 0; padding: 48px 0; }
.auth-kicker { color: #dff4a8; font-size: .65rem; font-weight: 800; letter-spacing: .13em; }
.auth-hero h1 { max-width: 520px; margin: 12px 0 12px; font-family: "Baloo 2", sans-serif; font-size: clamp(2.1rem, 4.7vw, 4rem); line-height: .98; }
.auth-hero p { max-width: 470px; margin: 0; color: #d6e8da; font-size: .83rem; line-height: 1.75; }
.auth-feature-row { display: flex; flex-wrap: wrap; gap: 8px; }
.auth-feature-row span, .starter-box span {
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    font-size: .63rem;
    font-weight: 600;
}
.starter-box { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.starter-box strong { width: 100%; margin-bottom: 2px; color: #e9f8b7; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }

.auth-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(32px, 5vw, 62px);
    background: var(--paper);
}
.auth-card-head > span { color: var(--leaf); font-size: .62rem; font-weight: 800; letter-spacing: .12em; }
.auth-card-head h2 { margin: 6px 0 5px; font-family: "Baloo 2", sans-serif; font-size: 2rem; }
.auth-card-head p { margin: 0 0 24px; color: var(--ink-soft); font-size: .72rem; line-height: 1.55; }
.auth-alert { margin-bottom: 15px; padding: 11px 13px; border-radius: 11px; font-size: .67rem; line-height: 1.45; }
.auth-alert--error { color: #8a3429; border: 1px solid #efc5ba; background: #fff0eb; }
.auth-alert--notice { color: #35683d; border: 1px solid #b9d8af; background: #eef8e8; }
.auth-form { display: grid; gap: 14px; }
.auth-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.auth-form label { display: grid; gap: 7px; }
.auth-form label > span { font-size: .68rem; font-weight: 700; }
.auth-form label small { color: var(--ink-soft); font-size: .55rem; }
.auth-form input {
    width: 100%;
    height: 46px;
    padding: 0 13px;
    border: 1px solid #d7e1d3;
    border-radius: 11px;
    color: var(--ink);
    background: #fff;
    outline: none;
    transition: border-color .18s, box-shadow .18s;
}
.auth-form input:focus { border-color: #64a36f; box-shadow: 0 0 0 4px rgba(75, 143, 86, .11); }
.auth-primary {
    min-height: 48px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 17px;
    border: 0;
    border-radius: 12px;
    color: white;
    background: linear-gradient(135deg, #286f46, #174c31);
    box-shadow: 0 9px 22px rgba(29, 87, 50, .2);
    cursor: pointer;
    font-size: .72rem;
    font-weight: 800;
}
.auth-primary:hover { filter: brightness(1.06); }
.auth-primary b { font-size: 1.1rem; }
.auth-switch { margin-top: 19px; color: var(--ink-soft); font-size: .66rem; text-align: center; }
.auth-switch a { color: var(--leaf); font-weight: 800; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }

@media (max-width: 820px) {
    .auth-page { padding: 14px; }
    .auth-shell { width: min(560px, 100%); grid-template-columns: 1fr; border-radius: 24px; }
    .auth-hero { min-height: 270px; padding: 28px; }
    .auth-hero-copy { padding: 38px 0 24px; }
    .auth-hero h1 { font-size: 2.5rem; }
    .auth-card { padding: 30px 26px 34px; }
}

@media (max-width: 520px) {
    .auth-page { display: block; min-height: 100vh; padding: 0; }
    .auth-shell { min-height: 100vh; border: 0; border-radius: 0; }
    .auth-hero { min-height: 225px; padding: 22px; }
    .auth-hero-copy { padding: 28px 0 8px; }
    .auth-hero h1 { margin-top: 7px; font-size: 2.05rem; }
    .auth-hero p { font-size: .7rem; }
    .auth-feature-row, .starter-box { display: none; }
    .auth-card { justify-content: flex-start; padding: 28px 20px 36px; }
    .auth-form-grid { grid-template-columns: 1fr; }
}


/* Admin authentication */
.auth-shell--admin .auth-hero { background: linear-gradient(145deg, rgba(14,49,31,.97), rgba(29,88,53,.82)), radial-gradient(circle at 70% 15%, rgba(222,246,140,.24), transparent 36%); }
.auth-admin-mark { display: inline-flex; width: max-content; padding: 7px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: #e8f7bd; background: rgba(255,255,255,.09); font-size: .61rem; font-weight: 800; letter-spacing: .08em; }
.auth-switch--minor { margin-top: 9px; font-size: .6rem; }
.auth-setup-note { margin: 0 0 17px; padding: 11px 12px; border: 1px solid #d6e7c7; border-radius: 11px; color: #456448; background: #f2f8eb; font-size: .62rem; line-height: 1.55; }