/* Wayfarer's Rest theme, shared by every page (served at /theme.css). It follows WoW: Forever's site: painted key art that
   melts into an indigo night, torn brown-paper sections, cream filigree frames, gold calls to action, carved serif
   capitals. The launcher (ClassicBetaEmu contrib/launcher/src/styles.css) repeats these tokens: change both. */

:root {
  /* Placeholder art, hotlinked from the Forever page until we have our own: swap the urls here (and the image
     origin in the pages' CSP, httpapi.artOrigin) */
  --art-masthead: url("https://blz-contentstack-images.akamaized.net/v3/assets/blt9c12f249ac15c7ec/blt27ce9eca34bd523d/6aa1eb902c0580208d273e42/masthead-art-md.jpg");
  --art-join: url("https://blz-contentstack-images.akamaized.net/v3/assets/blt9c12f249ac15c7ec/blt86ec9f1909d2e4f3/6a99ff068102310aeb81e0de/Skyborne-BG.jpg");
  --art-paper: url("https://blz-contentstack-images.akamaized.net/v3/assets/blt9c12f249ac15c7ec/blt3be5fbbd8ab0160d/6a9bc736f8f1240c84bcb8fd/paper-bg.jpg");

  --night-950: #050a1c;
  --night-900: #0a1430;
  --night-800: #10204a;
  --night-700: #1b2f63;
  --paper: #5f4f37;
  --paper-deep: #3f3324;
  --ink: #1b1405;
  --cream: #f3eee2;
  --cream-2: #ebdec2;
  --tan: #c6af8d;
  --muted: #a9b2cc;
  --gold: #f7b90a;
  --gold-hi: #ffec71;
  --gold-lo: #b97f00;
  --teal: #3fb7dc;
  --line: rgb(235 222 194 / .22);
  --line-strong: rgb(235 222 194 / .45);
  --well: rgb(3 8 22 / .55);
  --alliance: #4a7fd1;
  --horde: #c8403a;
  --ok: #49d36a;
  --error: #ff8a7a;

  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --body: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --corner-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform=''%3E%3Cg fill='none' stroke='%23ebdec2' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M3 40 V20 C3 9 9 3 20 3 H40'/%3E%3Cpath d='M9 26 C9 14 14 9 26 9'/%3E%3Cpath d='M14 21 C14 15.5 16.5 13 21 13 C24.5 13 25.5 16.5 23 18 C21.5 19 19.5 18 20 16.5'/%3E%3C/g%3E%3Cpath d='M3 3 L7 5.5 L5.5 7 Z' fill='%23ebdec2'/%3E%3C/g%3E%3C/svg%3E");
  --corner-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='translate%2840 0%29 scale%28-1 1%29'%3E%3Cg fill='none' stroke='%23ebdec2' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M3 40 V20 C3 9 9 3 20 3 H40'/%3E%3Cpath d='M9 26 C9 14 14 9 26 9'/%3E%3Cpath d='M14 21 C14 15.5 16.5 13 21 13 C24.5 13 25.5 16.5 23 18 C21.5 19 19.5 18 20 16.5'/%3E%3C/g%3E%3Cpath d='M3 3 L7 5.5 L5.5 7 Z' fill='%23ebdec2'/%3E%3C/g%3E%3C/svg%3E");
  --corner-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='translate%280 40%29 scale%281 -1%29'%3E%3Cg fill='none' stroke='%23ebdec2' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M3 40 V20 C3 9 9 3 20 3 H40'/%3E%3Cpath d='M9 26 C9 14 14 9 26 9'/%3E%3Cpath d='M14 21 C14 15.5 16.5 13 21 13 C24.5 13 25.5 16.5 23 18 C21.5 19 19.5 18 20 16.5'/%3E%3C/g%3E%3Cpath d='M3 3 L7 5.5 L5.5 7 Z' fill='%23ebdec2'/%3E%3C/g%3E%3C/svg%3E");
  --corner-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='translate%2840 40%29 scale%28-1 -1%29'%3E%3Cg fill='none' stroke='%23ebdec2' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M3 40 V20 C3 9 9 3 20 3 H40'/%3E%3Cpath d='M9 26 C9 14 14 9 26 9'/%3E%3Cpath d='M14 21 C14 15.5 16.5 13 21 13 C24.5 13 25.5 16.5 23 18 C21.5 19 19.5 18 20 16.5'/%3E%3C/g%3E%3Cpath d='M3 3 L7 5.5 L5.5 7 Z' fill='%23ebdec2'/%3E%3C/g%3E%3C/svg%3E");
  --edge-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 20' preserveAspectRatio='none'%3E%3Cpath d='M0 7.2 L8 10.5 L14 9.4 L24 4.6 L35 4.4 L45 4.7 L52 8.2 L66 5.2 L75 10.3 L90 9.8 L100 13.8 L107 12.6 L116 5.4 L123 7.1 L137 5.8 L149 10.4 L158 9.5 L165 4.6 L173 10.8 L183 7.1 L195 8.5 L204 11.9 L217 6.4 L229 9.3 L244 11.3 L253 13.8 L260 8.2 L273 5.5 L284 4.4 L297 11.6 L309 12.8 L318 11.0 L330 9.8 L340 12.4 L356 8.7 L368 4.6 L381 10.5 L397 12.2 L400 9 V20 H0Z'/%3E%3C/svg%3E");
  --edge-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 20' preserveAspectRatio='none'%3E%3Cpath transform='translate%280 20%29 scale%281 -1%29' d='M0 7.2 L8 10.5 L14 9.4 L24 4.6 L35 4.4 L45 4.7 L52 8.2 L66 5.2 L75 10.3 L90 9.8 L100 13.8 L107 12.6 L116 5.4 L123 7.1 L137 5.8 L149 10.4 L158 9.5 L165 4.6 L173 10.8 L183 7.1 L195 8.5 L204 11.9 L217 6.4 L229 9.3 L244 11.3 L253 13.8 L260 8.2 L273 5.5 L284 4.4 L297 11.6 L309 12.8 L318 11.0 L330 9.8 L340 12.4 L356 8.7 L368 4.6 L381 10.5 L397 12.2 L400 9 V20 H0Z'/%3E%3C/svg%3E");
  --divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16'%3E%3Cg fill='none' stroke='%23c6af8d' stroke-width='1'%3E%3Cpath d='M0 8 H100'/%3E%3Cpath d='M140 8 H240'/%3E%3Cpath d='M104 8 L110 4.5 M104 8 L110 11.5 M136 8 L130 4.5 M136 8 L130 11.5'/%3E%3C/g%3E%3Cpath d='M120 1 L127 8 L120 15 L113 8 Z' fill='%23f7b90a' stroke='%236e4f2c'/%3E%3C/svg%3E");

  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--night-950); }
body {
  margin: 0; min-height: 100vh; color: var(--cream); font: 16px/1.5 var(--body);
  background: linear-gradient(var(--night-900), var(--night-950) 70%) fixed, var(--night-950);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--gold-hi); }
a:hover { color: #fff6c2; }
code { font-size: .92em; background: var(--well); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; overflow-wrap: anywhere; }
pre { background: var(--well); border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; overflow-x: auto; font-size: 14px; margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.error { color: var(--error); font-size: 14px; min-height: 1em; }
.wrap { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 16px; }
.wrap.narrow { max-width: 720px; }

/* ---- top bar */
.topbar {
  position: sticky; top: 0; z-index: 20; padding-top: env(safe-area-inset-top);
  background: linear-gradient(rgb(5 10 28 / .96), rgb(5 10 28 / .82)); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar .wrap { display: flex; align-items: center; gap: 14px; min-height: 58px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--cream); text-decoration: none; flex: 0 0 auto; }
.brand img { width: 38px; height: 38px; filter: drop-shadow(0 2px 4px rgb(0 0 0 / .6)); }
.brand span { font: 700 20px/1 var(--display); letter-spacing: 3px; text-transform: uppercase; }
.topnav { display: flex; flex: 1 1 auto; min-width: 0; gap: 2px; margin-left: 8px; overflow-x: auto; scrollbar-width: none; }
.topnav a {
  position: relative; padding: 18px 12px; color: var(--tan); text-decoration: none; font-size: 13px; font-weight: 600;
  letter-spacing: 1.4px; text-transform: uppercase; white-space: nowrap;
}
.topnav a:hover { color: var(--cream); }
.topnav a.active { color: var(--gold-hi); }
.topnav a.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 2px; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.topbar .who { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
@media (max-width: 560px) {
  .brand span { display: none; }
  .topnav { margin-left: 0; }
  .topnav a { padding: 18px 9px; letter-spacing: 1px; }
}

/* ---- masthead: the key art melting into the night */
.masthead {
  position: relative; display: flex; align-items: flex-end; min-height: 560px; padding: 120px 0 56px;
  background: linear-gradient(180deg, rgb(10 20 48 / 0) 35%, rgb(10 20 48 / .65) 72%, var(--night-900) 100%), var(--art) 0 58% / cover no-repeat, var(--night-800);
  --art: var(--art-masthead);
}
.masthead.join { --art: var(--art-join); min-height: 420px; }
.masthead.compact { min-height: 300px; padding-top: 90px; }
.masthead .wrap { display: flex; justify-content: flex-end; }
.masthead .copy { width: 100%; max-width: 470px; text-align: center; }
.masthead .emblem { width: 120px; height: 120px; filter: drop-shadow(0 6px 18px rgb(0 0 0 / .7)); }
.masthead h1, .title {
  margin: 6px 0 4px; font: 700 clamp(34px, 7vw, 58px)/1.05 var(--display); letter-spacing: 3px; text-transform: uppercase;
  background: linear-gradient(#fffaf0 30%, #d9c49b); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 2px rgb(0 0 0 / .75));
}
.masthead .tagline { margin: 0 auto 22px; max-width: 420px; color: var(--cream-2); font-size: 17px; text-shadow: 0 2px 6px rgb(0 0 0 / .9); }
.masthead .actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 760px) {
  .masthead { min-height: 0; padding-top: 220px; background-position: 0 62%; }
  .masthead.compact { padding-top: 150px; }
  .masthead .wrap { justify-content: center; }
}

/* ---- sections */
.section { position: relative; padding: 44px 0; }
.section.night { background: transparent; }
.section.paper {
  padding: 64px 0; background: var(--art-paper) center / 100% auto repeat-y, var(--paper);
  -webkit-mask: var(--edge-top) top / 100% 22px no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - 42px) no-repeat, var(--edge-bottom) bottom / 100% 22px no-repeat;
  mask: var(--edge-top) top / 100% 22px no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - 42px) no-repeat, var(--edge-bottom) bottom / 100% 22px no-repeat;
}
.section.paper .muted { color: var(--cream-2); opacity: .8; }
.section-title { margin: 0 0 6px; text-align: center; font: 700 clamp(24px, 4.5vw, 34px)/1.15 var(--display); letter-spacing: 2px; text-transform: uppercase; color: var(--cream); text-shadow: 0 2px 4px rgb(0 0 0 / .6); }
.section-title::after { content: ""; display: block; width: 240px; max-width: 70%; height: 16px; margin: 10px auto 24px; background: var(--divider) center / contain no-repeat; }
.section-lead { max-width: 560px; margin: -12px auto 24px; text-align: center; color: var(--cream-2); }
h2 { margin: 28px 0 10px; font: 700 15px/1.3 var(--display); letter-spacing: 2px; text-transform: uppercase; color: var(--tan); }

/* ---- framed panel with the cream filigree corners */
.frame, .panel {
  position: relative; padding: 20px; border: 1px solid var(--line); border-radius: 2px;
  background: linear-gradient(rgb(16 32 74 / .75), rgb(7 14 36 / .85));
  box-shadow: 0 10px 30px rgb(0 0 0 / .35), inset 0 0 0 3px rgb(5 10 28 / .6), inset 0 0 0 4px var(--line);
}
.frame::before, .panel::before {
  content: ""; position: absolute; inset: -5px; pointer-events: none;
  background: var(--corner-tl) top left / 30px no-repeat, var(--corner-tr) top right / 30px no-repeat,
    var(--corner-bl) bottom left / 30px no-repeat, var(--corner-br) bottom right / 30px no-repeat;
}
.paper .frame, .paper .panel { background: linear-gradient(rgb(36 28 18 / .55), rgb(27 20 12 / .7)); }
.stack > * + * { margin-top: 12px; }
.stack > button { width: 100%; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; min-width: 0; }
.row > button, .row > .button { flex: 0 0 auto; }

/* ---- controls */
button, input, select, textarea { font: inherit; color: var(--cream); }
input, select, textarea {
  width: 100%; min-height: 46px; padding: 11px 13px; background: var(--well); border: 1px solid var(--line-strong); border-radius: 2px;
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: rgb(198 175 141 / .7); }
select option { background: var(--night-900); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgb(63 183 220 / .25); }
label { display: block; font-size: 13px; color: var(--tan); margin-bottom: 5px; letter-spacing: .3px; }
button, a.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; cursor: pointer;
  font: 700 14px/1 var(--body); letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none; color: var(--ink);
  background: linear-gradient(#ffd24a, var(--gold) 45%, #d99700); border: 1px solid #6e4f00; border-radius: 2px;
  box-shadow: inset 0 1px 0 rgb(255 248 200 / .8), inset 0 -2px 0 rgb(120 70 0 / .35), 0 2px 10px rgb(0 0 0 / .45);
  transition: filter .15s, transform .05s;
}
button:hover, a.button:hover { filter: brightness(1.08) saturate(1.05); color: var(--ink); }
button:active, a.button:active { transform: translateY(1px); }
button:disabled { filter: grayscale(.7) brightness(.7); cursor: default; }
button:focus-visible, a.button:focus-visible, a:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
button.ghost, a.button.ghost {
  color: var(--cream); background: rgb(5 10 28 / .45); border-color: var(--line-strong); box-shadow: none; font-weight: 600;
}
button.ghost:hover, a.button.ghost:hover { border-color: var(--cream-2); color: #fff; filter: none; }
button.danger { color: #fff1ee; background: linear-gradient(#b8382f, #7d1f19); border-color: #4a0f0b; box-shadow: inset 0 1px 0 rgb(255 200 190 / .35), 0 2px 10px rgb(0 0 0 / .45); }
button.small, .topbar button { min-height: 36px; padding: 0 14px; font-size: 12px; }
.back { margin: 0 0 16px; }

/* ---- tabs (inside a page) */
.tabs { display: flex; gap: 0; margin: 0 0 18px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs a {
  flex: 0 0 auto; padding: 12px 16px; color: var(--tan); text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.tabs a:hover { color: var(--cream); }
.tabs a.active { color: var(--gold-hi); border-bottom-color: var(--gold); }

/* ---- small shared bits */
.dot { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: #5a6178; box-shadow: 0 0 0 2px rgb(0 0 0 / .35); }
.dot.on { background: var(--ok); box-shadow: 0 0 8px rgb(73 211 106 / .7); }
.dot.away { background: var(--gold); }
.dot.down { background: var(--horde); }
.count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 99px; background: var(--horde); color: #fff; font-size: 12px; line-height: 18px; margin-left: 6px; letter-spacing: 0; }
.footer { padding: 36px 0 calc(36px + env(safe-area-inset-bottom)); text-align: center; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); margin-top: 24px; }
.footer .emblem { width: 34px; height: 34px; opacity: .8; display: block; margin: 0 auto 10px; }