/* Chaos Reborn - the two pages the launcher does not contain.
   Deliberately plain HTML/CSS with no build step and no fonts to fetch: these
   must load on a phone, on hotel wifi, and in whatever browser a player has,
   at the exact moment they are locked out of their account. */
:root {
  --ink: #e8dfcc;
  --dim: #9b8f77;
  --gold: #caa14a;
  --line: #3a2f1f;
  --panel: #171310;
  --bad: #e08a7a;
  --good: #9fd28a;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh;
  background: #0f0d0a;
  color: var(--ink);
  font: 15px/1.6 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 16px 56px;
}
.card {
  width: 100%;
  max-width: 430px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 30px 30px 26px;
}
.brand {
  text-align: center;
  border-bottom: 1px solid #2a2218;
  padding-bottom: 18px;
  margin-bottom: 22px;
}
.brand b {
  display: block;
  font: 700 21px/1.2 Georgia, "Times New Roman", serif;
  letter-spacing: .16em;
  color: #d8b968;
  text-transform: uppercase;
}
.brand span {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8a7c63;
}
h1 { font-size: 17px; margin: 0 0 6px; font-weight: 600; }
p.lead { margin: 0 0 20px; color: var(--dim); font-size: 14px; }
label {
  display: block;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 6px;
}
input {
  width: 100%;
  padding: 11px 12px;
  margin-bottom: 15px;
  background: #100d0a;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-size: 15px;
  font-family: inherit;
}
input:focus { outline: none; border-color: var(--gold); }
input::placeholder { color: #5f5747; }
button {
  width: 100%;
  padding: 13px;
  margin-top: 4px;
  background: var(--gold);
  color: #20180a;
  border: 0;
  border-radius: 6px;
  font: 700 14px/1 Arial, sans-serif;
  letter-spacing: .06em;
  cursor: pointer;
}
button:disabled { opacity: .55; cursor: default; }
.msg {
  min-height: 20px;
  margin-top: 14px;
  font-size: 14px;
  color: var(--dim);
}
.msg.bad { color: var(--bad); }
.msg.good { color: var(--good); }
.foot {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #2a2218;
  font-size: 13px;
  color: #7d7160;
  text-align: center;
}
.foot a { color: var(--gold); text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.hint { font-size: 12.5px; color: #7d7160; margin: -9px 0 15px; }

/* ─────────────────────────────────────────────────────────────────────────
   THE HOME PAGE (Fares, 2026-08-23).

   Everything above this line dresses a form in a box, which is right for
   signing up and resetting a password. The front page is not a form: it is a
   poster with one thing to press, so it gets its own layout rather than being
   squeezed into the card.

   No web fonts and no background image on purpose. The launcher's look is
   deep brown, gold and lamplight, and CSS gradients get close enough at zero
   bytes - the page has to open in a second on a phone on hotel wifi, and the
   only image worth its weight here is the button itself.
   ───────────────────────────────────────────────────────────────────────── */
body.home {
  display: block;
  padding: 0;
  /* Two lamps and a floor: warm light behind the title, a dimmer one low and
     to the right, over the near-black the rest of the site uses. */
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(202, 161, 74, 0.16) 0%, rgba(202, 161, 74, 0) 60%),
    radial-gradient(80% 50% at 85% 105%, rgba(120, 74, 180, 0.10) 0%, rgba(120, 74, 180, 0) 70%),
    #0f0d0a;
}
.hero {
  max-width: 620px;
  margin: 0 auto;
  padding: clamp(38px, 9vh, 84px) 20px 48px;
  text-align: center;
}
.mark h1 {
  margin: 0;
  line-height: 0;
}
.mark h1 img {
  /* 400, not 520 (Fares, 2026-08-24: "the logo is so big").
     The emblem's wings span nearly its whole canvas, so it reads wider than
     its number suggests - at 520 it was broader than the text column beneath
     it and took the page over. At 400 it leads the page instead of being it. */
  width: min(400px, 72vw);
  height: auto;
  /* The emblem carries its own shadow; this is the lamplight behind it, so it
     sits IN the page rather than on top of it. */
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .55))
          drop-shadow(0 0 34px rgba(202, 161, 74, .16));
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .mark h1 { color: #d8b968; -webkit-text-fill-color: #d8b968; }
}
/* Hairlines either side of the format line, drawn in CSS so they scale with
   the text instead of being an image that does not. */
.pitch {
  margin: 26px auto 30px;
  max-width: 30em;
  color: #b4a892;
  font-size: 15.5px;
  line-height: 1.75;
}
.discord {
  display: block;
  max-width: 460px;
  margin: 0 auto;
  border-radius: 14px;
  transition: transform .18s ease, filter .18s ease;
}
.discord img { display: block; width: 100%; height: auto; }
.discord:hover, .discord:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.07) drop-shadow(0 10px 22px rgba(202, 161, 74, .22));
}
.discord:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
.discord:active { transform: translateY(0); }
.under {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: #8a7c63;
}
.facts {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  text-align: left;
}
@media (min-width: 620px) {
  .facts { grid-template-columns: repeat(3, 1fr); }
}
.facts li {
  background: linear-gradient(180deg, rgba(37, 30, 22, .95), rgba(23, 19, 16, .95));
  border: 1px solid #453724;
  border-radius: 10px;
  padding: 15px 16px;
  box-shadow: inset 0 1px 0 rgba(226, 197, 133, .07);
}
.facts b {
  display: block;
  font-size: 13px;
  letter-spacing: .05em;
  color: #d8b968;
  margin-bottom: 5px;
}
.facts span { font-size: 13px; color: #a2957e; line-height: 1.55; }
.links {
  margin-top: 34px;
  font-size: 14px;
}
.links a { color: var(--gold); text-decoration: none; }
.links a:hover { text-decoration: underline; }
.links .sep { color: #4a4030; margin: 0 10px; }
@media (max-width: 460px) {
  .links .sep { display: block; height: 0; margin: 8px 0; overflow: hidden; }
}
/* The footer's one link was rendering in browser-default blue, underlined -
   the only piece of the page that did not belong to it (2026-08-24). */
.legal a {
  display: inline-block;
  margin-top: 6px;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(202, 161, 74, .3);
}
.legal a:hover { color: #f0d99a; border-bottom-color: rgba(202, 161, 74, .7); }

.legal {
  margin: 40px auto 0;
  max-width: 34em;
  padding-top: 18px;
  border-top: 1px solid #2a2218;
  font-size: 12.5px;
  line-height: 1.7;
  color: #6d6353;
}

/* ─────────────────────────────────────────────────────────────────────────
   THE DISCLAIMER PAGE (Fares, 2026-08-24).

   A page of plain prose, so the only design decisions that matter are the
   ones that make it readable: a measure of about 60 characters, generous
   leading, and nothing gold except the things that are actually links. It
   shares the front page's shell (body.home) so the lamplight and the emblem
   are identical - this should read as the same site being straight with you,
   not as a legal page bolted onto it.
   ───────────────────────────────────────────────────────────────────────── */
body.doc .hero { max-width: 760px; text-align: left; }
body.doc .mark { text-align: center; }
body.doc .mark h1 img,
body.doc .mark img { width: min(300px, 62vw); height: auto; }
body.doc .mark a { display: inline-block; line-height: 0; }

.doctitle {
  margin: 30px 0 26px;
  font: 700 clamp(19px, 3.4vw, 24px)/1.35 Georgia, "Times New Roman", serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #d8b968;
  text-align: center;
}

.prose p {
  margin: 0 0 18px;
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.85;
  color: #b8ab95;
}
.prose h2 {
  margin: 34px 0 12px;
  font: 600 13px/1.5 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8a7c63;
}
/* The one line that is not information but a request. */
.callout {
  margin: 26px 0 !important;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  background: rgba(23, 19, 16, .75);
  color: #e2d6bd !important;
  font-weight: 600;
  letter-spacing: .02em;
}
.contact a {
  font-size: 16px;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(202, 161, 74, .35);
}
.contact a:hover { color: #f0d99a; }

body.doc .links { margin-top: 40px; text-align: left; }