/**
 * The welcome page.
 *
 * Self-contained on purpose. `styles.css` is the game's visual system and is
 * loaded here for the brand lockup and the type scale, but two things in it are
 * wrong for a landing page and are overridden below: it is light by default
 * (the night theme lives in `responsive.css`, which this page does not load),
 * and it sets `body { min-width: 1240px }`, which is right for a dashboard with
 * a map in the middle and wrong for a page somebody may open on a phone.
 *
 * Everything here is prefixed `welcome-` so it cannot reach into the game.
 */

:root {
  --w-bg: #101a17;
  --w-panel: #16241f;
  --w-panel-soft: #1b2c26;
  --w-line: #294038;
  --w-ink: #dde8dd;
  --w-dim: #8fa79a;
  --w-gold: #dfab58;
  --w-mint: #83b5a0;
  --w-rose: #c77d72;
}

/* the two overrides named above */
body.welcome-body {
  min-width: 0;
  background: var(--w-bg);
  color: var(--w-ink);
  font-family: Manrope, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.welcome-body .hidden { display: none !important; }

/* `.welcome-button` sets `display: inline-block`, which is more specific than
   the browser's own `[hidden] { display: none }` — so a button marked hidden in
   the markup showed anyway. This is why "Continue your realm" appeared for a
   player with nothing saved. */
.welcome-body [hidden] { display: none !important; }

/* ---------------------------------------------------------------- */
/* the bar across the top                                            */
/* ---------------------------------------------------------------- */

.welcome-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 18px 30px;
  background: #18312c;
  border-bottom: 1px solid var(--w-line);
}

.welcome-top h1 {
  font: 800 24.5px 'Playfair Display', serif;
  line-height: 1;
  margin: 1px 0 0;
  color: #e9f0e5;
}

.welcome-account {
  display: flex;
  align-items: center;
  gap: 10px;
}

.welcome-who {
  font: 500 13px 'DM Mono', monospace;
  color: var(--w-mint);
}

.welcome-muted { color: var(--w-dim); font-size: 13px; }

/* ---------------------------------------------------------------- */
/* the page                                                          */
/* ---------------------------------------------------------------- */

.welcome-main {
  flex: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 24px 56px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.welcome-hero { text-align: center; padding: 18px 0 10px; }

.welcome-hero .eyebrow {
  font: 500 11px 'DM Mono', monospace;
  letter-spacing: 1.6px;
  color: var(--w-gold);
  margin: 0 0 14px;
}

.welcome-hero h2 {
  font: 800 clamp(28px, 4.4vw, 46px) 'Playfair Display', serif;
  line-height: 1.16;
  margin: 0 0 18px;
  color: #f0f5ee;
}

.welcome-lede {
  max-width: 620px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.68;
  color: var(--w-dim);
}

.welcome-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 26px 0 12px;
}

.welcome-fineprint {
  font: 11.5px 'DM Mono', monospace;
  letter-spacing: 0.4px;
  color: #6d8478;
  margin: 8px 0 0;
  line-height: 1.6;
}

/* ---------------------------------------------------------------- */
/* buttons and fields                                                */
/* ---------------------------------------------------------------- */

.welcome-button {
  display: inline-block;
  border: 1px solid var(--w-line);
  background: var(--w-panel-soft);
  color: var(--w-ink);
  border-radius: 3px;
  padding: 11px 18px;
  font: 600 14px Manrope, sans-serif;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s, border-color .18s, transform .18s;
}

.welcome-button:hover:not(:disabled) {
  background: #21352d;
  border-color: #3c5b4f;
  transform: translateY(-1px);
}

.welcome-button:disabled { opacity: .45; cursor: not-allowed; }

.welcome-button.primary {
  background: var(--w-gold);
  border-color: var(--w-gold);
  color: #23301f;
  padding: 13px 26px;
  font-size: 15px;
}

.welcome-button.primary:hover { background: #e9bb70; border-color: #e9bb70; }

.welcome-button.subtle {
  background: transparent;
  font-size: 13px;
  padding: 8px 13px;
}

/* A code is read aloud down a phone, so it is set wide and unambiguous rather
   than small and tidy. Same reasoning as the code line in the game's panel. */
.welcome-code {
  font-family: ui-monospace, 'DM Mono', Consolas, monospace;
  font-size: 18px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  width: 10.5ch;
  padding: 10px 12px;
  color: var(--w-ink);
  background: #0d1613;
  border: 1px solid var(--w-line);
  border-radius: 3px;
}

.welcome-code.is-long { width: 11ch; letter-spacing: 0.16em; font-size: 16px; }
.welcome-code:focus { outline: none; border-color: var(--w-gold); }

/* ---------------------------------------------------------------- */
/* cards                                                             */
/* ---------------------------------------------------------------- */

.welcome-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
}

.welcome-column { display: flex; flex-direction: column; gap: 22px; }

.welcome-card {
  background: var(--w-panel);
  border: 1px solid var(--w-line);
  border-radius: 4px;
  padding: 22px 22px 20px;
}

.welcome-card h3 {
  font: 700 18px 'Playfair Display', serif;
  margin: 0 0 8px;
  color: #eef4ec;
}

.welcome-note {
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--w-dim);
  margin: 0 0 16px;
}

.welcome-join { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.welcome-invite {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--w-line);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.welcome-invite label {
  flex-basis: 100%;
  font-size: 12.5px;
  color: var(--w-gold);
  margin-bottom: 2px;
}

.welcome-result {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.55;
  min-height: 1.2em;
  color: var(--w-dim);
}

.welcome-result.is-bad { color: var(--w-rose); }
.welcome-result.is-good { color: var(--w-mint); }

/* ---------------------------------------------------------------- */
/* the list of open kingdoms                                         */
/* ---------------------------------------------------------------- */

.welcome-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.welcome-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--w-panel-soft);
  border-radius: 3px;
}

.welcome-kingdom { display: flex; flex-direction: column; gap: 2px; margin-right: auto; }
.welcome-kingdom strong { font-size: 14px; }

.welcome-empty {
  color: var(--w-dim);
  font-size: 13px;
  line-height: 1.6;
  background: transparent !important;
}

.welcome-tag {
  font: 10px 'DM Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(223, 171, 88, .16);
  color: var(--w-gold);
}

/* ---------------------------------------------------------------- */
/* the hall                                                          */
/* ---------------------------------------------------------------- */

.welcome-chat-card { display: flex; flex-direction: column; }

.welcome-chat {
  list-style: none;
  margin: 0 0 12px;
  padding: 10px;
  /* fixed height so the page does not jump about as people talk */
  height: 320px;
  overflow-y: auto;
  background: #0d1613;
  border: 1px solid var(--w-line);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.welcome-chat li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13.5px;
  line-height: 1.5;
}

.welcome-chat li.is-mine .welcome-chat-who { color: var(--w-gold); }

.welcome-chat-when {
  font: 10.5px 'DM Mono', monospace;
  color: #5d7369;
  flex: none;
}

/* The name is the mute control: there is nowhere else to put it, and muting is
   the only thing a player can actually do about somebody here. */
.welcome-chat-who {
  border: 0;
  background: none;
  padding: 0;
  font: 600 13px Manrope, sans-serif;
  color: var(--w-mint);
  cursor: pointer;
  flex: none;
}

.welcome-chat-who:hover { text-decoration: underline; }

.welcome-chat-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.welcome-say { display: flex; gap: 10px; }

.welcome-say input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  font: 14px Manrope, sans-serif;
  color: var(--w-ink);
  background: #0d1613;
  border: 1px solid var(--w-line);
  border-radius: 3px;
}

.welcome-say input:focus { outline: none; border-color: var(--w-gold); }
.welcome-say input:disabled { opacity: .5; }

/* ---------------------------------------------------------------- */
/* what is in the game                                               */
/* ---------------------------------------------------------------- */

.welcome-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px 26px;
}

.welcome-grid h4 {
  font: 700 14.5px Manrope, sans-serif;
  margin: 0 0 6px;
  color: var(--w-gold);
}

.welcome-grid p {
  margin: 0;
  font-size: 13.2px;
  line-height: 1.64;
  color: var(--w-dim);
}

/* ---------------------------------------------------------------- */

.welcome-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 30px;
  border-top: 1px solid var(--w-line);
  color: #6d8478;
  font: 11.5px 'DM Mono', monospace;
}

/* ---------------------------------------------------------------- */
/* narrow                                                            */
/* ---------------------------------------------------------------- */

@media (max-width: 860px) {
  .welcome-columns { grid-template-columns: 1fr; }
  .welcome-main { padding: 28px 16px 40px; }
  .welcome-top { padding: 14px 16px; }
  .welcome-foot { padding: 14px 16px; }
  .welcome-chat { height: 260px; }
}

/* ---------------------------------------------------------------- */
/* who is here                                                       */
/* ---------------------------------------------------------------- */

/* The badge has padding and a background of its own, so with no number in it
   it still drew as a small grey pill beside the heading. */
.welcome-count:empty { display: none; }

.welcome-count {
  font: 500 12px 'DM Mono', monospace;
  color: var(--w-gold);
  background: rgba(223, 171, 88, .14);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: middle;
}

.welcome-here {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.welcome-here li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  background: var(--w-panel-soft);
  border-radius: 999px;
  font-size: 13px;
}

.welcome-here li.is-you { border: 1px solid var(--w-line); }

/* A live dot, because "here now" is the whole point of the list and a name on
   its own does not say it. */
.welcome-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--w-mint);
  box-shadow: 0 0 0 3px rgba(131, 181, 160, .18);
  flex: none;
}

.welcome-here-name { white-space: nowrap; }

/* ---------------------------------------------------------------- */
/* choosing a crown                                                  */
/* ---------------------------------------------------------------- */
/* Hidden until "Take the crown" is pressed. The grid collapses to one
   column well before phone width, because a card that carries two
   paragraphs of history has nothing to gain from being 160px wide. */

.welcome-crowns {
  border-top: 1px solid var(--w-line);
  padding-block: 28px 8px;
}

.welcome-crowns h3 {
  margin: 0 0 6px;
  font-size: 21px;
  color: var(--w-gold);
  letter-spacing: .01em;
}

.crown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.crown-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 15px 16px 16px;
  border: 1px solid var(--w-line);
  border-radius: 10px;
  background: var(--w-panel);
}

.crown-card:hover { border-color: var(--w-mint); }

.crown-head {
  display: flex;
  align-items: center;
  gap: 11px;
}

.crown-head strong { display: block; font-size: 16.5px; }

.crown-head small {
  display: block;
  color: var(--w-dim);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.crown-crest {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--w-line);
  border-radius: 7px;
  background: var(--w-panel-soft);
  color: var(--w-gold);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
}

.crown-summary { margin: 0; font-size: 14px; line-height: 1.5; }

.crown-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crown-tags li {
  padding: 2.5px 8px;
  border: 1px solid var(--w-line);
  border-radius: 999px;
  background: var(--w-panel-soft);
  color: var(--w-dim);
  font-size: 11.5px;
}

.crown-line {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--w-dim);
}

.crown-line b { color: var(--w-ink); font-weight: 600; }

.crown-lore summary {
  cursor: pointer;
  color: var(--w-mint);
  font-size: 13px;
  padding: 3px 0;
}

.crown-lore p {
  margin: 9px 0 0;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--w-dim);
}

.crown-people b { color: var(--w-ink); }

/* The button is the decision, so it sits at the bottom of every card at the
   same height whatever the history above it runs to. */
.crown-card .welcome-button { margin-top: auto; text-align: center; }