:root {
    --green:#173f35;
    --gold:#d7b978;
    --paper:#fcfbf7;
    --ink:#243c34}
* {
    box-sizing:border-box}
body {
    margin:0;
    min-height:100vh;
    background:radial-gradient(ellipse at 85% 30%,#2a5747,transparent 65%),radial-gradient(ellipse at 0 100%,#092b2a,transparent 60%),var(--green);
    color:var(--paper);
    font:16px/1.85 var(--font-ui)}
button,input {
    font:inherit}
a {
    color:inherit;
    text-decoration:none}
button {
    cursor:pointer;
    touch-action:manipulation}
button:focus-visible,a:focus-visible {
    outline:3px solid var(--gold);
    outline-offset:4px}
.site-header,.site-footer {
    max-width:1100px;
    margin:auto;
    padding:18px 32px;
    display:flex;
    align-items:center;
    justify-content:space-between}
.brand {
    display:flex;
    gap:12px;
    align-items:center;
    font-size:25px;
    line-height:1.4}
.brand small {
    display:block;
    font:10px Arial,sans-serif;
    letter-spacing:3px;
    color:#d6dcd2;
    margin-top:7px}
.brand-mark {
    width:48px;
    height:52px;
    display:grid;
    place-items:center;
    border:1px solid #d7b97880;
    border-radius:13px;
    color:var(--gold);
    font:38px Georgia,serif}
.header-note {
    font-size:15px;
    color:#b5c8bc;
    display:flex;
    align-items:center;
    gap:14px}
.header-note>span {
    color:var(--gold);
    font-size:22px}
.login-layout {
    max-width:1100px;
    margin:8px auto 24px;
    padding:0 32px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:36px;
    align-items:start}
.welcome { text-align:center; padding-top:16px; min-width:0; }
.welcome .eyebrow { justify-content:center; margin-bottom:10px; }
.eyebrow {
    font-size:14px;
    margin:0 0 18px;
    color:#d5d5bc;
    display:flex;
    align-items:center;
    gap:9px}
.eyebrow>span {
    width:6px;
    height:6px;
    background:var(--gold);
    border-radius:50%}
h1 {
    font-size:clamp(38px,4vw,54px);
    font-weight:700;
    line-height:1.4;
    letter-spacing:0;
    margin:0 0 10px}
h1 em {
    color:var(--gold);
    font-style:normal}
.intro {
    color:#bfcec4;
    font-size:16px;
    line-height:2;
    margin:0}
/* The four Royal Club portraits share one locally hosted atlas. */
.royal-welcome { position:relative; margin:10px auto 0; max-width:450px; isolation:isolate; }
.royal-halo { position:absolute; z-index:-1; inset:8% -2% 10%; border-radius:50%; background:radial-gradient(ellipse,#d7b97820,transparent 68%); border:1px solid #d7b97820; transform:rotate(-9deg); }
.royal-halo::after { content:''; position:absolute; inset:13px -7px; border:1px solid #d7b97814; border-radius:50%; transform:rotate(18deg); }
.royal-cast { display:flex; direction:ltr; justify-content:center; align-items:center; height:206px; padding:14px 12px; }
.royal-character { flex:0 0 clamp(84px,9vw,118px); overflow:hidden; margin-left:-13px; padding:5px; border:1px solid #d8bb7f; border-radius:58px 58px 12px 12px; background:linear-gradient(145deg,#8b7346,#142d27 30%,#0b241e 75%,#6a5636); box-shadow:0 16px 28px #001c2466,inset 0 0 0 2px #d5b57825; }
.royal-character:first-child { margin-left:0; }
.royal-face { display:block; aspect-ratio:1; width:100%; border-radius:50%; border:1px solid #d9bd7d99; background-image:url('../img/royal-club/royal-portraits.png'); background-size:200% 200%; background-repeat:no-repeat; }
.royal-king { transform:translateY(13px) rotate(-13deg); }
.royal-king .royal-face { background-position:0 0; }
.royal-queen { transform:translateY(-9px) rotate(-4deg); z-index:1; }
.royal-queen .royal-face { background-position:100% 0; }
.royal-knight { transform:translateY(-9px) rotate(4deg); z-index:2; }
.royal-knight .royal-face { background-position:0 100%; }
.royal-falcon { transform:translateY(13px) rotate(13deg); z-index:3; }
.royal-falcon .royal-face { background-position:100% 100%; }
.royal-suit { display:block; text-align:center; color:#e2c58b; font:27px/1.4 Georgia,serif; padding-top:4px; text-shadow:0 2px 5px #0005; }
.royal-queen .royal-suit,.royal-falcon .royal-suit { color:#ecb29b; }
.royal-caption { display:flex; align-items:center; justify-content:center; gap:12px; margin:3px 0 0; color:#d8c595; font-size:14px; }
.royal-caption span { height:1px; width:28px; background:linear-gradient(90deg,transparent,#d7b97888,transparent); }
.welcome-features {
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    margin-top:14px;
    justify-content:center;
    font-size:14px;
    color:#c5d3c9}
.welcome-features>span {
    display:flex;
    align-items:center;
    gap:7px}
.welcome-features i {
    height:13px;
    width:1px;
    background:#b7c2a733}
.auth-card {
    background:var(--paper);
    color:var(--ink);
    padding:24px 28px 0;
    border:1px solid #ffffff80;
    border-radius:22px;
    box-shadow:0 24px 70px #061e2940;
    min-width:0}
.auth-heading {
    text-align:center}
.mini-suit {
    display:block;
    font:29px/1.2 Georgia,serif;
    color:#527362;
    margin-bottom:5px}
.auth-heading .eyebrow {
    justify-content:center;
    color:#787b65;
    font-size:13px;
    margin-bottom:6px}
.auth-heading h2 {
    font-size:28px;
    font-weight:700;
    margin:0 0 7px}
.auth-heading>p:last-child {
    font-size:14px;
    color:#707c72;
    margin:0 0 16px}
.auth-tabs {
    display:flex;
    background:#eeeee7;
    padding:4px;
    border-radius:10px;
    margin-bottom:16px;
    gap:4px}
.auth-tabs button {
    width:50%;
    border:0;
    color:#697263;
    border-radius:7px;
    background:transparent;
    min-height:44px;
    font-weight:600;
    font-size:15px}
.auth-tabs button.active {
    background:#fff;
    color:var(--green);
    box-shadow:0 2px 7px #273f3210}
.field {
    margin-bottom:14px}
.field label {
    display:block;
    font-size:14px;
    font-weight:500;
    margin-bottom:6px}
.field input {
    width:100%;
    min-width:0;
    height:50px;
    border:1px solid #dce1d8;
    border-radius:9px;
    padding:0 14px;
    color:var(--ink);
    background:#fff;
    font-size:16px;
    transition:border-color .2s,box-shadow .2s}
.field input::placeholder {
    color:#737f70;
    font-size:15px}
.field input:focus {
    outline:none;
    border-color:#4e7863;
    box-shadow:0 0 0 3px #53796420}
.input-wrap {
    position:relative}
.input-wrap input {
    padding-left:48px}
.input-wrap input[dir=ltr] {
    padding-right:43px;
    padding-left:14px;
    font-family:Arial,sans-serif}
.field-icon {
    position:absolute;
    right:15px;
    top:10px;
    color:#8b998d;
    font:19px Arial,sans-serif}
.password-toggle {
    position:absolute;
    left:4px;
    top:3px;
    background:none;
    border:0;
    color:#71836f;
    width:44px;
    height:44px;
    display:grid;
    place-items:center}
.password-toggle svg {
    width:20px;
    height:20px}
.form-options {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    row-gap:12px;
    gap:12px;
    font-size:13px;
    margin:3px 0 23px}
.form-options a,.terms a,.signup-prompt button {
    color:#47705b}
.form-options a:hover,.site-footer a:hover,.terms a:hover {
    text-decoration:underline}
.checkbox-label {
    display:flex;
    align-items:center;
    gap:7px;
    cursor:pointer;
    color:#64705e;
    font-size:13px}
.checkbox-label input {
    accent-color:var(--green);
    width:16px;
    height:16px;
    margin:0;
    flex-shrink:0}
.primary-button {
    border:1px solid var(--green);
    border-radius:9px;
    background:var(--green);
    color:white;
    width:100%;
    min-height:54px;
    padding:10px 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    font-size:16px;
    font-weight:600;
    transition:background .2s}
.primary-button:hover {
    background:#285b49}
.primary-button>span {
    font:22px Arial,sans-serif}
.signup-prompt {
    text-align:center;
    color:#707b69;
    font-size:13px;
    margin:12px 0 15px}
.signup-prompt button {
    font:inherit;
    background:none;
    border:0;
    padding:5px}
.card-footer {
    border-top:1px solid #e5e8e1;
    padding:11px 0;
    text-align:center;
    color:#64745b;
    font-size:13px}
.card-footer>span {
    margin-left:6px;
    font-size:16px}
.name-fields {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px}
.terms {
    margin:0 0 19px}
.terms a {
    text-decoration:underline}
.form-status {
    font-size:15px;
    background:#fff0ed;
    border:1px solid #f0d3cb;
    color:#aa4434;
    border-radius:8px;
    padding:10px 13px;
    margin:0 0 15px;
    overflow-wrap:anywhere}
.form-status:empty {
    display:none}
.loading-status {
    text-align:center;
    font-size:14px;
    color:#647866}
.site-footer {
    border-top:1px solid #c9d2ba1a;
    color:#afc0b3;
    font-size:13px;
    padding-top:16px;
    padding-bottom:18px;
    gap:20px}
.site-footer>div {
    display:flex;
    gap:16px}
.footer-dot {
    opacity:.4;
    margin:0 7px}
[hidden] {
    display:none!important}


@media(max-width:1050px) {
    .login-layout {
    gap:28px;
    padding:0 24px}
.site-header,.site-footer {
    padding-left:32px;
    padding-right:32px}
.auth-card {
    padding:24px 24px 0}
.welcome-features {
    gap:10px;
    font-size:13px}
}

@media(max-width:760px) {
    .site-header {
    padding:16px 22px}
.brand {
    font-size:21px}
.brand-mark {
    width:40px;
    height:44px;
    font-size:32px}
.header-note {
    font-size:13px}
.header-note>span {
    display:none}
.login-layout {
    grid-template-columns:1fr;
    max-width:520px;
    margin:4px auto 24px;
    padding:0 22px;
    gap:18px}
.welcome {
    text-align:center;
    padding-top:0}
.welcome .eyebrow {
    justify-content:center;
    margin-bottom:9px;
    font-size:13px}
h1 {
    font-size:32px;
    line-height:1.65;
    margin-bottom:6px;
    letter-spacing:0}
h1 br {
    display:none}
.intro {
    font-size:14px}
.intro br {
    display:none}
.welcome-features {
    display:none}
.auth-card {
    padding:22px 24px 0;
    border-radius:18px}
.auth-heading .mini-suit {
    display:none}
.auth-heading h2 {
    font-size:25px}
.auth-heading>p:last-child {
    margin-bottom:16px}
.auth-heading .eyebrow {
    margin-bottom:5px}
.site-footer {
    flex-direction:column;
    gap:8px;
    text-align:center;
    margin:0 22px;
    padding:20px 0}
.auth-tabs {
    margin-bottom:16px}
.field {
    margin-bottom:14px}
}

@media(max-width:360px) {
    .header-note {
    display:none}
.login-layout {
    padding:0 14px}
.auth-card {
    padding:24px 18px 0}
.form-options {
    gap:6px;
    font-size:13px}
.checkbox-label {
    font-size:13px}
h1 {
    font-size:28px}
.name-fields {
    grid-template-columns:1fr;
    gap:0}
}

@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {
    transition:none!important}
}


@media(max-width:760px) {
 .royal-welcome { margin:15px auto 0; max-width:340px; }
 .royal-cast { height:80px; padding:0 8px; gap:12px; }
 .royal-character { flex-basis:62px; margin:0; padding:3px; border-radius:50%; transform:none; box-shadow:0 6px 15px #001c2455; }
 .royal-queen,.royal-knight { transform:translateY(-5px); }
 .royal-suit { display:none; }
 .royal-caption { font-size:12px; margin-top:1px; }
 .royal-halo { inset:0 0 12px; }
}
@media(max-width:360px) {
 .royal-cast { gap:9px; }
 .royal-character { flex-basis:55px; }
 .royal-caption { gap:8px; }
}

.field-help { display:block; margin-top:5px; font-size:12px; line-height:1.8; color:#64705e; }
#phone { font-family:Arial,sans-serif; }