/* Hallmark · shape: Split Studio · genre: playful · theme: Carnival (deal 3/3, seed hub-homepage-browser-party-9e0f·62a8d740·2026-11-03·r0) · job: try · draw: c1fe52
 * hero: Counter · nav: slab · footer: mast · imagery: the product (Blender frames from the game's own trailer, map renders, the trailer) · signature: one village square shown by night and by day, the game's own loop · carnival: cold-snap
 * axes: light/display-heavy/chromatic-yellow · posture: full-palette · contrast: pass · fold: pass · v2.0.0 */
/* answered 23: the two accent bands are the declared full-palette posture, Carnival's own range, two a page at most */
/* waive 44c: game hero visual sits 61px off the text centre because the print is tilted and its fact block overhangs; measured on the box, not the picture */
/* answered F4: the selected role tab is a state of the switcher, not a second primary action */
/* Sinh bởi tools/fonts.mjs: Big Shoulders Display, Be Vietnam Pro, Oswald + Inter (Cyrillic) (SIL OFL 1.1), tự phục vụ */
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/be-vietnam-pro-400-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/be-vietnam-pro-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/be-vietnam-pro-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/be-vietnam-pro-500-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/be-vietnam-pro-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/be-vietnam-pro-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/big-shoulders-display-800-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/big-shoulders-display-800-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/big-shoulders-display-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/inter-400-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/inter-400-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/inter-500-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/inter-500-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/oswald-700-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/oswald-700-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  color-scheme: light;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --color-error: oklch(52% 0.19 27); --color-success: oklch(50% 0.12 150);
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
  --color-paper: oklch(92% 0.045 50); --color-paper-2: oklch(88% 0.050 45); --color-paper-3: oklch(82% 0.060 40);
  --color-ink: oklch(18% 0.080 20); --color-ink-2: oklch(28% 0.060 25); --color-muted: oklch(42% 0.050 30);
  --color-rule: oklch(40% 0.21 25); --color-accent: oklch(86% 0.18 95); --color-accent-2: oklch(40% 0.21 25);
  --color-accent-ink: oklch(18% 0.080 20); --color-focus: oklch(40% 0.21 25);
  --font-display: "Big Shoulders Display", "Oswald", Impact, sans-serif; --font-body: "Be Vietnam Pro", "Inter", system-ui, sans-serif;
  --font-outlier: var(--font-body);
  --radius-card: 2px; --radius-pill: 2px; --rule-hair: 1px; --rule-bar: 2px; --shadow-card: 4px 4px 0 var(--color-ink);
  --tracking-display: 0.015em; --display-weight: 800;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight, 700); font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1.05; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1 { max-width: 20ch; font-size: var(--text-display); } h2 { max-width: 30ch; font-size: var(--text-section); } h3 { max-width: 40ch; font-size: var(--text-title); line-height: 1.2; }
.lead { font-size: var(--text-lead); line-height: 1.45; max-width: 52ch; }
p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: 65ch; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.num, .figure, td.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-slot] { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--color-paper-2, var(--color-paper)), var(--color-paper-3, var(--color-paper))); }
[data-slot] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
[data-slot]:has(> img) > :not(img):not([data-keep]) { display: none !important; }
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } }
@media (prefers-reduced-motion: reduce) { *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }
/* photographs: natural vib=20 con=10 */
[data-slot] > img { filter: saturate(1.1) contrast(1.1); }

/* Hallmark · shape: Split Studio · genre: playful · theme: Carnival (deal 3/3, seed hub-homepage-browser-party-9e0f·62a8d740·2026-11-03·r0) · job: try · draw: c1fe52
 * hero: Counter · nav: slab · footer: mast · imagery: the product (Blender frames from the game's own trailer, map renders, the trailer) · signature: one village square shown by night and by day, the game's own loop · carnival: cold-snap
 * axes: light/display-heavy/chromatic-yellow · posture: full-palette · contrast: pass · fold: pass · v2.0.0 */
/* answered 23: the two accent bands are the declared full-palette posture, Carnival's own range, two a page at most */
/* waive 44c: game hero visual sits 61px off the text centre because the print is tilted and its fact block overhangs; measured on the box, not the picture */
/* answered F4: the selected role tab is a state of the switcher, not a second primary action */
/* answered 77: the donate page is short on purpose: the ask, where it goes, and the free way to help */
/* hub pass (2026-11-03): open tables read live from each game server, games shelf + workshop card from content/, shared three steps, updates from content/news.json */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, a hub with one game reads thin; led with the game's own night and day instead of a catalogue grid, and said plainly that the next game is being built */
/* waive 37: body face Be Vietnam Pro replaces Golos Text, which has no Vietnamese glyphs; it is also the game lobby's own body face */

/* ---------------------------------------------------------------- shared */
body { font-weight: 400; }
h1, h2, h3 { text-transform: uppercase; color: var(--color-ink); }
h1 { font-size: clamp(3.25rem, 6vw + 1rem, 8.5rem); line-height: 0.95; max-width: 12ch; }
h2 { font-size: var(--text-display-s); line-height: 1; }
/* Chữ hoa tiếng Việt có dấu chồng (Ầ, Ế, Ữ): dòng 0.95 làm dấu đụng dòng trên, nên chừa thêm chỗ */
:lang(vi) h1, :lang(vi) .role__name, :lang(vi) .close h2 { line-height: 1.12; }
:lang(vi) h2 { line-height: 1.12; }
.lead { color: var(--color-ink-2); }
section { padding-block: var(--section-gap-s); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-xl); }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* controls: the pair, a first-accent block beside the same block outlined in ink */
.btn { display: inline-flex; align-items: center; min-height: 52px; padding: 0 var(--space-lg); border: var(--rule-bar) solid var(--color-ink); border-radius: var(--radius-pill); box-shadow: var(--shadow-card); background: var(--color-paper); color: var(--color-ink); font: 800 var(--text-lg)/1 var(--font-display); text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-paper-3); }
.btn:active { box-shadow: 1px 1px 0 var(--color-ink); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-paper); }
.textlink { color: var(--color-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--color-accent-2); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.textlink:hover { color: var(--color-accent-2); }
.textlink:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* a print pinned to the wall: ink border, hard shadow, may tilt a degree */
.print { position: relative; margin: 0; border: var(--rule-bar) solid var(--color-ink); border-radius: var(--radius-card); box-shadow: var(--shadow-card); background: var(--color-ink); }
.print img, .print video { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.1) contrast(1.05); }
.print--tilt { transform: rotate(-1.2deg); }
.tag { position: absolute; left: calc(-1 * var(--space-md)); bottom: calc(-1 * var(--space-lg)); padding: var(--space-sm) var(--space-md); border: var(--rule-bar) solid var(--color-ink); background: var(--color-accent-2); color: var(--color-paper); font: 500 var(--text-lg)/1.2 var(--font-body); box-shadow: var(--shadow-card); transform: rotate(1.5deg); }

.band--a { background: var(--color-accent); color: var(--color-accent-ink); }
.band--b { background: var(--color-accent-2); color: var(--color-paper); }
.band--paper { background: var(--color-paper-2); }
.band--b :focus-visible { outline-color: var(--color-accent); }

/* ---------------------------------------------------------------- nav: slab */
.slab { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-ink); color: var(--color-paper); border-bottom: var(--rule-bar) solid var(--color-ink); }
.slab__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 72px; }
.wordmark { font: 800 var(--text-2xl)/1 var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-display); color: var(--color-paper); text-decoration: none; white-space: nowrap; }
.wordmark:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.slab__links { display: flex; align-items: center; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.slab__links a { color: var(--color-paper); font-size: var(--text-md); font-weight: 500; text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.slab__links a:hover, .slab__links a[aria-current] { color: var(--color-accent); }
.slab__links a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.slab__links .slab__donate { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: var(--rule-bar) solid var(--color-accent); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font: 800 var(--text-lg)/1 var(--font-display); text-transform: uppercase; }
.slab__links .slab__donate:hover, .slab__links .slab__donate[aria-current="page"] { background: var(--color-ink); color: var(--color-accent); }
.slab__lang { display: flex; align-items: center; }
.slab__select { position: relative; display: inline-flex; align-items: center; color: var(--color-paper); transition: color var(--dur-short) var(--ease-out); }
.slab__select svg { position: absolute; left: var(--space-sm); fill: none; stroke: currentColor; stroke-width: 1.6; pointer-events: none; }
.slab__select::after { content: ""; position: absolute; right: var(--space-sm); width: 7px; height: 7px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); pointer-events: none; }
.slab__select select { appearance: none; -webkit-appearance: none; min-height: 44px; padding: 0 calc(var(--space-sm) + 20px) 0 calc(var(--space-sm) + 26px); border: var(--rule-bar) solid color-mix(in oklab, var(--color-paper) 35%, transparent); border-radius: var(--radius-pill); background: transparent; color: inherit; font-size: var(--text-md); font-weight: 500; cursor: pointer; transition: border-color var(--dur-short) var(--ease-out); }
.slab__select select option { background: var(--color-ink); color: var(--color-paper); }
.slab__select:hover { color: var(--color-accent); }
.slab__select:hover select { border-color: var(--color-accent); }
.slab__select select:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.slab__langlink { display: none; }
html:not(.js) .slab__select { display: none; }
html:not(.js) .slab__langlink { display: inline; }

/* ---------------------------------------------------------------- hero: counter */
.hero { padding-block: var(--space-2xl) var(--space-3xl); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; min-height: calc(100dvh - 72px - var(--space-2xl) - var(--space-3xl)); }
.hero__text .lead { margin-top: var(--space-lg); }
.hero__visual { aspect-ratio: 6 / 5; }
.hero__game { font-size: clamp(4rem, 9vw + 1rem, 10rem); }
.facts.facts--row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--space-xl) 0 0; max-width: 28rem; }
.facts--row > div { padding-inline: var(--space-md); border-left: var(--rule-bar) solid var(--color-ink); }
.facts--row > div:first-child { padding-left: 0; border-left: 0; }
.facts--row dt { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.facts--row dd { margin: var(--space-2xs) 0 0; font: 800 var(--text-3xl)/1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------------------------------------------------------------- home: the shelf */
.shelf h2 { margin-bottom: var(--space-2xl); }
.shelf__game { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; }
.shelf__cover { display: block; aspect-ratio: 1260 / 1000; transition: box-shadow var(--dur-micro) var(--ease-out); }
.shelf__cover:hover { box-shadow: 8px 8px 0 var(--color-accent-2); }
.shelf__cover:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 6px; }
.shelf__title { font-size: var(--text-section); line-height: 1; }
.shelf__info .lead { margin-top: var(--space-md); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-lg); margin: var(--space-xl) 0 0; }
.facts dt { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.facts dd { margin: var(--space-2xs) 0 0; font-weight: 500; }
.shelf__list { display: grid; gap: var(--space-3xl); margin: 0; padding: 0; list-style: none; }

/* the empty chair: the next game, said plainly, no name until it has one */
.workshop { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2xl); align-items: center; padding: var(--space-xl) var(--space-2xl); border: var(--rule-bar) dashed var(--color-ink); border-radius: var(--radius-card); background: var(--color-paper-2); }
.workshop__no { margin: 0; font: 800 clamp(5rem, 9vw + 1rem, 10rem)/0.85 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-accent-2); }
.workshop h3 { font-size: var(--text-section); line-height: 1; }
.workshop .lead { margin-top: var(--space-md); }

/* ---------------------------------------------------------------- home: open tables (live) */
.live { padding-block: var(--space-2xl); background: var(--color-paper-2); border-block: var(--rule-bar) solid var(--color-ink); }
.live__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-sm) var(--space-lg); }
.live h2 { display: flex; align-items: center; gap: var(--space-sm); }
.live__dot { flex: none; width: 14px; height: 14px; border: var(--rule-bar) solid var(--color-ink); background: var(--color-accent-2); animation: ember 1.6s var(--ease-in-out) infinite alternate; }
@keyframes ember { from { opacity: 1; } to { opacity: 0.35; } }
.live__sum { font-size: var(--text-lead); font-weight: 500; color: var(--color-ink-2); }
.live__list { margin: var(--space-xl) 0 0; padding: 0; list-style: none; border-top: var(--rule-bar) solid var(--color-ink); }
.table { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-lg); padding-block: var(--space-md); border-bottom: var(--rule-bar) solid var(--color-ink); }
.table__main { min-width: 0; }
.table__game { display: inline-block; margin-right: var(--space-sm); padding: var(--space-3xs) var(--space-xs); background: var(--color-ink); color: var(--color-paper); font: 800 var(--text-sm)/1.2 var(--font-display); text-transform: uppercase; vertical-align: 0.2em; }
.table__name { font: 800 var(--text-xl)/1.1 var(--font-display); text-transform: uppercase; overflow-wrap: anywhere; }
.table__meta { display: block; margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }
.table__seats { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-sm); min-width: 15rem; font-weight: 500; }
.table__seats .num { min-width: 3.5ch; text-align: right; }
.pips { display: inline-flex; gap: 3px; }
.pips i { width: 10px; height: 10px; border: var(--rule-bar) solid var(--color-ink); }
.pips i.on { background: var(--color-accent-2); }
.btn--sm { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-md); }
.live__empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-lg); }
.live__more { margin-top: var(--space-md); color: var(--color-muted); }

/* ---------------------------------------------------------------- home: how every game works */
.band--b h3 { color: var(--color-paper); }
.steps__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin: var(--space-2xl) 0 0; padding: 0; list-style: none; }
.steps__list li { padding-top: var(--space-lg); border-top: var(--rule-bar) solid var(--color-paper); }
.steps__no { display: block; font: 800 var(--text-3xl)/1 var(--font-display); color: var(--color-accent); font-variant-numeric: tabular-nums; }
.steps__list h3 { margin-top: var(--space-sm); font-size: var(--text-2xl); text-transform: uppercase; }
.steps__list p { margin-top: var(--space-sm); font-size: var(--text-lead); line-height: 1.45; }

/* ---------------------------------------------------------------- home: around the fire (updates) */
.news__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: end; margin-bottom: var(--space-2xl); }
.news__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.news__img { aspect-ratio: 16 / 10; overflow: hidden; }
.news__meta { margin-top: var(--space-lg); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.news__item h3 { margin-top: var(--space-xs); font-size: var(--text-2xl); text-transform: uppercase; }
.news__item > p:not(.news__meta) { margin-top: var(--space-sm); }
.news__item .textlink { display: inline-block; margin-top: var(--space-md); }

.statement { font: 800 var(--text-display)/1 var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-display); max-width: 18ch; text-wrap: balance; }
.band--b .statement { color: var(--color-paper); }

.support__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; }
.support__visual { aspect-ratio: 16 / 10; }

/* ---------------------------------------------------------------- game page */
.trailer h2 { margin-bottom: var(--space-2xl); }
.trailer__frame { aspect-ratio: 16 / 9; }
.trailer__frame video { background: var(--color-ink); object-fit: contain; }
.trailer__frame video:focus-visible { outline: 3px solid var(--color-accent); outline-offset: -6px; }

.nightday h2 { margin-bottom: var(--space-2xl); }
.nightday__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); }
.nightday figure { margin: 0; }
.nightday .print { aspect-ratio: 16 / 9; }
.nightday figcaption { margin-top: var(--space-lg); font-size: var(--text-lead); max-width: 42ch; }

.roles h2 { margin-bottom: var(--space-xl); }
.switch__tabs { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-xl); }
.switch__tabs button { min-height: 44px; padding: 0 var(--space-md); border: var(--rule-bar) solid var(--color-ink); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); font: 800 var(--text-lg)/1 var(--font-display); text-transform: uppercase; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.switch__tabs button:hover { background: var(--color-paper-3); }
.switch__tabs button[aria-selected="true"] { background: var(--color-ink); color: var(--color-paper); }
.switch__tabs button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.role { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); align-items: center; }
.role + .role { margin-top: var(--space-2xl); }
.js .role + .role { margin-top: 0; }
.js .role[data-hidden] { display: none; }
.role__portrait { aspect-ratio: 4 / 5; max-height: 560px; }
.role--text { grid-template-columns: minmax(0, 1fr); min-height: 360px; align-content: center; }
.role__name { font-size: clamp(3rem, 5vw + 1rem, 6rem); line-height: 0.95; }
.role__text .lead { margin-top: var(--space-lg); font-size: var(--text-2xl); line-height: 1.35; color: var(--color-ink); max-width: 46ch; }

.maps__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: end; margin-bottom: var(--space-2xl); }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(14rem, 18%); gap: var(--gap-columns); margin: 0; padding: 0 var(--gutter) var(--space-lg); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; max-width: calc(var(--container) + 40rem); margin-inline: auto; }
.rail:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.map { scroll-snap-align: start; }
.map img { aspect-ratio: 1; width: 100%; object-fit: cover; border: var(--rule-bar) solid var(--color-ink); box-shadow: var(--shadow-card); }
.map span { display: block; margin-top: var(--space-md); font: 800 var(--text-xl)/1.05 var(--font-display); text-transform: uppercase; }

.need__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); align-items: start; }
.rows { margin: 0; border-top: var(--rule-bar) solid var(--color-accent-2); }
.rows > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-lg); padding-block: var(--space-lg); border-bottom: var(--rule-bar) solid var(--color-accent-2); }
.rows dt { font: 800 var(--text-2xl)/1.05 var(--font-display); text-transform: uppercase; }
.rows dd { margin: 0; font-size: var(--text-lead); line-height: 1.45; }

.close__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-2xl); align-items: end; }
.close h2 { font-size: var(--text-display); line-height: 0.95; }
.close .actions { margin-top: 0; justify-content: flex-end; }
.band--a h2, .band--a .lead { color: var(--color-accent-ink); }

/* ---------------------------------------------------------------- donate */
.hero--donate .hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.give__box { align-self: center; }
.well { border: var(--rule-bar) solid var(--color-ink); border-radius: var(--radius-card); box-shadow: var(--shadow-card); background: var(--color-paper-2); padding: var(--space-xl); }
.give { margin: 0; padding: 0; list-style: none; border-top: var(--rule-bar) solid var(--color-ink); }
.give__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 72px; padding: 0 var(--space-md); border-bottom: var(--rule-bar) solid var(--color-ink); color: var(--color-ink); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.give__row strong { font: 800 var(--text-2xl)/1 var(--font-display); text-transform: uppercase; }
.give__row:hover { background: var(--color-ink); color: var(--color-paper); }
.give__row:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -4px; }
.give__empty { font-size: var(--text-lead); }
/* VietQR: the code itself, big enough to scan off a laptop screen, with the account name beside it */
.qrs > p { margin-top: var(--space-sm); }
.qrs__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 15rem)); gap: var(--space-lg); margin-top: var(--space-lg); }
.qr { margin: 0; }
.qr__img { width: 100%; border: var(--rule-bar) solid var(--color-ink); border-radius: var(--radius-card); box-shadow: var(--shadow-card); background: #fff; }
.qr figcaption { display: flex; flex-direction: column; gap: var(--space-3xs); margin-top: var(--space-md); }
.qr__h { font-size: var(--text-2xl); line-height: 1.05; text-transform: uppercase; }
.qr__label { font: 800 var(--text-xl)/1.1 var(--font-display); letter-spacing: var(--tracking-display); text-transform: uppercase; }
.qr__holder { font-weight: 500; }
.qr__acct { color: var(--color-ink-2); letter-spacing: 0.04em; }
.qr .textlink { align-self: flex-start; margin-top: var(--space-xs); }
.qrs > .qr__phone { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-ink-2); }
.give__links .qr__h { margin-bottom: var(--space-md); }
.give__box > * + * { margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: var(--rule-bar) solid var(--color-ink); }
.fill { padding: 0 0.25em; border: 1px dashed var(--color-muted); border-radius: 3px; color: var(--color-muted); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.bring__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-2xl); align-items: end; }
.bring .statement { max-width: 20ch; }
.bring .actions { margin-top: 0; justify-content: flex-end; }

/* ---------------------------------------------------------------- footer: mast */
.mast { padding-block: var(--space-3xl) var(--space-xl); background: var(--color-ink); color: var(--color-paper); }
.mast__word { margin: 0; font: 800 clamp(3.5rem, 11vw, 11rem)/0.9 var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-display); color: var(--color-accent); overflow-wrap: break-word; min-width: 0; }
.mast__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: var(--rule-bar) solid var(--color-paper-3); }
.mast__line { font-size: var(--text-lead); }
.mast__links { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.mast__links a { color: var(--color-paper); }
.mast__links a:hover { color: var(--color-accent); }
.mast__links a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.mast__legal { margin-top: var(--space-xl); color: var(--color-paper-3); }

/* ---------------------------------------------------------------- chữ Trung, Nhật, Hàn
   Font của theme không có chữ CJK, tự phục vụ thì quá nặng: dùng font hệ thống của từng nước.
   Chữ vuông rộng gần gấp đôi chữ Latin hẹp của font tiêu đề, nên nới bề ngang (ch) và dãn dòng cho tiêu đề. */
:root:lang(zh) { --font-body: "Be Vietnam Pro", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", system-ui, sans-serif; --font-display: "Big Shoulders Display", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", sans-serif; }
:root:lang(ja) { --font-body: "Be Vietnam Pro", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", system-ui, sans-serif; --font-display: "Big Shoulders Display", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", sans-serif; }
:root:lang(ko) { --font-body: "Be Vietnam Pro", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", system-ui, sans-serif; --font-display: "Big Shoulders Display", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", sans-serif; }
:root:lang(ko) body { word-break: keep-all; }
:root:is(:lang(zh), :lang(ja)) body { line-break: strict; }
:root:is(:lang(zh), :lang(ja), :lang(ko)) :is(h1, h2, h3, .statement) { line-height: 1.2; letter-spacing: 0.02em; }
:root:is(:lang(zh), :lang(ja), :lang(ko)) h1 { max-width: 20ch; }
:root:is(:lang(zh), :lang(ja), :lang(ko)) .statement { max-width: 28ch; }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 60rem) {
  .hero__grid, .hero--donate .hero__grid, .shelf__game, .bring__grid, .support__grid, .nightday__pair, .role, .maps__head, .need__grid, .close__grid, .workshop, .news__head, .steps__list { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .news__list { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .workshop { padding: var(--space-lg); gap: var(--space-md); }
  .table { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm) var(--space-md); }
  .table__main { grid-column: 1 / -1; }
  .table__seats { min-width: 0; justify-content: flex-start; }
  .pips { flex-wrap: wrap; max-width: 90px; }
  .hero__grid { min-height: 0; }
  .rows > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .role__portrait { max-width: 22rem; }
  .role__text .lead { font-size: var(--text-lead); }
  .facts--row dd { font-size: var(--text-2xl); }
  .rail { grid-auto-columns: minmax(12rem, 60%); }
  .slab__links { gap: var(--space-md); }
  .slab__links li:not(:last-child):not(:nth-last-child(2)) { display: none; }
}
@media (max-width: 40rem) {
  .wordmark { font-size: var(--text-xl); }
  .slab__links li:nth-last-child(2) { display: none; }
  .well { padding: var(--space-lg); }
  .tag { left: var(--space-xs); bottom: calc(-1 * var(--space-md)); font-size: var(--text-lg); }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .slab__links a, .switch__tabs button, .give__row, .shelf__cover { transition: none; }
}

/* ---------------------------------------------------------------- privacy notice (Luật BVDLCN 2025, NĐ 356/2025) */
.hero--legal { padding-block: var(--space-2xl) var(--space-xl); }
.hero--legal h1 { max-width: 16ch; }
.hero--legal .lead { margin-top: var(--space-lg); }
.legal__meta { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.legal { padding-block: var(--space-xl); }
.legal + .legal { padding-top: 0; }
.legal__lead { margin-bottom: var(--space-lg); }
.legal .rows dd { max-width: 60ch; }
.legal .rows > div:last-child { border-bottom: 0; }
/* form gửi yêu cầu về dữ liệu (lưu ở server game, admin trả lời qua email) */
.request { margin-top: var(--space-xl); display: grid; gap: var(--space-md); max-width: 40rem; }
.request h3 { font-size: var(--text-2xl); text-transform: uppercase; }
.field { display: grid; gap: var(--space-2xs); }
.field label { font-weight: 500; }
.field small { color: var(--color-muted); font-size: var(--text-sm); }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); border: var(--rule-bar) solid var(--color-ink); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); }
.field textarea { resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.request .actions { margin-top: 0; }
.request__status { padding: var(--space-sm) var(--space-md); border: var(--rule-bar) solid var(--color-accent-2); color: var(--color-ink); font-weight: 500; }
.request__status.is-ok { border-color: var(--color-ink); background: var(--color-accent); }
.request button:disabled { opacity: 0.6; cursor: progress; }
.statement__line { display: block; }
.steps .statement { max-width: 22ch; }

/* trang đăng nhập chung (/login/): một tài khoản cho mọi game */
.login { align-self: center; display: grid; gap: var(--space-md); }
.login [hidden] { display: none !important; }
.login__state { display: grid; gap: var(--space-md); }
.login__state .actions { margin-top: 0; flex-wrap: wrap; }
.login__check { display: flex; gap: var(--space-sm); align-items: flex-start; font-weight: 500; cursor: pointer; }
.login__check input { flex: none; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--color-ink); }
.login__google { gap: var(--space-sm); }
.login__g { flex: none; padding: 2px; border-radius: 50%; background: #fff; }
.login .btn:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.login__who { display: flex; gap: var(--space-md); align-items: center; }
.login__who > span { display: grid; gap: var(--space-3xs); min-width: 0; }
.login__who strong { font: 800 var(--text-2xl)/1.05 var(--font-display); text-transform: uppercase; overflow-wrap: anywhere; }
.login__email { color: var(--color-muted); overflow-wrap: anywhere; }
.login__avatar { flex: none; width: 56px; height: 56px; border: var(--rule-bar) solid var(--color-ink); border-radius: 50%; }