/*
 * Mystical Door Productions: the look every page on productions.mysticaldoor.com shares, linked
 * from the frame (_frame/head.html), so a page carries no <style> of its own.
 *
 * The tokens are the Help Center's (MysticalDoorSupport, public/css/styles.css), which took them
 * from mysticaldoor.com, so the hub, the game's page and its Help Center read as one place. Keep
 * the names and values identical to theirs: a change there is a change here. No CSS framework,
 * and nothing from another host.
 */

:root {
  color-scheme: dark;
  --bg: #0e0b16;
  --panel: #18131f;
  --panel-2: #221a2c;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #ece6f3;
  --muted: #b5abc4;
  --gold: #e6bd6a;
  --gold-ink: #1d1405;
  --violet: #c27bff;
  --violet-deep: #7a3fc4;
  --serif: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 12px;
  --radius-sm: 8px;
  /* What the rules below draw with beyond the palette: the header's, the menu's and the hero's
     own colours, each the value that was written into its rule. Whimbrel's page gives them its
     own, in the last section. */
  --title: #f7f0e1;
  --header-bg: linear-gradient(180deg, rgba(34, 26, 44, 0.9), rgba(14, 11, 22, 0.95));
  --brand-glow: 0 0 22px rgba(194, 123, 255, 0.4);
  --menu-button-line: rgba(230, 189, 106, 0.45);
  --menu-button-bg: rgba(24, 19, 31, 0.75);
  --menu-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  --hero-bg: radial-gradient(ellipse at 50% 30%, rgba(122, 63, 196, 0.35) 0%, rgba(14, 11, 22, 0) 60%), #0e0b16;
  --wordmark-shadow: 0 2px 24px rgba(0, 0, 0, 0.8);
  --icon-glow: 0 0 18px rgba(194, 123, 255, 0.35);
  --status-line: rgba(194, 123, 255, 0.5);
}

/* ---------- base ---------- */

* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
/* A column, so that on a short page the footer still sits at the foot of the window. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.6;
}
main { flex: 1 0 auto; }
/* Links keep their underline: told apart from the words around them by colour alone, they fail
   WCAG 1.4.1, as the Help Center found. Menus and the wordmark stand on their own and drop it. */
a { color: var(--gold); }
a:focus-visible,
button:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); color: var(--gold); margin: 0 0 0.75rem; }
h3 { font-size: 1.3rem; margin: 0 0 0.4rem; }

/* The frame's first link, shown only when the keyboard reaches it. */
.skip-link {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 100;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--gold);
  color: var(--gold-ink);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------- header ---------- */
/* The Help Center's bar: the wordmark on the left, the menu on the right. Wide screens show the
   menu's links in a row; narrow ones get a button that opens them as a popover, which needs no
   script. A closed popover is display:none until the wide-screen rule gives it a display of its
   own. The row starts at 44rem, where the wordmark and the five links fit on one line: at 40rem,
   the other pages' breakpoint, the wordmark wrapped onto two. */
.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--header-bg);
}
.site-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* The width of the pages' sections, so the wordmark lines up with what is under it. */
  max-width: 60rem;
  margin: 0 auto;
  padding: 0.9rem 1.25rem;
}
.brand {
  color: var(--title);
  font-family: var(--serif);
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  font-weight: 600;
  line-height: 1.15;
  text-decoration: none;
  text-shadow: var(--brand-glow);
}
.brand:hover { text-decoration: underline; text-underline-offset: 3px; }
.menu-button {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--menu-button-line);
  border-radius: 10px;
  background: var(--menu-button-bg);
  color: var(--gold);
  cursor: pointer;
}
.menu {
  position: absolute;
  inset: 4.15rem 1.25rem auto auto;
  min-width: 13rem;
  margin: 0;
  padding: 0.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--menu-shadow);
}
.menu a {
  display: block;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
}
.menu a:hover { background: var(--panel-2); color: var(--gold); }
.menu a[aria-current] { color: var(--gold); }
@media (min-width: 44rem) {
  .menu-button { display: none; }
  .menu {
    display: flex;
    position: static;
    gap: 1.75rem;
    min-width: 0;
    padding: 0;
    border: 0;
    overflow: visible;
    background: none;
    box-shadow: none;
  }
  .menu a { padding: 0.25rem 0; color: var(--gold); }
  .menu a:hover { background: none; text-decoration: underline; }
  .menu a[aria-current] { text-decoration: underline; text-underline-offset: 3px; }
}

/* ---------- home: hero ---------- */
.hero {
  display: grid;
  place-items: center;
  min-height: min(50vh, 480px);
  padding: 3.5rem 1.25rem 3rem;
  text-align: center;
  background: var(--hero-bg);
}
.hero-inner { max-width: 44rem; }
/* The kicker is a paragraph above the heading, not part of it, so the heading search engines
   and screen readers announce is the studio's name alone. */
.kicker {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.wordmark {
  margin: 0 0 0.5rem;
  font-size: clamp(2.2rem, 7vw, 3.6rem);
  color: var(--gold);
  text-shadow: var(--wordmark-shadow);
}
.lede { font-size: clamp(1.1rem, 2.3vw, 1.3rem); color: var(--muted); margin: 0 auto; max-width: 36rem; }

/* ---------- sections and product cards ---------- */
section { max-width: 60rem; margin: 0 auto; padding: 4rem 1.25rem; }
.cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: 1.5rem; }
/* A product page's screenshots, a phone's tall pictures two to a row on a phone and three on a
   wider screen, each keeping its proportions; their captions are in the pictures, and in their
   alt text. Siegebreaker's page (siegebreaker-site) has the first. */
.shots { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); margin: 1.5rem 0 0; padding: 0; list-style: none; }
.shots img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
@media (min-width: 40rem) {
  .shots { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}
.card {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
}
.card p { margin: 0 0 1rem; color: var(--muted); }
.card p:last-child { margin-bottom: 0; }
/* The product's icon beside its name and status. Icons are drawn at 192 pixels and shown at 64,
   so they stay sharp on a phone's screen; the glow is the Help Center's, round its own icon. */
.card-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.card-head h3 { margin: 0 0 0.35rem; }
.card-icon {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 15px;
  box-shadow: var(--icon-glow);
}
.status {
  display: inline-block;
  padding: 0.15rem 0.7rem;
  border: 1px solid var(--status-line);
  border-radius: 999px;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--violet);
}
.card nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }

/* ---------- text pages: about, contact, legal ---------- */
/* One column of reading width. Its h2 is quieter than the home page's section titles, since a
   text page has several. */
.page { width: 100%; max-width: 44rem; margin: 0 auto; padding: 3.5rem 1.25rem 4rem; }
.page h1 { margin: 0 0 1rem; font-size: clamp(2rem, 5vw, 2.6rem); color: var(--gold); }
.page h2 { margin: 2.5rem 0 0.75rem; font-size: 1.5rem; color: var(--text); }
.page h3 { margin: 0 0 0.35rem; font-size: 1.15rem; }
.page .lead { font-size: 1.15rem; color: var(--muted); }
.page ul { padding-left: 1.25rem; }
.page li { margin-bottom: 0.6rem; }
/* A product per panel, like the home page's cards: the contact and privacy pages. */
.page .product-list { display: grid; gap: 1rem; padding: 0; list-style: none; }
.product-list li {
  margin: 0;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.page .product-list h2 { margin: 0 0 0.35rem; font-size: 1.15rem; }
.product-list p { margin: 0.35rem 0 0; color: var(--muted); }
.page .updated { margin-top: 2.5rem; font-size: 0.9rem; color: var(--muted); }

/* ---------- privacy policies ---------- */
/* The Mystical Door's is mysticaldoor.com's markup, copied as it is by tools/policy-mirror.js, so
   these style the classes that page uses: .meta, .summary, code and the policy's own footer. */
.policy .mirror-note { margin: 0 0 2rem; font-size: 0.9rem; color: var(--muted); }
.policy h1 { margin-bottom: 0.25rem; }
.policy h3 { margin: 1.5rem 0 0.4rem; }
.policy .meta { margin-top: 0; font-size: 0.9rem; color: var(--muted); }
.policy .summary {
  margin: 1.75rem 0;
  padding: 1rem 1.15rem;
  border-left: 4px solid var(--violet);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--panel);
}
.policy .summary p { margin: 0; }
.policy .summary p + p { margin-top: 0.75rem; }
.policy code {
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: var(--panel-2);
  font-size: 0.9em;
}
.policy footer {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--muted);
}

/* ---------- news ---------- */
/* One release per entry, written by tools/news.js: its name, date, headline and a link to its
   patch notes. */
.news-item { padding: 1.5rem 0; border-top: 1px solid var(--line); }
.news-item:first-of-type { margin-top: 2rem; }
.page .news-item h2 { margin: 0 0 0.25rem; font-size: 1.25rem; }
.news-item p { margin: 0.35rem 0 0; }
.news-item .news-date { margin-top: 0; font-size: 0.9rem; color: var(--muted); }

/* ---------- press kit ---------- */
/* Facts as a two-column list, and pictures that fill the column and keep their proportions. */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.25rem; margin: 1rem 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
/* A text page's sections sit in its column: the home page's section rule (its width and padding)
   is for the home page's own. */
.page section { max-width: none; margin: 0; padding: 0; }
.page .press-product { margin-top: 3rem; }
.press h3 { margin: 2rem 0 0.75rem; }
.press-product .one-line { font-size: 1.1rem; }
.press figure { margin: 0; }
.press figure img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.press figcaption { margin-top: 0.4rem; font-size: 0.9rem; color: var(--muted); }
.press-art { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; }
.press-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; }
@media (max-width: 40rem) {
  .press-art { grid-template-columns: 1fr; }
}

/* ---------- the 404 page ---------- */
.not-found {
  max-width: 32rem;
  margin: 0 auto;
  padding: 5rem 1.25rem;
  text-align: center;
}
.not-found h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.8rem, 6vw, 2.4rem);
  color: var(--gold);
}
.not-found p { color: var(--muted); margin: 0 0 1.5rem; }
.not-found nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; }

/* ---------- footer ---------- */
.site-footer {
  padding: 2.5rem 1.25rem 3rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.92rem;
  text-align: center;
}
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.75rem; margin-bottom: 0.75rem; }
.site-footer p { margin: 0.25rem 0; }
.site-footer .legal { font-size: 0.8rem; opacity: 0.85; }

@media (max-width: 40rem) {
  section { padding: 3.5rem 1.1rem; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- Whimbrel ---------- */
/* whimbrel.mysticaldoor.com, whose pages ask for it with <html data-theme="whimbrel">: the look
   of Whimbrel's Help Center (MysticalDoorSupport 4.17.0, the end of its public/css/styles.css),
   with the same values, so the two read as one place. Cream paper in teal ink; the header, the
   hero and the footer in the icon's teal, lettered in its cream, with sand for their links; the
   hero ending in the icon's line as a pen's stroke, the Help Center's public/img/whimbrel-hero.svg
   written in as a data: address; headings in a plain sans-serif. The rules above draw only in the
   custom properties, so this gives them Whimbrel's values, and the teal bands their own. A colour
   written into a rule instead would stay the studio's, dark on cream, on Whimbrel's page. */
:root[data-theme="whimbrel"] {
  color-scheme: light;
  --bg: #f5eee2;
  --panel: #fffbf4;
  --panel-2: #fbf4e8;
  --line: rgba(4, 67, 75, 0.14);
  --line-strong: rgba(4, 67, 75, 0.28);
  --text: #13302f;
  --muted: #4b6463;
  --gold: #0b5f64;
  --gold-ink: #fdf3e2;
  --violet: #a3461d;
  --violet-deep: #04434b;
  --serif: "Avenir Next", Avenir, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 18px;
  --radius-sm: 10px;
  --title: #fdf3e2;
  --header-bg: #04434b;
  --brand-glow: none;
  --menu-shadow: 0 16px 40px rgba(4, 67, 75, 0.25);
  --hero-bg:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 160' preserveAspectRatio='xMidYMax slice'%3E%3Cpath d='M0 118C160 74 300 72 440 98C600 128 760 132 900 92C1000 64 1100 48 1200 52L1200 55C1100 54 1000 74 905 104C765 150 600 148 436 118C296 92 160 96 0 146Z' fill='%23feefd8'/%3E%3Cpath d='M0 158C200 120 340 124 480 138S800 160 1200 96' fill='none' stroke='%23feefd8' stroke-opacity='0.35' stroke-width='2'/%3E%3C/svg%3E") center bottom / max(100%, 48rem) auto no-repeat,
    linear-gradient(160deg, #075159 0%, #04434b 55%, #033940 100%);
  --wordmark-shadow: none;
  --icon-glow: 0 0 0 1px rgba(253, 239, 219, 0.3);
}
:root[data-theme="whimbrel"] .site-header,
:root[data-theme="whimbrel"] .hero,
:root[data-theme="whimbrel"] .site-footer {
  --text: #fdf3e2;
  --muted: #c6dad6;
  --gold: #f2d7a6;
  --gold-ink: #04434b;
  --violet: #f2d7a6;
  --line: rgba(253, 239, 219, 0.16);
  --panel: #075159;
  --panel-2: #0a5a62;
  --menu-button-line: rgba(242, 215, 166, 0.45);
  --menu-button-bg: rgba(3, 52, 58, 0.7);
  --status-line: rgba(242, 215, 166, 0.5);
}
:root[data-theme="whimbrel"] .site-header { border-bottom: 0; }
:root[data-theme="whimbrel"] .site-footer { border-top: 0; background: var(--header-bg); }
:root[data-theme="whimbrel"] h1,
:root[data-theme="whimbrel"] h2 { letter-spacing: -0.01em; }
/* Room under the hero's words for the pen's stroke. */
:root[data-theme="whimbrel"] .hero { padding-bottom: clamp(6rem, 13vw, 8.5rem); }
/* The name in the cream of the bird, the kicker in sand, as the Help Center's hero has them. */
:root[data-theme="whimbrel"] .wordmark { color: var(--title); }
:root[data-theme="whimbrel"] .kicker { color: var(--gold); font-weight: 600; }

/* ---------- Siegebreaker ---------- */
/* siegebreaker.mysticaldoor.com, whose pages ask for it with <html data-theme="siegebreaker">: the
   dusk look of Siegebreaker's Help Center (MysticalDoorSupport 4.18.0, the end of its
   public/css/styles.css), with the same values, so the two read as one place (the plan's S-020).
   Dusk over the valley in the game's title painting, where the studio's is violet night and gold:
   a warmer night, the sunset's amber for the gold, and the sky's ember and the rope's burnt red for
   the violet. It stays dark, as the game's icon is, and keeps the book face for its headings, since
   it is a game of castles. The hero is the painting's boulder in flight over the citadel, under a
   scrim dark enough for its words: the picture is /assets/siegebreaker/hero.webp, which only
   siegebreaker-site has, so no page here asks for this theme. */
:root[data-theme="siegebreaker"] {
  --bg: #14111a;
  --panel: #1d1922;
  --panel-2: #272029;
  --line: rgba(255, 236, 214, 0.09);
  --line-strong: rgba(255, 236, 214, 0.18);
  --text: #f1e8de;
  --muted: #c4b6a8;
  --gold: #f2b066;
  --gold-ink: #22140a;
  --violet: #f08a5d;
  --violet-deep: #a8431f;
  --title: #fbefe0;
  --header-bg: linear-gradient(180deg, rgba(42, 30, 30, 0.92), rgba(18, 14, 20, 0.96));
  --brand-glow: 0 0 22px rgba(240, 138, 93, 0.35);
  --menu-button-line: rgba(242, 176, 102, 0.45);
  --menu-button-bg: rgba(30, 24, 30, 0.75);
  --hero-bg:
    radial-gradient(ellipse at 50% 50%, rgba(20, 17, 26, 0.5) 0%, rgba(20, 17, 26, 0.76) 60%, rgba(20, 17, 26, 0.95) 100%),
    url("/assets/siegebreaker/hero.webp") center 30% / cover no-repeat,
    #14111a;
  --wordmark-shadow: 0 2px 18px rgba(0, 0, 0, 0.9);
  --icon-glow: 0 0 18px rgba(240, 138, 93, 0.3);
  --status-line: rgba(240, 138, 93, 0.5);
}
/* The hero's words stand on the painting, so each carries the wordmark's shadow too. */
:root[data-theme="siegebreaker"] .hero .kicker,
:root[data-theme="siegebreaker"] .hero .lede { color: var(--text); text-shadow: var(--wordmark-shadow); }
:root[data-theme="siegebreaker"] .hero .status { background: var(--menu-button-bg); }