/* Ragnarok 3: Genesis registration page (reg.playgenesis3.is/register), Genesis auth look (2026-10-21).
   Ported from the player console v2 (console-ui-v2/app/css/app.css): brand tokens, Orpheus / Indecisive faces, the
   .auth-page / .auth-art / .auth-header / .auth-grid / .auth-welcome / .auth-benefits / .auth-card / .auth-footer block,
   buttons, fields, notices and the auth breakpoints. Fonts and art are self-hosted next to this file (fonts/, img/).
   The page's inline JS toggles these classes, keep them: input.error, .error-text.show, .hint-text.show, .hidden. */

@font-face { font-family: 'Orpheus'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Orpheus-Regular.otf') format('opentype'); }
@font-face { font-family: 'Indecisive'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Indecisive-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Indecisive'; font-style: normal; font-weight: 600 800; font-display: swap; src: url('fonts/Indecisive-Bold.woff2') format('woff2'); }
/* Noto is only the fallback face (OFL, fonts/OFL.txt): fetched for a glyph the brand faces lack. */
@font-face {
  font-family: 'Noto Sans'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('fonts/NotoSans-latin-wght400-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Serif'; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url('fonts/NotoSerif-latin-wght500-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --navy: #0f2550;
  --blue: #1b49ae;
  --blue-hover: #123c9c;
  --gold-text: #7a5f2e;      /* gold text on paper, 5.5:1 */
  --gold-text-deep: #5c4719; /* gold text over the sign-in art */
  --gold-line: #d8caaa;
  --ink: #1a2842;
  --muted: #5e6577;          /* 5.35:1 on paper */
  --paper: #f7f5f0;
  --white: #ffffff;
  --line-input: #8d8a80;     /* 3.4:1 against white (non-text contrast) */
  --ok-fg: #357752;
  --ok-bg: #edf3e6;
  --ok-line: #c2d3b8;
  --err-fg: #9c3b3b;
  --err-bg: #fbecea;
  --err-line: #e6b9b3;
  --focus: #9a7535;
  --serif: 'Orpheus', 'Noto Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Indecisive', 'Noto Sans', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 15px; line-height: 1.5; overflow-wrap: break-word;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: var(--blue); }
a:hover { color: var(--blue-hover); }
h1, h2 { margin: 0; font-family: var(--serif); font-weight: 400; }
p { margin: 0; }
svg.icon { width: 16px; height: 16px; flex-shrink: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.auth-page :focus-visible { outline-color: var(--navy); }
.hidden { display: none !important; }

.eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: 11px; letter-spacing: 0.19em; text-transform: uppercase; font-weight: 600; color: var(--gold-text);
}
.eyebrow::before { content: ''; width: 22px; height: 1px; background: currentColor; flex: 0 0 auto; }

/* ---------- the Genesis auth page ---------- */
.auth-page {
  position: relative; isolation: isolate; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 120px 30px 70px; background: #e8f1ee url('img/sky.webp') center / cover no-repeat; overflow: hidden;
}
.auth-art {
  position: fixed; z-index: 0; bottom: -12%; left: -8%; height: 120vh; aspect-ratio: 1920 / 2024; max-width: 100vw; pointer-events: none;
  background: url('img/ranger.webp') left bottom / contain no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000, #000 65%, transparent 90%);
  mask-image: linear-gradient(90deg, #000, #000 65%, transparent 90%);
}
.auth-page::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #eef5e6a3, #edf3e46b 45%, #dbe7e5f5 85%); }
.auth-header { position: absolute; z-index: 3; top: 22px; left: 42px; right: 42px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.auth-logo { display: block; width: 180px; height: 111px; background: url('img/logo.webp') left center / contain no-repeat; }
.auth-grid { position: relative; z-index: 2; width: 100%; max-width: 1100px; display: grid; grid-template-columns: 1fr 440px; gap: 70px; align-items: center; }
.auth-welcome { align-self: start; padding-top: 70px; color: #173366; }
.auth-welcome h1 { font-size: 69px; line-height: 1.05; max-width: 480px; margin-top: 16px; text-shadow: 0 2px 20px #fff7; }
.auth-welcome h1 em { font-style: italic; }
.auth-welcome .lead { max-width: 340px; margin-top: 20px; line-height: 1.8; font-size: 15px; color: #26385a; }
.auth-benefits { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: #2c4a52; }
.auth-benefits li { display: flex; align-items: center; gap: 10px; }
.auth-benefits svg.icon { color: #3f6b3a; }
.auth-card {
  position: relative; min-width: 0; padding: 43px; background: #fffdf6f2;
  border: 1px solid #c3b18d; box-shadow: 0 10px 60px #0f255012;
}
.auth-card::before { content: ''; position: absolute; inset: 7px; border: 1px solid var(--gold-line); pointer-events: none; }
.auth-card > * { position: relative; }
.auth-footer { position: absolute; z-index: 3; left: 0; right: 0; bottom: 18px; margin: 0; padding: 0 16px; text-align: center; font-size: 12px; color: #3f4f57; }
@media (min-width: 821px) {
  /* the welcome column is over the ranger art: keep every line of text at 4.5:1 or better */
  .auth-page::after { background: linear-gradient(90deg, #eef5e6e6, #edf3e4d9 40%, #dbe7e5f5 85%); }
  .auth-benefits, .auth-footer { color: var(--ink); }
  .auth-welcome .eyebrow { color: var(--gold-text-deep); }
}

/* ---------- the card: heading, notices, the registration form ---------- */
.heading { margin: 12px 0 24px; }
.heading h2 { font-size: 35px; line-height: 1.1; color: #223d70; }
.heading p { margin-top: 10px; color: var(--muted); font-size: 14px; line-height: 1.7; }

.notice {
  margin: 0 0 16px; padding: 13px 15px; font-size: 13px; line-height: 1.6;
  border: 1px solid var(--err-line); background: var(--err-bg); color: var(--err-fg);
}
#signup-notice { margin: 0; }
.notice.success { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-fg); }

.field { margin-bottom: 16px; }
.input-row { position: relative; }
.auth-card input {
  display: block; width: 100%; min-height: 46px; margin: 0; padding: 0 13px; font-size: 15px;
  border: 1px solid var(--line-input); border-radius: 0; background: var(--white); color: var(--ink);
  transition: border-color 0.18s, box-shadow 0.18s;
}
.auth-card input::placeholder { color: var(--muted); opacity: 1; }
.auth-card input:focus { border-color: var(--blue); }
.auth-card input:focus-visible { outline-offset: 2px; }
.auth-card input.error { border-color: var(--err-fg); box-shadow: inset 0 0 0 1px var(--err-fg); }
.error-text { display: none; margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--err-fg); }
.error-text.show { display: block; }
.hint-text { display: none; margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--gold-text); }
.hint-text.show { display: block; }

.code-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 8px; }
.code-btn {
  min-height: 46px; padding: 0 12px; border: 1px solid #cbd1db; background: #fcfcfa; color: #294b85;
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em; transition: background 0.18s, border-color 0.18s;
}
.code-btn:hover { background: #edf1f8; border-color: #9fb0cf; color: var(--blue-hover); }
.code-btn:disabled { opacity: 0.6; background: #fcfcfa; border-color: #cbd1db; color: #294b85; }

.ref-link-box { margin-top: 12px; }
.ref-link-label { margin-bottom: 6px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--ok-fg); }
.ref-link-row { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 8px; }
.auth-card .ref-link-row input { min-height: 40px; padding: 0 10px; font-size: 13px; border-color: var(--ok-line); }
.ref-link-row .code-btn { min-height: 40px; }

/* min-width 0: the fixed 304 px widget must not widen the card on a phone (it is centred and scaled below instead) */
.recaptcha-row { display: flex; justify-content: center; min-width: 0; margin: 4px 0 16px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 20px;
  border: 1px solid #cbd1db; background: #fcfcfa; color: #294b85; font-size: 14px; letter-spacing: 0.01em;
  transition: background 0.18s, transform 0.18s, border-color 0.18s;
}
.btn-primary { color: var(--white); background: var(--blue); border-color: #244c9a; box-shadow: inset 0 0 0 3px #ffffff0a; font-weight: 600; }
.btn-primary:hover { color: var(--white); background: var(--blue-hover); transform: translateY(-1px); }
.btn-primary:disabled { background: #8fa0c6; border-color: #8fa0c6; color: #f6f7fb; transform: none; }

.links { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 22px; margin-top: 14px; font-size: 14px; }
.link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--blue); text-decoration: none; }
.link:hover { color: var(--blue-hover); text-decoration: underline; }

/* ---------- breakpoints (the console's auth breakpoints) ---------- */
@media (max-width: 1100px) {
  .auth-grid { gap: 35px; grid-template-columns: 1fr 410px; }
  .auth-welcome h1 { font-size: 58px; }
  .auth-card { padding: 36px; }
}
@media (max-width: 820px) {
  .auth-page { padding-top: 150px; }
  .auth-grid { grid-template-columns: minmax(0, 1fr); max-width: 440px; }
  /* phones and tablets: the welcome column stays for screen readers only */
  .auth-welcome { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  /* the portrait scene instead of the big cut-out */
  .auth-art { left: -25%; opacity: 0.5; aspect-ratio: 768 / 949; background-image: url('img/ranger-scene.webp'); -webkit-mask-image: linear-gradient(0deg, transparent, #000 25%); mask-image: linear-gradient(0deg, transparent, #000 25%); }
  .auth-header { left: 22px; right: 22px; }
  .auth-logo { width: 150px; height: 93px; }
}
@media (max-width: 480px) {
  .auth-page { padding: 140px 16px 70px; }
  .auth-card { padding: 34px 24px; }
  .heading h2 { font-size: 31px; }
  .auth-header { left: 16px; right: 16px; }
  .auth-logo { width: 130px; height: 80px; }
  .auth-art { height: 100vh; left: -30%; bottom: -8%; }
  .code-row { grid-template-columns: minmax(0, 1fr) 124px; }
}
@media (max-width: 400px) {
  .auth-card { padding: 30px 16px; }
  .code-row { grid-template-columns: minmax(0, 1fr) 112px; }
  .code-btn { padding: 0 8px; font-size: 12px; }
  .auth-card input { padding: 0 11px; }
}
/* the reCAPTCHA widget is a fixed 304 px iframe: shrink it where the card is narrower (it needs 370 px of viewport) */
@media (max-width: 369px) { .recaptcha-row { transform: scale(0.94); transform-origin: 50% 0; margin-bottom: 12px; } }
@media (max-width: 349px) { .recaptcha-row { transform: scale(0.86); margin-bottom: 6px; } }
@media (max-width: 329px) { .recaptcha-row { transform: scale(0.8); margin-bottom: 2px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  .btn-primary:hover { transform: none; }
}