/* Account pages: log in, create account, forgot password, my account (pages_src/login|register|forgot|account.html).
   Full-bleed art behind a framed card with the FW crest on its top edge (the split art|form layout was rejected by the owner).
   Each page has its own moment: login = the crest turns like a lock dial; forgot = a messenger under the moon;
   register = the hall of names; account = the open passport. */

/* full-bleed art, and the form in a framed card (a game login window) aligned with the header's edges.
   The card sits on the reading side; the art is mirrored in Arabic so the caravan stays opposite the card. */
.auth { position: relative; isolation: isolate; display: grid; align-items: center; min-height: 100dvh; padding-block: 120px var(--sp-9); background: var(--night-950); }

/* ---------- the art ---------- */
.auth-art { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.auth-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
[dir="rtl"] .auth-art img { transform: scaleX(-1); }
.auth-art::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8, 12, 26, .92) 0%, rgba(8, 12, 26, .7) 32%, rgba(8, 12, 26, .1) 62%, transparent 80%),
    linear-gradient(180deg, rgba(8, 12, 26, .5) 0%, transparent 22%, transparent 60%, var(--night-950) 100%); }
[dir="rtl"] .auth-art::after { background: linear-gradient(270deg, rgba(8, 12, 26, .92) 0%, rgba(8, 12, 26, .7) 32%, rgba(8, 12, 26, .1) 62%, transparent 80%),
    linear-gradient(180deg, rgba(8, 12, 26, .5) 0%, transparent 22%, transparent 60%, var(--night-950) 100%); }

/* ---------- the card ---------- */
.auth-wrap { width: 100%; }
.auth-card { position: relative; width: min(100%, 470px); padding: 76px var(--sp-7) var(--sp-7); margin-top: 48px;
  background: linear-gradient(180deg, rgba(22, 34, 70, .94) 0%, rgba(10, 16, 36, .96) 100%); backdrop-filter: blur(8px);
  border: 1px solid rgba(226, 169, 59, .7); border-radius: 2px;
  box-shadow: 0 0 0 4px rgba(8, 12, 26, .92), 0 0 0 5px rgba(226, 169, 59, .3), 0 40px 90px -24px rgba(0, 0, 0, .85); }
.auth-card::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(226, 169, 59, .16); pointer-events: none; }
/* diamond studs on the four corners */
.auth-card::after { content: ""; position: absolute; inset: -5px; pointer-events: none;
  background: radial-gradient(circle, #E2A93B 2.5px, transparent 3px) 0 0 / 10px 10px no-repeat,
              radial-gradient(circle, #E2A93B 2.5px, transparent 3px) 100% 0 / 10px 10px no-repeat,
              radial-gradient(circle, #E2A93B 2.5px, transparent 3px) 0 100% / 10px 10px no-repeat,
              radial-gradient(circle, #E2A93B 2.5px, transparent 3px) 100% 100% / 10px 10px no-repeat; }
/* the FW crest sits on the top edge like a seal */
.auth-crest { position: absolute; top: -52px; left: 50%; translate: -50% 0; display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%;
  background: radial-gradient(circle, rgba(8, 12, 26, .95) 60%, transparent 62%); }
.auth-mark { width: 96px; height: 96px; filter: drop-shadow(0 10px 22px rgba(4, 7, 16, .85)); }
.auth-title { text-align: center; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.6rem); color: var(--sand-50); }
.auth-rule { display: block; position: relative; width: 140px; height: 1px; margin: var(--sp-3) auto 0;
  background: linear-gradient(90deg, transparent, #E2A93B, transparent); }
.auth-rule::after { content: ""; position: absolute; left: 50%; top: -3px; width: 7px; height: 7px; translate: -50% 0; rotate: 45deg; background: #E2A93B; }
.auth-lead { margin-top: var(--sp-4); text-align: center; color: var(--text-2); }
.auth-form { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); }
@media (max-width: 599px) {
  .auth { align-items: start; padding-block: 112px var(--sp-8); }
  .auth-art img { object-position: 70% 0; height: 62%; }
  .auth-art::after, [dir="rtl"] .auth-art::after { background: linear-gradient(180deg, rgba(8, 12, 26, .35) 0%, rgba(8, 12, 26, .55) 30%, var(--night-950) 62%); }
  .auth-card { padding: 68px var(--sp-5) var(--sp-6); margin-top: 120px; }
}

/* ---------- fields ---------- */
.field { display: grid; gap: 6px; }
.field label { color: var(--text-2); font-size: .875rem; font-weight: 500; }
.input { display: flex; align-items: center; gap: var(--sp-3); height: 52px; padding-inline: var(--sp-4); border-radius: 2px;
  background: rgba(13, 20, 41, .9); box-shadow: inset 0 0 0 1px rgba(246, 238, 223, .14); transition: box-shadow .25s; }
.input > .icon { width: 20px; height: 20px; flex: none; color: var(--text-3); transition: color .25s; }
.input input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; color: var(--text); font: inherit; font-size: 1rem; }
.input input::placeholder { color: var(--text-3); opacity: 1; }
.input:focus-within { box-shadow: inset 0 0 0 1px #E2A93B, 0 0 0 3px rgba(226, 169, 59, .18); }
.input:focus-within > .icon { color: #F4C65C; }
.field.is-bad .input { box-shadow: inset 0 0 0 1px var(--ember-500), 0 0 0 3px rgba(229, 83, 61, .15); }
.field-msg { min-height: 1.25em; color: var(--ember-500); font-size: .875rem; }
.peek { display: grid; place-items: center; width: 44px; height: 44px; margin-inline-end: -12px; color: var(--text-3); border-radius: 2px; }
.peek:hover, .peek[aria-pressed="true"] { color: var(--text); }
.peek .icon { width: 20px; height: 20px; }

/* password strength: four steps, ember to bright gold */
.meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.meter i { height: 4px; border-radius: 2px; background: rgba(246, 238, 223, .1); transition: background .3s; }
.meter[data-level="1"] i:nth-child(-n+1) { background: var(--ember-500); }
.meter[data-level="2"] i:nth-child(-n+2) { background: var(--copper-500); }
.meter[data-level="3"] i:nth-child(-n+3) { background: #E2A93B; }

/* ---------- checkbox, row, messages ---------- */
.auth-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.check { display: flex; align-items: flex-start; gap: var(--sp-3); color: var(--text-2); font-size: .9375rem; cursor: pointer; }
.check input { appearance: none; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 2px; cursor: pointer;
  background: rgba(13, 20, 41, .9); box-shadow: inset 0 0 0 1px rgba(246, 238, 223, .3); transition: background .2s, box-shadow .2s; }
.check input:checked { background: #E2A93B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%231C0D00' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: none; }
.check.is-bad input { box-shadow: inset 0 0 0 1px var(--ember-500); }
.form-msg { min-height: 1.4em; font-size: .9375rem; }
.form-msg.is-bad { color: var(--ember-500); }
.auth-submit { width: 100%; margin-top: var(--sp-2); }
.auth-submit[aria-busy="true"] { pointer-events: none; opacity: .72; }
.auth-switch { margin-top: var(--sp-6); color: var(--text-2); text-align: center; }

/* the success card replaces the form once an account is made */
.auth-done { display: grid; justify-items: center; gap: var(--sp-3); margin-top: var(--sp-6); padding: var(--sp-6); text-align: center; }
.auth-done .medal { --m: 64px; }
.auth-done h2 { font-size: 1.5rem; color: var(--sand-50); }
.auth-done p { color: var(--text-2); }

/* ---------- my account ---------- */
.account-card { width: min(100%, 480px); }
/* compact: the whole card, log out included, fits one screen (owner 2026-10-16) */
.account { padding-block: 96px var(--sp-6); }
.account .auth-card { margin-top: 40px; padding: 52px var(--sp-6) var(--sp-5); }
.account .auth-crest { top: -40px; width: 84px; height: 84px; }
.account .auth-mark { width: 72px; height: 72px; }
.account .auth-title { font-size: clamp(1.75rem, 1.5rem + 1vw, 2.125rem); }
.account .auth-rule { margin-top: var(--sp-2); }
.account .auth-lead { margin-top: var(--sp-2); font-size: .9375rem; }
.account .acct { margin-top: var(--sp-4); }
.account .acct > div { padding: 9px 0; }
.account .acct-help { margin-top: var(--sp-4); padding: var(--sp-4); }
.account .acct-help h2 { font-size: 1.0625rem; }
.account .acct-help p { font-size: .875rem; }
.account .acct-help .btn { margin-top: var(--sp-3); }
.account .acct-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-4); }
.account .acct-note { margin: var(--sp-3) 0 0; text-align: center; font-size: .875rem; }
.account .acct-foot .link { flex: none; white-space: nowrap; }
/* log out of all devices: a quiet danger action, confirmed in place */
.acct-all { margin-top: var(--sp-2); }
.acct-all-btn { display: inline-flex; align-items: center; gap: 8px; color: #F08A78; font-weight: 600; font-size: .9375rem; }
.acct-all-btn .icon { width: 18px; height: 18px; }
.acct-all-btn:hover { color: #FFB3A6; }
.acct-confirm { margin-top: var(--sp-3); padding: var(--sp-4); border-radius: 2px; background: rgba(229, 83, 61, .08); box-shadow: inset 0 0 0 1px rgba(229, 83, 61, .4); }
.acct-confirm p { color: var(--text-2); font-size: .875rem; }
.acct-confirm-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin-top: var(--sp-3); }
.acct-confirm .btn { --h: 44px; font-size: .9375rem; }
.acct-all-msg { margin-top: var(--sp-2); font-size: .875rem; }
.acct-all-msg:empty { display: none; }
.acct { display: grid; margin-top: var(--sp-6); border-top: 1px solid rgba(226, 169, 59, .25); }
.acct > div { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid rgba(246, 238, 223, .07); }
.acct dt { color: #9C907B; font-size: .9375rem; }
.acct dd { margin: 0; color: var(--text); font-weight: 600; text-align: end; overflow-wrap: anywhere; }
.acct-state { display: inline-flex; align-items: center; gap: 8px; }
.acct-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--copper-300); box-shadow: 0 0 0 3px rgba(226, 169, 59, .22); }
.acct-state:is([data-state="suspended"], [data-state="banned"])::before { background: var(--ember-500); box-shadow: 0 0 0 3px rgba(229, 83, 61, .2); }
.acct-help { margin-top: var(--sp-6); padding: var(--sp-5); border-radius: 2px; background: rgba(8, 12, 26, .5); box-shadow: inset 0 0 0 1px rgba(246, 238, 223, .08); }
.acct-help h2 { font-size: 1.25rem; color: var(--sand-50); }
.acct-help p { margin-top: var(--sp-2); color: var(--text-2); font-size: .9375rem; }
.acct-note { margin-top: var(--sp-5); text-align: center; }

@media (prefers-reduced-motion: no-preference) {
  .auth-art img { animation: auth-drift 26s ease-in-out infinite alternate; }
  @keyframes auth-drift { from { scale: 1.02; } to { scale: 1.12; translate: -2% 1%; } }
  .auth-card > :not(.auth-crest) { animation: auth-in .8s cubic-bezier(.16, 1, .3, 1) both; }
  .auth-card > :nth-child(2) { animation-delay: .06s; } .auth-card > :nth-child(3) { animation-delay: .12s; }
  .auth-card > :nth-child(4) { animation-delay: .18s; } .auth-card > :nth-child(5) { animation-delay: .24s; }
  .auth-crest { animation: auth-crest-in 1s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes auth-crest-in { from { opacity: 0; scale: .6; } }
  @keyframes auth-in { from { opacity: 0; translate: 0 18px; } }
  .field.is-bad .input { animation: auth-shake .4s; }
  @keyframes auth-shake { 20%, 60% { translate: -5px 0; } 40%, 80% { translate: 5px 0; } }
  .auth-done { animation: auth-in .7s cubic-bezier(.16, 1, .3, 1) both; }
}

/* honeypot (SSR-59 auth design): off screen, bots fill it, people never see it */
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ================= register: the hall of names ================= */
.auth-hall { padding-block: 104px var(--sp-7); background: radial-gradient(90% 70% at 72% 78%, #1C1406 0%, #0A0E1E 55%, #05070F 100%); }
[dir="rtl"] .auth-hall { background: radial-gradient(90% 70% at 28% 78%, #1C1406 0%, #0A0E1E 55%, #05070F 100%); }
.hall-art { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hall-heroes { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 100%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .8)); }
[dir="rtl"] .hall-heroes { transform: scaleX(-1); }
/* a pool of gold light on the floor under the heroes, and a low fog in front of their feet */
.hall-glow { position: absolute; left: 50%; right: -6%; bottom: 4%; height: 46%; background: radial-gradient(50% 40% at 50% 80%, rgba(244, 198, 92, .30), rgba(226, 169, 59, .08) 55%, transparent 75%); }
[dir="rtl"] .hall-glow { left: -6%; right: 50%; }
.hall-fog { position: absolute; inset: auto 0 0; height: 38%; background: linear-gradient(0deg, #05070F 8%, rgba(5, 7, 15, .75) 40%, transparent); }
.hall-art::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(5, 7, 15, .9) 0%, rgba(5, 7, 15, .55) 34%, transparent 58%); }
[dir="rtl"] .hall-art::before { background: linear-gradient(270deg, rgba(5, 7, 15, .9) 0%, rgba(5, 7, 15, .55) 34%, transparent 58%); }
@media (prefers-reduced-motion: no-preference) { .hall-glow { animation: auth-hall-breathe 6s ease-in-out infinite; } @keyframes auth-hall-breathe { 50% { opacity: .65; } } }

/* a compact card: two fields per row, a smaller seal; it fits a 900 px window without scrolling */
.auth-hall .auth-wrap { display: grid; grid-template-columns: minmax(0, 560px) 1fr; align-items: end; gap: var(--sp-7); }
.auth-hall .auth-card { width: 100%; margin-top: 34px; padding: 50px var(--sp-6) var(--sp-5); }
.auth-hall .auth-crest { top: -40px; width: 82px; height: 82px; }
.auth-hall .auth-mark { width: 72px; height: 72px; }
.auth-hall .auth-title { font-size: clamp(1.7rem, 1.4rem + 1vw, 2.1rem); }
.auth-hall .auth-rule { margin-top: var(--sp-2); }
.auth-hall .auth-lead { margin-top: var(--sp-2); font-size: .9375rem; }
.auth-hall .auth-form { gap: 10px; margin-top: var(--sp-4); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-4); }
.field-row > .field { min-width: 0; }
.auth-hall .input { height: 46px; }
.auth-hall .field { gap: 4px; }
.auth-hall .field-msg { min-height: 1.1em; font-size: .875rem; line-height: 1.3; }
.auth-hall .auth-switch { margin-top: var(--sp-4); }
@media (max-width: 1023px) { .auth-hall .auth-wrap { grid-template-columns: 1fr; } .hall-plaque { display: none; } }
@media (max-width: 599px) { .field-row { grid-template-columns: minmax(0, 1fr); } .hall-heroes { object-position: 74% 0; height: 60%; } .auth-hall .auth-card { margin-top: 150px; } }

/* the gold plaque at the heroes' feet: the username is engraved on it letter by letter */
.hall-plaque { justify-self: center; align-self: end; display: grid; justify-items: center; gap: 6px; min-width: 300px; margin-bottom: 4vh; padding: 16px 40px 18px; text-align: center;
  background: linear-gradient(180deg, rgba(40, 28, 8, .85), rgba(16, 11, 4, .92)); border: 1px solid rgba(226, 169, 59, .75);
  box-shadow: 0 0 0 4px rgba(5, 7, 15, .9), 0 0 0 5px rgba(226, 169, 59, .35), 0 24px 50px -16px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 231, 163, .2); }
.plaque-label { color: rgba(246, 207, 121, .8); font-size: .875rem; font-weight: 600; }
.plaque-name { min-height: 1.2em; direction: ltr; font: clamp(2rem, 1.4rem + 2vw, 3rem)/1.1 var(--font-display-latin); letter-spacing: .06em; }
.plaque-name.is-empty { color: rgba(246, 207, 121, .5); }
:lang(ar) .plaque-name.is-empty { direction: rtl; font-family: var(--font-display-ar); letter-spacing: 0; }
/* solid engraved gold: a bright top edge, a dark cut under each letter and a warm glow (no gradient text) */
.plaque-name .ch { display: inline-block; padding-bottom: .12em; color: #F4C65C; text-shadow: 0 -1px 0 rgba(255, 243, 204, .55), 0 2px 0 rgba(58, 36, 8, .95), 0 0 18px rgba(244, 198, 92, .35); }
@media (prefers-reduced-motion: no-preference) { .plaque-name .ch.is-new { animation: auth-engrave .55s cubic-bezier(.2, 1, .3, 1); }
  @keyframes auth-engrave { 0% { opacity: 0; translate: 0 -10px; scale: 1.4; color: #FFF3CC; text-shadow: 0 0 22px rgba(255, 231, 163, .95), 0 0 6px #FFF3CC; } } }
.plaque-rank { color: var(--sand-300); font-size: .9375rem; }

/* two-column rows: every piece stays inside its own column (the eye button and the strength meter were spilling over) */
.field-row .input { min-width: 0; overflow: hidden; }
.field-row .input input { width: 100%; }
.field-row .peek { flex: none; margin-inline-end: -6px; }
.field-row .meter { min-width: 0; width: 100%; }
.field-row .field { grid-template-rows: auto auto auto 1fr; }
/* the heroes keep their outer edge in view */
.hall-art .hall-heroes { -webkit-mask-image: linear-gradient(90deg, transparent 44%, #000 56%); mask-image: linear-gradient(90deg, transparent 44%, #000 56%); }

/* ================= the founders step (after registering) ================= */
.founder { display: grid; gap: var(--sp-4); margin-top: var(--sp-4); }
.founder-title { text-align: center; font-size: 1.5rem; color: #F4C65C; }
.founder-lead { text-align: center; color: var(--text-2); font-size: .9375rem; margin-top: -8px; }
.founder-step { display: grid; gap: 8px; }
.founder-label { color: var(--text-2); font-size: .875rem; font-weight: 600; }
.founder-races { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.founder-races .race { min-width: 0; height: 42px; }
.founder-races .race[aria-pressed="true"] { color: #F6CF79; background: var(--night-700); box-shadow: inset 0 -2px 0 #E2A93B, inset 0 0 0 1px rgba(226, 169, 59, .35); }
.founder-weapons { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.fw-pick { display: grid; justify-items: center; gap: 2px; padding: 6px 4px 6px; background: rgba(13, 20, 41, .9); box-shadow: inset 0 0 0 1px rgba(246, 238, 223, .12); border-radius: 2px; transition: box-shadow .2s, background .2s; }
.fw-pick img { width: 100%; height: 64px; object-fit: contain; object-position: 50% 10%; }
.fw-pick span { color: var(--text-2); font-size: .8125rem; line-height: 1.25; text-align: center; }
.fw-pick:hover { background: var(--night-700); }
.fw-pick[aria-pressed="true"] { background: rgba(226, 169, 59, .12); box-shadow: inset 0 0 0 2px #E2A93B; }
.fw-pick[aria-pressed="true"] span { color: #F6CF79; }
.founder-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-6); }
.founder-actions .btn { flex: 1; }
.founder-invite { display: grid; gap: 6px; padding-top: var(--sp-3); box-shadow: inset 0 1px 0 rgba(246, 238, 223, .1); }
.invite-row { display: flex; gap: var(--sp-3); align-items: center; }
.invite-row input { flex: 1; min-width: 0; height: 44px; padding-inline: 12px; background: rgba(13, 20, 41, .9); border: 0; box-shadow: inset 0 0 0 1px rgba(246, 238, 223, .14); color: var(--sand-300); font: inherit; font-size: .8125rem; direction: ltr; }
.founder-invite small { color: var(--text-3); font-size: .875rem; }
/* the live card preview takes the plaque's place at the heroes' feet */
.founder-preview { align-self: center; justify-self: center; width: 100%; max-width: 620px; }
.founder-preview canvas { display: block; width: 100%; height: auto; box-shadow: 0 0 0 4px rgba(5, 7, 15, .9), 0 30px 70px -20px rgba(0, 0, 0, .95); }
@media (max-width: 1023px) { .founder-preview { display: block; order: -1; max-width: 560px; } .auth-hall .auth-wrap { gap: var(--sp-5); } }
.auth-hall .auth-card.is-founder { padding-top: 46px; }
.auth-card.is-founder .founder { margin-top: 0; gap: var(--sp-3); }
.auth-card.is-founder .fw-pick img { height: 54px; }

/* ================= account: the founder card ================= */
.acct-founder { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); padding-top: var(--sp-5); box-shadow: inset 0 1px 0 rgba(246, 238, 223, .1); }
.acct-founder:empty { display: none; }
.acct-founder-title { font-size: 1.25rem; color: #F4C65C; }
.acct-card-preview canvas { display: block; width: 100%; height: auto; box-shadow: 0 0 0 3px rgba(5, 7, 15, .9), 0 18px 40px -16px rgba(0, 0, 0, .9); }
.acct-founder .founder { margin-top: 0; }
.acct-code { display: grid; gap: 4px; }
.acct-code code { padding: 10px 14px; font: 600 1.125rem/1 "IBM Plex Sans", monospace; letter-spacing: .12em; color: #F6CF79; background: rgba(226, 169, 59, .1); box-shadow: inset 0 0 0 1px rgba(226, 169, 59, .5); direction: ltr; }
.acct-code small { color: var(--text-3); font-size: .875rem; }
.founder-poses { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 6px; align-items: center; }
.founder-poses .race { min-width: 0; height: 40px; padding-inline: 8px; font-size: 1rem; }
.founder-poses .race[aria-pressed="true"] { color: #F6CF79; background: var(--night-700); box-shadow: inset 0 -2px 0 #E2A93B, inset 0 0 0 1px rgba(226, 169, 59, .35); }
.founder-poses .link { margin-inline-start: 8px; white-space: nowrap; }

/* ================= the finish (review 2026-10-16): depth, light and clear field states =================
   Gold is the one accent: valid fields, success and focus rings are gold; ember marks what needs fixing. */
/* light falls on the card from the crest, and the frame gets a deeper bevel */
.auth-card { background: radial-gradient(70% 34% at 50% 0%, rgba(244, 198, 92, .13), transparent 72%), linear-gradient(180deg, rgba(22, 34, 70, .95) 0%, rgba(10, 16, 36, .97) 100%);
  box-shadow: 0 0 0 4px rgba(8, 12, 26, .92), 0 0 0 5px rgba(226, 169, 59, .32), inset 0 1px 0 rgba(255, 231, 163, .14), inset 0 -40px 60px -40px rgba(0, 0, 0, .6),
    0 40px 90px -24px rgba(0, 0, 0, .9), 0 0 120px -30px rgba(226, 169, 59, .25); }
/* the crest: a gold halo and a slow turning ring of studs behind the mark */
.auth-crest { box-shadow: 0 0 0 1px rgba(226, 169, 59, .55), 0 0 36px -4px rgba(244, 198, 92, .35); }
.auth-crest::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(226, 169, 59, .7) 0deg 2deg, transparent 2deg 15deg);
  -webkit-mask: radial-gradient(circle, transparent 61%, #000 62%, #000 66%, transparent 67%); mask: radial-gradient(circle, transparent 61%, #000 62%, #000 66%, transparent 67%); }
.auth-title { text-shadow: 0 2px 0 rgba(4, 7, 16, .8), 0 0 30px rgba(244, 198, 92, .18); }
:lang(ar) .auth-title, :lang(ar) .auth-lead, :lang(ar) .field label { letter-spacing: 0; }

/* fields: rest, hover, focus, invalid, valid */
.field label { transition: color var(--t-base); }
.input { background: linear-gradient(180deg, rgba(8, 12, 26, .95), rgba(16, 24, 48, .9)); box-shadow: inset 0 0 0 1px rgba(246, 238, 223, .14), inset 0 2px 6px rgba(0, 0, 0, .45);
  transition: box-shadow var(--t-base), background var(--t-base); }
.input:hover { box-shadow: inset 0 0 0 1px rgba(246, 238, 223, .32), inset 0 2px 6px rgba(0, 0, 0, .45); }
.input:focus-within { background: linear-gradient(180deg, rgba(12, 18, 38, .98), rgba(22, 32, 62, .94));
  box-shadow: inset 0 0 0 1px var(--copper-500), inset 0 2px 6px rgba(0, 0, 0, .4), 0 0 0 3px rgba(226, 169, 59, .2), 0 0 24px -6px rgba(244, 198, 92, .45); }
.field:focus-within label { color: var(--copper-300); }
.field.is-bad label { color: #F08A78; }
.field.is-bad .input { box-shadow: inset 0 0 0 1px var(--ember-500), inset 0 2px 6px rgba(0, 0, 0, .45), 0 0 0 3px rgba(229, 83, 61, .16); }
.field.is-bad .input > .icon { color: var(--ember-500); }
.field.is-good .input { box-shadow: inset 0 0 0 1px rgba(226, 169, 59, .55), inset 0 2px 6px rgba(0, 0, 0, .45); }
.field.is-good .input > .icon { color: var(--copper-300); }
/* a small gold check closes a valid field */
.field.is-good .input::after { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; order: 9;
  background: var(--copper-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.6' fill='none' stroke='%231C0D00' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
  box-shadow: 0 0 10px rgba(244, 198, 92, .5); }
.field-msg { color: #F08A78; }
.field-msg:not(:empty) { display: flex; align-items: flex-start; gap: 6px; }
.field-msg:not(:empty)::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .45em; rotate: 45deg; background: var(--ember-500); }
.peek { transition: color var(--t-base), background var(--t-base); }
.peek:hover { background: rgba(246, 238, 223, .07); }
.peek[aria-pressed="true"] { color: var(--copper-300); }
.peek:focus-visible, .check input:focus-visible, .acct-all-btn:focus-visible, .acct-confirm .link:focus-visible { outline: 2px solid var(--copper-300); outline-offset: 2px; }
.check:hover input:not(:checked) { box-shadow: inset 0 0 0 1px rgba(226, 169, 59, .7); }
.check input:checked { box-shadow: 0 0 10px rgba(244, 198, 92, .45); }
.meter[data-level="4"] i { background: var(--copper-300); box-shadow: 0 0 8px rgba(244, 198, 92, .55); }

/* the form's own message: a framed strip, ember for a problem and gold for good news */
.form-msg.is-bad, .form-msg.is-good { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: 2px; line-height: 1.45; }
.form-msg.is-bad { color: #FFC2B8; background: rgba(229, 83, 61, .1); box-shadow: inset 0 0 0 1px rgba(229, 83, 61, .45), inset 3px 0 0 var(--ember-500); }
.form-msg.is-good { color: var(--copper-300); background: rgba(226, 169, 59, .1); box-shadow: inset 0 0 0 1px rgba(226, 169, 59, .45), inset 3px 0 0 var(--copper-500); }
[dir="rtl"] .form-msg.is-bad { box-shadow: inset 0 0 0 1px rgba(229, 83, 61, .45), inset -3px 0 0 var(--ember-500); }
[dir="rtl"] .form-msg.is-good { box-shadow: inset 0 0 0 1px rgba(226, 169, 59, .45), inset -3px 0 0 var(--copper-500); }
.form-msg.is-bad::before, .form-msg.is-good::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .5em; rotate: 45deg; background: currentColor; }
.auth-done .medal { color: var(--copper-300); }
.auth-done h2 { text-shadow: 0 0 24px rgba(244, 198, 92, .3); }
.acct-all-msg { color: var(--copper-300); }

/* the hero's chamber (account): engraved rows, a gold diamond on each label */
.account .acct { border-top-color: rgba(226, 169, 59, .4); }
.account .acct > div { align-items: baseline; }
.account .acct dt { position: relative; padding-inline-start: 16px; }
.account .acct dt::before { content: ""; position: absolute; inset-inline-start: 0; top: .5em; width: 6px; height: 6px; rotate: 45deg; background: rgba(226, 169, 59, .7); }
.account .acct > div:hover { background: linear-gradient(90deg, rgba(226, 169, 59, .07), transparent 70%); }
[dir="rtl"] .account .acct > div:hover { background: linear-gradient(270deg, rgba(226, 169, 59, .07), transparent 70%); }
.account .acct-help { background: linear-gradient(180deg, rgba(8, 12, 26, .6), rgba(8, 12, 26, .35)); box-shadow: inset 0 0 0 1px rgba(226, 169, 59, .2), inset 0 1px 0 rgba(255, 231, 163, .1); }

/* the founders flow: clear hover, focus and picked states */
.founder-races .race:focus-visible, .founder-poses .race:focus-visible, .fw-pick:focus-visible { outline: 2px solid var(--copper-300); outline-offset: 2px; }
.fw-pick:hover { box-shadow: inset 0 0 0 1px rgba(226, 169, 59, .45); }
.fw-pick[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--copper-500), 0 0 18px -4px rgba(244, 198, 92, .55); }
.founder-preview canvas { box-shadow: 0 0 0 1px rgba(226, 169, 59, .5), 0 0 0 5px rgba(5, 7, 15, .9), 0 0 0 6px rgba(226, 169, 59, .25), 0 30px 70px -20px rgba(0, 0, 0, .95), 0 0 90px -20px rgba(244, 198, 92, .3); }

@media (prefers-reduced-motion: no-preference) {
  .auth-crest::before { animation: auth-crest-turn 60s linear infinite; }
  @keyframes auth-crest-turn { to { rotate: 360deg; } }
  .field.is-good .input::after { animation: auth-check-in .45s cubic-bezier(.2, 1.4, .4, 1) both; }
  @keyframes auth-check-in { from { opacity: 0; scale: .2; rotate: -90deg; } }
  .form-msg.is-bad, .form-msg.is-good { animation: auth-in .45s cubic-bezier(.16, 1, .3, 1) both; }
  .fw-pick { transition: box-shadow .2s, background .2s, translate .25s cubic-bezier(.2, .8, .2, 1); }
  .fw-pick:hover { translate: 0 -3px; }
  .acct-confirm:not([hidden]) { animation: auth-in .4s cubic-bezier(.16, 1, .3, 1) both; }
}

/* my account (owner 2026-10-16): one wide card that fits a 1440x900 window, two tabs: the account (two columns)
   and the Founder's Banner (the card beside its actions) */
.account .account-card { width: min(100%, 1080px); }
.account { padding-block: 84px var(--sp-4); }
.account .auth-card { margin-top: 30px; padding: 44px var(--sp-6) var(--sp-4); }
.acct-rec-form .form-msg:empty { display: none; }
.acct-pane-account .acct-rec-form .auth-submit { margin-top: var(--sp-3); }
.acct-tabs { justify-content: center; gap: var(--sp-2); margin-top: var(--sp-4); padding: 4px; border-radius: 2px;
  background: rgba(4, 7, 16, .55); box-shadow: inset 0 0 0 1px rgba(226, 169, 59, .28); }
.acct-tabs .tab { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 8px 22px; color: var(--sand-300);
  font: 400 1.0625rem/1 var(--font-head); border-radius: 2px; transition: color .2s, background .25s, box-shadow .25s; }
.acct-tabs .tab .icon { width: 18px; height: 18px; }
.acct-tabs .tab:hover { color: var(--sand-50); }
.acct-tabs .tab[aria-selected="true"] { color: #1C0D00; font-weight: 600;
  background: linear-gradient(180deg, #F6CF79, #E2A93B 55%, #B07A22); box-shadow: inset 0 1px 0 rgba(255, 243, 204, .7), 0 0 18px rgba(226, 169, 59, .35); }
.acct-tabs .tab[aria-selected="true"]::after { display: none; }
.acct-tabs .tab:focus-visible { outline: 2px solid #F4C65C; outline-offset: 2px; }
.acct-pane { margin-top: var(--sp-5); }
.acct-pane[hidden] { display: none; }
.acct-pane-account { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5) var(--sp-7); align-items: start; }
.acct-pane-account .acct { margin-top: 0; }
.acct-pane-account .acct-recovery, .acct-pane-account .acct-help { margin-top: 0; }
.acct-pane-account .acct-col { display: grid; gap: var(--sp-4); align-content: start; min-width: 0; }
.acct-pane-account .acct-foot { margin-top: var(--sp-2); }
.acct-pane-banner .acct-founder { margin-top: 0; padding-top: 0; box-shadow: none; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--sp-4) var(--sp-6); align-items: start; }
.acct-pane-banner .acct-founder > .acct-card-preview { grid-column: 1; grid-row: 1 / span 8; align-self: center; }
.acct-pane-banner .acct-founder > :not(.acct-card-preview) { grid-column: 2; }
.account .acct-note { margin-top: var(--sp-4); }
/* the tablet and phone: one column, the card above its actions */
@media (max-width: 899px) {
  .acct-pane-account, .acct-pane-banner .acct-founder { grid-template-columns: minmax(0, 1fr); }
  .acct-pane-banner .acct-founder > * { grid-column: 1 !important; grid-row: auto !important; }
  .acct-tabs .tab { flex: 1; justify-content: center; padding-inline: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  .acct-pane:not([hidden]) { animation: auth-in .45s cubic-bezier(.16, 1, .3, 1) both; }
}

/* phones: the page grid and the card never grow past the screen (the auto track took the content's min width: 19 to 42 px of sideways scroll at 360) */
.auth { grid-template-columns: minmax(0, 1fr); }
.auth-wrap { min-width: 0; }
@media (max-width: 1023px) { .auth-hall .auth-wrap { grid-template-columns: minmax(0, 1fr); } }

/* ================= fix1 (review round 2): phones, reach, and one moment per page ================= */
/* phones: the form track and its plates never grow past the card (inputs were 289 px in a 262 px form at 360) */
.auth-form, .field { grid-template-columns: minmax(0, 1fr); }
.input { min-width: 0; }
@media (max-width: 599px) { .auth-submit.btn-lg { padding-inline: var(--sp-4); } }
/* reach: 44 px targets for the small links and the check */
.auth-row .link, .auth-switch .link, .acct-foot .link, .acct-all-btn, .acct-code .link { min-height: 44px; }
.auth-row .check { align-items: center; min-height: 44px; }
.auth-row .check input { margin-top: 0; }
/* the terms check carries its own message under the sentence */
.check { flex-wrap: wrap; }
.check > span:not(.field-msg) { flex: 1 1 0; min-width: 0; }
.check .field-msg { flex-basis: 100%; min-height: 0; margin-inline-start: calc(20px + var(--sp-3)); }
.check .field-msg:empty { display: none; }

/* the crest: a plain gold rim; the ring of studs belongs to login alone, where it is a lock dial */
.auth-crest { box-shadow: 0 0 0 1px rgba(226, 169, 59, .55), 0 12px 26px -10px rgba(0, 0, 0, .85); }
.auth:not(.auth-gate) .auth-crest::before { content: none; }

/* ---------- login: the gate ---------- */
.auth-gate .auth-art img:first-child { object-position: 62% 18%; }
.auth-dune { position: absolute; inset-block: auto -24%; inset-inline: 30% -14%; height: 54%; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: radial-gradient(60% 80% at 50% 0%, #131D3C, var(--night-950) 72%);
  box-shadow: inset 0 1px 0 rgba(226, 169, 59, .3), 0 -24px 60px -34px rgba(244, 198, 92, .3); }
.auth-dune-far { inset-inline: 56% -34%; inset-block-end: -8%; height: 44%; opacity: .8; background: radial-gradient(60% 80% at 50% 0%, #1B2649, #0B1124 72%); }
@media (max-width: 599px) { .auth-dune { display: none; } }
.auth-gate .auth-card:has(.auth-submit[aria-busy="true"]) .auth-crest { box-shadow: 0 0 0 2px var(--copper-500), 0 0 30px -6px rgba(244, 198, 92, .55); }
.auth-gate .auth-card:has(.auth-submit[aria-busy="true"]) .auth-crest::before { background: repeating-conic-gradient(from 0deg, #F4C65C 0deg 3deg, transparent 3deg 15deg); }
.auth-gate .auth-card:has(.form-msg.is-bad) .auth-crest { box-shadow: 0 0 0 2px var(--ember-500), 0 12px 26px -10px rgba(0, 0, 0, .85); }

/* ---------- forgot: the messenger ---------- */
.auth-forgot .auth-art img:first-child { object-position: 100% 0; scale: 1.42; transform-origin: 100% 0; }
/* RTL: the mirrored, scaled sky keeps its moon on screen (58.7% maps it to [0, 1.42W]; at 1.52 to [-0.04W, 1.48W]) */
[dir="rtl"] .auth-forgot .auth-art img:first-child { transform-origin: 58.7% 0; }
/* only the moon and the clouds stay bright: the far caravan sinks into the night so the messenger stands alone */
.auth-forgot .auth-art::after { background: linear-gradient(180deg, transparent 0%, transparent 18%, rgba(8, 12, 26, .72) 40%, rgba(8, 12, 26, .9) 70%, var(--night-950) 100%),
  linear-gradient(90deg, rgba(8, 12, 26, .92) 0%, rgba(8, 12, 26, .6) 34%, transparent 70%); }
[dir="rtl"] .auth-forgot .auth-art::after { background: linear-gradient(180deg, transparent 0%, transparent 18%, rgba(8, 12, 26, .72) 40%, rgba(8, 12, 26, .9) 70%, var(--night-950) 100%),
  linear-gradient(270deg, rgba(8, 12, 26, .92) 0%, rgba(8, 12, 26, .6) 34%, transparent 70%); }
.auth-art .forgot-rider { z-index: 1; inset: auto; inset-block-end: 3%; inset-inline-end: 3%; width: min(46vw, 660px); height: auto; aspect-ratio: 1211 / 1000; object-fit: contain;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .85)) brightness(.9); }
.forgot-pool { position: absolute; z-index: 1; inset-block-end: 0; inset-inline-end: 0; width: min(56vw, 800px); height: 22%;
  background: radial-gradient(50% 46% at 50% 60%, rgba(244, 198, 92, .2), rgba(226, 169, 59, .05) 60%, transparent 72%); }
@media (max-width: 1023px) { .auth-art .forgot-rider, .forgot-pool { display: none; } }
.forgot-steps { position: relative; display: grid; gap: var(--sp-4); margin: var(--sp-6) 0 0; padding: 0; list-style: none; }
.forgot-steps::before { content: ""; position: absolute; inset-block: 24px; inset-inline-start: 23px; border-inline-start: 1px dashed rgba(226, 169, 59, .5); }
.forgot-steps li { position: relative; display: flex; align-items: center; gap: var(--sp-4); color: var(--text-2); font-size: .9375rem; line-height: 1.5; }
.forgot-steps .medal { --m: 48px; }
.auth-forgot .auth-form { margin-top: var(--sp-5); }
.auth-submit.is-soon { pointer-events: none; }
.auth-soon { color: var(--text-2); font-size: .875rem; text-align: center; }

/* ---------- register: the hall of names, standing on a floor ---------- */
@media (min-width: 1280px) {
  .auth-hall { --hh: min(100dvh, 1000px); }
  .hall-art .hall-heroes { inset-block: auto 0; inset-inline: auto 0; width: calc(var(--hh) * 2); height: var(--hh); max-width: none; object-fit: contain; object-position: 100% 100%; }
  .hall-art::after { content: ""; position: absolute; inset-block: auto 0; inset-inline: 28% 0; height: calc(var(--hh) * .28);
    background: linear-gradient(180deg, rgba(226, 169, 59, .12), transparent 70%), repeating-linear-gradient(90deg, rgba(226, 169, 59, .08) 0 1px, transparent 1px 120px);
    box-shadow: inset 0 1px 0 rgba(226, 169, 59, .28);
    -webkit-mask: linear-gradient(90deg, transparent, #000 30%); mask: linear-gradient(90deg, transparent, #000 30%); }
  [dir="rtl"] .hall-art::after { -webkit-mask: linear-gradient(270deg, transparent, #000 30%); mask: linear-gradient(270deg, transparent, #000 30%); }
  .auth-hall .hall-plaque { position: absolute; z-index: 2; inset-block-end: max(20px, calc(var(--hh) * .25 - 150px)); inset-inline-end: max(24px, calc(var(--hh) * .433 - 170px)); margin: 0; }
}
/* the traveller number is stamped with a gold seal */
.plaque-rank:not([hidden]) { display: inline-flex; align-items: center; gap: 10px; }
.plaque-rank::before { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--copper-300), var(--copper-500) 55%, #6E4A12); box-shadow: 0 0 0 2px #3A2408, 0 0 0 3px rgba(226, 169, 59, .4), 0 4px 10px rgba(0, 0, 0, .6); }

/* ---------- account: the open passport ---------- */
.account .auth-art img:first-child { object-position: 100% 45%; }
.account .auth-art::after { background: linear-gradient(180deg, rgba(8, 12, 26, .97) 0%, rgba(8, 12, 26, .7) 28%, transparent 48%, transparent 70%, var(--night-950) 100%),
  linear-gradient(90deg, rgba(8, 12, 26, .92), rgba(8, 12, 26, .45) 60%, transparent 82%); }
[dir="rtl"] .account .auth-art::after { background: linear-gradient(180deg, rgba(8, 12, 26, .97) 0%, rgba(8, 12, 26, .7) 28%, transparent 48%, transparent 70%, var(--night-950) 100%),
  linear-gradient(270deg, rgba(8, 12, 26, .92), rgba(8, 12, 26, .45) 60%, transparent 82%); }
/* the status is a stamp on the page */
.account .acct-state { padding: 3px 12px; border: 1.5px solid rgba(226, 169, 59, .7); border-radius: 2px; color: var(--copper-300); rotate: -4deg;
  font-family: var(--font-head); letter-spacing: .04em; box-shadow: inset 0 0 0 2px rgba(8, 12, 26, .6), inset 0 0 0 3px rgba(226, 169, 59, .25); }
:lang(ar) .account .acct-state { letter-spacing: 0; }
.account .acct-state:is([data-state="suspended"], [data-state="banned"]) { color: #F08A78; border-color: rgba(229, 83, 61, .75); box-shadow: inset 0 0 0 2px rgba(8, 12, 26, .6), inset 0 0 0 3px rgba(229, 83, 61, .25); }
.acct-soon { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--sp-3); color: var(--text-2); font-weight: 600; }
.acct-soon .icon { width: 22px; height: 22px; color: #F4C65C; }
/* long values move under their label instead of breaking inside the address */
.acct dt { flex: none; }
.acct dd { min-width: 0; overflow-wrap: normal; word-break: break-word; unicode-bidi: isolate; }
@media (max-width: 399px) { .acct > div { flex-wrap: wrap; row-gap: 2px; } .acct dd { flex: 1 0 auto; } }

@media (prefers-reduced-motion: no-preference) {
  /* login: the dial turns while the gate checks, the card shakes when it says no, the dunes drift against the art */
  .auth-gate .auth-card:has(.auth-submit[aria-busy="true"]) .auth-crest::before { animation: auth-dial 1.1s cubic-bezier(.6, 0, .2, 1) infinite; }
  @keyframes auth-dial { 0% { rotate: 0deg; } 30% { rotate: -50deg; } 60% { rotate: 40deg; } 100% { rotate: 120deg; } }
  .auth-gate .auth-card:has(.form-msg.is-bad) { animation: auth-card-shake .5s cubic-bezier(.36, .07, .19, .97); }
  @keyframes auth-card-shake { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }
  .auth-dune { animation: auth-dune-drift 30s ease-in-out infinite alternate; }
  .auth-dune-far { animation-duration: 46s; animation-direction: alternate-reverse; }
  @keyframes auth-dune-drift { to { translate: -3% 0; } }
  /* forgot: the moon breathes, the rider arrives and rides, the steps arrive one after the other */
  .auth-forgot .auth-art img:first-child { animation: auth-moon-drift 30s ease-in-out infinite alternate; }
  @keyframes auth-moon-drift { from { scale: 1.42; } to { scale: 1.52; } }
  .auth-art .forgot-rider { animation: auth-rider-in 1.4s .2s cubic-bezier(.16, 1, .3, 1) both, auth-rider-ride 2.6s 1.6s ease-in-out infinite; }
  [dir="rtl"] .auth-art .forgot-rider { animation-name: auth-rider-in-rtl, auth-rider-ride; }
  @keyframes auth-rider-in { from { opacity: 0; translate: 8% 0; } }
  @keyframes auth-rider-in-rtl { from { opacity: 0; translate: -8% 0; } }
  @keyframes auth-rider-ride { 50% { translate: 0 -7px; } }
  .forgot-pool { animation: auth-hall-breathe 5s ease-in-out infinite; }
  .forgot-steps li { animation: auth-in .7s cubic-bezier(.16, 1, .3, 1) both; }
  .forgot-steps li:nth-child(1) { animation-delay: .3s; } .forgot-steps li:nth-child(2) { animation-delay: .48s; }
  .forgot-steps::before { animation: auth-thread 1s .5s cubic-bezier(.16, 1, .3, 1) both; transform-origin: 50% 0; }
  @keyframes auth-thread { from { scale: 1 0; } }
  /* register: the traveller seal is stamped */
  .plaque-rank:not([hidden])::before { animation: auth-stamp .6s .3s cubic-bezier(.2, 1, .3, 1) both; }
  @keyframes auth-stamp { 0% { opacity: 0; scale: 2.2; rotate: -25deg; } 70% { scale: .92; } 100% { opacity: 1; scale: 1; rotate: 0deg; } }
  /* account: the status stamp lands */
  .account .acct-state { animation: auth-stamp-in .5s .5s cubic-bezier(.2, 1, .3, 1) both; }
  @keyframes auth-stamp-in { 0% { opacity: 0; scale: 1.7; } 70% { scale: .94; } 100% { opacity: 1; scale: 1; } }
}

/* ================= fix2 (review round 3) ================= */
/* reach: the founder actions (Share, Copy, Another avatar) and the picks are 44 px targets */
.founder-actions .link, .invite-row .link, .founder-poses .link { min-height: 44px; min-width: 44px; justify-content: center; }
.founder-races .race, .founder-poses .race { height: 44px; }
.auth-form > .check { min-height: 44px; align-items: center; }
.auth-form > .check input { margin-top: 0; }
.auth-switch .link { min-width: 44px; justify-content: center; }

/* forgot: the messenger's thread. A gold spark carries your request down the dashed road from the letter to the Discord seal */
.forgot-steps::after { content: ""; position: absolute; inset-block: 15px; inset-inline-start: 15px; width: 18px; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, #FFF3CC 0 2.5px, rgba(244, 198, 92, .75) 3.5px, rgba(244, 198, 92, .2) 6px, transparent 9px) 50% 0 / 18px 18px no-repeat; }
@media (prefers-reduced-motion: no-preference) {
  .forgot-steps::after { animation: auth-spark-run 3.2s 1.6s cubic-bezier(.55, 0, .45, 1) infinite; }
  @keyframes auth-spark-run { 0% { opacity: 0; translate: 0 0; } 12% { opacity: 1; } 78% { opacity: 1; translate: 0 calc(100% - 18px); } 90%, 100% { opacity: 0; translate: 0 calc(100% - 18px); } }
  .forgot-steps li:last-child .medal { animation: auth-seal-flare 3.2s 1.6s ease-out infinite; }
  @keyframes auth-seal-flare { 0%, 74%, 100% { scale: 1; } 82% { scale: 1.14; } 90% { scale: .97; } }
}
/* register: the art itself ends at the outer hero's weapon (alpha reaches x=2400 of 2400), so its outer edge fades into the night instead of a hard cut */
@media (min-width: 1280px) {
  .hall-art .hall-heroes { -webkit-mask-image: linear-gradient(90deg, transparent 44%, #000 56%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent 44%, #000 56%, #000 95%, transparent); }
}

/* ================= RECOVERY CODE (Q1665) ================= */
/* after registering: the code is shown once, framed like an engraved plate, to be copied or saved */
.recovery { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); padding: var(--sp-5); border-radius: 2px; text-align: center;
  background: radial-gradient(90% 70% at 50% 0, rgba(226, 169, 59, .12), transparent 70%), rgba(8, 12, 26, .6);
  box-shadow: inset 0 0 0 1px rgba(226, 169, 59, .4), inset 0 0 0 6px rgba(8, 12, 26, .6), inset 0 0 0 7px rgba(226, 169, 59, .14); }
.recovery-title { font-size: 1.375rem; color: var(--sand-50); }
.recovery-title:focus { outline: none; }
.recovery p { color: var(--text-2); font-size: .9375rem; }
.recovery .recovery-code { margin: var(--sp-2) auto; padding: var(--sp-3) var(--sp-4); direction: ltr; unicode-bidi: isolate; user-select: all;
  font: 600 clamp(1.125rem, .9rem + 1.2vw, 1.5rem)/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .12em; color: var(--gold-2, #F4C65C);
  background: rgba(4, 7, 16, .7); border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(226, 169, 59, .45); overflow-wrap: anywhere; }
.recovery-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-5); }
.recovery .check { justify-content: center; text-align: start; }
.recovery .btn[disabled] { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }
.recovery-msg { min-height: 1.25em; font-size: .875rem; }
/* the recovery code field: typed in capitals, read left to right in both languages */
.code-input { direction: ltr; text-transform: uppercase; letter-spacing: .08em; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.code-input::placeholder { letter-spacing: .08em; }
[dir="rtl"] .code-input { text-align: right; }
/* my account: a new code to the game mail */
.acct-recovery { margin-top: var(--sp-4); padding: var(--sp-4); border-radius: 2px; background: rgba(8, 12, 26, .5); box-shadow: inset 0 0 0 1px rgba(226, 169, 59, .22); }
.acct-recovery h2 { font-size: 1.0625rem; color: var(--sand-50); }
.acct-recovery > p { margin-top: var(--sp-2); color: var(--text-2); font-size: .875rem; }
.acct-recovery .acct-warn { display: flex; align-items: flex-start; gap: var(--sp-2); color: var(--sand-100, #EFE3C8); }
.acct-recovery .acct-warn .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--copper-300); }
.acct-rec-form { margin-top: var(--sp-3); }
.acct-rec-form .auth-submit { width: auto; }
@media (prefers-reduced-motion: no-preference) {
  .recovery { animation: auth-in .7s cubic-bezier(.16, 1, .3, 1) both; }
}
/* founder's banner actions (owner 2026-10-16): download = the gold plate, share = a narrower green plate under it, copy = a small green plate */
.founder-actions { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
.founder-actions .btn { flex: none; width: 100%; }
.founder-actions .btn-share { --h: 48px; width: 72%; align-self: center; }
.invite-row .btn-copy { --h: 44px; flex: none; min-width: 96px; font-size: 1rem; }
:lang(ar) .invite-row .btn-copy { font-size: 1.0625rem; }
/* log out buttons (owner 2026-10-16): two clear plates side by side, log out = gold, everywhere = red */
.acct-pane-account .acct-foot { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--sp-3); }
.acct-foot .btn.acct-all-btn, .acct-foot .btn.acct-out-btn { --h: 46px; width: 100%; min-width: 0; padding-inline: 12px; font-size: .9375rem; white-space: nowrap; color: #FFF1D2; }
.acct-foot .btn.acct-out-btn { color: #FFF7E0; }
:lang(ar) .acct-foot .btn.acct-all-btn, :lang(ar) .acct-foot .btn.acct-out-btn { font-size: 1rem; }
.acct-foot .btn .icon { width: 18px; height: 18px; }
@media (max-width: 420px) { .acct-pane-account .acct-foot { grid-template-columns: 1fr; } }
/* the name plaque was removed (owner 2026-10-16): its empty place waits, hidden, for the founder's banner */
.hall-plaque[hidden] { display: none !important; }

/* ---------- phones (owner review 2026-10-16, "simple like a plain account login"): one calm card the full width of the screen,
   gold lines on the top and bottom edges only, no art, no crest, no field icons; the main button centred ---------- */
@media (max-width: 599px) {
  main.auth { align-items: start; min-height: 0; padding-block: 96px var(--sp-8); background: var(--night-950); }
  main.auth .auth-art, main.auth .hall-art { display: none; }
  main.auth .auth-wrap { padding-inline: 0; }
  main.auth .auth-card { width: 100%; margin: 0; padding: var(--sp-6) 20px; border: 0; border-block: 1px solid rgba(226, 169, 59, .7); border-radius: 0;
    background: linear-gradient(180deg, rgba(18, 28, 58, .96), rgba(10, 16, 36, .98)); box-shadow: none; backdrop-filter: none; }
  main.auth .auth-card::before, main.auth .auth-card::after { content: none; }
  main.auth .auth-crest, main.auth .auth-rule { display: none; }
  main.auth .auth-title { font-size: 1.75rem; }
  main.auth .auth-lead { margin-top: var(--sp-2); font-size: .9375rem; }
  main.auth .auth-form { margin-top: var(--sp-5); }
  main.auth .input > .icon { display: none; }
  main.auth .auth-submit { width: min(100%, 300px); justify-self: center; }
  main.auth .auth-switch { margin-top: var(--sp-5); }
}

/* email codes (D-487, Q1898): the two ways on forgot.html, the 6-digit field and its send button */
.auth-way { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: rgba(7, 11, 23, .55); }
.auth-way-btn { min-height: 44px; border: 0; border-radius: 6px; background: transparent; color: var(--text-2); font: 600 .9375rem/1 var(--font-body); cursor: pointer; }
.auth-way-btn[aria-checked="true"] { background: linear-gradient(180deg, #F6CF79, #E2A93B); color: #1A1206; }
.auth-way-btn:focus-visible { outline: 2px solid #F6CF79; outline-offset: 2px; }
.otp-input { letter-spacing: .45em; font-variant-numeric: tabular-nums; }
.otp-send { justify-self: end; min-height: 44px; padding: 0; border: 0; background: none; color: #F6CF79; font: 500 .875rem/1 var(--font-body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.otp-send:disabled { color: var(--text-3); text-decoration: none; cursor: default; }
/* a hidden field stays hidden (.field sets its own display): the unused way, the closed code step */
.auth-form .field[hidden] { display: none; }

/* step 2 of sign-up (owner 2026-10-21): the emailed code in its own window */
.otp-dialog { width: min(440px, calc(100vw - 32px)); margin: auto; padding: 0; border: 1px solid var(--line); border-top: 3px solid #E2A93B; border-radius: 10px;
  background: linear-gradient(180deg, #121B36, #0B1124); color: var(--text); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .85); }
.otp-dialog::backdrop { background: rgba(4, 7, 16, .78); backdrop-filter: blur(3px); }
.otp-box { display: grid; gap: var(--sp-4); padding: var(--sp-6) var(--sp-5) var(--sp-5); text-align: center; }
.otp-medal { justify-self: center; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid #E2A93B;
  background: radial-gradient(circle at 50% 35%, #25345F, #0B1124); color: #F6CF79; }
.otp-medal .icon { width: 26px; height: 26px; }
.otp-title { font-size: 1.625rem; }
.otp-lead { margin: 0; color: var(--text-2); }
.otp-lead strong { color: var(--text); overflow-wrap: anywhere; }
.otp-box .field { text-align: start; }
.otp-big { font-size: 1.75rem; text-align: center; letter-spacing: .5em; padding-inline-start: .5em; }
.otp-confirm { justify-self: center; width: min(100%, 300px); }
.otp-row { display: flex; justify-content: space-between; gap: var(--sp-4); }
.otp-row .link { min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.otp-back { color: var(--text-2); font: 500 .875rem/1 var(--font-body); text-decoration: underline; text-underline-offset: 3px; }

.otp-paste { flex: none; min-height: 44px; margin-inline-end: 4px; padding: 0 14px; border: 1px solid #E2A93B; border-radius: 6px;
  background: rgba(226, 169, 59, .12); color: #F6CF79; font: 600 .875rem/1 var(--font-body); cursor: pointer; }
.otp-paste:hover { background: rgba(226, 169, 59, .22); }
.otp-paste:focus-visible { outline: 2px solid #F6CF79; outline-offset: 2px; }
.otp-paste[hidden] { display: none; }

/* phones (owner 2026-10-21 "fit phones better"; impeccable adapt.md: 44 px+ targets, thumb reach, safe areas, the
   keyboard never hides the box): still centred (owner), full width, scrolls inside when the keyboard is up */
@media (max-width: 599px), (pointer: coarse) {
  .otp-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
  .otp-box { gap: var(--sp-3); padding: var(--sp-5) var(--sp-4) max(var(--sp-4), env(safe-area-inset-bottom)); }
  .otp-medal { width: 48px; height: 48px; }
  .otp-title { font-size: 1.5rem; }
  .otp-lead { font-size: 1rem; }
  .otp-big { min-height: 56px; font-size: 1.75rem; letter-spacing: .35em; }
  .otp-paste { min-height: 48px; min-width: 76px; font-size: 1rem; }
  .otp-confirm { width: 100%; min-height: 56px; }
  .otp-row { flex-direction: column; gap: var(--sp-2); }
  .otp-row .link { justify-content: center; width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: 8px;
    background: rgba(7, 11, 23, .45); text-decoration: none; font-size: 1rem; }
  .otp-row .otp-send:not(:disabled) { border-color: #E2A93B; color: #F6CF79; }
}

/* a note beside a code field (code sent, resend) is information, not an error */
.field-msg.is-note { color: var(--text-2); }
.field-msg.is-note::before { display: none; }
.otp-dialog .otp-big { font-size: 1.75rem; }