@font-face {
  font-family: "Px Galmuri11";
  src: url("/fonts/Galmuri11-latin.d0866e92ef.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-017F, U+0218-021B, U+02C6-02DD, U+0300-0308, U+0400-045F, U+2000-206F, U+20A0-20CF, U+2100-214F, U+2190-21FF, U+2212-2215, U+25A0-25FF, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Px Galmuri9";
  src: url("/fonts/Galmuri9-latin.8aa08547c3.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-017F, U+0218-021B, U+02C6-02DD, U+0300-0308, U+0400-045F, U+2000-206F, U+20A0-20CF, U+2100-214F, U+2190-21FF, U+2212-2215, U+25A0-25FF, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Px Clear";
  src: url("/fonts/NotoSans-clear.6a9ee0b070.woff") format("woff");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-017F, U+0218-021B, U+02C6-02DD, U+0300-0308, U+0400-045F, U+2000-206F, U+20A0-20CF, U+2100-214F, U+2190-21FF, U+2212-2215, U+25A0-25FF, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Px Fusion ja";
  src: url("/fonts/FusionPixel10-zh_hans-ja.e4b6535c3b.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Px Fusion ko";
  src: url("/fonts/FusionPixel10-zh_hans-ko.c95d6512c3.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Px Fusion zh";
  src: url("/fonts/FusionPixel10-zh_hans-zh.77b6e25acb.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Px Fusion zh-Hant";
  src: url("/fonts/FusionPixel10-zh_hant-zh_Hant.6a7f917815.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Pocket Almanac: the game's pixel-art look (docs/ART-DIRECTION-v2.md, docs/ui/VISUAL-SYSTEM.md).
   - One logical pixel (lp) = 2 CSS px. Sprites come from the game's atlas, saved at a whole-number
     scale by tools/site/make_site_art.py (art/ urls are rewritten to hashed files by build.py)
     and drawn with image-rendering: pixelated. Panels and keys are the game's 9-slices (border-image).
   - Colours: only the 39-colour palette (lib/ui/pixel/palette.dart). Shadows are solid, never blurred.
   - Type: pixel faces at whole multiples of their native size (Galmuri11 12 px, Galmuri9 10 px,
     Fusion Pixel 10 px) for headings, labels and keys (Tiny5 is left to the app: too small here); the "Clear" face (Noto Sans,
     the app's Clear text style) for paragraphs. Arabic uses system fonts (no reviewed pixel face).
   - Quiet: the home desk (night/plum, low contrast) behind everything, long text on panels,
     no gradients, glows, dithers over static content, line icons or pills.
   @font-face rules are prepended by build.py (hashed file names). */

:root {
  /* palette (tools/pixel/palette.txt) */
  --ink: #1b1424;
  --ink2: #2d2236;
  --night: #43314a;
  --plum: #5e4560;
  --mauve: #7e6577;
  --stone: #c4b2a3;
  --shade: #dccdb4;
  --paper: #efe6cd;
  --white: #fff8ea;
  --vermilion: #e04a2f;
  --oxblood: #9a2520;
  --person-d: #6e2338;
  --place-d: #164a4f;
  --place-m: #2b8a7e;
  --place-l: #7cc9a8;
  --science-l: #8cb0e8;
  --culture-d: #46236b;
  --idea-d: #6b4f12;
  --idea-m: #c9952a;
  --idea-l: #f0d27a;

  /* type: families and sizes per script (pixel sizes are whole multiples of the native size) */
  --f-title: "Px Galmuri11", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-label: "Px Galmuri9", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-body: "Px Clear", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-h1: 48px;   --lh-h1: 56px;   /* Galmuri11 x4 */
  --fs-h2: 36px;   --lh-h2: 44px;   /* x3 */
  --fs-title: 24px; --lh-title: 30px; /* x2 */
  --fs-label: 20px; --lh-label: 26px; /* Galmuri9 x2 */
  --fs-body: 17px; --lh-body: 1.6;
  --lp: 2px;
  color-scheme: dark;
}

/* Japanese, Korean, Chinese: Fusion Pixel 10 px (subset to the page's own characters by build.py)
   for headings and labels; system fonts for paragraphs. */
:lang(ja) { --f-title: "Px Fusion ja", "Hiragino Sans", "Yu Gothic UI", Meiryo, "Noto Sans JP", sans-serif;
            --f-body: system-ui, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif; }
:lang(ko) { --f-title: "Px Fusion ko", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
            --f-body: system-ui, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; }
:lang(zh-Hans) { --f-title: "Px Fusion zh", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
            --f-body: system-ui, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; }
:lang(zh-Hant) { --f-title: "Px Fusion zh-Hant", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
            --f-body: system-ui, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif; }
:lang(ja), :lang(ko), :lang(zh-Hans), :lang(zh-Hant) {
  --f-label: var(--f-title);
  --fs-h1: 40px; --lh-h1: 52px; --fs-h2: 30px; --lh-h2: 40px;
  --fs-title: 20px; --lh-title: 30px; --fs-label: 20px; --lh-label: 28px;
}
/* Arabic: no pixel face has had a native-reader check (ART-DIRECTION-v2 §10.1), so Arabic pages use
   smooth system fonts like the app (the pixel art, keys and panels stay). */
:lang(ar) {
  --f-title: "Noto Naskh Arabic", "Segoe UI", Tahoma, "Geeza Pro", sans-serif;
  --f-label: "Noto Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro", sans-serif;
  --f-body: "Noto Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro", sans-serif;
  --fs-h1: 44px; --lh-h1: 64px; --fs-h2: 32px; --lh-h2: 48px; --lh-title: 38px; --lh-label: 32px;
  --fs-body: 18px; --lh-body: 1.75;
}
:lang(ar) :is(h1, h2, h3, .btn) { font-weight: 600; }
/* Russian: Galmuri has Cyrillic; paragraphs fall back to the system sans (Clear is Latin only). */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--ink2);
  /* every picture on the site is pixel art: nearest neighbour wherever the browser scales it */
  image-rendering: pixelated;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--paper);
  /* the home screen's desk: bookcloth with blind-stamped diamonds, night / plum / ink2 */
  background: var(--night) url("/assets/art/desk.0363a28399.png") repeat;
  background-size: 32px 32px;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }

/* Pixel faces: no synthetic bold or italics, no smoothing where the platform lets us turn it off. */
h1, h2, h3, .eyebrow, .btn, .px {
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-smoothing: none;
}
h1, h2, h3 { font-family: var(--f-title); margin: 0 0 16px; color: var(--paper); }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-title); line-height: var(--lh-title); }

p { margin: 0 0 16px; }
/* Everything clickable shows the hand cursor (native buttons default to the arrow). */
a[href], button:not(:disabled), summary, label[for], select, [role="button"] { cursor: pointer; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
a { color: var(--idea-l); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { color: var(--white); }

/* Focus: a solid 2 px ring (gold on the desk, vermilion pencil on paper). */
:focus-visible { outline: 2px solid var(--idea-l); outline-offset: 2px; }
main:focus { outline: none; }

.wrap { width: 100%; max-width: 1136px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 720px) { .wrap { padding-inline: 32px; } }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; inset-inline-start: 8px; top: -80px; z-index: 50; padding: 8px 16px;
  background: var(--paper); color: var(--ink); font-family: var(--f-label); font-size: var(--fs-label);
}
.skip:focus { top: 8px; }
.todo { background: var(--idea-l); color: var(--ink); padding: 0 4px; }

/* ---------- 9-slice pieces (the game's UI kit, 2 px per lp) ----------
   Panels are sliced 4 lp in from each edge (the app uses 3): the paper glint at (3, 2) then stays in
   the corner instead of being stretched along the top edge. */
.panel {
  border-style: solid; border-width: 8px;
  border-image: url("/assets/art/panel.00bc58d1ad.png") 8 fill / 8px stretch;
  color: var(--ink);
}
.panel-dark {
  border-style: solid; border-width: 8px;
  border-image: url("/assets/art/panel-dark.7502b18806.png") 8 fill / 8px stretch;
  color: var(--paper);
}
.panel :focus-visible, .sheet :focus-visible, .lang-list :focus-visible { outline-color: var(--vermilion); }
.panel a, .sheet a { color: var(--culture-d); }
.panel a:hover, .sheet a:hover { color: var(--person-d); }

/* ---------- keys (buttons): the teal key on its plinth; pressed, it sinks 2 lp ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 2px 14px 0;
  font-family: var(--f-title); font-size: var(--fs-title); line-height: var(--lh-title);
  text-decoration: none; text-align: center; cursor: pointer; max-width: 100%; text-wrap: balance;
  color: var(--white);
  background: none;
  border-style: solid; border-width: 4px 6px 10px;
  border-image: url("/assets/art/key.cc5eeab367.png") 4 6 10 fill / 4px 6px 10px stretch;
}
.btn:hover { color: var(--white); }
.btn:active { border-width: 8px 6px 6px; border-image: url("/assets/art/key-down.4587fc04e7.png") 8 6 6 fill / 8px 6px 6px stretch; }
.btn-secondary { color: var(--ink); border-image-source: url("/assets/art/key-paper.eab85f4c2f.png"); }
.btn-secondary:hover { color: var(--ink); }
.btn-secondary:active { border-image-source: url("/assets/art/key-paper-down.57fddb041d.png"); }
.btn-large { min-height: 56px; padding-inline: 20px; }
.btn-small { min-height: 44px; padding-inline: 10px; white-space: nowrap; }
.btn:focus-visible { outline-offset: 0; }
/* The teal key's label is white on teal (3.9:1): large text only, so it is never under 24 px.
   CJK pixel text is 20 or 30 px: big keys go to 30 px, the small header key uses the darker key. */
:lang(ja) .btn-primary, :lang(ko) .btn-primary, :lang(zh-Hans) .btn-primary, :lang(zh-Hant) .btn-primary {
  font-size: 30px; line-height: 40px;
}
:lang(ja) .btn-primary.btn-small, :lang(ko) .btn-primary.btn-small,
:lang(zh-Hans) .btn-primary.btn-small, :lang(zh-Hant) .btn-primary.btn-small {
  font-size: 20px; line-height: 30px; border-image-source: url("/assets/art/key-dark.86a926a9bb.png");
}
:lang(ja) .btn-primary.btn-small:active, :lang(ko) .btn-primary.btn-small:active,
:lang(zh-Hans) .btn-primary.btn-small:active, :lang(zh-Hant) .btn-primary.btn-small:active {
  border-image-source: url("/assets/art/key-dark-down.4642bc9b7c.png");
}

/* ---------- header ---------- */
.site-header {
  background: var(--ink2);
  border-bottom: 2px solid var(--ink);
  box-shadow: 0 2px 0 var(--plum);
  position: relative; z-index: 20;
}
.header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand-emblem { width: 48px; height: 40px; }
.brand-logo { width: 140px; height: auto; }
.header-nav { display: flex; align-items: center; gap: 12px; }
.header-link {
  font-family: var(--f-label); font-size: var(--fs-label); line-height: var(--lh-label);
  color: var(--paper); text-decoration: none; padding: 8px 4px;
  -webkit-font-smoothing: none;
}
.header-link:hover, .header-link[aria-current] { color: var(--idea-l); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (max-width: 559px) {
  .brand-emblem { display: none; }
  .header-link { display: none; }  /* Help is the first link of the footer */
  .header-row { min-height: 64px; gap: 4px 8px; }
  .header-nav { gap: 6px; }
}
@media (max-width: 400px) {
  .lang-code { display: none !important; }  /* the globe is the language button */
  .lang-menu > summary { padding-inline: 4px; gap: 6px; }
  .lang-menu > summary::after { display: none; }
}

/* language menu: a details/summary with the game's globe icon; the list is a paper panel */
.lang-menu { position: relative; }
.lang-menu > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 4px 8px;
  font-family: var(--f-label); font-size: var(--fs-label); line-height: var(--lh-label); color: var(--paper);
  -webkit-font-smoothing: none;
}
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary::after {
  content: ""; width: 14px; height: 16px; flex: none;
  background: url("/assets/art/arrow-down.6592ec108d.png") center / 14px 16px no-repeat;
}
.lang-menu[open] > summary::after { transform: scaleY(-1); }
.lang-menu > summary:hover .lang-current { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.globe { width: 22px; height: 22px; flex: none; }
.lang-code { display: none; }
@media (max-width: 899px) {
  .lang-current { display: none; }
  .lang-code { display: inline; }
}
.lang-list {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 30;
  list-style: none; margin: 0; padding: 6px;
  display: grid; grid-template-columns: repeat(2, minmax(9.5rem, auto)); gap: 2px 8px;
  border-style: solid; border-width: 8px;
  border-image: url("/assets/art/panel.00bc58d1ad.png") 8 fill / 8px stretch;
  box-shadow: 4px 4px 0 var(--ink);
  max-height: 75vh; overflow: auto;
}
.lang-list a {
  display: block; padding: 8px 10px; color: var(--ink); text-decoration: none; font-size: 16px; line-height: 1.4;
}
.lang-list a:hover { background: var(--shade); color: var(--ink); }
.lang-list a[aria-current] { background: var(--ink); color: var(--paper); }
@media (max-width: 420px) {
  .lang-list { position: fixed; inset-inline: 16px; top: 72px; grid-template-columns: 1fr 1fr; }
}

/* ---------- landing ---------- */
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-label); font-size: var(--fs-label); line-height: var(--lh-label);
  color: var(--idea-l); margin: 0 0 12px;
}
.lead { font-size: 19px; line-height: 1.6; color: var(--paper); max-width: 34em; }
:lang(ar) .lead { font-size: 20px; }

.hero { padding-block: 56px 72px; }
.hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 1fr) 560px; gap: 48px; } }
.hero-title { margin-bottom: 20px; text-shadow: 0 4px 0 var(--ink); }
@media (max-width: 719px) {
  :root { --fs-h1: 36px; --lh-h1: 44px; --fs-h2: 24px; --lh-h2: 32px; }
  :lang(ja), :lang(ko), :lang(zh-Hans), :lang(zh-Hant) { --fs-h1: 40px; --lh-h1: 50px; --fs-h2: 30px; --lh-h2: 40px; }
  :lang(ar) { --fs-h1: 34px; --lh-h1: 52px; --fs-h2: 26px; --lh-h2: 40px; }
  .hero { padding-block: 32px 48px; }
}
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; }
.cta-row p { margin: 0; }
.cta-note {
  font-family: var(--f-label); font-size: var(--fs-label); line-height: var(--lh-label); color: var(--shade);
  -webkit-font-smoothing: none;
}
.stores { margin-top: 24px; }
.stores-title { font-family: var(--f-label); font-size: var(--fs-label); color: var(--stone); margin-bottom: 8px; }
.store-links { display: flex; flex-wrap: wrap; gap: 12px; }
.store-link { font-family: var(--f-label); font-size: var(--fs-label); color: var(--paper); }

/* The hand of real cards: no rotation (pixel art turns only in 90° steps), solid ink shadows. */
.hero-art { position: relative; width: 560px; max-width: 100%; height: 384px; margin-inline: auto; }
.hero-card { position: absolute; width: 240px; height: 336px; filter: drop-shadow(4px 4px 0 var(--ink)); }
.hc-left { inset-inline-start: 0; top: 40px; }
.hc-right { inset-inline-end: 0; top: 40px; }
.hc-mid { left: 50%; margin-left: -120px; top: 0; z-index: 1; filter: drop-shadow(6px 6px 0 var(--ink)); }
@media (max-width: 599px) {
  .hero-art { width: 328px; height: 380px; }
}

.section-title { margin-bottom: 24px; text-shadow: 0 2px 0 var(--ink); }

.features { padding-block: 32px 56px; }
.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 860px) { .feature-list { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.feature { padding: 18px 18px 8px; }
.feature h3 { color: var(--ink); margin: 16px 0 10px; }
.feature p { color: var(--ink); font-size: 16px; }
.feature-art { width: auto; height: 78px; }

.dig { padding-block: 24px 56px; }
.dig-panel { display: grid; gap: 28px; padding: 22px; align-items: center; }
@media (min-width: 860px) { .dig-panel { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); padding: 34px; } }
.dig-text p { color: var(--paper); }
.dig .eyebrow-art { width: 40px; height: 40px; }
.dig-grid-figure { margin: 0; justify-self: center; }
.dig-grid {
  width: max-content; margin-inline: auto;
  display: grid; grid-template-columns: repeat(5, 32px); grid-auto-rows: 32px; gap: 4px;
  padding: 10px; background: var(--ink); box-shadow: 4px 4px 0 var(--ink2);
}
.dig-grid i { display: block; box-shadow: inset 0 -4px 0 var(--ink2); }
.g-fame { background: var(--place-m); }
.g-mult { background: var(--vermilion); }
.g-ink { background: var(--idea-m); }
.g-off { background: var(--night); }
.g-off { box-shadow: none; }
.dig-grid-figure figcaption {
  margin-top: 14px; text-align: center; color: var(--stone);
  font-family: var(--f-label); font-size: var(--fs-label); line-height: var(--lh-label); -webkit-font-smoothing: none;
}

/* Screenshots: the app at 1 px per dp (2 px per lp), never scaled up by a fraction on wide screens. */
.screens { padding-block: 24px 56px; }
.screens .wrap-wide { max-width: 1290px; }
.screen-strip {
  list-style: none; margin: 0; padding: 4px 4px 16px; display: flex; gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
}
.screen { flex: none; scroll-snap-align: start; }
/* centred when they fit, scrollable from the first one when they don't */
.screen:first-child { margin-inline-start: auto; }
.screen:last-child { margin-inline-end: auto; }
.screen img {
  width: 390px; max-width: calc(100vw - 72px); height: auto;
  border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
}

.trust { padding-block: 24px 72px; }
.final-cta { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-top: 40px; }
.final-art { width: 60px; height: 60px; }

/* ---------- inner pages ---------- */
.page-head { padding-block: 48px 24px; }
.page-head .lead { margin-bottom: 0; }
.not-found { padding-block: 72px; }
.not-found-art { display: flex; align-items: flex-end; gap: 20px; margin-bottom: 28px; }
.not-found-art img:first-child { width: 132px; height: auto; }
.not-found-art img:last-child { width: 60px; height: auto; }

.support-grid { display: grid; gap: 32px; padding-bottom: 72px; align-items: start; }
@media (min-width: 900px) { .support-grid { grid-template-columns: minmax(0, 1fr) 340px; } }
.faq .section-title { margin-bottom: 20px; }
.faq-item {
  margin-bottom: 14px; color: var(--ink);
  border-style: solid; border-width: 8px;
  border-image: url("/assets/art/panel.00bc58d1ad.png") 8 fill / 8px stretch;
}
.faq-item > summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 12px 52px 12px 14px;
  font-family: var(--f-title); font-size: var(--fs-title); line-height: var(--lh-title);
  -webkit-font-smoothing: none;
}
[dir="rtl"] .faq-item > summary { padding: 12px 14px 12px 52px; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: ""; position: absolute; inset-inline-end: 16px; top: 18px; width: 14px; height: 16px;
  background: url("/assets/art/arrow-down.6592ec108d.png") center / 14px 16px no-repeat;
}
.faq-item[open] > summary::after { transform: scaleY(-1); }
.faq-item > summary:focus-visible { outline: 2px solid var(--vermilion); outline-offset: -2px; }
.faq-item > p, .faq-item > ul { margin: 0 14px 16px; }
.faq-item a { color: var(--culture-d); }
.contact-card {
  padding: 22px;
  border-style: solid; border-width: 8px;
  border-image: url("/assets/art/panel-dark.7502b18806.png") 8 fill / 8px stretch;
}
.contact-card .section-title { font-size: var(--fs-title); line-height: var(--lh-title); }
.contact-card p { color: var(--paper); }

/* Legal sheets: long text in the Clear face on a paper panel (never on the patterned desk). */
.sheet-wrap { width: 100%; max-width: 860px; margin-inline: auto; padding: 40px 16px 72px; }
.sheet {
  color: var(--ink); padding: 26px 22px 18px;
  border-style: solid; border-width: 8px;
  border-image: url("/assets/art/panel.00bc58d1ad.png") 8 fill / 8px stretch;
  box-shadow: 4px 4px 0 var(--ink);
}
@media (min-width: 720px) { .sheet { padding: 44px 50px 30px; } }
.sheet h1, .sheet h2, .sheet h3 { color: var(--ink); }
.sheet h1 { font-size: var(--fs-h2); line-height: var(--lh-h2); margin-bottom: 12px; }
.sheet a { color: var(--culture-d); }
.sheet :focus-visible { outline-color: var(--vermilion); }
.sheet strong { font-weight: 600; }
.updated, .sheet-lead { color: var(--plum); }
.sheet-lead { font-size: 18px; }
.sheet-head { margin-bottom: 24px; }
.translation-note {
  font-size: 15px; color: var(--ink); background: var(--shade); padding: 8px 12px; margin-bottom: 20px;
  box-shadow: inset 0 0 0 2px var(--stone);
}
.summary {
  background: var(--shade); color: var(--ink); padding: 18px 20px 6px; margin: 0 0 28px;
  box-shadow: inset 0 0 0 2px var(--ink), 4px 4px 0 var(--stone);
}
.summary-title { font-size: var(--fs-title); line-height: var(--lh-title); margin-bottom: 10px; }
.summary ul { margin: 0 0 12px; }
.toc { margin: 0 0 32px; }
.toc-title {
  font-family: var(--f-label); font-size: var(--fs-label); line-height: var(--lh-label); color: var(--plum);
  margin-bottom: 8px; -webkit-font-smoothing: none;
}
.toc ol { margin: 0; padding-inline-start: 1.6em; columns: 2 16rem; column-gap: 32px; }
.toc li { margin-bottom: 6px; break-inside: avoid; }
.legal section { padding-top: 22px; margin-top: 8px; position: relative; scroll-margin-top: 16px; }
.legal section::before {
  /* the pencil dotted rule (BrassRule): 2 px dots, 2 px apart */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: repeating-linear-gradient(90deg, var(--stone) 0 2px, transparent 2px 6px);
}
.legal h2 { font-size: var(--fs-title); line-height: var(--lh-title); margin-bottom: 12px; }
.legal ul, .summary ul { padding-inline-start: 1.4em; }
.legal li, .summary li { margin-bottom: 8px; }
.legal li::marker, .summary li::marker { color: var(--vermilion); }
.legal ul + ul { margin-top: -8px; }
.font-list li span { color: var(--plum); }

/* ---------- footer ---------- */
.site-footer {
  background: var(--ink2); color: var(--stone);
  border-top: 2px solid var(--ink); box-shadow: inset 0 2px 0 var(--plum);
  padding-block: 44px 56px; font-size: 15px;
}
.footer-grid { display: grid; gap: 32px; }
@media (min-width: 860px) { .footer-grid { grid-template-columns: 1.3fr 0.7fr 1.2fr; gap: 40px; } }
.footer-brand { margin-bottom: 16px; }
.footer-brand img { width: 140px; }
.footer-about p { color: var(--stone); }
.footer-about a, .footer-links a, .footer-langs a { color: var(--paper); }
.footer-about a:hover, .footer-links a:hover, .footer-langs a:hover { color: var(--idea-l); }
.operator { color: var(--stone); }
.footer-heading {
  font-family: var(--f-label); font-size: var(--fs-label); line-height: var(--lh-label);
  font-weight: 400; color: var(--idea-l); margin: 0 0 12px; -webkit-font-smoothing: none;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 8px; }
.footer-links a, .footer-lang-list a { text-decoration: none; display: inline-block; padding-block: 4px; }
.footer-links a:hover, .footer-lang-list a:hover { text-decoration: underline; }
.footer-lang-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.footer-lang-list a[aria-current] { color: var(--idea-l); }

/* ---------- language suggestion (English pages only, after a choice it stays away) ---------- */
.lang-suggest {
  position: fixed; inset-inline: 12px; bottom: 12px; z-index: 40; max-width: 36rem; margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px;
  color: var(--paper);
  border-style: solid; border-width: 8px;
  border-image: url("/assets/art/panel-dark.7502b18806.png") 8 fill / 8px stretch;
  box-shadow: 4px 4px 0 var(--ink);
}
.lang-suggest[hidden] { display: none; }
.lang-suggest p { margin: 0; flex: 1 1 14rem; }
.lang-suggest .actions { display: flex; gap: 10px; }
.lang-suggest .btn { font-size: var(--fs-title); }
/* keep the footer's last lines clear of the fixed bar while it shows */
body:has(.lang-suggest:not([hidden])) { padding-bottom: 150px; }

/* ---------- Play placeholder ---------- */
.play-placeholder { padding-block: 96px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media (forced-colors: active) {
  .btn, .panel, .panel-dark, .faq-item, .sheet, .contact-card, .lang-list, .lang-suggest { border: 2px solid CanvasText; border-image: none; }
}

/* Pack odds page */
.odds-wrap { overflow-x: auto; margin: 0 0 8px; }
.odds-table { border-collapse: collapse; width: 100%; min-width: 420px; }
.odds-table th, .odds-table td { padding: 8px 10px; text-align: end; border-bottom: 2px solid currentColor; font-variant-numeric: tabular-nums; }
.odds-table th:first-child, .odds-table thead th { text-align: start; }
.odds-table thead th { font-weight: 600; vertical-align: bottom; }