/* Beyond Sosaria, beyondsosaria.com
   One stylesheet for the site. Textures, scenes, creatures and icons are taken from the shard's own client
   files; type is Cinzel (display) and EB Garamond (text), both OFL and served from /assets/fonts. */

@font-face { font-family: "Cinzel"; font-weight: 400; font-display: swap; src: url("fonts/cinzel-regular.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-weight: 700; font-display: swap; src: url("fonts/cinzel-bold.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-weight: 400 800; font-display: swap; src: url("fonts/ebgaramond.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/ebgaramond-italic.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --ink: #2a2118;
  --ink-soft: #5a4b3a;
  --text: #e2dfd8;
  --text-soft: #b3afa6;
  --text-dim: #8e8a82;
  --page: #0b0b0d;
  --panel: #15151a;
  --panel-deep: #111115;
  --line: #33343c;
  --line-soft: #232329;
  --gold: #d8b45a;
  --gold-bright: #ecc96a;
  --gold-deep: #7d5f20;
  --bronze: #9a948a;
  --parchment: #e6d7b5;
  --green: #6fb36a;
  --red: #d05a4a;
  --serif: "EB Garamond", Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --display: "Cinzel", Georgia, "Times New Roman", serif;
  --container: 1120px;
  --gutter: 16px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 1700px) { :root { --container: 1280px; } }
@media (min-width: 2300px) { :root { --container: 1400px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Keep what has keyboard focus, and the target of a #link, clear of the sticky header (WCAG 2.4.11). Under 500 px
   tall the header isn't sticky (see .site-header), so nothing is reserved there. */
@media (min-height: 501px) { html { scroll-padding-top: 76px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font: 400 18px/1.55 var(--serif);
  color: var(--text);
  background: var(--page) url("img/dark.png");
  background-blend-mode: luminosity;
  min-height: 100vh;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-bright); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .15s; }
a:hover { color: color-mix(in oklab, var(--gold-bright) 70%, white); }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
strong { font-weight: 600; color: #f2f4f8; }
code { font: 0.92em/1 ui-monospace, Menlo, Consolas, monospace; color: #f2f4f8; }
p { margin: 0 0 1em; text-wrap: pretty; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The first Tab on a page shows a link past the header (audit item 64). */
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 16px; background: var(--gold); color: #1a1407; font: 700 14px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border-radius: 2px; }
.skip-link:focus { top: 12px; }
main:focus { outline: none; }
.wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 768px) { :root { --gutter: 28px; } }

/* page-to-page fade (browsers without view transitions simply navigate) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }

/* ---------- type ---------- */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.12; margin: 0 0 .5em; color: #eef0f5; text-wrap: balance; }
h1 { font-size: clamp(34px, 5.2vw, 56px); font-weight: 700; letter-spacing: .01em; }
h2 { font-size: clamp(22px, 2.6vw, 28px); letter-spacing: .02em; }
h3 { font-size: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.section-title { display: flex; align-items: baseline; gap: 14px; margin-bottom: 24px; }
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--line); transform: translateY(-4px); }
.lead { font-size: clamp(18px, 1.5vw, 20px); color: var(--text); max-width: 58ch; }
.small { font-size: 15px; color: var(--text-soft); }

/* An element marked hidden stays hidden whatever display its class gives it. */
[hidden] { display: none !important; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px;
  font: 700 13px/1 var(--display); letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; border-radius: 2px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--gold-deep); color: #1d1710; background: var(--gold);
  box-shadow: inset 0 1px 0 rgb(255 245 215 / .45), inset 0 -1px 0 rgb(0 0 0 / .25);
  transition: background-color .15s, color .15s, border-color .15s, transform .15s var(--ease);
}
.btn:hover { background: var(--gold-bright); color: #1d1710; }
.btn:active { background: #b8923f; box-shadow: inset 0 2px 3px rgb(0 0 0 / .3); transform: translateY(1px); }
.btn-line { background: transparent; color: var(--text); border-color: var(--bronze); box-shadow: none; }
.btn-line:hover { background: rgb(212 178 90 / .12); color: #fff; border-color: var(--gold); }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: 12px; }
.btn.loading { opacity: .7; pointer-events: none; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgb(17 17 21 / .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid #3a3b44; box-shadow: 0 1px 0 #030304;
}
.site-header .wrap { display: flex; align-items: center; gap: 18px; min-height: 62px; max-width: none; padding-inline: 20px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #eef0f5; margin-right: auto; }
.brand img { width: 30px; height: 42px; }
.brand span { font: 700 19px/1 var(--display); letter-spacing: .04em; white-space: nowrap; }
.nav { display: none; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.nav a {
  display: block; padding: 10px 11px; font: 13px/1 var(--display); letter-spacing: .06em; text-transform: uppercase;
  color: var(--text); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap;
}
.nav a:hover, .nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--gold); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #6b6256; box-shadow: 0 0 0 2px rgb(0 0 0 / .35); flex: none; }
.dot.on { background: var(--green); box-shadow: 0 0 0 2px rgb(0 0 0 / .35); }
.dot.off { background: var(--red); }
.menu { position: relative; }
.menu summary {
  list-style: none; cursor: pointer; padding: 10px 12px; font: 13px/1 var(--display); letter-spacing: .08em;
  text-transform: uppercase; color: var(--text); border: 1px solid var(--line); border-radius: 2px; user-select: none;
}
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { border-color: var(--gold); color: #fff; }
.menu nav {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 230px; z-index: 20;
  background: #141418 url("img/stone.png"); background-blend-mode: luminosity; border: 1px solid #4c4e59; box-shadow: 0 10px 24px rgb(0 0 0 / .5);
  max-height: calc(100vh - 68px); max-height: calc(100dvh - 68px); overflow-y: auto; overscroll-behavior: contain;   /* every link reachable on short screens */
}
.menu nav ul { list-style: none; margin: 0; padding: 6px 0; }
.menu nav a {
  display: block; padding: 13px 18px; font: 14px/1 var(--display); letter-spacing: .06em; text-transform: uppercase;
  color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line-soft);
}
.menu nav li:last-child a { border-bottom: 0; }
/* Landscape phones and big zoom: the header scrolls away instead of covering a third of the screen. */
@media (max-height: 500px) { .site-header { position: static; } }
.menu nav a:hover { background: rgb(212 178 90 / .1); color: #fff; }
.header-cta { display: none; }
@media (min-width: 560px) { .header-cta { display: inline-flex; } }
/* Small phones: these come after the rules above so they win. At about 280 px (a folded Galaxy Fold) the brand and the
   Menu button share the bar without spilling over (audit item 62). */
@media (max-width: 400px) { .brand span { font-size: 17px; } }
@media (max-width: 340px) { .site-header .wrap { gap: 10px; padding-inline: 12px; } .brand { gap: 7px; } .brand span { font-size: 15px; letter-spacing: 0; } }
@media (min-width: 1024px) {
  .site-header .wrap { gap: 22px; }
  .brand { margin-right: 0; }
  .nav { display: block; margin-left: auto; }
  .header-cta { margin-right: auto; }
  .nav a { padding: 10px 8px; font-size: 12px; }
  .menu { display: none; }
}
@media (min-width: 1200px) {
  .nav a { padding: 10px 11px; font-size: 13px; }
  .header-cta { margin-left: 8px; }
}
@media (min-width: 1320px) {
  .site-header .wrap { display: grid; grid-template-columns: 1fr auto auto 1fr; }
  .nav { margin: 0; justify-self: end; }
  .header-cta { margin: 0 0 0 8px; justify-self: start; }
}

/* ---------- masthead: the Britain bank plaza at night, drawn from the shard's map, with the fights on it ---------- */
.masthead { position: relative; overflow: hidden; border-bottom: 1px solid #3a3b44; box-shadow: 0 1px 0 #030304; }
.masthead .wrap { position: relative; z-index: 2; display: grid; gap: 28px; padding-top: 40px; }
.masthead .intro { padding-bottom: 32px; }
.masthead > .status-panel { margin: 0 var(--gutter) 28px; }
.masthead h1 { margin-bottom: 14px; }
.masthead .lead { margin-bottom: .8em; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 16px; }
.actions .btn { flex: 1 1 auto; white-space: normal; text-align: center; line-height: 1.25; padding-top: 10px; padding-bottom: 10px; }
@media (min-width: 560px) { .actions .btn { flex: none; } }
/* The second choice beside a button is a plain link, not a second button (audit item 65). */
.actions .or { align-self: center; color: var(--text-soft); }
.fineprint { font-size: 15px; color: var(--text-dim); margin: 0; }

/* the scene: a 5200x800 render; .stage is placed so the plaza sits under the status panel. The duel stands on the
   plaza right of the text and below the status panel, clear of both at every width from 1200 px; narrower screens
   have no room for it, so it is hidden there (and site.js doesn't fetch its animation). The fisherman stands by the
   pond at the far left, which only windows from 2880 px wide show; the passer-by walks the plaza's west side,
   which phones under 700 px show for a moment at most. Both are hidden there the same way. */
.world { position: relative; height: 300px; overflow: hidden; border-top: 1px solid #3a3b44; }
.stage { position: absolute; bottom: 0; left: calc(50% - 2900px); width: 5200px; height: 800px; }
.stage .ground { position: absolute; left: 0; top: 0; width: 5200px; height: 800px; max-width: none; }
/* Each screen gets only the part of the scene it can show (index.html picks the file with the same media queries,
   in the same order): phones the 900x300 slice at (2450, 500), screens up to 2560 px the 2560x800 crop at x 1148. */
@media (max-width: 2560px) { .stage .ground { left: 1148px; width: 2560px; } }
@media (max-width: 899px) { .stage .ground { left: 2450px; top: 500px; width: 900px; height: 300px; } }
.stage .actor { position: absolute; max-width: none; }
.world .stage { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 320px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 320px), transparent); }
.stage .duel { left: 2690px; top: 340px; width: 455px; }
@media (max-width: 1199px) { .stage .duel { display: none; } }
.stage .stroll { left: 2260px; top: 106px; width: 742px; }
@media (max-width: 699px) { .stage .stroll { display: none; } }
.stage .fisher { left: 991px; top: 361px; width: 177px; }
@media (max-width: 2879px) { .stage .fisher { display: none; } }

@media (min-width: 900px) {
  .masthead { min-height: 620px; display: flex; flex-direction: column; justify-content: center; }
  .masthead .wrap { grid-template-columns: minmax(0, 600px) minmax(0, 1fr); gap: 28px; padding-top: 24px; align-items: start; width: 100%; }
  .masthead .intro { padding-bottom: 24px; padding-right: 28px; }
  .masthead > .status-panel {
    position: absolute; top: 18px; right: 18px; z-index: 3; margin: 0; width: 220px; padding: 10px 12px 11px;
    container-type: normal;
  }
  .masthead > .status-panel h2 { font-size: 11px; letter-spacing: .1em; margin-bottom: 8px; gap: 7px; }
  .masthead > .status-panel dl { font-size: 13px; gap: 4px 10px; }
  .masthead > .status-panel dd.players { font-size: 14px; }
  .masthead > .status-panel .dot { width: 7px; height: 7px; }
  .world { position: absolute; inset: 0; height: auto; border: 0; }
  .stage { left: calc(100% - 3100px - var(--gutter)); }
  .world::after {
    content: ""; position: absolute; inset: 0;
    background:
      linear-gradient(180deg, rgb(11 11 13 / .7) 0, rgb(11 11 13 / .25) 26%, rgb(11 11 13 / 0) 50%),
      linear-gradient(90deg, rgb(11 11 13 / .3) 0, rgb(11 11 13 / .96) calc(50% - var(--container) / 2 - 160px), rgb(11 11 13 / .92) calc(50% - var(--container) * .205), rgb(11 11 13 / .62) calc(50% + var(--container) * .026), rgb(11 11 13 / .18) calc(50% + var(--container) * .231), rgb(11 11 13 / .1) calc(50% + var(--container) * .463), rgb(11 11 13 / .35) 100%);
  }
}
@media (min-width: 1120px) { .stage { left: calc(50% + var(--container) / 2 - 3100px - var(--gutter)); } }

.status-panel {
  container-type: inline-size;
  background: rgb(21 21 26 / .84); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid #4c4e59; outline: 1px solid #060608; outline-offset: -4px; padding: 18px 20px 18px;
}
.status-panel h2 { font: 700 12px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.status-panel dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; font-size: 16px; align-items: baseline; }
.status-panel dt { color: var(--text-soft); white-space: nowrap; }
.status-panel dd { margin: 0; color: #f2f4f8; }
.status-panel dd.players { font-family: var(--display); font-size: 18px; font-weight: 700; line-height: 1.3; color: #fff; }
/* One column only when two don't fit (about 280 px phones); 360 px phones keep four lines (audit item 62). */
@container (max-width: 230px) { .status-panel dl { grid-template-columns: 1fr; gap: 2px; } .status-panel dt { margin-top: 8px; font-size: 13px; } }

/* ---------- page heads (inner pages) ---------- */
.page-head { position: relative; overflow: hidden; border-bottom: 1px solid #3a3b44; box-shadow: 0 1px 0 #030304; }
.page-head .wrap { padding-top: 40px; padding-bottom: 32px; }
.page-head .lead { margin-bottom: 0; }
.page-head .warn { margin: 18px 0 0; }
.page-head .actions { margin-top: 24px; }
.page-head + .section { border-top: 0; }

/* ---------- sections ---------- */
.section { padding: 40px 0; border-bottom: 1px solid var(--line-soft); }
@media (min-width: 900px) { .section { padding: 56px 0; } }
.section:last-of-type { border-bottom: 0; }


/* index of systems */
.groups { display: grid; gap: 32px 28px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 480px) { .groups { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .groups { grid-template-columns: repeat(4, 1fr); } }
.group h3 { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 10px; white-space: nowrap; }
.group h3 img { width: auto; height: 26px; flex: none; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .6)); }
.group ul { list-style: none; margin: 0; padding: 0; }
.group li { padding: 3px 0; font-size: 17px; }
.group a { color: var(--text); text-decoration: none; }
.group a:hover { color: #fff; text-decoration: underline; }
@media (min-width: 900px) and (max-width: 1199px) { .group h3 { font-size: 14px; letter-spacing: .03em; } }

/* getting started */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { position: relative; padding: 0 0 22px 58px; counter-increment: step; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: -2px; width: 40px; height: 40px;
  border: 1px solid #4c4e59; color: var(--gold); font: 700 18px/38px var(--display); text-align: center; background: var(--panel-deep);
}
.steps li::after { content: ""; position: absolute; left: 20px; top: 44px; bottom: 6px; width: 1px; background: var(--line-soft); }
.steps li:last-child::after { display: none; }
.steps h3 { margin-bottom: 4px; }
.steps p { margin: 0; color: var(--text-soft); }
.steps { max-width: 62ch; }
.prose { max-width: 62ch; }
.note { margin: -10px 0 16px; color: var(--text-soft); }
.steps-wrap { max-width: 640px; margin: 0 auto; }
.details-table table { font-size: 15px; }
.details-table tbody th, .details-table tbody td { padding: 8px 14px; }
.details-table tbody th { width: 30%; font-size: 14px; }
.details-table code { font-size: .9em; }
.page-head-center .wrap { text-align: center; }
.page-head-center .lead { margin-inline: auto; }
.assurance { max-width: 62ch; margin: 18px auto 0; font-size: 15px; color: var(--text-dim); font-style: italic; }
.page-head-center .actions { justify-content: center; }
.section-center .section-title { justify-content: center; }
.section-center .section-title::before, .section-center .section-title::after { content: ""; flex: 1; height: 1px; background: var(--line); transform: translateY(-4px); }
.section-center .next { text-align: center; }
.contents { display: grid; gap: 18px 32px; margin: 0; }
@media (min-width: 720px) { .contents { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.contents dt { font: 700 13px/1.3 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.contents dt a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--gold-deep); }
.contents dt a:hover { color: var(--gold-bright); }
.contents dd { margin: 0; font-size: 16px; color: var(--text-soft); line-height: 1.5; }
.steps-tight li { padding: 0 0 14px 44px; color: var(--text-soft); line-height: 1.5; }
.steps-tight li::before { width: 30px; height: 30px; font-size: 15px; line-height: 28px; top: -3px; }
.steps-tight li::after { left: 15px; top: 32px; }
.steps-tight strong { color: #f2f4f8; font-weight: 600; }
.steps li { padding-bottom: 16px; }
.steps h3 { font-size: 13px; }
.next { margin: 28px 0 0; color: var(--text-soft); }

/* tables */
.table-wrap { border: 1px solid var(--line); background: var(--panel-deep); }
.table-wrap tbody th { width: 26%; white-space: nowrap; }
table { width: 100%; border-collapse: collapse; font-size: 16px; }
thead th { font: 700 12px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); text-align: left; padding: 13px 16px; background: #15151a url("img/stone.png"); background-blend-mode: luminosity; border-bottom: 1px solid var(--line); }
tbody td { padding: 11px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody th { text-align: left; font-weight: 600; padding: 11px 16px; border-bottom: 1px solid var(--line-soft); color: #f2f4f8; vertical-align: top; }
tbody tr:last-child th { border-bottom: 0; }
@media (max-width: 719px) {
  table thead { display: none; }
  table, tbody, tr, th, td { display: block; }
  tbody tr { padding: 10px 14px 12px; border-bottom: 1px solid var(--line); }
  tbody tr:last-child { border-bottom: 0; }
  tbody th, tbody td { padding: 2px 0; border: 0; width: auto; white-space: normal; }
  tbody th { font-family: var(--display); font-size: 15px; margin-bottom: 4px; }
  td[data-label]::before { content: attr(data-label) ": "; color: var(--text-dim); }
}

/* community */
.two-up { display: grid; gap: 34px; align-items: start; }
@media (min-width: 900px) { .two-up { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; } }
.community { display: grid; gap: 0; }
.community > div { padding: 0 0 22px; border-bottom: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.community > div:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.community h3 { margin: 0; display: flex; align-items: center; gap: 10px; }
.community h3 img { height: 24px; width: auto; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .6)); }
.community p { margin: 0; color: var(--text-soft); font-size: 16px; flex: 1; }
.community .btn { align-self: flex-start; }
/* vote form: the account name goes to XtremeTop100 as &postback=NAME (site.js tidies it first) */
.vote-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vote-form label { flex: 1 0 100%; font: 700 12px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.vote-form input:not([type=hidden]) { flex: 1 1 140px; min-width: 0; min-height: 38px; padding: 0 10px; font: 16px var(--serif); color: var(--text); background: var(--page); border: 1px solid var(--bronze); border-radius: 2px; }
.vote-form .btn { align-self: auto; }
.vote-form .vote-msg { flex: 1 0 100%; margin: 0; font-size: 15px; color: var(--gold); }
.vote-form .vote-msg:empty { display: none; }
@media (min-width: 768px) {
  .community { grid-template-columns: repeat(3, 1fr); }
  .community > div { border-bottom: 0; margin: 0; padding: 0 28px; border-left: 1px solid var(--line); }
  .community > div:first-child { border-left: 0; padding-left: 0; }
  .community > div:last-child { padding-right: 0; }
}

/* donate page */
/* the donor's account name, shared by the eight packages below it (donate.html processPayment) */
.account-field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 0; }
.account-field label { flex: 1 0 100%; font: 700 12px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.account-field input { flex: 0 1 460px; min-width: 0; min-height: 42px; padding: 0 10px; font: 17px var(--serif); color: var(--text); background: var(--page); border: 1px solid var(--bronze); border-radius: 2px; }
.account-field input[aria-invalid="true"] { border-color: var(--red); }
.account-field .hint { flex: 1 0 100%; margin: 0; font-size: 15px; color: var(--text-dim); }
.account-field .account-msg { flex: 1 0 100%; margin: 0; font-size: 15px; color: var(--gold); }
.account-field .account-msg:empty { display: none; }
.packs { border: 1px solid var(--line); background: var(--panel-deep); margin-top: 22px; overflow-x: auto; }
.packs table { font-size: 17px; }
.packs tbody th { font-family: var(--display); font-size: 15px; letter-spacing: .03em; width: auto; }
.packs thead th:nth-child(3), .packs td.price { width: auto; }
.packs .scrolls { color: #f2f4f8; }
.packs .bonus { color: var(--text-dim); font-size: 14px; display: block; }
.packs .price { font-family: var(--display); font-weight: 700; color: #fff; white-space: nowrap; }
.packs td.act { text-align: right; white-space: nowrap; }
.packs td.act form { margin: 0; display: inline; }
@media (max-width: 719px) {
  .packs tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; }
  .packs tbody th { grid-column: 1 / -1; width: auto; }
  .packs td.act { grid-column: 1 / -1; text-align: left; padding-top: 8px; }
  .packs td.price { width: auto; justify-self: end; }
  /* Next to its Choose button the amount needs no "Price" label, only its currency, as the table's header gives it on
     wider screens: "$20.00 USD" (audit item 66). */
  .packs td.price::before { content: none; }
  .packs td.price::after { content: " USD"; font: 400 15px var(--serif); letter-spacing: 0; text-transform: none; color: var(--text-dim); }
  .packs td.act .btn { width: 100%; }
}
.faq details { border-top: 1px solid var(--line); padding: 4px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 12px 0; font: 600 17px/1.4 var(--serif); color: #f2f4f8; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; content: "+" / ""; font-family: var(--display); color: var(--gold); flex: none; }
.faq details[open] summary::after { content: "\2013"; content: "\2013" / ""; }
/* The badge and the signs are decoration: the "/ ''" alternative keeps screen readers from reading them (audit item
   64); browsers too old for that syntax keep the first value. */
.faq p { margin: 0 0 14px; color: var(--text-soft); }
.aside-box { border: 1px solid var(--line); background: var(--panel-deep); padding: 20px 22px; }
.aside-box h2, .faq h2 { font-size: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); margin: 0 0 .5em; }
.aside-box p { color: var(--text-soft); font-size: 16px; }
.aside-box p:last-child { margin-bottom: 0; }
.aside-box h3 { font: 600 17px/1.35 var(--serif); color: #f2f4f8; margin: 0 0 .6em; text-transform: none; letter-spacing: 0; }
.aside-box .actions { margin: 18px 0 0; }
.warn { border-left: 3px solid var(--gold); padding: 8px 12px; background: rgb(212 178 90 / .07); color: var(--text); font-size: 16px; }
.warn strong { color: var(--gold-bright); }
.donate-grid { display: grid; gap: 34px; }
@media (min-width: 1100px) { .donate-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 48px; align-items: start; } }

/* ---------- footer ---------- */
.site-footer { background: #050506; border-top: 1px solid #232329; padding: 30px 0 28px; font-size: 15px; color: var(--text-dim); }
.site-footer .wrap { display: grid; gap: 18px; justify-items: center; text-align: center; }
.site-footer .brand { margin-right: 0; }
.site-footer .brand span { font-size: 16px; }
.site-footer .brand img { width: 22px; height: 31px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
.site-footer a { color: var(--text-soft); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer p { margin: 0; max-width: 72ch; text-wrap: balance; }

/* rank boards (leaderboards.html): four tables fed by /rank_boards.php every five minutes */
.boards { display: grid; gap: 34px; align-items: start; }
/* side by side only where two full tables fit; below that one per row */
@media (min-width: 1200px) { .boards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; } }
/* until the first standings arrive, hold a screen's height so nothing below jumps */
.boards[data-loading] { min-height: 100vh; }
.board { overflow-x: auto; }
.board table { font-size: 15px; }
.board caption { caption-side: top; text-align: left; padding: 14px 16px 12px; font: 700 17px/1.2 var(--display); color: #f2f4f8; border-bottom: 1px solid var(--line); }
.board caption span { display: block; margin-top: 4px; font: 15px/1.4 var(--serif); color: var(--text-dim); }
.board thead th, .board tbody td, .board tbody th { padding-left: 12px; padding-right: 12px; }
.board tbody th { width: auto; white-space: normal; overflow-wrap: anywhere; }
.board th.num, .board td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.board thead th { white-space: nowrap; }
@media (min-width: 1200px) {
  .board thead th, .board tbody td, .board tbody th { padding-left: 9px; padding-right: 9px; }
  .board thead th { letter-spacing: .06em; }
}
.board tbody tr:nth-child(-n+3) td.num.rank, .board tbody tr:nth-child(-n+3) th { color: var(--gold-bright); }
.board td.dim { color: var(--text-dim); }
.board table.is-empty thead, .board table.is-empty tbody { display: none; }
.board-empty { margin: 0; padding: 16px; color: var(--text-dim); }
.boards-status { margin: 14px 0 0; font-size: 16px; color: var(--text-dim); }
.boards-status.is-stale { color: var(--gold); }
/* phones: the boards stay tables, one line per player; guild, "at rank" and the taming levels (.opt) are left out */
@media (max-width: 719px) {
  .board table { display: table; }
  .board caption { display: table-caption; padding: 12px 10px 10px; }
  .board thead { display: table-header-group; }
  .board tbody { display: table-row-group; }
  .board tr { display: table-row; padding: 0; }
  .board th, .board td { display: table-cell; }
  .board .opt { display: none; }
  .board thead th, .board thead th.num { padding: 10px 8px; white-space: normal; font-size: 11px; letter-spacing: .04em; }
  .board tbody th, .board tbody td { padding: 9px 8px; border-bottom: 1px solid var(--line-soft); }
  .board tbody tr:last-child th, .board tbody tr:last-child td { border-bottom: 0; }
  .board tbody th { font: 600 15px/1.35 var(--serif); margin: 0; }
  .board td[data-label]::before { content: none; }
}

/* ---------- print ---------- */
@media print {
  body { background: #fff; color: #000; font-size: 12pt; }
  .site-header, .site-footer ul, .menu, .header-cta, .world,   .table-wrap, .community, .aside-box, .status-panel { background: none; color: #000; border-color: #999; box-shadow: none; }
  h1, h2, h3, thead th { color: #000; }
  a { color: #000; text-decoration: none; }
  .donate-grid, .two-up, .masthead .wrap { display: block; }
}