/* The site's side pages, in the game's look (client/src/style.css's :root; docs/art-direction.md, "Menus and windows"):
   the dark forge's soot and charcoal, brass trim, ember for what to press, and every word in the pixel font. The pages
   of reading (press, stats, creators, terms, privacy) take the plain elements below and end on .side-footer; the
   one-card pages (discord.html, desktop-signin.html: <body class="card-page">) take the card. Plain CSS in public/, so
   the pages Vite doesn't build can link it too. */

/* The game's pixel font (client/src/fonts/, Fusion Pixel cut down and renamed, its licence fonts/OFL.txt there), copied
   here so a page Vite doesn't build can load it. Each cut is drawn only at a whole multiple of its own size, or its
   pixels smear: 10 and 12 for text, 16 (the 8) and 20 or 30 (the 10) for buttons and titles. */
@font-face { font-family: "Madlands Pixel 8"; src: url("/fonts/madlands-pixel-8.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Madlands Pixel 10"; src: url("/fonts/madlands-pixel-10.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Madlands Pixel 12"; src: url("/fonts/madlands-pixel-12.woff2") format("woff2"); font-display: swap; }

:root {
  color-scheme: dark;
  /* The game's colours, by the same names. */
  --bg: #0b0807;
  --panel: #231c18;
  --panel-2: #3a2f28;
  --border: #5e4d42;
  --text: #f6eee6;
  --muted: #cdbcae;
  --accent: #ff8a3a;
  --ink: #2a0f02;
  --line: #120d0b;
  --surface-1: #1a1411;
  --surface-2: #2e2520;
  --field: #0f0b09;
  --field-border: #8a7262;
  --outline: #0e1218;
  --trim: #c9a25a;
  --trim-hi: #f2dca0;
  --trim-lo: #6e5326;
  --trim-text: #e8cf96;
  --good: #7cf07c;
  --danger-text: #ff8080;
  --focus: #ffd24a;
  /* Edge light: a raised plate lit along its top and left (--raise), a sunken well the other way round (--sink). */
  --raise: inset 2px 2px 0 rgba(255, 255, 255, 0.16), inset -2px -2px 0 rgba(0, 0, 0, 0.36);
  --sink: inset 2px 2px 0 rgba(0, 0, 0, 0.45), inset -2px -2px 0 rgba(255, 255, 255, 0.07);
  --raise-accent: inset 2px 2px 0 color-mix(in srgb, var(--accent) 55%, #fff), inset -2px -2px 0 color-mix(in srgb, var(--accent) 60%, #000);
  /* A box on the page (a tile, a chart, a form): the panel's face, ink, and a thin ring of trim inside it. */
  --box-ring: inset 0 0 0 2px color-mix(in srgb, var(--trim) 45%, transparent);
  --px8: "Madlands Pixel 8", system-ui, sans-serif;
  --px10: "Madlands Pixel 10", system-ui, sans-serif;
  --px12: "Madlands Pixel 12", system-ui, sans-serif;
  /* Text sizes, each with its face, as the game's (--text-* and --face-* in style.css): page-text.js, or the page's own
     script, redraws each on the screen's whole pixels where it's scaled by a fraction (client/src/panel-text.ts), so
     every size is one of these. */
  --text-fit: 10px;
  --face-fit: var(--px10);
  --text-base: 12px;
  --face-base: var(--px12);
  --text-xl: 16px;
  --face-xl: var(--px8);
  --text-2xl: 20px;
  --face-2xl: var(--px10);
  --text-4xl: 30px;
  --face-4xl: var(--px10);
  /* The game's window frame (--win-frame in style.css, drawn by scripts/ui-frame.mjs): ink, brass trim, a dark inner
     line, and a lit stud at each corner. */
  --win-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' shape-rendering='crispEdges'%3E%3Cpath fill='%230e1218' d='M4 4h14v2h-14zM4 16h14v2h-14zM4 4h2v14h-2zM16 4h2v14h-2z'/%3E%3Cpath fill='%23c9a25a' d='M4 6h14v2h-14zM6 6h2v10h-2z'/%3E%3Cpath fill='%230d0907' d='M4 8h14v2h-14zM4 12h14v2h-14zM8 8h2v6h-2zM12 8h2v6h-2z'/%3E%3Cpath fill='%236e5326' d='M4 14h14v2h-14zM14 8h2v8h-2z'/%3E%3Cpath fill='%230e1218' d='M2 0h2v2h-2zM4 0h2v2h-2zM6 0h2v2h-2zM0 2h2v2h-2zM8 2h2v2h-2zM0 4h2v2h-2zM8 4h2v2h-2zM0 6h2v2h-2zM8 6h2v2h-2zM2 8h2v2h-2zM4 8h2v2h-2zM6 8h2v2h-2zM14 0h2v2h-2zM16 0h2v2h-2zM18 0h2v2h-2zM12 2h2v2h-2zM20 2h2v2h-2zM12 4h2v2h-2zM20 4h2v2h-2zM12 6h2v2h-2zM20 6h2v2h-2zM14 8h2v2h-2zM16 8h2v2h-2zM18 8h2v2h-2zM2 12h2v2h-2zM4 12h2v2h-2zM6 12h2v2h-2zM0 14h2v2h-2zM8 14h2v2h-2zM0 16h2v2h-2zM8 16h2v2h-2zM0 18h2v2h-2zM8 18h2v2h-2zM2 20h2v2h-2zM4 20h2v2h-2zM6 20h2v2h-2zM14 12h2v2h-2zM16 12h2v2h-2zM18 12h2v2h-2zM12 14h2v2h-2zM20 14h2v2h-2zM12 16h2v2h-2zM20 16h2v2h-2zM12 18h2v2h-2zM20 18h2v2h-2zM14 20h2v2h-2zM16 20h2v2h-2zM18 20h2v2h-2z'/%3E%3Cpath fill='%23f2dca0' d='M2 2h2v2h-2zM4 2h2v2h-2zM2 4h2v2h-2zM14 2h2v2h-2zM16 2h2v2h-2zM14 4h2v2h-2zM2 14h2v2h-2zM4 14h2v2h-2zM2 16h2v2h-2zM14 14h2v2h-2zM16 14h2v2h-2zM14 16h2v2h-2z'/%3E%3Cpath fill='%23c9a25a' d='M6 2h2v2h-2zM4 4h2v2h-2zM2 6h2v2h-2zM18 2h2v2h-2zM16 4h2v2h-2zM14 6h2v2h-2zM6 14h2v2h-2zM4 16h2v2h-2zM2 18h2v2h-2zM18 14h2v2h-2zM16 16h2v2h-2zM14 18h2v2h-2z'/%3E%3Cpath fill='%236e5326' d='M6 4h2v2h-2zM4 6h2v2h-2zM6 6h2v2h-2zM18 4h2v2h-2zM16 6h2v2h-2zM18 6h2v2h-2zM6 16h2v2h-2zM4 18h2v2h-2zM6 18h2v2h-2zM18 16h2v2h-2zM16 18h2v2h-2zM18 18h2v2h-2z'/%3E%3Cpath fill='%230d0907' d='M8 8h2v2h-2zM12 8h2v2h-2zM8 12h2v2h-2zM12 12h2v2h-2z'/%3E%3C/svg%3E");
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* ---------- a page of reading ---------- */

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--text-base)/1.5 var(--face-base);
  /* A pixel font has no bold or italic: one made up from it smears its pixels. */
  font-synthesis: none;
}
main {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 16px 64px;
}
/* A page's title, with the game's window mark before it: a cut gem of the trim, lit on top and shaded below. */
h1 {
  margin: 0 0 8px;
  font: var(--text-4xl)/1.2 var(--face-4xl);
  font-weight: normal;
  text-shadow: 3px 3px 0 var(--outline);
}
h1::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0 15px 3px 0;
  vertical-align: middle;
  background: linear-gradient(var(--trim-hi) 40%, var(--trim) 40% 60%, var(--trim-lo) 60%);
  clip-path: polygon(40% 0, 60% 0, 60% 20%, 80% 20%, 80% 40%, 100% 40%, 100% 60%, 80% 60%, 80% 80%, 60% 80%, 60% 100%,
      40% 100%, 40% 80%, 20% 80%, 20% 60%, 0 60%, 0 40%, 20% 40%, 20% 20%, 40% 20%);
}
h2 {
  margin: 32px 0 8px;
  color: var(--trim-text);
  font: var(--text-xl)/1.25 var(--face-xl);
  font-weight: normal;
}
b,
strong,
th {
  font-weight: normal;
}
b,
strong {
  color: var(--trim-text);
}
a {
  color: var(--accent);
  text-underline-offset: 3px;
}
a:hover {
  color: color-mix(in srgb, var(--accent) 70%, #fff);
}
.muted {
  color: var(--muted);
}
ul {
  padding-left: 20px;
}
li {
  margin: 4px 0;
}
code {
  font: inherit;
  color: var(--trim-text);
}
summary {
  cursor: pointer;
}
table {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
td,
th {
  border-bottom: 2px solid var(--surface-2);
}
th {
  color: var(--muted);
  text-align: left;
}

/* A plain button: a raised plate that sinks while pressed. The one to press is the ember .primary (or .button, a link
   drawn as one). */
button {
  min-height: 36px;
  padding: 6px 12px;
  border: 2px solid var(--outline);
  background: var(--panel-2);
  box-shadow: var(--raise);
  color: var(--text);
  font: var(--text-base) var(--face-base);
  cursor: pointer;
}
button:hover:not(:disabled) {
  filter: brightness(1.1);
}
button:active:not(:disabled) {
  box-shadow: var(--sink);
}
button:disabled {
  opacity: 0.5;
  cursor: default;
}
button.primary {
  background: var(--accent);
  box-shadow: var(--raise-accent);
  color: var(--ink);
}
/* Text boxes and dropdowns are wells. 16px, the size below which a phone zooms into a box as it's typed in. */
input,
select {
  min-height: 40px;
  padding: 6px 10px;
  border: 2px solid var(--field-border);
  background: var(--field);
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.45);
  color: var(--text);
  font: var(--text-xl) var(--face-xl);
}
input:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
/* The game's 12px text is small to read pages of on a computer's screen: there the reading goes up to the 8 cut at
   twice its size (the size of the game's tagline), and the headings with it. A phone's finer screen keeps 12. */
@media (min-width: 760px) {
  body {
    font: var(--text-xl)/1.5 var(--face-xl);
  }
  h2 {
    font: var(--text-2xl)/1.25 var(--face-2xl);
  }
}
/* On a phone the title is the 10 cut at twice its size, and its mark with it. */
@media (max-width: 640px) {
  h1 {
    font-size: var(--text-2xl);
    font-family: var(--face-2xl);
    text-shadow: 2px 2px 0 var(--outline);
  }
  h1::before {
    width: 10px;
    height: 10px;
    margin: 0 10px 2px 0;
  }
}

/* ---------- one card in the middle of the page ---------- */

body.card-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: safe center;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--panel) 75%, var(--bg)) 0%, var(--bg) 70%);
}
/* The game's window: its frame round a flat face, a hard pixel shadow then a soft one. */
.card-page main {
  box-sizing: border-box;
  width: min(420px, calc(100% - 32px));
  margin: 16px;
  padding: 28px 24px;
  background: var(--panel);
  background-clip: padding-box;
  border: 6px solid var(--outline);
  border-image: var(--win-frame) 10 / 10px / 4px stretch;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.55);
  text-align: center;
}
.card-page h1 {
  margin: 0 0 16px;
  font-size: var(--text-2xl);
  font-family: var(--face-2xl);
  text-shadow: 2px 2px 0 var(--outline);
}
.card-page h1::before {
  width: 10px;
  height: 10px;
  margin: 0 10px 2px 0;
}
/* At the size of the game's tagline under its name. */
.card-page p {
  margin: 0 0 16px;
  font: var(--text-xl)/1.5 var(--face-xl);
}
.card-page .error {
  color: var(--danger-text);
  user-select: text;
}
/* What the server said, under the sentence that explains it: small, and there to copy into a bug report. */
.card-page .detail {
  margin-top: -10px;
  color: var(--muted);
  font: var(--text-fit)/1.5 var(--face-fit);
  overflow-wrap: anywhere;
  user-select: text;
}
.card-page .error:empty,
.card-page .detail:empty {
  display: none;
}
.card-page [hidden] {
  display: none;
}

/* The page's main button, like the game's: ember enamel, dark pixel letters, lit along its top and left. */
.button {
  display: inline-block;
  box-sizing: border-box;
  min-height: 44px;
  padding: 12px 20px;
  border: 2px solid var(--outline);
  background: var(--accent);
  box-shadow: var(--raise-accent);
  color: var(--ink);
  font: var(--text-xl)/1 var(--face-xl);
  text-decoration: none;
  cursor: pointer;
}
.button:hover {
  color: var(--ink);
  filter: brightness(1.1);
}
.button:active {
  box-shadow: var(--sink);
}

/* ---------- the footer on every side page ---------- */

.side-footer {
  margin: 0;
  padding: 0 16px 24px;
  color: var(--muted);
  font: var(--text-base)/1.6 var(--face-base);
  text-align: center;
}
.side-footer a {
  display: inline-block;
  padding: 6px 2px;
  color: var(--muted);
  text-decoration: underline;
}
.side-footer a:hover {
  color: var(--text);
}
.side-footer a[aria-current="page"] {
  color: var(--text);
  text-decoration: none;
}