/* World Beyond Gods: the account and launcher pages (net-2). The site's tokens and type (web/site/src/styles/global.css): dark glass,
   thin gold lines, Cormorant Garamond over Hanken Grotesk, the two lands' palettes. */
@font-face { font-family: 'WBG Display'; src: url('/_a/fonts/cormorant.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'WBG Body'; src: url('/_a/fonts/hanken.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
:root {
  --ink-0: #0a0c10; --ink-1: #11141a; --ink-2: #181c24;
  --glass: rgba(20, 23, 30, 0.72); --line: rgba(201, 160, 78, 0.32); --line-strong: rgba(201, 160, 78, 0.62); --hi: rgba(255, 255, 255, 0.045);
  --gold: #c9a04e; --gold-2: #e0bd72; --champagne: #e8dcc0; --text: #ece6da; --text-2: #b7ae9f; --text-3: #9a9284;
  --amber: #e09a3a; --rust: #9c5530; --shallows: #5fa8a6; --sea: #2c6b74; --rift-2: #b9a2ea;
  --ok: #9fd9b0; --err: #f2a68f; --radius: 4px; --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--text); font: 400 16.5px/1.6 'WBG Body', 'Hanken Grotesk', Arial, sans-serif; -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(60% 50% at 0% 0%, rgba(224, 154, 58, 0.10), transparent 70%),
    radial-gradient(60% 50% at 100% 100%, rgba(95, 168, 166, 0.10), transparent 70%),
    radial-gradient(80% 60% at 50% -10%, rgba(154, 123, 214, 0.08), transparent 70%),
    var(--ink-0);
}
html { background: var(--ink-0); }
a { color: var(--gold-2); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--champagne); }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: 'WBG Display', 'Cormorant Garamond', Georgia, serif; font-weight: 600; color: var(--champagne); margin: 0; line-height: 1.1; text-wrap: balance; }
h1 { font-size: clamp(32px, 2.4vw + 22px, 46px); }
h2 { font-size: clamp(26px, 1.2vw + 20px, 32px); }
h3 { font-size: 23px; }
p { margin: 0 0 0.9em; } p:last-child { margin-bottom: 0; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* frame */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px clamp(18px, 4vw, 40px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.wm { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.wm img { width: 40px; height: auto; display: block; }
.wm span { font: 700 16px/1 'WBG Display', Georgia, serif; letter-spacing: 0.14em; text-transform: uppercase; color: #e3bd72;
  background: linear-gradient(180deg, #fbebbd 0%, #e6bf6c 46%, #b37a32 78%, #8c5a22 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; white-space: nowrap; }
.top .back { font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--text-2); }
.top .back:hover { color: var(--champagne); }
main { width: min(100% - 2 * clamp(16px, 4vw, 40px), 1040px); margin: clamp(28px, 5vw, 56px) auto clamp(40px, 6vw, 72px); }
.narrow { max-width: 460px; margin-inline: auto; }
.foot { text-align: center; font-size: 13px; color: var(--text-3); padding: 0 20px 36px; }
.foot a { color: var(--text-2); }

/* glass panels */
.glass { position: relative; background: var(--glass); border: 1px solid rgba(255, 255, 255, 0.06); border-top-color: var(--line); border-radius: var(--radius);
  box-shadow: inset 0 1px 0 var(--hi), 0 24px 60px -30px rgba(0, 0, 0, 0.8); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); }
.glass::before { content: ''; position: absolute; left: 14px; right: 14px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-2), transparent); opacity: 0.7; pointer-events: none; }
.panel { padding: clamp(22px, 3vw, 34px); }
.panel + .panel { margin-top: 20px; }
.kicker { font-weight: 600; font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-2); display: inline-flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.kicker::before { content: ''; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.lede { color: var(--text-2); margin-top: 8px; }
.muted { color: var(--text-3); font-size: 14px; }

/* forms */
form { display: flex; flex-direction: column; margin-top: 22px; }
form > * + * { margin-top: 16px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 14px; font-weight: 600; letter-spacing: 0.03em; }
.field .hint { font-size: 13px; color: var(--text-3); }
.input { width: 100%; min-height: 48px; padding: 11px 15px; font: inherit; color: var(--text); background: rgba(5, 6, 9, 0.72); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius); transition: border-color 0.2s, box-shadow 0.2s; }
.input:focus { outline: none; border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(201, 160, 78, 0.22); }
.input[aria-invalid='true'] { border-color: rgba(242, 166, 143, 0.7); }
.check { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--text-2); }
.check input { width: 19px; height: 19px; margin-top: 3px; accent-color: var(--gold); flex: none; }
.ts { min-height: 0; } /* Turnstile sizes its own frame when it shows; an invisible pass takes no room */
.status { min-height: 1.5em; font-size: 15px; font-weight: 500; margin-bottom: 0; }
form > .status:empty, form > .ts:empty { min-height: 0; margin-top: 0; } /* an empty line takes no room; it stays in the page for the screen reader */
.email-h { font-size: clamp(20px, 0.8vw + 16px, 25px); overflow-wrap: anywhere; line-height: 1.2; }
.status.ok { color: var(--ok); } .status.err { color: var(--err); }
.links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; font-size: 14.5px; }
.links button, .linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--gold-2); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.links button:hover, .linkbtn:hover { color: var(--champagne); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; font: 600 14.5px/1 'WBG Body', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: #17120a;
  background: linear-gradient(180deg, #e7c47a, #c99a48); border: 1px solid #f0d394; border-radius: var(--radius);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 10px 30px -10px rgba(224, 154, 58, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.45); cursor: pointer; white-space: nowrap; transition: filter 0.2s, transform 0.2s var(--ease); }
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); color: #17120a; }
.btn:disabled { filter: grayscale(0.6) brightness(0.7); cursor: wait; transform: none; }
.btn.ghost { color: var(--champagne); background: rgba(10, 12, 16, 0.35); border-color: var(--line-strong); box-shadow: inset 0 1px 0 var(--hi); }
.btn.ghost:hover { color: #fff; border-color: var(--gold-2); background: rgba(201, 160, 78, 0.1); }
.btn.danger { color: #ffd9cc; background: rgba(138, 42, 36, 0.35); border-color: rgba(242, 166, 143, 0.55); box-shadow: none; }
.btn.danger:hover { background: rgba(138, 42, 36, 0.55); color: #fff; }
.btn.sm { min-height: 38px; padding: 0 15px; font-size: 12.5px; }
.btn.wide { width: 100%; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.mt { margin-top: 16px; } .mt-s { margin-top: 10px; } .m0 { margin: 0; }

/* banners */
.banner { padding: 13px 16px; border-radius: var(--radius); border: 1px solid; font-size: 15px; margin-bottom: 18px; }
main:not(.wide) .banner { max-width: 460px; margin-inline: auto; } /* a narrow view gets a banner as wide as its panel */
.banner.ok { border-color: rgba(159, 217, 176, 0.45); background: rgba(40, 80, 55, 0.25); color: #cdebd6; }
.banner.err { border-color: rgba(242, 166, 143, 0.45); background: rgba(120, 40, 30, 0.25); color: #f6cfc2; }

/* the account */
.grid2 { display: grid; gap: 20px; }
@media (min-width: 900px) { .grid2 { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; } }
.head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 10px 16px; }
.count { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.roster { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.char { display: grid; grid-template-columns: 6px 1fr auto; gap: 0 14px; align-items: center; padding: 12px 14px 12px 0; background: rgba(8, 10, 14, 0.55); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: var(--radius); }
.char .band { align-self: stretch; grid-row: span 3; margin: -12px 0; border-radius: var(--radius) 0 0 var(--radius); } /* the faction's colour runs the card's whole height, the rename form included */
.char.hornbound .band { background: linear-gradient(180deg, var(--amber), var(--rust)); }
.char.tidecrowned .band { background: linear-gradient(180deg, var(--shallows), var(--sea)); }
.char .nm { font: 600 23px/1.1 'WBG Display', Georgia, serif; color: var(--champagne); overflow-wrap: anywhere; }
.char .meta { font-size: 13.5px; color: var(--text-3); margin-top: 3px; }
.char .meta b { font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; }
.char.hornbound .meta b { color: var(--amber); } .char.tidecrowned .meta b { color: var(--shallows); }
.char.pending { opacity: 0.78; border-style: dashed; }
.char.pending .nm { text-decoration: line-through; text-decoration-color: rgba(242, 166, 143, 0.6); }
.char .acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.empty { margin-top: 18px; padding: 22px; text-align: center; color: var(--text-3); border: 1px dashed rgba(255, 255, 255, 0.12); border-radius: var(--radius); }
.inline-form { margin: 10px 0 0; grid-column: 2 / 4; }
.inline-form > * + * { margin-top: 10px; }
.inline-form .row { gap: 8px; }

/* the faction picker */
.factions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border: 0; padding: 0; }
.factions legend { font-size: 14px; font-weight: 600; letter-spacing: 0.03em; margin-bottom: 7px; padding: 0; }
.fac { position: relative; display: block; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius); overflow: hidden; min-height: 190px; background: #0c0e13; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s var(--ease); }
.fac input { position: absolute; opacity: 0; inset: 0; cursor: pointer; z-index: 1; margin: 0; }
.fac img, .fac .cap { pointer-events: none; } /* the radio takes the click (the replay in a real browser found the picture over it) */
.fac img { position: absolute; right: 50%; transform: translateX(50%); bottom: -6px; height: 182px; width: auto; filter: saturate(0.9) brightness(0.86); transition: filter 0.25s; }
.fac .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 10px 9px; text-align: center; font: 700 18px/1 'WBG Display', Georgia, serif; letter-spacing: 0.06em; text-transform: uppercase; background: linear-gradient(180deg, transparent, rgba(5, 6, 9, 0.92) 55%); }
.fac.hornbound { background: radial-gradient(90% 70% at 50% 85%, rgba(224, 154, 58, 0.26), transparent 70%), #0c0e13; }
.fac.tidecrowned { background: radial-gradient(90% 70% at 50% 85%, rgba(95, 168, 166, 0.28), transparent 70%), #0c0e13; }
.fac.hornbound .cap { color: var(--amber); } .fac.tidecrowned .cap { color: var(--shallows); }
.fac:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, 0.2); }
.fac:has(input:checked) { border-color: var(--gold-2); box-shadow: 0 0 0 2px rgba(201, 160, 78, 0.35); }
.fac:has(input:checked) img { filter: none; }
.fac:has(input:focus-visible) { outline: 2px solid var(--gold-2); outline-offset: 3px; }

.privacy { font-size: 14px; color: var(--text-2); }
.privacy ul { margin: 8px 0 0; padding-left: 18px; }
.privacy li { margin: 3px 0; }
.danger-zone { border-top: 1px solid rgba(242, 166, 143, 0.25); margin-top: 18px; padding-top: 18px; }
dialog { color: var(--text); background: var(--ink-1); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; width: min(92vw, 440px); }
dialog::backdrop { background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(3px); }

/* the launcher's window */
body.launcher { display: grid; min-height: 100vh; place-items: center; }
body.launcher main { margin: 24px auto; width: min(100% - 32px, 420px); }
body.launcher .crest { display: block; width: 76px; height: auto; margin: 0 auto 10px; }
body.launcher h1 { text-align: center; font-size: 30px; }
body.launcher .wmline { text-align: center; font: 700 13px/1 'WBG Display', Georgia, serif; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-2); margin-bottom: 18px; }
@media (max-width: 560px) {
  .top .back { font-size: 12.5px; }
  .wm span { font-size: 13px; letter-spacing: 0.1em; }
  .wm img { width: 32px; }
  .char { grid-template-columns: 5px 1fr; padding-right: 12px; }
  .char .acts { grid-column: 2; justify-content: flex-start; margin-top: 10px; }
  .inline-form { grid-column: 2; }
  .fac { min-height: 168px; } .fac img { height: 160px; }
  .fac .cap { font-size: 15px; letter-spacing: 0.03em; padding-inline: 4px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }